fix: 일기 작성, 일기 읽기 모달 아이콘 svg 형태로 수정

기존 png로 불러오던 모양 데이터를 svg형태로 받아오도록 수정하였습니다.
boostcampwm2023 · Nov 29, 2023 · 2224f68 · 2224f68
1 parent 1c32fae
commit 2224f68
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 134 deletions.
diff --git a/FE/.eslintrc.js b/FE/.eslintrc.js
@@ -26,5 +26,6 @@ module.exports = {
     "prettier/prettier": ["error", { endOfLine: "auto" }],
     "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
     "react/prop-types": "off",
+    "import/no-extraneous-dependencies": ["off"],
   },
 };
diff --git a/FE/package-lock.json b/FE/package-lock.json
diff --git a/FE/package.json b/FE/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@react-three/drei": "^9.88.17",
+    "@react-three/drei": "^9.89.0",
     "@react-three/fiber": "^8.15.10",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js
@@ -1,11 +1,10 @@
-/* eslint-disable */
-
 import React, { useEffect, useState } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
-import { useMutation, useQuery } from "react-query";
+import { useMutation } from "react-query";
 import styled from "styled-components";
 import userAtom from "../../atoms/userAtom";
 import diaryAtom from "../../atoms/diaryAtom";
+import shapeAtom from "../../atoms/shapeAtom";
 import ModalWrapper from "../../styles/Modal/ModalWrapper";
 import DiaryModalHeader from "../../styles/Modal/DiaryModalHeader";
 import deleteIcon from "../../assets/deleteIcon.svg";
@@ -26,7 +25,6 @@ function DiaryCreateModal(props) {
     tags: [],
     shapeUuid: "",
   });
-  const [newShapeData, setNewShapeData] = useState(null);
 
   useEffect(() => {
     const handleBeforeUnload = (e) => {
@@ -62,15 +60,6 @@ function DiaryCreateModal(props) {
     setDiaryData({ ...diaryData, tags: diaryData.tags.slice(0, -1) });
   };
 
-  async function getShapeFn() {
-    return fetch("http://223.130.129.145:3005/shapes/default", {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-      },
-    }).then((res) => res.json());
-  }
-
   async function createDiaryFn(data) {
     return fetch("http://223.130.129.145:3005/diaries", {
       method: "POST",
@@ -90,56 +79,6 @@ function DiaryCreateModal(props) {
       });
   }
 
-  const {
-    data: shapeData,
-    // isLoading: shapeIsLoading,
-    // isError: shapeIsError,
-  } = 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,
     // isLoading: diaryIsLoading,
@@ -197,10 +136,7 @@ function DiaryCreateModal(props) {
           }}
         />
       </DiaryModalTagWrapper>
-      <DiaryModalShapeSelectBox
-        shapeData={newShapeData}
-        setDiaryData={setDiaryData}
-      />
+      <DiaryModalShapeSelectBox setDiaryData={setDiaryData} />
       <ModalSideButtonWrapper>
         <ModalSideButton
           onClick={() => {
@@ -226,7 +162,8 @@ function DiaryCreateModal(props) {
 }
 
 function DiaryModalShapeSelectBox(props) {
-  const { shapeData, setDiaryData } = props;
+  const { setDiaryData } = props;
+  const shapeState = useRecoilValue(shapeAtom);
 
   return (
     <ShapeSelectBoxWrapper>
@@ -235,18 +172,15 @@ function DiaryModalShapeSelectBox(props) {
         <ShapeSelectText>직접 그리기</ShapeSelectText>
       </ShapeSelectTextWrapper>
       <ShapeSelectItemWrapper>
-        {shapeData?.map((shape) => (
+        {shapeState?.map((shape) => (
           <ShapeSelectBoxItem
             key={shape.uuid}
-            onClick={() =>
-              setDiaryData((prev) => ({ ...prev, shapeUuid: shape.uuid }))
-            }
+            onClick={() => {
+              console.log(shape.uuid);
+              setDiaryData((prev) => ({ ...prev, shapeUuid: shape.uuid }));
+            }}
           >
-            <img
-              src={shape.shapeData}
-              alt='shape'
-              style={{ width: "100%", height: "100%" }}
-            />
+            <div dangerouslySetInnerHTML={{ __html: shape.data }} />
           </ShapeSelectBoxItem>
         ))}
       </ShapeSelectItemWrapper>

diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js
@@ -1,11 +1,12 @@
-/* eslint-disable */
+/*eslint-disable*/
 
-import React from "react";
+import React, { useEffect } from "react";
 import { useQuery } from "react-query";
 import styled from "styled-components";
 import { useRecoilState, useRecoilValue } from "recoil";
 import diaryAtom from "../../atoms/diaryAtom";
 import userAtom from "../../atoms/userAtom";
+import shapeAtom from "../../atoms/shapeAtom";
 import ModalWrapper from "../../styles/Modal/ModalWrapper";
 import DiaryDeleteModal from "./DiaryDeleteModal";
 import editIcon from "../../assets/edit.svg";
@@ -57,46 +58,19 @@ function DiaryReadModal(props) {
   const { refetch } = props;
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
   const userState = useRecoilValue(userAtom);
+  const shapeState = useRecoilValue(shapeAtom);
   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);
-          });
+      onSuccess: (data) => {
+        const shapeData = shapeState.find((item) => {
+          return item.uuid === data.shapeUuid;
+        });
+        if (shapeData) {
+          setShapeData(shapeData.data);
+        }
       },
     },
   );
@@ -185,14 +159,10 @@ function DiaryReadModal(props) {
           }}
         />
         <DiaryModalIcon>
-          <img
-            src={shapeData}
-            alt='star'
-            style={{
-              width: "5rem",
-              height: "5rem",
-            }}
-          />
+          <div
+            dangerouslySetInnerHTML={{ __html: shapeData }}
+            style={{ width: "100%", height: "100%" }}
+          ></div>
         </DiaryModalIcon>
       </DiaryModalEmotionBar>
       {diaryState.isDelete ? <DiaryDeleteModal refetch={refetch} /> : null}

diff --git a/FE/src/pages/MainPage.js b/FE/src/pages/MainPage.js
@@ -102,13 +102,6 @@ function MainPage() {
           }));
         }}
       />
-      {shapeState.map((shape) => (
-        <div
-          key={shape.uuid}
-          dangerouslySetInnerHTML={{ __html: shape.data }}
-        />
-      ))}
-
       <StarPage />
       {diaryState.isCreate ? <DiaryCreateModal refetch={refetch} /> : null}
       {diaryState.isRead ? <DiaryReadModal refetch={refetch} /> : null}