From 261278d137f913ca367ab22b0c7426a11ac3e669 Mon Sep 17 00:00:00 2001 From: bananaba <200tiger1@gmail.com> Date: Wed, 6 Dec 2023 19:48:18 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=F0=9F=90=9B=20Set=20Duplicate=20check=20bu?= =?UTF-8?q?tton=20type?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 아이디 중복확인 버튼의 타입이 지정되지 않아 생기던 문제를 해결했다 --- packages/client/src/widgets/signupModal/ui/IdInputContainer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/client/src/widgets/signupModal/ui/IdInputContainer.tsx b/packages/client/src/widgets/signupModal/ui/IdInputContainer.tsx index 86a3740..455e806 100644 --- a/packages/client/src/widgets/signupModal/ui/IdInputContainer.tsx +++ b/packages/client/src/widgets/signupModal/ui/IdInputContainer.tsx @@ -76,6 +76,7 @@ export default function IdInputContainer({ setValidId }: PropsTypes) { size="m" buttonType="Button" disabled={idState === 'VALID'} + type="button" > 중복확인 From adb006974d35736d403ecede1c70b71f9eaa1f74 Mon Sep 17 00:00:00 2001 From: bananaba <200tiger1@gmail.com> Date: Wed, 6 Dec 2023 20:13:11 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=F0=9F=8E=A8=20Change=20Nickname=20handle?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 닉네임 처리 방식을 변경했다 - 은하 형태를 받아와 처리하는 부분에서 처리 되지 않던 상황을 추가했다 --- packages/client/src/pages/Home/index.tsx | 39 +++++++++++++------ .../src/shared/ui/underBar/UnderBar.tsx | 8 +--- 2 files changed, 30 insertions(+), 17 deletions(-) diff --git a/packages/client/src/pages/Home/index.tsx b/packages/client/src/pages/Home/index.tsx index d7d22a1..730dd33 100644 --- a/packages/client/src/pages/Home/index.tsx +++ b/packages/client/src/pages/Home/index.tsx @@ -4,7 +4,7 @@ import { Outlet, useNavigate } from 'react-router-dom'; import UnderBar from 'shared/ui/underBar/UnderBar'; import UpperBar from './ui/UpperBar'; import WarpScreen from 'widgets/warpScreen/WarpScreen'; -import { useEffect, useState } from 'react'; +import { useEffect } from 'react'; import instance from 'shared/apis/AxiosInterceptor'; import { useScreenSwitchStore } from 'shared/store/useScreenSwitchStore'; import Cookies from 'js-cookie'; @@ -13,13 +13,19 @@ import { getGalaxy } from 'shared/apis'; import { useGalaxyStore } from 'shared/store'; import { Toast } from 'shared/ui'; import { useToastStore } from 'shared/store'; +import { useOwnerStore } from 'shared/store/useOwnerStore'; +import { + SPIRAL, + GALAXY_THICKNESS, + SPIRAL_START, + ARMS_Z_DIST, +} from 'widgets/galaxy/lib/constants'; export default function Home() { - const [nickName, setNickName] = useState(''); - const { view } = useViewStore(); const { isSwitching } = useScreenSwitchStore(); const { text } = useToastStore(); + const { pageOwnerNickName, setPageOwnerNickName } = useOwnerStore(); const navigate = useNavigate(); const { @@ -51,16 +57,27 @@ export default function Home() { checkLogin(); getSignInInfo().then((res) => { Cookies.set('nickname', res.nickname); - setNickName(res.nickname); + setPageOwnerNickName(res.nickname); }); - getGalaxy(nickName).then((res) => { - if (res.spiral && res.spiral !== spiral) setSpiral(res.spiral); - if (res.start && res.start !== start) setStart(res.start); - if (res.thickness && res.thickness !== thickness) + }, []); + + useEffect(() => { + getGalaxy(pageOwnerNickName).then((res) => { + if (!res.spiral && spiral !== SPIRAL) setSpiral(SPIRAL); + else if (res.spiral && res.spiral !== spiral) setSpiral(res.spiral); + + if (!res.start && start !== SPIRAL_START) setStart(SPIRAL_START); + else if (res.start && res.start !== start) setStart(res.start); + + if (!res.thickness && thickness !== GALAXY_THICKNESS) + setThickness(GALAXY_THICKNESS); + else if (res.thickness && res.thickness !== thickness) setThickness(res.thickness); - if (res.zDist && res.zDist !== zDist) setZDist(res.zDist); + + if (!res.zDist && zDist !== ARMS_Z_DIST) setZDist(ARMS_Z_DIST); + else if (res.zDist && res.zDist !== zDist) setZDist(res.zDist); }); - }, []); + }, [pageOwnerNickName]); return ( <> @@ -72,7 +89,7 @@ export default function Home() { {view === 'MAIN' && ( <> - + )} diff --git a/packages/client/src/shared/ui/underBar/UnderBar.tsx b/packages/client/src/shared/ui/underBar/UnderBar.tsx index e6640e6..9f35b91 100644 --- a/packages/client/src/shared/ui/underBar/UnderBar.tsx +++ b/packages/client/src/shared/ui/underBar/UnderBar.tsx @@ -13,11 +13,7 @@ import instance from 'shared/apis/AxiosInterceptor'; import { useViewStore } from 'shared/store'; import { useOwnerStore } from 'shared/store/useOwnerStore'; -interface PropsType { - nickName: string; -} - -export default function UnderBar({ nickName }: PropsType) { +export default function UnderBar() { const navigate = useNavigate(); const { setView } = useViewStore(); @@ -35,7 +31,7 @@ export default function UnderBar({ nickName }: PropsType) { return ( - {isMyPage ? nickName : pageOwnerNickName}님의 은하 + {pageOwnerNickName}님의 은하 From f85e1a66bef3d9f227304cd1a0ef989cdbe48577 Mon Sep 17 00:00:00 2001 From: bananaba <200tiger1@gmail.com> Date: Wed, 6 Dec 2023 20:24:37 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=F0=9F=90=9B=20Change=20nickname?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 내 은하로 돌아가기시 닉네임이 바뀌지 않던 문제 해결 --- packages/client/src/pages/Home/ui/UpperBar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/client/src/pages/Home/ui/UpperBar.tsx b/packages/client/src/pages/Home/ui/UpperBar.tsx index 5738ad9..064b5f4 100644 --- a/packages/client/src/pages/Home/ui/UpperBar.tsx +++ b/packages/client/src/pages/Home/ui/UpperBar.tsx @@ -62,6 +62,7 @@ export default function UpperBar() { const handleGoBackButton = () => { setIsMyPage(true); setIsSwitching(true); + setPageOwnerNickName(userNickName!); }; return ( From c3e729410c4dcafcbb92cb56de2258d5676387fa Mon Sep 17 00:00:00 2001 From: bananaba <200tiger1@gmail.com> Date: Wed, 6 Dec 2023 20:34:35 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=F0=9F=8E=A8=20Make=20Galaxy=20custom=20but?= =?UTF-8?q?ton=20disable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 은하 커스텀 버튼 비활성화를 구현했다 --- packages/client/src/shared/ui/underBar/UnderBar.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/client/src/shared/ui/underBar/UnderBar.tsx b/packages/client/src/shared/ui/underBar/UnderBar.tsx index 9f35b91..56e26a5 100644 --- a/packages/client/src/shared/ui/underBar/UnderBar.tsx +++ b/packages/client/src/shared/ui/underBar/UnderBar.tsx @@ -2,6 +2,7 @@ import styled from '@emotion/styled'; import { Button } from 'shared/ui'; import { Title01 } from '../styles'; import PlanetEditIcon from '@icons/icon-planetedit-24-white.svg'; +import PlanetEditIconGray from '@icons/icon-planetedit-24-gray.svg'; import AddIcon from '@icons/icon-add-24-white.svg'; import AddIconGray from '@icons/icon-add-24-gray.svg'; import WriteIcon from '@icons/icon-writte-24-white.svg'; @@ -54,9 +55,13 @@ export default function UnderBar() { setView('CUSTOM'); navigate('/home/galaxy-custom'); }} + disabled={!isMyPage} > - 우주 수정하기 - 우주 수정하기 + 우주 수정하기 + 은하 수정하기 From b9f6e5d6e210f233229b5b3e9e58fb95457a9785 Mon Sep 17 00:00:00 2001 From: bananaba <200tiger1@gmail.com> Date: Wed, 6 Dec 2023 20:39:49 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=8E=A8=20Use=20old=20version?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 닉네임에서 이전 방식을 이용하도록 변경 --- packages/client/src/pages/Home/index.tsx | 9 +++++---- packages/client/src/shared/ui/underBar/UnderBar.tsx | 8 ++++++-- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/client/src/pages/Home/index.tsx b/packages/client/src/pages/Home/index.tsx index 730dd33..c3c6186 100644 --- a/packages/client/src/pages/Home/index.tsx +++ b/packages/client/src/pages/Home/index.tsx @@ -4,7 +4,7 @@ import { Outlet, useNavigate } from 'react-router-dom'; import UnderBar from 'shared/ui/underBar/UnderBar'; import UpperBar from './ui/UpperBar'; import WarpScreen from 'widgets/warpScreen/WarpScreen'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import instance from 'shared/apis/AxiosInterceptor'; import { useScreenSwitchStore } from 'shared/store/useScreenSwitchStore'; import Cookies from 'js-cookie'; @@ -25,7 +25,8 @@ export default function Home() { const { view } = useViewStore(); const { isSwitching } = useScreenSwitchStore(); const { text } = useToastStore(); - const { pageOwnerNickName, setPageOwnerNickName } = useOwnerStore(); + const { pageOwnerNickName } = useOwnerStore(); + const [nickname, setNickname] = useState(''); const navigate = useNavigate(); const { @@ -57,7 +58,7 @@ export default function Home() { checkLogin(); getSignInInfo().then((res) => { Cookies.set('nickname', res.nickname); - setPageOwnerNickName(res.nickname); + setNickname(res.nickname); }); }, []); @@ -89,7 +90,7 @@ export default function Home() { {view === 'MAIN' && ( <> - + )} diff --git a/packages/client/src/shared/ui/underBar/UnderBar.tsx b/packages/client/src/shared/ui/underBar/UnderBar.tsx index 56e26a5..1a6139b 100644 --- a/packages/client/src/shared/ui/underBar/UnderBar.tsx +++ b/packages/client/src/shared/ui/underBar/UnderBar.tsx @@ -14,7 +14,11 @@ import instance from 'shared/apis/AxiosInterceptor'; import { useViewStore } from 'shared/store'; import { useOwnerStore } from 'shared/store/useOwnerStore'; -export default function UnderBar() { +interface PropsType { + nickname: string; +} + +export default function UnderBar({ nickname }: PropsType) { const navigate = useNavigate(); const { setView } = useViewStore(); @@ -32,7 +36,7 @@ export default function UnderBar() { return ( - {pageOwnerNickName}님의 은하 + {isMyPage ? nickname : pageOwnerNickName}님의 은하 From b1bf587de30d048bf9c19a8f840505fca82fe33b Mon Sep 17 00:00:00 2001 From: bananaba <200tiger1@gmail.com> Date: Wed, 6 Dec 2023 20:57:28 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=F0=9F=8E=A8=20Use=20zustand=20Get?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - zustand의 get을 사용해 값이 다른 경우에만 set 하도록 수정했다 --- packages/client/src/pages/Home/index.tsx | 18 +++++------ packages/client/src/shared/apis/galaxy.ts | 9 +++++- .../client/src/shared/store/useCustomStore.ts | 18 ++++++++--- .../client/src/shared/store/useGalaxyStore.ts | 18 ++++++++--- .../galaxyCustomModal/GalaxyCustomModal.tsx | 31 +++++++------------ .../galaxyCustomModal/ui/LeftButton.tsx | 19 +++--------- .../galaxyCustomModal/ui/TopButton.tsx | 10 +++--- 7 files changed, 63 insertions(+), 60 deletions(-) diff --git a/packages/client/src/pages/Home/index.tsx b/packages/client/src/pages/Home/index.tsx index c3c6186..4a3e2c6 100644 --- a/packages/client/src/pages/Home/index.tsx +++ b/packages/client/src/pages/Home/index.tsx @@ -64,19 +64,17 @@ export default function Home() { useEffect(() => { getGalaxy(pageOwnerNickName).then((res) => { - if (!res.spiral && spiral !== SPIRAL) setSpiral(SPIRAL); - else if (res.spiral && res.spiral !== spiral) setSpiral(res.spiral); + if (!res.spiral) setSpiral(SPIRAL); + else setSpiral(res.spiral); - if (!res.start && start !== SPIRAL_START) setStart(SPIRAL_START); - else if (res.start && res.start !== start) setStart(res.start); + if (!res.start) setStart(SPIRAL_START); + else setStart(res.start); - if (!res.thickness && thickness !== GALAXY_THICKNESS) - setThickness(GALAXY_THICKNESS); - else if (res.thickness && res.thickness !== thickness) - setThickness(res.thickness); + if (!res.thickness) setThickness(GALAXY_THICKNESS); + else setThickness(res.thickness); - if (!res.zDist && zDist !== ARMS_Z_DIST) setZDist(ARMS_Z_DIST); - else if (res.zDist && res.zDist !== zDist) setZDist(res.zDist); + if (!res.zDist) setZDist(ARMS_Z_DIST); + else setZDist(res.zDist); }); }, [pageOwnerNickName]); diff --git a/packages/client/src/shared/apis/galaxy.ts b/packages/client/src/shared/apis/galaxy.ts index 82e5dc2..206d6c5 100644 --- a/packages/client/src/shared/apis/galaxy.ts +++ b/packages/client/src/shared/apis/galaxy.ts @@ -16,7 +16,14 @@ export const getGalaxy = async (nickname: string) => { return data; }; -export const postGalaxy = async (galaxyStyle: Object) => { +interface GalaxyStyle { + spiral?: number; + start?: number; + zDist?: number; + thickness?: number; +} + +export const postGalaxy = async (galaxyStyle: GalaxyStyle) => { const { data } = await instance({ method: 'PATCH', url: `/galaxy`, diff --git a/packages/client/src/shared/store/useCustomStore.ts b/packages/client/src/shared/store/useCustomStore.ts index 1ca7f36..7ba02b4 100644 --- a/packages/client/src/shared/store/useCustomStore.ts +++ b/packages/client/src/shared/store/useCustomStore.ts @@ -11,13 +11,21 @@ interface CustomState { setZDist: (value: number) => void; } -export const useCustomStore = create((set) => ({ +export const useCustomStore = create((set, get) => ({ spiral: 1.2, - setSpiral: (value: number) => set({ spiral: value }), + setSpiral: (value: number) => { + if (value !== get().spiral) set({ spiral: value }); + }, start: 1000, - setStart: (value: number) => set({ start: value }), + setStart: (value: number) => { + if (value !== get().start) set({ start: value }); + }, thickness: 300, - setThickness: (value: number) => set({ thickness: value }), + setThickness: (value: number) => { + if (value !== get().thickness) set({ thickness: value }); + }, zDist: 1000, - setZDist: (value: number) => set({ zDist: value }), + setZDist: (value: number) => { + if (value !== get().zDist) set({ zDist: value }); + }, })); diff --git a/packages/client/src/shared/store/useGalaxyStore.ts b/packages/client/src/shared/store/useGalaxyStore.ts index a127e68..dcb6f53 100644 --- a/packages/client/src/shared/store/useGalaxyStore.ts +++ b/packages/client/src/shared/store/useGalaxyStore.ts @@ -17,13 +17,21 @@ interface GalaxyState { setZDist: (value: number) => void; } -export const useGalaxyStore = create((set) => ({ +export const useGalaxyStore = create((set, get) => ({ spiral: SPIRAL, - setSpiral: (value: number) => set({ spiral: value }), + setSpiral: (value: number) => { + if (value !== get().spiral) set({ spiral: value }); + }, start: SPIRAL_START, - setStart: (value: number) => set({ start: value }), + setStart: (value: number) => { + if (value !== get().start) set({ start: value }); + }, thickness: GALAXY_THICKNESS, - setThickness: (value: number) => set({ thickness: value }), + setThickness: (value: number) => { + if (value !== get().thickness) set({ thickness: value }); + }, zDist: ARMS_Z_DIST, - setZDist: (value: number) => set({ zDist: value }), + setZDist: (value: number) => { + if (value !== get().zDist) set({ zDist: value }); + }, })); diff --git a/packages/client/src/widgets/galaxyCustomModal/GalaxyCustomModal.tsx b/packages/client/src/widgets/galaxyCustomModal/GalaxyCustomModal.tsx index 1009ecd..05c6d53 100644 --- a/packages/client/src/widgets/galaxyCustomModal/GalaxyCustomModal.tsx +++ b/packages/client/src/widgets/galaxyCustomModal/GalaxyCustomModal.tsx @@ -19,27 +19,18 @@ export default function GalaxyCustomModal() { const { spiral, start, thickness, zDist } = useCustomStore(); const handleSubmit = () => { - const galaxyStyle: { [key: string]: number } = {}; + const galaxyStyle = { + spiral: galaxy.spiral !== spiral ? spiral : undefined, + start: galaxy.start !== start ? start : undefined, + thickness: galaxy.thickness !== thickness ? thickness : undefined, + zDist: galaxy.zDist !== zDist ? zDist : undefined, + }; - if (galaxy.spiral !== spiral) { - galaxy.setSpiral(spiral); - galaxyStyle.spiral = spiral; - } - if (galaxy.start !== start) { - galaxy.setStart(start); - galaxyStyle.start = start; - } - if (galaxy.thickness !== thickness) { - galaxy.setThickness(thickness); - galaxyStyle.thickness = thickness; - } - if (galaxy.zDist !== zDist) { - galaxy.setZDist(zDist); - galaxyStyle.zDist = zDist; - } - if (Object.keys(galaxyStyle).length !== 0) { - postGalaxy(galaxyStyle); - } + galaxy.setSpiral(spiral); + galaxy.setStart(start); + galaxy.setThickness(thickness); + galaxy.setZDist(zDist); + postGalaxy(galaxyStyle); }; return ( diff --git a/packages/client/src/widgets/galaxyCustomModal/ui/LeftButton.tsx b/packages/client/src/widgets/galaxyCustomModal/ui/LeftButton.tsx index 41ff7bc..9e9acec 100644 --- a/packages/client/src/widgets/galaxyCustomModal/ui/LeftButton.tsx +++ b/packages/client/src/widgets/galaxyCustomModal/ui/LeftButton.tsx @@ -8,21 +8,12 @@ import { } from 'widgets/galaxy/lib/constants'; export default function LeftButton() { - const { - spiral, - setSpiral, - start, - setStart, - zDist, - setZDist, - thickness, - setThickness, - } = useCustomStore(); + const { setSpiral, setStart, setZDist, setThickness } = useCustomStore(); const handleClick = () => { - if (spiral !== SPIRAL) setSpiral(SPIRAL); - if (start !== SPIRAL_START) setStart(SPIRAL_START); - if (zDist !== ARMS_Z_DIST) setZDist(ARMS_Z_DIST); - if (thickness !== GALAXY_THICKNESS) setThickness(GALAXY_THICKNESS); + setSpiral(SPIRAL); + setStart(SPIRAL_START); + setZDist(ARMS_Z_DIST); + setThickness(GALAXY_THICKNESS); }; return (