Merge pull request #254 from boostcampwm2023/fe-develop

Fe develop
boostcampwm2023 · Dec 6, 2023 · ff6eea5 · ff6eea5
2 parents df06a46 + 06d56af
commit ff6eea5
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 66 deletions.
diff --git 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 (
 		<>
 			<Outlet />
@@ -72,7 +88,7 @@ export default function Home() {
 			{view === 'MAIN' && (
 				<>
 					<UpperBar />
-					<UnderBar nickName={nickName} />
+					<UnderBar nickname={nickname} />
 				</>
 			)}
 

diff --git 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
@@ -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
@@ -11,13 +11,21 @@ interface CustomState {
 	setZDist: (value: number) => void;
 }
 
-export const useCustomStore = create<CustomState>((set) => ({
+export const useCustomStore = create<CustomState>((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
@@ -17,13 +17,21 @@ interface GalaxyState {
 	setZDist: (value: number) => void;
 }
 
-export const useGalaxyStore = create<GalaxyState>((set) => ({
+export const useGalaxyStore = create<GalaxyState>((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
@@ -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 (
 		<Layout>
-			<Name>{isMyPage ? nickName : pageOwnerNickName}님의 은하</Name>
+			<Name>{isMyPage ? nickname : pageOwnerNickName}님의 은하</Name>
 
 			<ButtonsContainer>
 				<SmallButtonsContainer>
@@ -58,9 +59,13 @@ export default function UnderBar({ nickName }: PropsType) {
 							setView('CUSTOM');
 							navigate('/home/galaxy-custom');
 						}}
+						disabled={!isMyPage}
 					>
-						<img src={PlanetEditIcon} alt="우주 수정하기" />
-						우주 수정하기
+						<img
+							src={isMyPage ? PlanetEditIcon : PlanetEditIconGray}
+							alt="우주 수정하기"
+						/>
+						은하 수정하기
 					</BigButton>
 
 					<BigButton size="l" buttonType="Button" disabled={!isMyPage}>

diff --git 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
@@ -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 (
 		<Button

diff --git a/packages/client/src/widgets/galaxyCustomModal/ui/TopButton.tsx b/packages/client/src/widgets/galaxyCustomModal/ui/TopButton.tsx
@@ -3,13 +3,13 @@ import { useCustomStore, useGalaxyStore } from 'shared/store';
 import { RotateCcw } from 'lucide-react';
 
 export default function TopButton() {
-	const custom = useCustomStore();
+	const { setSpiral, setStart, setZDist, setThickness } = useCustomStore();
 	const { spiral, start, zDist, thickness } = useGalaxyStore();
 	const handleClick = () => {
-		if (custom.spiral !== spiral) custom.setSpiral(spiral);
-		if (custom.start !== start) custom.setStart(start);
-		if (custom.zDist !== zDist) custom.setZDist(zDist);
-		if (custom.thickness !== thickness) custom.setThickness(thickness);
+		setSpiral(spiral);
+		setStart(start);
+		setZDist(zDist);
+		setThickness(thickness);
 	};
 
 	return (

diff --git 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"
 				>
 					중복확인
 				</DuplicateCheckButton>