From ad84327559fb9265297a316b3ec2f078d9df419e Mon Sep 17 00:00:00 2001 From: dmson1218 Date: Thu, 7 Dec 2023 19:27:53 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9D=BC=EA=B8=B0=20=EC=82=AD=EC=A0=9C?= =?UTF-8?q?=20=EC=8B=9C=20=EB=B3=84=EC=9E=90=EB=A6=AC=20=EC=82=AD=EC=A0=9C?= =?UTF-8?q?=20=EC=95=88=20=EB=90=98=EB=8A=94=20=EC=98=A4=EB=A5=98=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 별자리 정보를 메인 페이지에서 Recoil로 관리 - 일기 삭제 시 별자리 정보 refetch --- FE/src/atoms/starAtom.js | 1 + .../components/DiaryModal/DiaryDeleteModal.js | 3 +- .../components/DiaryModal/DiaryReadModal.js | 6 ++- FE/src/pages/MainPage.js | 35 +++++++++++++++- FE/src/pages/StarPage.js | 41 ++++--------------- 5 files changed, 47 insertions(+), 39 deletions(-) diff --git a/FE/src/atoms/starAtom.js b/FE/src/atoms/starAtom.js index e0bfb30..69f9e8e 100644 --- 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 index 0f43451..98c3207 100644 --- 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 index 4b1a9f1..c3f8340 100644 --- 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) { /> - {diaryState.isDelete ? : null} + {diaryState.isDelete ? ( + + ) : null} { diff --git a/FE/src/pages/MainPage.js b/FE/src/pages/MainPage.js index a3def14..d66aa9f 100644 --- 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() { {userState.nickname}님의 별숲 - + {diaryState.isCreate ? : null} - {diaryState.isRead ? : null} + {diaryState.isRead ? ( + + ) : null} {diaryState.isUpdate ? : null} {diaryState.isList ? : null} {diaryState.isAnalysis ? : null} diff --git a/FE/src/pages/StarPage.js b/FE/src/pages/StarPage.js index 6804897..c16d151 100644 --- 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} /> - + {!( @@ -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) => ( (point.first.uuid === selected.uuid && point.second.uuid === uuid) || (point.first.uuid === uuid && point.second.uuid === selected.uuid),