Merge pull request #334 from depromeet/feat/#333

Feat/#333 2차 QA 반영 (바텀네비게이션, 팔로잉/팔로우 탭)
depromeet · May 7, 2024 · ef825e3 · ef825e3
2 parents 6daf0a0 + 9afe6fb
commit ef825e3
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 42 deletions.
diff --git a/public/gif/onboarding_1.webp b/public/gif/onboarding_1.webp
diff --git a/public/gif/onboarding_2.webp b/public/gif/onboarding_2.webp
diff --git a/public/gif/onboarding_3.webp b/public/gif/onboarding_3.webp
diff --git a/src/app/follow/[id]/page.tsx b/src/app/follow/[id]/page.tsx
@@ -17,43 +17,41 @@ export default function Page() {
   const { data: followingList } = useGetFollowingList(userId, 'FOLLOWING');
 
   return (
-    <div>
-      <Tab.Group initialTab={type ? type : 'follower'}>
-        <div className="h-[76px] w-full flex sticky top-[40px] bg-white z-above rounded-t-[24px]">
-          <Tab.Header>
-            <Tab.Item value="follower">팔로워</Tab.Item>
-            <Tab.Item value="following">팔로잉</Tab.Item>
-          </Tab.Header>
-        </div>
-        <div className="mt-[30px]">
-          <Tab.Content value="follower">
-            {followerList &&
-              followerList.data.map((item) => (
-                <FollowerList
-                  key={item.userId}
-                  userId={item.userId}
-                  profileImgUrl={item.profileImgUrl}
-                  nickName={item.nickname}
-                  isFollowed={item.isFollowed}
-                  value={'FOLLOWER'}
-                />
-              ))}
-          </Tab.Content>
-          <Tab.Content value="following">
-            {followingList &&
-              followingList.data.map((item) => (
-                <FollowerList
-                  key={item.userId}
-                  userId={item.userId}
-                  profileImgUrl={item.profileImgUrl}
-                  nickName={item.nickname}
-                  isFollowed={item.isFollowed}
-                  value={'FOLLOWING'}
-                />
-              ))}
-          </Tab.Content>
-        </div>
-      </Tab.Group>
-    </div>
+    <Tab.Group initialTab={type ? type : 'follower'}>
+      <div className="h-[76px] w-full flex sticky top-[40px] bg-white z-above rounded-t-[24px]">
+        <Tab.Header>
+          <Tab.Item value="follower">팔로워</Tab.Item>
+          <Tab.Item value="following">팔로잉</Tab.Item>
+        </Tab.Header>
+      </div>
+      <div className="mt-[30px]">
+        <Tab.Content value="follower">
+          {followerList &&
+            followerList.data.map((item) => (
+              <FollowerList
+                key={item.userId}
+                userId={item.userId}
+                profileImgUrl={item.profileImgUrl}
+                nickName={item.nickname}
+                isFollowed={item.isFollowed}
+                value={'FOLLOWER'}
+              />
+            ))}
+        </Tab.Content>
+        <Tab.Content value="following">
+          {followingList &&
+            followingList.data.map((item) => (
+              <FollowerList
+                key={item.userId}
+                userId={item.userId}
+                profileImgUrl={item.profileImgUrl}
+                nickName={item.nickname}
+                isFollowed={item.isFollowed}
+                value={'FOLLOWING'}
+              />
+            ))}
+        </Tab.Content>
+      </div>
+    </Tab.Group>
   );
 }
diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[id]/page.tsx
@@ -19,6 +19,7 @@ import { useUploadImageToNCloud } from '@hooks/api/useUploadImageToNCloud';
 import { usePutProfileImage } from '@hooks/api/usePutProfileImage';
 import { usePatchFollow } from '@hooks/api/usePatchFollow';
 import ProfileFeedContent from '@components/profile/ProfileFeedContent';
+import BottomNavigation from '@components/common/BottomNavigation';
 
 export default function Page() {
   const pathname = usePathname();
@@ -210,6 +211,7 @@ export default function Page() {
           </Tab.Group>
         </div>
       </div>
+      <BottomNavigation />
     </div>
   );
 }
diff --git a/src/components/common/BottomNavigation/index.tsx b/src/components/common/BottomNavigation/index.tsx
@@ -16,7 +16,7 @@ export default function BottomNavigation({
   return (
     <nav
       className={cn(
-        'h-[73px] w-full flex justify-evenly items-center gap-[20px] p-[12px] fixed bottom-0 bg-white z-nav',
+        'h-[73px] w-full max-w-[480px] flex justify-evenly items-center gap-[20px] p-[12px] fixed bottom-0 bg-white z-nav',
         className,
         { ...restProps },
       )}

diff --git a/src/constants/onboarding.ts b/src/constants/onboarding.ts
@@ -13,7 +13,7 @@ export const ONBOARDING_CONTENT: OnboardingContentProps[] = [
     title: '재방문 맛집을 지도에 표시했어요',
     content: '많은 사람이 재방문한 곳일수록 그릇이 많아요!',
     videoUrl: '/video/onboarding_1.mp4',
-    gifUrl: '/gif/onboarding_1.gif',
+    gifUrl: '/gif/onboarding_1.webp',
     icon: '/assets/icon_onboarding/first_step.svg',
   },
   {
@@ -22,7 +22,7 @@ export const ONBOARDING_CONTENT: OnboardingContentProps[] = [
     content:
       '가고 싶은 곳을 북마크하고, 방문 후 기록을 남겨보세요.\n 나의 맛집 지도가 완성될 거예요!',
     videoUrl: '/video/onboarding_2.mp4',
-    gifUrl: '/gif/onboarding_2.gif',
+    gifUrl: '/gif/onboarding_2.webp',
     icon: 'assets/icon_onboarding/second_step.svg',
   },
   {
@@ -31,7 +31,7 @@ export const ONBOARDING_CONTENT: OnboardingContentProps[] = [
     content:
       '다녀온 맛집 기록을 남겨보세요.\n 5개 이상 남기면 레벨이 올라가요!',
     videoUrl: '/video/onboarding_3.mp4',
-    gifUrl: '/gif/onboarding_3.gif',
+    gifUrl: '/gif/onboarding_3.webp',
     icon: '/assets/icon_onboarding/third_step.svg',
   },
 ];