Merge pull request #157 from boostcampwm2023/feat/152-icon-read-write

[Feat] 일기 작성, 읽기 모달에 아이콘 출력을 위한 API 연동
boostcampwm2023 · Nov 28, 2023 · d375009 · d375009
2 parents 97c0908 + 8e4c29b
commit d375009
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 12 deletions.
diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js
@@ -1,4 +1,6 @@
-import React from "react";
+/* eslint-disable */
+
+import React, { useState } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { useMutation, useQuery } from "react-query";
 import styled from "styled-components";
@@ -10,15 +12,16 @@ import deleteIcon from "../../assets/deleteIcon.svg";
 
 // TODO: 일기 데이터 수정 API 연결
 function DiaryCreateModal() {
-  const [isInput, setIsInput] = React.useState(false);
-  const [diaryData, setDiaryData] = React.useState({
+  const [isInput, setIsInput] = useState(false);
+  const [diaryData, setDiaryData] = useState({
     title: "test",
     content: "test",
     date: "2023-11-20",
     point: "0,0,0",
     tags: [],
     shapeUuid: "cf3a074a-0707-40c4-a598-c7c17a654476",
   });
+  const [newShapeData, setNewShapeData] = useState(null);
   const userState = useRecoilValue(userAtom);
   const setDiaryState = useSetRecoilState(diaryAtom);
 
@@ -87,7 +90,51 @@ function DiaryCreateModal() {
     data: shapeData,
     // isLoading: shapeIsLoading,
     // isError: shapeIsError,
-  } = useQuery("shape", getShapeFn);
+  } = useQuery("shape", getShapeFn, {
+    onSuccess: (dataList) => {
+      setDiaryData((prev) => ({ ...prev, shapeUuid: dataList[0].uuid }));
+      const newDataList = dataList.map((data) => {
+        const getPromise = () =>
+          fetch(`http://223.130.129.145:3005/shapes/${data.uuid}`, {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${userState.accessToken}`,
+            },
+          });
+
+        return getPromise()
+          .then((res) => {
+            const reader = res.body.getReader();
+            return new ReadableStream({
+              start(controller) {
+                function pump() {
+                  return reader.read().then(({ done, value }) => {
+                    if (done) {
+                      controller.close();
+                      return;
+                    }
+                    controller.enqueue(value);
+                    return pump();
+                  });
+                }
+                return pump();
+              },
+            });
+          })
+          .then((stream) => new Response(stream))
+          .then((res) => res.blob())
+          .then((blob) => URL.createObjectURL(blob))
+          .then((url) => {
+            data.shapeData = url;
+          });
+      });
+
+      Promise.all(newDataList).then(() => {
+        setNewShapeData(dataList);
+      });
+    },
+  });
 
   const {
     mutate: createDiary,
@@ -152,7 +199,10 @@ function DiaryCreateModal() {
           }}
         />
       </DiaryModalTagWrapper>
-      <DiaryModalShapeSelectBox shapeData={shapeData} />
+      <DiaryModalShapeSelectBox
+        shapeData={newShapeData}
+        setDiaryData={setDiaryData}
+      />
       <ModalSideButtonWrapper>
         <ModalSideButton onClick={closeModal}>
           <img src={deleteIcon} alt='delete' />
@@ -174,7 +224,7 @@ function DiaryCreateModal() {
 }
 
 function DiaryModalShapeSelectBox(props) {
-  const { shapeData } = props;
+  const { shapeData, setDiaryData } = props;
 
   return (
     <ShapeSelectBoxWrapper>
@@ -184,8 +234,17 @@ function DiaryModalShapeSelectBox(props) {
       </ShapeSelectTextWrapper>
       <ShapeSelectItemWrapper>
         {shapeData?.map((shape) => (
-          <ShapeSelectBoxItem key={shape.uuid}>
-            {shape.shapePath}
+          <ShapeSelectBoxItem
+            key={shape.uuid}
+            onClick={() =>
+              setDiaryData((prev) => ({ ...prev, shapeUuid: shape.uuid }))
+            }
+          >
+            <img
+              src={shape.shapeData}
+              alt='shape'
+              style={{ width: "100%", height: "100%" }}
+            />
           </ShapeSelectBoxItem>
         ))}
       </ShapeSelectItemWrapper>

diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js
@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import React from "react";
 import { useQuery } from "react-query";
 import styled from "styled-components";
@@ -8,7 +10,6 @@ import ModalWrapper from "../../styles/Modal/ModalWrapper";
 import DiaryDeleteModal from "./DiaryDeleteModal";
 import editIcon from "../../assets/edit.svg";
 import deleteIcon from "../../assets/delete.svg";
-import starIcon from "../../assets/star.svg";
 import indicatorArrowIcon from "../../assets/indicator-arrow.svg";
 
 function DiaryModalEmotionIndicator({ emotion }) {
@@ -55,8 +56,48 @@ async function getDiary(accessToken, diaryUuid) {
 function DiaryReadModal() {
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
   const userState = useRecoilValue(userAtom);
-  const { data, isLoading, isError } = useQuery("diary", () =>
-    getDiary(userState.accessToken, diaryState.diaryUuid),
+  const [shapeData, setShapeData] = React.useState("");
+  const { data, isLoading, isError } = useQuery(
+    "diary",
+    () => getDiary(userState.accessToken, diaryState.diaryUuid),
+    {
+      onSuccess: (_data) => {
+        const getPromise = () =>
+          fetch(`http://223.130.129.145:3005/shapes/${_data.shapeUuid}`, {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${userState.accessToken}`,
+            },
+          });
+
+        return getPromise()
+          .then((res) => {
+            const reader = res.body.getReader();
+            return new ReadableStream({
+              start(controller) {
+                function pump() {
+                  return reader.read().then(({ done, value }) => {
+                    if (done) {
+                      controller.close();
+                      return;
+                    }
+                    controller.enqueue(value);
+                    return pump();
+                  });
+                }
+                return pump();
+              },
+            });
+          })
+          .then((stream) => new Response(stream))
+          .then((res) => res.blob())
+          .then((blob) => URL.createObjectURL(blob))
+          .then((url) => {
+            setShapeData(url);
+          });
+      },
+    },
   );
 
   // TODO: 로딩, 에러 처리 UI 구현
@@ -66,6 +107,7 @@ function DiaryReadModal() {
         Loading...
       </ModalWrapper>
     );
+
   if (isError)
     return (
       <ModalWrapper left='67%' width='40vw' height='65vh' opacity='0.3'>
@@ -132,7 +174,7 @@ function DiaryReadModal() {
         />
         <DiaryModalIcon>
           <img
-            src={starIcon}
+            src={shapeData}
             alt='star'
             style={{
               width: "5rem",