Merge pull request #580 from depromeet/develop

배포용 PR
depromeet · Feb 15, 2024 · 86bc18b · 86bc18b
2 parents bb4b19d + e1170c3
commit 86bc18b
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 24 deletions.
diff --git a/src/app/mission/[id]/follow/page.tsx b/src/app/mission/[id]/follow/page.tsx
@@ -1,26 +1,39 @@
 'use client';
 
+import MissionStatistics from '@/app/mission/[id]/detail/MissionStatistics';
 import BottomDim from '@/components/BottomDim/BottomDim';
 import Header from '@/components/Header/Header';
 import MissionHistoryTab from '@/components/MissionDetail/MissionHistoryTab';
+import MissionHistoryTabLayout from '@/components/MissionDetail/MissionHistoryTabLayout';
 import Tab from '@/components/Tab/Tab';
+import { useTab } from '@/components/Tab/Tab.hooks';
 import { css } from '@styled-system/css';
 
-const tabs = [
+const MISSION_TABS = [
   {
     tabName: '미션 내역',
     id: 'mission-history',
   },
+  {
+    tabName: '통계',
+    id: 'mission-statistics',
+  },
 ];
 
-export default function FollowMissionDetailPage() {
+export default function FollowMissionDetailPage({ params: { id } }: { params: { id: string } }) {
+  const { tabs, activeTab, onTabClick } = useTab(MISSION_TABS, 'mission-history');
   return (
     <main className={mainWrapperCss}>
       <Header rightAction={'none'} title={'미션 상세'} />
       <div className={tabWrapperCss}>
-        <Tab tabs={tabs} activeTab={'mission-history'} />
+        <Tab tabs={tabs} activeTab={activeTab} onTabClick={onTabClick} />
       </div>
-      <MissionHistoryTab isFollow={true} />
+      {activeTab === 'mission-history' && <MissionHistoryTab isFollow={true} />}
+      {activeTab === 'mission-statistics' && (
+        <MissionHistoryTabLayout>
+          <MissionStatistics missionId={id} />
+        </MissionHistoryTabLayout>
+      )}
       <BottomDim />
     </main>
   );

diff --git a/src/app/result/finished/[id]/page.tsx b/src/app/result/finished/[id]/page.tsx
@@ -1,33 +1,39 @@
 'use client';
 
-import { useParams, useRouter } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import MissionHistoryBannerApi from '@/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBannerApi';
+import MissionStatistics from '@/app/mission/[id]/detail/MissionStatistics';
 import { ResultTabId } from '@/app/result/result.constants';
 import Header from '@/components/Header/Header';
 import { MissionDeleteDialog } from '@/components/MissionDetail';
 import MissionCalendar from '@/components/MissionDetail/MissionCalender/MissionCalendar';
 import MissionHistoryTabLayout from '@/components/MissionDetail/MissionHistoryTabLayout';
 import Tab from '@/components/Tab/Tab';
+import { useTab } from '@/components/Tab/Tab.hooks';
 import { ROUTER } from '@/constants/router';
 import useModal from '@/hooks/useModal';
 import { css } from '@/styled-system/css';
 import dayjs from 'dayjs';
 
-function FinishedMissionDetailPage() {
+const MISSION_TAB = [
+  {
+    tabName: '미션 내역',
+    id: 'mission-history',
+  },
+  {
+    tabName: '통계',
+    id: 'mission-statistics',
+  },
+];
+
+function FinishedMissionDetailPage({ params: { id } }: { params: { id: string } }) {
   const { isOpen, openModal: openDeleteDialog, closeModal: closeDeleteDialog } = useModal();
   const router = useRouter();
 
-  const { id } = useParams();
   const missionId = id;
   const currentData = dayjs();
 
-  const tabs = [
-    {
-      tabName: '미션 내역',
-      id: 'mission-history',
-    },
-  ];
-
+  const { tabs, activeTab, onTabClick } = useTab(MISSION_TAB, 'mission-history');
   const handleMenuClick = () => {
     openDeleteDialog();
   };
@@ -42,16 +48,21 @@ function FinishedMissionDetailPage() {
         onMenuClick={handleMenuClick}
         onBackAction={() => router.replace(ROUTER.RESULT.HOME(ResultTabId.FINISHED_MISSION))}
       />
+
       <div className={tabWrapperCss}>
-        <Tab tabs={tabs} activeTab={'mission-history'} />
+        <Tab tabs={tabs} activeTab={activeTab} onTabClick={onTabClick} />
       </div>
-
-      <MissionHistoryTabLayout>
-        {/* TODO: 종료 미션 start ~ finish date 표시 */}
-        {missionId && <MissionHistoryBannerApi missionId={String(missionId)} />}
-        <MissionCalendar currentData={currentData} missionId={Number(missionId)} />
-      </MissionHistoryTabLayout>
-
+      {activeTab === 'mission-history' && (
+        <MissionHistoryTabLayout>
+          {missionId && <MissionHistoryBannerApi missionId={String(missionId)} />}
+          <MissionCalendar currentData={currentData} missionId={Number(missionId)} />
+        </MissionHistoryTabLayout>
+      )}
+      {activeTab === 'mission-statistics' && (
+        <MissionHistoryTabLayout>
+          <MissionStatistics missionId={missionId} />
+        </MissionHistoryTabLayout>
+      )}
       <MissionDeleteDialog
         isOpen={isOpen}
         closeModal={closeDeleteDialog}
@@ -65,7 +76,6 @@ function FinishedMissionDetailPage() {
 export default FinishedMissionDetailPage;
 
 const mainWrapperCss = css({
-  height: '100vh',
   width: '100%',
 });
 

diff --git a/src/components/MissionDetail/MissionHistoryTabLayout.tsx b/src/components/MissionDetail/MissionHistoryTabLayout.tsx
@@ -13,7 +13,7 @@ export default MissionHistoryTabLayout;
 
 const scrollAreaCss = css({
   overflowY: 'scroll',
-  height: 'calc(100vh - 24px - 44px)',
+  height: 'calc(100vh - 44px - 49px)',
   _scrollbar: {
     display: 'none',
   },