Merge pull request #173 from boostcampwm2023/fix/168-svg-icon-convert

[Fix] png -> svg로 변환된 데이터 이용 아이콘 구현
boostcampwm2023 · Nov 29, 2023 · 18101d4 · 18101d4
2 parents b262267 + e624cd0
commit 18101d4
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 157 deletions.
diff --git a/FE/.eslintrc.js b/FE/.eslintrc.js
@@ -26,6 +26,8 @@ module.exports = {
     "prettier/prettier": ["error", { endOfLine: "auto" }],
     "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
     "react/prop-types": "off",
+    "import/no-extraneous-dependencies": ["off"],
+    "react/no-danger": "off",
   },
   settings: {
     "import/resolver": {

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/App.js b/FE/src/App.js
@@ -16,6 +16,7 @@ const GlobalStyle = createGlobalStyle`
 
   body {
     font-family: "Pretendard-Medium";
+	background-color: #000000;
   }
 
   * {

diff --git a/FE/src/atoms/shapeAtom.js b/FE/src/atoms/shapeAtom.js
@@ -0,0 +1,8 @@
+import { atom } from "recoil";
+
+const shapeAtom = atom({
+  key: "shapeState",
+  default: [],
+});
+
+export default shapeAtom;
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";
@@ -18,15 +17,14 @@ function DiaryCreateModal(props) {
   const setDiaryState = useSetRecoilState(diaryAtom);
 
   // TODO: 날짜 선택 기능 구현
-  const [diaryData, setDiaryData] = React.useState({
+  const [diaryData, setDiaryData] = useState({
     title: "",
     content: "",
     date: "2023-11-19",
     point: diaryState.diaryPoint,
     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,14 @@ 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={() => {
+              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/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js
@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import React, { useEffect, useLayoutEffect } from "react";
 import styled from "styled-components";
 import { useRecoilState } from "recoil";
@@ -19,6 +21,7 @@ function DiaryListModal() {
       setDiaryState((prev) => ({
         ...prev,
         diaryUuid: selectedDiary?.uuid,
+        diaryPoint: `${selectedDiary?.coordinate.x},${selectedDiary?.coordinate.y},${selectedDiary?.coordinate.z}`,
       }));
     }
   }, [selectedDiary]);

diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js
@@ -1,11 +1,10 @@
-/* eslint-disable */
-
 import React 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 +56,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: (loadedData) => {
+        const foundShapeData = shapeState.find(
+          (item) => item.uuid === loadedData.shapeUuid,
+        );
+        if (foundShapeData) {
+          setShapeData(foundShapeData.data);
+        }
       },
     },
   );
@@ -185,13 +157,9 @@ function DiaryReadModal(props) {
           }}
         />
         <DiaryModalIcon>
-          <img
-            src={shapeData}
-            alt='star'
-            style={{
-              width: "5rem",
-              height: "5rem",
-            }}
+          <div
+            dangerouslySetInnerHTML={{ __html: shapeData }}
+            style={{ width: "100%", height: "100%" }}
           />
         </DiaryModalIcon>
       </DiaryModalEmotionBar>
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,6 +16,7 @@ const GlobalStyle = createGlobalStyle` @@
       body {
         font-family: "Pretendard-Medium";
+    	background-color: #000000;
       }
       * {
@@ Expand Down @@