diff --git a/packages/client/src/pages/Home/index.tsx b/packages/client/src/pages/Home/index.tsx index d7d22a1..4a3e2c6 100644 --- a/packages/client/src/pages/Home/index.tsx +++ b/packages/client/src/pages/Home/index.tsx @@ -13,13 +13,20 @@ 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 } = useOwnerStore(); + const [nickname, setNickname] = useState(''); const navigate = useNavigate(); const { @@ -51,17 +58,26 @@ export default function Home() { checkLogin(); getSignInInfo().then((res) => { Cookies.set('nickname', res.nickname); - setNickName(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) - setThickness(res.thickness); - if (res.zDist && res.zDist !== zDist) setZDist(res.zDist); + setNickname(res.nickname); }); }, []); + useEffect(() => { + getGalaxy(pageOwnerNickName).then((res) => { + if (!res.spiral) setSpiral(SPIRAL); + else setSpiral(res.spiral); + + if (!res.start) setStart(SPIRAL_START); + else setStart(res.start); + + if (!res.thickness) setThickness(GALAXY_THICKNESS); + else setThickness(res.thickness); + + if (!res.zDist) setZDist(ARMS_Z_DIST); + else setZDist(res.zDist); + }); + }, [pageOwnerNickName]); + return ( <> @@ -72,7 +88,7 @@ export default function Home() { {view === 'MAIN' && ( <> - + )} 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 ( 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/shared/ui/underBar/UnderBar.tsx b/packages/client/src/shared/ui/underBar/UnderBar.tsx index e6640e6..1a6139b 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'; @@ -14,10 +15,10 @@ import { useViewStore } from 'shared/store'; import { useOwnerStore } from 'shared/store/useOwnerStore'; interface PropsType { - nickName: string; + nickname: string; } -export default function UnderBar({ nickName }: PropsType) { +export default function UnderBar({ nickname }: PropsType) { const navigate = useNavigate(); const { setView } = useViewStore(); @@ -35,7 +36,7 @@ export default function UnderBar({ nickName }: PropsType) { return ( - {isMyPage ? nickName : pageOwnerNickName}님의 은하 + {isMyPage ? nickname : pageOwnerNickName}님의 은하 @@ -58,9 +59,13 @@ export default function UnderBar({ nickName }: PropsType) { setView('CUSTOM'); navigate('/home/galaxy-custom'); }} + disabled={!isMyPage} > - 우주 수정하기 - 우주 수정하기 + 우주 수정하기 + 은하 수정하기 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 (