행성 선택자 및 Bottom sheet 행성 동기화 문제

src/app/planet/[communityId]/page.tsx

@@ -1,12 +1,15 @@
 import 'server-only';
 
+import Link from 'next/link';
+
 import { communityQueryKey } from '~/api/domain/community.api';
 import { getCommunityIdCardsServer } from '~/api/domain/community.api.server';
 import { CommunityDetail } from '~/app/planet/[communityId]/components/CommunityDetail';
 import { CommunityIdCards } from '~/app/planet/[communityId]/components/CommunityIdCards';
 import { IdCardCreatorButton } from '~/app/planet/[communityId]/components/IdCardCreatorButton';
 import { BottomNavigation } from '~/components/BottomNavigation';
 import { HydrationProvider } from '~/components/HydrationProvider';
+import { GearIcon } from '~/components/Icon';
 import { TopNavigation } from '~/components/TopNavigation';
 import { PlanetSelector } from '~/modules/PlanetSelector';
 
@@ -19,6 +22,8 @@ type PlanetPageProps = {
 const PlanetPage = async ({ params: { communityId: communityIdParam } }: PlanetPageProps) => {
   const communityId = Number(communityIdParam);
 
+  const isMyPlanet = true; // TODO 관리자인지 여부 API 필요
+
   const getCommunityIdCardsQuery = async () => {
     const data = await getCommunityIdCardsServer({ communityId });
     return {
@@ -32,6 +37,13 @@ const PlanetPage = async ({ params: { communityId: communityIdParam } }: PlanetP
         <TopNavigation.Left>
           <PlanetSelector />
         </TopNavigation.Left>
+        {isMyPlanet && (
+          <TopNavigation.Right>
+            <Link href={`/admin/planet/${communityId}`}>
+              <GearIcon />
+            </Link>
+          </TopNavigation.Right>
+        )}
       </TopNavigation>
       <CommunityDetail id={communityId} />
       <IdCardCreatorButton communityId={communityId} />

src/components/BottomNavigation/BottomNavigation.tsx

@@ -4,15 +4,17 @@ import { usePathname, useRouter } from 'next/navigation';
 
 import { Divider } from '~/components/Divider';
 import { BellIcon, HomeIcon, PersonIcon } from '~/components/Icon';
+import { usePlanetNavigate } from '~/hooks/usePlanetNavigate';
 import { NewNotificationBadge } from '~/modules/Notification/NewNotificationBadge.client';
 
 type BottomNavigationPath = '/planet' | '/notification' | '/my-page' | '/';
 
 export const BottomNavigation = () => {
   const pathname = usePathname();
   const router = useRouter();
+  const { extractPlanetIdFromPathname } = usePlanetNavigate();
 
-  const handleNavigation = (path: BottomNavigationPath) => {
+  const handleNavigation = (path: string) => {
     router.push(path);
   };
 
@@ -24,23 +26,43 @@ export const BottomNavigation = () => {
     }
   };
 
+  const onClickHome = () => {
+    const planetId = extractPlanetIdFromPathname(pathname);
+    if (planetId) {
+      handleNavigation(`/planet/${planetId}`);
+      return;
+    }
+    handleNavigation('/');
+  };
+  const onClickNotification = () => {
+    handleNavigation('/notification');
+  };
+  const onClickMyPage = () => {
+    const planetId = extractPlanetIdFromPathname(pathname);
+    if (planetId) {
+      handleNavigation(`/my-page/${planetId}`);
+      return;
+    }
+    handleNavigation('/my-page');
+  };
+
   return (
     <nav className="fixed bottom-0 left-0 w-full">
       <Divider />
       <ul className="flex h-b-nav items-center justify-evenly bg-white">
         <li>
-          <button onClick={() => handleNavigation('/')}>
+          <button onClick={onClickHome}>
             <HomeIcon className={getSvgcolor('/planet')} />
           </button>
         </li>
         <li>
-          <button onClick={() => handleNavigation('/notification')} className="relative">
+          <button onClick={onClickNotification} className="relative">
             <NewNotificationBadge />
             <BellIcon height={26} className={getSvgcolor('/notification')} />
           </button>
         </li>
         <li>
-          <button onClick={() => handleNavigation('/my-page')}>
+          <button onClick={onClickMyPage}>
             <PersonIcon className={getSvgcolor('/my-page')} />
           </button>
         </li>

src/hooks/usePlanetNavigate.ts

@@ -0,0 +1,17 @@
+export const usePlanetNavigate = () => {
+  const extractPlanetIdFromPathname = (currentPathname: string) => {
+    const parts = currentPathname.split('/');
+    const planetIdIndex = parts.findIndex(part => part === 'planet' || part === 'my-page');
+
+    const notFoundPlanetID = planetIdIndex === -1;
+    const planetIdIndexOverPathLength = planetIdIndex + 1 >= parts.length;
+
+    if (notFoundPlanetID) return null;
+    if (planetIdIndexOverPathLength) return null;
+
+    return Number(parts[planetIdIndex + 1]);
+  };
+  return {
+    extractPlanetIdFromPathname,
+  };
+};

src/modules/PlanetSelector/PlanetSelector.client.tsx

@@ -1,35 +1,63 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 
 import { useGetCommunityList } from '~/api/domain/community.api';
 import { useBottomSheet } from '~/components/BottomSheet';
 import BottomSheet from '~/components/BottomSheet/BottomSheet';
 import { ArrowVerticalIcon, PlusIcon } from '~/components/Icon';
+import { usePlanetNavigate } from '~/hooks/usePlanetNavigate';
 import { CommunityList } from '~/modules/PlanetSelector/CommunityList.client';
 import { useCommunityStore } from '~/stores/community.store';
 import { getUserIdClient } from '~/utils/auth/getUserId.client';
 import { tw } from '~/utils/tailwind.util';
 
 export const PlanetSelector = () => {
   const bottomSheetHandlers = useBottomSheet();
+  const pathname = usePathname();
   const userId = getUserIdClient();
   const { data: communityList } = useGetCommunityList(userId ?? -1);
   const { communityId, switchCommunity } = useCommunityStore();
+  const { extractPlanetIdFromPathname } = usePlanetNavigate();
+
+  const INIT_PLANET_ID = -1;
 
   const router = useRouter();
 
   const onClickCreateButton = () => {
     router.push('/admin/planet/create');
   };
 
-  useEffect(() => {
+  const getLastPlanetId = () => {
     const lastCommunity = communityList?.communityListDtos.slice(-1)[0];
-    if (communityId < 0 && lastCommunity) {
-      switchCommunity(lastCommunity.communityId);
+    if (!lastCommunity) return INIT_PLANET_ID;
+    return lastCommunity.communityId;
+  };
+  const isSamePlanetIdFromPathname = (pathPlanetId: number) => pathPlanetId === communityId;
+
+  const switchPlanetIdByPathname = () => {
+    const planetId = extractPlanetIdFromPathname(pathname);
+
+    if (!planetId) {
+      const lastPlanetId = getLastPlanetId();
+      switchCommunity(lastPlanetId);
+      return;
+    }
+
+    if (isSamePlanetIdFromPathname(planetId)) {
+      return;
+    }
+
+    switchCommunity(planetId);
+  };
+
+  useEffect(() => {
+    if (communityId !== -1) {
+      return;
     }
-  }, [communityId, communityList?.communityListDtos, switchCommunity]);
+    switchPlanetIdByPathname();
+  }, [pathname]);
 
   const defaultCommunity = communityList?.communityListDtos.find(
     community => community.communityId === communityId,