#325 fix: BottomNavigation fix

depromeet · Apr 11, 2024 · 1f5ca2f · 1f5ca2f
1 parent a374f98
commit 1f5ca2f
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 52 deletions.
diff --git a/src/app/feed/detail/[id]/page.tsx b/src/app/feed/detail/[id]/page.tsx
@@ -4,6 +4,7 @@ import { usePathname } from 'next/navigation';
 
 import { Feed } from '@components/feed/Feed';
 import { useGetFeedDetail } from '@hooks/api/useGetFeedDetail';
+import BottomNavigation from '@components/common/BottomNavigation';
 
 export default function Page() {
   const pathname = usePathname();
@@ -36,6 +37,7 @@ export default function Page() {
           </Feed.Date>
         </Feed>
       )}
+      <BottomNavigation />
     </div>
   );
 }
diff --git a/src/app/feed/page.tsx b/src/app/feed/page.tsx
@@ -3,6 +3,7 @@
 import { useGetFeedList } from '@hooks/api/useGetFeedList';
 import useObserver from '@hooks/useObserver';
 import { Feed } from '@components/feed/Feed';
+import BottomNavigation from '@components/common/BottomNavigation';
 
 export default function Page() {
   const {
@@ -24,39 +25,42 @@ export default function Page() {
   });
 
   return (
-    <div className="flex flex-col gap-[32px] py-[16px]">
-      {feedList &&
-        !feedList[0].data.empty &&
-        feedList.map((feedList) =>
-          feedList.data.content.map((feed) => {
-            return (
-              <Feed key={feed.feedId}>
-                <Feed.Date>{feed.createdAt}</Feed.Date>
-                <Feed.Profile
-                  userId={feed.userId}
-                  src={feed.profileImageUrl}
-                  nickName={feed.nickname}
-                  alt={`${feed.userId} 프로필 이미지`}
-                  isMyFeed={feed.isMine}
-                  isFollowed={feed.isFollowed}
-                />
-                <Feed.Image
-                  src={feed.feedImg}
-                  alt={`${feed.feedStoreResponse.storeName} 이미지`}
-                  storeName={feed.feedStoreResponse.storeName}
-                  storeCategory={feed.feedStoreResponse.kakaoCategoryName}
-                  storeLocation={feed.feedStoreResponse.address}
-                  storeResponse={feed.feedStoreResponse}
-                />
-                <Feed.Description
-                  id={feed.feedId}
-                  description={feed.description}
-                />
-              </Feed>
-            );
-          }),
-        )}
-      {!isLoading && hasNextPage && <div ref={setTarget} className="h-1" />}
-    </div>
+    <>
+      <div className="flex flex-col gap-[32px] py-[16px]">
+        {feedList &&
+          !feedList[0].data.empty &&
+          feedList.map((feedList) =>
+            feedList.data.content.map((feed) => {
+              return (
+                <Feed key={feed.feedId}>
+                  <Feed.Date>{feed.createdAt}</Feed.Date>
+                  <Feed.Profile
+                    userId={feed.userId}
+                    src={feed.profileImageUrl}
+                    nickName={feed.nickname}
+                    alt={`${feed.userId} 프로필 이미지`}
+                    isMyFeed={feed.isMine}
+                    isFollowed={feed.isFollowed}
+                  />
+                  <Feed.Image
+                    src={feed.feedImg}
+                    alt={`${feed.feedStoreResponse.storeName} 이미지`}
+                    storeName={feed.feedStoreResponse.storeName}
+                    storeCategory={feed.feedStoreResponse.kakaoCategoryName}
+                    storeLocation={feed.feedStoreResponse.address}
+                    storeResponse={feed.feedStoreResponse}
+                  />
+                  <Feed.Description
+                    id={feed.feedId}
+                    description={feed.description}
+                  />
+                </Feed>
+              );
+            }),
+          )}
+        {!isLoading && hasNextPage && <div ref={setTarget} className="h-1" />}
+        <BottomNavigation />
+      </div>
+    </>
   );
 }
diff --git a/src/components/common/BottomNavigation/index.tsx b/src/components/common/BottomNavigation/index.tsx
@@ -5,39 +5,33 @@ import { usePathname } from 'next/navigation';
 import Icon from '@components/common/Icon/index';
 import cn from '@utils/cn';
 import { NAVIGATION } from '@constants/navigation';
-import { useGetUserProfile } from '@hooks/api/useGetUserProfile';
 
 export default function BottomNavigation({
   className,
   ...restProps
 }: HTMLAttributes<HTMLDivElement>) {
-  const currentPath = usePathname();
-  const { data: userProfile } = useGetUserProfile();
+  const pathname = usePathname();
+  const slicedPathname = pathname.slice(1).split('/')[0];
 
   return (
     <nav
       className={cn(
-        'h-[73px] w-full flex justify-evenly items-center gap-[20px] p-[12px]',
+        'h-[73px] w-full flex justify-evenly items-center gap-[20px] p-[12px] fixed bottom-0 bg-white z-nav',
         className,
         { ...restProps },
       )}
     >
       {NAVIGATION.map((item) => (
-        <Link
-          key={item.key}
-          href={
-            userProfile?.userId ? `/profile?${userProfile.userId}` : item.route
-          }
-        >
+        <Link key={item.key} href={item.route}>
           <div
             className={cn(
-              item.key === currentPath ? 'fill-primary-500' : 'fill-black',
+              slicedPathname === item.key ? 'fill-primary-500' : 'fill-black',
             )}
           >
             <Icon
               iconName={item.name}
               className={cn(
-                item.key === currentPath ? 'fill-primary-500' : 'fill-black',
+                slicedPathname === item.key ? 'fill-primary-500' : 'fill-black',
               )}
             />
           </div>

diff --git a/src/constants/navigation.ts b/src/constants/navigation.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { ReactNode } from 'react';
 
 import ProfileIcon from 'public/assets/icon24/profile_default_24.svg';
@@ -16,30 +18,34 @@ export interface NavigationItemType {
   route: string;
 }
 
+let userId: string | null = null;
+if (typeof window !== 'undefined') {
+  userId = localStorage.getItem('userId');
+}
+
 export const NAVIGATION: NavigationItemType[] = [
   {
     icon: FeedIcon,
-    key: '/feed',
+    key: 'feed',
     name: 'FeedPage',
     route: `/feed`,
   },
-
   {
     icon: HomeIcon,
-    key: '/',
+    key: '',
     name: 'Home',
     route: '/',
   },
   {
     icon: AddFeedIcon,
-    key: '/search',
+    key: 'search',
     name: 'Search',
     route: `/search?longitude=${DEFAULT_LOCATION.lng}&latitude=${DEFAULT_LOCATION.lat}`,
   },
   {
     icon: ProfileIcon,
-    key: '/profile',
+    key: 'profile',
     name: 'Profile',
-    route: `/`,
+    route: `/profile/${userId}`,
   },
 ];