feat: 일기 수정 시 모양 출력하고, 모양 선택 후 저장 시 반영

boostcampwm2023 · Nov 29, 2023 · e624cd0 · e624cd0
1 parent 2224f68
commit e624cd0
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 41 deletions.
diff --git a/FE/.eslintrc.js b/FE/.eslintrc.js
@@ -27,5 +27,6 @@ module.exports = {
     "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
     "react/prop-types": "off",
     "import/no-extraneous-dependencies": ["off"],
+    "react/no-danger": "off",
   },
 };
diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js
@@ -17,7 +17,7 @@ function DiaryCreateModal(props) {
   const setDiaryState = useSetRecoilState(diaryAtom);
 
   // TODO: 날짜 선택 기능 구현
-  const [diaryData, setDiaryData] = React.useState({
+  const [diaryData, setDiaryData] = useState({
     title: "",
     content: "",
     date: "2023-11-19",
@@ -176,7 +176,6 @@ function DiaryModalShapeSelectBox(props) {
           <ShapeSelectBoxItem
             key={shape.uuid}
             onClick={() => {
-              console.log(shape.uuid);
               setDiaryData((prev) => ({ ...prev, shapeUuid: shape.uuid }));
             }}
           >

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,6 +1,4 @@
-/*eslint-disable*/
-
-import React, { useEffect } from "react";
+import React from "react";
 import { useQuery } from "react-query";
 import styled from "styled-components";
 import { useRecoilState, useRecoilValue } from "recoil";
@@ -64,12 +62,12 @@ function DiaryReadModal(props) {
     "diary",
     () => getDiary(userState.accessToken, diaryState.diaryUuid),
     {
-      onSuccess: (data) => {
-        const shapeData = shapeState.find((item) => {
-          return item.uuid === data.shapeUuid;
-        });
-        if (shapeData) {
-          setShapeData(shapeData.data);
+      onSuccess: (loadedData) => {
+        const foundShapeData = shapeState.find(
+          (item) => item.uuid === loadedData.shapeUuid,
+        );
+        if (foundShapeData) {
+          setShapeData(foundShapeData.data);
         }
       },
     },
@@ -162,7 +160,7 @@ function DiaryReadModal(props) {
           <div
             dangerouslySetInnerHTML={{ __html: shapeData }}
             style={{ width: "100%", height: "100%" }}
-          ></div>
+          />
         </DiaryModalIcon>
       </DiaryModalEmotionBar>
       {diaryState.isDelete ? <DiaryDeleteModal refetch={refetch} /> : null}

diff --git a/FE/src/components/DiaryModal/DiaryUpdateModal.js b/FE/src/components/DiaryModal/DiaryUpdateModal.js
@@ -1,22 +1,14 @@
-import React, { useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
 import { useMutation, useQuery } 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";
 
-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 getDiary(accessToken, diaryUuid) {
   return fetch(`http://223.130.129.145:3005/diaries/${diaryUuid}`, {
     method: "GET",
@@ -32,17 +24,17 @@ function DiaryUpdateModal(props) {
   const { refetch } = props;
   const titleRef = useRef(null);
   const contentRef = useRef(null);
-  const [isInput, setIsInput] = React.useState(true);
+  const [isInput, setIsInput] = useState(true);
   const userState = useRecoilValue(userAtom);
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
-  const [diaryData, setDiaryData] = React.useState({
-    title: "test",
-    content: "test",
-    date: "2023-11-20",
+  const [diaryData, setDiaryData] = useState({
+    uuid: diaryState.diaryUuid,
+    title: "",
+    content: "",
+    date: "2023-11-19",
     point: diaryState.diaryPoint,
     tags: [],
-    shapeUuid: "cf3a074a-0707-40c4-a598-c7c17a654476",
-    uuid: diaryState.diaryUuid,
+    shapeUuid: "",
   });
 
   async function updateDiaryFn(data) {
@@ -99,12 +91,6 @@ function DiaryUpdateModal(props) {
     setDiaryData({ ...diaryData, tags: diaryData.tags.slice(0, -1) });
   };
 
-  const {
-    data: shapeData,
-    // isLoading: shapeIsLoading,
-    // isError: shapeIsError,
-  } = useQuery("shape", getShapeFn);
-
   const {
     mutate: updateDiary,
     // isLoading: diaryIsLoading,
@@ -206,7 +192,7 @@ function DiaryUpdateModal(props) {
           }}
         />
       </DiaryModalTagWrapper>
-      <DiaryModalShapeSelectBox shapeData={shapeData} />
+      <DiaryModalShapeSelectBox setDiaryData={setDiaryData} />
       <ModalSideButtonWrapper>
         <ModalSideButton onClick={closeModal}>
           <img src={deleteIcon} alt='delete' />
@@ -228,7 +214,8 @@ function DiaryUpdateModal(props) {
 }
 
 function DiaryModalShapeSelectBox(props) {
-  const { shapeData } = props;
+  const { setDiaryData } = props;
+  const shapeState = useRecoilValue(shapeAtom);
 
   return (
     <ShapeSelectBoxWrapper>
@@ -237,9 +224,14 @@ function DiaryModalShapeSelectBox(props) {
         <ShapeSelectText>직접 그리기</ShapeSelectText>
       </ShapeSelectTextWrapper>
       <ShapeSelectItemWrapper>
-        {shapeData?.map((shape) => (
-          <ShapeSelectBoxItem key={shape.uuid}>
-            {shape.shapePath}
+        {shapeState?.map((shape) => (
+          <ShapeSelectBoxItem
+            key={shape.uuid}
+            onClick={() => {
+              setDiaryData((prev) => ({ ...prev, shapeUuid: shape.uuid }));
+            }}
+          >
+            <div dangerouslySetInnerHTML={{ __html: shape.data }} />
           </ShapeSelectBoxItem>
         ))}
       </ShapeSelectItemWrapper>

diff --git a/FE/src/components/LoginModal/LoginModal.js b/FE/src/components/LoginModal/LoginModal.js
@@ -95,7 +95,9 @@ function LoginModal() {
             <input
               type='checkbox'
               checked={keepLogin}
-              onChange={setKeepLogin}
+              onChange={() => {
+                setKeepLogin((prev) => !prev);
+              }}
             />
             <div>로그인 유지</div>
           </CheckBar>