diff --git a/next.config.js b/next.config.js
index 23e31f7f..1d7d5694 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,9 +1,9 @@
 9;
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  pageExtensions: ['page.tsx', 'page.ts', 'api.tsx', 'api.ts'],
   experimental: {
-    instrumentationHooks: true,
-    serverActions: true,
+    appDir: false,
   },
   images: {
     remotePatterns: [
diff --git a/panda.config.ts b/panda.config.ts
index 194f6666..cafb5248 100644
--- a/panda.config.ts
+++ b/panda.config.ts
@@ -9,7 +9,7 @@ export default defineConfig({
   preflight: true,
   jsxFramework: 'react',
   // Where to look for your css declarations
-  include: ['./src/**/*.{js,jsx,ts,tsx}', './src/app/**/*.{ts,tsx,js,jsx}', './stories/**/*.{js,jsx,ts,tsx}'],
+  include: ['./src/**/*.{js,jsx,ts,tsx}', './src/pages/**/*.{ts,tsx,js,jsx}', './stories/**/*.{js,jsx,ts,tsx}'],
 
   // Files to exclude
   exclude: [],
diff --git a/src/apis/mission.ts b/src/apis/mission.ts
index a9a17c46..88fd32ac 100644
--- a/src/apis/mission.ts
+++ b/src/apis/mission.ts
@@ -110,6 +110,7 @@ export const useGetMissionDetail = (missionId: string, option?: UseQueryOptions<
   return useSuspenseQuery<MissionContentType>({
     queryKey: getQueryKey('missionDetail', { missionId }),
     queryFn: () => MISSION_APIS.getMissionDetail(missionId),
+    enabled: Boolean(missionId),
     ...option,
   });
 };
diff --git a/src/app/auth/login/layout.tsx b/src/app/auth/login/layout.tsx
deleted file mode 100644
index 75b45b1e..00000000
--- a/src/app/auth/login/layout.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { type Metadata } from 'next';
-
-export const metadata: Metadata = {
-  other: {
-    'appleid-signin-scope': 'email',
-    'appleid-signin-state': 'state',
-    'appleid-signin-use-popup': 'true',
-    'appleid-signin-client-id': process.env.NEXT_PUBLIC_APPLE_LOGIN_CLIENT_ID ?? '',
-    'appleid-signin-nonce': process.env.NEXT_PUBLIC_SNS_LOGIN_NONCE ?? '',
-    'appleid-signin-redirect-uri': process.env.NEXT_PUBLIC_APPLE_LOGIN_REDIRECT_URI ?? '',
-  },
-};
-
-function LoginLayout({ children }: PropsWithChildren) {
-  return <main>{children}</main>;
-}
-
-export default LoginLayout;
diff --git a/src/app/level/guide/layout.tsx b/src/app/level/guide/layout.tsx
deleted file mode 100644
index 6e95a2d2..00000000
--- a/src/app/level/guide/layout.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import Header from '@/components/Header/Header';
-import { css } from '@/styled-system/css';
-
-function LevelGuideLayout({ children }: PropsWithChildren) {
-  return (
-    <>
-      <Header rightAction="none" title="내 레벨" />
-      <main className={containerCss}>{children}</main>
-    </>
-  );
-}
-
-export default LevelGuideLayout;
-
-const containerCss = css({
-  minHeight: '720px',
-});
diff --git a/src/app/mission/[id]/detail/layout.tsx b/src/app/mission/[id]/detail/layout.tsx
deleted file mode 100644
index 67819a7d..00000000
--- a/src/app/mission/[id]/detail/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import { css } from '@styled-system/css';
-
-export default function Layout({ children }: PropsWithChildren) {
-  return <div className={containerCss}>{children}</div>;
-}
-
-const containerCss = css({
-  maxWidth: 'maxWidth',
-  margin: '0 auto',
-  minHeight: '100vh',
-
-  display: 'flex',
-  flexDirection: 'column',
-});
diff --git a/src/app/mission/[id]/detail/modify/MissionModify.tsx b/src/app/mission/[id]/detail/modify/MissionModify.tsx
deleted file mode 100644
index 31e6526e..00000000
--- a/src/app/mission/[id]/detail/modify/MissionModify.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import Input from '@/components/Input/Input';
-import { type DropdownValueType } from '@/components/Input/Input.types';
-import { PUBLIC_SETTING_LIST } from '@/constants/mission';
-
-export default function MissionModify() {
-  const [missionTitleInput, setMissionTitleInput] = useState('');
-  const [missionContentInput, setMissionContentInput] = useState('');
-
-  const [missionPublicSetting, setMissionPublicSetting] = useState<DropdownValueType>(PUBLIC_SETTING_LIST[0]);
-
-  const handleMissionTitleInput = (value: string) => {
-    setMissionTitleInput(value);
-  };
-
-  const handleMissionContentInput = (value: string) => {
-    setMissionContentInput(value);
-  };
-
-  return (
-    <section>
-      <Input
-        type="text"
-        placeholder="미션명을 입력하세요"
-        name="미션명"
-        required
-        maxLength={20}
-        value={missionTitleInput}
-        onChange={handleMissionTitleInput}
-      />
-      <Input
-        type="text"
-        placeholder="미션 내용을 입력"
-        name="미션내용"
-        maxLength={30}
-        value={missionContentInput}
-        onChange={handleMissionContentInput}
-      />
-
-      <Input
-        variant="drop-down"
-        title="공개설정"
-        list={PUBLIC_SETTING_LIST}
-        selected={missionPublicSetting}
-        onSelect={(item) => setMissionPublicSetting(item)}
-      />
-    </section>
-  );
-}
diff --git a/src/app/mission/[id]/stopwatch/layout.tsx b/src/app/mission/[id]/stopwatch/layout.tsx
deleted file mode 100644
index 8acbf77f..00000000
--- a/src/app/mission/[id]/stopwatch/layout.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import { css } from '@/styled-system/css';
-
-export default function Layout({ children }: PropsWithChildren) {
-  return <div className={containerCss}>{children}</div>;
-}
-
-const containerCss = css({
-  minHeight: '100vh',
-  backgroundColor: 'bg.surface2',
-});
diff --git a/src/app/mission/[id]/stopwatch/page.tsx b/src/app/mission/[id]/stopwatch/page.tsx
deleted file mode 100644
index 773bcb42..00000000
--- a/src/app/mission/[id]/stopwatch/page.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client';
-
-import { useParams } from 'next/navigation';
-import { useGetMissionDetailNoSuspense } from '@/apis/mission';
-
-import ButtonSection from './ButtonSection';
-import StopwatchHeader from './Header';
-import StopwatchProvider from './Stopwatch.context';
-import StopwatchSection from './StopwatchSection';
-import TextSection from './TextSection';
-
-export default function StopwatchPage() {
-  const params = useParams();
-  const missionId = params.id as string;
-
-  const { data: missionData } = useGetMissionDetailNoSuspense(missionId);
-  // const category = missionData?.category ? MISSION_CATEGORY_LABEL[missionData?.category].label : '';
-  const missionName = missionData?.name ?? '';
-
-  return (
-    <StopwatchProvider missionId={missionId}>
-      <StopwatchHeader />
-      <TextSection />
-      <StopwatchSection missionName={missionName} />
-      <ButtonSection missionId={missionId} />
-    </StopwatchProvider>
-  );
-}
diff --git a/src/app/mission/new/layout.tsx b/src/app/mission/new/layout.tsx
deleted file mode 100644
index 4a6cca1c..00000000
--- a/src/app/mission/new/layout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import { css } from '@styled-system/css';
-
-export default function Layout({ children }: PropsWithChildren) {
-  return <div className={containerCss}>{children}</div>;
-}
-
-const containerCss = css({
-  maxWidth: 'maxWidth',
-  margin: '0 auto',
-  minHeight: '100vh',
-
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-});
diff --git a/src/app/mission/new/page.tsx b/src/app/mission/new/page.tsx
deleted file mode 100644
index ef174536..00000000
--- a/src/app/mission/new/page.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { type MissionCategory, type MissionVisibility } from '@/apis/schema/mission';
-import useCreateMissionMutation from '@/app/mission/new/useCreateMissionMutation';
-import Header from '@/components/Header/Header';
-import Input from '@/components/Input/Input';
-import { type DropdownValueType } from '@/components/Input/Input.types';
-import { useSnackBar } from '@/components/SnackBar/SnackBarProvider';
-import { MISSION_CATEGORY_LIST, PUBLIC_SETTING_LIST } from '@/constants/mission';
-import { flex } from '@/styled-system/patterns';
-import { css } from '@styled-system/css';
-
-export default function MissionNewPage() {
-  const { triggerSnackBar } = useSnackBar();
-
-  const [missionTitleInput, setMissionTitleInput] = useState('');
-  const [missionContentInput, setMissionContentInput] = useState('');
-  const [missionCategory, setMissionCategory] = useState<DropdownValueType<MissionCategory> | null>(null);
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [missionPublicSetting, setMissionPublicSetting] = useState<DropdownValueType<MissionVisibility>>(
-    PUBLIC_SETTING_LIST[1],
-  );
-
-  const isSubmitButtonDisabled = !missionTitleInput || !missionCategory;
-
-  const { mutate } = useCreateMissionMutation();
-  // 미션 명
-  const handleMissionTitleInput = (value: string) => {
-    setMissionTitleInput(value);
-  };
-  // 미션 내용
-  const handleMissionContentInput = (value: string) => {
-    setMissionContentInput(value);
-  };
-
-  const handleSubmit = () => {
-    if (!missionCategory) {
-      triggerSnackBar({
-        message: '미션 제목을 입력해주세요.',
-      });
-      return;
-    }
-
-    mutate({
-      name: missionTitleInput,
-      content: missionContentInput,
-      category: missionCategory.value,
-      visibility: missionPublicSetting.value,
-    });
-  };
-  return (
-    <main className={mainWrapperCss}>
-      <Header
-        title={'미션 생성'}
-        rightAction="text-button"
-        rightButtonText="등록"
-        rightButtonProps={{ disabled: isSubmitButtonDisabled, onClick: handleSubmit }}
-      />
-      <div className={containerCss}>
-        <h1 className={mainTitleCss}>
-          하루 <strong>10분씩</strong> 2주 동안
-          <br />
-          어떤 일에 투자하고 싶은가요?
-        </h1>
-        <section className={sectionCss}>
-          <Input
-            type="text"
-            placeholder="미션명 입력"
-            name="미션명"
-            required
-            maxLength={20}
-            value={missionTitleInput}
-            onChange={handleMissionTitleInput}
-          />
-          <Input
-            type="text"
-            placeholder="미션 내용 입력"
-            name="미션내용"
-            maxLength={30}
-            value={missionContentInput}
-            onChange={handleMissionContentInput}
-          />
-
-          {/* 카테고리 */}
-          <Input
-            variant="drop-down"
-            title="카테고리"
-            required
-            list={MISSION_CATEGORY_LIST}
-            placeholder="카테고리 선택"
-            selected={missionCategory}
-            onSelect={(item) => setMissionCategory(item)}
-          />
-          {/* TODO: 이후에 삭제 - 미션 기간, 알림 설정 Input 생기며 리스트 여백 수정 */}
-          <hr
-            className={css({
-              height: '12px',
-              opacity: 0,
-            })}
-          />
-
-          {/* 공개설정 */}
-          <Input
-            variant="drop-down"
-            title="공개설정"
-            list={PUBLIC_SETTING_LIST}
-            selected={missionPublicSetting}
-            onSelect={(item) => setMissionPublicSetting(item)}
-          />
-        </section>
-      </div>
-    </main>
-  );
-}
-
-const mainWrapperCss = css({
-  flex: 1,
-  display: 'flex',
-  flexDirection: 'column',
-
-  width: '100%',
-});
-
-const containerCss = css({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-
-  padding: '24px 16px',
-});
-
-const mainTitleCss = css({
-  marginTop: '2px',
-  marginBottom: '36px',
-
-  textStyle: 'title2',
-
-  color: 'text.primary',
-  '& strong': {
-    color: 'purple.purple800',
-    textStyle: 'title2',
-  },
-});
-
-const sectionCss = flex({
-  flexDirection: 'column',
-  gap: '12px',
-});
diff --git a/src/app/mission/new/useCreateMissionMutation.ts b/src/app/mission/new/useCreateMissionMutation.ts
deleted file mode 100644
index 37f14fa2..00000000
--- a/src/app/mission/new/useCreateMissionMutation.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useRouter } from 'next/navigation';
-import APIS from '@/apis';
-import { isSeverError } from '@/apis/instance.api';
-import { useSnackBar } from '@/components/SnackBar/SnackBarProvider';
-import { ROUTER } from '@/constants/router';
-import { useMutation } from '@tanstack/react-query';
-
-const useCreateMissionMutation = () => {
-  const router = useRouter();
-  const { triggerSnackBar } = useSnackBar();
-
-  return useMutation({
-    mutationFn: APIS.createMission,
-    onSuccess: () => {
-      router.replace(ROUTER.HOME);
-    },
-    onError: (error) => {
-      console.error('error: ', error);
-      if (isSeverError(error)) {
-        triggerSnackBar({
-          message: error.response.data.data.message,
-        });
-        return;
-      }
-    },
-  });
-};
-
-export default useCreateMissionMutation;
diff --git a/src/app/mypage/Profile.tsx b/src/app/mypage/Profile.tsx
deleted file mode 100644
index 473ba2a8..00000000
--- a/src/app/mypage/Profile.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-'use client';
-
-import { useGetMembersMe } from '@/apis/member';
-import ProfileContent from '@/app/mypage/ProfileContent';
-
-function Profile() {
-  const { data } = useGetMembersMe();
-  if (!data) return <ProfileContent nickname={''} />;
-  const { nickname, profileImageUrl } = data;
-  return <ProfileContent nickname={nickname} profileUrl={profileImageUrl} />;
-}
-
-export default Profile;
diff --git a/src/app/mypage/ProfileContent.tsx b/src/app/mypage/ProfileContent.tsx
deleted file mode 100644
index 5ca758d7..00000000
--- a/src/app/mypage/ProfileContent.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import Link from 'next/link';
-import Icon from '@/components/Icon';
-import Thumbnail from '@/components/Thumbnail/Thumbnail';
-import { ROUTER } from '@/constants/router';
-import { css } from '@/styled-system/css';
-import { flex } from '@/styled-system/patterns';
-
-function ProfileContent({ nickname, profileUrl }: { nickname: string; profileUrl?: string }) {
-  return (
-    <section className={containerCss}>
-      <Link href={ROUTER.MYPAGE.PROFILE_MODIFY}>
-        <div className={profileWrapperCss}>
-          <Thumbnail size={'h52'} variant={'filled'} url={profileUrl} />
-          <p className={nicknameCss}>{nickname}</p>
-          <Icon name="arrow-forward" width={16} height={16} color="icon.secondary" />
-        </div>
-      </Link>
-    </section>
-  );
-}
-
-export default ProfileContent;
-
-const containerCss = flex({
-  margin: '16px',
-  padding: '12px',
-  flexDirection: 'column',
-  gap: '14px',
-  borderRadius: '22px',
-  boxShadow: '0px 5px 50px 4px rgba(92, 78, 122, 0.50) inset, 0px 4px 20px 0px rgba(16, 15, 23, 0.20)',
-  background: 'linear-gradient(93deg, rgba(25, 23, 27, 0.80) 0.82%, rgba(24, 25, 33, 0.80) 99.97%)',
-  backdropFilter: 'blur(20px)',
-});
-
-const profileWrapperCss = flex({
-  gap: '10px',
-  alignItems: 'center',
-});
-
-const nicknameCss = css({
-  textStyle: 'subtitle2',
-  color: 'text.primary',
-  flex: 1,
-
-  // 한줄 말줄임 처리
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  minWidth: '0',
-  whiteSpace: 'nowrap',
-});
diff --git a/src/app/mypage/VersionInfo.tsx b/src/app/mypage/VersionInfo.tsx
deleted file mode 100644
index eba25813..00000000
--- a/src/app/mypage/VersionInfo.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { css } from '@/styled-system/css';
-
-const VERSION = '1.0';
-function VersionInfo() {
-  return <article className={containerCss}>버전 정보 {VERSION}</article>;
-}
-
-export default VersionInfo;
-
-const containerCss = css({
-  position: 'fixed',
-  bottom: '130px',
-  left: 0,
-  right: 0,
-  margin: '0 auto',
-  width: 'fit-content',
-  textStyle: 'body5',
-  color: 'text.tertiary',
-});
diff --git a/src/app/mypage/complete_mission/layout.tsx b/src/app/mypage/complete_mission/layout.tsx
deleted file mode 100644
index 6ffccf1f..00000000
--- a/src/app/mypage/complete_mission/layout.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import Header from '@/components/Header/Header';
-import { css } from '@/styled-system/css';
-
-function CompleteMissionLayout({ children }: PropsWithChildren) {
-  return (
-    <>
-      <Header rightAction="none" title="종료 미션 보관함" />
-      <main className={mainCss}>{children}</main>
-    </>
-  );
-}
-
-export default CompleteMissionLayout;
-
-const mainCss = css({
-  padding: '16px',
-});
diff --git a/src/app/mypage/complete_mission/page.tsx b/src/app/mypage/complete_mission/page.tsx
deleted file mode 100644
index 570db2f9..00000000
--- a/src/app/mypage/complete_mission/page.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { TwoLineListItem } from '@/components/ListItem';
-import { flex } from '@/styled-system/patterns';
-
-function CompleteMissionPage() {
-  return (
-    <div className={containerCss}>
-      {DUMMY_MISSION_LIST.map((item) => (
-        <TwoLineListItem
-          key={item.missionTitle}
-          name={item.missionTitle}
-          subName={item.category}
-          imageUrl={item.imageUrl}
-        />
-      ))}
-    </div>
-  );
-}
-
-export default CompleteMissionPage;
-
-const containerCss = flex({
-  flexDirection: 'column',
-  gap: '8px',
-});
-
-const DUMMY_MISSION_LIST = [
-  {
-    imageUrl: '/images/category/writing.png',
-    category:
-      '글쓰기일이삼사오육칠팔구십일이삼사오육칠팔구십일일이삼사오육칠팔구십일이삼사오육칠팔구십일일이삼사오육칠팔구십일이삼사오육칠팔구십일',
-    missionTitle:
-      '오늘 하루 감사일기 쓰기 일이삼사오육칠팔구십일이삼사오육칠팔구십일일이삼사오육칠팔구십일이삼사오육칠팔구십일일이삼사오육칠팔구십일이삼사오육칠팔구십일',
-    status: 'NONE',
-  },
-  {
-    imageUrl: '/images/category/etc.png',
-    category:
-      '글쓰기일이삼사오육칠팔구십일이삼사오육칠팔구십일일이삼사오육칠팔구십일이삼사오육칠팔구십일일이삼사오육칠팔구십일이삼사오육칠팔구십일',
-    missionTitle: '포트폴리오 레퍼런스 수집하기',
-  },
-  {
-    imageUrl: '/images/category/exercise.png',
-    category: '운동',
-    missionTitle: '스쿼트 해서 튼튼해지자!',
-  },
-];
diff --git a/src/app/mypage/layout.tsx b/src/app/mypage/layout.tsx
deleted file mode 100644
index 17424ff9..00000000
--- a/src/app/mypage/layout.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import { css } from '@/styled-system/css';
-
-function Layout({ children }: PropsWithChildren) {
-  return <main className={mainCss}>{children}</main>;
-}
-
-export default Layout;
-
-const mainCss = css({
-  maxWidth: 'maxWidth',
-  margin: '0 auto',
-  minHeight: '100vh',
-});
diff --git a/src/app/mypage/login_info/layout.tsx b/src/app/mypage/login_info/layout.tsx
deleted file mode 100644
index 2979c154..00000000
--- a/src/app/mypage/login_info/layout.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import Header from '@/components/Header/Header';
-import { css } from '@/styled-system/css';
-
-function LoginInfoLayout({ children }: PropsWithChildren) {
-  return (
-    <>
-      <Header rightAction="none" title="로그인 정보" />
-      <main className={mainCss}>{children}</main>
-    </>
-  );
-}
-
-export default LoginInfoLayout;
-
-const mainCss = css({
-  padding: '16px',
-});
diff --git a/src/app/mypage/setting_and_private/layout.tsx b/src/app/mypage/setting_and_private/layout.tsx
deleted file mode 100644
index 8a4a878b..00000000
--- a/src/app/mypage/setting_and_private/layout.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import Header from '@/components/Header/Header';
-import { css } from '@/styled-system/css';
-
-function Layout({ children }: PropsWithChildren) {
-  return (
-    <>
-      <Header isBackIcon={true} rightAction="none" title="설정 및 개인정보" />
-      <main className={mainCss}>{children}</main>
-    </>
-  );
-}
-
-export default Layout;
-const mainCss = css({
-  maxWidth: 'maxWidth',
-  margin: '0 auto',
-  minHeight: '100vh',
-  backgroundColor: 'bg.surface2',
-});
diff --git a/src/app/mypage/setting_and_private/page.tsx b/src/app/mypage/setting_and_private/page.tsx
deleted file mode 100644
index 65e6d212..00000000
--- a/src/app/mypage/setting_and_private/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import MenuList from '../MenuList';
-
-function Mypage() {
-  return (
-    <main>
-      <MenuList />
-    </main>
-  );
-}
-
-export default Mypage;
diff --git a/src/app/mypage/terms/layout.tsx b/src/app/mypage/terms/layout.tsx
deleted file mode 100644
index a95d674e..00000000
--- a/src/app/mypage/terms/layout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import Header from '@/components/Header/Header';
-
-function TermLayout({ children }: PropsWithChildren) {
-  return (
-    <>
-      <Header rightAction="none" title="이용약관" />
-      <main>{children}</main>
-    </>
-  );
-}
-
-export default TermLayout;
diff --git a/src/app/mypage/terms/page.tsx b/src/app/mypage/terms/page.tsx
deleted file mode 100644
index 1ba63bdc..00000000
--- a/src/app/mypage/terms/page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { TERMS } from '@/app/mypage/terms/terms.constants';
-import { flex } from '@/styled-system/patterns';
-
-function TermPage() {
-  return (
-    <div className={containerCss}>
-      {TERMS.split('\n').map((line, index) => (
-        <p key={index}>{line}</p>
-      ))}
-    </div>
-  );
-}
-
-export default TermPage;
-
-const containerCss = flex({
-  flexDirection: 'column',
-  gap: '8px',
-  color: 'text.primary',
-  padding: '30px 20px',
-
-  textStyle: 'body1',
-});
diff --git a/src/app/mypage/withdrawal/layout.tsx b/src/app/mypage/withdrawal/layout.tsx
deleted file mode 100644
index 4ba70834..00000000
--- a/src/app/mypage/withdrawal/layout.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import Header from '@/components/Header/Header';
-import { flex } from '@/styled-system/patterns';
-
-function WithdrawalLayout({ children }: PropsWithChildren) {
-  return (
-    <div className={containerCss}>
-      <Header rightAction="none" title="회원 탈퇴" />
-      <main className={mainCss}>{children}</main>
-    </div>
-  );
-}
-
-export default WithdrawalLayout;
-
-const containerCss = flex({
-  minHeight: '100vh',
-  flexDirection: 'column',
-
-  paddingBottom: '34px', // indicator
-});
-
-const mainCss = flex({
-  padding: '24px 16px 0',
-  flex: 1,
-
-  justifyContent: 'space-between',
-  flexDirection: 'column',
-});
diff --git a/src/app/mypage/withdrawal/page.tsx b/src/app/mypage/withdrawal/page.tsx
deleted file mode 100644
index 1792ff3f..00000000
--- a/src/app/mypage/withdrawal/page.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { useWithdrawalMember } from '@/apis/member';
-import Button from '@/components/Button/Button';
-import { useSnackBar } from '@/components/SnackBar/SnackBarProvider';
-import { ROUTER } from '@/constants/router';
-import { removeTokens } from '@/services/auth/actions';
-import { css } from '@/styled-system/css';
-import { grid } from '@/styled-system/patterns';
-
-function WithdrawalPage() {
-  const router = useRouter();
-  const { triggerSnackBar } = useSnackBar();
-  const { mutate } = useWithdrawalMember({
-    onSuccess: () => {
-      removeTokens();
-      triggerSnackBar({
-        message: '회원탈퇴 했습니다.',
-      });
-      router.push(ROUTER.AUTH.LOGIN);
-    },
-    onError: () => {
-      triggerSnackBar({
-        message: '회원탈퇴에 실패했습니다.',
-      });
-    },
-  });
-
-  const onCancel = () => {
-    router.back();
-  };
-
-  const onWithdrawal = () => {
-    mutate();
-  };
-
-  return (
-    <>
-      <section>
-        <h1 className={headingCss}>벌써 헤어지다니 너무 아쉬워요...</h1>
-        <p className={subHeadingCss}>지금 탈퇴하시면 미션과 관련된 모든 내용이 삭제돼요. </p>
-        <p className={subHeadingCss}>그래도 탈퇴하시겠어요?</p>
-      </section>
-
-      {/* TODO : 슬픈 이미지 */}
-
-      <section className={buttonWrapper}>
-        <Button variant="secondary" onClick={onCancel}>
-          취소
-        </Button>
-        <Button variant="primary" onClick={onWithdrawal}>
-          탈퇴하기
-        </Button>
-      </section>
-    </>
-  );
-}
-
-export default WithdrawalPage;
-
-const headingCss = css({
-  textStyle: 'title2',
-  color: 'text.primary',
-  marginBottom: '4px',
-});
-
-const subHeadingCss = css({
-  color: 'text.secondary',
-  textStyle: 'body4',
-});
-
-const buttonWrapper = grid({
-  gap: '8px',
-  gridTemplateColumns: '1fr 1fr',
-  margin: '16px 0',
-});
diff --git a/src/app/privacy/layout.tsx b/src/app/privacy/layout.tsx
deleted file mode 100644
index f96230e5..00000000
--- a/src/app/privacy/layout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { type PropsWithChildren } from 'react';
-import Header from '@/components/Header/Header';
-
-function PrivacyLayout({ children }: PropsWithChildren) {
-  return (
-    <>
-      <Header rightAction="none" title="개인정보 보호 정책" />
-      <main>{children}</main>
-    </>
-  );
-}
-
-export default PrivacyLayout;
diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
deleted file mode 100644
index 91ad2062..00000000
--- a/src/app/privacy/page.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { PRIVACY } from '@/app/privacy/privacy.contants';
-import { flex } from '@/styled-system/patterns';
-
-function PrivacyPage() {
-  return (
-    <div className={containerCss}>
-      {PRIVACY.split('\n').map((line, index) => (
-        <p key={index}>{line}</p>
-      ))}
-    </div>
-  );
-}
-
-export default PrivacyPage;
-
-const containerCss = flex({
-  flexDirection: 'column',
-  gap: '8px',
-  color: 'text.primary',
-  padding: '30px 20px',
-
-  textStyle: 'body1',
-});
diff --git a/src/app/record/[id]/detail/layout.tsx b/src/app/record/[id]/detail/layout.tsx
deleted file mode 100644
index 67819a7d..00000000
--- a/src/app/record/[id]/detail/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import { css } from '@styled-system/css';
-
-export default function Layout({ children }: PropsWithChildren) {
-  return <div className={containerCss}>{children}</div>;
-}
-
-const containerCss = css({
-  maxWidth: 'maxWidth',
-  margin: '0 auto',
-  minHeight: '100vh',
-
-  display: 'flex',
-  flexDirection: 'column',
-});
diff --git a/src/app/record/[id]/edit/loading.tsx b/src/app/record/[id]/edit/loading.tsx
deleted file mode 100644
index 872de284..00000000
--- a/src/app/record/[id]/edit/loading.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Header from '@/components/Header/Header';
-import TextArea from '@/components/TextArea/TextArea';
-import { css } from '@styled-system/css';
-
-export default function LoadingPage() {
-  return (
-    <main className={mainWrapperCss}>
-      <Header rightAction="text-button" title={'일지 수정'} rightButtonText={'저장'} />
-      <TextArea count placeholder={'일지를 입력해주세요'} />
-    </main>
-  );
-}
-
-const mainWrapperCss = css({
-  width: '100%',
-  padding: '32px 16px 0 16px',
-});
diff --git a/src/app/record/[id]/follow/page.tsx b/src/app/record/[id]/follow/page.tsx
deleted file mode 100644
index 4d663495..00000000
--- a/src/app/record/[id]/follow/page.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Suspense } from 'react';
-import MissionRecordDetail from '@/app/record/[id]/detail/MissionRecordDetail';
-import Header from '@/components/Header/Header';
-import { css } from '@styled-system/css';
-
-function FollowMissionRecordDetailPage() {
-  return (
-    <main className={mainWrapperCss}>
-      <Header rightAction={'none'} title={'미션 내역'} />
-      <Suspense>
-        <MissionRecordDetail isFollow />
-      </Suspense>
-    </main>
-  );
-}
-
-export default FollowMissionRecordDetailPage;
-
-const mainWrapperCss = css({
-  width: '100%',
-});
diff --git a/src/app/record/success/layout.tsx b/src/app/record/success/layout.tsx
deleted file mode 100644
index 5f451d78..00000000
--- a/src/app/record/success/layout.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client';
-import { type PropsWithChildren } from 'react';
-import { css } from '@styled-system/css';
-import { motion } from 'framer-motion';
-
-export default function Layout({ children }: PropsWithChildren) {
-  return (
-    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }}>
-      <div className={containerCss}>{children}</div>
-    </motion.div>
-  );
-}
-
-const containerCss = css({
-  maxWidth: 'maxWidth',
-  margin: '0 auto',
-  minHeight: '100vh',
-
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-});
diff --git a/src/app/result/layout.tsx b/src/app/result/layout.tsx
deleted file mode 100644
index 2c19f01a..00000000
--- a/src/app/result/layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import { css } from '@/styled-system/css';
-
-function Layout({ children }: PropsWithChildren) {
-  return <main className={mainCss}>{children}</main>;
-}
-
-export default Layout;
-
-const mainCss = css({
-  maxWidth: 'maxWidth',
-  margin: '0 auto',
-  minHeight: '100vh',
-  overflowX: 'hidden',
-});
diff --git a/src/app/search/layout.tsx b/src/app/search/layout.tsx
deleted file mode 100644
index 3a747f18..00000000
--- a/src/app/search/layout.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { type PropsWithChildren } from 'react';
-import Header from '@/components/Header/Header';
-import { css } from '@/styled-system/css';
-
-function SearchLayout({ children }: PropsWithChildren) {
-  return (
-    <>
-      <Header rightAction="none" title="닉네임 검색" />
-      <main className={mainCss}>{children}</main>
-    </>
-  );
-}
-
-export default SearchLayout;
-
-const mainCss = css({
-  padding: '8px 16px 16px',
-  height: '100%',
-  minHeight: 'calc(100vh - 44px)',
-  maxHeight: 'calc(100vh - 44px)',
-  display: 'flex',
-  flexDirection: 'column',
-});
diff --git a/src/components/AppBarBottom/AppBarBottom.tsx b/src/components/AppBarBottom/AppBarBottom.tsx
index 3803b0c8..2931e11d 100644
--- a/src/components/AppBarBottom/AppBarBottom.tsx
+++ b/src/components/AppBarBottom/AppBarBottom.tsx
@@ -1,11 +1,9 @@
-'use client';
-
-import { usePathname } from 'next/navigation';
+import { useRouter } from 'next/router';
 import AppBarBottomView from '@/components/AppBarBottom/AppBarBottomVIew';
 import { NAVIGATION } from '@/constants/navigation';
 
 function AppBarBottom() {
-  const pathname = usePathname();
+  const { pathname } = useRouter();
   const current = NAVIGATION.find((item) => item.path === pathname)?.key || NAVIGATION[0].key;
 
   return <AppBarBottomView current={current} />;
diff --git a/src/components/AppBarBottom/AppBarBottomVIew.tsx b/src/components/AppBarBottom/AppBarBottomVIew.tsx
index bc212a5b..31c8f27e 100644
--- a/src/components/AppBarBottom/AppBarBottomVIew.tsx
+++ b/src/components/AppBarBottom/AppBarBottomVIew.tsx
@@ -1,7 +1,6 @@
 import Link from 'next/link';
 import Icon from '@/components/Icon';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
-import { NATIVE_CUSTOM_EVENTS } from '@/constants/nativeCustomEvent';
 import { NAVIGATION, type NavigationItemType } from '@/constants/navigation';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
diff --git a/src/components/Banner/CardLevel.tsx b/src/components/Banner/CardLevel.tsx
index 1ca0bae1..27685b76 100644
--- a/src/components/Banner/CardLevel.tsx
+++ b/src/components/Banner/CardLevel.tsx
@@ -1,5 +1,5 @@
-import Character from '@/app/level/guide/Character';
 import Icon from '@/components/Icon';
+import Character from '@/components/Level/Character';
 import LockedCharacter from '@/components/Level/LockedCharacter';
 import { LEVEL_SYSTEM } from '@/constants/level';
 import { gradientBorderWrapperCss, gradientTextCss } from '@/constants/style/gradient';
diff --git a/src/components/BottomDim/BottomDim.tsx b/src/components/BottomDim/BottomDim.tsx
index 27e6e7bf..711aea64 100644
--- a/src/components/BottomDim/BottomDim.tsx
+++ b/src/components/BottomDim/BottomDim.tsx
@@ -1,12 +1,13 @@
 import { cva } from '@/styled-system/css';
 
-function BottomDim({ type = 'bottomDim1' }: { type?: 'bottomDim1' | 'bottomDim2' }) {
+type BottomDimType = 'bottomDim1' | 'bottomDim2';
+function BottomDim({ type = 'bottomDim1' }: { type?: BottomDimType }) {
   return (
     <article
       className={containerCss({
         type: type,
       })}
-    ></article>
+    />
   );
 }
 
diff --git a/src/components/Dialog/DefaultDialog.tsx b/src/components/Dialog/DefaultDialog.tsx
index 239a38d4..b5886768 100644
--- a/src/components/Dialog/DefaultDialog.tsx
+++ b/src/components/Dialog/DefaultDialog.tsx
@@ -1,8 +1,9 @@
 import Button from '@/components/Button/Button';
-import { type DefaultDialogProps } from '@/components/Dialog/Dialog.types';
 import Modal from '@/components/Modal/Modal';
 import { css } from '@styled-system/css';
 
+import { type DefaultDialogProps } from './Dialog.types';
+
 /**
  * @description DefaultDialog 컴포넌트
  * @param onCancel 취소 버튼 클릭 시 실행되는 함수
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index 09916af9..347f2368 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -1,7 +1,7 @@
-import DefaultDialog from '@/components/Dialog/DefaultDialog';
-import { type DialogProps } from '@/components/Dialog/Dialog.types';
 import { type ModalProps } from '@/components/Modal/Modal';
 
+import DefaultDialog from './DefaultDialog';
+import { type DialogProps } from './Dialog.types';
 import ListDialog from './ListDialog';
 
 /**
diff --git a/src/components/Dialog/ListDialog.tsx b/src/components/Dialog/ListDialog.tsx
index a7981b39..eefc8f12 100644
--- a/src/components/Dialog/ListDialog.tsx
+++ b/src/components/Dialog/ListDialog.tsx
@@ -1,7 +1,8 @@
-import { type ListDialogProps } from '@/components/Dialog/Dialog.types';
 import Modal from '@/components/Modal/Modal';
 import { css } from '@styled-system/css';
 
+import { type ListDialogProps } from './Dialog.types';
+
 /**
  * @description ListDialog 컴포넌트
  * @param title 다이얼로그 타이틀
diff --git a/src/components/Empty/Empty.tsx b/src/components/Empty/Empty.tsx
index 0072bade..fb57fb75 100644
--- a/src/components/Empty/Empty.tsx
+++ b/src/components/Empty/Empty.tsx
@@ -1,16 +1,17 @@
 import { type PropsWithChildren } from 'react';
 import Image from 'next/image';
 import LinkButton from '@/components/Button/LinkButton';
+import Icon from '@/components/Icon';
+import { css } from '@/styled-system/css';
+import { flex } from '@/styled-system/patterns';
+
 import {
   type DefaultEmptyProps,
   type EmptyProps,
   type NoticesEmptyProps,
   type RefreshEmptyProps,
   type SuggestEmptyProps,
-} from '@/components/Empty/Empty.types';
-import Icon from '@/components/Icon';
-import { css } from '@/styled-system/css';
-import { flex } from '@/styled-system/patterns';
+} from './Empty.types';
 
 function DefaultEmptyView({ children, ...props }: PropsWithChildren<DefaultEmptyProps>) {
   return (
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index cb9e9742..95e00d5c 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,16 +1,14 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { type HeaderType } from '@/components/Header/Header.types';
-import HeaderBase from '@/components/Header/HeaderBase';
-import IconHeader from '@/components/Header/IconHeader';
-import IconMenuHeader from '@/components/Header/IconMenuHeader';
-import NoneHeader from '@/components/Header/NoneHeader';
-import TextButtonHeader from '@/components/Header/TextButtonHeader';
+import { useRouter } from 'next/router';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { eventLogger } from '@/utils';
 
+import { type HeaderType } from './Header.types';
+import HeaderBase from './HeaderBase';
+import IconHeader from './IconHeader';
+import IconMenuHeader from './IconMenuHeader';
+import NoneHeader from './NoneHeader';
 import RightComponentHeader from './RightComponentHeader';
+import TextButtonHeader from './TextButtonHeader';
 
 function Header({ onBackAction, isBackIcon = true, ...props }: HeaderType) {
   const router = useRouter();
diff --git a/src/components/Header/HeaderBase.tsx b/src/components/Header/HeaderBase.tsx
index be399267..125bbdd4 100644
--- a/src/components/Header/HeaderBase.tsx
+++ b/src/components/Header/HeaderBase.tsx
@@ -1,9 +1,10 @@
-import React, { type ReactNode } from 'react';
-import { type HeaderBaseType } from '@/components/Header/Header.types';
+import { type ReactNode } from 'react';
 import Icon from '@/components/Icon';
 import { css, cx } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
+import { type HeaderBaseType } from './Header.types';
+
 /**
  * @description Header의 View를 담당하는 컴포넌트
  * @param title header title text
diff --git a/src/components/Header/IconHeader.tsx b/src/components/Header/IconHeader.tsx
index c31a30f3..e5839dc4 100644
--- a/src/components/Header/IconHeader.tsx
+++ b/src/components/Header/IconHeader.tsx
@@ -1,8 +1,9 @@
-import { type IconHeaderType } from '@/components/Header/Header.types';
-import HeaderBase from '@/components/Header/HeaderBase';
 import Icon from '@/components/Icon';
 import { css } from '@styled-system/css';
 
+import { type IconHeaderType } from './Header.types';
+import HeaderBase from './HeaderBase';
+
 function IconHeader({ iconName = 'close', ...props }: IconHeaderType) {
   return (
     <HeaderBase
diff --git a/src/components/Header/NoneHeader.tsx b/src/components/Header/NoneHeader.tsx
index 17ef6b9f..5abca066 100644
--- a/src/components/Header/NoneHeader.tsx
+++ b/src/components/Header/NoneHeader.tsx
@@ -1,5 +1,5 @@
-import { type NoneHeaderType } from '@/components/Header/Header.types';
-import HeaderBase from '@/components/Header/HeaderBase';
+import { type NoneHeaderType } from './Header.types';
+import HeaderBase from './HeaderBase';
 
 function NoneHeader(props: NoneHeaderType) {
   return <HeaderBase rightElement={undefined} {...props} />;
diff --git a/src/components/Header/RightComponentHeader.tsx b/src/components/Header/RightComponentHeader.tsx
index 06997245..8f44db5c 100644
--- a/src/components/Header/RightComponentHeader.tsx
+++ b/src/components/Header/RightComponentHeader.tsx
@@ -1,9 +1,9 @@
 import { useRouter } from 'next/navigation';
-import { type TextButtonHeaderType } from '@/components/Header/Header.types';
+import Button from '@/components/Button/Button';
+import Icon from '@/components/Icon';
 import { css } from '@/styled-system/css';
 
-import Button from '../Button/Button';
-import Icon from '../Icon';
+import { type TextButtonHeaderType } from './Header.types';
 
 // 이거 여기에 있는 이유가?
 function RightComponentHeader({ rightButtonText = '완료', rightButtonProps, title }: TextButtonHeaderType) {
diff --git a/src/components/Header/TextButtonHeader.tsx b/src/components/Header/TextButtonHeader.tsx
index 24d941c9..2cda58b9 100644
--- a/src/components/Header/TextButtonHeader.tsx
+++ b/src/components/Header/TextButtonHeader.tsx
@@ -1,6 +1,7 @@
 import Button from '@/components/Button/Button';
-import { type TextButtonHeaderType } from '@/components/Header/Header.types';
-import HeaderBase from '@/components/Header/HeaderBase';
+
+import { type TextButtonHeaderType } from './Header.types';
+import HeaderBase from './HeaderBase';
 
 function TextButtonHeader({ rightButtonText = '완료', rightButtonProps, ...props }: TextButtonHeaderType) {
   return (
diff --git a/src/components/Input/NormalInput.tsx b/src/components/Input/NormalInput.tsx
index edc8c300..d4d0571b 100644
--- a/src/components/Input/NormalInput.tsx
+++ b/src/components/Input/NormalInput.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useState } from 'react';
 import { type NormalInputType } from '@/components/Input/Input.types';
 import { css, cx } from '@/styled-system/css';
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 410c11ed..ee6488f8 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -1,7 +1,6 @@
-'use client';
 import { type PropsWithChildren, useContext, useRef } from 'react';
 import { LayoutRouterContext } from 'next/dist/shared/lib/app-router-context';
-import { usePathname } from 'next/navigation';
+import { useRouter } from 'next/router';
 import { AnimatePresence, motion } from 'framer-motion';
 
 function FrozenRouter(props: PropsWithChildren) {
@@ -12,7 +11,7 @@ function FrozenRouter(props: PropsWithChildren) {
 }
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
-  const pathname = usePathname();
+  const { pathname } = useRouter();
 
   return (
     <AnimatePresence mode="wait">
diff --git a/src/app/level/guide/Character.tsx b/src/components/Level/Character.tsx
similarity index 100%
rename from src/app/level/guide/Character.tsx
rename to src/components/Level/Character.tsx
diff --git a/src/components/LevelStatus/LevelStatus.tsx b/src/components/LevelStatus/LevelStatus.tsx
index 64b4c88f..53bcb933 100644
--- a/src/components/LevelStatus/LevelStatus.tsx
+++ b/src/components/LevelStatus/LevelStatus.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import Graph from '@/components/Graph/Graph';
 import { getLevel } from '@/utils/result';
 
@@ -26,20 +24,6 @@ function LevelStatus({ viewLevel, ...props }: Props) {
   if (currentLevel.level > viewLevel) {
     return <Graph status="past-level" level={viewLevel} {...props} />;
   }
-
-  //   return (
-  //     <section className={containerCss}>
-  //       <div className={levelWrapperCss}>
-  //         <div className={symbolContainerCss}>
-  //           <TenMMSymbol />
-  //         </div>
-  //         {/* <Image src="/assets/icons/10mm-symbol-fill.svg" alt="10mm symbol fill" width={16} height={16} /> */}
-  //         <span className={cx(levelLabelCss, gradientTextCss)}>{props.symbolStack}</span>
-  //       </div>
-  //       <p className={levelTextWrapperCss}>{viewLevel.label}</p>
-  //       <LevelProgressBar current={props.symbolStack} isLabel={!viewLevel.isFinal} {...viewLevel} />
-  //     </section>
-  //   );
 }
 
 export default LevelStatus;
diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx
index 935ffb42..b5f33b11 100644
--- a/src/components/Loading/index.tsx
+++ b/src/components/Loading/index.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import Icon from '@/components/Icon';
 import Portal from '@/components/portal/Portal';
 import { css } from '@/styled-system/css';
diff --git a/src/components/MissionDetail/MissionDeleteDialog.tsx b/src/components/MissionDetail/MissionDeleteDialog.tsx
index fd5f5685..270acd51 100644
--- a/src/components/MissionDetail/MissionDeleteDialog.tsx
+++ b/src/components/MissionDetail/MissionDeleteDialog.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import { useDeleteMissionMutation } from '@/apis/mission';
 import Dialog from '@/components/Dialog/Dialog';
 import { useSnackBar } from '@/components/SnackBar/SnackBarProvider';
diff --git a/src/components/MissionDetail/MissionHistoryTab.tsx b/src/components/MissionDetail/MissionHistoryTab.tsx
index 3dd0380c..ee21e09f 100644
--- a/src/components/MissionDetail/MissionHistoryTab.tsx
+++ b/src/components/MissionDetail/MissionHistoryTab.tsx
@@ -1,12 +1,14 @@
-import { useParams } from 'next/navigation';
-import MissionHistoryBannerApi from '@/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBannerApi';
+import { useRouter } from 'next/router';
 import MissionCalendar from '@/components/MissionDetail/MissionCalender/MissionCalendar';
 import MissionHistoryTabLayout from '@/components/MissionDetail/MissionHistoryTabLayout';
