fix: 일기 삭제 시 별자리 삭제 안 되는 오류 해결

- 별자리 정보를 메인 페이지에서 Recoil로 관리 - 일기 삭제 시 별자리 정보 refetch
boostcampwm2023 · Dec 7, 2023 · ad84327 · ad84327
1 parent fb6bda1
commit ad84327
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 39 deletions.
diff --git a/FE/src/atoms/starAtom.js b/FE/src/atoms/starAtom.js
@@ -6,6 +6,7 @@ const starAtom = atom({
     mode: "create",
     drag: true,
     selected: null,
+    points: [],
   },
 });
 

diff --git a/FE/src/components/DiaryModal/DiaryDeleteModal.js b/FE/src/components/DiaryModal/DiaryDeleteModal.js
@@ -8,7 +8,7 @@ import lastPageAtom from "../../atoms/lastPageAtom";
 import ModalWrapper from "../../styles/Modal/ModalWrapper";
 
 function DiaryDeleteModal(props) {
-  const { refetch } = props;
+  const { refetch, pointsRefetch } = props;
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
   const userState = useRecoilValue(userAtom);
   const [lastPageState, setLastPageState] = useRecoilState(lastPageAtom);
@@ -40,6 +40,7 @@ function DiaryDeleteModal(props) {
       })
       .then(() => {
         refetch();
+        pointsRefetch();
       });
   }
 

diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js
@@ -59,7 +59,7 @@ async function getDiary(accessToken, diaryUuid, setUserState) {
 }
 
 function DiaryReadModal(props) {
-  const { refetch } = props;
+  const { refetch, pointsRefetch } = props;
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
   const [userState, setUserState] = useRecoilState(userAtom);
   const [lastPageState, setLastPageState] = useRecoilState(lastPageAtom);
@@ -172,7 +172,9 @@ function DiaryReadModal(props) {
             />
           </DiaryModalIcon>
         </DiaryModalEmotionBar>
-        {diaryState.isDelete ? <DiaryDeleteModal refetch={refetch} /> : null}
+        {diaryState.isDelete ? (
+          <DiaryDeleteModal refetch={refetch} pointsRefetch={pointsRefetch} />
+        ) : null}
         <ModalSideButtonWrapper>
           <ModalSideButton
             onClick={() => {

diff --git a/FE/src/pages/MainPage.js b/FE/src/pages/MainPage.js
@@ -7,6 +7,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import diaryAtom from "../atoms/diaryAtom";
 import shapeAtom from "../atoms/shapeAtom";
 import userAtom from "../atoms/userAtom";
+import starAtom from "../atoms/starAtom";
 import lastPageAtom from "../atoms/lastPageAtom";
 import DiaryCreateModal from "../components/DiaryModal/DiaryCreateModal";
 import DiaryReadModal from "../components/DiaryModal/DiaryReadModal";
@@ -23,6 +24,7 @@ function MainPage() {
   const [userState, setUserState] = useRecoilState(userAtom);
   const setShapeState = useSetRecoilState(shapeAtom);
   const [loaded, setLoaded] = React.useState(false);
+  const setStarState = useSetRecoilState(starAtom);
 
   const { refetch } = useQuery(
     ["diaryList", userState.accessToken],
@@ -86,6 +88,33 @@ function MainPage() {
     },
   );
 
+  const { refetch: pointsRefetch } = useQuery(
+    "points",
+    () =>
+      fetch(`${process.env.REACT_APP_BACKEND_URL}/lines`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${userState.accessToken}`,
+        },
+      }).then((res) => res.json()),
+    {
+      onSuccess: (data) => {
+        data.forEach((point) => {
+          const { first, second } = point;
+          first.coordinate.x /= 100000;
+          first.coordinate.y /= 100000;
+          first.coordinate.z /= 100000;
+          second.coordinate.x /= 100000;
+          second.coordinate.y /= 100000;
+          second.coordinate.z /= 100000;
+        });
+
+        setStarState((prev) => ({ ...prev, points: data }));
+      },
+    },
+  );
+
   useEffect(() => {
     setDiaryState((prev) => {
       const newState = {
@@ -130,9 +159,11 @@ function MainPage() {
           <NickNameWrapper>
             <NickName>{userState.nickname}님의 별숲</NickName>
           </NickNameWrapper>
-          <StarPage refetch={refetch} />
+          <StarPage refetch={refetch} pointsRefetch={pointsRefetch} />
           {diaryState.isCreate ? <DiaryCreateModal refetch={refetch} /> : null}
-          {diaryState.isRead ? <DiaryReadModal refetch={refetch} /> : null}
+          {diaryState.isRead ? (
+            <DiaryReadModal refetch={refetch} pointsRefetch={pointsRefetch} />
+          ) : null}
           {diaryState.isUpdate ? <DiaryUpdateModal refetch={refetch} /> : null}
           {diaryState.isList ? <DiaryListModal /> : null}
           {diaryState.isAnalysis ? <DiaryAnalysisModal /> : null}

diff --git a/FE/src/pages/StarPage.js b/FE/src/pages/StarPage.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-unknown-property */
 
 import React, { useState, useEffect } from "react";
-import { useQuery, useMutation } from "react-query";
+import { useMutation } from "react-query";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import styled from "styled-components";
 import { Canvas, useThree } from "@react-three/fiber";
@@ -19,7 +19,7 @@ import stella from "../assets/stella.svg";
 import arrow from "../assets/arrow.svg";
 import paint from "../assets/paint.svg";
 
-function StarPage({ refetch }) {
+function StarPage({ refetch, pointsRefetch }) {
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
   const [starState, setStarState] = useRecoilState(starAtom);
 
@@ -45,7 +45,7 @@ function StarPage({ refetch }) {
             target={[0, 0, 0]}
             rotateSpeed={-0.25}
           />
-          <StarView refetch={refetch} />
+          <StarView refetch={refetch} pointsRefetch={pointsRefetch} />
         </Canvas>
       </CanvasContainer>
       {!(
@@ -168,7 +168,7 @@ function Scene() {
   );
 }
 
-function StarView({ refetch }) {
+function StarView({ refetch, pointsRefetch }) {
   const { scene, raycaster, camera } = useThree();
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
   const userState = useRecoilValue(userAtom);
@@ -177,31 +177,6 @@ function StarView({ refetch }) {
   const shapeState = useRecoilValue(shapeAtom);
   const [texture, setTexture] = useState({});
 
-  const { data: points, refetch: pointsRefetch } = useQuery(
-    "points",
-    () =>
-      fetch(`${process.env.REACT_APP_BACKEND_URL}/lines`, {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${userState.accessToken}`,
-        },
-      }).then((res) => res.json()),
-    {
-      onSuccess: (data) => {
-        data.forEach((point) => {
-          const { first, second } = point;
-          first.coordinate.x /= 100000;
-          first.coordinate.y /= 100000;
-          first.coordinate.z /= 100000;
-          second.coordinate.x /= 100000;
-          second.coordinate.y /= 100000;
-          second.coordinate.z /= 100000;
-        });
-      },
-    },
-  );
-
   async function updateDiaryFn(data) {
     setDiaryState((prev) => ({
       ...prev,
@@ -385,12 +360,11 @@ function StarView({ refetch }) {
               sentiment={diary.emotion.sentiment}
               texture={texture[diary.shapeUuid]}
               moveToStar={moveToStar}
-              points={points}
               refetch={pointsRefetch}
             />
           ))
         : null}
-      {points?.map((point) => (
+      {starState.points?.map((point) => (
         <Line
           key={point.id}
           point={[point.first.coordinate, point.second.coordinate]}
@@ -401,8 +375,7 @@ function StarView({ refetch }) {
 }
 
 function Star(props) {
-  const { uuid, position, sentiment, texture, moveToStar, points, refetch } =
-    props;
+  const { uuid, position, sentiment, texture, moveToStar, refetch } = props;
   const setDiaryState = useSetRecoilState(diaryAtom);
   const userState = useRecoilValue(userAtom);
   const [starState, setStarState] = useRecoilState(starAtom);
@@ -473,7 +446,7 @@ function Star(props) {
         selected: { uuid, position },
       }));
     } else {
-      const isExist = points.find(
+      const isExist = starState.points.find(
         (point) =>
           (point.first.uuid === selected.uuid && point.second.uuid === uuid) ||
           (point.first.uuid === uuid && point.second.uuid === selected.uuid),