🎨 App폴더 하위 디렉토리 구조 변경

src/app/certification/page.tsx → src/app/mission/[id]/record/page.tsx

@@ -6,11 +6,12 @@ import { useRouter } from 'next/navigation';
 import Button from '@/components/Button/Button';
 import Dialog from '@/components/Dialog/Dialog';
 import Icon from '@/components/Icon';
+import { ROUTER } from '@/constants/router';
 import useModal from '@/hooks/useModal';
 import { logEvent } from '@/utils';
 import { css } from '@styled-system/css';
 
-export default function CertificationPage() {
+export default function MissionRecordPage() {
   const router = useRouter();
   const { isOpen, openModal, closeModal } = useModal();
   const [remark, setRemark] = useState('');
@@ -41,7 +42,7 @@ export default function CertificationPage() {
   };
   const onClickModalConfirm = () => {
     logEvent('click/confrim', 'certification', { remark });
-    router.push('/');
+    router.push(ROUTER.HOME);
   };
 
   const isButtonDisabled = () => {

src/app/stopwatch/page.tsx → src/app/mission/[id]/stopwatch/page.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import useStopwatch from '@/app/stopwatch/useStopwatch';
-import useStopwatchStatus from '@/app/stopwatch/useStopwatchStatus';
+import useStopwatch from '@/app/mission/[id]/stopwatch/useStopwatch';
+import useStopwatchStatus from '@/app/mission/[id]/stopwatch/useStopwatchStatus';
 import Button from '@/components/Button/Button';
 import Dialog from '@/components/Dialog/Dialog';
 import Stopwatch from '@/components/Stopwatch/Stopwatch';
+import { ROUTER } from '@/constants/router';
 import useModal from '@/hooks/useModal';
 import useSearchParamsTypedValue from '@/hooks/useSearchParamsTypedValue';
 import { logEvent } from '@/utils';
@@ -29,7 +30,7 @@ export default function StopwatchPage() {
   const onFinish = () => {
     logEvent('click/finish', 'stopwatch', { category, finishTime: Number(minutes) * 60 + Number(seconds) });
     // TODO: 끝내기 후 로직 추가
-    router.push('/certification');
+    router.push(ROUTER.MISSION.SUCCESS);
   };
 
   const onCancel = () => {

src/app/stopwatch/useStopwatch.ts → src/app/mission/[id]/stopwatch/useStopwatch.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { type StepType } from '@/app/stopwatch/useStopwatchStatus';
+import { type StepType } from '@/app/mission/[id]/stopwatch/useStopwatchStatus';
 
 const INIT_SECONDS = 0;
 const MAX_SECONDS = 60 * 60; // max 1 hour

src/app/select/MissionRegistration.tsx → src/app/mission/new/MissionRegistration.tsx

@@ -2,14 +2,16 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import CategoryBottomSheet from '@/app/select/CategoryBottomSheet';
-import PublicBottomSheet from '@/app/select/PublicBottomSheet';
+import CategoryBottomSheet from '@/app/mission/new/CategoryBottomSheet';
+import PublicBottomSheet from '@/app/mission/new/PublicBottomSheet';
 import Button from '@/components/Button/Button';
 import Icon from '@/components/Icon';
 import Input from '@/components/Input/Input';
+import { ROUTER } from '@/constants/router';
 import useToggle from '@/hooks/useToggle';
 import { css } from '@/styled-system/css';
 import { token } from '@/styled-system/tokens';
+import { withQueryString } from '@/utils';
 
 export default function MissionRegistration() {
   const router = useRouter();
@@ -43,7 +45,7 @@ export default function MissionRegistration() {
 
   const handleSubmit = () => {
     if (!missionCategory) return;
-    router.push(`/stopwatch?category=${missionCategory}`);
+    router.push(withQueryString(ROUTER.MISSION.STOP_WATCH('dummy'), { category: missionCategory }));
   };
 
   return (

src/app/select/SelectMissionForm.tsx → src/app/mission/new/SelectMissionForm.tsx

@@ -2,8 +2,8 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import RadioInputWithImg from '@/app/select/RadioInputWithImg';
-import { MISSION_CATEGORIES } from '@/app/select/select.constants';
+import RadioInputWithImg from '@/app/mission/new/RadioInputWithImg';
+import { MISSION_CATEGORIES } from '@/app/mission/new/select.constants';
 import Button from '@/components/Button/Button';
 import { ROUTER } from '@/constants/router';
 import { logEvent, withQueryString } from '@/utils';
@@ -21,7 +21,7 @@ export default function SelectMissionForm() {
       return;
     }
 
-    push(withQueryString(ROUTER.STOPWATCH, { category: selectedCategory }));
+    push(withQueryString(ROUTER.MISSION.STOP_WATCH('dummy'), { category: selectedCategory }));
   };
 
   const handleRadioChange = (value: string) => {

src/app/select/page.tsx → src/app/mission/new/page.tsx

@@ -3,7 +3,7 @@ import { css } from '@styled-system/css';
 
 import MissionRegistration from './MissionRegistration';
 
-export default function SelectPage() {
+export default function MissionNewPage() {
   return (
     <main className={mainWrapperCss}>
       <Header title={'미션 등록'} />

src/app/complete/page.tsx → src/app/mission/success/page.tsx

@@ -2,12 +2,13 @@
 import { useRouter } from 'next/navigation';
 import lottieJson from '@/assets/lotties/lottieExample.json';
 import Button from '@/components/Button/Button';
+import { ROUTER } from '@/constants/router';
 import { css } from '@styled-system/css';
 import Lottie from 'react-lottie-player';
 
-export default function CompletePage() {
+export default function MissionSuccessPage() {
   const router = useRouter();
-  const onClickConfirmButton = () => router.push('/');
+  const onClickConfirmButton = () => router.push(ROUTER.HOME);
 
   return (
     <main className={mainWrapperCss}>

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import Link from 'next/link';
 import LogoIcon from '@/app/LogoIcon';
+import { ROUTER } from '@/constants/router';
 import { logEvent } from '@/utils';
 import { css } from '@styled-system/css';
 import { flex } from '@styled-system/patterns';
@@ -17,7 +18,7 @@ export default function Home() {
         <LogoIcon />
         <h1 className={MainTitleCss}>하루 10분의 변화를 경험하세요.</h1>
       </div>
-      <Link className={LinkCss} href={'/select'} onClick={handleLogin}>
+      <Link className={LinkCss} href={ROUTER.MISSION.NEW} onClick={handleLogin}>
         <button type={'button'} className={LoginButtonCss}>
           게스트 로그인
         </button>

src/constants/router.ts

@@ -1,5 +1,9 @@
 export const ROUTER = {
   HOME: '/',
-  SELECT: '/select',
-  STOPWATCH: '/stopwatch',
+  MISSION: {
+    NEW: '/mission/new',
+    SUCCESS: `/mission/success`,
+    RECORD: (id: string) => `/mission/${id}/stopwatch`,
+    STOP_WATCH: (id: string) => `/mission/${id}/stopwatch`,
+  },
 };