From fb6bda1e277444b7a9bf30ae68295de35a150ccd Mon Sep 17 00:00:00 2001 From: dmson1218 Date: Thu, 7 Dec 2023 19:18:08 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EB=B3=84=20=EC=9D=B4=EB=8F=99=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 일기 수정 API 재사용 - 별, 별자리 정보 refetch - 모드 독 도움말 제공 --- FE/src/pages/MainPage.js | 2 +- FE/src/pages/StarPage.js | 121 ++++++++++++++++++++++++++++++++++++--- 2 files changed, 113 insertions(+), 10 deletions(-) diff --git a/FE/src/pages/MainPage.js b/FE/src/pages/MainPage.js index 8a8c0eb..a3def14 100644 --- a/FE/src/pages/MainPage.js +++ b/FE/src/pages/MainPage.js @@ -130,7 +130,7 @@ function MainPage() { {userState.nickname}님의 별숲 - + {diaryState.isCreate ? : null} {diaryState.isRead ? : null} {diaryState.isUpdate ? : null} diff --git a/FE/src/pages/StarPage.js b/FE/src/pages/StarPage.js index cf9eb6a..6804897 100644 --- a/FE/src/pages/StarPage.js +++ b/FE/src/pages/StarPage.js @@ -19,7 +19,7 @@ import stella from "../assets/stella.svg"; import arrow from "../assets/arrow.svg"; import paint from "../assets/paint.svg"; -function StarPage() { +function StarPage({ refetch }) { const [diaryState, setDiaryState] = useRecoilState(diaryAtom); const [starState, setStarState] = useRecoilState(starAtom); @@ -45,7 +45,7 @@ function StarPage() { target={[0, 0, 0]} rotateSpeed={-0.25} /> - + {!( @@ -92,6 +92,17 @@ function StarPage() { $paddingTop='1.5rem' $paddingBottom='1.5rem' > + + { + { + move: "밤하늘을 드래그하여 시점을 이동해 보세요.", + stella: + "두 개의 별을 순서대로 클릭하여 별자리 선을 만들어 보세요.", + starMove: + "별을 클릭한 후 빈 공간을 클릭하여 별을 이동시켜 보세요.", + }[starState.mode] + } + 별자리 수정 - - arrow별 이동 + { + setStarState((prev) => ({ + ...prev, + mode: "starMove", + drag: false, + selected: null, + })); + }} + > + starMove별 이동 paint @@ -147,15 +168,16 @@ function Scene() { ); } -function StarView() { +function StarView({ refetch }) { const { scene, raycaster, camera } = useThree(); const [diaryState, setDiaryState] = useRecoilState(diaryAtom); const userState = useRecoilValue(userAtom); - const { mode } = useRecoilValue(starAtom); + const [starState, setStarState] = useRecoilState(starAtom); + const { mode, selected } = starState; const shapeState = useRecoilValue(shapeAtom); const [texture, setTexture] = useState({}); - const { data: points, refetch } = useQuery( + const { data: points, refetch: pointsRefetch } = useQuery( "points", () => fetch(`${process.env.REACT_APP_BACKEND_URL}/lines`, { @@ -180,6 +202,34 @@ function StarView() { }, ); + async function updateDiaryFn(data) { + setDiaryState((prev) => ({ + ...prev, + isLoading: true, + })); + return fetch(`${process.env.REACT_APP_BACKEND_URL}/diaries`, { + method: "PUT", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${data.accessToken}`, + }, + body: JSON.stringify(data.diaryData), + }).then(() => { + refetch(); + pointsRefetch(); + setStarState((prev) => ({ + ...prev, + selected: null, + })); + }); + } + + const { + mutate: updateDiary, + // isLoading: diaryIsLoading, + // isError: diaryIsError, + } = useMutation(updateDiaryFn); + useEffect(() => { const newTexture = {}; shapeState.forEach((shape) => { @@ -277,6 +327,29 @@ function StarView() { }); }; + const clickOnStarMove = (e) => { + if (selected) { + const selectedDiary = diaryState.diaryList.find( + (diary) => diary.uuid === selected.uuid, + ); + + updateDiary({ + accessToken: userState.accessToken, + diaryData: { + uuid: selected.uuid, + title: selectedDiary.title, + content: selectedDiary.content, + date: selectedDiary.date, + point: `${e.point.x * 100000},${e.point.y * 100000},${ + e.point.z * 100000 + }`, + tags: selectedDiary.tags, + shapeUuid: selectedDiary.shapeUuid, + }, + }); + } + }; + return ( <> @@ -286,7 +359,10 @@ function StarView() { /> - + @@ -310,7 +386,7 @@ function StarView() { texture={texture[diary.shapeUuid]} moveToStar={moveToStar} points={points} - refetch={refetch} + refetch={pointsRefetch} /> )) : null} @@ -423,6 +499,15 @@ function Star(props) { } }; + const clickOnStarMove = (e) => { + e.stopPropagation(); + + setStarState((prev) => ({ + ...prev, + selected: { uuid, position }, + })); + }; + // 긍정 - 00ccff, 부정 - d1180b, 중립 - ba55d3 const sentimentColor = { positive: "#00ccff", @@ -492,6 +577,8 @@ function Star(props) { clickOnCreate(e); } else if (mode === "stella") { clickOnStella(e); + } else if (mode === "starMove") { + clickOnStarMove(e); } }} > @@ -537,6 +624,22 @@ function Line(props) { ); } +const DockGuide = styled.div` + width: 100%; + transform: translate(-50%, -50%); + + position: fixed; + top: -20%; + left: 50%; + + display: flex; + justify-content: center; + align-items: center; + + color: #ffffffbb; + font-size: 1rem; +`; + const DockWrapper = styled.div` width: 100%; height: 100%; From ad84327559fb9265297a316b3ec2f078d9df419e Mon Sep 17 00:00:00 2001 From: dmson1218 Date: Thu, 7 Dec 2023 19:27:53 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EC=9D=BC=EA=B8=B0=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EC=8B=9C=20=EB=B3=84=EC=9E=90=EB=A6=AC=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EC=95=88=20=EB=90=98=EB=8A=94=20=EC=98=A4=EB=A5=98?= =?UTF-8?q?=20=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),