+import MissionHistoryBannerApi from '@/pages/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBannerApi';
 import { css } from '@styled-system/css';
 import dayjs from 'dayjs';
 
 function MissionHistoryTab({ isFollow }: { isFollow?: boolean }) {
-  const { id } = useParams();
+  const router = useRouter();
+  const id = router.query.id;
+
   const missionId = id as string;
   const currentData = dayjs();
 
diff --git a/src/app/record/[id]/detail/MissionDuration.tsx b/src/components/MissionDuration.tsx
similarity index 97%
rename from src/app/record/[id]/detail/MissionDuration.tsx
rename to src/components/MissionDuration.tsx
index 099f0232..6426d733 100644
--- a/src/app/record/[id]/detail/MissionDuration.tsx
+++ b/src/components/MissionDuration.tsx
@@ -1,6 +1,7 @@
 import Icon from '@/components/Icon';
 import { css } from '@styled-system/css';
 
+// TODO : 컴포넌트 분리
 function MissionDuration({ type = 'record', duration }: { type?: 'profileFeed' | 'record'; duration: number }) {
   if (type === 'profileFeed') {
     return (
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 4306959a..c27fd0e4 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import React, { type PropsWithChildren, useRef } from 'react';
 import AnimatePortal from '@/components/portal/AnimationPortal';
 import useOutsideClick from '@/hooks/useOutsideClick';
diff --git a/src/components/Motion/MotionDiv.tsx b/src/components/Motion/MotionDiv.tsx
index 166be474..629c8386 100644
--- a/src/components/Motion/MotionDiv.tsx
+++ b/src/components/Motion/MotionDiv.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { type ComponentProps, useMemo } from 'react';
 import { motion, type Variants } from 'framer-motion';
 
diff --git a/src/components/NotificationSnackBar/NotificationSnackBarOverlay.tsx b/src/components/NotificationSnackBar/NotificationSnackBarOverlay.tsx
index 483c3a4d..16b35a27 100644
--- a/src/components/NotificationSnackBar/NotificationSnackBarOverlay.tsx
+++ b/src/components/NotificationSnackBar/NotificationSnackBarOverlay.tsx
@@ -1,4 +1,3 @@
-'use client';
 import React from 'react';
 import { cva } from '@styled-system/css';
 import { AnimatePresence, motion } from 'framer-motion';
diff --git a/src/components/NotificationSnackBar/NotificationSnackBarProvider.tsx b/src/components/NotificationSnackBar/NotificationSnackBarProvider.tsx
index 0e20521f..a40cdbcb 100644
--- a/src/components/NotificationSnackBar/NotificationSnackBarProvider.tsx
+++ b/src/components/NotificationSnackBar/NotificationSnackBarProvider.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { createContext, type PropsWithChildren, useContext, useState } from 'react';
 import {
   type SnackBarType as NotificationSnackBarType,
diff --git a/src/app/profile/[id]/ProfileContent.tsx b/src/components/ProfileContent.tsx
similarity index 97%
rename from src/app/profile/[id]/ProfileContent.tsx
rename to src/components/ProfileContent.tsx
index 0b61675d..a23ea1b4 100644
--- a/src/app/profile/[id]/ProfileContent.tsx
+++ b/src/components/ProfileContent.tsx
@@ -20,7 +20,6 @@ interface ProfileContentProps {
   isFollow?: boolean;
 }
 
-// TODO : 파일 위치 조정 (mypage, profile 둘다 사용하는 컴포넌트)
 function ProfileContent({
   profileImageUrl,
   nickname,
@@ -97,11 +96,13 @@ const myTabContainerCss = css({
   borderTopLeftRadius: '28px',
   padding: '52px 16px 0',
 });
+
 const userNameCss = css({
   color: 'text.primary',
   fontSize: 'subtitle2',
   fontWeight: 'semibold',
 });
+
 const followerTabCss = css({
   color: 'text.secondary',
   textStyle: 'body5',
diff --git a/src/app/mypage/FeedThumbnail.tsx b/src/components/ProfileTab/FeedThumbnail.tsx
similarity index 95%
rename from src/app/mypage/FeedThumbnail.tsx
rename to src/components/ProfileTab/FeedThumbnail.tsx
index 545bb51b..c89e1987 100644
--- a/src/app/mypage/FeedThumbnail.tsx
+++ b/src/components/ProfileTab/FeedThumbnail.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import MissionDuration from '@/app/record/[id]/detail/MissionDuration';
+import MissionDuration from '@/components/MissionDuration';
 import { css } from '@styled-system/css';
 
 function FeedThumbnail({ imageUrl, missionDuration }: { imageUrl: string; missionDuration: number }) {
diff --git a/src/app/mypage/refactor/FollowMissionList.tsx b/src/components/ProfileTab/FollowMissionList.tsx
similarity index 97%
rename from src/app/mypage/refactor/FollowMissionList.tsx
rename to src/components/ProfileTab/FollowMissionList.tsx
index cb1023b0..4f82d92b 100644
--- a/src/app/mypage/refactor/FollowMissionList.tsx
+++ b/src/components/ProfileTab/FollowMissionList.tsx
@@ -1,6 +1,5 @@
 import Link from 'next/link';
 import { useFollowMissions } from '@/apis/follow';
-import { MissionListSkeleton } from '@/app/home/home.styles';
 import Empty from '@/components/Empty/Empty';
 import { TwoLineListItem } from '@/components/ListItem';
 import MissionBadge from '@/components/MissionList/Badge';
@@ -9,6 +8,7 @@ import StaggerWrapper from '@/components/Motion/StaggerWrapper';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { MISSION_CATEGORY_LABEL } from '@/constants/mission';
 import { ROUTER } from '@/constants/router';
+import { MissionListSkeleton } from '@/pages/home/home.styles';
 import { eventLogger } from '@/utils';
 import { css } from '@styled-system/css';
 import { flex } from '@styled-system/patterns';
diff --git a/src/app/mypage/refactor/MissionInnerList.tsx b/src/components/ProfileTab/MissionInnerList.tsx
similarity index 100%
rename from src/app/mypage/refactor/MissionInnerList.tsx
rename to src/components/ProfileTab/MissionInnerList.tsx
diff --git a/src/app/mypage/ProfileFeedItem.tsx b/src/components/ProfileTab/ProfileFeedItem.tsx
similarity index 95%
rename from src/app/mypage/ProfileFeedItem.tsx
rename to src/components/ProfileTab/ProfileFeedItem.tsx
index 50ecb01e..44e1e368 100644
--- a/src/app/mypage/ProfileFeedItem.tsx
+++ b/src/components/ProfileTab/ProfileFeedItem.tsx
@@ -1,7 +1,8 @@
 import { type FeedBaseType } from '@/apis/schema/feed';
-import FeedThumbnail from '@/app/mypage/FeedThumbnail';
 import { css } from '@styled-system/css';
 
+import FeedThumbnail from './FeedThumbnail';
+
 function ProfileFeedItem(feed: FeedBaseType) {
   return (
     <li className={feedItemCss}>
diff --git a/src/app/mypage/ProfileFeedList.tsx b/src/components/ProfileTab/ProfileFeedList.tsx
similarity index 95%
rename from src/app/mypage/ProfileFeedList.tsx
rename to src/components/ProfileTab/ProfileFeedList.tsx
index cd97fa08..41e38b2d 100644
--- a/src/app/mypage/ProfileFeedList.tsx
+++ b/src/components/ProfileTab/ProfileFeedList.tsx
@@ -1,12 +1,13 @@
 import Link from 'next/link';
 import { useFeedByMemberId } from '@/apis/feed';
-import ProfileFeedItem, { ProfileFeedItemSkeleton } from '@/app/mypage/ProfileFeedItem';
 import Empty from '@/components/Empty/Empty';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { ROUTER } from '@/constants/router';
 import { eventLogger } from '@/utils';
 import { css } from '@styled-system/css';
 
+import ProfileFeedItem, { ProfileFeedItemSkeleton } from './ProfileFeedItem';
+
 function ProfileFeedList({ memberId, isMySelf }: { memberId: number; isMySelf: boolean }) {
   const { data } = useFeedByMemberId(memberId);
 
diff --git a/src/app/mypage/ProfileMissionList.tsx b/src/components/ProfileTab/ProfileMissionList.tsx
similarity index 76%
rename from src/app/mypage/ProfileMissionList.tsx
rename to src/components/ProfileTab/ProfileMissionList.tsx
index ed8b3c3b..906da621 100644
--- a/src/app/mypage/ProfileMissionList.tsx
+++ b/src/components/ProfileTab/ProfileMissionList.tsx
@@ -1,10 +1,9 @@
-'use client';
-
-import FollowMissionList from '@/app/mypage/refactor/FollowMissionList';
-import MissionListInner from '@/app/mypage/refactor/MissionInnerList';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
+import FollowMissionList from './FollowMissionList';
+import MissionListInner from './MissionInnerList';
+
 function ProfileMissionList({ id }: { id?: number }) {
   return (
     <div className={containerCss}>
diff --git a/src/app/mypage/ProfileTab.tsx b/src/components/ProfileTab/ProfileTab.tsx
similarity index 75%
rename from src/app/mypage/ProfileTab.tsx
rename to src/components/ProfileTab/ProfileTab.tsx
index c7ffab93..321d093d 100644
--- a/src/app/mypage/ProfileTab.tsx
+++ b/src/components/ProfileTab/ProfileTab.tsx
@@ -1,7 +1,4 @@
-'use client';
 import { useGetMembersMe } from '@/apis/member';
-import ProfileFeedList from '@/app/mypage/ProfileFeedList';
-import ProfileMissionList from '@/app/mypage/ProfileMissionList';
 import Tab from '@/components/Tab/Tab';
 import { useTab } from '@/components/Tab/Tab.hooks';
 import { type TabType } from '@/components/Tab/Tab.types';
@@ -9,6 +6,9 @@ import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { eventLogger } from '@/utils';
 import { css } from '@styled-system/css';
 
+import ProfileFeedList from './ProfileFeedList';
+import ProfileMissionList from './ProfileMissionList';
+
 const PROFILE_TABS = [
   {
     tabName: '피드',
@@ -20,8 +20,12 @@ const PROFILE_TABS = [
   },
 ];
 
-// TODO : 파일 위치 조정 (mypage, profile 둘다 사용하는 컴포넌트)
-function ProfileTab({ memberId }: { memberId: number }) {
+interface ProfileTabProps {
+  memberId: number;
+}
+
+// TODO : mypage, profile에서 따로 사용하도록 리팩토링 하면 좋을 듯
+function ProfileTab({ memberId }: ProfileTabProps) {
   const { tabs, activeTab, onTabClick } = useTab(PROFILE_TABS, 'feed');
   const { data } = useGetMembersMe();
   if (!data) return null;
@@ -48,7 +52,13 @@ function ProfileTab({ memberId }: { memberId: number }) {
 
 export default ProfileTab;
 
-function TabContent({ activeTab, memberId, isMySelf }: { activeTab: string; memberId: number; isMySelf: boolean }) {
+interface TabContentProps {
+  activeTab: string;
+  memberId: number;
+  isMySelf: boolean;
+}
+
+function TabContent({ activeTab, memberId, isMySelf }: TabContentProps) {
   if (activeTab === 'feed') {
     return <ProfileFeedList memberId={memberId} isMySelf={isMySelf} />;
   }
diff --git a/src/components/SEO/SEO.tsx b/src/components/SEO/SEO.tsx
new file mode 100644
index 00000000..d2050980
--- /dev/null
+++ b/src/components/SEO/SEO.tsx
@@ -0,0 +1,41 @@
+import Head from 'next/head';
+
+interface Props {
+  title?: string;
+  description?: string;
+  ogImage?: string;
+  keywords?: string;
+}
+
+const BASE_URL = 'https://10mm.today';
+const DEFAULT_OG_IMAGE = 'https://www.10mm.today/og-image.png';
+
+/**
+ * @description next/head를 사용하는 SEO 컴포넌트입니다. title, og, twitter 등 SEO에 필요한 태그를 렌더링 합니다.
+ */
+const SEO = ({ title, description, ogImage, keywords }: Props) => {
+  const TITLE = title || '10MM';
+  const DESCRIPTION = description || '10MM';
+
+  const IMAGE = ogImage || DEFAULT_OG_IMAGE;
+
+  return (
+    <Head>
+      <title>{TITLE}</title>
+      <link rel="canonical" href={BASE_URL} />
+      <meta name="description" content={DESCRIPTION} />
+      <meta name="keywords" content={keywords} />
+
+      <meta property="og:title" content={TITLE} />
+      <meta property="og:description" content={DESCRIPTION} />
+      <meta property="og:image" content={IMAGE} />
+      <meta property="og:url" content={BASE_URL} />
+
+      <meta name="twitter:title" content={TITLE} />
+      <meta name="twitter:description" content={DESCRIPTION} />
+      <meta name="twitter:image" content={IMAGE} />
+    </Head>
+  );
+};
+
+export default SEO;
diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx
index a45ce5a2..6715bdd4 100644
--- a/src/components/SearchBar/SearchBar.tsx
+++ b/src/components/SearchBar/SearchBar.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { type ComponentProps } from 'react';
 import Icon from '@/components/Icon';
 import { css, cx } from '@/styled-system/css';
diff --git a/src/components/SnackBar/SnackBarOverlay.tsx b/src/components/SnackBar/SnackBarOverlay.tsx
index ff9024d7..53e77e90 100644
--- a/src/components/SnackBar/SnackBarOverlay.tsx
+++ b/src/components/SnackBar/SnackBarOverlay.tsx
@@ -1,4 +1,3 @@
-'use client';
 import React from 'react';
 import SnackBar from '@/components/SnackBar/SnackBar';
 import { useSnackBar } from '@/components/SnackBar/SnackBarProvider';
diff --git a/src/components/SnackBar/SnackBarProvider.tsx b/src/components/SnackBar/SnackBarProvider.tsx
index 19336a86..4ec7c12b 100644
--- a/src/components/SnackBar/SnackBarProvider.tsx
+++ b/src/components/SnackBar/SnackBarProvider.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { createContext, type PropsWithChildren, useContext, useState } from 'react';
 import { type SnackBarType, type SnackBarWithoutId } from '@/components/SnackBar/SnackBar.types';
 import SnackBarOverlay from '@/components/SnackBar/SnackBarOverlay';
diff --git a/src/components/Tab/Tab.hooks.ts b/src/components/Tab/Tab.hooks.ts
index a96a1708..5ec5c53c 100644
--- a/src/components/Tab/Tab.hooks.ts
+++ b/src/components/Tab/Tab.hooks.ts
@@ -1,5 +1,3 @@
-'use client';
-
 import { useState } from 'react';
 import { type TabType } from '@/components/Tab/Tab.types';
 
diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx
index dfe5d23d..62aa1c0d 100644
--- a/src/components/Tab/Tab.tsx
+++ b/src/components/Tab/Tab.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { css } from '@styled-system/css';
 
 import { type TabProps } from './Tab.types';
diff --git a/src/components/TempleteComponent.tsx b/src/components/TempleteComponent.tsx
new file mode 100644
index 00000000..ace916e1
--- /dev/null
+++ b/src/components/TempleteComponent.tsx
@@ -0,0 +1,10 @@
+import { useAuth } from '@/hooks/useAuth';
+import useForegroundNotification from '@/hooks/useForegroundNotification';
+
+function TemplateComponent({ children }: { children: React.ReactNode }) {
+  useAuth();
+  useForegroundNotification();
+  return children;
+}
+
+export default TemplateComponent;
diff --git a/src/components/portal/AnimationPortal.tsx b/src/components/portal/AnimationPortal.tsx
index fbe5699a..1f41236f 100644
--- a/src/components/portal/AnimationPortal.tsx
+++ b/src/components/portal/AnimationPortal.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { type ComponentProps } from 'react';
 import { AnimatePresence } from 'framer-motion';
 
diff --git a/src/components/portal/Portal.tsx b/src/components/portal/Portal.tsx
index 00153ad8..708ba543 100644
--- a/src/components/portal/Portal.tsx
+++ b/src/components/portal/Portal.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { type PropsWithChildren, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
diff --git a/src/constants/router.ts b/src/constants/router.ts
index cebbe152..28935b0a 100644
--- a/src/constants/router.ts
+++ b/src/constants/router.ts
@@ -1,4 +1,4 @@
-import { type ResultTabId } from '@/app/result/result.constants';
+import { type ResultTabId } from '@/pages/result/result.constants';
 
 export const ROUTER = {
   HOME: '/',
@@ -34,7 +34,6 @@ export const ROUTER = {
     HOME: '/mypage',
     // TODO : 상황에 맞게 수정 필요
     PROFILE_MODIFY: '/mypage/profile_modify',
-    COMPLETE_MISSION_BOX: '/mypage/complete_mission',
     TERMS: '/mypage/terms',
     LOGIN_INFO: '/mypage/login_info',
     WITHDRAWAL: '/mypage/withdrawal',
diff --git a/src/hooks/query/QueryProvider.tsx b/src/hooks/query/QueryProvider.tsx
index 57324d25..2aae7bf9 100644
--- a/src/hooks/query/QueryProvider.tsx
+++ b/src/hooks/query/QueryProvider.tsx
@@ -1,4 +1,3 @@
-'use client';
 import React, { type PropsWithChildren, useState } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
index e1d728ab..f3c46535 100644
--- a/src/hooks/useAuth.ts
+++ b/src/hooks/useAuth.ts
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { usePathname, useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import { ROUTER } from '@/constants/router';
 
 const ALLOW_PATH_LIST = [
@@ -19,8 +19,7 @@ const ALLOW_PATH_LIST = [
 
 export function useAuth() {
   const router = useRouter();
-  const pathname = usePathname();
-
+  const pathname = router.pathname;
   useEffect(() => {
     const token = localStorage.getItem('accessToken') ?? process.env.NEXT_PUBLIC_ACCESS_TOKEN;
 
diff --git a/src/hooks/useSearchParamsTypedValue.tsx b/src/hooks/useSearchParamsTypedValue.tsx
index 38629c01..15577097 100644
--- a/src/hooks/useSearchParamsTypedValue.tsx
+++ b/src/hooks/useSearchParamsTypedValue.tsx
@@ -1,11 +1,16 @@
-import { useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/router';
 
-const useSearchParamsTypedValue = <T extends string>(key: string) => {
-  const searchParams = useSearchParams();
-  if (!searchParams) return { searchParams: null };
-  if (!searchParams.has(key)) return { searchParams: null };
+interface UseSearchParamsTypedValueReturn<T> {
+  searchParams: T | null;
+}
 
-  return { searchParams: searchParams.get(key) as T };
+const useSearchParamsTypedValue = <T extends string>(key: string): UseSearchParamsTypedValueReturn<T> => {
+  const router = useRouter();
+
+  if (!router.query) return { searchParams: null };
+  if (!router.query[key]) return { searchParams: null };
+
+  return { searchParams: router.query[key] as T };
 };
 
 export default useSearchParamsTypedValue;
diff --git a/src/instrumentation.ts b/src/instrumentation.ts
deleted file mode 100644
index 52cb5f70..00000000
--- a/src/instrumentation.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as process from 'process';
-
-export async function register() {
-  console.info('[instrumentation] server.listen()...', process.env.NEXT_RUNTIME, typeof window);
-
-  if (process.env.NEXT_RUNTIME === 'nodejs' && process.env.NEXT_PUBLIC_MSW_EBABLE === 'true') {
-    console.info('MOCKING ENABLED FOR:', process.pid);
-
-    const { server } = await import('@/msw/node');
-    server.listen();
-  }
-}
diff --git a/src/pages/_app.page.tsx b/src/pages/_app.page.tsx
new file mode 100644
index 00000000..dd2ce6e2
--- /dev/null
+++ b/src/pages/_app.page.tsx
@@ -0,0 +1,42 @@
+import { Suspense } from 'react';
+import type { AppProps } from 'next/app';
+import MonitoringInitializer from '@/components/MonitoringInitializer';
+import NotificationSnackBarProvider from '@/components/NotificationSnackBar/NotificationSnackBarProvider';
+import SnackBarProvider from '@/components/SnackBar/SnackBarProvider';
+import TemplateComponent from '@/components/TempleteComponent';
+import { QueryProvider } from '@/hooks/query';
+import { useAuth } from '@/hooks/useAuth';
+import { MSWInitComponent } from '@/msw';
+import { css } from '@styled-system/css';
+
+import './globals.css';
+
+export default function App({ Component, pageProps }: AppProps) {
+  useAuth();
+  return (
+    <>
+      <MonitoringInitializer />
+      <MSWInitComponent />
+      <QueryProvider>
+        <NotificationSnackBarProvider>
+          <SnackBarProvider>
+            <Suspense>
+              <TemplateComponent>
+                <div className={css(containerCss)}>
+                  <Component {...pageProps} />
+                </div>
+              </TemplateComponent>
+            </Suspense>
+          </SnackBarProvider>
+        </NotificationSnackBarProvider>
+      </QueryProvider>
+    </>
+  );
+}
+
+const containerCss = {
+  maxWidth: 'maxWidth',
+  margin: '0 auto',
+  minHeight: '100vh',
+  backgroundColor: 'bg.surface2',
+};
diff --git a/src/pages/_document.page.tsx b/src/pages/_document.page.tsx
new file mode 100644
index 00000000..b777efaf
--- /dev/null
+++ b/src/pages/_document.page.tsx
@@ -0,0 +1,41 @@
+import { Head, Html, Main, NextScript } from 'next/document';
+import SEO from '@/components/SEO/SEO';
+
+export const metadata = {
+  title: '10MM',
+  description: '10MM',
+  keywords: '10mm, 10분만, 10분, 10MM, 10mm, 하루 10분, 10분 단위, 생환습관',
+  openGraph: {
+    type: 'website',
+    url: 'https://www.10mm.today',
+    title: '10MM',
+    description: '당신의 인생을 바꿀 10분',
+    siteName: '10MM',
+    images: [
+      {
+        url: 'https://www.10mm.today/og-image.png',
+      },
+    ],
+  },
+  viewport: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0',
+};
+
+export default function _document() {
+  return (
+    <Html lang="ko" suppressHydrationWarning>
+      <Head>
+        <link
+          rel="preload"
+          as="style"
+          crossOrigin=""
+          href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css"
+        />
+        <SEO {...metadata} />
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
diff --git a/src/pages/_error.page.tsx b/src/pages/_error.page.tsx
new file mode 100644
index 00000000..ee9def63
--- /dev/null
+++ b/src/pages/_error.page.tsx
@@ -0,0 +1,90 @@
+import { useEffect } from 'react';
+import Image from 'next/image';
+import { css } from '@/styled-system/css';
+
+// reset 버튼 확인 필요
+export default function Error({
+  error,
+  reset = () => null,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  const onClickResetButton = () => reset();
+
+  useEffect(() => {
+    // TODO: ga로 쏘거나 하는 등의 플로우는 필요없을지 하는 생각
+    console.error(error);
+  }, [error]);
+
+  return (
+    <main className={MainWrapperCss}>
+      <div className={imageWrapperCss}>
+        <Image src={'/images/crying-face.png'} width={80} height={80} alt={'crying-face'} />
+      </div>
+      <div className={titleWrapperCss}>
+        <div className={titleCss}>시스템에 문제가 생겼어요.</div>
+        <p className={subTitleCss}>
+          에러가 발생해 페이지를 로딩할 수 없어요.
+          <br />
+          이전 페이지로 돌아가 주세요.
+        </p>
+      </div>
+      <button className={resetButtonCss} onClick={onClickResetButton} type="button">
+        이전 페이지로 돌아가기
+      </button>
+    </main>
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+Error.getInitialProps = ({ res, err }: { res: any; err: any }) => {
+  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
+
+  const reset = () => null;
+  return { statusCode, error: err, reset };
+};
+
+const MainWrapperCss = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+
+  width: '100%',
+  height: '100vh',
+  padding: '118px 16px 50px 16px',
+});
+
+const imageWrapperCss = css({
+  marginBottom: '18px',
+});
+
+const titleWrapperCss = css({
+  display: 'flex',
+  gap: '6px',
+  flexDirection: 'column',
+  alignItems: 'center',
+  marginBottom: '60px',
+});
+
+const titleCss = css({
+  textStyle: 'subtitle2',
+  color: 'text.primary',
+});
+
+const subTitleCss = css({
+  textStyle: 'body5',
+  color: 'gray.gray600',
+  textAlign: 'center',
+});
+
+const resetButtonCss = css({
+  color: 'text.secondary',
+  textStyle: 'subtitle4',
+  backgroundColor: 'gray.gray200',
+  width: '177px',
+  height: '44px',
+  padding: '12px 20px',
+  borderRadius: '16px',
+});
diff --git a/src/app/auth/kakaoCallback/page.tsx b/src/pages/auth/kakaoCallback/index.page.tsx
similarity index 88%
rename from src/app/auth/kakaoCallback/page.tsx
rename to src/pages/auth/kakaoCallback/index.page.tsx
index 6eecea38..0f80d07b 100644
--- a/src/app/auth/kakaoCallback/page.tsx
+++ b/src/pages/auth/kakaoCallback/index.page.tsx
@@ -1,7 +1,5 @@
-'use client';
-
 import { useEffect } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/router';
 import { useSocialLogin } from '@/apis/auth';
 import Loading from '@/components/Loading';
 import { AUTH_PROVIDER } from '@/constants/common';
@@ -11,12 +9,13 @@ import { eventLogger } from '@/utils';
 
 export default function KakaoCallbackPage() {
   const router = useRouter();
-  const params = useSearchParams();
+  const { code, state } = router.query;
+
   const { mutateAsync } = useSocialLogin();
 
   useEffect(() => {
     (async () => {
-      const code = params.get('code');
+      if (!code || !state) return;
       await fetch('https://kauth.kakao.com/oauth/token', {
         method: 'POST',
         headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
@@ -33,19 +32,20 @@ export default function KakaoCallbackPage() {
                 if (successData?.memberId) {
                   eventLogger.identify(successData.memberId.toString());
                 }
+
                 if (successData.landingStatus === 'TO_ONBOARDING') {
                   eventLogger.logEvent(EVENT_LOG_CATEGORY.ONBOARDING, EVENT_LOG_NAME.ONBOARDING.SUCCESS_SIGNUP);
                   router.push(ROUTER.ONBOARDING.HOME);
                   return;
                 }
-                router.push(params.get('state') ?? ROUTER.HOME);
+                router.push(`${state}` ?? ROUTER.HOME);
               },
             },
           );
         });
       });
     })();
-  }, []);
+  }, [code, state]);
 
   return (
     <main>
diff --git a/src/app/auth/login/page.tsx b/src/pages/auth/login/index.page.tsx
similarity index 87%
rename from src/app/auth/login/page.tsx
rename to src/pages/auth/login/index.page.tsx
index 9e8990c8..74b293e9 100644
--- a/src/app/auth/login/page.tsx
+++ b/src/pages/auth/login/index.page.tsx
@@ -1,10 +1,7 @@
-'use client';
-
 import { useEffect } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { useSocialLogin, useUpdateMemberFcmToken } from '@/apis/auth';
-// import Button from '@/components/Button/Button';
 import ButtonSocialLogin from '@/components/ButtonSocialLogin/ButtonSocialLogin';
 import { AUTH_PROVIDER, WINDOW_CUSTOM_EVENT } from '@/constants/common';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
@@ -34,8 +31,8 @@ export default function LoginPage() {
   const router = useRouter();
   const { mutateAsync: socialLoginAsyncMutate } = useSocialLogin();
   const { mutate: updateMemberFcmTokenMutate } = useUpdateMemberFcmToken();
-  const search = useSearchParams();
-  const redirectUrl = search.get('redirect') ?? ROUTER.HOME;
+  const { redirect } = router.query;
+  const redirectUrl = redirect ?? ROUTER.HOME;
 
   const onClickAppleLogin = () => {
     if (isWebView()) {
@@ -63,7 +60,7 @@ export default function LoginPage() {
       redirectUri: process.env.NEXT_PUBLIC_KAKAO_LOGIN_REDIRECT_URI,
       nonce: process.env.NEXT_PUBLIC_SNS_LOGIN_NONCE,
       throughTalk: isAndroid() ? false : true,
-      state: redirectUrl,
+      state: redirectUrl.toString(),
     });
   };
 
@@ -79,12 +76,13 @@ export default function LoginPage() {
             if (data?.memberId) {
               eventLogger.identify(data.memberId.toString());
             }
+
             if (data.landingStatus === 'TO_ONBOARDING') {
               eventLogger.logEvent(EVENT_LOG_CATEGORY.ONBOARDING, EVENT_LOG_NAME.ONBOARDING.SUCCESS_SIGNUP);
               router.push(ROUTER.ONBOARDING.HOME);
               return;
             }
-            router.push(redirectUrl);
+            router.push(redirectUrl.toString());
           },
         },
       );
@@ -106,12 +104,13 @@ export default function LoginPage() {
               updateMemberFcmTokenMutate({ fcmToken: event.detail.data.deviceToken });
             }
             // 지금 당장은 필요없지만 나중을 위해 작동하도록 한다
+
             if (data.landingStatus === 'TO_ONBOARDING') {
               eventLogger.logEvent(EVENT_LOG_CATEGORY.ONBOARDING, EVENT_LOG_NAME.ONBOARDING.SUCCESS_SIGNUP);
               router.push(ROUTER.ONBOARDING.HOME);
               return;
             }
-            router.push(redirectUrl);
+            router.push(redirectUrl.toString());
           },
           onError: () => {
             window.Kakao.Auth.authorize({
@@ -155,19 +154,17 @@ export default function LoginPage() {
 
   return (
     <>
-      <head>
-        <Script
-          src="https://t1.kakaocdn.net/kakao_js_sdk/2.6.0/kakao.min.js"
-          integrity="sha384-6MFdIr0zOira1CHQkedUqJVql0YtcZA1P0nbPrQYJXVJZUkTk/oX4U9GhUIs3/z8"
-          crossOrigin="anonymous"
-          onLoad={initKakao}
-        />
-        <Script
-          src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"
-          type="text/javascript"
-          onLoad={initAppleLogin}
-        />
-      </head>
+      <Script
+        src="https://t1.kakaocdn.net/kakao_js_sdk/2.6.0/kakao.min.js"
+        integrity="sha384-6MFdIr0zOira1CHQkedUqJVql0YtcZA1P0nbPrQYJXVJZUkTk/oX4U9GhUIs3/z8"
+        crossOrigin="anonymous"
+        onLoad={initKakao}
+      />
+      <Script
+        src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"
+        type="text/javascript"
+        onLoad={initAppleLogin}
+      />
       <div className={MainWrapperCss}>
         <div className={LoginButtonListWrapperCss}>
           {isIOS() && <ButtonSocialLogin type="apple" onClick={onClickAppleLogin} />}
diff --git a/src/app/auth/nickname/page.tsx b/src/pages/auth/nickname/index.page.tsx
similarity index 97%
rename from src/app/auth/nickname/page.tsx
rename to src/pages/auth/nickname/index.page.tsx
index d9b634fa..8ca9ae42 100644
--- a/src/app/auth/nickname/page.tsx
+++ b/src/pages/auth/nickname/index.page.tsx
@@ -1,6 +1,4 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import { useNicknameRegister } from '@/apis/auth';
 import { isSeverError } from '@/apis/instance.api';
 import Button from '@/components/Button/Button';
diff --git a/src/app/auth/signin/page.tsx b/src/pages/auth/signin/index.page.tsx
similarity index 97%
rename from src/app/auth/signin/page.tsx
rename to src/pages/auth/signin/index.page.tsx
index 232b7cc1..9a068e45 100644
--- a/src/app/auth/signin/page.tsx
+++ b/src/pages/auth/signin/index.page.tsx
@@ -1,7 +1,5 @@
-'use client';
-
 import { type FormEvent } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import { useLogin } from '@/apis/auth';
 import { isSeverError } from '@/apis/instance.api';
 import Button from '@/components/Button/Button';
diff --git a/src/app/auth/signup/page.tsx b/src/pages/auth/signup/index.page.tsx
similarity index 97%
rename from src/app/auth/signup/page.tsx
rename to src/pages/auth/signup/index.page.tsx
index 202ca552..eb8f19fd 100644
--- a/src/app/auth/signup/page.tsx
+++ b/src/pages/auth/signup/index.page.tsx
@@ -1,6 +1,5 @@
-'use client';
 import { type FormEvent } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import { useTempRegister } from '@/apis/auth';
 import { isSeverError } from '@/apis/instance.api';
 import Button from '@/components/Button/Button';
diff --git a/src/app/feed/FeedItem.tsx b/src/pages/feed/FeedItem.tsx
similarity index 97%
rename from src/app/feed/FeedItem.tsx
rename to src/pages/feed/FeedItem.tsx
index edb2067c..7516f98f 100644
--- a/src/app/feed/FeedItem.tsx
+++ b/src/pages/feed/FeedItem.tsx
@@ -1,13 +1,11 @@
-'use client';
-
 import Link from 'next/link';
 import { useGetMyId } from '@/apis/member';
 import { type FeedItemType } from '@/apis/schema/feed';
-import HistoryThumbnail from '@/app/record/[id]/detail/HistoryThumbnail';
 import ReactionBar from '@/components/ReactionBar/ReactionBar';
 import Thumbnail from '@/components/Thumbnail/Thumbnail';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { ROUTER } from '@/constants/router';
+import HistoryThumbnail from '@/pages/feed/HistoryThumbnail';
 import { eventLogger } from '@/utils';
 import { css } from '@styled-system/css';
 import dayjs from 'dayjs';
diff --git a/src/app/feed/FeedList.tsx b/src/pages/feed/FeedList.tsx
similarity index 92%
rename from src/app/feed/FeedList.tsx
rename to src/pages/feed/FeedList.tsx
index bafce445..b4b5f097 100644
--- a/src/app/feed/FeedList.tsx
+++ b/src/pages/feed/FeedList.tsx
@@ -1,10 +1,8 @@
-'use client';
-
 import { type FeedVisibilityType, useInfiniteFeedList } from '@/apis/feed';
-import FeedItem, { FeedSkeletonItem } from '@/app/feed/FeedItem';
 import Empty from '@/components/Empty/Empty';
 import { ROUTER } from '@/constants/router';
 import useIntersect from '@/hooks/useIntersect';
+import FeedItem, { FeedSkeletonItem } from '@/pages/feed/FeedItem';
 import { css } from '@styled-system/css';
 
 interface Props {
@@ -20,7 +18,7 @@ function FeedList({ activeTab }: Props) {
   const list = data?.content?.filter((feed) => feed.recordImageUrl); // 이미지 없는 경우가 있음. 나중에 리팩토링 + 서버와 이야기, FeedItem에 ErrorBoundary 적용해도 좋을 듯.
 
   const targetRef = useIntersect(async (entry, observer) => {
-    observer.unobserve(entry.target); // TODO : 한번만 보여줄 지?
+    observer.unobserve(entry.target);
     if (hasNextPage && !isFetching) fetchNextPage();
   });
 
diff --git a/src/app/feed/FeedSection.tsx b/src/pages/feed/FeedSection.tsx
similarity index 96%
rename from src/app/feed/FeedSection.tsx
rename to src/pages/feed/FeedSection.tsx
index 5a6c990d..bbc92c84 100644
--- a/src/app/feed/FeedSection.tsx
+++ b/src/pages/feed/FeedSection.tsx
@@ -1,9 +1,7 @@
-'use client';
-
 import { type FeedVisibilityType } from '@/apis/feed';
-import FeedList from '@/app/feed/FeedList';
 import Tab from '@/components/Tab/Tab';
 import { useTab } from '@/components/Tab/Tab.hooks';
+import FeedList from '@/pages/feed/FeedList';
 import { css, cx } from '@/styled-system/css';
 import { fixedPositionCss } from '@/styles/position';
 
diff --git a/src/app/record/[id]/detail/HistoryThumbnail.tsx b/src/pages/feed/HistoryThumbnail.tsx
similarity index 94%
rename from src/app/record/[id]/detail/HistoryThumbnail.tsx
rename to src/pages/feed/HistoryThumbnail.tsx
index 44908070..9c71d652 100644
--- a/src/app/record/[id]/detail/HistoryThumbnail.tsx
+++ b/src/pages/feed/HistoryThumbnail.tsx
@@ -1,8 +1,7 @@
 import Image from 'next/image';
+import MissionDuration from '@/components/MissionDuration';
 import { css } from '@styled-system/css';
 
-import MissionDuration from './MissionDuration';
-
 function HistoryThumbnail({ imageUrl, missionDuration }: { imageUrl: string; missionDuration: number }) {
   return (
     <div className={historyThumbnailWrapperCss}>
diff --git a/src/app/feed/page.tsx b/src/pages/feed/index.page.tsx
similarity index 76%
rename from src/app/feed/page.tsx
rename to src/pages/feed/index.page.tsx
index 339d6112..5e5b39a6 100644
--- a/src/app/feed/page.tsx
+++ b/src/pages/feed/index.page.tsx
@@ -1,7 +1,7 @@
-import FeedSection from '@/app/feed/FeedSection';
-import AppBar from '@/app/home/AppBar';
 import AppBarBottom from '@/components/AppBarBottom/AppBarBottom';
 import BottomDim from '@/components/BottomDim/BottomDim';
+import FeedSection from '@/pages/feed/FeedSection';
+import AppBar from '@/pages/home/AppBar';
 
 export default function FeedPage() {
   return (
diff --git a/src/pages/global.d.ts b/src/pages/global.d.ts
new file mode 100644
index 00000000..980b2346
--- /dev/null
+++ b/src/pages/global.d.ts
@@ -0,0 +1,36 @@
+interface KakaoAuthParams {
+  redirectUri?: string;
+  nonce?: string;
+  throughTalk: boolean;
+  state?: string;
+}
+
+declare global {
+  interface Window {
+    ReactNativeWebView: {
+      postMessage: (message: string) => void;
+    };
+    Kakao: {
+      init: (keyValue: string) => void;
+      isInitialized: () => boolean;
+      Auth: {
+        authorize: (prams: KakaoAuthParams) => void;
+      };
+    };
+    AppleID: {
+      auth: {
+        init: ({
+          clientId: string,
+          scope: string,
+          redirectURI: string,
+          state: string,
+          usePopup: boolean,
+          nonce: string,
+        }) => void;
+        signIn: () => void;
+      };
+    };
+  }
+}
+
+export {};
diff --git a/src/pages/globals.css b/src/pages/globals.css
new file mode 100644
index 00000000..369d1912
--- /dev/null
+++ b/src/pages/globals.css
@@ -0,0 +1,44 @@
+@layer reset, base, tokens, recipes, utilities;
+
+:root {
+  --pretendard: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto,
+    'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
+}
+
+html {
+  @media screen and (max-width: 475px) {
+    background-color: #18181d;
+  }
+}
+
+.sb-show-main,
+.docs-story {
+  background-color: #18181d;
+}
+
+button {
+  cursor: pointer;
+
+  &:disabled {
+    pointer-events: none;
+  }
+}
+
+textarea:focus,
+button:focus,
+input:focus,
+a {
+  outline: none;
+}
+
+* {
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* 버튼 클릭시 나오는 하이라이트 제거 */
+  -webkit-touch-callout: none; /* 링크를 오래 눌렀을때 액션 막기*/
+  -webkit-user-select: none; /* 글자들 선택 안되게 막기 */
+  -khtml-user-select: none; /* 글자들 선택 안되게 막기 */
+  -moz-user-select: none; /* 글자들 선택 안되게 막기 */
+  -ms-user-select: none; /* 글자들 선택 안되게 막기 */
+  user-select: none; /* 글자들 선택 안되게 막기 */
+  -webkit-user-drag: none; /* 이미지, 글자 drag 막기*/
+}
diff --git a/src/app/guest/mission/new/RadioInputWithImg.tsx b/src/pages/guest/mission/new/RadioInputWithImg.tsx
similarity index 100%
rename from src/app/guest/mission/new/RadioInputWithImg.tsx
rename to src/pages/guest/mission/new/RadioInputWithImg.tsx
diff --git a/src/app/guest/mission/new/page.tsx b/src/pages/guest/mission/new/index.page.tsx
similarity index 98%
rename from src/app/guest/mission/new/page.tsx
rename to src/pages/guest/mission/new/index.page.tsx
index 58fafa39..5100d3bf 100644
--- a/src/app/guest/mission/new/page.tsx
+++ b/src/pages/guest/mission/new/index.page.tsx
@@ -1,7 +1,5 @@
-'use client';
-
 import { useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import Button from '@/components/Button/Button';
 import Header from '@/components/Header/Header';
 import Layout from '@/components/Layout';
diff --git a/src/app/guest/mission/new/select.constants.ts b/src/pages/guest/mission/new/select.constants.ts
similarity index 90%
rename from src/app/guest/mission/new/select.constants.ts
rename to src/pages/guest/mission/new/select.constants.ts
index e32adf47..80218e79 100644
--- a/src/app/guest/mission/new/select.constants.ts
+++ b/src/pages/guest/mission/new/select.constants.ts
@@ -30,3 +30,5 @@ export const MISSION_CATEGORIES = {
     imgSrc: '/images/emoji-speech-bubble.png',
   },
 } as const;
+
+export type MissionCategoryType = keyof typeof MISSION_CATEGORIES;
diff --git a/src/app/guest/mission/stopwatch/page.tsx b/src/pages/guest/mission/stopwatch.page.tsx
similarity index 94%
rename from src/app/guest/mission/stopwatch/page.tsx
rename to src/pages/guest/mission/stopwatch.page.tsx
index a08f867e..8e9045d0 100644
--- a/src/app/guest/mission/stopwatch/page.tsx
+++ b/src/pages/guest/mission/stopwatch.page.tsx
@@ -1,7 +1,5 @@
-'use client';
-
 import { Fragment } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import Button from '@/components/Button/Button';
 import Dialog from '@/components/Dialog/Dialog';
 import Header from '@/components/Header/Header';
@@ -12,6 +10,7 @@ import useStopwatchLogic from '@/hooks/mission/stopwatch/useStopwatchLogic';
 import useStopwatchStatus, { StopwatchStep } from '@/hooks/mission/stopwatch/useStopwatchStatus';
 import useModal from '@/hooks/useModal';
 import useSearchParamsTypedValue from '@/hooks/useSearchParamsTypedValue';
+import { MISSION_CATEGORIES, type MissionCategoryType } from '@/pages/guest/mission/new/select.constants';
 import { eventLogger } from '@/utils';
 import { formatMMSS } from '@/utils/time';
 import { css } from '@styled-system/css';
@@ -85,7 +84,7 @@ export default function GuestMissionStopwatchPage() {
         <Stopwatch
           minutes={minutes}
           seconds={seconds}
-          missionName={category}
+          missionName={MISSION_CATEGORIES[category].label}
           stepper={stepper}
           isProgress={step === 'progress'}
           isDisabled={step === 'stop'}
@@ -147,9 +146,9 @@ function FinalDialog(props: {
 }
 
 const useGetCategory = () => {
-  const { searchParams } = useSearchParamsTypedValue<string>('category');
+  const { searchParams } = useSearchParamsTypedValue<MissionCategoryType>('category');
 
-  return searchParams ?? '운동';
+  return searchParams ?? 'exercise';
 };
 
 const containerCss = css({
diff --git a/src/app/guest/mission/success/page.tsx b/src/pages/guest/mission/success.page.tsx
similarity index 87%
rename from src/app/guest/mission/success/page.tsx
rename to src/pages/guest/mission/success.page.tsx
index 0f3664cb..a7887381 100644
--- a/src/app/guest/mission/success/page.tsx
+++ b/src/pages/guest/mission/success.page.tsx
@@ -1,6 +1,5 @@
-'use client';
 import Image from 'next/image';
-import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 import lottieJson from '@/assets/lotties/coin-double.json';
 import Button from '@/components/Button/Button';
 import { ROUTER } from '@/constants/router';
@@ -8,9 +7,6 @@ import { css } from '@styled-system/css';
 import Lottie from 'react-lottie-player';
 
 export default function GuestMissionSuccessPage() {
-  const router = useRouter();
-  const onClickConfirmButton = () => router.push(ROUTER.AUTH.LOGIN);
-
   return (
     <main className={mainWrapperCss}>
       <div className={containerCss}>
@@ -27,9 +23,11 @@ export default function GuestMissionSuccessPage() {
           </div>
         </div>
         <div className={buttonWrapperCss}>
-          <Button type="button" size="large" variant="primary" onClick={onClickConfirmButton}>
-            <span className={buttonTextCss}>10분만 제대로 즐기기</span>
-          </Button>
+          <Link href={ROUTER.AUTH.LOGIN}>
+            <Button type="button" size="large" variant="primary">
+              <span className={buttonTextCss}>10분만 제대로 즐기기</span>
+            </Button>
+          </Link>
         </div>
       </div>
     </main>
diff --git a/src/app/home/AppBar.tsx b/src/pages/home/AppBar.tsx
similarity index 97%
rename from src/app/home/AppBar.tsx
rename to src/pages/home/AppBar.tsx
index 6e2ab589..f6a82420 100644
--- a/src/app/home/AppBar.tsx
+++ b/src/pages/home/AppBar.tsx
@@ -1,4 +1,3 @@
-'use client';
 import Image from 'next/image';
 import Link from 'next/link';
 import Icon from '@/components/Icon';
@@ -8,10 +7,12 @@ import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 import { eventLogger } from '@/utils';
 
+// TODO: component 폴더로 이동
 function AppBar() {
   const handleSearchClick = () => {
     eventLogger.logEvent(EVENT_LOG_CATEGORY.HEADER, EVENT_LOG_NAME.HEADER.CLICK_SEARCH_BUTTON);
   };
+
   return (
     <>
       <header className={headerCss}>
diff --git a/src/app/home/FollowContent/FollowMissionList.tsx b/src/pages/home/FollowContent/FollowMissionList.tsx
similarity index 100%
rename from src/app/home/FollowContent/FollowMissionList.tsx
rename to src/pages/home/FollowContent/FollowMissionList.tsx
diff --git a/src/app/home/FollowContent/FollowSummary.tsx b/src/pages/home/FollowContent/FollowSummary.tsx
similarity index 98%
rename from src/app/home/FollowContent/FollowSummary.tsx
rename to src/pages/home/FollowContent/FollowSummary.tsx
index 64fadf5f..6deeab24 100644
--- a/src/app/home/FollowContent/FollowSummary.tsx
+++ b/src/pages/home/FollowContent/FollowSummary.tsx
@@ -7,7 +7,6 @@ import LevelProgressBar from '@/components/Graph/LevelProgressBar';
 import Icon from '@/components/Icon';
 import Thumbnail from '@/components/Thumbnail/Thumbnail';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
-import { LEVEL_SYSTEM } from '@/constants/level';
 import { ROUTER } from '@/constants/router';
 import { gradientTextCss } from '@/constants/style/gradient';
 import { eventLogger } from '@/utils';
@@ -22,6 +21,7 @@ function FollowSummary({ memberId: followId, nickname: followNickname, profileIm
   const symbolStack = stackData?.symbolStack ?? 0;
   const currentLevel = getLevel(symbolStack);
   const progress = calcProgress(symbolStack);
+
   const handleClickFollowProfile = () => {
     eventLogger.logEvent(EVENT_LOG_CATEGORY.HOME, EVENT_LOG_NAME.HOME.CLICK_FOLLOW_PROFILE, {
       memberId: followId,
diff --git a/src/app/home/FollowContent/MyMissionInnerList.tsx b/src/pages/home/FollowContent/MyMissionInnerList.tsx
similarity index 97%
rename from src/app/home/FollowContent/MyMissionInnerList.tsx
rename to src/pages/home/FollowContent/MyMissionInnerList.tsx
index 63845271..e2af1ed6 100644
--- a/src/app/home/FollowContent/MyMissionInnerList.tsx
+++ b/src/pages/home/FollowContent/MyMissionInnerList.tsx
@@ -1,8 +1,8 @@
 import { type MissionItemTypeWithRecordId, MissionStatus } from '@/apis/schema/mission';
-import { useMissions } from '@/app/home/home.hooks';
 import MissionList from '@/components/MissionList';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { ROUTER } from '@/constants/router';
+import { useMissions } from '@/pages/home/home.hooks';
 import { eventLogger } from '@/utils';
 
 function MissionListInner() {
diff --git a/src/app/home/FollowContent/MyMissionList.tsx b/src/pages/home/FollowContent/MyMissionList.tsx
similarity index 93%
rename from src/app/home/FollowContent/MyMissionList.tsx
rename to src/pages/home/FollowContent/MyMissionList.tsx
index 35c81715..d373df04 100644
--- a/src/app/home/FollowContent/MyMissionList.tsx
+++ b/src/pages/home/FollowContent/MyMissionList.tsx
@@ -1,10 +1,8 @@
-'use client';
-
 import Link from 'next/link';
-import MissionListInner from '@/app/home/FollowContent/MyMissionInnerList';
 import Icon from '@/components/Icon';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { ROUTER } from '@/constants/router';
+import MissionListInner from '@/pages/home/FollowContent/MyMissionInnerList';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 import { eventLogger } from '@/utils';
diff --git a/src/app/home/FollowContent/index.tsx b/src/pages/home/FollowContent/index.tsx
similarity index 91%
rename from src/app/home/FollowContent/index.tsx
rename to src/pages/home/FollowContent/index.tsx
index 663fca0f..b9695aba 100644
--- a/src/app/home/FollowContent/index.tsx
+++ b/src/pages/home/FollowContent/index.tsx
@@ -1,4 +1,4 @@
-import { useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/router';
 import { useFollowMembers } from '@/apis/follow';
 import { type FollowMemberType } from '@/apis/schema/member';
 import MissionList from '@/components/MissionList';
@@ -53,16 +53,17 @@ const headingCss = flex({
 
 const useGetSelectFollowData = (): { data: FollowMemberType | null; isLoading: boolean; isFollower: boolean } => {
   const { data, isLoading } = useFollowMembers();
-  const searchParams = useSearchParams();
+  const router = useRouter();
 
-  if (!searchParams.get('id'))
+  const id = router.query.id ? Number(router.query.id) : null;
+
+  if (!id)
     return {
       data: null,
       isLoading,
       isFollower: false,
     };
 
-  const id = Number(searchParams.get('id'));
   const selectedFollowData = data?.find((profile) => profile.memberId === id);
   return { data: selectedFollowData ?? null, isLoading, isFollower: true };
 };
diff --git a/src/app/home/FollowList/ProfileItem.tsx b/src/pages/home/FollowList/ProfileItem.tsx
similarity index 95%
rename from src/app/home/FollowList/ProfileItem.tsx
rename to src/pages/home/FollowList/ProfileItem.tsx
index e126e8bb..dd861b6e 100644
--- a/src/app/home/FollowList/ProfileItem.tsx
+++ b/src/pages/home/FollowList/ProfileItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { type FollowDataState } from '@/app/page';
 import Thumbnail from '@/components/Thumbnail/Thumbnail';
 import { oneLineTextCss } from '@/constants/style/text';
+import { type FollowDataState } from '@/pages/index.page';
 import { css, cx } from '@styled-system/css';
 
 interface Props {
diff --git a/src/app/home/FollowList/UserProfile.tsx b/src/pages/home/FollowList/UserProfile.tsx
similarity index 79%
rename from src/app/home/FollowList/UserProfile.tsx
rename to src/pages/home/FollowList/UserProfile.tsx
index 5ee27af1..79693060 100644
--- a/src/app/home/FollowList/UserProfile.tsx
+++ b/src/pages/home/FollowList/UserProfile.tsx
@@ -1,6 +1,6 @@
 import { useGetMembersMe } from '@/apis/member';
-import ProfileItem from '@/app/home/FollowList/ProfileItem';
-import { type FollowDataState } from '@/app/page';
+import ProfileItem from '@/pages/home/FollowList/ProfileItem';
+import { type FollowDataState } from '@/pages/index.page';
 
 interface UserProfileProps {
   selected: boolean;
diff --git a/src/app/home/FollowList/index.tsx b/src/pages/home/FollowList/index.tsx
similarity index 87%
rename from src/app/home/FollowList/index.tsx
rename to src/pages/home/FollowList/index.tsx
index a61f8d3b..8231573e 100644
--- a/src/app/home/FollowList/index.tsx
+++ b/src/pages/home/FollowList/index.tsx
@@ -1,12 +1,12 @@
 import Link from 'next/link';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/router';
 import { useFollowMembers } from '@/apis/follow';
-import UserProfile from '@/app/home/FollowList/UserProfile';
-import { type FollowDataState } from '@/app/page';
 import Icon from '@/components/Icon';
 import MotionDiv from '@/components/Motion/MotionDiv';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { ROUTER } from '@/constants/router';
+import UserProfile from '@/pages/home/FollowList/UserProfile';
+import { type FollowDataState } from '@/pages/index.page';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 import { eventLogger } from '@/utils';
@@ -15,9 +15,9 @@ import ProfileItem from './ProfileItem';
 
 function FollowList() {
   const { data } = useFollowMembers();
-  const searchParams = useSearchParams();
   const router = useRouter();
-  const id = searchParams.get('id') ? Number(searchParams.get('id')) : null;
+
+  const id = router.query.id ? Number(router.query.id) : null;
 
   const onChangeFollowData = (props: FollowDataState) => {
     eventLogger.logEvent(EVENT_LOG_CATEGORY.HOME, EVENT_LOG_NAME.HOME.CLICK_FOLLOW_LIST, {
diff --git a/src/app/home/home.hooks.ts b/src/pages/home/home.hooks.ts
similarity index 98%
rename from src/app/home/home.hooks.ts
rename to src/pages/home/home.hooks.ts
index 5cd0f4bd..3e4f9b8d 100644
--- a/src/app/home/home.hooks.ts
+++ b/src/pages/home/home.hooks.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import { useGetMissions } from '@/apis/mission';
 import { type MissionItemTypeWithRecordId, MissionStatus } from '@/apis/schema/mission';
 import { useSnackBar } from '@/components/SnackBar/SnackBarProvider';
diff --git a/src/app/home/home.styles.tsx b/src/pages/home/home.styles.tsx
similarity index 100%
rename from src/app/home/home.styles.tsx
rename to src/pages/home/home.styles.tsx
diff --git a/src/app/page.tsx b/src/pages/index.page.tsx
similarity index 80%
rename from src/app/page.tsx
rename to src/pages/index.page.tsx
index c804b269..3f0966ad 100644
--- a/src/app/page.tsx
+++ b/src/pages/index.page.tsx
@@ -1,9 +1,8 @@
-'use client';
-import AppBar from '@/app/home/AppBar';
-import FollowContent from '@/app/home/FollowContent';
-import FollowList from '@/app/home/FollowList';
 import AppBarBottom from '@/components/AppBarBottom/AppBarBottom';
 import BottomDim from '@/components/BottomDim/BottomDim';
+import AppBar from '@/pages/home/AppBar';
+import FollowContent from '@/pages/home/FollowContent';
+import FollowList from '@/pages/home/FollowList';
 import { css } from '@styled-system/css';
 
 export interface FollowData {
diff --git a/src/app/level/guide/GrowthLevel.tsx b/src/pages/level/guide/GrowthLevel.tsx
similarity index 100%
rename from src/app/level/guide/GrowthLevel.tsx
rename to src/pages/level/guide/GrowthLevel.tsx
diff --git a/src/app/level/guide/page.tsx b/src/pages/level/guide/index.page.tsx
similarity index 62%
rename from src/app/level/guide/page.tsx
rename to src/pages/level/guide/index.page.tsx
index baf2d8b7..3d95fc87 100644
--- a/src/app/level/guide/page.tsx
+++ b/src/pages/level/guide/index.page.tsx
@@ -1,15 +1,14 @@
-'use client';
-
 import { useEffect, useState } from 'react';
 import { useGetMissionSummary } from '@/apis/mission';
-import Character from '@/app/level/guide/Character';
-import GrowthLevel from '@/app/level/guide/GrowthLevel';
+import Header from '@/components/Header/Header';
+import Character from '@/components/Level/Character';
 import LockedCharacter from '@/components/Level/LockedCharacter';
 import LevelStatus from '@/components/LevelStatus/LevelStatus';
 import LoadingSpinner from '@/components/Loading/LoadingSpinner';
 import MotionDiv from '@/components/Motion/MotionDiv';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { LEVEL_SYSTEM } from '@/constants/level';
+import GrowthLevel from '@/pages/level/guide/GrowthLevel';
 import { css, cx } from '@/styled-system/css';
 import { eventLogger } from '@/utils';
 import { getLevel } from '@/utils/result';
@@ -39,39 +38,42 @@ function LevelGuidePage() {
   }, [currentLevelInfo]);
 
   return (
-    <div>
-      <div className={levelInfoContainerCss}>
-        {isLoading ? (
-          <LoadingSpinner />
-        ) : (
-          <>
-            <section className={levelTextWrapperCss}>
-              <p className={levelLabelCss}>{isMyLevel && '현재 레벨'}</p>
-              <div className={cx(badgeCss)}>
-                <MotionDiv key={selectLevelInfo.label}>{selectLevelInfo.label}</MotionDiv>
-              </div>
-            </section>
-            <section className={characterImageSectionCss}>
-              {isLockedLevel ? (
-                <LockedCharacter size="lg" level={selectLevelInfo.level} />
-              ) : (
-                <Character
-                  width={240}
-                  height={180}
-                  level={selectLevelInfo.level}
-                  isLocked={isLockedLevel}
-                  isBackground
-                />
-              )}
-            </section>
-            <LevelStatus symbolStack={symbolStack} viewLevel={selectLevelInfo.level} />
-          </>
-        )}
-      </div>
-      <section className={growthSectionCss}>
-        <GrowthLevel selectLevel={selectLevel} onClick={handleClickedLevel} maxLevel={currentLevelInfo.level} />
-      </section>
-    </div>
+    <>
+      <Header rightAction="none" title="내 레벨" />
+      <main className={containerCss}>
+        <div className={levelInfoContainerCss}>
+          {isLoading ? (
+            <LoadingSpinner />
+          ) : (
+            <>
+              <section className={levelTextWrapperCss}>
+                <p className={levelLabelCss}>{isMyLevel && '현재 레벨'}</p>
+                <div className={cx(badgeCss)}>
+                  <MotionDiv key={selectLevelInfo.label}>{selectLevelInfo.label}</MotionDiv>
+                </div>
+              </section>
+              <section className={characterImageSectionCss}>
+                {isLockedLevel ? (
+                  <LockedCharacter size="lg" level={selectLevelInfo.level} />
+                ) : (
+                  <Character
+                    width={240}
+                    height={180}
+                    level={selectLevelInfo.level}
+                    isLocked={isLockedLevel}
+                    isBackground
+                  />
+                )}
+              </section>
+              <LevelStatus symbolStack={symbolStack} viewLevel={selectLevelInfo.level} />
+            </>
+          )}
+        </div>
+        <section className={growthSectionCss}>
+          <GrowthLevel selectLevel={selectLevel} onClick={handleClickedLevel} maxLevel={currentLevelInfo.level} />
+        </section>
+      </main>
+    </>
   );
 }
 
@@ -142,3 +144,7 @@ const growthSectionCss = css({
   left: 0,
   right: 0,
 });
+
+const containerCss = css({
+  minHeight: '720px',
+});
diff --git a/src/app/mission/[id]/detail/MissionChart.tsx b/src/pages/mission/[id]/detail/MissionChart.tsx
similarity index 97%
rename from src/app/mission/[id]/detail/MissionChart.tsx
rename to src/pages/mission/[id]/detail/MissionChart.tsx
index 94864906..bb268aec 100644
--- a/src/app/mission/[id]/detail/MissionChart.tsx
+++ b/src/pages/mission/[id]/detail/MissionChart.tsx
@@ -1,6 +1,6 @@
 import { type StatisticTimeTable } from '@/apis';
-import { getDateArray } from '@/app/mission/[id]/detail/missionChart.utils';
 import Icon from '@/components/Icon';
+import { getDateArray } from '@/pages/mission/[id]/detail/missionChart.utils';
 import { css } from '@styled-system/css';
 import type dayjs from 'dayjs';
 
diff --git a/src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBanner.tsx b/src/pages/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBanner.tsx
similarity index 100%
rename from src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBanner.tsx
rename to src/pages/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBanner.tsx
diff --git a/src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBannerApi.tsx b/src/pages/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBannerApi.tsx
similarity index 81%
rename from src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBannerApi.tsx
rename to src/pages/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBannerApi.tsx
index 8c635d5e..ca9a1e4a 100644
--- a/src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBannerApi.tsx
+++ b/src/pages/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBannerApi.tsx
@@ -1,8 +1,9 @@
 import { useGetMissionDetailNoSuspense } from '@/apis/mission';
-import MissionHistorySkeleton from '@/app/mission/[id]/detail/MissionHistoryBanner/MissionHistorySkeleton';
 import Banner from '@/components/Banner/Banner';
 import { MISSION_CATEGORY_LABEL } from '@/constants/mission';
+import MissionHistorySkeleton from '@/pages/mission/[id]/detail/MissionHistoryBanner/MissionHistorySkeleton';
 
+// TODO : component 폴더로 이동
 function MissionHistoryBannerApi({ missionId }: { missionId: string }) {
   const { data } = useGetMissionDetailNoSuspense(missionId);
 
diff --git a/src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistorySkeleton.tsx b/src/pages/mission/[id]/detail/MissionHistoryBanner/MissionHistorySkeleton.tsx
similarity index 72%
rename from src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistorySkeleton.tsx
rename to src/pages/mission/[id]/detail/MissionHistoryBanner/MissionHistorySkeleton.tsx
index 07439600..9e2b1411 100644
--- a/src/app/mission/[id]/detail/MissionHistoryBanner/MissionHistorySkeleton.tsx
+++ b/src/pages/mission/[id]/detail/MissionHistoryBanner/MissionHistorySkeleton.tsx
@@ -1,4 +1,4 @@
-import { missionHistoryBannerCss } from '@/app/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBanner';
+import { missionHistoryBannerCss } from '@/pages/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBanner';
 import { css, cx } from '@styled-system/css';
 
 function MissionHistorySkeleton() {
diff --git a/src/app/mission/[id]/detail/MissionStartButton.tsx b/src/pages/mission/[id]/detail/MissionStartButton.tsx
similarity index 98%
rename from src/app/mission/[id]/detail/MissionStartButton.tsx
rename to src/pages/mission/[id]/detail/MissionStartButton.tsx
index da6df54f..f600902d 100644
--- a/src/app/mission/[id]/detail/MissionStartButton.tsx
+++ b/src/pages/mission/[id]/detail/MissionStartButton.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import MISSION_APIS from '@/apis/mission';
 import RECORD_API from '@/apis/record';
 import { MissionStatus } from '@/apis/schema/mission';
diff --git a/src/app/mission/[id]/detail/MissionStatistics.tsx b/src/pages/mission/[id]/detail/MissionStatistics.tsx
similarity index 96%
rename from src/app/mission/[id]/detail/MissionStatistics.tsx
rename to src/pages/mission/[id]/detail/MissionStatistics.tsx
index ccccf63a..3bbe6bbd 100644
--- a/src/app/mission/[id]/detail/MissionStatistics.tsx
+++ b/src/pages/mission/[id]/detail/MissionStatistics.tsx
@@ -1,11 +1,12 @@
 import { useGetRecordsStatistics } from '@/apis';
-import MissionChart from '@/app/mission/[id]/detail/MissionChart';
 import Banner from '@/components/Banner/Banner';
 import Icon from '@/components/Icon';
 import { gradientTextCss } from '@/constants/style/gradient';
+import MissionChart from '@/pages/mission/[id]/detail/MissionChart';
 import { css, cx } from '@styled-system/css';
 import dayjs from 'dayjs';
 
+// TODO : component 폴더로 이동
 function MissionStatistics({ missionId }: { missionId: string }) {
   const { data } = useGetRecordsStatistics(Number(missionId));
   return (
diff --git a/src/app/mission/[id]/detail/MissionTabContents.tsx b/src/pages/mission/[id]/detail/MissionTabContents.tsx
similarity index 80%
rename from src/app/mission/[id]/detail/MissionTabContents.tsx
rename to src/pages/mission/[id]/detail/MissionTabContents.tsx
index 71fc94dd..eb2667ef 100644
--- a/src/app/mission/[id]/detail/MissionTabContents.tsx
+++ b/src/pages/mission/[id]/detail/MissionTabContents.tsx
@@ -1,7 +1,7 @@
-import MissionStartButton from '@/app/mission/[id]/detail/MissionStartButton';
-import MissionStatistics from '@/app/mission/[id]/detail/MissionStatistics';
 import { MissionHistoryTab } from '@/components/MissionDetail';
 import MissionHistoryTabLayout from '@/components/MissionDetail/MissionHistoryTabLayout';
+import MissionStartButton from '@/pages/mission/[id]/detail/MissionStartButton';
+import MissionStatistics from '@/pages/mission/[id]/detail/MissionStatistics';
 
 function MissionTabContents({
   tab,
diff --git a/src/app/mission/[id]/detail/page.tsx b/src/pages/mission/[id]/detail/index.page.tsx
similarity index 88%
rename from src/app/mission/[id]/detail/page.tsx
rename to src/pages/mission/[id]/detail/index.page.tsx
index 8a5c5340..68883a18 100644
--- a/src/app/mission/[id]/detail/page.tsx
+++ b/src/pages/mission/[id]/detail/index.page.tsx
@@ -1,14 +1,12 @@
-'use client';
-
-import { useParams, useRouter } from 'next/navigation';
-import MissionTabContents from '@/app/mission/[id]/detail/MissionTabContents';
-import useCheckCompleteMission from '@/app/mission/[id]/detail/useCheckCompleteMission';
+import { useRouter } from 'next/router';
 import Header from '@/components/Header/Header';
 import { MissionDeleteDialog } from '@/components/MissionDetail';
 import Tab from '@/components/Tab/Tab';
 import { useTab } from '@/components/Tab/Tab.hooks';
 import { ROUTER } from '@/constants/router';
 import useModal from '@/hooks/useModal';
+import MissionTabContents from '@/pages/mission/[id]/detail/MissionTabContents';
+import useCheckCompleteMission from '@/pages/mission/[id]/detail/useCheckCompleteMission';
 import { css } from '@styled-system/css';
 
 const MISSION_TABS = [
@@ -21,11 +19,12 @@ const MISSION_TABS = [
     id: 'mission-statistics',
   },
 ];
+
 export default function MissionDetailPage() {
   const { isOpen, openModal: openDeleteDialog, closeModal: closeDeleteDialog } = useModal();
   const router = useRouter();
+  const id = router.query.id;
 
-  const { id } = useParams();
   const { isCompeteMission } = useCheckCompleteMission(id as string);
 
   const { tabs, activeTab, onTabClick } = useTab(MISSION_TABS, 'mission-history');
diff --git a/src/app/mission/[id]/detail/missionChart.utils.ts b/src/pages/mission/[id]/detail/missionChart.utils.ts
similarity index 100%
rename from src/app/mission/[id]/detail/missionChart.utils.ts
rename to src/pages/mission/[id]/detail/missionChart.utils.ts
diff --git a/src/app/mission/[id]/detail/modify/page.tsx b/src/pages/mission/[id]/detail/modify.page.tsx
similarity index 86%
rename from src/app/mission/[id]/detail/modify/page.tsx
rename to src/pages/mission/[id]/detail/modify.page.tsx
index d86ca16f..9be73740 100644
--- a/src/app/mission/[id]/detail/modify/page.tsx
+++ b/src/pages/mission/[id]/detail/modify.page.tsx
@@ -1,7 +1,6 @@
-'use client';
-
 import { useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { type GetServerSidePropsContext } from 'next';
+import { useRouter } from 'next/router';
 import MISSION_APIS, { useGetMissionDetail, useModifyMissionMutation } from '@/apis/mission';
 import { type MissionVisibility } from '@/apis/schema/mission';
 import Header from '@/components/Header/Header';
@@ -12,20 +11,29 @@ import { PUBLIC_SETTING_LABEL, PUBLIC_SETTING_LIST } from '@/constants/mission';
 import { ROUTER } from '@/constants/router';
 import { css } from '@styled-system/css';
 
-export default function MissionModifyPage({ params }: { params: { id: string } }) {
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  return {
+    props: {
+      id: context.query.id,
+    },
+  };
+}
+
+export default function MissionModifyPage(props: { id: string }) {
   const { triggerSnackBar } = useSnackBar();
   const router = useRouter();
+  const id = props.id;
 
-  const { mutate } = useModifyMissionMutation(params.id, {
+  const { mutate } = useModifyMissionMutation(id, {
     onSuccess: () => {
-      router.replace(ROUTER.MISSION.DETAIL(params.id));
+      router.replace(ROUTER.MISSION.DETAIL(id));
     },
     onError: () => {
       triggerSnackBar({ message: '저장에 실패했습니다. 다시 시도해주세요.' });
     },
   });
 
-  const { data } = useGetMissionDetail(params.id);
+  const { data } = useGetMissionDetail(id);
 
   const PREVIOUS_MISSIONTITLE = data.name;
   const PREVIOUS_MISSIONCONTENT = data.content;
diff --git a/src/app/mission/[id]/detail/useCheckCompleteMission.tsx b/src/pages/mission/[id]/detail/useCheckCompleteMission.tsx
similarity index 100%
rename from src/app/mission/[id]/detail/useCheckCompleteMission.tsx
rename to src/pages/mission/[id]/detail/useCheckCompleteMission.tsx
diff --git a/src/app/mission/[id]/follow/page.tsx b/src/pages/mission/[id]/follow.page.tsx
similarity index 83%
rename from src/app/mission/[id]/follow/page.tsx
rename to src/pages/mission/[id]/follow.page.tsx
index 6ebe70ba..182452ec 100644
--- a/src/app/mission/[id]/follow/page.tsx
+++ b/src/pages/mission/[id]/follow.page.tsx
@@ -1,12 +1,11 @@
-'use client';
-
-import MissionStatistics from '@/app/mission/[id]/detail/MissionStatistics';
+import { type GetServerSidePropsContext } from 'next';
 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 MissionStatistics from '@/pages/mission/[id]/detail/MissionStatistics';
 import { css } from '@styled-system/css';
 
 const MISSION_TABS = [
@@ -20,6 +19,14 @@ const MISSION_TABS = [
   },
 ];
 
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  return {
+    props: {
+      params: { id: context.query.id },
+    },
+  };
+}
+
 export default function FollowMissionDetailPage({ params: { id } }: { params: { id: string } }) {
   const { tabs, activeTab, onTabClick } = useTab(MISSION_TABS, 'mission-history');
   return (
diff --git a/src/app/mission/[id]/stopwatch/ButtonSection.tsx b/src/pages/mission/[id]/stopwatch/ButtonSection.tsx
similarity index 99%
rename from src/app/mission/[id]/stopwatch/ButtonSection.tsx
rename to src/pages/mission/[id]/stopwatch/ButtonSection.tsx
index 4653b827..cb433a4a 100644
--- a/src/app/mission/[id]/stopwatch/ButtonSection.tsx
+++ b/src/pages/mission/[id]/stopwatch/ButtonSection.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { useEffect, useState } from 'react';
 import { NOTIFICATION_MISSIONS_APIS } from '@/apis/notifications';
 import Button from '@/components/Button/Button';
diff --git a/src/app/mission/[id]/stopwatch/Header.tsx b/src/pages/mission/[id]/stopwatch/Header.tsx
similarity index 100%
rename from src/app/mission/[id]/stopwatch/Header.tsx
rename to src/pages/mission/[id]/stopwatch/Header.tsx
diff --git a/src/app/mission/[id]/stopwatch/Modal.context.tsx b/src/pages/mission/[id]/stopwatch/Modal.context.tsx
similarity index 98%
rename from src/app/mission/[id]/stopwatch/Modal.context.tsx
rename to src/pages/mission/[id]/stopwatch/Modal.context.tsx
index fd521eec..70289b34 100644
--- a/src/app/mission/[id]/stopwatch/Modal.context.tsx
+++ b/src/pages/mission/[id]/stopwatch/Modal.context.tsx
@@ -1,7 +1,5 @@
-'use client';
-
 import { createContext, type PropsWithChildren, useCallback, useContext, useMemo } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import Dialog from '@/components/Dialog/Dialog';
 import Loading from '@/components/Loading';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
diff --git a/src/app/mission/[id]/stopwatch/Stopwatch.context.tsx b/src/pages/mission/[id]/stopwatch/Stopwatch.context.tsx
similarity index 100%
rename from src/app/mission/[id]/stopwatch/Stopwatch.context.tsx
rename to src/pages/mission/[id]/stopwatch/Stopwatch.context.tsx
diff --git a/src/app/mission/[id]/stopwatch/StopwatchSection.tsx b/src/pages/mission/[id]/stopwatch/StopwatchSection.tsx
similarity index 100%
rename from src/app/mission/[id]/stopwatch/StopwatchSection.tsx
rename to src/pages/mission/[id]/stopwatch/StopwatchSection.tsx
diff --git a/src/app/mission/[id]/stopwatch/TextSection.tsx b/src/pages/mission/[id]/stopwatch/TextSection.tsx
similarity index 100%
rename from src/app/mission/[id]/stopwatch/TextSection.tsx
rename to src/pages/mission/[id]/stopwatch/TextSection.tsx
diff --git a/src/app/mission/[id]/stopwatch/index.hooks.ts b/src/pages/mission/[id]/stopwatch/index.hooks.ts
similarity index 99%
rename from src/app/mission/[id]/stopwatch/index.hooks.ts
rename to src/pages/mission/[id]/stopwatch/index.hooks.ts
index 8bee563a..315d1176 100644
--- a/src/app/mission/[id]/stopwatch/index.hooks.ts
+++ b/src/pages/mission/[id]/stopwatch/index.hooks.ts
@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import { useRecordTime } from '@/apis';
 import { isSeverError } from '@/apis/instance.api';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
diff --git a/src/pages/mission/[id]/stopwatch/index.page.tsx b/src/pages/mission/[id]/stopwatch/index.page.tsx
new file mode 100644
index 00000000..fd2d8673
--- /dev/null
+++ b/src/pages/mission/[id]/stopwatch/index.page.tsx
@@ -0,0 +1,41 @@
+import { type GetServerSidePropsContext } from 'next';
+import { useGetMissionDetailNoSuspense } from '@/apis/mission';
+import { css } from '@/styled-system/css';
+
+import ButtonSection from './ButtonSection';
+import StopwatchHeader from './Header';
+import StopwatchProvider from './Stopwatch.context';
+import StopwatchSection from './StopwatchSection';
+import TextSection from './TextSection';
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  return {
+    props: {
+      id: context.query.id,
+    },
+  };
+}
+
+export default function StopwatchPage(params: { id: string }) {
+  const missionId = params.id;
+
+  const { data: missionData } = useGetMissionDetailNoSuspense(missionId);
+  // const category = missionData?.category ? MISSION_CATEGORY_LABEL[missionData?.category].label : '';
+  const missionName = missionData?.name ?? '';
+
+  return (
+    <div className={containerCss}>
+      <StopwatchProvider missionId={missionId}>
+        <StopwatchHeader />
+        <TextSection />
+        <StopwatchSection missionName={missionName} />
+        <ButtonSection missionId={missionId} />
+      </StopwatchProvider>
+    </div>
+  );
+}
+
+const containerCss = css({
+  minHeight: '100vh',
+  backgroundColor: 'bg.surface2',
+});
diff --git a/src/pages/mission/new/MissionRegistration.tsx b/src/pages/mission/new/MissionRegistration.tsx
new file mode 100644
index 00000000..c9f6ede2
--- /dev/null
+++ b/src/pages/mission/new/MissionRegistration.tsx
@@ -0,0 +1,119 @@
+import { useState } from 'react';
+import { useRouter } from 'next/router';
+import APIS from '@/apis';
+import { isSeverError } from '@/apis/instance.api';
+import { type MissionCategory, type MissionVisibility } from '@/apis/schema/mission';
+import Button from '@/components/Button/Button';
+import Input from '@/components/Input/Input';
+import { type DropdownValueType } from '@/components/Input/Input.types';
+import { useSnackBar } from '@/components/SnackBar/SnackBarProvider';
+import { MISSION_CATEGORY_LIST, PUBLIC_SETTING_LIST } from '@/constants/mission';
+import { ROUTER } from '@/constants/router';
+import { useMutation } from '@tanstack/react-query';
+
+export default function MissionRegistration() {
+  const { triggerSnackBar } = useSnackBar();
+
+  const [missionTitleInput, setMissionTitleInput] = useState('');
+  const [missionContentInput, setMissionContentInput] = useState('');
+  const [missionCategory, setMissionCategory] = useState<DropdownValueType<MissionCategory> | null>(null);
+  const [missionPublicSetting, setMissionPublicSetting] = useState<DropdownValueType<MissionVisibility>>(
+    PUBLIC_SETTING_LIST[1],
+  );
+
+  const isSubmitButtonDisabled = !missionTitleInput || !missionCategory;
+
+  const { mutate } = useCreateMissionMutation();
+  // 미션 명
+  const handleMissionTitleInput = (value: string) => {
+    setMissionTitleInput(value);
+  };
+  // 미션 내용
+  const handleMissionContentInput = (value: string) => {
+    setMissionContentInput(value);
+  };
+
+  const handleSubmit = () => {
+    if (!missionCategory) {
+      triggerSnackBar({
+        message: '미션 제목을 입력해주세요.',
+      });
+      return;
+    }
+
+    mutate({
+      name: missionTitleInput,
+      content: missionContentInput,
+      category: missionCategory.value,
+      visibility: missionPublicSetting.value,
+    });
+  };
+
+  return (
+    <section>
+      <Input
+        type="text"
+        placeholder="미션명 입력"
+        name="미션명"
+        required
+        maxLength={20}
+        value={missionTitleInput}
+        onChange={handleMissionTitleInput}
+      />
+      <Input
+        type="text"
+        placeholder="미션 내용 입력"
+        name="미션내용"
+        maxLength={30}
+        value={missionContentInput}
+        onChange={handleMissionContentInput}
+      />
+
+      {/* 카테고리 */}
+      <Input
+        variant="drop-down"
+        title="카테고리"
+        required
+        list={MISSION_CATEGORY_LIST}
+        placeholder="카테고리 선택"
+        selected={missionCategory}
+        onSelect={(item) => setMissionCategory(item)}
+      />
+
+      {/* 공개설정 */}
+      <Input
+        variant="drop-down"
+        title="공개설정"
+        list={PUBLIC_SETTING_LIST}
+        selected={missionPublicSetting}
+        onSelect={(item) => setMissionPublicSetting(item)}
+      />
+
+      <Button variant={'cta'} size={'medium'} onClick={handleSubmit} disabled={isSubmitButtonDisabled}>
+        등록
+      </Button>
+    </section>
+  );
+}
+
+const useCreateMissionMutation = () => {
+  const router = useRouter();
+  const { triggerSnackBar } = useSnackBar();
+
+  // TODO : api 호출 위치 이동
+  return useMutation({
+    mutationFn: APIS.createMission,
+    onSuccess: () => {
+      router.replace(ROUTER.HOME);
+    },
+    onError: (error) => {
+      console.error('error: ', error);
+      if (isSeverError(error)) {
+        triggerSnackBar({
+          message: error.response.data.data.message,
+        });
+        return;
+      }
+    },
+  });
+};
diff --git a/src/pages/mission/new/index.page.tsx b/src/pages/mission/new/index.page.tsx
new file mode 100644
index 00000000..7c28a0c1
--- /dev/null
+++ b/src/pages/mission/new/index.page.tsx
@@ -0,0 +1,49 @@
+import Header from '@/components/Header/Header';
+import { css } from '@styled-system/css';
+
+import MissionRegistration from './MissionRegistration';
+
+export default function MissionNewPage() {
+  return (
+    <main className={mainWrapperCss}>
+      <Header title={'미션 등록'} rightAction="none" />
+      <div className={containerCss}>
+        <h1 className={mainTitleCss}>
+          하루 <strong>10분씩</strong> 2주 동안
+          <br />
+          어떤 일에 투자하고 싶은가요?
+        </h1>
+        <MissionRegistration />
+      </div>
+    </main>
+  );
+}
+
+const mainWrapperCss = css({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+
+  width: '100%',
+});
+
+const containerCss = css({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+
+  padding: '24px 16px',
+});
+
+const mainTitleCss = css({
+  marginTop: '2px',
+  marginBottom: '36px',
+
+  textStyle: 'title2',
+
+  color: 'text.primary',
+  '& strong': {
+    color: 'purple.purple800',
+    textStyle: 'title2',
+  },
+});
diff --git a/src/app/mypage/page.tsx b/src/pages/mypage/Header.tsx
similarity index 70%
rename from src/app/mypage/page.tsx
rename to src/pages/mypage/Header.tsx
index a1cdc7ec..76cb217c 100644
--- a/src/app/mypage/page.tsx
+++ b/src/pages/mypage/Header.tsx
@@ -1,8 +1,5 @@
-'use client';
 import Link from 'next/link';
 import { useGetMembersMe } from '@/apis/member';
-import AppBarBottom from '@/components/AppBarBottom/AppBarBottom';
-import BottomDim from '@/components/BottomDim/BottomDim';
 import Icon from '@/components/Icon';
 import { useSnackBar } from '@/components/SnackBar/SnackBarProvider';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
@@ -11,9 +8,7 @@ import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 import { copyClipBoard, eventLogger } from '@/utils';
 
-import MyProfile from './MyProfile';
-
-function Header() {
+function MypageHeader() {
   const { triggerSnackBar } = useSnackBar();
   const { data } = useGetMembersMe();
 
@@ -55,33 +50,7 @@ function Header() {
   );
 }
 
-function Mypage() {
-  return (
-    <main className={backgroundCss}>
-      <Header />
-      <MyProfile />
-      <AppBarBottom />
-      <div className={profileBackgroundDimCss} />
-      <BottomDim type={'bottomDim2'} />
-    </main>
-  );
-}
-const backgroundCss = css({
-  height: '100vh',
-  display: 'flex',
-  flexDirection: 'column',
-  position: 'relative',
-  background: 'gradients.primary',
-});
-
-const profileBackgroundDimCss = css({
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.15) 100%)',
-  top: 0,
-  zIndex: 1,
-});
+export default MypageHeader;
 
 const headingCss = flex({
   justifyContent: 'flex-end',
@@ -94,4 +63,3 @@ const headingCss = flex({
 const iconWrapperCss = css({
   padding: '10px',
 });
-export default Mypage;
diff --git a/src/app/mypage/MyProfile.tsx b/src/pages/mypage/MyProfile.tsx
similarity index 90%
rename from src/app/mypage/MyProfile.tsx
rename to src/pages/mypage/MyProfile.tsx
index 2e263b62..10edb274 100644
--- a/src/app/mypage/MyProfile.tsx
+++ b/src/pages/mypage/MyProfile.tsx
@@ -1,12 +1,9 @@
-'use client';
-
-import React from 'react';
 import Link from 'next/link';
 import { useFollowsCountMembers } from '@/apis/follow';
 import { useGetMembersMe } from '@/apis/member';
 import { useGetMissionStack } from '@/apis/mission';
-import ProfileTab from '@/app/mypage/ProfileTab';
-import ProfileContent from '@/app/profile/[id]/ProfileContent';
+import ProfileContent from '@/components/ProfileContent';
+import ProfileTab from '@/components/ProfileTab/ProfileTab';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import { ROUTER } from '@/constants/router';
 import { css } from '@/styled-system/css';
@@ -15,14 +12,17 @@ import { eventLogger } from '@/utils';
 export default function MyProfile() {
   const { data } = useGetMembersMe();
   const memberId = data?.memberId ?? 0;
+
   const { data: symbolStackData } = useGetMissionStack(memberId.toString());
-  const symbolStack = symbolStackData?.symbolStack ?? 0;
   const { data: followCountData } = useFollowsCountMembers();
 
+  const symbolStack = symbolStackData?.symbolStack ?? 0;
+
   const handleProfileEditClick = () => {
     eventLogger.logEvent(EVENT_LOG_CATEGORY.MY_PAGE, EVENT_LOG_NAME.MY_PAGE.CLICK_EDIT);
   };
 
+  // TODO : children으로 넘겨야 하는 이유가 뭐지?
   return (
     <ProfileContent
       memberId={memberId}
diff --git a/src/pages/mypage/index.page.tsx b/src/pages/mypage/index.page.tsx
new file mode 100644
index 00000000..5db6d4be
--- /dev/null
+++ b/src/pages/mypage/index.page.tsx
@@ -0,0 +1,35 @@
+import AppBarBottom from '@/components/AppBarBottom/AppBarBottom';
+import BottomDim from '@/components/BottomDim/BottomDim';
+import MypageHeader from '@/pages/mypage/Header';
+import MyProfile from '@/pages/mypage/MyProfile';
+import { css } from '@/styled-system/css';
+
+function Mypage() {
+  return (
+    <main className={backgroundCss}>
+      <MypageHeader />
+      <MyProfile />
+      <AppBarBottom />
+      <div className={profileBackgroundDimCss} />
+      <BottomDim type={'bottomDim2'} />
+    </main>
+  );
+}
+const backgroundCss = css({
+  height: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+  background: 'gradients.primary',
+});
+
+const profileBackgroundDimCss = css({
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.15) 100%)',
+  top: 0,
+  zIndex: 1,
+});
+
+export default Mypage;
diff --git a/src/app/mypage/login_info/page.tsx b/src/pages/mypage/login_info/index.page.tsx
similarity index 66%
rename from src/app/mypage/login_info/page.tsx
rename to src/pages/mypage/login_info/index.page.tsx
index c9abf254..210bc64e 100644
--- a/src/app/mypage/login_info/page.tsx
+++ b/src/pages/mypage/login_info/index.page.tsx
@@ -1,20 +1,27 @@
-'use client';
 import { AUTH_PROVIDER_LABEL, useGetSocialLoginInfo } from '@/apis/member';
+import Header from '@/components/Header/Header';
 import Icon from '@/components/Icon';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
+// TODO : 정상화 필요
 function LoginInfoPage() {
   const { data } = useGetSocialLoginInfo();
+
   if (!data) return null;
+
   return (
-    <div className={containerCss}>
-      <Icon name="log-in-information" color="icon.secondary" width={20} height={20} />
-      <div className={textWrapperCss}>
-        <p className={titleCss}>{AUTH_PROVIDER_LABEL[data.provider]}</p>
-        <p className={contentCss}>{data.email}</p>
-      </div>
-    </div>
+    <>
+      <Header rightAction="none" title="로그인 정보" />
+
+      <main className={containerCss}>
+        <Icon name="log-in-information" color="icon.secondary" width={20} height={20} />
+        <div className={textWrapperCss}>
+          <p className={titleCss}>{AUTH_PROVIDER_LABEL[data.provider]}</p>
+          <p className={contentCss}>{data.email}</p>
+        </div>
+      </main>
+    </>
   );
 }
 
@@ -31,6 +38,7 @@ const containerCss = flex({
 });
 
 const textWrapperCss = flex({ flex: 1, flexDirection: 'column', gap: '2px', minWidth: '0' });
+
 const titleCss = css({
   color: 'text.tertiary',
   textStyle: 'body4',
@@ -39,6 +47,7 @@ const titleCss = css({
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
 });
+
 const contentCss = css({
   color: 'text.secondary',
   textStyle: 'body3',
diff --git a/src/app/mypage/profile_modify/page.tsx b/src/pages/mypage/profile_modify.page.tsx
similarity index 99%
rename from src/app/mypage/profile_modify/page.tsx
rename to src/pages/mypage/profile_modify.page.tsx
index 69eae402..81e23522 100644
--- a/src/app/mypage/profile_modify/page.tsx
+++ b/src/pages/mypage/profile_modify.page.tsx
@@ -1,7 +1,5 @@
-'use client';
-
 import { type ChangeEvent, useRef } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import { useGetMembersMe, useUploadProfileImage, useUploadProfileImageComplete } from '@/apis/member';
 import Button from '@/components/Button/Button';
 import Dialog from '@/components/Dialog/Dialog';
@@ -114,6 +112,7 @@ function ProfileModifyPage() {
   };
 
   const { isOpen: isCancelModalOpen, openModal: openCancelModal, closeModal: closeCancelModal } = useModal();
+
   const onExit = () => {
     router.replace(ROUTER.MYPAGE.HOME);
   };
diff --git a/src/app/mypage/LogoutDialog.tsx b/src/pages/mypage/setting_and_private/LogoutDialog.tsx
similarity index 90%
rename from src/app/mypage/LogoutDialog.tsx
rename to src/pages/mypage/setting_and_private/LogoutDialog.tsx
index dd2b9063..4d00ac59 100644
--- a/src/app/mypage/LogoutDialog.tsx
+++ b/src/pages/mypage/setting_and_private/LogoutDialog.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import Dialog from '@/components/Dialog/Dialog';
 import { type ModalProps } from '@/components/Modal/Modal';
 import { ROUTER } from '@/constants/router';
@@ -6,7 +6,7 @@ import { removeTokens } from '@/services/auth/actions';
 
 function LogoutDialog(props: ModalProps) {
   const router = useRouter();
-  // TODO : logout 동작
+
   const onLogout = async () => {
     await removeTokens();
     router.replace(ROUTER.AUTH.LOGIN);
diff --git a/src/app/mypage/MenuList.tsx b/src/pages/mypage/setting_and_private/MenuList.tsx
similarity index 96%
rename from src/app/mypage/MenuList.tsx
rename to src/pages/mypage/setting_and_private/MenuList.tsx
index 223491a0..5ea929b4 100644
--- a/src/app/mypage/MenuList.tsx
+++ b/src/pages/mypage/setting_and_private/MenuList.tsx
@@ -1,10 +1,8 @@
-'use client';
-
 import Link from 'next/link';
-import LogoutDialog from '@/app/mypage/LogoutDialog';
 import Icon, { type IconComponentMap } from '@/components/Icon';
 import { ROUTER } from '@/constants/router';
 import useModal from '@/hooks/useModal';
+import LogoutDialog from '@/pages/mypage/setting_and_private/LogoutDialog';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
@@ -29,6 +27,7 @@ function MenuList() {
 }
 
 export default MenuList;
+
 const mainCss = css({
   height: '100vh',
   backgroundColor: 'bg.surface2',
diff --git a/src/pages/mypage/setting_and_private/index.page.tsx b/src/pages/mypage/setting_and_private/index.page.tsx
new file mode 100644
index 00000000..c39343ee
--- /dev/null
+++ b/src/pages/mypage/setting_and_private/index.page.tsx
@@ -0,0 +1,16 @@
+import Header from '@/components/Header/Header';
+
+import MenuList from './MenuList';
+
+function SettingAndPrivatePage() {
+  return (
+    <>
+      <Header isBackIcon={true} rightAction="none" title="설정 및 개인정보" />
+      <main>
+        <MenuList />
+      </main>
+    </>
+  );
+}
+
+export default SettingAndPrivatePage;
diff --git a/src/pages/mypage/terms/index.page.tsx b/src/pages/mypage/terms/index.page.tsx
new file mode 100644
index 00000000..504e8ab2
--- /dev/null
+++ b/src/pages/mypage/terms/index.page.tsx
@@ -0,0 +1,28 @@
+import Header from '@/components/Header/Header';
+import { flex } from '@/styled-system/patterns';
+
+import { TERMS } from './terms.constants';
+
+function TermPage() {
+  return (
+    <>
+      <Header rightAction="none" title="이용약관" />
+      <main className={containerCss}>
+        {TERMS.split('\n').map((line, index) => (
+          <p key={index}>{line}</p>
+        ))}
+      </main>
+    </>
+  );
+}
+
+export default TermPage;
+
+const containerCss = flex({
+  flexDirection: 'column',
+  gap: '8px',
+  color: 'text.primary',
+  padding: '30px 20px',
+
+  textStyle: 'body1',
+});
diff --git a/src/app/mypage/terms/terms.constants.ts b/src/pages/mypage/terms/terms.constants.ts
similarity index 100%
rename from src/app/mypage/terms/terms.constants.ts
rename to src/pages/mypage/terms/terms.constants.ts
diff --git a/src/pages/mypage/withdrawal/index.page.tsx b/src/pages/mypage/withdrawal/index.page.tsx
new file mode 100644
index 00000000..d2845022
--- /dev/null
+++ b/src/pages/mypage/withdrawal/index.page.tsx
@@ -0,0 +1,97 @@
+import Image from 'next/image';
+import { useRouter } from 'next/router';
+import { useWithdrawalMember } from '@/apis/member';
+import Button from '@/components/Button/Button';
+import Header from '@/components/Header/Header';
+import { useSnackBar } from '@/components/SnackBar/SnackBarProvider';
+import { ROUTER } from '@/constants/router';
+import { removeTokens } from '@/services/auth/actions';
+import { css } from '@/styled-system/css';
+import { flex, grid } from '@/styled-system/patterns';
+
+function WithdrawalPage() {
+  const router = useRouter();
+  const { triggerSnackBar } = useSnackBar();
+
+  const { mutate } = useWithdrawalMember({
+    onSuccess: () => {
+      removeTokens();
+      triggerSnackBar({
+        message: '회원탈퇴 했습니다.',
+      });
+      router.push(ROUTER.AUTH.LOGIN);
+    },
+    onError: () => {
+      triggerSnackBar({
+        message: '회원탈퇴에 실패했습니다.',
+      });
+    },
+  });
+
+  const onCancel = () => {
+    router.back();
+  };
+
+  const onWithdrawal = () => {
+    mutate();
+  };
+
+  return (
+    <>
+      <Header rightAction="none" title="회원 탈퇴" />
+      <main className={mainCss}>
+        <section>
+          <h1 className={headingCss}>벌써 헤어지다니 너무 아쉬워요...</h1>
+          <p className={subHeadingCss}>지금 탈퇴하시면 미션과 관련된 모든 내용이 삭제돼요. </p>
+          <p className={subHeadingCss}>그래도 탈퇴하시겠어요?</p>
+        </section>
+
+        {/* TODO : 슬픈 이미지 */}
+        {/* 지금은 임시. */}
+        <div className={imageWrapperCss}>
+          <Image src={'/images/crying-face.png'} width={120} height={120} alt={'crying-face'} />
+        </div>
+
+        <section className={buttonWrapper}>
+          <Button variant="secondary" onClick={onCancel}>
+            취소
+          </Button>
+          <Button variant="primary" onClick={onWithdrawal}>
+            탈퇴하기
+          </Button>
+        </section>
+      </main>
+    </>
+  );
+}
+
+export default WithdrawalPage;
+
+const mainCss = flex({
+  padding: '24px 16px 0',
+  flex: 1,
+
+  justifyContent: 'space-between',
+  flexDirection: 'column',
+});
+
+const headingCss = css({
+  textStyle: 'title2',
+  color: 'text.primary',
+  marginBottom: '4px',
+});
+
+const subHeadingCss = css({
+  color: 'text.secondary',
+  textStyle: 'body4',
+});
+
+const buttonWrapper = grid({
+  gap: '8px',
+  gridTemplateColumns: '1fr 1fr',
+  margin: '16px 0',
+});
+
+const imageWrapperCss = css({
+  margin: '100px auto',
+});
diff --git a/src/pages/privacy/index.page.tsx b/src/pages/privacy/index.page.tsx
new file mode 100644
index 00000000..02fa5814
--- /dev/null
+++ b/src/pages/privacy/index.page.tsx
@@ -0,0 +1,27 @@
+import Header from '@/components/Header/Header';
+import { PRIVACY } from '@/pages/privacy/privacy.constants';
+import { flex } from '@/styled-system/patterns';
+
+function PrivacyPage() {
+  return (
+    <>
+      <Header rightAction="none" title="개인정보 보호 정책" />
+      <main className={containerCss}>
+        {PRIVACY.split('\n').map((line, index) => (
+          <p key={index}>{line}</p>
+        ))}
+      </main>
+    </>
+  );
+}
+
+export default PrivacyPage;
+
+const containerCss = flex({
+  flexDirection: 'column',
+  gap: '8px',
+  color: 'text.primary',
+  padding: '30px 20px',
+
+  textStyle: 'body1',
+});
diff --git a/src/app/privacy/privacy.contants.ts b/src/pages/privacy/privacy.constants.ts
similarity index 100%
rename from src/app/privacy/privacy.contants.ts
rename to src/pages/privacy/privacy.constants.ts
diff --git a/src/app/profile/[id]/FollowButton.tsx b/src/pages/profile/[id]/FollowButton.tsx
similarity index 100%
rename from src/app/profile/[id]/FollowButton.tsx
rename to src/pages/profile/[id]/FollowButton.tsx
diff --git a/src/app/profile/[id]/follows/FollowingList.tsx b/src/pages/profile/[id]/follows/FollowingList.tsx
similarity index 93%
rename from src/app/profile/[id]/follows/FollowingList.tsx
rename to src/pages/profile/[id]/follows/FollowingList.tsx
index 6121b956..7aee15db 100644
--- a/src/app/profile/[id]/follows/FollowingList.tsx
+++ b/src/pages/profile/[id]/follows/FollowingList.tsx
@@ -1,6 +1,5 @@
 import Link from 'next/link';
 import { type FollowerMemberWithStatusType, FollowStatus } from '@/apis/schema/member';
-import { useGetMeId, useViewList } from '@/app/profile/[id]/follows/index.hooks';
 import {
   FollowingMember,
   type MemberItemProps,
@@ -10,8 +9,10 @@ import {
 import { stagger } from '@/components/Motion/Motion.constants';
 import StaggerWrapper from '@/components/Motion/StaggerWrapper';
 import { ROUTER } from '@/constants/router';
+import { useGetMeId, useViewList } from '@/pages/profile/[id]/follows/index.hooks';
 import { css } from '@/styled-system/css';
 
+// TODO : refetch -> invalidQueries 로 변경
 interface Props {
   list: FollowerMemberWithStatusType[];
   refetch: () => void;
diff --git a/src/app/profile/[id]/follows/MyFollowerList.tsx b/src/pages/profile/[id]/follows/MyFollowerList.tsx
similarity index 57%
rename from src/app/profile/[id]/follows/MyFollowerList.tsx
rename to src/pages/profile/[id]/follows/MyFollowerList.tsx
index 70ef7d87..aa43f4b2 100644
--- a/src/app/profile/[id]/follows/MyFollowerList.tsx
+++ b/src/pages/profile/[id]/follows/MyFollowerList.tsx
@@ -1,11 +1,11 @@
 import Link from 'next/link';
 import { useAddFollow } from '@/apis/follow';
 import { type FollowerMemberWithStatusType, FollowStatus } from '@/apis/schema/member';
-import { useViewList } from '@/app/profile/[id]/follows/index.hooks';
 import { ProfileListItem } from '@/components/ListItem';
 import { stagger } from '@/components/Motion/Motion.constants';
 import StaggerWrapper from '@/components/Motion/StaggerWrapper';
 import { ROUTER } from '@/constants/router';
+import { useViewList } from '@/pages/profile/[id]/follows/index.hooks';
 import { css } from '@/styled-system/css';
 
 interface Props {
@@ -40,34 +40,56 @@ interface ItemProps {
 }
 
 function Item({ item, onUpdateItem }: ItemProps) {
+  const isFollowing = item.followStatus === FollowStatus.FOLLOWING;
+
+  return (
+    <Link key={item.memberId} href={ROUTER.PROFILE.DETAIL(item.memberId)}>
+      {isFollowing ? <MutualFollowingItem item={item} /> : <FollowerItem item={item} onUpdateItem={onUpdateItem} />}
+    </Link>
+  );
+}
+
+function FollowerItem({ item, onUpdateItem }: ItemProps) {
   const { mutate } = useAddFollow({
     onSuccess: () => {
       onUpdateItem({ ...item, followStatus: FollowStatus.FOLLOWING });
     },
   });
 
-  const isFollowing = item.followStatus === FollowStatus.FOLLOWING;
+  return (
+    <ProfileListItem
+      variant={'two-button'}
+      thumbnailUrl={item.profileImageUrl}
+      name={item.nickname}
+      subElement={
+        <span className={followLabelCss} onClick={() => mutate(item.memberId)}>
+          팔로우
+        </span>
+      }
+      buttonElement={
+        // TODO : 삭제 버튼 추가 필요 (맞팔 관계 팔로우 삭제, 맞팔 x, 팔로워 관계 삭제)
+        // 일정 상 무리라고 판단 (2/6) 추후 수정
+        <div></div>
+      }
+    />
+  );
+}
 
+/**
+ * @description 맞팔
+ */
+function MutualFollowingItem({ item }: Pick<ItemProps, 'item'>) {
   return (
-    <Link key={item.memberId} href={ROUTER.PROFILE.DETAIL(item.memberId)}>
-      <ProfileListItem
-        variant={isFollowing ? 'one-button' : 'two-button'}
-        subElement={
-          !isFollowing && (
-            <span className={followLabelCss} onClick={() => mutate(item.memberId)}>
-              팔로우
-            </span>
-          )
-        }
-        buttonElement={
-          // TODO : 삭제 버튼 추가 필요 (맞팔 관계 팔로우 삭제, 맞팔 x, 팔로워 관계 삭제)
-          // 일정 상 무리라고 판단 (2/6) 추후 수정
-          <div></div>
-        }
-        thumbnailUrl={item.profileImageUrl}
-        name={item.nickname}
-      />
-    </Link>
+    <ProfileListItem
+      variant={'one-button'}
+      thumbnailUrl={item.profileImageUrl}
+      name={item.nickname}
+      buttonElement={
+        // TODO : 삭제 버튼 추가 필요 (맞팔 관계 팔로우 삭제, 맞팔 x, 팔로워 관계 삭제)
+        // 일정 상 무리라고 판단 (2/6) 추후 수정
+        <div></div>
+      }
+    />
   );
 }
 
diff --git a/src/app/profile/[id]/follows/index.hooks.ts b/src/pages/profile/[id]/follows/index.hooks.ts
similarity index 81%
rename from src/app/profile/[id]/follows/index.hooks.ts
rename to src/pages/profile/[id]/follows/index.hooks.ts
index 4707f670..af5b87b5 100644
--- a/src/app/profile/[id]/follows/index.hooks.ts
+++ b/src/pages/profile/[id]/follows/index.hooks.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useGetMembersMe } from '@/apis/member';
 import { type FollowerMemberWithStatusType } from '@/apis/schema/member';
-import { sorFollowerList } from '@/app/profile/[id]/follows/index.utils';
+import { sorFollowerList } from '@/pages/profile/[id]/follows/index.utils';
 
 export const useViewList = (list: FollowerMemberWithStatusType[]) => {
   const myId = useGetMeId();
@@ -19,7 +19,10 @@ export const useViewList = (list: FollowerMemberWithStatusType[]) => {
   return { list: viewList, onUpdateItem };
 };
 
-// @description 현재 로그인한 사용자의 memberId를 가져옵니다.
+/**
+ * @description 현재 로그인한 사용자의 memberId를 가져옵니다.
+ * @returns {number} memberId
+ */
 export const useGetMeId = () => {
   const { data } = useGetMembersMe();
   const memberId = data?.memberId ?? 0;
diff --git a/src/app/profile/[id]/follows/page.tsx b/src/pages/profile/[id]/follows/index.page.tsx
similarity index 77%
rename from src/app/profile/[id]/follows/page.tsx
rename to src/pages/profile/[id]/follows/index.page.tsx
index 74c6d0b5..02f43bab 100644
--- a/src/app/profile/[id]/follows/page.tsx
+++ b/src/pages/profile/[id]/follows/index.page.tsx
@@ -1,43 +1,31 @@
-'use client';
-
+import { type GetServerSidePropsContext } from 'next';
 import { useFetFollowList } from '@/apis/follow';
-import FollowingList from '@/app/profile/[id]/follows/FollowingList';
-import { useGetMeId } from '@/app/profile/[id]/follows/index.hooks';
-import MyFollowerList from '@/app/profile/[id]/follows/MyFollowerList';
 import Header from '@/components/Header/Header';
 import FullTab from '@/components/Tab/FullTab';
 import { useTab } from '@/components/Tab/Tab.hooks';
 import { ROUTER } from '@/constants/router';
 import useSearchParamsTypedValue from '@/hooks/useSearchParamsTypedValue';
+import FollowingList from '@/pages/profile/[id]/follows/FollowingList';
+import { useGetMeId } from '@/pages/profile/[id]/follows/index.hooks';
+import MyFollowerList from '@/pages/profile/[id]/follows/MyFollowerList';
 import { css } from '@/styled-system/css';
 
 type FollowTabType = 'following' | 'follower';
 
-function FollowListPage({ params }: { params: { id: string } }) {
-  const { searchParams } = useSearchParamsTypedValue<FollowTabType>('tab');
-  const initTabId = searchParams ?? 'following';
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  return {
+    props: {
+      params: { id: context.query.id },
+    },
+  };
+}
 
+function FollowListPage({ params }: { params: { id: string } }) {
   const currentMemberId = Number(params.id);
 
   const { data, refetch, isLoading, isFetching } = useFetFollowList(Number(params.id));
 
-  const followingCount = data?.followingList.length ?? '';
-  const followerCount = data?.followerList.length ?? '';
-
-  const _tabs = [
-    {
-      id: 'following',
-      tabName: `팔로잉 ${followingCount}`,
-      href: ROUTER.PROFILE.FOLLOW_LIST(currentMemberId, 'following'),
-    },
-    {
-      id: 'follower',
-      tabName: `팔로워 ${followerCount}`,
-      href: ROUTER.PROFILE.FOLLOW_LIST(currentMemberId, 'follower'),
-    },
-  ];
-
-  const { tabs, activeTab, onTabClick } = useTab(_tabs, initTabId);
+  const { tabs, activeTab, onTabClick } = useFollowTab(currentMemberId);
 
   const myId = useGetMeId();
   const isMyFollowList = myId === currentMemberId;
@@ -97,3 +85,28 @@ const headerCss = css({
     textStyle: 'subtitle1',
   },
 });
+
+const useFollowTab = (memberId: number) => {
+  const { searchParams } = useSearchParamsTypedValue<FollowTabType>('tab');
+  const initTabId = searchParams ?? 'following';
+
+  const { data } = useFetFollowList(memberId);
+
+  const followingCount = data?.followingList.length ?? '';
+  const followerCount = data?.followerList.length ?? '';
+
+  const _tabs = [
+    {
+      id: 'following',
+      tabName: `팔로잉 ${followingCount}`,
+      href: ROUTER.PROFILE.FOLLOW_LIST(memberId, 'following'),
+    },
+    {
+      id: 'follower',
+      tabName: `팔로워 ${followerCount}`,
+      href: ROUTER.PROFILE.FOLLOW_LIST(memberId, 'follower'),
+    },
+  ];
+
+  return useTab(_tabs, initTabId);
+};
diff --git a/src/app/profile/[id]/follows/index.utils.ts b/src/pages/profile/[id]/follows/index.utils.ts
similarity index 100%
rename from src/app/profile/[id]/follows/index.utils.ts
rename to src/pages/profile/[id]/follows/index.utils.ts
diff --git a/src/app/profile/[id]/page.tsx b/src/pages/profile/[id]/index.page.tsx
similarity index 78%
rename from src/app/profile/[id]/page.tsx
rename to src/pages/profile/[id]/index.page.tsx
index aa55fff5..1f48891b 100644
--- a/src/app/profile/[id]/page.tsx
+++ b/src/pages/profile/[id]/index.page.tsx
@@ -1,16 +1,15 @@
-'use client';
-
+import { type GetServerSideProps } from 'next';
 import { useRouter } from 'next/navigation';
 import { useFollowsCountTargetId } from '@/apis/follow';
 import { useGetMembersById, useGetMembersMe } from '@/apis/member';
 import { useGetMissionStack } from '@/apis/mission';
 import { FollowStatus } from '@/apis/schema/member';
-import ProfileTab from '@/app/mypage/ProfileTab';
-import FollowButton from '@/app/profile/[id]/FollowButton';
-import ProfileContent from '@/app/profile/[id]/ProfileContent';
 import BottomDim from '@/components/BottomDim/BottomDim';
 import Header from '@/components/Header/Header';
+import ProfileContent from '@/components/ProfileContent';
+import ProfileTab from '@/components/ProfileTab/ProfileTab';
 import { ROUTER } from '@/constants/router';
+import FollowButton from '@/pages/profile/[id]/FollowButton';
 import { css } from '@styled-system/css';
 
 function FollowProfilePage({
@@ -67,6 +66,34 @@ function FollowProfilePage({
 
 export default FollowProfilePage;
 
+export const getServerSideProps: GetServerSideProps = async (context) => {
+  const { id } = context.params as { id: string };
+
+  if (context.query?.profileShare) {
+    return {
+      props: {
+        params: {
+          id,
+        },
+        searchParams: {
+          profileShare: context.query.profileShare,
+        },
+      },
+    };
+  }
+
+  return {
+    props: {
+      params: {
+        id,
+      },
+      searchParams: {
+        profileShare: false,
+      },
+    },
+  };
+};
+
 const backgroundCss = css({
   height: '100vh',
   display: 'flex',
diff --git a/src/app/record/[id]/detail/MissionRecordDetail.tsx b/src/pages/record/[id]/detail/MissionRecordDetail.tsx
similarity index 87%
rename from src/app/record/[id]/detail/MissionRecordDetail.tsx
rename to src/pages/record/[id]/detail/MissionRecordDetail.tsx
index 8a1abb45..05894282 100644
--- a/src/app/record/[id]/detail/MissionRecordDetail.tsx
+++ b/src/pages/record/[id]/detail/MissionRecordDetail.tsx
@@ -1,22 +1,17 @@
-'use client';
 import { useMemo } from 'react';
-import { useParams } from 'next/navigation';
 import { useGetRecordDetail } from '@/apis';
 import MyReactionBar from '@/components/ReactionBar/MyReactionBar/MyReactionBar';
 import OtherReactionBar from '@/components/ReactionBar/OtherReactionBar/OtherReactionBar';
+import HistoryThumbnail from '@/pages/feed/HistoryThumbnail';
 import { css } from '@styled-system/css';
 import dayjs from 'dayjs';
 
-import HistoryThumbnail from './HistoryThumbnail';
-
 interface Props {
   isFollow: boolean;
+  recordId: string;
 }
 
-function MissionRecordDetail(props: Props) {
-  const params = useParams();
-
-  const recordId = params.id as string;
+function MissionRecordDetail({ recordId, ...props }: Props) {
   const { data } = useGetRecordDetail(recordId);
 
   const { sinceDay, imageUrl, remark, duration, startedAt: missionDate } = data;
diff --git a/src/app/record/[id]/detail/MissionRecordHeader.tsx b/src/pages/record/[id]/detail/MissionRecordHeader.tsx
similarity index 90%
rename from src/app/record/[id]/detail/MissionRecordHeader.tsx
rename to src/pages/record/[id]/detail/MissionRecordHeader.tsx
index 78d89ca1..4b3384f6 100644
--- a/src/app/record/[id]/detail/MissionRecordHeader.tsx
+++ b/src/pages/record/[id]/detail/MissionRecordHeader.tsx
@@ -1,13 +1,14 @@
-'use client';
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import Header from '@/components/Header/Header';
 import { ROUTER } from '@/constants/router';
 
 function MissionRecordHeader({ recordId }: { recordId: string }) {
   const route = useRouter();
+
   const handleEditButtonClick = () => {
     route.push(ROUTER.RECORD.DETAIL.EDIT(recordId));
   };
+
   return (
     <Header
       rightAction="text-button"
@@ -19,4 +20,5 @@ function MissionRecordHeader({ recordId }: { recordId: string }) {
     />
   );
 }
+
 export default MissionRecordHeader;
diff --git a/src/app/record/[id]/detail/page.tsx b/src/pages/record/[id]/detail/index.page.tsx
similarity index 57%
rename from src/app/record/[id]/detail/page.tsx
rename to src/pages/record/[id]/detail/index.page.tsx
index 18111e44..e75f10e4 100644
--- a/src/app/record/[id]/detail/page.tsx
+++ b/src/pages/record/[id]/detail/index.page.tsx
@@ -1,15 +1,24 @@
 import { Suspense } from 'react';
+import { type GetServerSidePropsContext } from 'next';
 import { css } from '@styled-system/css';
 
 import MissionRecordDetail from './MissionRecordDetail';
 import MissionRecordHeader from './MissionRecordHeader';
 
-function MissionRecordDetailPage({ params }: { params: { id: string } }) {
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  return {
+    props: {
+      id: context.query.id,
+    },
+  };
+}
+
+function MissionRecordDetailPage(params: { id: string }) {
   return (
     <main className={mainWrapperCss}>
       <MissionRecordHeader recordId={params.id} />
       <Suspense>
-        <MissionRecordDetail isFollow={false} />
+        <MissionRecordDetail isFollow={false} recordId={params.id} />
       </Suspense>
     </main>
   );
diff --git a/src/app/record/[id]/edit/page.tsx b/src/pages/record/[id]/edit.page.tsx
similarity index 86%
rename from src/app/record/[id]/edit/page.tsx
rename to src/pages/record/[id]/edit.page.tsx
index 11343697..cdec8160 100644
--- a/src/app/record/[id]/edit/page.tsx
+++ b/src/pages/record/[id]/edit.page.tsx
@@ -1,6 +1,6 @@
-'use client';
 import { type ChangeEventHandler, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { type GetServerSidePropsContext } from 'next';
+import { useRouter } from 'next/router';
 import { useGetRecordDetail, useUpdateRemarkMutation } from '@/apis';
 import Header from '@/components/Header/Header';
 import { useSnackBar } from '@/components/SnackBar/SnackBarProvider';
@@ -8,6 +8,14 @@ import TextArea from '@/components/TextArea/TextArea';
 import { ROUTER } from '@/constants/router';
 import { css } from '@styled-system/css';
 
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  return {
+    props: {
+      params: { id: context.query.id },
+    },
+  };
+}
+
 function MissionRecordEditPage({ params }: { params: { id: string } }) {
   const { data } = useGetRecordDetail(params.id as string);
   const { triggerSnackBar } = useSnackBar();
diff --git a/src/pages/record/[id]/follow.page.tsx b/src/pages/record/[id]/follow.page.tsx
new file mode 100644
index 00000000..98c0fe6a
--- /dev/null
+++ b/src/pages/record/[id]/follow.page.tsx
@@ -0,0 +1,30 @@
+import { Suspense } from 'react';
+import { type GetServerSidePropsContext } from 'next';
+import Header from '@/components/Header/Header';
+import MissionRecordDetail from '@/pages/record/[id]/detail/MissionRecordDetail';
+import { css } from '@styled-system/css';
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  return {
+    props: {
+      id: context.query.id,
+    },
+  };
+}
+
+function FollowMissionRecordDetailPage({ id }: { id: string }) {
+  return (
+    <main className={mainWrapperCss}>
+      <Header rightAction={'none'} title={'미션 내역'} />
+      <Suspense>
+        <MissionRecordDetail isFollow recordId={id} />
+      </Suspense>
+    </main>
+  );
+}
+
+export default FollowMissionRecordDetailPage;
+
+const mainWrapperCss = css({
+  width: '100%',
+});
diff --git a/src/app/record/[id]/page.tsx b/src/pages/record/[id]/index.page.tsx
similarity index 96%
rename from src/app/record/[id]/page.tsx
rename to src/pages/record/[id]/index.page.tsx
index 894111d7..db66751e 100644
--- a/src/app/record/[id]/page.tsx
+++ b/src/pages/record/[id]/index.page.tsx
@@ -1,8 +1,7 @@
-'use client';
-
 import { type ChangeEvent, useRef, useState } from 'react';
+import { type GetServerSidePropsContext } from 'next';
 import Image from 'next/image';
-import { useParams, useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import RECORD_API from '@/apis/record';
 import Button from '@/components/Button/Button';
 import Dialog from '@/components/Dialog/Dialog';
@@ -17,21 +16,29 @@ import useModal from '@/hooks/useModal';
 import { eventLogger } from '@/utils';
 import { css } from '@styled-system/css';
 
-export default function MissionRecordPage() {
-  const router = useRouter();
-  const { triggerSnackBar } = useSnackBar();
-  const params = useParams();
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  return {
+    props: {
+      id: context.query.id,
+    },
+  };
+}
 
-  const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+export default function MissionRecordPage(params: { id: string }) {
+  const router = useRouter();
 
   const missionId = params.id as string;
 
+  const { triggerSnackBar } = useSnackBar();
   const { isOpen, openModal, closeModal } = useModal();
-  const [remark, setRemark] = useState('');
-  const imageRef = useRef<HTMLInputElement>(null);
 
   const { uploadImageChange, imagePreview, imageFile } = useImage();
 
+  const [isSubmitLoading, setIsSubmitLoading] = useState(false);
+  const [remark, setRemark] = useState('');
+
+  const imageRef = useRef<HTMLInputElement>(null);
+
   const onChangeText = (e: ChangeEvent<HTMLTextAreaElement>) => {
     // TODO: 200자 제한
     setRemark(e.target.value);
diff --git a/src/app/record/empty/page.tsx b/src/pages/record/empty.page.tsx
similarity index 100%
rename from src/app/record/empty/page.tsx
rename to src/pages/record/empty.page.tsx
diff --git a/src/app/record/success/page.tsx b/src/pages/record/success.page.tsx
similarity index 96%
rename from src/app/record/success/page.tsx
rename to src/pages/record/success.page.tsx
index 21aeae20..326c463a 100644
--- a/src/app/record/success/page.tsx
+++ b/src/pages/record/success.page.tsx
@@ -1,7 +1,7 @@
-'use client';
+/* eslint-disable @next/next/no-img-element */
 
 import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter } from 'next/router';
 import Button from '@/components/Button/Button';
 import { ROUTER } from '@/constants/router';
 import { NATIVE_METHODS } from '@/utils/nativeMethod';
diff --git a/src/app/result/FinishedMissionList.tsx b/src/pages/result/FinishedMissionList.tsx
similarity index 100%
rename from src/app/result/FinishedMissionList.tsx
rename to src/pages/result/FinishedMissionList.tsx
diff --git a/src/app/result/OverallStatus/BannerSection.tsx b/src/pages/result/OverallStatus/BannerSection.tsx
similarity index 100%
rename from src/app/result/OverallStatus/BannerSection.tsx
rename to src/pages/result/OverallStatus/BannerSection.tsx
diff --git a/src/app/result/OverallStatus/Calendar.tsx b/src/pages/result/OverallStatus/Calendar.tsx
similarity index 98%
rename from src/app/result/OverallStatus/Calendar.tsx
rename to src/pages/result/OverallStatus/Calendar.tsx
index bfe7af95..47bb4a11 100644
--- a/src/app/result/OverallStatus/Calendar.tsx
+++ b/src/pages/result/OverallStatus/Calendar.tsx
@@ -1,8 +1,8 @@
-import CalendarItem from '@/app/result/OverallStatus/CalendarItem';
 import Icon from '@/components/Icon';
 import { WEEK_DAYS } from '@/components/MissionDetail/MissionCalender/MissionCalendar.constants';
 import { EVENT_LOG_CATEGORY, EVENT_LOG_NAME } from '@/constants/eventLog';
 import useCalendar from '@/hooks/useCalendar';
+import CalendarItem from '@/pages/result/OverallStatus/CalendarItem';
 import { eventLogger } from '@/utils';
 import { css, cx } from '@styled-system/css';
 import dayjs, { type Dayjs } from 'dayjs';
diff --git a/src/app/result/OverallStatus/CalendarItem.tsx b/src/pages/result/OverallStatus/CalendarItem.tsx
similarity index 100%
rename from src/app/result/OverallStatus/CalendarItem.tsx
rename to src/pages/result/OverallStatus/CalendarItem.tsx
diff --git a/src/app/result/OverallStatus/ImageAreaSection.tsx b/src/pages/result/OverallStatus/ImageAreaSection.tsx
similarity index 97%
rename from src/app/result/OverallStatus/ImageAreaSection.tsx
rename to src/pages/result/OverallStatus/ImageAreaSection.tsx
index 123a567d..1ea0e5a1 100644
--- a/src/app/result/OverallStatus/ImageAreaSection.tsx
+++ b/src/pages/result/OverallStatus/ImageAreaSection.tsx
@@ -1,8 +1,6 @@
-'use client';
-
 import Image from 'next/image';
-import Character from '@/app/level/guide/Character';
 import Icon from '@/components/Icon';
+import Character from '@/components/Level/Character';
 import MotionDiv from '@/components/Motion/MotionDiv';
 import ProgressBar from '@/components/ProgressBar';
 import { gradientTextCss } from '@/constants/style/gradient';
diff --git a/src/app/result/OverallStatus/MissionList.tsx b/src/pages/result/OverallStatus/MissionList.tsx
similarity index 100%
rename from src/app/result/OverallStatus/MissionList.tsx
rename to src/pages/result/OverallStatus/MissionList.tsx
diff --git a/src/app/result/OverallStatus/MissionSection.tsx b/src/pages/result/OverallStatus/MissionSection.tsx
similarity index 100%
rename from src/app/result/OverallStatus/MissionSection.tsx
rename to src/pages/result/OverallStatus/MissionSection.tsx
diff --git a/src/app/result/OverallStatus/index.tsx b/src/pages/result/OverallStatus/index.tsx
similarity index 71%
rename from src/app/result/OverallStatus/index.tsx
rename to src/pages/result/OverallStatus/index.tsx
index 2b4166de..3bae86a6 100644
--- a/src/app/result/OverallStatus/index.tsx
+++ b/src/pages/result/OverallStatus/index.tsx
@@ -1,9 +1,8 @@
-'use client';
-
 import { useGetMissionSummary } from '@/apis/mission';
-import BannerSection, { BannerSectionSkeleton } from '@/app/result/OverallStatus/BannerSection';
-import ImageAreaSection, { ImageSectionSkeleton } from '@/app/result/OverallStatus/ImageAreaSection';
-import MissionSection from '@/app/result/OverallStatus/MissionSection';
+
+import BannerSection, { BannerSectionSkeleton } from './BannerSection';
+import ImageAreaSection, { ImageSectionSkeleton } from './ImageAreaSection';
+import MissionSection from './MissionSection';
 
 function OverallStatus() {
   const { data, isLoading } = useGetMissionSummary();
diff --git a/src/app/result/finished/[id]/page.tsx b/src/pages/result/finished/[id]/index.page.tsx
similarity index 83%
rename from src/app/result/finished/[id]/page.tsx
rename to src/pages/result/finished/[id]/index.page.tsx
index 4d0031d9..2d861a99 100644
--- a/src/app/result/finished/[id]/page.tsx
+++ b/src/pages/result/finished/[id]/index.page.tsx
@@ -1,9 +1,5 @@
-'use client';
-
-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 { type GetServerSidePropsContext } from 'next';
+import { useRouter } from 'next/router';
 import Header from '@/components/Header/Header';
 import { MissionDeleteDialog } from '@/components/MissionDetail';
 import MissionCalendar from '@/components/MissionDetail/MissionCalender/MissionCalendar';
@@ -12,6 +8,9 @@ import Tab from '@/components/Tab/Tab';
 import { useTab } from '@/components/Tab/Tab.hooks';
 import { ROUTER } from '@/constants/router';
 import useModal from '@/hooks/useModal';
+import MissionHistoryBannerApi from '@/pages/mission/[id]/detail/MissionHistoryBanner/MissionHistoryBannerApi';
+import MissionStatistics from '@/pages/mission/[id]/detail/MissionStatistics';
+import { ResultTabId } from '@/pages/result/result.constants';
 import { css } from '@/styled-system/css';
 import dayjs from 'dayjs';
 
@@ -26,6 +25,14 @@ const MISSION_TAB = [
   },
 ];
 
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  return {
+    props: {
+      params: { id: context.query.id },
+    },
+  };
+}
+
 function FinishedMissionDetailPage({ params: { id } }: { params: { id: string } }) {
   const { isOpen, openModal: openDeleteDialog, closeModal: closeDeleteDialog } = useModal();
   const router = useRouter();
diff --git a/src/app/result/page.tsx b/src/pages/result/index.page.tsx
similarity index 93%
rename from src/app/result/page.tsx
rename to src/pages/result/index.page.tsx
index e0daeaf3..65e02708 100644
--- a/src/app/result/page.tsx
+++ b/src/pages/result/index.page.tsx
@@ -1,10 +1,5 @@
-'use client';
-
 import Link from 'next/link';
 import { useGetFinishedMissions } from '@/apis/mission';
-import FinishedMissionList from '@/app/result/FinishedMissionList';
-import OverallStatus from '@/app/result/OverallStatus';
-import { ResultTabId } from '@/app/result/result.constants';
 import AppBarBottom from '@/components/AppBarBottom/AppBarBottom';
 import BottomDim from '@/components/BottomDim/BottomDim';
 import Tab from '@/components/Tab/Tab';
@@ -16,6 +11,10 @@ import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 import { eventLogger } from '@/utils';
 
+import FinishedMissionList from './FinishedMissionList';
+import OverallStatus from './OverallStatus';
+import { ResultTabId } from './result.constants';
+
 const handleLevelGuideClick = () => {
   eventLogger.logEvent(EVENT_LOG_CATEGORY.RESULT, EVENT_LOG_NAME.RESULT.CLICK_MISSION);
 };
diff --git a/src/app/result/result.constants.ts b/src/pages/result/result.constants.ts
similarity index 100%
rename from src/app/result/result.constants.ts
rename to src/pages/result/result.constants.ts
diff --git a/src/app/search/page.tsx b/src/pages/search/index.page.tsx
similarity index 72%
rename from src/app/search/page.tsx
rename to src/pages/search/index.page.tsx
index 8033440b..300f4f7e 100644
--- a/src/app/search/page.tsx
+++ b/src/pages/search/index.page.tsx
@@ -1,8 +1,7 @@
-'use client';
-
 import { Suspense, useState } from 'react';
 import Link from 'next/link';
 import { useSuspenseGetSearchNickname } from '@/apis/member';
+import Header from '@/components/Header/Header';
 import { FollowingMember, NotFollowingMember } from '@/components/ListItem/Follow/MemberItem';
 import { stagger } from '@/components/Motion/Motion.constants';
 import StaggerWrapper from '@/components/Motion/StaggerWrapper';
@@ -12,12 +11,16 @@ import { css } from '@/styled-system/css';
 
 function SearchPage() {
   const [input, setInput] = useState('');
+
   return (
     <>
-      <SearchBar placeholder="닉네임을 검색해 주세요." value={input} onChange={setInput} />
-      <Suspense fallback={<div></div>}>
-        <List nickname={input} key={input} />
-      </Suspense>
+      <Header rightAction="none" title="닉네임 검색" />
+      <main className={mainCss}>
+        <SearchBar placeholder="닉네임을 검색해 주세요." value={input} onChange={setInput} />
+        <Suspense fallback={<div></div>}>
+          <List nickname={input} key={input} />
+        </Suspense>
+      </main>
     </>
   );
 }
@@ -52,3 +55,12 @@ const listContainer = css({
   minH: '0',
   overflow: 'auto',
 });
+
+const mainCss = css({
+  padding: '8px 16px 16px',
+  height: '100%',
+  minHeight: 'calc(100vh - 44px)',
+  maxHeight: 'calc(100vh - 44px)',
+  display: 'flex',
+  flexDirection: 'column',
+});
diff --git a/src/utils/storage/date.test.ts b/src/utils/storage/date.test.ts
new file mode 100644
index 00000000..8d54731f
--- /dev/null
+++ b/src/utils/storage/date.test.ts
@@ -0,0 +1,24 @@
+const mockNowDate = (timestamp: number) => {
+  const realDateNow = Date.now.bind(global.Date);
+
+  const setMock = () => {
+    const dateNowStub = jest.fn(() => timestamp);
+    global.Date.now = dateNowStub;
+  };
+
+  const restoreMock = () => {
+    global.Date.now = realDateNow;
+  };
+
+  return { setMock, restoreMock };
+};
+
+test('It should call and return Date.now()', () => {
+  const { setMock, restoreMock } = mockNowDate(1530518207007);
+
+  setMock();
+  expect(Date.now()).toBe(1530518207007);
+
+  restoreMock();
+  expect(Date.now()).not.toBe(1530518207007);
+});