Merge pull request #105 from boostcampwm2023/feat/97-diary-read-api-a…

…nd-response

[Feat] 리스트 보기에서 자세히 보기 버튼 클릭 시 읽기 모달 연결

FE/public/data/data.json

@@ -1,32 +1,42 @@
 [
   {
     "userId": "관리자",
+    "uuid": "테스트 UUID",
     "title": "테스트 제목",
     "content": "테스트 내용",
     "date": "9999-99-99",
     "tags": ["테스트1", "테스트2"],
-    "positive": 10,
-    "neutral": 50,
-    "negative": 40,
-    "sentiment": "중립",
-    "coordinate-x": 0,
-    "coordinate-y": 0,
-    "coordinate-z": 0,
+    "emotion": {
+      "positive": 10,
+      "neutral": 50,
+      "negative": 40,
+      "sentiment": "중립"
+    },
+    "coordinate": {
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
     "shapeUuid": "테스트 별모양 UUID"
   },
   {
-    "userId": "관리자",
+    "userId": "관리자2",
+    "uuid": "테스트 UUID2",
     "title": "테스트 제목2",
     "content": "테스트 내용2",
     "date": "9999-99-99",
     "tags": ["테스트1", "테스트2"],
-    "positive": 10,
-    "neutral": 50,
-    "negative": 40,
-    "sentiment": "중립",
-    "coordinate-x": 0,
-    "coordinate-y": 0,
-    "coordinate-z": 0,
-    "shapeUuid": "테스트 별모양 UUID"
+    "emotion": {
+      "positive": 10,
+      "neutral": 50,
+      "negative": 40,
+      "sentiment": "중립2"
+    },
+    "coordinate": {
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "shapeUuid": "테스트 별모양 UUID2"
   }
 ]

FE/src/atoms/diaryAtom.js

@@ -7,6 +7,7 @@ const diaryAtom = atom({
     isRead: false,
     isDelete: false,
     isList: false,
+    diaryUuid: "1",
   },
 });
 

FE/src/components/DiaryModal/DiaryListModal.js

@@ -1,13 +1,16 @@
-import React, { useLayoutEffect } from "react";
+import React, { useEffect, useLayoutEffect } from "react";
 import { useQuery } from "react-query";
 import styled from "styled-components";
-import { useRecoilValue } from "recoil";
+import { useRecoilValue, useSetRecoilState } from "recoil";
 import userAtom from "../../atoms/userAtom";
+import diaryAtom from "../../atoms/diaryAtom";
 import zoomIn from "../../assets/zoomIn.svg";
 
 function DiaryListModal() {
   const [selectedDiary, setSelectedDiary] = React.useState(null);
   const userState = useRecoilValue(userAtom);
+  const setDiaryState = useSetRecoilState(diaryAtom);
+
   const {
     data: DiaryList,
     // error,
@@ -28,6 +31,15 @@ function DiaryListModal() {
     }
   }, [DiaryList]);
 
+  useEffect(() => {
+    if (selectedDiary) {
+      setDiaryState((prev) => ({
+        ...prev,
+        diaryUuid: selectedDiary?.uuid,
+      }));
+    }
+  }, [selectedDiary]);
+
   if (isLoading) return <div>로딩중...</div>;
 
   return (
@@ -72,7 +84,17 @@ function DiaryListModal() {
       <DiaryListModalItem width='50%'>
         <DiaryTitle>
           {selectedDiary?.title}
-          <DiaryTitleImg src={zoomIn} alt='zoom-in' />
+          <DiaryTitleImg
+            src={zoomIn}
+            alt='zoom-in'
+            onClick={() => {
+              setDiaryState((prev) => ({
+                ...prev,
+                isRead: true,
+                isList: false,
+              }));
+            }}
+          />
         </DiaryTitle>
         <DiaryContent>{selectedDiary?.content}</DiaryContent>
       </DiaryListModalItem>

FE/src/components/DiaryModal/DiaryReadModal.js

@@ -1,8 +1,9 @@
 import React from "react";
 import { useQuery } from "react-query";
 import styled from "styled-components";
-import { useRecoilState } from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
 import diaryAtom from "../../atoms/diaryAtom";
+import userAtom from "../../atoms/userAtom";
 import ModalWrapper from "../../styles/Modal/ModalWrapper";
 import DiaryDeleteModal from "./DiaryDeleteModal";
 import editIcon from "../../assets/edit.svg";
@@ -41,15 +42,22 @@ function DiaryModalEmotionIndicator({ emotion }) {
   );
 }
 
-async function getDiary() {
-  return fetch("http://localhost:3000/data/data.json").then((res) =>
-    res.json(),
-  );
+async function getDiary(userState, diaryUuid) {
+  return fetch(`http://223.130.129.145:3005/diaries/${diaryUuid}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${userState.accessToken}`,
+    },
+  }).then((res) => res.json());
 }
 
 function DiaryReadModal() {
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
-  const { data, isLoading, isError } = useQuery("diary", getDiary);
+  const userState = useRecoilValue(userAtom);
+  const { data, isLoading, isError } = useQuery("diary", () =>
+    getDiary(userState, diaryState.diaryUuid),
+  );
 
   // TODO: 로딩, 에러 처리 UI 구현
   if (isLoading) return <div>로딩중...</div>;
@@ -87,21 +95,21 @@ function DiaryReadModal() {
           />
         </DiaryButton>
       </DiaryModalHeader>
-      <DiaryModalContent>{data[0].content}</DiaryModalContent>
+      <DiaryModalContent>{data.content}</DiaryModalContent>
       <DiaryModalTagBar>
         <DiaryModalTagName>태그</DiaryModalTagName>
         <DiaryModalTagList>
-          {data[0].tags.map((tag) => (
+          {data.tags.map((tag) => (
             <DiaryModalTag>{tag}</DiaryModalTag>
           ))}
         </DiaryModalTagList>
       </DiaryModalTagBar>
       <DiaryModalEmotionBar>
         <DiaryModalEmotionIndicator
           emotion={{
-            positive: data[0].positive,
-            neutral: data[0].neutral,
-            negative: data[0].negative,
+            positive: data.emotion.positive,
+            neutral: data.emotion.neutral,
+            negative: data.emotion.negative,
           }}
         />
         <DiaryModalIcon>