diff --git a/.github/workflows/Auto_PR_Setting.yml b/.github/workflows/Auto_PR_Setting.yml
index 41a2ed60..f2382397 100644
--- a/.github/workflows/Auto_PR_Setting.yml
+++ b/.github/workflows/Auto_PR_Setting.yml
@@ -45,7 +45,8 @@ jobs:
           LABELS=$(echo "${ISSUE_DATA}" | jq -r '.labels | join(",")')
 
           # 팀 멤버 목록을 정의하고, 할당되지 않은 멤버를 리뷰어로 추가.
-          TEAM_MEMBERS=("jaeml06" "i-meant-to-be" "eunwoo-levi" "katie424")
+          # 단, 현재 활동하지 않는 멤버는 제외. (현재 비활성 멤버 = 엘, 케이티)
+          TEAM_MEMBERS=("jaeml06" "i-meant-to-be" "useon")
           IFS=', ' read -r -a ASSIGNEE_ARRAY <<< "${ASSIGNEES}"
           REVIEWERS=()
           for MEMBER in "${TEAM_MEMBERS[@]}"; do
diff --git a/.github/workflows/Notion_Sync.yml b/.github/workflows/Notion_Sync.yml
new file mode 100644
index 00000000..3ea2c40b
--- /dev/null
+++ b/.github/workflows/Notion_Sync.yml
@@ -0,0 +1,32 @@
+name: Notion Sync
+
+on:
+  issues:
+    types: [opened]
+  pull_request:
+    types: [opened, reopened, closed]
+  pull_request_target: # For accessing secrets from forked repos
+    types: [opened, reopened, closed]
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.x'
+
+      - name: Install dependencies
+        run: pip install requests pytz
+
+      - name: Run Notion Sync Script
+        env:
+          NOTION_TOKEN: ${{ secrets.NOTION_TOKEN }}
+          NOTION_DATABASE_ID: ${{ secrets.NOTION_DATABASE_ID }}
+          NOTION_USER_UUID_MAP: ${{ secrets.NOTION_USER_UUID_MAP }}
+          GITHUB_EVENT_PATH: ${{ github.event_path }}
+        run: python ./notion_sync.py
diff --git a/.github/workflows/deploy-development.yml b/.github/workflows/deploy-development.yml
index c3aadd46..e623150e 100644
--- a/.github/workflows/deploy-development.yml
+++ b/.github/workflows/deploy-development.yml
@@ -8,6 +8,7 @@ on:
 
 jobs:
   build-and-deploy:
+    if: github.event_name != 'pull_request' || github.event.pull_request.merged == true
     runs-on: ubuntu-latest
     environment: DEPLOY_DEV
 
diff --git a/.github/workflows/deploy-production.yml b/.github/workflows/deploy-production.yml
index bc5bd905..916069b5 100644
--- a/.github/workflows/deploy-production.yml
+++ b/.github/workflows/deploy-production.yml
@@ -8,6 +8,7 @@ on:
 
 jobs:
   build-and-deploy:
+    if: github.event_name != 'pull_request' || github.event.pull_request.merged == true
     runs-on: ubuntu-latest
     environment: DEPLOY_PROD
 
diff --git a/.storybook/main.ts b/.storybook/main.ts
index 11634b8b..9379e51e 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -16,5 +16,17 @@ const config: StorybookConfig = {
   core: {
     builder: '@storybook/builder-vite',
   },
+  async viteFinal(config, { configType }) {
+    console.log(`# configType = ${configType}`);
+
+    // Storybook의 실행 모드를 테스트 모드로 고정하여
+    // msw가 잘 동작할 수 있게 준비
+    config.define = {
+      ...config.define,
+      'import.meta.env.MODE': JSON.stringify('test'),
+    };
+
+    return config;
+  },
 };
 export default config;
diff --git a/README.md b/README.md
index 85c910f6..c3cd54c5 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,83 @@
-# debate-timer-fe
-디베이트 타이머 프론트엔드 레포지토리입니다
+# ⏲️ 디베이트 타이머: Debate Timer (Front-end)
+
+디베이트 타이머의 Front-end 저장소입니다.  
+우리는 토론 진행을 효율적으로 돕는 서비스를 제공하는 것을 목표로 토론에 진행에 필요한 다양한 형식의 타이머를 제공해요.  
+전체 프로젝트 및 서비스 소개는 [조직 메인 페이지](https://github.com/debate-timer)에서 확인하세요.
+
+[서비스 바로가기](https://www.debate-timer.com)
+
+## 🛠️ 기술 스택
+
+| 항목          | 스택                           |
+| ------------- | ------------------------------ |
+| Core          | React, TypeScript              |
+| 빌드          | Vite                           |
+| 스타일링      | TailwindCSS v3                 |
+| 테스트        | Vitest, Storybook, MSW         |
+| 네트워킹      | Axios, TanStack Query          |
+| 린팅 / 포매팅 | ESLint, StyleLint, Prettier    |
+| CI / CD       | S3, CloudFront, Github Actions |
+| 분석          | GA4                            |
+
+---
+
+## 실행 방법
+
+```bash
+사전 준비
+Node.js: v20.x LTS
+패키지 매니저: npm
+
+# 의존성 설치
+npm install
+
+# 개발 서버 실행
+npm run dev
+
+# 테스트 실행
+npm run test
+
+# Storybook 실행
+npm run storybook
+
+# 빌드
+npm run build
+```
+
+---
+
+## 배포
+
+- AWS S3 + CloudFront를 사용하여 웹사이트 호스팅
+- GitHub Actions를 이용해 main 브랜치에 푸시 시 자동 배포
+
+---
+
+## 브랜치 전략
+
+- main: 배포용 안정화 브랜치
+- develop: 개발 중인 기능 통합 브랜치
+- feature/\*: 각 기능별 작업 브랜치
+
+---
+
+## 기여자
+
+### 현재 활동 중
+
+|                                                                                         **썬데이**                                                                                         |                                                                                          **치코**                                                                                           |                                                                                             **숀**                                                                                             |
+| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| <a href="https://github.com/useon" target="_blank"><img src="https://avatars.githubusercontent.com/u/74897720?v=4" width="150" height="150" style="border-radius: 50%;" alt="썬데이"/></a> | <a href="https://github.com/jaeml06" target="_blank"><img src="https://avatars.githubusercontent.com/u/107801932?v=4" width="150" height="150" style="border-radius: 50%;" alt="치코"/></a> | <a href="https://github.com/i-meant-to-be" target="_blank"><img src="https://avatars.githubusercontent.com/u/77564014?v=4" width="150" height="150" style="border-radius: 50%;" alt="숀"/></a> |
+
+### 휴식 중
+
+|                                                                                            **엘**                                                                                             |                                                                                          **케이티**                                                                                           |
+| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| <a href="https://github.com/eunwoo-levi" target="_blank"><img src="https://avatars.githubusercontent.com/u/162898956?v=4" width="150" height="150" style="border-radius: 50%;" alt="엘"/></a> | <a href="https://github.com/katie424" target="_blank"><img src="https://avatars.githubusercontent.com/u/80771814?v=4" width="150" height="150" style="border-radius: 50%;" alt="케이티"/></a> |
+
+---
+
+## 추가 링크
+
+- Backend Repository: <https://github.com/debate-timer/debate-timer-be>
+- Debate Timer Organization: <https://github.com/debate-timer>
diff --git a/notion_sync.py b/notion_sync.py
new file mode 100644
index 00000000..c42e4247
--- /dev/null
+++ b/notion_sync.py
@@ -0,0 +1,230 @@
+import os
+import json
+import re
+import datetime
+import requests
+import pytz
+
+# Import envs
+NOTION_TOKEN = os.getenv("NOTION_TOKEN")
+NOTION_DATABASE_ID = os.getenv("NOTION_DATABASE_ID")
+NOTION_USER_UUID_MAP_STR = os.getenv("NOTION_USER_UUID_MAP")
+NOTION_API_URL = "https://api.notion.com/v1"
+
+# Parse GitHub ID-Notion UUID map
+if NOTION_USER_UUID_MAP_STR:
+    NOTION_USER_UUID_MAP = json.loads(NOTION_USER_UUID_MAP_STR)
+else:
+    print("NOTION_USER_UUID_MAP secret not found or empty.")
+    NOTION_USER_UUID_MAP = {}
+
+# Set header for HTTP request
+HEADERS = {
+    "Authorization": f"Bearer {NOTION_TOKEN}",
+    "Notion-Version": "2022-06-28",
+    "Content-Type": "application/json",
+}
+
+# Load GitHub event payload
+def get_github_event_payload():
+    event_path = os.getenv("GITHUB_EVENT_PATH")
+    if not event_path:
+        print("GITHUB_EVENT_PATH is not valid.")
+        return None
+    try:
+        with open(event_path, "r") as f:
+            return json.load(f)
+    except (FileNotFoundError, json.JSONDecodeError) as e:
+        print(f"Failed to read event payload: {e}")
+        return None
+
+# Find Notion DB item by GitHub issue id
+def find_notion_page_by_github_id(github_id):
+    query_url = f"{NOTION_API_URL}/databases/{NOTION_DATABASE_ID}/query"
+    payload = {
+        "filter": {
+            "property": "ID",
+            "number": {
+                "equals": github_id
+            }
+        }
+    }
+    response = requests.post(query_url, headers=HEADERS, json=payload)
+    response.raise_for_status()
+    results = response.json().get("results")
+    return results[0] if results else None
+
+# Create new Notion DB item
+def create_notion_page(title, status, github_assignee_id, github_url, github_id):
+    create_url = f"{NOTION_API_URL}/pages"
+
+    # Parse Notion user id
+    notion_user_id = NOTION_USER_UUID_MAP.get(github_assignee_id, "") if github_assignee_id else ""
+
+    # Parse current time (KST)
+    korea_timezone = pytz.timezone('Asia/Seoul')
+    current_datetime = datetime.datetime.now(korea_timezone)
+    current_datetime_str = current_datetime.isoformat()
+
+    data = {
+        "parent": {"database_id": NOTION_DATABASE_ID},
+        "properties": {
+            "이름": {
+                "title": [
+                    {
+                        "text": {
+                            "content": title
+                        }
+                    }
+                ]
+            },
+            "URL": {
+                "url": github_url
+            },
+            "상태": {
+                "select": {
+                    "name": status
+                }
+            },
+            "ID": {
+                "number": github_id
+            },
+            "생성 날짜": {
+                "date": {
+                    "start": current_datetime_str
+                }
+            }
+        }
+    }
+    if (notion_user_id):
+        data["properties"]["작업자"] = {
+                "people": [
+                    {
+                        "id": notion_user_id
+                    }
+                ]
+            }
+
+    response = requests.post(create_url, headers=HEADERS, json=data)
+    response.raise_for_status()
+    print(f"Notion item created / Title: '{title}', Status: '{status}'")
+    return response.json()
+
+# Patch Notion DB item
+def update_notion_page_status(page_id, status):
+    update_url = f"{NOTION_API_URL}/pages/{page_id}"
+    data = {
+        "properties": {
+            "상태": {
+                "select": {
+                    "name": status
+                }
+            }
+        }
+    }
+    response = requests.patch(update_url, headers=HEADERS, json=data)
+    response.raise_for_status()
+    print(f"Updated status of Notion page '{page_id}' as '{status}'")
+    return response.json()
+
+# Handle issue-related event
+def handle_issue_event(payload):
+    issue = payload.get("issue")
+    if not issue:
+        print("Issue data is not in payload.")
+        return
+
+    action = payload.get("action")
+    issue_title = issue.get("title")
+    issue_url = issue.get("html_url")
+    issue_number = issue.get("number")
+    issue_assignees = issue.get("assignees", [])
+    issue_assignee_id = issue_assignees[0].get("id") if issue_assignees else None
+
+    if action == "opened":
+        print(f"Issue opened: #{issue_number} - {issue_title}")
+        # Check duplication
+        notion_page = find_notion_page_by_github_id(issue_number)
+        if not notion_page:
+            create_notion_page(issue_title, "열림", issue_assignee_id, issue_url, issue_number)
+        else:
+            print(f"Issue #{issue_number} is already in Notion DB. This task will be skipped.")
+    else:
+        print(f"Not supported action: {action}")
+
+# Handle PR event
+def handle_pull_request_event(payload):
+    pr = payload.get("pull_request")
+    if not pr:
+        print("PR data is not in payload.")
+        return
+
+    action = payload.get("action")
+    pr_title = pr.get("title")
+    pr_number = pr.get("number")
+    pr_url = pr.get("html_url")
+    pr_assignees = pr.get("assignees", [])
+    pr_assignee_id = pr_assignees[0].get("id") if pr_assignees else None
+
+    # Find all related issue ID
+    body = pr.get("body", "")
+    issue_ids = re.findall(r"(?:close|closes|closed|fix|fixes|fixed)\s+#(\d+)", body, re.IGNORECASE)
+    issue_ids = [int(num) for num in issue_ids]
+
+    # If no specified issue, create Notion DB item with PR id 
+    if not issue_ids:
+        print(f"Cannot find related issue numbers in PR #{pr_number}. Add PR id itself on the list.")
+        issue_ids = [pr_number]
+
+    for related_issue_number in issue_ids:
+        notion_page = find_notion_page_by_github_id(related_issue_number)
+
+        if not notion_page:
+            # There is no related issue on Notion or have to add PR itself 
+            if related_issue_number == pr_number: # Register PR itself
+                print(f"Add PR #{pr_number} on the Notion DB.")
+                create_notion_page(f"PR: {pr_title}", "병합 요청됨", pr_assignee_id, pr_url, pr_number)
+            else:
+                print(f"Issue #{related_issue_number} is not in Notion DB. Create new one.")
+                create_notion_page(f"이슈 #{related_issue_number} (PR 연동)", "병합 요청됨", pr_assignee_id, pr_url, related_issue_number)
+            continue
+
+        page_id = notion_page["id"]
+
+        if action == "opened" or action == "reopened":
+            print(f"PR opened/reopened: #{pr_number} - {pr_title}. Change status of related issue #{related_issue_number}.")
+            update_notion_page_status(page_id, "병합 요청됨")
+        elif action == "closed":
+            if pr.get("merged"):
+                print(f"PR merged: #{pr_number} - {pr_title}. Change status of related issue #{related_issue_number}.")
+                update_notion_page_status(page_id, "병합됨")
+            else:
+                print(f"PR closed (not merged): #{pr_number} - {pr_title}. Change status of related issue #{related_issue_number}.")
+                update_notion_page_status(page_id, "닫힘")
+        else:
+            print(f"Not supported PR action: {action}")
+
+if __name__ == "__main__":
+    event_payload = get_github_event_payload()
+
+    if not event_payload:
+        print("Cannot read event payload. Terminate.")
+    else:
+        event_name = os.getenv("GITHUB_EVENT_NAME")
+        print(f"GitHub Event Name: {event_name}")
+
+        try:
+            if event_name == "issues":
+                handle_issue_event(event_payload)
+            elif event_name == "pull_request" or event_name == "pull_request_target":
+                handle_pull_request_event(event_payload)
+            else:
+                print(f"Not supported GitHub event: {event_name}")
+        except requests.exceptions.RequestException as e:
+            print(f"Notion API request error: {e}")
+            if e.response:
+                print(f"Failure response: {e.response.text}")
+            exit(1)
+        except Exception as e:
+            print(f"Unpredicted error occured: {e}")
+            exit(1)
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 5ab570cb..1bbc07d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,8 @@
         "@tanstack/eslint-plugin-query": "^5.62.9",
         "@tanstack/react-query": "^5.62.12",
         "axios": "^1.7.9",
+        "clsx": "^2.1.1",
+        "framer-motion": "^12.23.11",
         "pako": "^2.1.0",
         "qrcode.react": "^4.2.0",
         "react": "^18.3.1",
@@ -1027,12 +1029,12 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.1.tgz",
-      "integrity": "sha512-fo6Mtm5mWyKjA/Chy1BYTdn5mGJoDNjC7C64ug20ADsRDGrA85bN3uK3MaKbeRkRuuIEAR5N33Jr1pbm411/PA==",
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
+      "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
       "license": "Apache-2.0",
       "dependencies": {
-        "@eslint/object-schema": "^2.1.5",
+        "@eslint/object-schema": "^2.1.6",
         "debug": "^4.3.1",
         "minimatch": "^3.1.2"
       },
@@ -1040,10 +1042,19 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.0.tgz",
+      "integrity": "sha512-ViuymvFmcJi04qdZeDc2whTHryouGcDlaxPqarTD0ZE10ISpxGUVZGZDx4w01upyIynL3iu6IXH2bS1NhclQMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@eslint/core": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.9.1.tgz",
-      "integrity": "sha512-GuUdqkyyzQI5RMIWkHhvTWLCyLo1jNK3vzkSyaExH5kHPDHcuL2VOpHjmMY+y3+NC69qAKToBqldTBgYeLSr9Q==",
+      "version": "0.15.1",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.1.tgz",
+      "integrity": "sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@types/json-schema": "^7.0.15"
@@ -1053,9 +1064,9 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.2.0.tgz",
-      "integrity": "sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
+      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
       "license": "MIT",
       "dependencies": {
         "ajv": "^6.12.4",
@@ -1088,29 +1099,33 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.17.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.17.0.tgz",
-      "integrity": "sha512-Sxc4hqcs1kTu0iID3kcZDW3JHq2a77HO9P8CP6YEA/FpH3Ll8UXE2r/86Rz9YJLKme39S9vU5OWNjC6Xl0Cr3w==",
+      "version": "9.31.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.31.0.tgz",
+      "integrity": "sha512-LOm5OVt7D4qiKCqoiPbA7LWmI+tbw1VbTUowBcUMgQSuM6poJufkFkYDcQpo5KfgD39TnNySV26QjOh7VFpSyw==",
       "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
       }
     },
     "node_modules/@eslint/object-schema": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.5.tgz",
-      "integrity": "sha512-o0bhxnL89h5Bae5T318nFoFzGy+YE5i/gGkoPAgkmTVdRKTiv3p8JHevPiPaMwoloKfEiiaHlawCqaZMqRm+XQ==",
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
+      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
       "license": "Apache-2.0",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.4.tgz",
-      "integrity": "sha512-zSkKow6H5Kdm0ZUQUB2kV5JIXqoG0+uH5YADhaEHswm664N9Db8dXSi0nMJpacpMf+MyyglF1vnZohpEg5yUtg==",
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.4.tgz",
+      "integrity": "sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==",
       "license": "Apache-2.0",
       "dependencies": {
+        "@eslint/core": "^0.15.1",
         "levn": "^0.4.1"
       },
       "engines": {
@@ -1166,9 +1181,9 @@
       }
     },
     "node_modules/@humanwhocodes/retry": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.1.tgz",
-      "integrity": "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==",
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=18.18"
@@ -2623,9 +2638,9 @@
       }
     },
     "node_modules/@tanstack/eslint-plugin-query/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
@@ -3213,9 +3228,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3443,9 +3458,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
-      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -3924,9 +3939,9 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -4016,7 +4031,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz",
       "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
@@ -4286,6 +4300,15 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4700,7 +4723,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
       "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
@@ -4831,7 +4853,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
       "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -4841,7 +4862,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -4886,7 +4906,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
       "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
@@ -4896,15 +4915,15 @@
       }
     },
     "node_modules/es-set-tostringtag": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
-      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
-      "dev": true,
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
       "license": "MIT",
       "dependencies": {
-        "get-intrinsic": "^1.2.4",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
         "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.1"
+        "hasown": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5014,21 +5033,22 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.17.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.17.0.tgz",
-      "integrity": "sha512-evtlNcpJg+cZLcnVKwsai8fExnqjGPicK7gnUtlNuzu+Fv9bI0aLpND5T44VLQtoMEnI57LoXO9XAkIXwohKrA==",
+      "version": "9.31.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.31.0.tgz",
+      "integrity": "sha512-QldCVh/ztyKJJZLr4jXNUByx3gR+TDYZCRXEktiZoUR3PGy4qCmSbkxcIle8GEwGpb5JBZazlaJ/CxLidXdEbQ==",
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.19.0",
-        "@eslint/core": "^0.9.0",
-        "@eslint/eslintrc": "^3.2.0",
-        "@eslint/js": "9.17.0",
-        "@eslint/plugin-kit": "^0.2.3",
+        "@eslint/config-array": "^0.21.0",
+        "@eslint/config-helpers": "^0.3.0",
+        "@eslint/core": "^0.15.0",
+        "@eslint/eslintrc": "^3.3.1",
+        "@eslint/js": "9.31.0",
+        "@eslint/plugin-kit": "^0.3.1",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
-        "@humanwhocodes/retry": "^0.4.1",
+        "@humanwhocodes/retry": "^0.4.2",
         "@types/estree": "^1.0.6",
         "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
@@ -5036,9 +5056,9 @@
         "cross-spawn": "^7.0.6",
         "debug": "^4.3.2",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^8.2.0",
-        "eslint-visitor-keys": "^4.2.0",
-        "espree": "^10.3.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
         "esquery": "^1.5.0",
         "esutils": "^2.0.2",
         "fast-deep-equal": "^3.1.3",
@@ -5350,9 +5370,9 @@
       }
     },
     "node_modules/eslint-scope": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.2.0.tgz",
-      "integrity": "sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
       "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -5366,9 +5386,9 @@
       }
     },
     "node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
       "license": "Apache-2.0",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -5378,14 +5398,14 @@
       }
     },
     "node_modules/espree": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
-      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
       "license": "BSD-2-Clause",
       "dependencies": {
-        "acorn": "^8.14.0",
+        "acorn": "^8.15.0",
         "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^4.2.0"
+        "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -5680,13 +5700,15 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
-      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
         "mime-types": "^2.1.12"
       },
       "engines": {
@@ -5707,6 +5729,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.11",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.11.tgz",
+      "integrity": "sha512-VzNi+exyI3bn7Pzvz1Fjap1VO9gQu8mxrsSsNamMidsZ8AA8W2kQsR+YQOciEUbMtkKAWIbPHPttfn5e9jqqJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.9",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -5726,7 +5775,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -5786,7 +5834,6 @@
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.6.tgz",
       "integrity": "sha512-qxsEs+9A+u85HhllWJJFicJfPDhRmjzoYdl64aMWW9yRIJmSyxdn8IEkuIM530/7T+lv0TIHd8L6Q/ra0tEoeA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "call-bind-apply-helpers": "^1.0.1",
@@ -5859,9 +5906,9 @@
       }
     },
     "node_modules/glob/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5987,7 +6034,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
       "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -6072,7 +6118,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
       "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -6085,7 +6130,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.3"
@@ -6101,7 +6145,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -7311,7 +7354,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
       "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -7443,6 +7485,21 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.9",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.9.tgz",
+      "integrity": "sha512-6Sv++iWS8XMFCgU1qwKj9l4xuC47Hp4+2jvPfyTXkqDg2tTzSgX6nWKD4kNFXk0k7llO59LZTPuJigza4A2K1A==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -10202,7 +10259,6 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true,
       "license": "0BSD"
     },
     "node_modules/tween-functions": {
diff --git a/package.json b/package.json
index 8837a61d..e8c35368 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,8 @@
     "@tanstack/eslint-plugin-query": "^5.62.9",
     "@tanstack/react-query": "^5.62.12",
     "axios": "^1.7.9",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.23.11",
     "pako": "^2.1.0",
     "qrcode.react": "^4.2.0",
     "react": "^18.3.1",
diff --git a/public/sounds/bell-1.mp3 b/public/sounds/bell-1.mp3
new file mode 100644
index 00000000..262c01b6
Binary files /dev/null and b/public/sounds/bell-1.mp3 differ
diff --git a/public/sounds/bell-2.mp3 b/public/sounds/bell-2.mp3
new file mode 100644
index 00000000..b6dfffa8
Binary files /dev/null and b/public/sounds/bell-2.mp3 differ
diff --git a/public/sounds/bell-3.mp3 b/public/sounds/bell-3.mp3
new file mode 100644
index 00000000..33a83964
Binary files /dev/null and b/public/sounds/bell-3.mp3 differ
diff --git a/public/sounds/bell-finish.mp3 b/public/sounds/bell-finish.mp3
deleted file mode 100644
index a679421c..00000000
Binary files a/public/sounds/bell-finish.mp3 and /dev/null differ
diff --git a/public/sounds/bell-warning.mp3 b/public/sounds/bell-warning.mp3
deleted file mode 100644
index 96c7d3bd..00000000
Binary files a/public/sounds/bell-warning.mp3 and /dev/null differ
diff --git a/public/sounds/cointoss-result.mp3 b/public/sounds/cointoss-result.mp3
new file mode 100644
index 00000000..4a3fa57d
Binary files /dev/null and b/public/sounds/cointoss-result.mp3 differ
diff --git a/public/sounds/cointoss.mp3 b/public/sounds/cointoss.mp3
new file mode 100644
index 00000000..dd6fb18f
Binary files /dev/null and b/public/sounds/cointoss.mp3 differ
diff --git a/setup.ts b/setup.ts
index 81e08389..ce75593c 100644
--- a/setup.ts
+++ b/setup.ts
@@ -15,3 +15,20 @@ afterEach(() => server.resetHandlers());
 
 // msw 서버 종료
 afterAll(() => server.close());
+
+// vitest.setup.ts 또는 setupTests.ts
+// ResizeObserver를 전역적으로 모킹합니다.
+global.ResizeObserver = class ResizeObserver {
+  observe() {
+    // do nothing
+  }
+  unobserve() {
+    // do nothing
+  }
+  disconnect() {
+    // do nothing
+  }
+};
+
+// 만약 window 객체에 직접 할당해야 한다면 (예: 일부 라이브러리가 window.ResizeObserver를 직접 참조하는 경우)
+// window.ResizeObserver = global.ResizeObserver;
diff --git a/src/apis/apis/debateTable.ts b/src/apis/apis/debateTable.ts
index dd038843..4a7ec83e 100644
--- a/src/apis/apis/debateTable.ts
+++ b/src/apis/apis/debateTable.ts
@@ -56,8 +56,6 @@ export async function postDebateTableData({
         agenda: info.agenda,
         prosTeamName: info.prosTeamName,
         consTeamName: info.consTeamName,
-        warningBell: info.warningBell,
-        finishBell: info.finishBell,
       },
       table,
     },
@@ -82,8 +80,6 @@ export async function putDebateTableData({
         agenda: info.agenda,
         prosTeamName: info.prosTeamName,
         consTeamName: info.consTeamName,
-        warningBell: info.warningBell,
-        finishBell: info.finishBell,
       },
       table,
     },
diff --git a/src/apis/axiosInstance.ts b/src/apis/axiosInstance.ts
index 6723086d..89e9bede 100644
--- a/src/apis/axiosInstance.ts
+++ b/src/apis/axiosInstance.ts
@@ -1,28 +1,38 @@
 import axios from 'axios';
-import { getAccessToken, setAccessToken } from '../util/accessToken';
+import {
+  getAccessToken,
+  removeAccessToken,
+  setAccessToken,
+} from '../util/accessToken';
 
-axios.defaults.withCredentials = true;
+// Get current mode (DEV, PROD or TEST)
+const currentMode = import.meta.env.MODE;
+
+// Axios instance
 export const axiosInstance = axios.create({
   baseURL:
-    import.meta.env.MODE !== 'production'
-      ? undefined
-      : import.meta.env.VITE_API_BASE_URL,
-  timeout: 10000,
+    currentMode === 'test' ? undefined : import.meta.env.VITE_API_BASE_URL,
+  timeout: 5000,
+  timeoutErrorMessage:
+    '시간 초과로 인해 요청을 처리하지 못했어요... 잠시 후 다시 시도해 주세요.',
   headers: {
     'Content-Type': 'application/json',
   },
   withCredentials: true,
 });
 
-// 요청 인터셉터: Access Token을 헤더에 붙여 전송
+// Request interceptor
 axiosInstance.interceptors.request.use((config) => {
   const accessToken = getAccessToken();
+
+  // Access token을 헤더에 붙여 전송
   if (accessToken && config.headers) {
     config.headers.Authorization = `${accessToken}`;
   }
   return config;
 });
 
+// Response interceptor
 axiosInstance.interceptors.response.use(
   (response) => response,
   async (error) => {
@@ -57,6 +67,7 @@ axiosInstance.interceptors.response.use(
         console.error('Refresh Token is invalid or expired', refreshError);
         // 재발급도 실패하면 -> 로그인 페이지 이동
         window.location.href = '/home';
+        removeAccessToken();
         return Promise.reject(refreshError);
       }
     }
diff --git a/src/apis/primitives.ts b/src/apis/primitives.ts
index f98b332e..8a3858b7 100644
--- a/src/apis/primitives.ts
+++ b/src/apis/primitives.ts
@@ -1,11 +1,23 @@
 import axios from 'axios';
-import { AxiosResponse, AxiosError } from 'axios';
-import { ErrorResponseType } from './responses/global';
+import { AxiosResponse } from 'axios';
 import axiosInstance from './axiosInstance';
 
 // HTTP request methods
 export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
 
+// Define APIError; It only represents error that is returned from API response.
+export class APIError extends Error {
+  public readonly status: number;
+  public readonly data: unknown;
+
+  constructor(message: string, status: number, data: unknown) {
+    super(message);
+    this.status = status;
+    this.data = data;
+    this.name = 'APIError';
+  }
+}
+
 // Low-level http request function
 export async function request<T>(
   method: HttpMethod,
@@ -20,22 +32,25 @@ export async function request<T>(
     const response: AxiosResponse<T> = await instance({
       method,
       url: endpoint,
-      data: data ? JSON.stringify(data) : null,
+      data,
       params,
     });
 
+    // If successful, return it
     return response;
   } catch (error) {
-    // Handle error
     if (axios.isAxiosError(error)) {
-      const axiosError = error as AxiosError<ErrorResponseType>;
-      console.error('Error message:', axiosError.message);
-      if (axiosError.response) {
-        console.error('Error response data:', axiosError.response.data.message);
-      }
-    } else {
-      console.error('Unexpected error:', error);
+      // If error is raised during API request,
+      // pass it as an APIError
+      const apiError = new APIError(
+        error.response?.data || error.message,
+        error.response?.status || 500,
+        error.response?.data,
+      );
+      throw apiError;
     }
+
+    // Else, just throw it
     throw error;
   }
 }
diff --git a/src/assets/debateEnd/clap.png b/src/assets/debateEnd/clap.png
new file mode 100644
index 00000000..c865303a
Binary files /dev/null and b/src/assets/debateEnd/clap.png differ
diff --git a/src/assets/debateEnd/feedback_timer.png b/src/assets/debateEnd/feedback_timer.png
new file mode 100644
index 00000000..1e7444ad
Binary files /dev/null and b/src/assets/debateEnd/feedback_timer.png differ
diff --git a/src/assets/debateEnd/vote_stamp.png b/src/assets/debateEnd/vote_stamp.png
new file mode 100644
index 00000000..a9d80333
Binary files /dev/null and b/src/assets/debateEnd/vote_stamp.png differ
diff --git a/src/assets/landing/bell_setting.png b/src/assets/landing/bell_setting.png
new file mode 100644
index 00000000..321b9fd0
Binary files /dev/null and b/src/assets/landing/bell_setting.png differ
diff --git a/src/assets/landing/bottom_arrow.png b/src/assets/landing/bottom_arrow.png
new file mode 100644
index 00000000..f950956d
Binary files /dev/null and b/src/assets/landing/bottom_arrow.png differ
diff --git a/src/assets/landing/debate_info_setting.png b/src/assets/landing/debate_info_setting.png
new file mode 100644
index 00000000..5ba04119
Binary files /dev/null and b/src/assets/landing/debate_info_setting.png differ
diff --git a/src/assets/landing/key_info.png b/src/assets/landing/key_info.png
new file mode 100644
index 00000000..eeffdd1f
Binary files /dev/null and b/src/assets/landing/key_info.png differ
diff --git a/src/assets/landing/table_list.png b/src/assets/landing/table_list.png
new file mode 100644
index 00000000..c1bb840f
Binary files /dev/null and b/src/assets/landing/table_list.png differ
diff --git a/src/assets/landing/timebox_add_button.png b/src/assets/landing/timebox_add_button.png
new file mode 100644
index 00000000..67601767
Binary files /dev/null and b/src/assets/landing/timebox_add_button.png differ
diff --git a/src/assets/landing/timebox_step.png b/src/assets/landing/timebox_step.png
new file mode 100644
index 00000000..2a760c1b
Binary files /dev/null and b/src/assets/landing/timebox_step.png differ
diff --git a/src/assets/landing/timebox_step_button.png b/src/assets/landing/timebox_step_button.png
new file mode 100644
index 00000000..ff89ee86
Binary files /dev/null and b/src/assets/landing/timebox_step_button.png differ
diff --git a/src/assets/landing/timeout_button.png b/src/assets/landing/timeout_button.png
new file mode 100644
index 00000000..c26dabd0
Binary files /dev/null and b/src/assets/landing/timeout_button.png differ
diff --git a/src/assets/landing/timer.png b/src/assets/landing/timer.png
new file mode 100644
index 00000000..f819c75d
Binary files /dev/null and b/src/assets/landing/timer.png differ
diff --git a/src/assets/landing/timer_operation_time.png b/src/assets/landing/timer_operation_time.png
new file mode 100644
index 00000000..4e629433
Binary files /dev/null and b/src/assets/landing/timer_operation_time.png differ
diff --git a/src/assets/landing/timer_timebased.png b/src/assets/landing/timer_timebased.png
new file mode 100644
index 00000000..90ff8199
Binary files /dev/null and b/src/assets/landing/timer_timebased.png differ
diff --git a/src/assets/landing/two_timer.png b/src/assets/landing/two_timer.png
new file mode 100644
index 00000000..4ab18a66
Binary files /dev/null and b/src/assets/landing/two_timer.png differ
diff --git a/src/assets/teamSelection/coinback.png b/src/assets/teamSelection/coinback.png
new file mode 100644
index 00000000..941bf0fa
Binary files /dev/null and b/src/assets/teamSelection/coinback.png differ
diff --git a/src/assets/teamSelection/coinfront.png b/src/assets/teamSelection/coinfront.png
new file mode 100644
index 00000000..76e85331
Binary files /dev/null and b/src/assets/teamSelection/coinfront.png differ
diff --git a/src/assets/teamSelection/coins.png b/src/assets/teamSelection/coins.png
new file mode 100644
index 00000000..a20eef6a
Binary files /dev/null and b/src/assets/teamSelection/coins.png differ
diff --git a/src/assets/teamSelection/cointoss.png b/src/assets/teamSelection/cointoss.png
new file mode 100644
index 00000000..bb98601f
Binary files /dev/null and b/src/assets/teamSelection/cointoss.png differ
diff --git a/src/assets/template_logo/government.png b/src/assets/template_logo/government.png
new file mode 100644
index 00000000..27c93db6
Binary files /dev/null and b/src/assets/template_logo/government.png differ
diff --git a/src/assets/template_logo/han_alm.png b/src/assets/template_logo/han_alm.png
new file mode 100644
index 00000000..1167f15d
Binary files /dev/null and b/src/assets/template_logo/han_alm.png differ
diff --git a/src/assets/template_logo/hantomak.png b/src/assets/template_logo/hantomak.png
new file mode 100644
index 00000000..9e4faee5
Binary files /dev/null and b/src/assets/template_logo/hantomak.png differ
diff --git a/src/assets/template_logo/igam.png b/src/assets/template_logo/igam.png
new file mode 100644
index 00000000..65f8a591
Binary files /dev/null and b/src/assets/template_logo/igam.png differ
diff --git a/src/assets/template_logo/jungseonto.png b/src/assets/template_logo/jungseonto.png
new file mode 100644
index 00000000..a16e8e8a
Binary files /dev/null and b/src/assets/template_logo/jungseonto.png differ
diff --git a/src/assets/template_logo/kogito.png b/src/assets/template_logo/kogito.png
new file mode 100644
index 00000000..36292c6c
Binary files /dev/null and b/src/assets/template_logo/kogito.png differ
diff --git a/src/assets/template_logo/kondae_time.png b/src/assets/template_logo/kondae_time.png
new file mode 100644
index 00000000..ed4dcee0
Binary files /dev/null and b/src/assets/template_logo/kondae_time.png differ
diff --git a/src/assets/template_logo/nogotte.png b/src/assets/template_logo/nogotte.png
new file mode 100644
index 00000000..56ac3066
Binary files /dev/null and b/src/assets/template_logo/nogotte.png differ
diff --git a/src/assets/template_logo/osansi.png b/src/assets/template_logo/osansi.png
new file mode 100644
index 00000000..5eba3fbb
Binary files /dev/null and b/src/assets/template_logo/osansi.png differ
diff --git a/src/assets/template_logo/seobangjeongto.png b/src/assets/template_logo/seobangjeongto.png
new file mode 100644
index 00000000..95c4daed
Binary files /dev/null and b/src/assets/template_logo/seobangjeongto.png differ
diff --git a/src/assets/template_logo/todallae.png b/src/assets/template_logo/todallae.png
new file mode 100644
index 00000000..45250602
Binary files /dev/null and b/src/assets/template_logo/todallae.png differ
diff --git a/src/assets/template_logo/visual.png b/src/assets/template_logo/visual.png
new file mode 100644
index 00000000..1a74153f
Binary files /dev/null and b/src/assets/template_logo/visual.png differ
diff --git a/src/assets/timer/normal_timer.png b/src/assets/timer/normal_timer.png
deleted file mode 100644
index 9f526350..00000000
Binary files a/src/assets/timer/normal_timer.png and /dev/null differ
diff --git a/src/assets/timer/normal_timer_cons.jpg b/src/assets/timer/normal_timer_cons.jpg
new file mode 100644
index 00000000..73901200
Binary files /dev/null and b/src/assets/timer/normal_timer_cons.jpg differ
diff --git a/src/assets/timer/normal_timer_neutral.jpg b/src/assets/timer/normal_timer_neutral.jpg
new file mode 100644
index 00000000..bc86660f
Binary files /dev/null and b/src/assets/timer/normal_timer_neutral.jpg differ
diff --git a/src/assets/timer/normal_timer_pros.jpg b/src/assets/timer/normal_timer_pros.jpg
new file mode 100644
index 00000000..86c8f2af
Binary files /dev/null and b/src/assets/timer/normal_timer_pros.jpg differ
diff --git a/src/assets/timer/time_based_timer.jpg b/src/assets/timer/time_based_timer.jpg
new file mode 100644
index 00000000..099cc235
Binary files /dev/null and b/src/assets/timer/time_based_timer.jpg differ
diff --git a/src/assets/timer/time_based_timer_only_total.jpg b/src/assets/timer/time_based_timer_only_total.jpg
new file mode 100644
index 00000000..ad1d246d
Binary files /dev/null and b/src/assets/timer/time_based_timer_only_total.jpg differ
diff --git a/src/assets/timer/timebased_perSpeaking_timer.png b/src/assets/timer/timebased_perSpeaking_timer.png
deleted file mode 100644
index 7225a971..00000000
Binary files a/src/assets/timer/timebased_perSpeaking_timer.png and /dev/null differ
diff --git a/src/assets/timer/timebased_timer.png b/src/assets/timer/timebased_timer.png
deleted file mode 100644
index d8072261..00000000
Binary files a/src/assets/timer/timebased_timer.png and /dev/null differ
diff --git a/src/components/ClearableInput/ClearableInput.stories.tsx b/src/components/ClearableInput/ClearableInput.stories.tsx
index 6d9d6db2..1daa9ea1 100644
--- a/src/components/ClearableInput/ClearableInput.stories.tsx
+++ b/src/components/ClearableInput/ClearableInput.stories.tsx
@@ -19,3 +19,12 @@ export const Default: Story = {
     placeholder: 'Enter text...',
   },
 };
+
+export const Disabled: Story = {
+  args: {
+    value: 'Hello Storybook',
+    onClear: () => alert('Clear clicked'),
+    placeholder: 'Enter text...',
+    disabled: true,
+  },
+};
diff --git a/src/components/ClearableInput/ClearableInput.tsx b/src/components/ClearableInput/ClearableInput.tsx
index 79954730..b7ed6244 100644
--- a/src/components/ClearableInput/ClearableInput.tsx
+++ b/src/components/ClearableInput/ClearableInput.tsx
@@ -1,24 +1,29 @@
+import clsx from 'clsx';
 import { InputHTMLAttributes } from 'react';
 import { IoMdCloseCircle } from 'react-icons/io';
 
 interface ClearableInputProps extends InputHTMLAttributes<HTMLInputElement> {
   value: string;
-  onClear: () => void;
+  disabled?: boolean;
+  onClear?: () => void;
 }
 
 export default function ClearableInput({
   value,
   onClear,
+  disabled = false,
+  className,
   ...rest
 }: ClearableInputProps) {
   return (
-    <div className="relative w-full">
+    <div className={clsx('relative w-full', className)}>
       <input
         {...rest}
         value={value}
-        className="w-full rounded-md border border-neutral-300 p-3 pr-10 text-base text-black placeholder-neutral-400 focus:outline-none"
+        disabled={disabled}
+        className="text-body h-[48px] w-full appearance-none rounded-[4px] border border-default-border p-[12px] text-default-black placeholder-default-border focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
       />
-      {value && (
+      {value && !disabled && onClear && (
         <button
           type="button"
           onClick={onClear}
diff --git a/src/components/DesignSystemSample/ColorItem.tsx b/src/components/DesignSystemSample/ColorItem.tsx
new file mode 100644
index 00000000..e03d885e
--- /dev/null
+++ b/src/components/DesignSystemSample/ColorItem.tsx
@@ -0,0 +1,18 @@
+interface ColorItemProps {
+  className: string;
+  title: string;
+}
+
+export default function ColorItem({ className, title }: ColorItemProps) {
+  return (
+    <div className="flex flex-row items-center justify-center space-x-4">
+      <div
+        className={`
+            size-10 rounded-full shadow-xl
+            ${className}
+        `}
+      ></div>
+      <p className="text-detail">{title}</p>
+    </div>
+  );
+}
diff --git a/src/components/DesignSystemSample/DesignSystemSample.stories.tsx b/src/components/DesignSystemSample/DesignSystemSample.stories.tsx
new file mode 100644
index 00000000..b4308308
--- /dev/null
+++ b/src/components/DesignSystemSample/DesignSystemSample.stories.tsx
@@ -0,0 +1,72 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+interface ColorItemProps {
+  className: string;
+  title: string;
+}
+
+const ColorItem = ({ className, title }: ColorItemProps) => {
+  return (
+    <div className="flex flex-row items-center justify-center space-x-4">
+      <div
+        className={`
+            size-10 rounded-full shadow-xl
+            ${className}
+        `}
+      ></div>
+      <p className="text-detail">{title}</p>
+    </div>
+  );
+};
+
+const DesignSystemSample = () => (
+  <div className="flex w-fit flex-col space-y-4 p-4">
+    <section className="flex flex-col items-start space-y-4 p-4">
+      <h1 className="text-title rounded-xl bg-brand p-4">Typography</h1>
+
+      <p className="text-display">대제목</p>
+      <p className="text-title">제목</p>
+      <p className="text-subtitle">부제목</p>
+      <p className="text-detail">세부사항</p>
+      <p className="text-body">내용</p>
+    </section>
+
+    <section className="flex flex-col items-start space-y-4 p-4">
+      <h1 className="text-title rounded-xl bg-brand p-4">Colors</h1>
+      <ColorItem className={'bg-team-blue'} title="찬성" />
+      <ColorItem className={'bg-team-red '} title="반대" />
+      <ColorItem className={'bg-brand '} title="브랜드" />
+      <ColorItem className={'bg-brand-hover '} title="브랜드 (호버)" />
+      <ColorItem className={'bg-semantic-warning '} title="10초 경고" />
+      <ColorItem className={'bg-semantic-error '} title="오류" />
+      <ColorItem
+        className={'bg-default-disabled/hover '}
+        title="비활성화 또는 호버"
+      />
+      <ColorItem
+        className={'bg-default-neutral '}
+        title="작전 시간 (중립 타임박스)"
+      />
+      <ColorItem className={'bg-default-dim '} title="Dim" />
+      <ColorItem className={'bg-default-border '} title="테두리" />
+      <ColorItem className={'bg-default-timeout '} title="0초 경고" />
+      <ColorItem className={'bg-default-white '} title="기본 하양" />
+      <ColorItem className={'bg-default-black '} title="기본 검정" />
+    </section>
+  </div>
+);
+
+const meta: Meta<typeof DesignSystemSample> = {
+  title: 'Design System/DesignSystemSample',
+  component: DesignSystemSample,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DesignSystemSample>;
+
+export const Default: Story = {
+  args: {},
+  render: () => <DesignSystemSample />,
+};
diff --git a/src/components/DialogModal/DialogModal.tsx b/src/components/DialogModal/DialogModal.tsx
index f19f71ee..eecb3175 100644
--- a/src/components/DialogModal/DialogModal.tsx
+++ b/src/components/DialogModal/DialogModal.tsx
@@ -52,7 +52,7 @@ export default function DialogModal({
         {/** Right button */}
         <button
           data-testid="button-right"
-          className="w-1/2 py-4 hover:bg-brand-main"
+          className="w-1/2 py-4 hover:bg-brand"
           onClick={() => right.onClick()}
         >
           <p
diff --git a/src/components/DropdownMenu/DropdownMenu.stories.tsx b/src/components/DropdownMenu/DropdownMenu.stories.tsx
new file mode 100644
index 00000000..dbc2683f
--- /dev/null
+++ b/src/components/DropdownMenu/DropdownMenu.stories.tsx
@@ -0,0 +1,47 @@
+import { Meta, StoryObj } from '@storybook/react';
+import DropdownMenu, { DropdownMenuItem } from './DropdownMenu';
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: 'components/DropdownMenu',
+  component: DropdownMenu,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DropdownMenu>;
+
+const booleanOptions: DropdownMenuItem<boolean>[] = [
+  { value: true, label: '참' },
+  { value: false, label: '거짓' },
+];
+
+export const Default: Story = {
+  args: {
+    disabled: false,
+    onSelect: () => {},
+    options: booleanOptions,
+    placeholder: '선택',
+    selectedValue: true,
+  },
+};
+
+export const OnSelected: Story = {
+  args: {
+    disabled: false,
+    onSelect: () => {},
+    options: booleanOptions,
+    placeholder: '선택',
+    selectedValue: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    onSelect: () => {},
+    options: booleanOptions,
+    placeholder: '선택',
+    selectedValue: false,
+  },
+};
diff --git a/src/components/DropdownMenu/DropdownMenu.tsx b/src/components/DropdownMenu/DropdownMenu.tsx
new file mode 100644
index 00000000..827674e6
--- /dev/null
+++ b/src/components/DropdownMenu/DropdownMenu.tsx
@@ -0,0 +1,129 @@
+import { useState, useRef, useEffect } from 'react';
+import DTExpand from '../icons/Expand';
+import clsx from 'clsx';
+
+export interface DropdownMenuItem<T> {
+  value: T;
+  label: string;
+}
+
+interface DropdownMenuProps<T> {
+  options: DropdownMenuItem<T>[];
+  selectedValue: T;
+  onSelect: (value: T) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export default function DropdownMenu<T>({
+  options,
+  selectedValue,
+  onSelect,
+  placeholder = '선택',
+  disabled,
+  className = '',
+}: DropdownMenuProps<T>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const selectedOptionLabel =
+    options.find((option) => option.value === selectedValue)?.label ||
+    placeholder;
+
+  // 드롭다운 외부 클릭 시 닫히도록 처리
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const handleToggle = () => {
+    if (!disabled) {
+      setIsOpen((prev) => !prev);
+    }
+  };
+
+  const handleOptionClick = (value: T) => {
+    onSelect(value);
+    setIsOpen(false);
+  };
+
+  const buttonClasses = clsx(
+    'relative flex w-full items-center justify-between rounded-md border bg-default-white px-4 py-2 text-left transition-all duration-200 ease-in-out',
+    'focus:outline-none',
+    {
+      'border-default-disabled/hover text-default-disabled/hover cursor-not-allowed':
+        disabled,
+      'border-semantic-material ring-semantic-material/30 ring-4':
+        isOpen && !disabled,
+      'border-default-border text-default-black hover:bg-default-disabled/hover':
+        !disabled,
+    },
+  );
+
+  const menuClasses = clsx(
+    'absolute z-10 mt-1 w-full overflow-hidden rounded-lg bg-default-white shadow-lg transition-all duration-200 ease-out',
+    {
+      'max-h-60 opacity-100 transform scale-y-100 origin-top': isOpen,
+      'max-h-0 opacity-0 transform scale-y-95 origin-top pointer-events-none':
+        !isOpen,
+    },
+  );
+
+  const optionItemClasses = (optionValue: T) =>
+    clsx(
+      'cursor-pointer px-4 py-2 text-default-black transition-colors duration-150 ',
+      'hover:bg-default-disabled/hover',
+      {
+        'bg-semantic-material/30 font-bold': optionValue === selectedValue,
+      },
+    );
+
+  return (
+    <div className={clsx('relative', className)} ref={dropdownRef}>
+      <button
+        type="button"
+        className={buttonClasses}
+        onClick={handleToggle}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+        disabled={disabled}
+      >
+        <span className="truncate">{selectedOptionLabel}</span>
+        <DTExpand
+          className={clsx(
+            'ms-[16px] w-[12px] transition-transform duration-200',
+            {
+              'rotate-180': isOpen,
+            },
+          )}
+        />
+      </button>
+
+      <div className={menuClasses} role="listbox">
+        {options.map((option) => (
+          <div
+            key={`${option.value}`}
+            className={optionItemClasses(option.value)}
+            onClick={() => handleOptionClick(option.value)}
+            role="option"
+            aria-selected={option.value === selectedValue}
+          >
+            {option.label}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ErrorBoundary/ErrorBoundary.tsx b/src/components/ErrorBoundary/ErrorBoundary.tsx
index 584a95a0..84a8709d 100644
--- a/src/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -1,7 +1,5 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
 import ErrorPage from './ErrorPage';
-import { AxiosError } from 'axios';
-import { ErrorResponseType } from '../../apis/responses/global';
 
 interface ErrorBoundaryProps {
   children: ReactNode;
@@ -9,11 +7,11 @@ interface ErrorBoundaryProps {
 
 interface ErrorBoundaryState {
   hasError: boolean;
-  message: string;
+  error: Error;
   stack: string;
 }
 
-const defaultMessage = '오류 정보 없음';
+const defaultError = new Error('알 수 없는 오류');
 const defaultStack = '스택 정보 없음';
 
 class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
@@ -21,7 +19,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
     super(props);
     this.state = {
       hasError: false,
-      message: defaultMessage,
+      error: defaultError,
       stack: defaultStack,
     };
   }
@@ -29,14 +27,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   static getDerivedStateFromError(error: Error): ErrorBoundaryState {
     // Update state so the next render will show the fallback UI.
     const stack = error.stack === undefined ? defaultStack : error.stack;
-    let message: string;
-
-    if (error instanceof AxiosError && error.response) {
-      message = (error.response.data as ErrorResponseType).message;
-    } else {
-      message = error.message;
-    }
-    return { hasError: true, message: message, stack: stack };
+    return { hasError: true, error: error, stack: stack };
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
@@ -47,7 +38,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   resetError = () => {
     this.setState({
       hasError: false,
-      message: defaultMessage,
+      error: defaultError,
       stack: defaultStack,
     });
   };
@@ -56,7 +47,7 @@ class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
     if (this.state.hasError) {
       return (
         <ErrorPage
-          message={this.state.message}
+          error={this.state.error}
           stack={this.state.stack}
           onReset={this.resetError}
         />
diff --git a/src/components/ErrorBoundary/ErrorPage.stories.tsx b/src/components/ErrorBoundary/ErrorPage.stories.tsx
index 4a41dcbc..7ba36503 100644
--- a/src/components/ErrorBoundary/ErrorPage.stories.tsx
+++ b/src/components/ErrorBoundary/ErrorPage.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import ErrorPage from './ErrorPage';
+import { APIError } from '../../apis/primitives';
 
 const meta: Meta<typeof ErrorPage> = {
   title: 'Components/ErrorPage',
@@ -13,7 +14,14 @@ type Story = StoryObj<typeof ErrorPage>;
 
 export const Default: Story = {
   args: {
-    message: '샘플 오류 메시지',
+    error: new Error('샘플 오류 메시지'),
+    stack: '샘플 오류 스택',
+  },
+};
+
+export const OnAPIError: Story = {
+  args: {
+    error: new APIError('Internal Server Error', 500, null),
     stack: '샘플 오류 스택',
   },
 };
diff --git a/src/components/ErrorBoundary/ErrorPage.tsx b/src/components/ErrorBoundary/ErrorPage.tsx
index 7c9a160c..51c69ccc 100644
--- a/src/components/ErrorBoundary/ErrorPage.tsx
+++ b/src/components/ErrorBoundary/ErrorPage.tsx
@@ -1,19 +1,29 @@
 import { IoHome } from 'react-icons/io5';
 import DefaultLayout from '../../layout/defaultLayout/DefaultLayout';
 import { useNavigate } from 'react-router-dom';
+import { APIError } from '../../apis/primitives';
+import { ERROR_STATUS_TABLE } from '../../constants/errors';
 
 interface ErrorPageProps {
-  message: string;
+  error: Error;
   stack: string;
   onReset: () => void;
 }
 
-export default function ErrorPage({ message, stack, onReset }: ErrorPageProps) {
+export default function ErrorPage({ error, stack, onReset }: ErrorPageProps) {
   const navigate = useNavigate();
   const goToHome = () => {
     onReset();
-    navigate('/', { replace: true }); // 현재 라우트가 "/"여도 강제 이동
+    navigate('/home', { replace: true });
   };
+
+  // If error is from API request, print status code
+  // to let user know exact reason of error.
+  const title =
+    error instanceof APIError
+      ? ERROR_STATUS_TABLE[error.status] || `${error.status} 오류`
+      : '오류가 발생했어요...';
+
   return (
     <DefaultLayout>
       <DefaultLayout.Header>
@@ -26,12 +36,12 @@ export default function ErrorPage({ message, stack, onReset }: ErrorPageProps) {
         <div className="flex w-full flex-col items-start justify-start px-8 py-10">
           <div className="mb-20 flex flex-col font-bold">
             <h1 className="mb-5 text-[120px]">😭</h1>
-            <h1 className="md:text-5xl text-4xl">오류가 발생했어요...</h1>
+            <h1 className="text-4xl md:text-5xl">{title}</h1>
           </div>
 
           <div className="mb-10 flex flex-col space-y-2">
             <h1 className="text-xl font-bold">오류 내용</h1>
-            <p className="text-lg">{message}</p>
+            <p className="text-lg">{error.message}</p>
           </div>
 
           <div className="mb-20 flex flex-col space-y-2">
diff --git a/src/components/ErrorIndicator/ErrorIndicator.stories.tsx b/src/components/ErrorIndicator/ErrorIndicator.stories.tsx
new file mode 100644
index 00000000..12864b35
--- /dev/null
+++ b/src/components/ErrorIndicator/ErrorIndicator.stories.tsx
@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+import ErrorIndicator from './ErrorIndicator';
+
+const meta: Meta<typeof ErrorIndicator> = {
+  title: 'Components/ErrorIndicator',
+  component: ErrorIndicator,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ErrorIndicator>;
+
+export const Default: Story = {
+  args: {
+    children: '오류가 발생했어요.',
+  },
+};
+
+export const OnRetryButtonEnabled: Story = {
+  args: {
+    children: '오류가 발생했어요. 다시 시도하시겠어요?',
+    onClickRetry: () => {},
+  },
+};
diff --git a/src/components/ErrorIndicator/ErrorIndicator.tsx b/src/components/ErrorIndicator/ErrorIndicator.tsx
new file mode 100644
index 00000000..9f0b8b59
--- /dev/null
+++ b/src/components/ErrorIndicator/ErrorIndicator.tsx
@@ -0,0 +1,33 @@
+import { PropsWithChildren } from 'react';
+import { MdErrorOutline } from 'react-icons/md';
+
+interface ErrorIndicatorProps extends PropsWithChildren {
+  onClickRetry?: () => void;
+}
+
+export default function ErrorIndicator({
+  children = (
+    <>
+      데이터를 불러오지 못했어요.
+      <br />
+      다시 시도할까요?
+    </>
+  ),
+  onClickRetry,
+}: ErrorIndicatorProps) {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center space-y-4 p-16">
+      <MdErrorOutline className="size-32 text-red-500" />
+      <p className="break-keep text-center text-xl">{children}</p>
+
+      {onClickRetry && (
+        <button
+          onClick={() => onClickRetry()}
+          className="small-button enabled px-8 py-1"
+        >
+          다시 시도하기
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/FloatingActionButton/FloatingActionButton.stories.tsx b/src/components/FloatingActionButton/FloatingActionButton.stories.tsx
new file mode 100644
index 00000000..bf930192
--- /dev/null
+++ b/src/components/FloatingActionButton/FloatingActionButton.stories.tsx
@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react';
+import FloatingActionButton from './FloatingActionButton';
+import DTAdd from '../icons/Add';
+
+const meta: Meta<typeof FloatingActionButton> = {
+  title: 'Components/FloatingActionButton',
+  component: FloatingActionButton,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FloatingActionButton>;
+
+export const Enabled: Story = {
+  render: () => (
+    <FloatingActionButton
+      onClick={() => {}}
+      className="transform bg-brand duration-200 ease-in-out hover:bg-brand-hover"
+    >
+      <span className="text-subtitle flex flex-row items-center justify-center space-x-4 p-4 text-default-black">
+        <DTAdd />
+        <p>추가하기</p>
+      </span>
+    </FloatingActionButton>
+  ),
+};
diff --git a/src/components/FloatingActionButton/FloatingActionButton.tsx b/src/components/FloatingActionButton/FloatingActionButton.tsx
new file mode 100644
index 00000000..e2b4eaba
--- /dev/null
+++ b/src/components/FloatingActionButton/FloatingActionButton.tsx
@@ -0,0 +1,32 @@
+import { PropsWithChildren } from 'react';
+
+interface FloatingActionButtonProps extends PropsWithChildren {
+  onClick: () => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * Material 3의 Floating Action Button입니다.
+ * 개발 과정에서의 유연성을 위해 Padding을 명시하지는 않았으나,
+ * p-[16px]이 적정 값임을 알립니다.
+ */
+export default function FloatingActionButton({
+  onClick,
+  disabled = false,
+  className = '',
+  children,
+}: FloatingActionButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        flex rounded-[16px] shadow-xl transition-all duration-200 ease-in-out
+        ${className}
+      `}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/GoToHomeButton/GoToHomeButton.tsx b/src/components/GoToHomeButton/GoToHomeButton.tsx
new file mode 100644
index 00000000..822ec6a3
--- /dev/null
+++ b/src/components/GoToHomeButton/GoToHomeButton.tsx
@@ -0,0 +1,20 @@
+import { useNavigate } from 'react-router-dom';
+
+export default function GoToHomeButton() {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate('/');
+  };
+
+  return (
+    <button
+      type="button"
+      aria-label="홈으로 돌아가기"
+      onClick={handleClick}
+      className="flex h-[72px] w-[492px] items-center justify-center gap-[12px] rounded-full border-[2px] border-default-disabled/hover bg-default-white px-[16px] py-[11px] font-semibold text-default-black opacity-80 transition-colors duration-200 hover:bg-default-disabled/hover"
+    >
+      <span>홈으로 돌아가기 →</span>
+    </button>
+  );
+}
diff --git a/src/components/HeaderTableInfo/HeaderTableInfo.tsx b/src/components/HeaderTableInfo/HeaderTableInfo.tsx
index e69dcf95..fcd70cae 100644
--- a/src/components/HeaderTableInfo/HeaderTableInfo.tsx
+++ b/src/components/HeaderTableInfo/HeaderTableInfo.tsx
@@ -1,15 +1,27 @@
+import Skeleton from '../Skeleton/Skeleton';
+
 interface HeaderTitleProps {
   name?: string;
+  skeletonEnabled?: boolean;
 }
 
 export default function HeaderTableInfo(props: HeaderTitleProps) {
-  const { name } = props;
+  const { name, skeletonEnabled: isLoading = false } = props;
   const displayName = !name?.trim() ? '테이블 이름 없음' : name.trim();
 
   return (
-    <div className="flex flex-col space-y-[4px]">
-      <h1 className="text-sm">테이블 이름</h1>
-      <h1 className="text-2xl font-bold">{displayName}</h1>
-    </div>
+    <>
+      {isLoading && (
+        <div className="flex flex-col space-y-[4px]">
+          <Skeleton width={80} height={16} />
+          <Skeleton width={240} height={24} />
+        </div>
+      )}
+      {!isLoading && (
+        <div className="flex flex-col space-y-[4px]">
+          <h1 className="text-2xl">{displayName}</h1>
+        </div>
+      )}
+    </>
   );
 }
diff --git a/src/components/HeaderTitle/HeaderTitle.tsx b/src/components/HeaderTitle/HeaderTitle.tsx
index 5cebfc02..d3bebe59 100644
--- a/src/components/HeaderTitle/HeaderTitle.tsx
+++ b/src/components/HeaderTitle/HeaderTitle.tsx
@@ -1,13 +1,26 @@
+import Skeleton from '../Skeleton/Skeleton';
+
 interface HeaderTitleProps {
   title?: string;
+  skeletonEnabled?: boolean;
 }
 
-export default function HeaderTitle({ title }: HeaderTitleProps) {
+export default function HeaderTitle(props: HeaderTitleProps) {
+  const { title, skeletonEnabled: isLoading = false } = props;
   const displayTitle = !title?.trim() ? '주제 없음' : title.trim();
 
   return (
-    <h1 className="w-full max-w-[50vw] overflow-hidden text-ellipsis whitespace-nowrap text-3xl font-bold">
-      {displayTitle}
-    </h1>
+    <>
+      {isLoading && (
+        <div className="flex items-center justify-center">
+          <Skeleton width={400} height={32} />
+        </div>
+      )}
+      {!isLoading && (
+        <h1 className="w-full max-w-[50vw] overflow-hidden text-ellipsis whitespace-nowrap text-3xl">
+          {displayTitle}
+        </h1>
+      )}
+    </>
   );
 }
diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
index 8c1db84e..771f000b 100644
--- a/src/components/IconButton/IconButton.tsx
+++ b/src/components/IconButton/IconButton.tsx
@@ -7,7 +7,7 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export default function IconButton({ icon, ...props }: IconButtonProps) {
   return (
     <button
-      className="rounded-full bg-background-default px-2 py-2 font-bold text-neutral-900 hover:bg-neutral-300"
+      className="bg-background-default rounded-full px-2 py-2 font-bold text-neutral-900 hover:bg-neutral-300"
       {...props}
     >
       {icon}
diff --git a/src/components/LabledCheckBox/LabeledCheckbox.stories.tsx b/src/components/LabeledCheckBox/LabeledCheckBox.stories.tsx
similarity index 61%
rename from src/components/LabledCheckBox/LabeledCheckbox.stories.tsx
rename to src/components/LabeledCheckBox/LabeledCheckBox.stories.tsx
index e2baa067..cd579cfc 100644
--- a/src/components/LabledCheckBox/LabeledCheckbox.stories.tsx
+++ b/src/components/LabeledCheckBox/LabeledCheckBox.stories.tsx
@@ -1,10 +1,10 @@
 // LabeledCheckbox.stories.tsx
 import { Meta, StoryObj } from '@storybook/react';
-import LabeledCheckbox from './LabeledCheckbox';
+import LabeledCheckBox from './LabeledCheckBox';
 
-const meta: Meta<typeof LabeledCheckbox> = {
-  title: 'Components/LabeledCheckbox',
-  component: LabeledCheckbox,
+const meta: Meta<typeof LabeledCheckBox> = {
+  title: 'Components/LabeledCheckBox',
+  component: LabeledCheckBox,
   tags: ['autodocs'],
   argTypes: {
     onChange: { action: 'changed' },
@@ -12,7 +12,7 @@ const meta: Meta<typeof LabeledCheckbox> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof LabeledCheckbox>;
+type Story = StoryObj<typeof LabeledCheckBox>;
 
 // 기본 스토리
 export const Default: Story = {
@@ -37,3 +37,12 @@ export const Unchecked: Story = {
     checked: false,
   },
 };
+
+// 비활성화 상태
+export const Disabled: Story = {
+  args: {
+    label: '체크박스 라벨 (Disabled)',
+    checked: false,
+    disabled: true,
+  },
+};
diff --git a/src/components/LabledCheckBox/LabeledCheckbox.tsx b/src/components/LabeledCheckBox/LabeledCheckBox.tsx
similarity index 55%
rename from src/components/LabledCheckBox/LabeledCheckbox.tsx
rename to src/components/LabeledCheckBox/LabeledCheckBox.tsx
index 7b80bfc4..db24f1c2 100644
--- a/src/components/LabledCheckBox/LabeledCheckbox.tsx
+++ b/src/components/LabeledCheckBox/LabeledCheckBox.tsx
@@ -1,46 +1,52 @@
 import { InputHTMLAttributes, ReactNode } from 'react';
 
-interface LabeledCheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+interface LabeledCheckBoxProps extends InputHTMLAttributes<HTMLInputElement> {
   label: ReactNode;
   checked: boolean;
+  disabled?: boolean;
 }
 
-export default function LabeledCheckbox({
+export default function LabeledCheckBox({
   label,
   checked,
+  disabled = false,
   ...rest
-}: LabeledCheckboxProps) {
-  // 체크 안 된 상태일 때 라벨 색을 회색으로
-  const labelColorClass = checked ? '' : 'text-neutral-400';
+}: LabeledCheckBoxProps) {
+  // Set label text color to...
+  // - Black when checkbox is enabled
+  // - Gray when checkbox is disabled
 
   return (
     <label
-      className={`md:text-base flex cursor-pointer items-center gap-2 text-sm ${labelColorClass}`}
+      className={`
+        flex items-center gap-2 text-sm md:text-base
+        ${disabled ? 'text-neutral-400' : 'cursor-pointer text-neutral-900'}
+        `}
     >
       <input
         {...rest}
         type="checkbox"
         checked={checked}
-        className="
+        disabled={disabled}
+        className={`
+          checked:before:text-background-default
           relative
-          h-5
-          w-5 cursor-pointer
-          appearance-none
-          rounded-sm border
+          h-5 w-5
+          cursor-pointer
+          appearance-none rounded-sm
+          border
           border-neutral-300
           checked:border-transparent
           checked:bg-blue-500
           checked:before:absolute
-
           checked:before:left-1/2
           checked:before:top-[-4px]
           checked:before:-translate-x-1/2
           checked:before:text-xl
           checked:before:font-bold
-          checked:before:text-background-default
           checked:before:content-['✓']
           focus:outline-none
-        "
+        `}
       />
       {label}
     </label>
diff --git a/src/components/LabeledRadioButton/LabeledRadioButton.stories.tsx b/src/components/LabeledRadioButton/LabeledRadioButton.stories.tsx
new file mode 100644
index 00000000..8fb0940c
--- /dev/null
+++ b/src/components/LabeledRadioButton/LabeledRadioButton.stories.tsx
@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from '@storybook/react';
+import LabeledRadioButton from './LabeledRadioButton';
+
+const meta: Meta<typeof LabeledRadioButton> = {
+  title: 'Components/LabeledRadioButton',
+  component: LabeledRadioButton,
+  tags: ['autodocs'],
+  argTypes: {
+    onChange: { action: 'changed' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LabeledRadioButton>;
+
+export const Checked: Story = {
+  args: {
+    label: '체크박스 라벨 (Default)',
+    checked: true,
+  },
+};
+
+export const Unchecked: Story = {
+  args: {
+    label: '체크박스 라벨 (Default)',
+    checked: false,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: '체크박스 라벨 (Default)',
+    checked: false,
+    disabled: true,
+  },
+};
+
+function LabeledRadioButtonTestPage() {
+  return <div className="flex flex-row space-x-4"></div>;
+}
+
+export const SampleCode: Story = {
+  render: () => <LabeledRadioButtonTestPage />,
+};
diff --git a/src/components/LabeledRadioButton/LabeledRadioButton.tsx b/src/components/LabeledRadioButton/LabeledRadioButton.tsx
new file mode 100644
index 00000000..fe2bbf9a
--- /dev/null
+++ b/src/components/LabeledRadioButton/LabeledRadioButton.tsx
@@ -0,0 +1,62 @@
+interface LabeledRadioButtonProps {
+  id: string;
+  name: string;
+  value: string;
+  label?: string;
+  checked: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+}
+
+export default function LabeledRadioButton({
+  id,
+  name,
+  value,
+  label,
+  checked,
+  onChange,
+  disabled = false,
+}: LabeledRadioButtonProps) {
+  const radioSize = 'size-[20px]';
+
+  const checkedColorClass = 'bg-semantic-material border-semantic-material';
+  const uncheckedColorClass =
+    'bg-default-disabled/hover border-default-disabled/hover';
+
+  const containerClasses = `
+    flex items-center cursor-pointer select-none
+    ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+  `;
+  const outerRingClasses = `
+    relative flex items-center justify-center rounded-full transition-all duration-200 ease-in-out border-2
+    ${radioSize}
+    ${checked ? 'border-semantic-material' : 'border-default-disabled/hover'}
+  `;
+  const innerDotClasses = `
+    rounded-full transition-all duration-200 ease-in-out w-2.5 h-2.5
+    ${checked ? checkedColorClass : uncheckedColorClass}
+  `;
+
+  return (
+    <label htmlFor={id} className={containerClasses}>
+      <input
+        type="radio"
+        id={id}
+        name={name}
+        value={value}
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        className="sr-only"
+      />
+
+      <div className={outerRingClasses}>
+        <div className={innerDotClasses}></div>
+      </div>
+
+      {label && (
+        <span className="text-body ml-2 text-default-black">{label}</span>
+      )}
+    </label>
+  );
+}
diff --git a/src/components/LoadingIndicator/LoadingIndicator.stories.tsx b/src/components/LoadingIndicator/LoadingIndicator.stories.tsx
new file mode 100644
index 00000000..e08b5230
--- /dev/null
+++ b/src/components/LoadingIndicator/LoadingIndicator.stories.tsx
@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+import LoadingIndicator from './LoadingIndicator';
+
+const meta: Meta<typeof LoadingIndicator> = {
+  title: 'Components/LoadingIndicator',
+  component: LoadingIndicator,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof LoadingIndicator>;
+
+export const Default: Story = {
+  args: {
+    children: '로딩 중...',
+  },
+};
diff --git a/src/components/LoadingIndicator/LoadingIndicator.tsx b/src/components/LoadingIndicator/LoadingIndicator.tsx
new file mode 100644
index 00000000..83457713
--- /dev/null
+++ b/src/components/LoadingIndicator/LoadingIndicator.tsx
@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import LoadingSpinner from '../LoadingSpinner';
+
+export default function LoadingIndicator({
+  children = '데이터를 불러오고 있습니다...',
+}: PropsWithChildren) {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center space-y-8 p-16">
+      <LoadingSpinner size="size-32" color="text-neutral-500" />
+      <p className="text-xl">{children}</p>
+    </div>
+  );
+}
diff --git a/src/components/NotificationBadge/NotificationBadge.stories.tsx b/src/components/NotificationBadge/NotificationBadge.stories.tsx
new file mode 100644
index 00000000..f2938371
--- /dev/null
+++ b/src/components/NotificationBadge/NotificationBadge.stories.tsx
@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+import NotificationBadge from './NotificationBadge';
+
+const meta: Meta<typeof NotificationBadge> = {
+  title: 'Components/NotificationBadge',
+  component: NotificationBadge,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NotificationBadge>;
+
+export const WhenNoNotification: Story = {
+  args: {
+    count: 0,
+  },
+};
+export const When1Notification: Story = {
+  args: {
+    count: 1,
+  },
+};
+export const WhenMoreThan99Notification: Story = {
+  args: {
+    count: 100,
+  },
+};
+export const Default: Story = {
+  args: {
+    count: 14,
+  },
+};
diff --git a/src/components/NotificationBadge/NotificationBadge.tsx b/src/components/NotificationBadge/NotificationBadge.tsx
new file mode 100644
index 00000000..3e2307fb
--- /dev/null
+++ b/src/components/NotificationBadge/NotificationBadge.tsx
@@ -0,0 +1,32 @@
+import clsx from 'clsx';
+
+interface NotificationBadgeProps {
+  count: number;
+  className?: string;
+}
+
+export default function NotificationBadge({
+  count,
+  className = '',
+}: NotificationBadgeProps) {
+  // 음수, NaN 등 의도하지 않은 값 확인
+  const safeCount = Number.isFinite(count) ? Math.max(0, count) : 0;
+  if (safeCount === 0) {
+    return null;
+  }
+
+  const displayCount = safeCount > 99 ? '99+' : safeCount;
+
+  return (
+    <span
+      role="status"
+      aria-label={`알림 ${displayCount}개`}
+      className={clsx(
+        'inline-flex h-[16px] min-w-[16px] items-center justify-center rounded-full bg-semantic-error px-[4px] text-[10px] font-bold leading-none text-default-white',
+        className,
+      )}
+    >
+      {displayCount}
+    </span>
+  );
+}
diff --git a/src/components/ProsAndConsTitle/PropsAndConsTitle.tsx b/src/components/ProsAndConsTitle/PropsAndConsTitle.tsx
index 382c116a..5b53cd05 100644
--- a/src/components/ProsAndConsTitle/PropsAndConsTitle.tsx
+++ b/src/components/ProsAndConsTitle/PropsAndConsTitle.tsx
@@ -8,7 +8,7 @@ export default function PropsAndConsTitle({
   consTeamName = '반대',
 }: PropsAndConsTitleProps) {
   return (
-    <div className="mx-auto flex w-full items-center justify-between gap-2 py-4">
+    <div className="mx-auto mb-4 flex w-full items-center justify-between gap-2">
       <div className="flex w-1/2 flex-col items-center">
         <span className="text-2xl font-bold text-camp-blue">
           {prosTeamName}
diff --git a/src/components/RoundControlButton/RoundControlButton.tsx b/src/components/RoundControlButton/RoundControlButton.tsx
index 949d61c3..69fd0052 100644
--- a/src/components/RoundControlButton/RoundControlButton.tsx
+++ b/src/components/RoundControlButton/RoundControlButton.tsx
@@ -1,4 +1,5 @@
-import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+import DTLeftArrow from '../icons/LeftArrow';
+import DTRightArrow from '../icons/RightArrow';
 
 type RoundControlButtonTypes = 'PREV' | 'NEXT' | 'DONE';
 
@@ -13,12 +14,12 @@ export default function RoundControlButton({
 }: RoundControlButtonProps) {
   return (
     <button
-      className="flex h-[50px] w-[150px] flex-row items-center justify-center space-x-2 rounded-full border-[1px] border-neutral-300 bg-neutral-200 shadow-lg hover:bg-brand-main lg:h-[60px] lg:w-[170px] xl:h-[68px] xl:w-[200px]"
+      className="flex h-[50px] w-[150px] flex-row items-center justify-center space-x-2 rounded-full border-[1px] border-neutral-300 bg-neutral-200 hover:bg-brand lg:h-[60px] lg:w-[170px] xl:h-[68px] xl:w-[200px]"
       onClick={() => onClick()}
     >
       {type === 'PREV' && (
         <>
-          <FaArrowLeft className="size-[25px] lg:size-[31px] xl:size-[36px]" />
+          <DTLeftArrow className="size-[25px] lg:size-[31px] xl:size-[36px]" />
           <h1 className="text-[21px] font-semibold lg:text-[24px] xl:text-[28px]">
             이전 차례
           </h1>
@@ -29,7 +30,7 @@ export default function RoundControlButton({
           <h1 className="text-[21px] font-semibold lg:text-[24px] xl:text-[28px]">
             다음 차례
           </h1>
-          <FaArrowRight className="size-[25px] lg:size-[31px] xl:size-[36px]" />
+          <DTRightArrow className="size-[25px] lg:size-[31px] xl:size-[36px]" />
         </>
       )}
       {type === 'DONE' && (
diff --git a/src/components/ShareModal/ShareModal.stories.tsx b/src/components/ShareModal/ShareModal.stories.tsx
index b358280c..62b0871c 100644
--- a/src/components/ShareModal/ShareModal.stories.tsx
+++ b/src/components/ShareModal/ShareModal.stories.tsx
@@ -17,8 +17,6 @@ const shareUrl = createTableShareUrl('https://localhost:6006', {
     agenda: '토론 주제',
     prosTeamName: '짜장',
     consTeamName: '짬뽕',
-    finishBell: true,
-    warningBell: false,
     name: '테이블 이름',
   },
   table: [
@@ -30,6 +28,7 @@ const shareUrl = createTableShareUrl('https://localhost:6006', {
       time: 60,
       timePerSpeaking: null,
       timePerTeam: null,
+      bell: null,
     },
     {
       stance: 'CONS',
@@ -39,6 +38,7 @@ const shareUrl = createTableShareUrl('https://localhost:6006', {
       time: 60,
       timePerSpeaking: null,
       timePerTeam: null,
+      bell: null,
     },
     {
       stance: 'NEUTRAL',
@@ -48,6 +48,7 @@ const shareUrl = createTableShareUrl('https://localhost:6006', {
       time: null,
       timePerSpeaking: 60,
       timePerTeam: 120,
+      bell: null,
     },
   ],
 });
@@ -57,8 +58,10 @@ export const OnQRCodeReady: Story = {
   args: {
     shareUrl: shareUrl,
     copyState: false,
-    isUrlReady: true,
-    onClick: () => {
+    isLoading: false,
+    isError: false,
+    onRefetch: () => {},
+    onCopyClicked: () => {
       navigator.clipboard.writeText(shareUrl);
     },
   },
@@ -69,7 +72,21 @@ export const OnLoadingData: Story = {
   args: {
     shareUrl: '',
     copyState: false,
-    isUrlReady: false,
-    onClick: () => {},
+    isLoading: true,
+    isError: false,
+    onRefetch: () => {},
+    onCopyClicked: () => {},
+  },
+};
+
+// When failed to process share URL
+export const OnFailure: Story = {
+  args: {
+    shareUrl: '',
+    copyState: false,
+    isLoading: false,
+    isError: true,
+    onRefetch: () => {},
+    onCopyClicked: () => {},
   },
 };
diff --git a/src/components/ShareModal/ShareModal.tsx b/src/components/ShareModal/ShareModal.tsx
index 271b36a2..62df8790 100644
--- a/src/components/ShareModal/ShareModal.tsx
+++ b/src/components/ShareModal/ShareModal.tsx
@@ -1,32 +1,47 @@
 import { QRCodeSVG } from 'qrcode.react';
 import { IoLinkOutline, IoShareOutline } from 'react-icons/io5';
 import LoadingSpinner from '../LoadingSpinner';
+import ErrorIndicator from '../ErrorIndicator/ErrorIndicator';
+import clsx from 'clsx';
 
 interface ShareModalProps {
   shareUrl: string;
   copyState: boolean;
-  isUrlReady: boolean;
-  onClick: () => void;
+  isLoading: boolean;
+  isError: boolean;
+  onRefetch: () => void;
+  onCopyClicked: () => void;
 }
 
 export default function ShareModal({
   shareUrl,
   copyState,
-  isUrlReady,
-  onClick,
+  isLoading,
+  isError,
+  onRefetch,
+  onCopyClicked,
 }: ShareModalProps) {
+  // If error, print error message and let user be able to retry
+  if (isError) {
+    return (
+      <div className="flex w-[500px] flex-col items-center justify-center space-y-10 p-[40px]">
+        <ErrorIndicator onClickRetry={() => onRefetch()}>
+          QR 코드를 불러오지 못했어요...<br></br>다시 시도하시겠어요?
+        </ErrorIndicator>
+      </div>
+    );
+  }
+
+  // If no error or on loading, print modal contents
   return (
     <div className="flex w-[500px] flex-col items-center justify-center space-y-10 p-[40px]">
-      <div
-        className="relative flex size-[290px] items-center justify-center rounded-2xl"
-        style={{ boxShadow: 'inset 0 4px 8px rgba(0, 0, 0, 0.10)' }}
-      >
+      <div className="relative flex size-[290px] items-center justify-center rounded-2xl">
         {/* This component appears to tell the user that URL is succefully copied to clipboard. */}
         {/* It will disappear after 3 seconds. */}
         {copyState && (
           <div className="absolute flex size-full rounded-2xl">
-            <div className="absolute z-10 size-full rounded-2xl bg-neutral-900 opacity-80" />
-            <div className="absolute z-20 flex size-full flex-col items-center justify-center space-y-4  p-[30px] text-neutral-50">
+            <div className="absolute z-10 size-full rounded-2xl bg-default-black opacity-80" />
+            <div className="absolute z-20 flex size-full flex-col items-center justify-center space-y-4  p-[30px] text-default-white">
               <IoShareOutline className="size-[120px]" />
               <p className="whitespace-nowrap text-center text-[20px]">
                 링크가 클립보드에 복사됨
@@ -38,34 +53,43 @@ export default function ShareModal({
         {/* QR code is here. */}
         {/* If QR code is not prepared because response is not arrived, spinner will be shown. */}
         <div className="m-[50px] flex size-full items-center justify-center">
-          {isUrlReady && (
+          {isLoading && (
+            <LoadingSpinner
+              strokeWidth={3}
+              size={'size-24'}
+              color={'text-default-disabled/hover'}
+            />
+          )}
+          {!isLoading && (
             <QRCodeSVG
               value={shareUrl}
               bgColor="#f6f5f4"
               className="size-full"
             />
           )}
-          {!isUrlReady && (
-            <LoadingSpinner
-              strokeWidth={3}
-              size={'size-24'}
-              color={'text-neutral-300'}
-            />
-          )}
         </div>
       </div>
 
       {/* Button that copies URL to the user's clipboard. */}
       <button
-        className="button enabled relative flex h-[64px] w-[360px] items-center px-5"
+        // className="button enabled brand flex w-[360px] items-center justify-center gap-[12px] rounded-full"
+        // className={`button ${!isLoading ? 'enabled' : 'disabled'} relative flex h-[64px] w-[360px] items-center px-5`}
+        className={clsx(
+          'flex w-[360px] items-center justify-center gap-[12px] rounded-full',
+          {
+            'button disabled': isLoading,
+            'button enabled brand': !isLoading,
+          },
+        )}
+        disabled={isLoading}
         onClick={() => {
-          onClick();
+          if (!isLoading) {
+            onCopyClicked();
+          }
         }}
       >
-        <p className="absolute left-1/2 -translate-x-1/2 transform text-[28px] font-bold">
-          공유 링크 복사
-        </p>
-        <IoLinkOutline className="ml-auto size-8" />
+        <IoLinkOutline className="size-[24px]" />
+        <p>{isLoading ? '링크 준비 중' : '공유 링크 복사'}</p>
       </button>
     </div>
   );
diff --git a/src/components/Skeleton/Skeleton.stories.tsx b/src/components/Skeleton/Skeleton.stories.tsx
new file mode 100644
index 00000000..4fde0a69
--- /dev/null
+++ b/src/components/Skeleton/Skeleton.stories.tsx
@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Skeleton from './Skeleton';
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'components/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/src/components/Skeleton/Skeleton.tsx b/src/components/Skeleton/Skeleton.tsx
new file mode 100644
index 00000000..a806c421
--- /dev/null
+++ b/src/components/Skeleton/Skeleton.tsx
@@ -0,0 +1,20 @@
+interface SkeletonProps {
+  height?: number;
+  width?: number;
+}
+
+/**
+ * 스켈레톤 UI를 나타내는 가장 기본적인 컴포넌트 단위
+ * @param props.width 너비, 단위는 px이며 기본값 120 px
+ * @param props.height 높이, 단위는 px이며 기본값 24 px
+ */
+export default function Skeleton(props: SkeletonProps) {
+  const { height = 24, width = 120 } = props;
+
+  return (
+    <div
+      className={`animate-pulse rounded-2xl bg-neutral-400`}
+      style={{ height: `${height}px`, width: `${width}px` }}
+    ></div>
+  );
+}
diff --git a/src/components/SmallIconContainer/SmallIconContainer.stories.tsx b/src/components/SmallIconContainer/SmallIconContainer.stories.tsx
new file mode 100644
index 00000000..ff26bed0
--- /dev/null
+++ b/src/components/SmallIconContainer/SmallIconContainer.stories.tsx
@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import SmallIconButtonContainer from './SmallIconContainer';
+import DTHome from '../icons/Home';
+
+const meta: Meta<typeof SmallIconButtonContainer> = {
+  title: 'components/SmallIconContainer',
+  component: SmallIconButtonContainer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SmallIconButtonContainer>;
+
+export const Default: Story = {
+  args: {
+    children: <DTHome className="size-16" />,
+  },
+};
diff --git a/src/components/SmallIconContainer/SmallIconContainer.tsx b/src/components/SmallIconContainer/SmallIconContainer.tsx
new file mode 100644
index 00000000..cd7b00cf
--- /dev/null
+++ b/src/components/SmallIconContainer/SmallIconContainer.tsx
@@ -0,0 +1,30 @@
+import clsx from 'clsx';
+import { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+
+interface SmallIconContainerProps
+  extends PropsWithChildren,
+    Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+  background?: string;
+  className?: string;
+}
+
+export default function SmallIconButtonContainer({
+  background,
+  children,
+  className,
+  ...buttonProps
+}: SmallIconContainerProps) {
+  return (
+    <button
+      {...buttonProps}
+      className={clsx(
+        'flex items-center justify-center rounded-[8px]',
+        { 'bg-default-white': !background },
+        { background: background },
+        className,
+      )}
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/icons/Add.tsx b/src/components/icons/Add.tsx
new file mode 100644
index 00000000..cc51cc3c
--- /dev/null
+++ b/src/components/icons/Add.tsx
@@ -0,0 +1,25 @@
+import { IconProps } from './IconProps';
+
+export default function DTAdd({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 15 14"
+      fill="none"
+      className={`
+        aspect-[15/14]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M6.88464 8H0.884644V6H6.88464V0H8.88464V6H14.8846V8H8.88464V14H6.88464V8Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Bell.tsx b/src/components/icons/Bell.tsx
new file mode 100644
index 00000000..93e81730
--- /dev/null
+++ b/src/components/icons/Bell.tsx
@@ -0,0 +1,61 @@
+import { IconProps } from './IconProps';
+
+export default function DTBell({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 23 23"
+      fill="none"
+      className={`
+        aspect-[23/23]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M2.00118 9.07649C1.96653 7.21088 2.68174 3.05601 5.81984 1.36133"
+        stroke={color}
+        strokeWidth="2.18392"
+      />
+      <path
+        d="M21.6941 9.07649C21.7288 7.21088 21.0136 3.05601 17.8755 1.36133"
+        stroke={color}
+        strokeWidth="2.18392"
+      />
+      <rect
+        x="5.2168"
+        y="8.85938"
+        width="13.2592"
+        height="6.99643"
+        fill={color}
+      />
+      <path
+        d="M11.8464 2.24805C8.18495 2.24805 5.2168 5.2081 5.2168 8.85952H18.4759C18.4759 5.2081 15.5078 2.24805 11.8464 2.24805Z"
+        fill={color}
+      />
+      <ellipse
+        cx="11.8442"
+        cy="2.75459"
+        rx="1.35006"
+        ry="1.50459"
+        fill={color}
+      />
+      <path
+        d="M11.8437 19.0266H4.00289C3.57074 19.0266 3.30989 18.5484 3.54384 18.1851L5.21743 15.5859H11.8437V19.0266Z"
+        fill={color}
+      />
+      <path
+        d="M11.8437 19.0266H19.6846C20.1167 19.0266 20.3776 18.5484 20.1436 18.1851L18.47 15.5859H11.8437V19.0266Z"
+        fill={color}
+      />
+      <path
+        d="M11.8443 22.6177C13.0753 22.6177 14.0733 21.6197 14.0733 20.3887H9.61523C9.61523 21.6197 10.6132 22.6177 11.8443 22.6177Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Check.tsx b/src/components/icons/Check.tsx
new file mode 100644
index 00000000..3048f72b
--- /dev/null
+++ b/src/components/icons/Check.tsx
@@ -0,0 +1,27 @@
+import { IconProps } from './IconProps';
+
+export default function DTCheck({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 20 16"
+      fill="none"
+      className={`
+        aspect-[20/16]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M17.6171 1.12323L19.0165 2.52362L19.1933 2.70038L6.83974 15.0539L6.66298 14.8771L1.06337 9.27655L0.886612 9.09979L1.06337 8.92303L2.46376 7.52362L2.64052 7.34686L6.83974 11.5461L17.2636 1.12323L17.4403 0.946472L17.6171 1.12323Z"
+        fill={color}
+        stroke={color}
+        strokeWidth="0.5"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Close.tsx b/src/components/icons/Close.tsx
new file mode 100644
index 00000000..98c08280
--- /dev/null
+++ b/src/components/icons/Close.tsx
@@ -0,0 +1,35 @@
+import { IconProps } from './IconProps';
+
+export default function DTClose({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 39 38"
+      fill="none"
+      className={`
+        aspect-[39/38]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M4.02089 2.85052L36.7186 35.1505"
+        stroke={color}
+        strokeWidth="2.96541"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M36.7186 2.85052L4.02089 35.1505"
+        stroke={color}
+        strokeWidth="2.96541"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Copy.tsx b/src/components/icons/Copy.tsx
new file mode 100644
index 00000000..82d0a248
--- /dev/null
+++ b/src/components/icons/Copy.tsx
@@ -0,0 +1,39 @@
+import { IconProps } from './IconProps';
+
+export default function DTCopy({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 32 36"
+      fill="none"
+      className={`
+        aspect-[32/36]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask id="path-1-inside-1_1098_3471" fill="white">
+        <rect x="7.46484" y="6.72852" width="24.1621" height="29.1133" rx="3" />
+      </mask>
+      <rect
+        x="7.46484"
+        y="6.72852"
+        width="24.1621"
+        height="29.1133"
+        rx="3"
+        stroke={color}
+        strokeWidth="8"
+        mask="url(#path-1-inside-1_1098_3471)"
+      />
+      <path
+        d="M23.6348 2.1582H5.73047C4.07361 2.1582 2.73047 3.50135 2.73047 5.1582V25.6456"
+        stroke={color}
+        strokeWidth="4"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Debate.tsx b/src/components/icons/Debate.tsx
new file mode 100644
index 00000000..1894a63b
--- /dev/null
+++ b/src/components/icons/Debate.tsx
@@ -0,0 +1,37 @@
+import { IconProps } from './IconProps';
+
+export default function DTDebate({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 19 18"
+      fill="none"
+      className={`
+        aspect-[19/18]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M6.95975 10.4242C8.87045 10.4242 10.4194 8.87763 10.4194 6.9698C10.4194 5.06198 8.87045 3.51538 6.95975 3.51538C5.04904 3.51538 3.50011 5.06198 3.50011 6.9698C3.50011 8.87763 5.04904 10.4242 6.95975 10.4242Z"
+        fill={color}
+      />
+      <path
+        d="M12.4881 12.923C11.035 12.1803 9.14951 11.5757 6.96129 11.5757C4.77307 11.5757 2.88756 12.1803 1.43451 12.923C0.569603 13.3634 0.0420074 14.2529 0.0420074 15.2202V17.621H13.8806V15.2202C13.8806 14.2529 13.353 13.3634 12.4881 12.923Z"
+        fill={color}
+      />
+      <path
+        d="M15.9228 0.379028L14.7032 1.59671C17.0644 3.95436 17.0644 7.78876 14.7032 10.1464L15.9228 11.3641C18.9672 8.33284 18.9672 3.41028 15.9228 0.379028Z"
+        fill={color}
+      />
+      <path
+        d="M13.4831 8.89878C15.1697 7.21475 15.1697 4.47712 13.4831 2.79309L12.2636 4.01077C13.2756 5.02119 13.2756 6.66204 12.2636 7.67246L13.4831 8.89878Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Delete.tsx b/src/components/icons/Delete.tsx
new file mode 100644
index 00000000..128c8e56
--- /dev/null
+++ b/src/components/icons/Delete.tsx
@@ -0,0 +1,25 @@
+import { IconProps } from './IconProps';
+
+export default function DTDelete({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 31 34"
+      fill="none"
+      className={`
+        aspect-[31/34]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M6.35547 33.875C5.32422 33.875 4.44141 33.5078 3.70703 32.7734C2.97266 32.0391 2.60547 31.1562 2.60547 30.125V5.75H0.730469V2H10.1055V0.125H21.3555V2H30.7305V5.75H28.8555V30.125C28.8555 31.1562 28.4883 32.0391 27.7539 32.7734C27.0195 33.5078 26.1367 33.875 25.1055 33.875H6.35547ZM25.1055 5.75H6.35547V30.125H25.1055V5.75ZM10.1055 26.375H13.8555V9.5H10.1055V26.375ZM17.6055 26.375H21.3555V9.5H17.6055V26.375Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Drag.tsx b/src/components/icons/Drag.tsx
new file mode 100644
index 00000000..60b4a58c
--- /dev/null
+++ b/src/components/icons/Drag.tsx
@@ -0,0 +1,37 @@
+import { IconProps } from './IconProps';
+
+export default function DTDrag({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 32 40"
+      fill="none"
+      className={`
+        aspect-[32/40]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M2.23452 11.3762C2.75027 11.8721 3.56548 11.8725 4.08176 11.3772L10.135 5.5694C10.6509 5.07445 11.4654 5.07445 11.9812 5.5694L18.0345 11.3772C18.5508 11.8725 19.366 11.8721 19.8817 11.3762L20.386 10.8913C20.9316 10.3667 20.9316 9.49369 20.386 8.96909L11.9823 0.888599C11.4661 0.392303 10.6501 0.392303 10.134 0.888599L1.73027 8.96909C1.18469 9.49369 1.18469 10.3667 1.73027 10.8913L2.23452 11.3762Z"
+        fill={color}
+      />
+      <path
+        d="M13.1848 21.0686C13.1848 22.1732 12.2893 23.0686 11.1848 23.0686C10.0802 23.0686 9.18476 22.1732 9.18476 21.0686L13.1848 21.0686ZM11.1848 2.40192L13.1848 2.40192L13.1848 21.0686L11.1848 21.0686L9.18476 21.0686L9.18476 2.40192L11.1848 2.40192Z"
+        fill={color}
+      />
+      <path
+        d="M12.5599 28.0463C13.0756 27.5504 13.8909 27.55 14.4071 28.0453L20.4604 33.8531C20.9763 34.348 21.7907 34.348 22.3066 33.8531L28.3599 28.0453C28.8762 27.55 29.6914 27.5504 30.2071 28.0463L30.7114 28.5312C31.257 29.0558 31.257 29.9288 30.7114 30.4534L22.3077 38.5339C21.7915 39.0302 20.9755 39.0302 20.4594 38.5339L12.0557 30.4534C11.5101 29.9288 11.5101 29.0558 12.0557 28.5312L12.5599 28.0463Z"
+        fill={color}
+      />
+      <path
+        d="M23.5144 18.3582C23.5144 17.2536 22.619 16.3582 21.5144 16.3582C20.4099 16.3582 19.5144 17.2536 19.5144 18.3582L23.5144 18.3582ZM21.5144 37.0248L23.5144 37.0248L23.5144 18.3582L21.5144 18.3582L19.5144 18.3582L19.5144 37.0248L21.5144 37.0248Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Edit.tsx b/src/components/icons/Edit.tsx
new file mode 100644
index 00000000..047b09ec
--- /dev/null
+++ b/src/components/icons/Edit.tsx
@@ -0,0 +1,25 @@
+import { IconProps } from './IconProps';
+
+export default function DTEdit({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 19 18"
+      fill="none"
+      className={`
+        aspect-[19/18]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M2.52324 15.7879H3.90506L13.3838 6.3091L12.002 4.92728L2.52324 14.4061V15.7879ZM0.583847 17.7273V13.6061L13.3838 0.830311C13.5778 0.652534 13.7919 0.51516 14.0263 0.41819C14.2606 0.32122 14.5071 0.272736 14.7657 0.272736C15.0243 0.272736 15.2748 0.32122 15.5172 0.41819C15.7596 0.51516 15.9697 0.660614 16.1475 0.854554L17.4808 2.21213C17.6748 2.38991 17.8162 2.60001 17.9051 2.84243C17.9939 3.08486 18.0384 3.32728 18.0384 3.56971C18.0384 3.82829 17.9939 4.07476 17.9051 4.3091C17.8162 4.54344 17.6748 4.75758 17.4808 4.95152L4.70506 17.7273H0.583847ZM12.6808 5.63031L12.002 4.92728L13.3838 6.3091L12.6808 5.63031Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Exchange.tsx b/src/components/icons/Exchange.tsx
new file mode 100644
index 00000000..186b702d
--- /dev/null
+++ b/src/components/icons/Exchange.tsx
@@ -0,0 +1,37 @@
+import { IconProps } from './IconProps';
+
+export default function DTExchange({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 66 66"
+      fill="none"
+      className={`
+        aspect-[66/66]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M20.4939 53.4804C21.2378 52.7068 21.2385 51.484 20.4955 50.7096L11.7838 41.6297C11.0414 40.8559 11.0414 39.6342 11.7838 38.8604L20.4955 29.7805C21.2385 29.0061 21.2378 27.7832 20.4939 27.0096L19.7667 26.2532C18.9798 25.4349 17.6702 25.4349 16.8833 26.2532L4.76259 38.8588C4.01814 39.633 4.01814 40.857 4.76259 41.6312L16.8833 54.2368C17.6702 55.0552 18.9798 55.0552 19.7667 54.2368L20.4939 53.4804Z"
+        fill={color}
+      />
+      <path
+        d="M35.0313 37.0547C36.6881 37.0547 38.0313 38.3978 38.0312 40.0547C38.0312 41.7115 36.6881 43.0547 35.0312 43.0547L35.0313 37.0547ZM7.03125 40.0547L7.03125 37.0547L35.0313 37.0547L35.0312 40.0547L35.0312 43.0547L7.03125 43.0547L7.03125 40.0547Z"
+        fill={color}
+      />
+      <path
+        d="M45.5061 37.9922C44.7622 37.2185 44.7615 35.9957 45.5045 35.2213L54.2162 26.1414C54.9586 25.3676 54.9586 24.1459 54.2162 23.3721L45.5045 14.2922C44.7615 13.5178 44.7622 12.2949 45.5061 11.5213L46.2333 10.765C47.0202 9.94658 48.3298 9.94658 49.1167 10.765L61.2374 23.3705C61.9819 24.1448 61.9819 25.3687 61.2374 26.143L49.1167 38.7485C48.3298 39.5669 47.0202 39.5669 46.2333 38.7485L45.5061 37.9922Z"
+        fill={color}
+      />
+      <path
+        d="M30.9687 21.5625C29.3119 21.5625 27.9687 22.9056 27.9688 24.5625C27.9688 26.2194 29.3119 27.5625 30.9688 27.5625L30.9687 21.5625ZM58.9688 24.5625L58.9687 21.5625L30.9687 21.5625L30.9688 24.5625L30.9688 27.5625L58.9688 27.5625L58.9688 24.5625Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Expand.tsx b/src/components/icons/Expand.tsx
new file mode 100644
index 00000000..b7b59ca6
--- /dev/null
+++ b/src/components/icons/Expand.tsx
@@ -0,0 +1,25 @@
+import { IconProps } from './IconProps';
+
+export default function DTExpand({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 13 8"
+      fill="none"
+      className={`
+        aspect-[13/8]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M6.58212 7.4L0.582123 1.4L1.98212 0L6.58212 4.6L11.1821 0L12.5821 1.4L6.58212 7.4Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Help.tsx b/src/components/icons/Help.tsx
new file mode 100644
index 00000000..b90e133e
--- /dev/null
+++ b/src/components/icons/Help.tsx
@@ -0,0 +1,31 @@
+import { IconProps } from './IconProps';
+
+export default function DTHelp({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 45 44"
+      fill="none"
+      className={`
+        aspect-[45/44]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M22.7693 38C31.6058 38 38.7693 30.8366 38.7693 22C38.7693 13.1634 31.6058 6 22.7693 6C13.9327 6 6.76929 13.1634 6.76929 22C6.76929 30.8366 13.9327 38 22.7693 38Z"
+        stroke={color}
+        strokeWidth="4.21053"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M20.6414 25.3928C20.6414 22.2696 21.4862 21.3224 22.9966 20.3752C24.0718 19.684 24.891 18.916 24.891 17.764C24.891 16.484 23.9182 15.6904 22.6894 15.6648C21.6319 15.6883 20.6391 16.3374 20.424 17.5726C20.3906 17.7642 20.233 17.9176 20.0385 17.9176H17.2264C17.0213 17.9176 16.8552 17.7481 16.8709 17.5436C17.1194 14.2902 19.6565 12.7217 22.7406 12.7464C26.2222 12.7208 28.6798 14.5384 28.6798 17.6104C28.6798 19.684 27.6302 20.9896 25.9662 21.9624C24.5838 22.8072 23.9438 23.6264 23.9182 25.3928C23.9182 25.5342 23.8036 25.6488 23.6622 25.6488H20.8974C20.756 25.6488 20.6414 25.5342 20.6414 25.3928ZM20.283 29.1816C20.2318 28.0552 21.2046 27.108 22.3822 27.1336C23.483 27.108 24.4558 28.0552 24.4814 29.1816C24.4558 30.3592 23.483 31.3064 22.3822 31.2808C21.2046 31.3064 20.2318 30.3592 20.283 29.1816Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Home.tsx b/src/components/icons/Home.tsx
new file mode 100644
index 00000000..746206a7
--- /dev/null
+++ b/src/components/icons/Home.tsx
@@ -0,0 +1,27 @@
+import { IconProps } from './IconProps';
+
+export default function DTHome({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 45 44"
+      fill="none"
+      className={`
+        aspect-[45/44]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M6.42554 21.7278V36.2518C6.42554 37.2196 7.18999 38 8.13791 38H16.868C17.8159 38 18.5803 37.2196 18.5803 36.2518V29.3137C18.5803 28.346 19.3448 27.5655 20.2927 27.5655H24.5584C25.5063 27.5655 26.2707 28.346 26.2707 29.3137V36.2518C26.2707 37.2196 27.0352 38 27.9831 38H36.7132C37.6611 38 38.4255 37.2196 38.4255 36.2518V21.7278C38.4255 21.2518 38.2344 20.7991 37.8981 20.4635L23.6104 6.48582C22.9454 5.83806 21.9057 5.83806 21.2406 6.48582L6.95301 20.4713C6.61665 20.7991 6.42554 21.2596 6.42554 21.7356V21.7278Z"
+        stroke={color}
+        strokeWidth="4.21053"
+        strokeMiterlimit="10"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Icon.stories.tsx b/src/components/icons/Icon.stories.tsx
new file mode 100644
index 00000000..ddfa56bf
--- /dev/null
+++ b/src/components/icons/Icon.stories.tsx
@@ -0,0 +1,258 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import DTLogin from './Login';
+import DTHelp from './Help';
+import DTClose from './Close';
+import DTHome from './Home';
+import DTCheck from './Check';
+import DTExpand from './Expand';
+import DTDebate from './Debate';
+import DTRightArrow from './RightArrow';
+import DTLeftArrow from './LeftArrow';
+import DTDrag from './Drag';
+import DTCopy from './Copy';
+import DTDelete from './Delete';
+import DTEdit from './Edit';
+import DTPlay from './Play';
+import DTReset from './Reset';
+import DTShare from './Share';
+import DTExchange from './Exchange';
+import DTBell from './Bell';
+
+const meta: Meta<typeof DTLogin> = {
+  title: 'Design System/Icons',
+  component: DTLogin,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    color: {
+      control: 'color',
+      description: '아이콘의 색상',
+    },
+    className: {
+      control: 'text',
+      description: 'Tailwind CSS 클래스 추가 (크기도 여기에서 관리)',
+    },
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DTLogin>;
+
+export const OnLoginIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTLogin className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">로그인</p>
+    </div>
+  ),
+};
+
+export const OnHomeIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTHome className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">홈</p>
+    </div>
+  ),
+};
+
+export const OnHelpIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTHelp className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">도움말</p>
+    </div>
+  ),
+};
+
+export const OnCloseIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTClose className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">닫기</p>
+    </div>
+  ),
+};
+
+export const OnCheckIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTCheck className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">확인</p>
+    </div>
+  ),
+};
+
+export const OnExpandIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTExpand className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">확장 (더보기)</p>
+    </div>
+  ),
+};
+
+export const OnDebateIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTDebate className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">토론</p>
+    </div>
+  ),
+};
+
+export const OnRightArrowIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTRightArrow className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">우측 화살표</p>
+    </div>
+  ),
+};
+
+export const OnLeftArrowIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTLeftArrow className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">좌측 화살표</p>
+    </div>
+  ),
+};
+
+export const OnDragIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTDrag className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">드래그</p>
+    </div>
+  ),
+};
+
+export const OnCopyIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTCopy className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">복사</p>
+    </div>
+  ),
+};
+
+export const OnDeleteIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTDelete className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">삭제</p>
+    </div>
+  ),
+};
+
+export const OnEditIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTEdit className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">수정</p>
+    </div>
+  ),
+};
+
+export const OnPlayIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTPlay className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">시작/재생</p>
+    </div>
+  ),
+};
+
+export const OnResetIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTReset className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">초기화</p>
+    </div>
+  ),
+};
+
+export const OnShareIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTShare className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">공유</p>
+    </div>
+  ),
+};
+
+export const OnExchangeIcon: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTExchange className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">교체</p>
+    </div>
+  ),
+};
+
+export const OnBell: Story = {
+  args: {
+    color: '#FECD4C',
+  },
+  render: (args) => (
+    <div className="bg-neutral-white flex flex-col items-center rounded border p-4 shadow-sm">
+      <DTBell className="size-16" {...args} />
+      <p className="mt-2 text-sm text-gray-600">타종</p>
+    </div>
+  ),
+};
diff --git a/src/components/icons/IconProps.tsx b/src/components/icons/IconProps.tsx
new file mode 100644
index 00000000..d12059da
--- /dev/null
+++ b/src/components/icons/IconProps.tsx
@@ -0,0 +1,6 @@
+import { SVGProps } from 'react';
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+  color?: string;
+  className?: string;
+}
diff --git a/src/components/icons/LeftArrow.tsx b/src/components/icons/LeftArrow.tsx
new file mode 100644
index 00000000..c663e688
--- /dev/null
+++ b/src/components/icons/LeftArrow.tsx
@@ -0,0 +1,29 @@
+import { IconProps } from './IconProps';
+
+export default function DTLeftArrow({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 34 30"
+      fill="none"
+      className={`
+        aspect-[34/30]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M17.14 27.8454C17.8657 27.0756 17.8664 25.8738 17.1415 25.1032L8.92704 16.3703C8.20276 15.6003 8.20276 14.3997 8.92704 13.6297L17.1415 4.89681C17.8664 4.12621 17.8657 2.9244 17.14 2.1546L16.5642 1.54376C15.7747 0.706299 14.4431 0.706298 13.6536 1.54376L2.26179 13.6281C1.53552 14.3985 1.53552 15.6015 2.26179 16.3719L13.6536 28.4562C14.4431 29.2937 15.7747 29.2937 16.5642 28.4562L17.14 27.8454Z"
+        fill={color}
+      />
+      <path
+        d="M30.9685 12.3157C32.3492 12.3157 33.4685 13.435 33.4685 14.8157C33.4685 16.1964 32.3492 17.3157 30.9685 17.3157L30.9685 14.8157L30.9685 12.3157ZM4.38754 14.8157L4.38754 12.3157L30.9685 12.3157L30.9685 14.8157L30.9685 17.3157L4.38754 17.3157L4.38754 14.8157Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Login.tsx b/src/components/icons/Login.tsx
new file mode 100644
index 00000000..a0736687
--- /dev/null
+++ b/src/components/icons/Login.tsx
@@ -0,0 +1,49 @@
+import { IconProps } from './IconProps';
+
+export default function DTLogin({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 45 44"
+      fill="none"
+      className={`
+        aspect-[45/44]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M33.7567 32.464V35.681C33.7567 36.7666 33.1532 37.6466 32.4007 37.6466H9.78112C9.03607 37.6466 8.42514 36.7666 8.42514 35.681V8.31899C8.42514 7.23339 9.02862 6.35339 9.78112 6.35339H32.4081C33.1532 6.35339 33.7641 7.23339 33.7641 8.31899V11.536"
+        stroke={color}
+        strokeWidth="4.11753"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+      <path
+        d="M36.4256 22.0014L30.0853 26.9688"
+        stroke={color}
+        strokeWidth="4.11753"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M36.4256 21.9977L30.0853 17.0385"
+        stroke={color}
+        strokeWidth="4.11753"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.4389 22.0014H34.2827"
+        stroke={color}
+        strokeWidth="4.11753"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Play.tsx b/src/components/icons/Play.tsx
new file mode 100644
index 00000000..1b59eebf
--- /dev/null
+++ b/src/components/icons/Play.tsx
@@ -0,0 +1,25 @@
+import { IconProps } from './IconProps';
+
+export default function DTPlay({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 59 67"
+      fill="none"
+      className={`
+        aspect-[59/67]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M56.6871 30.2524C59.1871 31.6958 59.1871 35.3042 56.6871 36.7476L5.73172 66.1667C3.23172 67.6101 0.106717 65.8059 0.106717 62.9191L0.106719 4.08088C0.10672 1.19413 3.23172 -0.610097 5.73172 0.833279L56.6871 30.2524Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Reset.tsx b/src/components/icons/Reset.tsx
new file mode 100644
index 00000000..26d6f16d
--- /dev/null
+++ b/src/components/icons/Reset.tsx
@@ -0,0 +1,25 @@
+import { IconProps } from './IconProps';
+
+export default function DTReset({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 49 36"
+      fill="none"
+      className={`
+        aspect-[49/36]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M40.9023 9.40575C40.6615 9.16492 40.271 9.16492 40.0302 9.40575L32.5493 16.8867C32.1608 17.2752 32.4359 17.9394 32.9853 17.9394H38.2238C38.2238 25.3618 32.1917 31.3939 24.7693 31.3939C22.6355 31.3939 20.6013 30.8964 18.8166 29.995C18.6217 29.8965 18.3846 29.9301 18.2302 30.0846L15.6521 32.6626C15.4287 32.886 15.4699 33.2591 15.7423 33.4192C18.3869 34.9728 21.4698 35.8788 24.7693 35.8788C34.6808 35.8788 42.7087 27.8509 42.7087 17.9394H47.9472C48.4966 17.9394 48.7717 17.2752 48.3832 16.8867L40.9023 9.40575ZM11.3147 17.9394C11.3147 10.517 17.3468 4.48485 24.7693 4.48485C26.903 4.48485 28.9372 4.98242 30.7219 5.88382C30.9168 5.98227 31.154 5.94864 31.3084 5.79422L33.8864 3.21618C34.1098 2.99278 34.0687 2.61964 33.7963 2.45962C31.1516 0.906014 28.0688 0 24.7693 0C14.8578 0 6.82987 8.02788 6.82987 17.9394H1.59136C1.04197 17.9394 0.766838 18.6036 1.15532 18.9921L8.63625 26.473C8.87707 26.7139 9.26752 26.7139 9.50835 26.473L16.9893 18.9921C17.3778 18.6036 17.1026 17.9394 16.5532 17.9394H11.3147Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/RightArrow.tsx b/src/components/icons/RightArrow.tsx
new file mode 100644
index 00000000..fb492995
--- /dev/null
+++ b/src/components/icons/RightArrow.tsx
@@ -0,0 +1,29 @@
+import { IconProps } from './IconProps';
+
+export default function DTRightArrow({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 33 30"
+      fill="none"
+      className={`
+        aspect-[33/30]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M16.797 27.8454C16.0713 27.0756 16.0706 25.8738 16.7955 25.1032L25.01 16.3703C25.7343 15.6003 25.7343 14.3997 25.01 13.6297L16.7955 4.89681C16.0706 4.12621 16.0713 2.92441 16.797 2.1546L17.3728 1.54377C18.1623 0.706299 19.4939 0.706299 20.2834 1.54376L31.6752 13.6281C32.4015 14.3985 32.4015 15.6015 31.6752 16.3719L20.2834 28.4562C19.4939 29.2937 18.1623 29.2937 17.3728 28.4562L16.797 27.8454Z"
+        fill={color}
+      />
+      <path
+        d="M2.96851 12.3157C1.58779 12.3157 0.468506 13.435 0.468506 14.8157C0.468506 16.1964 1.58779 17.3157 2.96851 17.3157L2.96851 14.8157L2.96851 12.3157ZM29.5495 14.8157L29.5495 12.3157L2.96851 12.3157L2.96851 14.8157L2.96851 17.3157L29.5495 17.3157L29.5495 14.8157Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/src/components/icons/Share.tsx b/src/components/icons/Share.tsx
new file mode 100644
index 00000000..b2c09aab
--- /dev/null
+++ b/src/components/icons/Share.tsx
@@ -0,0 +1,27 @@
+import { IconProps } from './IconProps';
+
+export default function DTShare({
+  color = 'currentColor',
+  className = '',
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 13 18"
+      fill="none"
+      className={`
+        aspect-[13/18]
+        ${className}
+      `}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M4.68109 5.96457V7.55734H2.44183V15.6677H11.2983V7.55734H9.05902V5.96457H11.3481C12.1966 5.96457 12.8911 6.65127 12.8911 7.50754V15.7175C12.891 16.5661 12.1967 17.2605 11.3481 17.2605H2.39203C1.53577 17.2605 0.849068 16.566 0.84906 15.7175V7.50754C0.84906 6.65144 1.53593 5.96457 2.39203 5.96457H4.68109ZM6.9057 0.754608L9.92621 3.77512L8.79535 4.90598L8.76019 4.87082L7.65863 3.76828V12.0359H6.08148V3.76828L4.97992 4.87082L4.94476 4.90598L4.90863 4.87082L3.84906 3.81027L3.8139 3.77512L6.86957 0.719452L6.9057 0.754608Z"
+        fill={color}
+        stroke={color}
+        strokeWidth="0.1"
+      />
+    </svg>
+  );
+}
diff --git a/src/constants/debate_template.ts b/src/constants/debate_template.ts
new file mode 100644
index 00000000..570de293
--- /dev/null
+++ b/src/constants/debate_template.ts
@@ -0,0 +1,270 @@
+import government from '../assets/template_logo/government.png';
+import igam from '../assets/template_logo/igam.png';
+import kondae_time from '../assets/template_logo/kondae_time.png';
+import han_alm from '../assets/template_logo/han_alm.png';
+import todallae from '../assets/template_logo/todallae.png';
+import jungseonto from '../assets/template_logo/jungseonto.png';
+import visual from '../assets/template_logo/visual.png';
+import hantomak from '../assets/template_logo/hantomak.png';
+import seobangjeongto from '../assets/template_logo/seobangjeongto.png';
+import osansi from '../assets/template_logo/osansi.png';
+import nogotte from '../assets/template_logo/nogotte.png';
+import kogito from '../assets/template_logo/kogito.png';
+import { DebateTemplate } from '../type/type';
+function createTableShareUrl(encodeData: string): string {
+  return `${import.meta.env.VITE_SHARE_BASE_URL}/share?data=${encodeData}`;
+}
+interface DebateTemplateList {
+  ONE: DebateTemplate[];
+  TWO: DebateTemplate[];
+  THREE: DebateTemplate[];
+}
+export const DEBATE_TEMPLATE: DebateTemplateList = {
+  ONE: [
+    {
+      title: '산업통상자원부',
+      subtitle: '',
+      logoSrc: government,
+      actions: [
+        {
+          label: '3vs3 통상토론대회 형식',
+          href: createTableShareUrl(
+            'eJzFkj9PwkAYh79K884dVAZMN8AOJNKStiwaY45yhcZybXr4L6SJRmGRwUVDTDXV2QEHEr9Tr9%2FBO6pYjIsLbndP7n6%2FJ%2B%2FdENwOKKXtsgwucXxQhkBQH4MCJemESiUpG8%2FZ1WU2TtLnJJ1cZA8TKZvesZtHkGFwHoiTtZZp6Y36nsoR6mLSQRzydRD61MKor%2BWBbPbKrt84t31S5OlsyoM5P0UhcUm3ij0PFAd5FMvguMSlvQKKeC1qe%2Fzi%2FhDoABFbZDQN3eQJNMDY7lm5FnsacWdO2%2F7ZJ9J0o1HZFeauqN7c2siXTRwKIVDIsectkRlgdMSFvjAVexzm20gu1Nd07T%2FrNbVlGYvgHwa3LE7yp1vxsOoN9bBaMdWdpctKcy5TLuh9uyyk%2FziJecxeRlI6i9n9%2B1oG8ut3WIvFQfQBTEMy%2BQ%3D%3D',
+          ),
+        },
+      ],
+    },
+    {
+      title: '건대타임',
+      subtitle: '건국대',
+      logoSrc: kondae_time,
+      actions: [
+        {
+          label: '타임식 토론',
+          href: createTableShareUrl(
+            'eJyrVspMUbIyMTDWUcrMS8tXsqpWykvMTVWyUnq1ccvrnoa3zQ1v5rW86Z6r8LZtweuFC5R0lEoqC0DyzqHBIf6%2BnlGuQKHE9NS8lESgIJBdUJRfHJKamOsHMebNhjVvWjYCxZPz85DFX2%2BYATQeKF6eWJSXmZfulJqTo2SVlphTnKqjlJaZl1mcAREqKSpNrQXampiUA9QXXa1UXJKYlwwyws81NCTI0QdoRnFBampyRgjEYRCHvlnQAnLym7kzgPJJ%2BRVQST%2F%2FIF%2BwlpJMkDMMLQwgzIDUIpDjlKzySnNy4ELBBamJ2UDHwYSLQfzUIgi3VodYt%2BBzgZGhAZWcEBDkH4xu%2F5t5rQTsNzSikvXO%2Fn4DaT0234PSGAHrqRX%2F2HxPY%2BtjawF7h1Ut',
+          ),
+        },
+      ],
+    },
+    {
+      title: '한앎',
+      subtitle: '연합동아리',
+      logoSrc: han_alm,
+      actions: [
+        {
+          label: 'CEDA 토론',
+          href: createTableShareUrl(
+            'eJyrVspMUbIytjTUUcrMS8tXsqpWykvMTVWyUno7dc6bqX1vuucqOLu6OCq8bVvweuECJR2lksoCkLRzaHCIv69nlCtQKDE9NS8lESgIZBcU5ReHpCbm%2BkFMebNhzZuWjUDx5Pw8ZPHXG2a87mkAipcnFuVl5qU7pebkKFmlJeYUp%2BoopWXmZRZnIAnVAq1NTMoBaoyuViouScxLBpkREOQfDDShuCA1NTkjBOKsN%2FNaIc5Myq%2BACvn5B%2Fk6%2BoBcngmy2tDUAMIMSC0COUjJKq80JwcuFFyQmpgNdBBMuBjETy0CmmP4elOHUq0OkgOc%2Ff0wHPBq64Q3G1a8WbjhTdMavM4wItMZRkQ5g67hgC0iaB4OxDmDhuFAXEQMQDjQOT1ghsOApAfiogNU7uAPByNDmiZIujqAziFAXEqguQNiawHVv27d',
+          ),
+        },
+      ],
+    },
+    {
+      title: '토달래',
+      subtitle: '성신여대',
+      logoSrc: todallae,
+      actions: [
+        {
+          label: 'CEDA 토론',
+          href: createTableShareUrl(
+            'eJzVk09LAkEUwL%2FKMuc9WJHU3vyzByF3xV0vRcSooy6ts8uuUSFCBwnBDnYRDyrrJTvsYYICP5MzfYdm2jIF8abSbd7vzbz34zGvCawyUI5OjmVg4YoDlCbAsI6AAj4fA9oN6XjAuiMppaYTkiCTAMigce%2BKG6mCYerZzLnKEawiXIYc8rPrOb6JYF2LCjESsvYb5yUHL3NKBvTpgfNb6GELV5PItoFSgbaPZFCxsOXXllCLt4VFmz%2B8aAK%2FAXFJ1MjldYNX8F2ESjUz0prPCJsQSoasP%2BO5onP3k9D0fDZxJvwtIXAai0455AkroOAb214gw0Xwmlv9Yl%2FEyIvClrzkkNK1vTusncNHj5FXNu2w0WCTw8HhNgexawlNLZj578IrHmz8zIK2xLrDOWlvEolv26PHhsFik%2F40zExWvUomDDW9UFnpHMnEY7F%2FPJN1H4ROOzR8py%2BhtN9t2ZXHZesLlsH%2Fxw%3D%3D',
+          ),
+        },
+      ],
+    },
+  ],
+  TWO: [
+    {
+      title: '중앙선거방송토론위원회',
+      subtitle: '',
+      logoSrc: jungseonto,
+      actions: [
+        {
+          label: '열린 토론대회 예선, 본선',
+          href: createTableShareUrl(
+            'eJzFks9LAkEUx%2F%2BVZc4SG9KhvZV5EPIHul2KiMlGXVpH2TUqRPCwhaFgHUqJ1YyiLkYbWXnw1J%2Bz8%2Fwfmm1KlKBDiJ1m5jvvfd%2Fnzbwi0naQ4pf9PqTRVA4pRURxliAFsVp5eG6zx4H78iBBo8funOFxh113vIvLmgTNClid9zf23Ocr8qHCYd7LC6wl1Gg4tB7kEk4TuoO5yD24EzQct1%2BRoNVk3Z7rlKF9BC1LGtZP4Z4Xa0KjC%2BcDyStbvZ3j%2BXkjZ6oEZyMCCZwuWE9cT%2BbouM6cJofi%2Bj42qEbTy0TXkZLCukl8KKVRzcwIqWDskRInxds6z9soIrOAadKziMWjCW5g5glJZlTRiSg3rJUlqNrQPmOODRd9HrWdO%2FgKiUTj4aVVr3nNI1mUxS5GDA8PKXRP10dSIk%2FwLsf7lk3vTAxxLPnGaALRyA8a0eR%2F0ESCa2r803fyeW4GrG65rzVJzMUEihoKB7eWlxLBlRHORHUB5JflKfJUbdexoNdiVyfQsaeGM78g%2F%2F2v2H2Fzzq760qz%2B6%2FfZ3lWRJulD1QmwAI%3D',
+          ),
+        },
+        {
+          label: '열린 토론대회 결승',
+          href: createTableShareUrl(
+            'eJzFks9LAkEUx%2F%2BVZc4SGgWxN7U9CPkDXS9FxKijLq2j7CoVIniwsBSsgymxmlHoxWgLCwP%2Fop3Z%2F6HZ1kzJk0Hd5n3nfd%2F7vJlXBFIC8E4HkHAyC%2FgiwDCDAA9IvWw2NfI0MV4fOdoakb7OmWc9ctezbm7qnPGi04t34AD5k5xl8EYjYtDv2xWYBFMIJyATmZmVoC3dGFc52mmT4cjQy7R7SjsVzmxc0gHr0qatIW1OOKtf7WGN%2BXNKVhURzARsFqoPaeWZ6fEsnteJ3mYwTD%2BCCpZwyoNkGfB5pYAcIClhSU1%2FKyUGCmMys%2B0VgZqHOG5VCIWDEeZXcwjF06I9iN3NrJc5WtNo94ojukavxywtlj2e5gSCYb97xxpeskhc6077GEKKxQd4XJDlmRTJIXjI%2BL5k1YqRYoclxxyPNxj4wWNP%2BT88ASEqhj8LLz7R%2FYQ0KsZbfboSCyyizy8ceNwRYXvGs9DdBtqYQ%2Fw9T00z9AoddcjtOe1pK%2BC4tpbhuDadq%2F8WGVTZupP%2B8C8%2FbNlC%2FwPSfukDpaO6ow%3D%3D',
+          ),
+        },
+      ],
+    },
+    {
+      title: '통일부',
+      subtitle: '',
+      logoSrc: government,
+      actions: [
+        {
+          label: '통일토론대회 형식 (예선)',
+          href: createTableShareUrl(
+            'eJzdk09LAkEYh7%2BKzKlgD6kQtTe1PQi5K%2B56KSJGndWldXbZNSpE6LCKkIe6hITG1qUOHbZA6NAncsfv0ExbsvbPEDLpNvMw83sf3nmnDrQS4OPrMQ5oWDUAXwcYVhHgwag1IP2nyKjl%2Bleu3zkeXXSWSLdNHHcZcKB2ZLJDqbysSJn0lkARLCNcghTStWkZtoJgVQyyiHdHnHvKiwYOc9%2Fr0mTKD6CFNVxOIl0HvAp1G3FA1bBmV0KoQcvCgk4vbteBXYO4yDKyOUmmCbaJULGiBFrkskmlKS0Yh69IlHKZxCYz11jp6NpKsMwiiwkBHu%2Fr%2BhjJJoJ7VOgN22yPLJoT9R%2FaoMGFBFKS%2BLcCopBXci%2FR7xzOiOtEyElv6DnfqazOZsK2UxvBXnhKI2IzNiL2oRGfjcJcBRblJb7wGA5OiXdLbtqk353QUNIZYTeZkIWNscpE5UAmPLL%2FymUhfgoZ9Mh1M%2BJ7PXL%2B%2BCvzGv%2FRh5mXx07jGWqQVcg%3D',
+          ),
+        },
+        {
+          label: '통일토론대회 형식 (준결승, 결승)',
+          href: createTableShareUrl(
+            'eJztk09LAkEYh7%2FKMqeCPaRG1N7SPAi5K%2B56KSJGHXVpnV1co0IED6tIerBDIaWxRVCHDpsgFPSJ3PE7NNuWaH8srKxDp515YH7vs%2B87UwByEnC%2BJR8LZJxSAVcAGGYR4EC%2F0iXte6ZfMe0z066X%2Bsd1pt88JLX2DLko9ToW2b9jGfc7C1iQ39OcY4GYKAnh0FqQIphGOAkppGstp%2BoSglneTSfWNTFuKE%2BoeJjbVpPWonwH5rCM036kKIBLQUVHLEjJWNYzQ6hIy8K4Qg%2BuF4CehzjhZESigkgTdA2hREZytchpmf4GpXF19wnxQjS8vOqYy05p7%2Fycu4ygnCMEOLytKAMkaghuUaFnrDt7lKM5HrtTBUV2SCAg8L8rwAdjUvQx%2BoXDATENhtRaPcsYp7IwmYmz%2FbARzoTHN8KzOGEjvK8a8dZVmKrAVyfh8X7TKN4TMQ1y0mB63QaxrshllbSbIzpSKBzc9C%2BLwZWB0oiA6zTcsH%2Bl6Sj9hbdMui1yXmZsq0WObn%2FiGgPfp570tDw2ig%2BaOaDC',
+          ),
+        },
+      ],
+    },
+    {
+      title: '비주얼',
+      subtitle: '명지대',
+      logoSrc: visual,
+      actions: [
+        {
+          label: '2:2 자유토론',
+          href: createTableShareUrl(
+            'eJyrVspMUbIytjDRUcrMS8tXsqpWykvMTVWyUnq9s%2BXN4j1vpu150z1XwcjKSOHNvAlv5ix427bg9cIFSjpKJZUFIGXOocEh%2Fr6eUa5AocT01LyURKAgkF1QlF8ckpqY6wcx7c2GNW9aNgLFk%2FPzkMVfb5jxuqcBKF6eWJSXmZfulJqTo2SVlphTnKqjlJaZl1mcAREqKSpNrQXampiUA9QXXa1UXJKYlwwyIiDIPxhoQHFBampyRgjEVW%2FmtUJcmZRfARXy8w%2FydfQBOTwTZLOZAYQVkFoEco6SVV5pTg5cKLggNTEb6ByYcDGIn1oE4dbqINnu7O83gLb7uYaGBIHNRXMASlQhnBHi6esa7%2BQY7OoCdwqKzRDHmBkYYHGLoZEByQGxdc6bRa0KrzfMeTNtBz3CA2taoIcjYmsBmUkxug%3D%3D',
+          ),
+        },
+        {
+          label: '2:2 CEDA 토론',
+          href: createTableShareUrl(
+            'eJzllD9PwkAUwL9Kc3MHaIjRbvzpQCItoWXRGHOUAxrLtWkhagiJQzEmOOBCGIqpOujgUAcSTfhE9PwOXqkCKmFRiInb3S937%2F3y7t5rAa0M%2BESMY4GGKwbgWwDDOgI8CF4ccjcm%2FTHpDhmO55i0kEkyr%2BdecOMBFjROzfBUuigrUi67J1AEqwiXIYV0bVqGrSBYF6NgxH8kzhPlqoEXeeAPgsszyo%2BhhTVcTSFdB3wF6jZiQUXDml2LUMNqojbNCks6vbffAnYDYjUMkS9IMg1gmwipNSWyItedyLJknLwjUSrkkruhuBZm3olFqzyyQh3A46auz5BsInhEdT6wHe6RFW3b7EJ2USgqhWncLwJXxHMY0nUnvrPKY%2BuXPNKS%2BK0Kk1GP%2BA8Mub8gw8Eqifj2Gi3%2B31ss%2B5Gbf4ufViPOrVukR1xvNk%2FmHko2JxymkrKQmbl8yhzJJBbqNHeZSv%2F9H7K0T0Yuue0wge%2BS%2FvMm2mXp4NyExEH7DcztU4k%3D',
+          ),
+        },
+      ],
+    },
+    {
+      title: '이감',
+      subtitle: '경희대',
+      logoSrc: igam,
+      actions: [
+        {
+          label: '하이브리드 토론',
+          href: createTableShareUrl(
+            'eJzFkk1LAkEYx7%2BKPOc9%2BAIhe1Pbg5C74q6XImLUUZfW2WXXqBAhIiPIgxCFhzW0Q3TwsEWCn8kZv0OzrZm9kBJkt3l%2BzPyfH88zDdBLIMbiMQF0UjZBbABBNQwisN7zxOuwy15oet3lBR236f2QXrmh6XmfDvogQP3Y8m%2Bm8qqmZNLbEkeogkkJccjPlm06GkY1eRboDdnZI%2BdFkyxy6nVp%2B4TzQ2QTnVSS2DBALCPDwQKUdaI71QXU5G1RweAPdxrg1BEp%2BhnZnKLyBMfCuFjVAi122wo0C%2BbRDMlKLpPY8s11v3UkHg6OWWz7QiCSA8OYI9XCaJ8LvWHHr7HNcyL06QKawoJASpG%2FCExGHeY9sIHHToc%2FakR%2FqRFdSWOtc%2FhuEf8wB1nKa7nX6E%2Bj6DC3P%2F%2B%2F7yZaOiPtJROqtDm3%2BdA70NkIh5fb%2BOXynYxcdtcKUc9lN%2BM%2FmUlspdWsy2O3%2BQJwVp3c',
+          ),
+        },
+        {
+          label: '2:2 자유 토론',
+          href: createTableShareUrl(
+            'eJyrVspMUbIyMTTQUcrMS8tXsqpWykvMTVWyUnozd8urDRPedM9VMLIyUngzb8KbOQveti14vXCBko5SSWUBSI1zaHCIv69nlCtQKDE9NS8lESgIZBcU5ReHpCbm%2BkGN2rDmTctGoHhyfh6y%2BOsNM173NADFyxOL8jLz0p1Sc3KUrNISc4pTdZTSMvMyizOQhGqB1iYm5QA1RlcrFZck5iWDzAgI8g8GmlBckJqanBECcdabea0QZyblV0CF%2FPyDfB19QC7PBFltaQBhBaQWgdyjZJVXmpMDFwouSE3MBroHJlwM4qcWQbi1Oki2O%2Fv7DaDtfq6hIUFgc9EcgBJXCGeEePq6xjs5Bru6wJ2CYjPEMeZGBljcYggSJTEgts55s6hV4fWGOW%2Bm7aBHeGBNC%2FRwRGwtADF%2FL8A%3D',
+          ),
+        },
+      ],
+    },
+    {
+      title: '한토막',
+      subtitle: '한양대',
+      logoSrc: hantomak,
+      actions: [
+        {
+          label: '반토막 토론',
+          href: createTableShareUrl(
+            'eJyrVspMUbIytjTTUcrMS8tXsqpWykvMTVWyUno7dc7btgWvl3e%2B6Z6r8HrDDAhHAUQtXKCko1RSWQBS5hwaHOLv6xnlChRKTE%2FNS0kECgLZBUX5xSGpibl%2BENPebFjzpmUjUDw5Pw9ZHGjw654GoHh5YlFeZl66U2pOjpJVWmJOcaqOUlpmXmZxBkSopKg0tRZoa2JSDlBfdLVScUliXjLIiIAg%2F2CgAcUFqanJGSEQV72Z1wpxZVJ%2BBVTIzz%2FI19EH5PBMkM2GFgYQZkBqEcg9SlZ5pTk5cKHggtTEbKB7YMLFIH5qEdAcw9ebOpRqdZAc4OzvN%2Fgc8GrrhDcbVrxZuOFN0xqaOMMIwxnYImIAnOHnGhoSBDYaLUYmvJmzAJ58ES4J8fR1jXdyDHZ1gbsGxW6Ic8yNDLC4xtIAyS0gXYQTxtY5bxa1AjPUnDfTduANESMyQ8SYqIihlztiawHvP5m7',
+          ),
+        },
+        {
+          label: 'CEDA 토론',
+          href: createTableShareUrl(
+            'eJyrVspMUbIytjTXUcrMS8tXsqpWykvMTVWyUno7dc7btgWvl3e%2B6Z6r4Ozq4qgA4i5coKSjVFJZAFLhHBoc4u%2FrGeUKFEpMT81LSQQKAtkFRfnFIamJuX4Qg95sWPOmZSNQPDk%2FD1n89YYZr3sagOLliUV5mXnpTqk5OUpWaYk5xak6SmmZeZnFGRChkqLS1FqgrYlJOUB90dVKxSWJeckgIwKC%2FIOBBhQXpKYmZ4RAXPVmXivElUn5FVAhP%2F8gX0cfkMMzQTYbmRhAmAGpRSD3KFnllebkwIWCC1ITs4HugQkXg%2FipRUBzDF9v6lCq1UFygLO%2FH4YDXm2d8GbDijcLN7xpWoPPGYYWZDrDiChn0DUcsEUEzcOBOGfQMByIi4gBCAc6pwfMcBiQ9EBcdICKHfzhQOMESVcH0DkEiEsJNHdAbC0Axtlw5w%3D%3D',
+          ),
+        },
+      ],
+    },
+    {
+      title: '서방정토',
+      subtitle: '서강대',
+      logoSrc: seobangjeongto,
+      actions: [
+        {
+          label: 'CEDA 토론',
+          href: createTableShareUrl(
+            'eJzFlMFLwlAcx%2F%2BV8TvvkHrJ3cw8BLmJzkvR4alPHc23sSkVIkTMCOxQh6LDitmpwMMKhP4m9%2Fofeq9ZSAYOYfP2e1%2Fevu%2FD9%2FtjfdAaIGWyWRE00jRA6gNBHQwSUMcN%2FFfq3X1eenT0KOQLuzmBzcHYAxG6Zya%2FlK9WVKW4d1BgEmph0kBMZLNpGbaKUUeee%2FkT6rwxvW6QRT3wH4Lrc6afIItopLWDdR2kJtJtLEJTI5rdDqWu1cMD9iqq6ey7wz7YXUTq3KJUVirMwDYxrrfVkIo%2BDUPKmnE6l2SlXMztc3CNv5xKb4VjCVucByTS0%2FVfqWJidMx4fmSbn7HFfFLB%2BxUMxAWAvCIvAcymN9R%2FEejYpxeTWDjSkTgSDeK%2FJuIPIhpHjEFEa2ITQSS8EctBbGYjljnkQlUtf1v%2FyeKWeo5AR%2B7Md%2BJA4ceVjfB%2F4IpGttdMIhOpkUQB1kwg3p3cOACduvR5KAS%2BS%2B8%2FYuGI1kRSHEeDL6cNB4E%3D',
+          ),
+        },
+        {
+          label: '국회의장배 토론',
+          href: createTableShareUrl(
+            'eJzNkkFLAkEUx7%2FKMuc9rOah9qa2ByF3RbdLETHqqEvr7LKrVIgQsUWgBzsEEirrISgwmAS%2FlDt%2Bh2Zd2ywlJJC6zfyY%2Bb8f770G0IpAjAkCDzRcMoDYABhWERABdXoeeaHuw%2BzWpa0%2BN528zh7btN%2BlgyePEI5hb%2BgCHtQuTf998jCnKunUkcQQLCNchAyys2kZtopgVV7EkhF13hgvGHiZe6Trta8YP4cW1nA5gXQdiCWo24gHJQ1rdiVANauOmqwqzOvs33ED2DWIC35EJqvkWIBtIlSoqIEVHdwElnnjYoFkJZuOH%2Fjiml85EhWCYwZZvg8QcV3XQ5QzETxjPh%2FY9u%2FIYjkRb3wHmvySQFKR%2F5%2FAdNKh5JmjQ0KvR1vxiK54rJvEX3jI0qGanUd%2Fm0mH9txwgT9N1FRaOk3Ec9J%2BaPOldqAT2xXW2My1Qxn%2F22Yq99R1ONrqTYnzU1f2fteUFY%2B1oxmTbe3ozmY7um2Bk%2BY7y2LI5w%3D%3D',
+          ),
+        },
+      ],
+    },
+  ],
+  THREE: [
+    {
+      title: '오산시',
+      subtitle: '',
+      logoSrc: osansi,
+      actions: [
+        {
+          label: '오산시 토론 - 초등부',
+          href: createTableShareUrl(
+            'eJyrVspMUbIy0FHKzEvLV7KqVspLzE1VslJ6M2PJm6YNb7rnKLxtW%2FB64QIFXYU3WzpeT974eluDko5SYnpqXkoiUB2QXZ5YlJeZl%2B6UmpOjZJWWmFOcqqOUlpmXWZyBIlRQlF8ckpqY6we1YMOaNy0bgdqT8%2FOQxV9vmPG6p0GpVkepJDEpBygSXa1UXJKYlwySDAjyDwZqKS5ITU3OCKksABu0afXrTR1vlu9QgBip8HrDnDfTdgCVJeVXQNX4%2BQf5OvoAhUoyQZYYmRhAmAGpRSCrlazySnNy4ELBBamJ2UAfwYSLQfzUIgi3VgfJPX6uoSFBYINRnTRv4psFLQrA0Hu1oQWfQ8zIc4eSEoornP39CIfKm%2B41r9fgDRVDi6EdKhjuwB8ukIQ2AlILhjvw5yJouIzA9IItXF5PnDDSShei8hFGuIzA9II%2FXEbLF7zhMgLTC9Zyt2XHaPmCrZ6Ghwt98lFsLQBY%2BCHr',
+          ),
+        },
+        {
+          label: '오산시 토론 - 중등부',
+          href: createTableShareUrl(
+            'eJztVTFLw0AY%2FSvhmyNUC1KyaXEQbFLadFEcru21DaaXkFRUSkEkiFAHiyAdikQsONgh7SAd%2FEXe%2BR%2B8M7FUDHERl3S7e%2Fnu3cvjfd91waiDspHLymCQhgVKFwhqY1CADcfsImD9kfR%2B6dMHX1qT2HhAb6f05Rxk6JzZoipfKetaYXd%2Fh0OoiUkdcTA6wB5fmT%2FiH2zHcnWM2mrEHEyYN%2BV4zSLLOA2G9FpwnyCHGKS5jU0TlAYyXSxDwyCG21qCelwDqpr84EEX3A4iNcFRLGllzuDaGNdaeqiRzZ7p7Io9zaXwZokGI3Y352VV6zSqUbVSYWtP%2FJchtGQzmXBZxI5QCAo5Ns0FVLYxOuIKv2BX7LETbnvykh51p6KXPom%2FS7ofMN%2BTuLtvgZckZPOPdOQ19XdfWH9CJ4m%2BrOdS5UuYyDTmJbmPIl9SmJc4X%2BjgZjVfYvrohy8pzEuyL6v5kuhLCvMSO3e9%2BWq%2BxL3TC1%2F%2Bp48Oex87ajH7',
+          ),
+        },
+        {
+          label: '오산시 토론 - 고등부',
+          href: createTableShareUrl(
+            'eJyrVspMUbIysjDRUcrMS8tXsqpWykvMTVWyUnozY8mbpg1vuucovG1b8HrhAgVdhVebF7yevPH1tgYlHaWSygKQKufQ4BB%2FX88oV6BQYnpqXkoiUBCq4c3iPW8WzAFKFBTlF4ekJub6QU3esOZNy0ageHJ%2BHrL46w0zXveAzC5PLMrLzEt3Ss3JUbJKS8wpTtVRSsvMyyzOQBKqBbohMSkHqDG6Wqm4JDEvGWRGQJB%2FMNCE4oLU1OSMEIgb32xa%2FXpTx5vlOxQgNiu83jDnzbQdQGVJ%2BRVQNX7%2BQb6OPiB%2FZYLcYmxmAGEGpBaBXKhklVeakwMXCi5ITcwGuhAmXAzipxZBuLU6SO7xcw0NCQIbjOqkeRPfLGhRAIbuqw0t%2BBxCLXc4%2B%2FsRDpc33Wter8EbLoYWIypcIClyJKYX%2FPkIGi4jML1gC5fXEyeMli9Y8hFGuIzA9II%2FXEbLF7zhMgLTC9Zyt2XHaPmCrZ6Ghwt98lFsLQAnZTI8',
+          ),
+        },
+      ],
+    },
+    {
+      title: '노곳떼',
+      subtitle: '한국외대',
+      logoSrc: nogotte,
+      actions: [
+        {
+          label: '자유토론',
+          href: createTableShareUrl(
+            'eJyrVspMUbIytrDQUcrMS8tXsqpWykvMTVWyUnrduuPV5s2vp%2B150z1X4c28CW%2FmLHjbtuD1wgVKOkollQUgJc6hwSH%2Bvp5RrkChxPTUvJREoCCQXVCUXxySmpjrBzHpzYY1b1o2AsWT8%2FOQxV9vmPG6pwEoXp5YlJeZl%2B6UmpOjZJWWmFOcqqOUlpmXWZyBJFQLtDYxKQeoMbpaqbgkMS8ZZEZAkH8w0ITigtTU5IwQiLPezGuFODMpvwIq5Ocf5OvoA3J5JshqMwMIKyC1COQeJau80pwcuFBwQWpiNtA9MOFiED%2B1CMKt1UGy3dnfbwBt93MNDQkCm4vmAJS4wukMQyMDKjkEWyS82rRhACOBtrbH1gIA5Ksorg%3D%3D',
+          ),
+        },
+        {
+          label: 'CEDA 토론',
+          href: createTableShareUrl(
+            'eJyrVspMUbIytrDUUcrMS8tXsqpWykvMTVWyUnrduuPV5s2vp%2B150z1XwdnVxVHhbduC1wsXKOkolVQWgFQ4hwaH%2BPt6RrkChRLTU%2FNSEoGCQHZBUX5xSGpirh%2FEoDcb1rxp2QgUT87PQxZ%2FvWHG654GoHh5YlFeZl66U2pOjpJVWmJOcaqOUlpmXmZxBpJQLdDaxKQcoMboaqXiksS8ZJAZAUH%2BwUATigtSU5MzQiDOejOvFeLMpPwKqJCff5Cvow%2FI5Zkgqw2NDCDMgNQikIOUrPJKc3LgQsEFqYnZQAfBhItB%2FNQioDmGrzd1KNXqIDnA2d8PwwFvZ059M3fHm%2BUdr9fswOcMMzJdYUSUK%2BgaDNjigf7BgM0VoFRGo2AwHhSpgbg0SddgGIjUgBkMfq6hIUFgk9HyxYQ3cxbAyzKcDrEk0yUgLnHumPhmQYvCm%2B45rza00CJiMBxC5%2BxBXDFFVwdgrS62znmzqFXh9YY5b6bhTZk0Lifo5Y7YWgA%2FKNwf',
+          ),
+        },
+        {
+          label: '의회식 토론',
+          href: createTableShareUrl(
+            'eJzN001LAkEYB%2FCvInNeyFUI25uWByFXcddLETHqqEvrKK5RIYKERqAHgxIJlbVTBw9bYnjoE%2B2O36EZt3whKRHMbjN%2FZp%2F58ew8RaAkgODec3JAwcksEIoAwwwCArCqI3MwsJrvpNZxkE5r%2FFhnq%2FGNbvV0wIHCVY4d249KcigYOPLTCKYQTkAa0nUun9VkBDOiXY0YfVJ5oXk8i%2Bdzy2hZ9TLNL2AeKzjlQ6oKhCRUNcSBpIIVLT0Xlei1MKbSD4%2BLQCtAHGc1wpGQRCtoOYTiadlmkW7VZsayl5%2BRGIoEvYdMrrCreZfTXoZRnoGAgM9VdRpJOQTPKOgr1tge5Wkd3nq9BSVuDrAfErcLWNqBt3vTKNsMzsH6bDxshONarR%2Fb44j%2BqByZlF4Q8QI%2Fe80zhxwI%2Bk99Xsl%2FMLUs3GxjeI%2FzdwvbriIh3QZp62tb3LvLLJMGrkG5I3rFQWpt06hs4v98gyx7LOawQYxn0jPIdf9HhGejI%2FRPGGTYJk9VOjNt0hxtZmZ23KsN8Z9JTkofiV5mow%3D%3D',
+          ),
+        },
+      ],
+    },
+    {
+      title: '코기토',
+      subtitle: '고려대',
+      logoSrc: kogito,
+      actions: [
+        {
+          label: '2:2 일반토론대회 형식',
+          href: createTableShareUrl(
+            'eJzFkjFPwkAYhv9Kc3MHIAzaDbADibSElkVjzAEHNJZr00LUEBIHcJFEB0Vi0KAmTg41UcOgf4ge%2F8HvLBLALiYGtrunufd78vZrIqOEpHgkLiKDli0kNRHFNYIkxD4vxyNvcjpkZ7dCTIoJ7PrVf%2BLAvx%2F63ZPJTVeY9K%2FgKxJR%2Fdjmb1J5TVcz6R0ZEK4QWsIA4Ww7lqsTXFOm0d4za78AL1p0nvteH4KBH2KHGrSSJKaJpDI2XSKiskENtxqgutMgLZiKCya8220it45pkUdkc6oGAa5NSLGqB1bsrgPKQAvW0RQpai6T2ObiBp%2B8GQlOWeJwHSTRhmnOkGYTfAA6P9jld%2BIE15Y4Nz2lKmucrsh5PfeduyRwwQbD4L8taOjpjLyfTGjy1kxlYXIgE49FQlyinP6xiMcP%2F7w9foe1%2Be2yVEl04586Cd2HdYiENvI2YA8dwfcGrDdaxYaEtrEKib3WF4vqn1s%3D',
+          ),
+        },
+        {
+          label: '3:3 통일토론대회 형식',
+          href: createTableShareUrl(
+            'eJztlU9LAkEYxr%2FKMmcP9pfaW4mHIF3R9VJ0GHXUpXV22VUqRPCgEihUUCGhYXWoQ4eN2PBgX2h39jv0rmshIdLFXQ%2FdZn7DvM%2FDMy%2FvVJGUQ%2Fx6eCOEJJpXEF9FFJcI4hH7vLaGhtMasHafW%2BPXOKdlsv4IgP0wsDt1567DOd0bOEUhVD5T3TuRdEoUYnsHUUC4QGgOA4S1qim6SHApPiltvLLGG%2FCsQqe5bXShMPATrFGJFnaJLCM%2Bj2WdhFBeopJe9FBZq5AaqOKMDPcOq0gvY5p1SySSQgoK6Coh2aLouWL3TbAMNKOcTlBcSMZ29l3jkqu8shr2lgmiuX4QTyuy%2FINSKsHH4Ocb6%2B6eaN62FpqSjwjxIOXj0bSYHBf%2B5eCKDRoca%2FcsozHPyOYCY7DMS2a8sOdz1u%2F6EsasVrDbpv1enye%2FvUB13yOY9Q7%2BRbAs3TizEWDUBDgTfJRf5ldgTyP7omF9wE8y%2FlbmBrK1yBkdhJH%2FRP5kxOyxxyZnGz12Owzs4%2FDHxVHtCye%2Bd2A%3D',
+          ),
+        },
+        {
+          label: '3:3 통상토론대회 형식',
+          href: createTableShareUrl(
+            'eJyrVspMUbIyMTDTUcrMS8tXsqpWykvMTVWyUnqzd8qrHRveti140z1XwdjKWOFt29Y3zY1AgdcLF7zuaXg7q0fh7YypQFklHaWSygKQHufQ4BB%2FX88oV6BQYnpqXkoiUBDILijKLw5JTcz1gxq9Yc2blo1A8eT8PGTx1xtmAA0GipcnFuVl5qU7pebkKFmlJeYUp%2BoopWXmZRZnQIRKikpTa4G2JiblAPVFVysVlyTmJYOMCAjyDwYaUFyQmpqcEQJx1Zt5rUAnA0WT8iugQn7%2BQb6OPiCHZ4JsNjQygDADUotA7lGyyivNyYELBRekJmYD3QMTLgbxU4sg3FodJOud%2Ff0G0no%2F19CQILDBaC6Y8GbOAkjMobgjxNPXNd7JMdjVBe4WFJshjjFHch7CLWBHkxYSrzZtoFdIYEsHNLY%2BthYAnmMxuw%3D%3D',
+          ),
+        },
+      ],
+    },
+  ],
+};
diff --git a/src/constants/errors.ts b/src/constants/errors.ts
new file mode 100644
index 00000000..76717204
--- /dev/null
+++ b/src/constants/errors.ts
@@ -0,0 +1,10 @@
+export const ERROR_STATUS_TABLE: Record<number, string> = {
+  400: '400 잘못된 요청',
+  401: '401 권한 없음',
+  403: '403 거부됨',
+  404: '404 찾을 수 없음',
+  500: '500 내부 서버 오류',
+  502: '502 게이트웨이 불량',
+  503: '503 서비스가 일시적으로 중단됨',
+  504: '504 게이트웨이 시간 초과',
+} as const;
diff --git a/src/constants/sample_table.ts b/src/constants/sample_table.ts
index 7e72ae87..cf7ad335 100644
--- a/src/constants/sample_table.ts
+++ b/src/constants/sample_table.ts
@@ -6,8 +6,6 @@ export const SAMPLE_TABLE_DATA: DebateTableData = {
     name: '나의 시간표',
     prosTeamName: '찬성',
     consTeamName: '반대',
-    finishBell: true,
-    warningBell: false,
   },
   table: [
     {
@@ -18,6 +16,7 @@ export const SAMPLE_TABLE_DATA: DebateTableData = {
       timePerSpeaking: null,
       timePerTeam: null,
       speaker: '1번',
+      bell: [{ type: 'BEFORE_END', time: 0, count: 2 }],
     },
     {
       boxType: 'NORMAL',
@@ -27,6 +26,7 @@ export const SAMPLE_TABLE_DATA: DebateTableData = {
       timePerSpeaking: null,
       timePerTeam: null,
       speaker: '1번',
+      bell: [{ type: 'BEFORE_END', time: 0, count: 2 }],
     },
     {
       boxType: 'NORMAL',
@@ -36,6 +36,7 @@ export const SAMPLE_TABLE_DATA: DebateTableData = {
       timePerSpeaking: null,
       timePerTeam: null,
       speaker: '2번',
+      bell: [{ type: 'BEFORE_END', time: 0, count: 2 }],
     },
     {
       boxType: 'NORMAL',
@@ -45,6 +46,7 @@ export const SAMPLE_TABLE_DATA: DebateTableData = {
       timePerSpeaking: null,
       timePerTeam: null,
       speaker: '2번',
+      bell: [{ type: 'BEFORE_END', time: 0, count: 2 }],
     },
     {
       boxType: 'TIME_BASED',
@@ -54,6 +56,7 @@ export const SAMPLE_TABLE_DATA: DebateTableData = {
       timePerSpeaking: 120,
       timePerTeam: 420,
       speaker: '2번',
+      bell: [{ type: 'BEFORE_END', time: 0, count: 2 }],
     },
     {
       boxType: 'NORMAL',
@@ -63,6 +66,7 @@ export const SAMPLE_TABLE_DATA: DebateTableData = {
       timePerSpeaking: null,
       timePerTeam: null,
       speaker: '3번',
+      bell: [{ type: 'BEFORE_END', time: 0, count: 2 }],
     },
     {
       boxType: 'NORMAL',
@@ -72,6 +76,7 @@ export const SAMPLE_TABLE_DATA: DebateTableData = {
       timePerSpeaking: null,
       timePerTeam: null,
       speaker: '3번',
+      bell: [{ type: 'BEFORE_END', time: 0, count: 2 }],
     },
   ],
 } as const;
diff --git a/src/constants/urls.ts b/src/constants/urls.ts
index 1af36251..4f604f97 100644
--- a/src/constants/urls.ts
+++ b/src/constants/urls.ts
@@ -4,4 +4,5 @@ export const LANDING_URLS = {
     'https://bustling-bathtub-b3a.notion.site/2071550c60cf80f18395e03440fba80a?source=copy_link',
   TERMS_OF_SERVICE_URL:
     'https://bustling-bathtub-b3a.notion.site/1b01550c60cf8020b34adff2d40cf605?source=copy_link',
+  TEMPLATE_REGISTER_URL: 'https://forms.gle/471ojcPqSdkWqVCaA',
 } as const;
diff --git a/src/hooks/mutations/useAddDebateTable.ts b/src/hooks/mutations/useAddDebateTable.ts
index 6ebd0bd6..5acf3d8f 100644
--- a/src/hooks/mutations/useAddDebateTable.ts
+++ b/src/hooks/mutations/useAddDebateTable.ts
@@ -1,10 +1,10 @@
-import { useMutation } from '@tanstack/react-query';
 import { PostDebateTableResponseType } from '../../apis/responses/debateTable';
 import { getRepository } from '../../repositories/DebateTableRepository';
 import { DebateTableData } from '../../type/type';
+import { usePreventDuplicateMutation } from './usePreventDuplicateMutation';
 
 export default function useAddDebateTable(onSuccess: (id: number) => void) {
-  return useMutation({
+  return usePreventDuplicateMutation({
     mutationFn: async (params: DebateTableData) => {
       const repo = getRepository();
       return repo.addTable(params);
diff --git a/src/hooks/mutations/usePreventDuplicateMutation.ts b/src/hooks/mutations/usePreventDuplicateMutation.ts
new file mode 100644
index 00000000..d0c2ae9c
--- /dev/null
+++ b/src/hooks/mutations/usePreventDuplicateMutation.ts
@@ -0,0 +1,52 @@
+import { useRef, useCallback } from 'react';
+import {
+  type DefaultError,
+  useMutation,
+  type UseMutationOptions,
+  type UseMutationResult,
+} from '@tanstack/react-query';
+
+export function usePreventDuplicateMutation<
+  TData = unknown,
+  TError = DefaultError,
+  TVariables = void,
+  TContext = unknown,
+>(
+  options: UseMutationOptions<TData, TError, TVariables, TContext>,
+): UseMutationResult<TData, TError, TVariables, TContext> {
+  // useRef를 통해 요청 여부를 저장
+  const isMutatingRef = useRef(false);
+
+  // 요청이 끝난 후 실행
+  const onSettled: UseMutationOptions<
+    TData,
+    TError,
+    TVariables,
+    TContext
+  >['onSettled'] = (data, error, variables, context) => {
+    isMutatingRef.current = false;
+    options.onSettled?.(data, error, variables, context);
+  };
+
+  const mutation = useMutation({ ...options, onSettled });
+
+  // 중복 요청을 방지하는 mutation wrapper
+  const preventDuplicateMutate = useCallback(
+    (
+      variables: TVariables,
+      mutateOptions?: Parameters<typeof mutation.mutate>[1],
+    ) => {
+      if (isMutatingRef.current) {
+        console.warn('이미 요청이 처리 중 입니다.');
+        return;
+      }
+      isMutatingRef.current = true;
+      mutation.mutate(variables, mutateOptions);
+    },
+
+    [mutation],
+  );
+
+  // 중복 요청을 방지하는 커스텀 mutate를 반환
+  return { ...mutation, mutate: preventDuplicateMutate };
+}
diff --git a/src/hooks/mutations/usePutDebateTable.ts b/src/hooks/mutations/usePutDebateTable.ts
index 03397723..b9b30d5b 100644
--- a/src/hooks/mutations/usePutDebateTable.ts
+++ b/src/hooks/mutations/usePutDebateTable.ts
@@ -1,14 +1,18 @@
-import { useMutation } from '@tanstack/react-query';
 import { DebateTableData } from '../../type/type';
 import { PutDebateTableResponseType } from '../../apis/responses/debateTable';
 import { getRepository } from '../../repositories/DebateTableRepository';
+import { usePreventDuplicateMutation } from './usePreventDuplicateMutation';
 
 interface PutDebateTableParams extends DebateTableData {
   tableId: number;
 }
 
 export function usePutDebateTable(onSuccess: (tableId: number) => void) {
-  return useMutation<PutDebateTableResponseType, Error, PutDebateTableParams>({
+  return usePreventDuplicateMutation<
+    PutDebateTableResponseType,
+    Error,
+    PutDebateTableParams
+  >({
     mutationFn: ({ tableId, info, table }) => {
       const repo = getRepository();
       return repo.editTable({ id: tableId, info, table });
diff --git a/src/hooks/query/useGetDebateTableData.ts b/src/hooks/query/useGetDebateTableData.ts
index b1c4635e..6d4fd45f 100644
--- a/src/hooks/query/useGetDebateTableData.ts
+++ b/src/hooks/query/useGetDebateTableData.ts
@@ -10,5 +10,6 @@ export function useGetDebateTableData(tableId: number, enabled?: boolean) {
       return repo.getTable(tableId);
     },
     enabled,
+    throwOnError: false,
   });
 }
diff --git a/src/hooks/query/useGetDebateTableList.ts b/src/hooks/query/useGetDebateTableList.ts
index 7940f8f3..650e725a 100644
--- a/src/hooks/query/useGetDebateTableList.ts
+++ b/src/hooks/query/useGetDebateTableList.ts
@@ -1,8 +1,8 @@
-import { useQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 import { getDebateTableList } from '../../apis/apis/member';
 
 export function useGetDebateTableList() {
-  return useQuery({
+  return useSuspenseQuery({
     queryKey: ['DebateTableList'],
     queryFn: () => getDebateTableList(),
   });
diff --git a/src/hooks/useBreakpoint.ts b/src/hooks/useBreakpoint.ts
new file mode 100644
index 00000000..ee668232
--- /dev/null
+++ b/src/hooks/useBreakpoint.ts
@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+
+const breakpoints = {
+  md: 768,
+  lg: 1280,
+  xl: 1600,
+} as const;
+
+export type Breakpoint = 'default' | keyof typeof breakpoints;
+
+export default function useBreakpoint() {
+  const [breakpoint, setBreakpoint] = useState<Breakpoint>('default');
+
+  useEffect(() => {
+    const handleResize = () => {
+      const { innerWidth, innerHeight } = window;
+
+      if (innerWidth >= breakpoints.xl && innerHeight > 1024) {
+        setBreakpoint('xl');
+      } else if (innerWidth >= breakpoints.lg) {
+        setBreakpoint('lg');
+      } else if (innerWidth >= breakpoints.md) {
+        setBreakpoint('md');
+      } else {
+        setBreakpoint('default');
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return breakpoint;
+}
diff --git a/src/hooks/useModal.tsx b/src/hooks/useModal.tsx
index 5292c5c1..dcdb1beb 100644
--- a/src/hooks/useModal.tsx
+++ b/src/hooks/useModal.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, useState, useCallback, useEffect } from 'react';
 import { GlobalPortal } from '../util/GlobalPortal';
-import { IoMdClose } from 'react-icons/io';
+import DTClose from '../components/icons/Close';
 
 interface UseModalOptions {
   closeOnOverlayClick?: boolean;
@@ -65,7 +65,7 @@ export function useModal(options: UseModalOptions = {}) {
           className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
           onClick={handleOverlayClick}
         >
-          <div className="relative overflow-hidden rounded-lg bg-white shadow-lg">
+          <div className="relative overflow-hidden rounded-[20px] bg-white shadow-lg">
             {children}
             {isCloseButtonExist && (
               <button
@@ -74,7 +74,7 @@ export function useModal(options: UseModalOptions = {}) {
                 className={`absolute right-4 top-4 text-3xl ${closeButtonColor}`}
                 aria-label="모달 닫기"
               >
-                <IoMdClose />
+                <DTClose className="size-[32px]" />
               </button>
             )}
           </div>
diff --git a/src/hooks/useTableShare.tsx b/src/hooks/useTableShare.tsx
index b52deaee..8f8f9cd4 100644
--- a/src/hooks/useTableShare.tsx
+++ b/src/hooks/useTableShare.tsx
@@ -7,7 +7,6 @@ import { createTableShareUrl } from '../util/arrayEncoding';
 export function useTableShare(tableId: number) {
   const { isOpen, openModal, closeModal, ModalWrapper } = useModal();
   const [copyState, setCopyState] = useState(false);
-  const [isUrlReady, setIsUrlReady] = useState(false);
   const [shareUrl, setShareUrl] = useState('');
   const baseUrl =
     import.meta.env.MODE !== 'production'
@@ -21,22 +20,34 @@ export function useTableShare(tableId: number) {
       console.error('Failed to copy: ', err);
     }
   };
-  const data = useGetDebateTableData(tableId, isOpen);
 
+  const {
+    data,
+    isLoading: isFetching,
+    isError: isFetchError,
+    refetch,
+    isRefetching,
+    isRefetchError,
+  } = useGetDebateTableData(tableId, isOpen);
+  const isLoading = isFetching || isRefetching;
+  const isError = isFetchError || isRefetchError;
+
+  // Process URL when data is successfully fetched
   useEffect(() => {
-    if (data.data) {
-      setShareUrl(createTableShareUrl(baseUrl, data.data));
-      setIsUrlReady(true);
+    if (data) {
+      setShareUrl(createTableShareUrl(baseUrl, data));
     }
   }, [baseUrl, data]);
 
+  // Close indicator after 3 seconds
+  // which tells user that URL is copied to clipboard
   useEffect(() => {
     if (copyState) {
       setTimeout(() => {
         setCopyState(false);
       }, 3000);
     }
-  });
+  }, [copyState]);
 
   const TableShareModal = () =>
     isOpen ? (
@@ -44,8 +55,10 @@ export function useTableShare(tableId: number) {
         <ShareModal
           shareUrl={shareUrl}
           copyState={copyState}
-          isUrlReady={isUrlReady}
-          onClick={() => handleCopy()}
+          isLoading={isLoading}
+          isError={isError}
+          onRefetch={() => refetch()}
+          onCopyClicked={() => handleCopy()}
         />
       </ModalWrapper>
     ) : null;
diff --git a/src/index.css b/src/index.css
index b7483950..41c7d9bc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,54 +5,78 @@
 @layer base {
   body {
     @apply font-pretendard;
-    @apply bg-background-default;
+    @apply bg-default-white;
+  }
+
+  html,
+  body {
+    @apply text-default-black;
   }
 }
 
-/* For buttons */
-.button {
-  @apply rounded-[24px] border-[2px] border-neutral-700 text-[24px] font-bold transition-colors duration-200;
+/* Text styles */
+.text-display {
+  @apply text-display-raw;
 }
 
-.button.enabled {
-  @apply bg-background-default hover:bg-brand-main text-neutral-900;
+.text-title {
+  @apply text-title-raw;
 }
 
-.button.enabled-hover-neutral {
-  @apply bg-background-default hover:bg-neutral-300 text-neutral-900;
+.text-subtitle {
+  @apply text-subtitle-raw;
 }
 
-.button.disabled {
-  @apply bg-neutral-300 text-neutral-500 border-none;
+.text-detail {
+  @apply text-detail-raw;
 }
 
-/* For small buttons */
-.small-button {
-  @apply rounded-[24px] border-[2px] border-neutral-700 text-[20px] font-bold transition-colors duration-200;
+.text-body {
+  @apply text-body-raw;
 }
 
-.small-button.enabled {
-  @apply bg-background-default hover:bg-brand-main text-neutral-900;
+.text-timer {
+  @apply text-timer-raw font-bold;
 }
 
-.small-button.enabled-hover-neutral {
-  @apply bg-background-default hover:bg-neutral-300 text-neutral-900;
+/* Timebox styles */
+.timebox {
+  @apply relative flex select-none flex-col items-center justify-center rounded-[12px] p-[12px];
 }
 
-.small-button.disabled {
-  @apply bg-neutral-300 text-neutral-500 border-none;
+.timebox.pros {
+  @apply bg-camp-blue/50 w-1/2;
 }
 
-p {
-  white-space: pre-wrap;
+.timebox.cons {
+  @apply bg-camp-red/50 w-1/2;
+}
+
+.timebox.neutral {
+  @apply bg-default-neutral/60 w-full;
 }
 
-.gradient-timer-running {
-  background-image: linear-gradient(270deg, #21c494, #21bdc4, #21c45d);
+.timebox.time-based {
+  @apply bg-brand/70 w-full;
 }
-.gradient-timer-warning {
-  background-image: linear-gradient(270deg, #f5d60a, #f5ba0a, #f5f30a);
+
+/* Button styles */
+.button {
+  @apply text-subtitle transition-colors duration-200 flex flex-row items-center justify-center h-[72px];
 }
-.gradient-timer-timeout {
-  background-image: linear-gradient(270deg, #f87171, #dc2626, #f43f5e);
+
+.button.enabled.brand {
+  @apply bg-brand font-bold text-default-black hover:bg-brand-hover;
+}
+
+.button.enabled.neutral {
+  @apply border-[2px] font-semibold border-default-disabled/hover bg-default-white text-default-black hover:bg-default-disabled/hover;
+}
+
+.button.disabled {
+  @apply bg-default-disabled/hover text-default-white cursor-not-allowed;
+}
+
+p {
+  white-space: pre-wrap;
 }
diff --git a/src/layout/components/footer/StickyFooterWrapper.tsx b/src/layout/components/footer/StickyFooterWrapper.tsx
index 9fea3723..3a52d507 100644
--- a/src/layout/components/footer/StickyFooterWrapper.tsx
+++ b/src/layout/components/footer/StickyFooterWrapper.tsx
@@ -4,7 +4,7 @@ export default function StickyFooterWrapper(props: PropsWithChildren) {
   const { children } = props;
 
   return (
-    <footer className="sticky bottom-0 flex w-full content-center items-center gap-1 px-8">
+    <footer className="sticky bottom-0 flex w-full flex-shrink-0 content-center items-center gap-1 px-8">
       {children}
     </footer>
   );
diff --git a/src/layout/components/header/StickyTriSectionHeader.stories.tsx b/src/layout/components/header/StickyTriSectionHeader.stories.tsx
new file mode 100644
index 00000000..086aa2bf
--- /dev/null
+++ b/src/layout/components/header/StickyTriSectionHeader.stories.tsx
@@ -0,0 +1,30 @@
+import { Meta, StoryObj } from '@storybook/react';
+import StickyTriSectionHeader from './StickyTriSectionHeader';
+import HeaderTableInfo from '../../../components/HeaderTableInfo/HeaderTableInfo';
+import HeaderTitle from '../../../components/HeaderTitle/HeaderTitle';
+
+const meta: Meta<typeof StickyTriSectionHeader> = {
+  title: 'Layout/StickyTriSectionHeader',
+  component: StickyTriSectionHeader,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StickyTriSectionHeader>;
+
+export const Default: Story = {
+  render: () => (
+    <StickyTriSectionHeader>
+      <StickyTriSectionHeader.Left>
+        <HeaderTableInfo name="테이블 이름" />
+      </StickyTriSectionHeader.Left>
+
+      <StickyTriSectionHeader.Center>
+        <HeaderTitle title="토론 주제" />
+      </StickyTriSectionHeader.Center>
+
+      <StickyTriSectionHeader.Right></StickyTriSectionHeader.Right>
+    </StickyTriSectionHeader>
+  ),
+};
diff --git a/src/layout/components/header/StickyTriSectionHeader.tsx b/src/layout/components/header/StickyTriSectionHeader.tsx
index 116afc70..c243f946 100644
--- a/src/layout/components/header/StickyTriSectionHeader.tsx
+++ b/src/layout/components/header/StickyTriSectionHeader.tsx
@@ -1,9 +1,6 @@
 import { PropsWithChildren } from 'react';
-import { IoMdHome } from 'react-icons/io';
 import { useNavigate } from 'react-router-dom';
 import useLogout from '../../../hooks/mutations/useLogout';
-import { IoLogIn, IoLogOut } from 'react-icons/io5';
-import IconButton from '../../../components/IconButton/IconButton';
 import { isLoggedIn } from '../../../util/accessToken';
 import {
   isGuestFlow,
@@ -12,13 +9,18 @@ import {
 import { oAuthLogin } from '../../../util/googleAuth';
 import { useModal } from '../../../hooks/useModal';
 import DialogModal from '../../../components/DialogModal/DialogModal';
+import DTHome from '../../../components/icons/Home';
+import DTLogin from '../../../components/icons/Login';
+
+// The type of header icons will be declared here.
+type HeaderIcons = 'home' | 'auth';
 
 function StickyTriSectionHeader(props: PropsWithChildren) {
   const { children } = props;
 
   return (
-    <header className="sticky top-0 min-h-20 border-b-[1px] border-neutral-900 px-6">
-      <div className="relative flex h-full items-center justify-between">
+    <header className="sticky top-0 h-[80px] flex-shrink-0 border-b-[3px] border-default-disabled/hover">
+      <div className="relative flex h-full items-center justify-between p-[16px]">
         {children}
       </div>
     </header>
@@ -27,89 +29,87 @@ function StickyTriSectionHeader(props: PropsWithChildren) {
 
 StickyTriSectionHeader.Left = function Left(props: PropsWithChildren) {
   const { children } = props;
-  return <div className="flex-1 items-start text-start">{children}</div>;
+  return (
+    <div className="flex h-full flex-1 items-center justify-start text-start">
+      {children}
+    </div>
+  );
 };
 
 StickyTriSectionHeader.Center = function Center(props: PropsWithChildren) {
   const { children } = props;
-  return <div className="flex-1 items-center text-center">{children}</div>;
+  return (
+    <div className="flex h-full flex-1 items-center justify-center text-center">
+      {children}
+    </div>
+  );
 };
 
-type HeaderIcons = 'home' | 'logout' | 'guest' | 'auth';
-
 StickyTriSectionHeader.Right = function Right(props: PropsWithChildren) {
-  const { children } = props;
+  const { children: buttons } = props;
   const navigate = useNavigate();
   const { mutate: logoutMutate } = useLogout(() => navigate('/home'));
   const { openModal, closeModal, ModalWrapper } = useModal({});
-  const defaultIcons: HeaderIcons[] = [];
+  const defaultIcons: HeaderIcons[] = ['home', 'auth'];
 
-  if (isGuestFlow()) {
-    defaultIcons.push('guest');
-  }
-
-  if (isLoggedIn()) {
-    defaultIcons.push('home', 'auth');
-  } else {
-    defaultIcons.push('auth');
-  }
+  const handleLoginStart = (keepData: boolean) => {
+    sessionStorage.setItem('keepGuestTable', String(keepData));
+    closeModal();
+    oAuthLogin();
+  };
 
   return (
     <>
-      <div className="flex flex-1 items-stretch justify-end gap-2 text-right">
-        {children && (
+      <div className="flex h-full flex-1 items-center justify-end gap-[12px] text-right">
+        {isGuestFlow() && (
           <>
-            {children}
+            {/* Guest mode indicator */}
+            <div className="animate-pulse rounded-full bg-neutral-300 px-4 py-2 font-semibold">
+              비회원 모드
+            </div>
+
+            {/* Vertical divider */}
             <div className="w-[1px] self-stretch bg-neutral-500" />
           </>
         )}
 
+        {/* Buttons given as an argument */}
+        {buttons}
+
+        {/* Normal buttons */}
         {defaultIcons.map((iconName, index) => {
           switch (iconName) {
-            case 'guest':
-              return (
-                <div key={`${iconName}-${index}`}>
-                  <div className="animate-pulse rounded-full bg-neutral-300 px-4 py-2 font-semibold">
-                    비회원 모드
-                  </div>
-                </div>
-              );
             case 'home':
               return (
-                <div key={`${iconName}-${index}`}>
-                  <IconButton
-                    icon={<IoMdHome size={24} />}
-                    onClick={() => {
-                      if (isGuestFlow()) {
-                        deleteSessionCustomizeTableData();
-                      }
-                      navigate('/');
-                    }}
-                  />
-                </div>
+                <button
+                  className="flex h-full items-center justify-center"
+                  key={`${iconName}-${index}`}
+                  onClick={() => {
+                    if (isGuestFlow()) {
+                      deleteSessionCustomizeTableData();
+                    }
+                    navigate('/home');
+                  }}
+                >
+                  <DTHome className="h-full" />
+                </button>
               );
             case 'auth':
-              if (isLoggedIn()) {
-                return (
-                  <div key={`${iconName}-${index}`}>
-                    <IconButton
-                      icon={<IoLogOut size={24} />}
-                      onClick={() => logoutMutate()}
-                      title="로그아웃"
-                    />
-                  </div>
-                );
-              } else {
-                return (
-                  <div key={`${iconName}-${index}`}>
-                    <IconButton
-                      icon={<IoLogIn size={24} />}
-                      onClick={() => openModal()}
-                      title="로그인"
-                    />
-                  </div>
-                );
-              }
+              return (
+                <button
+                  className="flex h-full items-center justify-center"
+                  key={`${iconName}-${index}`}
+                  onClick={() => {
+                    if (isLoggedIn()) {
+                      logoutMutate();
+                    } else {
+                      openModal();
+                    }
+                  }}
+                >
+                  <DTLogin className="h-full" />
+                </button>
+              );
             default:
               return null;
           }
@@ -120,18 +120,11 @@ StickyTriSectionHeader.Right = function Right(props: PropsWithChildren) {
         <DialogModal
           left={{
             text: '아니오',
-            onClick: () => {
-              deleteSessionCustomizeTableData();
-              closeModal();
-              oAuthLogin();
-            },
+            onClick: () => handleLoginStart(false),
           }}
           right={{
             text: '네',
-            onClick: () => {
-              closeModal();
-              oAuthLogin();
-            },
+            onClick: () => handleLoginStart(true),
             isBold: true,
           }}
         >
diff --git a/src/main.tsx b/src/main.tsx
index d2278b0a..a263a75f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,15 +7,6 @@ import router from './routes/routes.tsx';
 import './index.css';
 import { setupGoogleAnalytics } from './util/setupGoogleAnalytics.tsx';
 
-// console.log(`# URL = ${import.meta.env.VITE_API_BASE_URL}`);
-if (import.meta.env.DEV && !localStorage.getItem('accessToken')) {
-  localStorage.setItem('accessToken', 'mock-token');
-  console.log(
-    '# Fake access token has set to %{}',
-    localStorage.getItem('accessToken'),
-  );
-}
-
 // Functions that calls msw mocking worker
 if (import.meta.env.VITE_MOCK_API === 'true') {
   console.log('[msw] Mocking enabled.');
diff --git a/src/mocks/handlers/customize.ts b/src/mocks/handlers/customize.ts
index dab7c434..c0172fc7 100644
--- a/src/mocks/handlers/customize.ts
+++ b/src/mocks/handlers/customize.ts
@@ -19,8 +19,6 @@ export const customizeHandlers = [
         agenda: '토론 주제',
         prosTeamName: '찬성',
         consTeamName: '반대',
-        warningBell: true,
-        finishBell: true,
       },
       table: [
         {
@@ -49,6 +47,10 @@ export const customizeHandlers = [
           timePerTeam: null,
           timePerSpeaking: null,
           speaker: '발언자 1',
+          bell: [
+            { type: 'BEFORE_END', time: 0, count: 2 },
+            { type: 'AFTER_START', time: 5, count: 1 },
+          ],
         },
         {
           stance: 'PROS',
@@ -58,6 +60,10 @@ export const customizeHandlers = [
           timePerTeam: null,
           timePerSpeaking: null,
           speaker: '발언자 1',
+          bell: [
+            { type: 'BEFORE_END', time: 0, count: 2 },
+            { type: 'AFTER_START', time: 7, count: 3 },
+          ],
         },
         {
           stance: 'NEUTRAL',
@@ -67,6 +73,7 @@ export const customizeHandlers = [
           timePerTeam: null,
           timePerSpeaking: null,
           speaker: null,
+          bell: [{ type: 'BEFORE_END', time: 0, count: 2 }],
         },
         {
           stance: 'CONS',
@@ -76,6 +83,7 @@ export const customizeHandlers = [
           timePerTeam: null,
           timePerSpeaking: null,
           speaker: '발언자 2',
+          bell: [{ type: 'BEFORE_END', time: 0, count: 2 }],
         },
         {
           stance: 'PROS',
@@ -85,6 +93,7 @@ export const customizeHandlers = [
           timePerTeam: null,
           timePerSpeaking: null,
           speaker: '발언자 2',
+          bell: [{ type: 'BEFORE_END', time: 0, count: 2 }],
         },
       ],
     });
@@ -105,8 +114,6 @@ export const customizeHandlers = [
         agenda: '토론 주제',
         prosTeamName: '찬성',
         consTeamName: '반대',
-        warningBell: true,
-        finishBell: true,
       },
       table: [
         {
@@ -182,8 +189,6 @@ export const customizeHandlers = [
         agenda: '토론 주제',
         prosTeamName: '찬성',
         consTeamName: '반대',
-        warningBell: true,
-        finishBell: true,
       },
       table: [
         {
@@ -270,8 +275,6 @@ export const customizeHandlers = [
         agenda: '토론 주제',
         prosTeamName: '찬성',
         consTeamName: '반대',
-        warningBell: true,
-        finishBell: true,
       },
       table: [
         {
diff --git a/src/page/DebateEndPage/DebateEndPage.tsx b/src/page/DebateEndPage/DebateEndPage.tsx
new file mode 100644
index 00000000..f631fe5d
--- /dev/null
+++ b/src/page/DebateEndPage/DebateEndPage.tsx
@@ -0,0 +1,87 @@
+import { useNavigate, useParams } from 'react-router-dom';
+
+import clapImage from '../../assets/debateEnd/clap.png';
+import feedbackTimerImage from '../../assets/debateEnd/feedback_timer.png';
+import voteStampImage from '../../assets/debateEnd/vote_stamp.png';
+import GoToHomeButton from '../../components/GoToHomeButton/GoToHomeButton';
+
+export default function DebateEndPage() {
+  const { id: tableId } = useParams();
+  const navigate = useNavigate();
+
+  const handleFeedbackClick = () => {
+    navigate(`/table/customize/${tableId}/end/feedback`);
+  };
+
+  const backgroundStyle = {
+    background:
+      'radial-gradient(50% 50% at 50% 50%, #fecd4c21 0%, #ffffff42 100%)',
+  };
+
+  return (
+    <div
+      style={backgroundStyle}
+      className="flex min-h-screen flex-col items-center justify-center p-4 font-pretendard"
+    >
+      <div className="mb-12 flex items-center justify-center gap-4 text-center lg:mb-16 xl:mb-24">
+        <h1 className="text-3xl font-semibold text-default-black md:text-4xl lg:text-5xl xl:text-display-raw">
+          토론을 모두 마치셨습니다
+        </h1>
+        <img
+          src={clapImage}
+          alt="박수"
+          className="h-12 w-12 md:h-14 md:w-14 lg:h-16 lg:w-16 xl:h-20 xl:w-20"
+        />
+      </div>
+
+      <div className="flex flex-col items-center justify-center gap-8 md:flex-row md:gap-10 lg:gap-12 xl:gap-20">
+        {/* 피드백 타이머 카드 */}
+        <button
+          onClick={handleFeedbackClick}
+          className="flex h-[280px] w-[280px] flex-col items-center justify-center gap-6 rounded-[34px] border-2 border-default-disabled/hover bg-white transition-all duration-300 hover:border-brand/40 hover:shadow-[0px_0px_22px_6px_#FECD4C63] md:h-[300px] md:w-[300px] lg:h-[340px] lg:w-[340px] xl:h-[370px] xl:w-[370px] xl:gap-11"
+        >
+          <img
+            src={feedbackTimerImage}
+            alt="피드백 타이머"
+            className="h-20 w-20 md:h-24 md:w-24 lg:h-[96px] lg:w-[96px] xl:h-[108px] xl:w-[108px]"
+          />
+          <h2 className="text-lg font-bold text-default-black md:text-xl lg:text-2xl xl:text-title-raw">
+            피드백 타이머
+          </h2>
+          <p className="text-sm text-default-border md:text-base lg:text-lg xl:text-detail-raw">
+            심사평 및 Q&A용 타이머 →
+          </p>
+        </button>
+
+        {/* 승패투표 카드 */}
+        <button
+          onClick={handleFeedbackClick}
+          className="flex h-[280px] w-[280px] flex-col items-center justify-center gap-6 rounded-[34px] border-2 border-default-disabled/hover bg-[#e3e3e3] text-default-disabled/hover md:h-[300px] md:w-[300px] lg:h-[340px] lg:w-[340px] xl:h-[370px] xl:w-[370px] xl:gap-[30px]"
+          disabled={true}
+        >
+          <img
+            src={voteStampImage}
+            alt="투표"
+            className="h-20 w-20 md:h-24 md:w-24 lg:h-[96px] lg:w-[96px] xl:h-[108px] xl:w-[108px]"
+          />
+          <div className="text-center">
+            <p className="text-lg font-semibold text-default-black md:text-xl lg:text-2xl xl:text-title-raw">
+              현재 &apos;승패투표&apos;
+            </p>
+            <p className="text-lg font-semibold text-default-black md:text-xl lg:text-2xl xl:text-title-raw">
+              페이지는
+              <span className="font-bold text-[#F64740]">&nbsp;준비 중</span>
+              입니다.
+            </p>
+          </div>
+          <p className="text-sm text-default-border md:text-base lg:text-lg xl:text-detail-raw">
+            빠른 시일 내로 만나 뵙겠습니다.
+          </p>
+        </button>
+      </div>
+      <div className="mt-12 lg:mt-16 xl:mt-[74px]">
+        <GoToHomeButton />
+      </div>
+    </div>
+  );
+}
diff --git a/src/page/LandingPage/LandingPage.tsx b/src/page/LandingPage/LandingPage.tsx
index 188766c3..9b6a599e 100644
--- a/src/page/LandingPage/LandingPage.tsx
+++ b/src/page/LandingPage/LandingPage.tsx
@@ -5,35 +5,40 @@ import TimerSection from './components/TimerSection';
 import TableSection from './components/TableSection';
 import ReviewSection from './components/ReviewSection';
 import ReportSection from './components/ReportSection';
-import { oAuthLogin } from '../../util/googleAuth';
-import { createTableShareUrl } from '../../util/arrayEncoding';
-import { SAMPLE_TABLE_DATA } from '../../constants/sample_table';
-
+import useLandingPageHandlers from './hooks/useLandingPageHandlers';
+import TemplateSelection from './components/TemplateSelection';
+import ScrollHint from './components/ScrollHint';
 export default function LandingPage() {
-  const handleStartWithoutLogin = () => {
-    // window.location.href = LANDING_URLS.START_WITHOUT_LOGIN_URL;
-    window.location.href = createTableShareUrl(
-      import.meta.env.VITE_SHARE_BASE_URL,
-      SAMPLE_TABLE_DATA,
-    );
-  };
+  const {
+    handleStartWithoutLogin,
+    handleDashboardButtonClick,
+    handleHeaderLoginButtonClick,
+    handleTableSectionLoginButtonClick,
+  } = useLandingPageHandlers();
 
   return (
-    <div className="flex h-full w-full items-center justify-center bg-neutral-0">
+    <div className="flex h-full w-full items-center justify-center bg-default-white">
       {/* 헤더 */}
-      <Header onLogin={() => oAuthLogin()} />
+      <Header onLoginButtonClicked={handleHeaderLoginButtonClick} />
 
       <main className="flex w-full flex-col items-center">
         {/* 흰색 배경 */}
         <div className="flex w-[95%] max-w-[1226px] flex-col gap-96 pb-48 pt-20 md:w-[64%]">
           {/* 메인 화면 */}
-          <MainSection onStartWithoutLogin={handleStartWithoutLogin} />
+          <MainSection
+            onStartWithoutLogin={handleStartWithoutLogin}
+            onDashboardButtonClicked={handleDashboardButtonClick}
+          />
+          <ScrollHint />
+          {/*템플릿 선택 화면 */}
+          <TemplateSelection />
+
           {/* 시간표 설정화면 */}
           <TimeTableSection />
         </div>
 
         {/* 회색 배경 */}
-        <div className="flex w-full flex-col items-center bg-background-dark py-48">
+        <div className="flex w-full flex-col items-center bg-default-disabled/hover py-48">
           {/* 타이머 화면 */}
           <TimerSection />
         </div>
@@ -41,9 +46,13 @@ export default function LandingPage() {
         {/* 흰색 배경 */}
         <div className="flex w-[95%] max-w-[1226px] flex-col gap-96 py-48 md:w-[64%]">
           {/* 홈 설정 */}
-          <TableSection onLogin={() => oAuthLogin()} />
+          <TableSection onLogin={handleTableSectionLoginButtonClick} />
+        </div>
+        <div className="flex w-full flex-col items-center bg-black py-48">
           {/* 리뷰 */}
           <ReviewSection onStartWithoutLogin={handleStartWithoutLogin} />
+        </div>
+        <div className="flex w-[95%] max-w-[1226px] flex-col gap-96 py-48 md:w-[64%]">
           {/* 버그 및 불편사항 제보 */}
           <ReportSection />
         </div>
diff --git a/src/page/LandingPage/components/Header.tsx b/src/page/LandingPage/components/Header.tsx
index 548d6a88..df4de7d9 100644
--- a/src/page/LandingPage/components/Header.tsx
+++ b/src/page/LandingPage/components/Header.tsx
@@ -1,10 +1,11 @@
 import { useState, useEffect } from 'react';
+import { isLoggedIn } from '../../../util/accessToken';
 
 interface HeaderProps {
-  onLogin: () => void;
+  onLoginButtonClicked: () => void;
 }
 
-export default function Header({ onLogin }: HeaderProps) {
+export default function Header({ onLoginButtonClicked }: HeaderProps) {
   const [isScrolled, setIsScrolled] = useState(false);
 
   useEffect(() => {
@@ -28,9 +29,9 @@ export default function Header({ onLogin }: HeaderProps) {
         </div>
         <button
           className="text-[min(max(0.875rem,1.25vw),1.2rem)]"
-          onClick={onLogin}
+          onClick={onLoginButtonClicked}
         >
-          3초 로그인
+          {!isLoggedIn() ? '3초 로그인' : '로그아웃'}
         </button>
       </div>
     </header>
diff --git a/src/page/LandingPage/components/MainSection.tsx b/src/page/LandingPage/components/MainSection.tsx
index ded9ee28..bd86ad77 100644
--- a/src/page/LandingPage/components/MainSection.tsx
+++ b/src/page/LandingPage/components/MainSection.tsx
@@ -1,10 +1,15 @@
 import preview from '../../../assets/landing/preview.webm';
+import { isLoggedIn } from '../../../util/accessToken';
 
 interface MainSectionProps {
   onStartWithoutLogin: () => void;
+  onDashboardButtonClicked: () => void;
 }
 
-export default function MainSection({ onStartWithoutLogin }: MainSectionProps) {
+export default function MainSection({
+  onStartWithoutLogin,
+  onDashboardButtonClicked,
+}: MainSectionProps) {
   return (
     <section
       id="main-section"
@@ -17,10 +22,10 @@ export default function MainSection({ onStartWithoutLogin }: MainSectionProps) {
         토론 진행을 더 쉽고 빠르게
       </h1>
       <button
-        onClick={onStartWithoutLogin}
-        className="rounded-full border border-neutral-300 bg-brand-main px-5 py-2 text-[min(max(0.875rem,1.25vw),1.2rem)] font-medium text-black transition-all duration-100 hover:bg-brand-sub1 hover:text-neutral-0"
+        onClick={isLoggedIn() ? onDashboardButtonClicked : onStartWithoutLogin}
+        className="rounded-full border border-neutral-300 bg-brand px-5 py-2 text-[min(max(0.875rem,1.25vw),1.2rem)] font-medium text-default-black transition-all duration-100 hover:bg-semantic-table hover:text-default-white"
       >
-        비회원으로 시작하기
+        {isLoggedIn() ? '대시보드로 이동' : '비회원으로 시작하기'}
       </button>
     </section>
   );
diff --git a/src/page/LandingPage/components/ReportSection.tsx b/src/page/LandingPage/components/ReportSection.tsx
index 027d22fc..57a20ea6 100644
--- a/src/page/LandingPage/components/ReportSection.tsx
+++ b/src/page/LandingPage/components/ReportSection.tsx
@@ -20,7 +20,7 @@ export default function ReportSection() {
                 'noopener,noreferrer',
               )
             }
-            className="rounded-full border border-neutral-300 bg-neutral-200 px-9 py-2 text-[min(max(0.875rem,1.25vw),1.2rem)] font-medium text-black transition-all duration-100 hover:bg-brand-main"
+            className="rounded-full border border-neutral-300 bg-neutral-200 px-9 py-2 text-[min(max(0.875rem,1.25vw),1.2rem)] font-medium text-default-black transition-all duration-100 hover:bg-brand"
           >
             접수하기
           </button>
@@ -55,7 +55,7 @@ export default function ReportSection() {
                 'noopener,noreferrer',
               )
             }
-            className="text-[min(max(0.75rem,1vw),1.1rem)] text-neutral-500 transition-colors hover:text-neutral-700"
+            className="text-[min(max(0.75rem,1vw),1rem)] text-neutral-500 transition-colors hover:text-neutral-700"
           >
             서비스 이용약관
           </button>
diff --git a/src/page/LandingPage/components/ReviewSection.tsx b/src/page/LandingPage/components/ReviewSection.tsx
index 8db59193..81a0b754 100644
--- a/src/page/LandingPage/components/ReviewSection.tsx
+++ b/src/page/LandingPage/components/ReviewSection.tsx
@@ -9,8 +9,11 @@ export default function ReviewSection({
   onStartWithoutLogin,
 }: ReviewSectionProps) {
   return (
-    <section id="section4" className="flex flex-col items-center gap-24">
-      <div className="flex flex-col items-center justify-center gap-1 text-[min(max(1.4rem,3vw),2.8rem)] font-bold">
+    <section
+      id="section4"
+      className="flex w-[95%] max-w-[1226px] flex-col gap-24 md:w-[64%]"
+    >
+      <div className="flex flex-col items-center justify-center gap-1 text-[min(max(1.4rem,3vw),2.8rem)] font-bold text-neutral-100">
         <h1>이미 많은 사람들이 디베이트 타이머로</h1>
         <h1>더 나은 토론환경을 만들고 있어요.</h1>
       </div>
@@ -19,12 +22,14 @@ export default function ReviewSection({
           <ReviewCard key={review.user} {...review} />
         ))}
       </div>
-      <button
-        className="rounded-full border border-neutral-300 bg-brand-main px-20 py-2 text-[min(max(0.875rem,1.25vw),1.2rem)] font-medium text-black transition-all duration-100 hover:bg-brand-sub1 hover:text-neutral-0"
-        onClick={onStartWithoutLogin}
-      >
-        비회원으로 시작하기
-      </button>
+      <div className="flex w-full justify-center">
+        <button
+          className="rounded-full border border-neutral-300 bg-brand px-20 py-2 text-[min(max(0.875rem,1.25vw),1.2rem)] font-medium text-default-black transition-all duration-100 hover:bg-semantic-table hover:text-default-white"
+          onClick={onStartWithoutLogin}
+        >
+          비회원으로 시작하기
+        </button>
+      </div>
     </section>
   );
 }
diff --git a/src/page/LandingPage/components/ScrollHint.tsx b/src/page/LandingPage/components/ScrollHint.tsx
new file mode 100644
index 00000000..648ce25a
--- /dev/null
+++ b/src/page/LandingPage/components/ScrollHint.tsx
@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import arrowDown from '../../../assets/landing/bottom_arrow.png';
+type ScrollHintProps = {
+  topThreshold?: number; //최상단 판정 임계값 (px)
+};
+
+export default function ScrollHint({ topThreshold = 10 }: ScrollHintProps) {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const onScroll = () => {
+      const atTop = window.scrollY <= topThreshold;
+      // 최상단이면 보이고, 아니면 숨김
+      setVisible(atTop);
+    };
+    onScroll();
+
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [topThreshold]);
+
+  return (
+    <div
+      className={`
+        pointer-events-none fixed inset-x-0 bottom-10 flex justify-center
+        transition-all duration-300
+        ${visible ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0'}
+      `}
+      aria-hidden={!visible}
+    >
+      <div
+        className={`
+          pointer-events-auto flex items-center gap-2 rounded-full
+          bg-default-white/90 px-4 py-2 text-[min(max(0.85rem,1.2vw),1rem)] font-medium shadow-[0_6px_18px_rgba(0,0,0,0.12)]
+          ring-1
+          ring-black/5 backdrop-blur
+          transition-colors hover:bg-default-white
+        `}
+      >
+        <img
+          src={arrowDown}
+          alt="아래로 스크롤"
+          className="pointer-events-auto h-4 w-20 animate-bounce"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/page/LandingPage/components/TableSection.tsx b/src/page/LandingPage/components/TableSection.tsx
index e2851c32..3cab8a18 100644
--- a/src/page/LandingPage/components/TableSection.tsx
+++ b/src/page/LandingPage/components/TableSection.tsx
@@ -1,5 +1,5 @@
-import section301 from '../../../assets/landing/section3-1.png';
-import section302 from '../../../assets/landing/section3-2.png';
+import section301 from '../../../assets/landing/debate_info_setting.png';
+import section302 from '../../../assets/landing/table_list.png';
 
 interface TableSectionProps {
   onLogin: () => void;
@@ -11,24 +11,26 @@ export default function TableSection({ onLogin }: TableSectionProps) {
       <div>
         <div className="relative inline-block text-[min(max(0.875rem,1.5vw),1.4rem)] font-semibold">
           <span className="relative z-10">홈 | 설정</span>
-          <span className="absolute bottom-0 left-0 z-0 h-4 w-full bg-brand-main/70"></span>
+          <span className="absolute bottom-0 left-0 z-0 h-4 w-full bg-brand/70"></span>
         </div>
         <h2 className="mt-4 text-left text-[min(max(1.25rem,2.75vw),2.5rem)] font-bold">
-          토론 정보 관리 및 기록
+          토론 정보 <br />
+          관리 및 기록
         </h2>
       </div>
       <div className="flex flex-row items-center justify-center gap-8 px-4">
-        <img src={section301} alt="section301" className="flex w-1/2" />
         <div className="flex w-1/2 flex-col items-center gap-4">
           <h3 className="text-[min(max(1.1rem,1.75vw),1.8rem)] font-semibold">
-            종소리 설정
+            토론 기본 정보 설정
           </h3>
           <p className="text-[min(max(0.875rem,1.5vw),1.4rem)] font-medium text-neutral-600">
-            원하는 종소리만 골라서 설정할 수 있어요.
+            시간표 이름부터 주제까지!
           </p>
         </div>
+        <img src={section301} alt="section301" className="flex w-1/2" />
       </div>
       <div className="flex flex-row items-center justify-center gap-8 px-4">
+        <img src={section302} alt="section302" className="flex w-1/2" />
         <div className="flex w-1/2 flex-col items-center gap-4">
           <h3 className="text-[min(max(1.1rem,1.75vw),1.8rem)] font-semibold">
             시간표 목록
@@ -37,14 +39,13 @@ export default function TableSection({ onLogin }: TableSectionProps) {
             내가 만든 시간표를 저장하고 싶나요?
           </p>
         </div>
-        <img src={section302} alt="section302" className="flex w-1/2" />
       </div>
 
       <div className="flex flex-col items-center justify-center gap-1 text-[min(max(1.25rem,2.75vw),2.5rem)] font-bold">
         <p>시간표를 저장하려면,</p>
-        <p>디베이트 타이머에 로그인해보세요!</p>
+        <p>디베이트 타이머에 로그인해 보세요!</p>
         <button
-          className="mt-14 rounded-full border border-neutral-300 bg-brand-main px-5 py-2 text-[min(max(0.875rem,1.25vw),1.2rem)] font-medium text-black transition-all duration-100 hover:bg-brand-sub1 hover:text-neutral-0"
+          className="mt-14 rounded-full border border-neutral-300 bg-brand px-5 py-2 text-[min(max(0.875rem,1.25vw),1.2rem)] font-medium text-default-black transition-all duration-100 hover:bg-semantic-table hover:text-default-white"
           onClick={onLogin}
         >
           3초 로그인 하기
diff --git a/src/page/LandingPage/components/TemplateApplicationSection.tsx b/src/page/LandingPage/components/TemplateApplicationSection.tsx
new file mode 100644
index 00000000..e9fb0747
--- /dev/null
+++ b/src/page/LandingPage/components/TemplateApplicationSection.tsx
@@ -0,0 +1,30 @@
+import section501 from '../../../assets/landing/section5-1.png';
+import { LANDING_URLS } from '../../../constants/urls';
+
+export default function TemplateApplicationSection() {
+  return (
+    <section className="flex flex-row justify-between gap-1">
+      <div className="flex flex-col items-start justify-center gap-4">
+        <p className="text-[min(max(1.2rem,2vw),2.3rem)] font-semibold">
+          템플릿 신청하기
+        </p>
+        <p className="text-[min(max(0.875rem,1.25vw),1.2rem)] text-neutral-400">
+          새로운 템플릿도 신청해 볼까요?
+        </p>
+        <button
+          onClick={() =>
+            window.open(
+              LANDING_URLS.TEMPLATE_REGISTER_URL,
+              '_blank',
+              'noopener,noreferrer',
+            )
+          }
+          className="rounded-full border border-neutral-300 bg-neutral-200 px-9 py-2 text-[min(max(0.875rem,1.25vw),1.2rem)] font-medium text-default-black transition-all duration-100 hover:bg-brand"
+        >
+          신청하기
+        </button>
+      </div>
+      <img src={section501} alt="section501" className="w-[30%]" />
+    </section>
+  );
+}
diff --git a/src/page/LandingPage/components/TemplateCard.tsx b/src/page/LandingPage/components/TemplateCard.tsx
new file mode 100644
index 00000000..3bb8ad7f
--- /dev/null
+++ b/src/page/LandingPage/components/TemplateCard.tsx
@@ -0,0 +1,63 @@
+import { DebateTemplate } from '../../../type/type';
+import clsx from 'clsx';
+
+export default function TemplateCard({
+  title,
+  subtitle,
+  logoSrc,
+  actions,
+  className,
+}: DebateTemplate) {
+  return (
+    <article
+      className={clsx(
+        'flex flex-col rounded-3xl border-4 border-white bg-gradient-to-b from-default-white to-brand',
+        'ring-3 ring-brand/20',
+        'p-6 shadow-[0_0_32px_rgba(255,165,0,0.1)] md:p-7',
+        className,
+      )}
+    >
+      {/* 헤더 */}
+      <div className="flex justify-between">
+        <div className="flex flex-col gap-2">
+          <h3 className="text-[min(max(0.9rem,1.4vw),1.1rem)] font-semibold leading-tight">
+            {title}
+          </h3>
+          <p className="mt-1 min-h-[1.25rem] text-[min(max(0.75rem,1.1vw),0.9rem)] text-neutral-700">
+            {subtitle ?? ''}
+          </p>
+        </div>
+
+        {/* 로고 */}
+        {logoSrc && (
+          <img
+            src={logoSrc}
+            alt={`${title} 로고`}
+            className="h-12 w-12 shrink-0 rounded-full object-contain"
+          />
+        )}
+      </div>
+
+      {/* 액션 리스트 */}
+      <ul className="mt-5 flex flex-col gap-1">
+        {actions.map((action, index) => (
+          <li key={`${action.label}-${index}`}>
+            <div className="flex items-center justify-between gap-3 rounded-md bg-white px-3 py-2">
+              <span className="truncate text-[min(max(0.75rem,1.1vw),0.9rem)] font-medium text-neutral-800">
+                {action.label}
+              </span>
+
+              <a
+                href={action.href}
+                className="shrink-0 rounded-full border border-neutral-300 bg-brand px-4 py-1.5 text-[min(max(0.75rem,1.1vw),0.9rem)] font-medium text-default-black transition-colors duration-100 hover:bg-semantic-table hover:text-white"
+                aria-label={`${action.label} 토론하기`}
+              >
+                토론하기
+              </a>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </article>
+  );
+}
diff --git a/src/page/LandingPage/components/TemplateList.tsx b/src/page/LandingPage/components/TemplateList.tsx
new file mode 100644
index 00000000..495ce882
--- /dev/null
+++ b/src/page/LandingPage/components/TemplateList.tsx
@@ -0,0 +1,17 @@
+import { DebateTemplate } from '../../../type/type';
+import TemplateCard from './TemplateCard';
+
+interface TemplateListProps {
+  data: DebateTemplate[];
+}
+export default function TemplateList({ data }: TemplateListProps) {
+  return (
+    <div
+      className={'grid grid-cols-2 gap-5 lg:grid-cols-3'} // 2열, lg에서 3열
+    >
+      {data.map((template) => (
+        <TemplateCard key={template.title} {...template} />
+      ))}
+    </div>
+  );
+}
diff --git a/src/page/LandingPage/components/TemplateSelection.tsx b/src/page/LandingPage/components/TemplateSelection.tsx
new file mode 100644
index 00000000..d7afa6ee
--- /dev/null
+++ b/src/page/LandingPage/components/TemplateSelection.tsx
@@ -0,0 +1,21 @@
+import { DEBATE_TEMPLATE } from '../../../constants/debate_template';
+import TemplateApplicationSection from './TemplateApplicationSection';
+import TemplateList from './TemplateList';
+
+export default function TemplateSelection() {
+  return (
+    <section id="template-selection" className="flex flex-col gap-12">
+      <div>
+        <h2 className="mt-4 text-left text-[min(max(1.25rem,2.75vw),2.5rem)] font-bold">
+          다양한 토론 템플릿을 원클릭으로 만나보세요!
+        </h2>
+      </div>
+      <TemplateList data={DEBATE_TEMPLATE.ONE} />
+      <div className="mx-auto h-px w-11/12 bg-neutral-200" /> {/* 구분선 */}
+      <TemplateList data={DEBATE_TEMPLATE.TWO} />
+      <div className="mx-auto h-px w-11/12 bg-neutral-200" />
+      <TemplateList data={DEBATE_TEMPLATE.THREE} />
+      <TemplateApplicationSection />
+    </section>
+  );
+}
diff --git a/src/page/LandingPage/components/TimeTableSection.tsx b/src/page/LandingPage/components/TimeTableSection.tsx
index 5298771b..a9eb24ed 100644
--- a/src/page/LandingPage/components/TimeTableSection.tsx
+++ b/src/page/LandingPage/components/TimeTableSection.tsx
@@ -1,32 +1,59 @@
-import section101 from '../../../assets/landing/section1-1.png';
-import section102 from '../../../assets/landing/section1-2.png';
-
+import timeboxStep from '../../../assets/landing/timebox_step.png';
+import timeboxButtons from '../../../assets/landing/timebox_step_button.png';
+import bellSetting from '../../../assets/landing/bell_setting.png';
+import twoTimer from '../../../assets/landing/two_timer.png';
+import timeboxAddButton from '../../../assets/landing/timebox_add_button.png';
 export default function TimeTableSection() {
   return (
     <section id="section1" className="flex flex-col gap-24">
       <div>
         <div className="relative inline-block text-[min(max(0.875rem,1.5vw),1.4rem)] font-semibold">
-          <span className="relative z-10">시간표 설정 화면</span>
-          <span className="absolute bottom-0 left-0 z-0 h-4 w-full bg-brand-main/70"></span>
+          <span className="relative z-10">시간표 설정화면</span>
+          <span className="absolute bottom-0 left-0 z-0 h-4 w-full bg-brand/70"></span>
         </div>
-        <h1 className="mt-4 text-left text-[min(max(1.25rem,2.75vw),2.5rem)] font-bold">
-          드래그 앤 드롭으로
-          <br /> 간편하게 시간표 구성
-        </h1>
+        <h2 className="mt-4 text-left text-[min(max(1.25rem,2.75vw),2.5rem)] font-bold">
+          간편한 시간표 구성
+        </h2>
       </div>
-
-      <img src={section101} alt="section101" className="w-full" />
-      <img src={section102} alt="section102" className="mt-5 w-full" />
-      <div className="flex flex-col items-center gap-1">
-        <p className="mb-2 text-center text-[min(max(1.1rem,1.75vw),1.8rem)] font-semibold">
-          두 가지 타이머
-        </p>
-        <p className="text-center text-[min(max(0.875rem,1.5vw),1.4rem)] font-medium text-neutral-600">
-          일반형과 자유토론형 타이머로,
-        </p>
-        <p className="text-center text-[min(max(0.875rem,1.5vw),1.4rem)] font-medium text-neutral-600">
-          다양한 토론 방식을 지원해요.
-        </p>
+      <div className="flex flex-row items-center justify-center gap-8 px-4">
+        <img src={timeboxStep} alt="section301" className="flex w-1/2" />
+        <img src={timeboxButtons} alt="section301" className="flex w-1/3" />
+      </div>
+      <div className="mt-4 flex items-center gap-4">
+        <h2 className="text-left text-[min(max(1.25rem,2.75vw),2.5rem)] font-bold">
+          시간표 추가
+        </h2>
+        <img
+          src={timeboxAddButton}
+          alt="시간표 추가 버튼"
+          className="h-[min(max(1.7rem,3vw),2.7rem)] w-auto"
+        />
+      </div>
+      <div className="flex flex-row items-center justify-center gap-8 px-4">
+        <img src={twoTimer} alt="section302" className="flex w-1/2" />
+        <div className="flex w-1/2 flex-col items-center gap-4">
+          <h3 className="text-[min(max(1.1rem,1.75vw),1.8rem)] font-semibold">
+            두가지 타이머
+          </h3>
+          <p className="text-[min(max(0.875rem,1.5vw),1.4rem)] font-medium text-neutral-600">
+            일반형과 자유토론형 타이머로,
+            <br />
+            다양한 토론 방식을 지원해요.
+          </p>
+        </div>
+      </div>
+      <div className="flex flex-row items-center justify-center gap-8 px-4">
+        <div className="flex w-1/2 flex-col items-center gap-4">
+          <h3 className="text-[min(max(1.1rem,1.75vw),1.8rem)] font-semibold">
+            종소리 설정
+          </h3>
+          <p className="text-[min(max(0.875rem,1.5vw),1.4rem)] font-medium text-neutral-600">
+            시간에 따른 종소리를 내마음대로
+            <br />
+            커스터마이징 할 수 있어요.
+          </p>
+        </div>
+        <img src={bellSetting} alt="section302" className="flex w-1/2" />
       </div>
     </section>
   );
diff --git a/src/page/LandingPage/components/TimerSection.tsx b/src/page/LandingPage/components/TimerSection.tsx
index 8f3f26fc..bbcc1d01 100644
--- a/src/page/LandingPage/components/TimerSection.tsx
+++ b/src/page/LandingPage/components/TimerSection.tsx
@@ -1,7 +1,8 @@
-import section201 from '../../../assets/landing/section2-1.png';
-import section202 from '../../../assets/landing/section2-2.png';
-import section203 from '../../../assets/landing/section2-3.png';
-
+import timer from '../../../assets/landing/timer.png';
+import timerOperationTime from '../../../assets/landing/timer_operation_time.png';
+import timerTimeBased from '../../../assets/landing/timer_timebased.png';
+import keyInfo from '../../../assets/landing/key_info.png';
+import timeoutButton from '../../../assets/landing/timeout_button.png';
 export default function TimerSection() {
   return (
     <section
@@ -11,39 +12,49 @@ export default function TimerSection() {
       <div>
         <div className="relative inline-block text-[min(max(0.875rem,1.5vw),1.4rem)] font-semibold">
           <span className="relative z-10">타이머 화면</span>
-          <span className="absolute bottom-0 left-0 z-0 h-4 w-full bg-brand-main/70"></span>
+          <span className="absolute bottom-0 left-0 z-0 h-4 w-full bg-brand/70"></span>
         </div>
-        <h1 className="mt-4 text-left text-[min(max(1.25rem,2.75vw),2.5rem)] font-bold">
-          키보드 방향키로 더 편리한 조작
-        </h1>
+        <h2 className="mt-4 text-left text-[min(max(1.25rem,2.75vw),2.5rem)] font-bold">
+          원하는 때에 <br />
+          작전 시간 사용하기
+        </h2>
       </div>
-      <div className="flex flex-col gap-4">
-        <img src={section201} alt="section201" className="w-full" />
-        <p className="text-right text-[min(max(0.75rem,1vw),1.1rem)] text-neutral-600">
-          일반 타이머
-        </p>
+      <div className="flex flex-row items-center justify-center gap-8 px-4">
+        <img src={timer} alt="section301" className="flex w-1/2" />
+        <div className="flex w-1/2 flex-col items-center gap-4">
+          <h3 className="text-[min(max(1.1rem,1.75vw),1.8rem)] font-semibold">
+            토론자가 작전 시간을
+            <br />
+            요청하면{' '}
+            <img
+              src={timeoutButton}
+              alt="작전 시간 사용"
+              className="inline-block h-[1.8rem] align-middle"
+              style={{ transform: 'translateY(-0.1em)' }}
+            />{' '}
+            <br />
+            버튼을 눌러 시간을 사용해요
+          </h3>
+        </div>
       </div>
-
-      <div className="flex flex-col items-center gap-1 font-medium text-neutral-600">
-        <p className="text-center text-[min(max(0.875rem,1.5vw),1.4rem)]">
-          토론자들이 손을 들고 작전 시간을 요청하면
-        </p>
-        <p className="text-center text-[min(max(0.875rem,1.5vw),1.4rem)]">
-          버튼을 통해 작전 시간을 세팅할 수 있어요.
-        </p>
+      <div className="flex flex-row items-center justify-center gap-8 px-4">
+        <div className="flex w-1/2 flex-col items-center gap-4">
+          <h3 className="text-[min(max(1.1rem,1.75vw),1.8rem)] font-semibold">
+            작전 시간이 나타나면
+            <br /> 원하는 시간을 입력하세요!
+          </h3>
+        </div>
+        <img src={timerOperationTime} alt="section302" className="flex w-1/2" />
       </div>
 
-      <div className="mt-7 flex flex-col gap-4">
-        <img src={section202} alt="section202" className="w-full" />
-        <p className="text-right text-[min(max(0.75rem,1vw),1.1rem)] text-neutral-600">
-          자유토론형 타이머
-        </p>
+      <div>
+        <h2 className="mt-4 text-left text-[min(max(1.25rem,2.75vw),2.5rem)] font-bold">
+          키보드 방향키로 <br />더 편리한 조작
+        </h2>
       </div>
-      <div className="flex flex-col items-center gap-6">
-        <p className="text-center text-[min(max(0.875rem,1.5vw),1.4rem)] font-medium text-neutral-600">
-          키보드로 타이머를 보다 편하게 조작해보세요!
-        </p>
-        <img src={section203} alt="section203" className="w-1/3" />
+      <div className="flex flex-row items-center justify-center gap-8 px-4">
+        <img src={keyInfo} alt="section203" className="m-10 w-1/3" />
+        <img src={timerTimeBased} alt="section203" className="w-1/2" />
       </div>
     </section>
   );
diff --git a/src/page/LandingPage/hooks/useLandingPageHandlers.ts b/src/page/LandingPage/hooks/useLandingPageHandlers.ts
new file mode 100644
index 00000000..80b94b0a
--- /dev/null
+++ b/src/page/LandingPage/hooks/useLandingPageHandlers.ts
@@ -0,0 +1,48 @@
+import { useNavigate } from 'react-router-dom';
+import { isLoggedIn } from '../../../util/accessToken';
+import { oAuthLogin } from '../../../util/googleAuth';
+import useLogout from '../../../hooks/mutations/useLogout';
+import { createTableShareUrl } from '../../../util/arrayEncoding';
+import { SAMPLE_TABLE_DATA } from '../../../constants/sample_table';
+import { useCallback } from 'react';
+
+const useLandingPageHandlers = () => {
+  // Prepare dependencies
+  const navigate = useNavigate();
+  const { mutate: logoutMutate } = useLogout(() => navigate('/home'));
+
+  // Declare functions that represent business logics
+  const handleStartWithoutLogin = useCallback(() => {
+    // window.location.href = LANDING_URLS.START_WITHOUT_LOGIN_URL;
+    window.location.href = createTableShareUrl(
+      import.meta.env.VITE_SHARE_BASE_URL,
+      SAMPLE_TABLE_DATA,
+    );
+  }, []);
+  const handleTableSectionLoginButtonClick = useCallback(() => {
+    if (!isLoggedIn()) {
+      oAuthLogin();
+    } else {
+      navigate('/');
+    }
+  }, [navigate]);
+  const handleDashboardButtonClick = useCallback(() => {
+    navigate('/');
+  }, [navigate]);
+  const handleHeaderLoginButtonClick = useCallback(() => {
+    if (!isLoggedIn()) {
+      oAuthLogin();
+    } else {
+      logoutMutate();
+    }
+  }, [logoutMutate]);
+
+  return {
+    handleStartWithoutLogin,
+    handleTableSectionLoginButtonClick,
+    handleDashboardButtonClick,
+    handleHeaderLoginButtonClick,
+  };
+};
+
+export default useLandingPageHandlers;
diff --git a/src/page/OAuthPage/OAuth.tsx b/src/page/OAuthPage/OAuth.tsx
index cc61114a..0262753a 100644
--- a/src/page/OAuthPage/OAuth.tsx
+++ b/src/page/OAuthPage/OAuth.tsx
@@ -1,19 +1,37 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { usePostUser } from '../../hooks/mutations/usePostUser';
-import { isGuestFlow } from '../../util/sessionStorage';
+import {
+  deleteSessionCustomizeTableData,
+  isGuestFlow,
+} from '../../util/sessionStorage';
 
 export default function OAuth() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
+  const hasProcessedLogin = useRef(false);
+
   const { mutate } = usePostUser(() => {
+    const keepGuestTable = sessionStorage.getItem('keepGuestTable');
+
+    if (keepGuestTable === 'false') {
+      deleteSessionCustomizeTableData();
+    }
+
+    sessionStorage.removeItem('keepGuestTable');
+
     if (isGuestFlow()) {
       navigate('/share');
     } else {
       navigate('/');
     }
   });
+
   useEffect(() => {
+    if (hasProcessedLogin.current === true) {
+      return;
+    }
+
     const loginOAuth = async () => {
       const code = searchParams.get('code');
       if (code === null) {
@@ -23,7 +41,12 @@ export default function OAuth() {
     };
 
     loginOAuth();
+
+    return () => {
+      hasProcessedLogin.current = true;
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
   return null;
 }
diff --git a/src/page/TableComposition/TableComposition.stories.tsx b/src/page/TableComposition/TableCompositionPage.stories.tsx
similarity index 61%
rename from src/page/TableComposition/TableComposition.stories.tsx
rename to src/page/TableComposition/TableCompositionPage.stories.tsx
index c517393e..f999aca0 100644
--- a/src/page/TableComposition/TableComposition.stories.tsx
+++ b/src/page/TableComposition/TableCompositionPage.stories.tsx
@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
-import TableComposition from './TableComposition';
+import TableCompositionPage from './TableCompositionPage';
 
-const meta: Meta<typeof TableComposition> = {
+const meta: Meta<typeof TableCompositionPage> = {
   title: 'page/TableCompositon',
-  component: TableComposition,
+  component: TableCompositionPage,
   tags: ['autodocs'],
   decorators: [
     (Story) => {
@@ -16,6 +16,6 @@ const meta: Meta<typeof TableComposition> = {
 
 export default meta;
 
-type Story = StoryObj<typeof TableComposition>;
+type Story = StoryObj<typeof TableCompositionPage>;
 
 export const Default: Story = {};
diff --git a/src/page/TableComposition/TableComposition.test.tsx b/src/page/TableComposition/TableCompositionPage.test.tsx
similarity index 92%
rename from src/page/TableComposition/TableComposition.test.tsx
rename to src/page/TableComposition/TableCompositionPage.test.tsx
index 87997fdc..07954359 100644
--- a/src/page/TableComposition/TableComposition.test.tsx
+++ b/src/page/TableComposition/TableCompositionPage.test.tsx
@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { GlobalPortal } from '../../util/GlobalPortal';
-import TableComposition from './TableComposition';
+import TableCompositionPage from './TableCompositionPage';
 
 // ------------------
 // 테스트 래퍼 (TestWrapper)
@@ -37,7 +37,7 @@ function TestWrapper({
   );
 }
 
-vi.mock('./components/DebatePanel/DebatePanel', () => {
+vi.mock('./components/TimeBox/TimeBox', () => {
   const DebatePanel = ({ children }: { children: React.ReactNode }) => (
     <div data-testid="timebox">{children}</div>
   );
@@ -62,7 +62,7 @@ describe('TableComposition', () => {
   it('Creation flow and timebox functionality test', async () => {
     render(
       <TestWrapper initialEntries={['/composition?mode=add']}>
-        <TableComposition />
+        <TableCompositionPage />
       </TestWrapper>,
     );
 
@@ -80,7 +80,9 @@ describe('TableComposition', () => {
     expect(finishButton).toBeDisabled();
 
     // Add a new timebox
-    await userEvent.click(await screen.findByRole('button', { name: '+' }));
+    await userEvent.click(
+      await screen.findByRole('button', { name: '타이머 추가' }),
+    );
     await userEvent.click(
       await screen.findByRole('button', { name: '설정 완료' }),
     );
@@ -96,7 +98,7 @@ describe('TableComposition', () => {
       <TestWrapper
         initialEntries={['/composition?mode=edit&tableId=1&mode=CUSTOMIZE']}
       >
-        <TableComposition />
+        <TableCompositionPage />
       </TestWrapper>,
     );
 
diff --git a/src/page/TableComposition/TableComposition.tsx b/src/page/TableComposition/TableCompositionPage.tsx
similarity index 54%
rename from src/page/TableComposition/TableComposition.tsx
rename to src/page/TableComposition/TableCompositionPage.tsx
index c149a713..f528cced 100644
--- a/src/page/TableComposition/TableComposition.tsx
+++ b/src/page/TableComposition/TableCompositionPage.tsx
@@ -3,30 +3,52 @@ import TableNameAndType from './components/TableNameAndType/TableNameAndType';
 import useFunnel from '../../hooks/useFunnel';
 import useTableFrom from './hook/useTableFrom';
 import TimeBoxStep from './components/TimeBoxStep/TimeBoxStep';
-import { useGetDebateTableData } from '../../hooks/query/useGetDebateTableData';
 import { useSearchParams } from 'react-router-dom';
 import { useMemo } from 'react';
 import { DebateInfo, TimeBoxInfo } from '../../type/type';
+import { useGetDebateTableData } from '../../hooks/query/useGetDebateTableData';
+import ErrorIndicator from '../../components/ErrorIndicator/ErrorIndicator';
+import { isGuestFlow } from '../../util/sessionStorage';
 
 export type TableCompositionStep = 'NameAndType' | 'TimeBox';
 type Mode = 'edit' | 'add';
 
-export default function TableComposition() {
+export default function TableCompositionPage() {
   // URL 등으로부터 "editMode"와 "tableId"를 추출
   const [searchParams] = useSearchParams();
-  const mode = searchParams.get('mode') as Mode;
-  const tableId = Number(searchParams.get('tableId') || 0);
+  const rawMode = searchParams.get('mode');
+  const rawTableId = searchParams.get('tableId');
+
+  if (rawMode !== 'edit' && rawMode !== 'add') {
+    throw new Error('테이블 모드가 올바르지 않습니다.');
+  }
+  const mode = rawMode as Mode;
+
+  if (
+    !isGuestFlow() &&
+    mode === 'edit' &&
+    (rawTableId === null || isNaN(Number(rawTableId)))
+  ) {
+    throw new Error('테이블 ID가 올바르지 않습니다.');
+  }
+  const tableId = rawTableId ? Number(rawTableId) : 0;
 
-  // Print different funnel page by mode (edit a existing table or add a new table)
   const initialMode: TableCompositionStep =
     mode !== 'edit' ? 'NameAndType' : 'TimeBox';
   const { Funnel, currentStep, goToStep } =
     useFunnel<TableCompositionStep>(initialMode);
 
   // edit 모드일 때만 서버에서 initData를 가져옴
-  // 테이블 데이터 패칭 분기
-  const { data } = useGetDebateTableData(tableId, mode === 'edit');
+  const {
+    data,
+    isError: isFetchError,
+    isRefetchError,
+    isLoading: isFetching,
+    isRefetching,
+    refetch,
+  } = useGetDebateTableData(tableId, mode === 'edit');
 
+  // 테이블 데이터 패칭 분기
   const initData = useMemo(() => {
     if (mode === 'edit' && data) {
       const info = data.info as DebateInfo;
@@ -39,8 +61,19 @@ export default function TableComposition() {
     return undefined;
   }, [mode, data]);
 
-  const { formData, updateInfo, updateTable, AddTable, EditTable } =
-    useTableFrom(currentStep, initData);
+  // Declare constants to handle async request
+  const isError = mode === 'add' ? false : isFetchError || isRefetchError;
+  const isLoading = mode === 'add' ? false : isFetching || isRefetching;
+
+  const {
+    formData,
+    updateInfo,
+    updateTable,
+    addTable,
+    editTable,
+    isAddingTable,
+    isModifyingTable,
+  } = useTableFrom(currentStep, initData);
 
   const handleButtonClick = () => {
     const patchedInfo = {
@@ -52,12 +85,27 @@ export default function TableComposition() {
     updateInfo(patchedInfo);
 
     if (mode === 'edit') {
-      EditTable(tableId);
+      editTable(tableId);
     } else {
-      AddTable();
+      addTable();
     }
   };
 
+  // If error, print error message and let user be able to retry
+  if (isError) {
+    return (
+      <DefaultLayout>
+        <DefaultLayout.ContentContainer>
+          <ErrorIndicator onClickRetry={() => refetch()}>
+            시간표 정보를 불러오지 못했어요...<br></br>다시 시도할까요?
+          </ErrorIndicator>
+        </DefaultLayout.ContentContainer>
+      </DefaultLayout>
+    );
+  }
+
+  // If no error or on loading, print contents
+  // Only pass isLoading because isError is used right above this code line
   return (
     <DefaultLayout>
       <Funnel
@@ -65,6 +113,7 @@ export default function TableComposition() {
           NameAndType: (
             <TableNameAndType
               info={formData.info}
+              isLoading={isLoading}
               isEdit={mode === 'edit'}
               onInfoChange={updateInfo}
               onButtonClick={() => goToStep('TimeBox')}
@@ -73,10 +122,12 @@ export default function TableComposition() {
           TimeBox: (
             <TimeBoxStep
               initData={formData}
+              isLoading={isLoading}
               isEdit={mode === 'edit'}
               onTimeBoxChange={updateTable}
               onFinishButtonClick={handleButtonClick}
               onEditTableInfoButtonClick={() => goToStep('NameAndType')}
+              isSubmitting={mode === 'edit' ? isModifyingTable : isAddingTable}
             />
           ),
         }}
diff --git a/src/page/TableComposition/components/DebatePanel/DebatePanel.tsx b/src/page/TableComposition/components/DebatePanel/DebatePanel.tsx
deleted file mode 100644
index b6a2ae09..00000000
--- a/src/page/TableComposition/components/DebatePanel/DebatePanel.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { HTMLAttributes } from 'react';
-import EditDeleteButtons from '../EditDeleteButtons/EditDeleteButtons';
-import { TimeBoxInfo } from '../../../../type/type';
-import { Formatting } from '../../../../util/formatting';
-import { LuArrowUpDown } from 'react-icons/lu';
-
-interface DebatePanelProps extends HTMLAttributes<HTMLDivElement> {
-  info: TimeBoxInfo;
-  prosTeamName: string;
-  consTeamName: string;
-  onSubmitEdit?: (updatedInfo: TimeBoxInfo) => void;
-  onSubmitDelete?: () => void;
-}
-
-export default function DebatePanel(props: DebatePanelProps) {
-  const {
-    stance,
-    speechType,
-    boxType,
-    time,
-    timePerTeam,
-    timePerSpeaking,
-    speaker,
-  } = props.info;
-  const { onSubmitEdit, onSubmitDelete, onMouseDown } = props;
-
-  // 타이머 시간 문자열 처리
-  let timeStr = '';
-  let timePerSpeakingStr = '';
-
-  if (boxType === 'NORMAL') {
-    const { minutes, seconds } = Formatting.formatSecondsToMinutes(time!);
-    timeStr = `${minutes}분 ${seconds}초`;
-  } else {
-    const { minutes, seconds } = Formatting.formatSecondsToMinutes(
-      timePerTeam!,
-    );
-    timeStr = `팀당 ${minutes}분 ${seconds}초`;
-  }
-
-  if (timePerSpeaking !== null) {
-    const { minutes, seconds } =
-      Formatting.formatSecondsToMinutes(timePerSpeaking);
-    timePerSpeakingStr = `발언당 ${minutes}분 ${seconds}초`;
-  }
-  const fullTimeStr = timePerSpeakingStr
-    ? `${timeStr} | ${timePerSpeakingStr}`
-    : timeStr;
-
-  const isPros = stance === 'PROS';
-  const isCons = stance === 'CONS';
-  const isNeutralTimeout = boxType === 'NORMAL' && stance === 'NEUTRAL'; // 작전시간
-  const isNeutralCustom = boxType === 'TIME_BASED' && stance === 'NEUTRAL'; // 자유토론타이머
-
-  const containerClass = isPros
-    ? 'justify-start'
-    : isCons
-      ? 'justify-end'
-      : 'justify-center';
-
-  const renderDragHandle = () => (
-    <div
-      className={`${isPros ? 'right-2' : 'left-2'} absolute top-4 flex h-2/3 w-4 flex-1 cursor-grab items-center 
-                justify-center rounded-md bg-neutral-0 hover:bg-neutral-300`}
-      onMouseDown={onMouseDown}
-      title="위아래로 드래그"
-    >
-      <LuArrowUpDown className="text-neutral-900" />
-    </div>
-  );
-  const renderProsConsPanel = () => (
-    <div
-      className={`relative flex w-1/2 flex-col items-center justify-center rounded-md ${
-        isPros ? 'bg-camp-blue' : 'bg-camp-red'
-      } h-20 select-none p-2 font-bold text-neutral-0`}
-    >
-      {onSubmitEdit && onSubmitDelete && (
-        <>
-          {isPros ? (
-            <>
-              <div className="absolute left-2 top-2">
-                <EditDeleteButtons
-                  info={props.info}
-                  prosTeamName={props.prosTeamName}
-                  consTeamName={props.consTeamName}
-                  onSubmitEdit={onSubmitEdit}
-                  onSubmitDelete={onSubmitDelete}
-                />
-              </div>
-              {renderDragHandle()}
-            </>
-          ) : (
-            <>
-              {renderDragHandle()}
-              <div className="absolute right-2 top-2">
-                <EditDeleteButtons
-                  info={props.info}
-                  prosTeamName={props.prosTeamName}
-                  consTeamName={props.consTeamName}
-                  onSubmitEdit={onSubmitEdit}
-                  onSubmitDelete={onSubmitDelete}
-                />
-              </div>
-            </>
-          )}
-        </>
-      )}
-      <div className="font-semibold">
-        {speechType} {speaker && `| ${speaker} 토론자`}
-      </div>
-      <div className="text-2xl font-semibold">{timeStr}</div>
-    </div>
-  );
-
-  const renderNeutralTimeoutPanel = () => (
-    <div className="relative flex h-20 w-full flex-col items-center justify-center rounded-md bg-neutral-400 p-2 font-medium ">
-      {onSubmitEdit && onSubmitDelete && (
-        <>
-          {renderDragHandle()}
-          <div className="absolute right-2 top-2">
-            <EditDeleteButtons
-              info={props.info}
-              prosTeamName={props.prosTeamName}
-              consTeamName={props.consTeamName}
-              onSubmitEdit={onSubmitEdit}
-              onSubmitDelete={onSubmitDelete}
-            />
-          </div>
-        </>
-      )}
-      <span className="font-semibold">{speechType}</span>
-      <span className="text-2xl font-semibold">{timeStr}</span>
-    </div>
-  );
-
-  const renderNeutralCustomPanel = () => (
-    <div className="relative flex h-20 w-full flex-col items-center justify-center rounded-md bg-brand-main p-2 font-medium ">
-      {onSubmitEdit && onSubmitDelete && (
-        <>
-          {renderDragHandle()}
-          <div className="absolute right-2 top-2">
-            <EditDeleteButtons
-              info={props.info}
-              prosTeamName={props.prosTeamName}
-              consTeamName={props.consTeamName}
-              onSubmitEdit={onSubmitEdit}
-              onSubmitDelete={onSubmitDelete}
-            />
-          </div>
-        </>
-      )}
-      <span className="font-semibold">{speechType}</span>
-      <span className="text-2xl font-semibold">{fullTimeStr}</span>
-    </div>
-  );
-
-  return (
-    <div className={`flex w-full items-center ${containerClass}`}>
-      {(isPros || isCons) && renderProsConsPanel()}
-
-      {isNeutralTimeout && renderNeutralTimeoutPanel()}
-      {isNeutralCustom && renderNeutralCustomPanel()}
-    </div>
-  );
-}
diff --git a/src/page/TableComposition/components/EditDeleteButtons/EditDeleteButtons.tsx b/src/page/TableComposition/components/EditDeleteButtons/EditDeleteButtons.tsx
deleted file mode 100644
index a7cfba20..00000000
--- a/src/page/TableComposition/components/EditDeleteButtons/EditDeleteButtons.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { RiEditFill, RiDeleteBinFill } from 'react-icons/ri';
-import { TimeBoxInfo } from '../../../../type/type';
-import { useModal } from '../../../../hooks/useModal';
-import TimerCreationContent from '../TimerCreationContent/TimerCreationContent';
-import DialogModal from '../../../../components/DialogModal/DialogModal';
-
-interface EditDeleteButtonsProps {
-  info: TimeBoxInfo;
-  prosTeamName?: string;
-  consTeamName?: string;
-  onSubmitEdit: (updatedInfo: TimeBoxInfo) => void;
-  onSubmitDelete: () => void;
-}
-
-export default function EditDeleteButtons(props: EditDeleteButtonsProps) {
-  const {
-    openModal: openEditModal,
-    closeModal: closeEditModal,
-    ModalWrapper: EditModalWrapper,
-  } = useModal({ isCloseButtonExist: false });
-  const {
-    openModal: openDeleteModal,
-    closeModal: closeDeleteModal,
-    ModalWrapper: DeleteModalWrapper,
-  } = useModal({ isCloseButtonExist: false });
-  const { info, onSubmitEdit, onSubmitDelete } = props;
-
-  return (
-    <>
-      <div className="flex justify-end gap-2">
-        <button
-          onClick={openEditModal}
-          className="rounded-sm bg-neutral-0 p-[2px]"
-          aria-label="수정하기"
-        >
-          <RiEditFill className="text-neutral-900" />
-        </button>
-        <button
-          onClick={openDeleteModal}
-          className="rounded-sm bg-neutral-0 p-[2px]"
-          aria-label="삭제하기"
-        >
-          <RiDeleteBinFill className="text-neutral-900" />
-        </button>
-      </div>
-      <EditModalWrapper>
-        <TimerCreationContent
-          initData={info}
-          prosTeamName={props.prosTeamName as string}
-          consTeamName={props.consTeamName as string}
-          onSubmit={(newInfo) => {
-            onSubmitEdit(newInfo);
-          }}
-          onClose={closeEditModal}
-        />
-      </EditModalWrapper>
-
-      <DeleteModalWrapper>
-        <DialogModal
-          left={{ text: '취소', onClick: () => closeDeleteModal() }}
-          right={{
-            text: '삭제',
-            onClick: () => {
-              onSubmitDelete();
-              closeDeleteModal();
-            },
-            isBold: true,
-          }}
-        >
-          <h1 className="px-20 py-10 text-xl font-bold">
-            이 타이머를 삭제하시겠습니까?
-          </h1>
-        </DialogModal>
-      </DeleteModalWrapper>
-    </>
-  );
-}
diff --git a/src/page/TableComposition/components/TableNameAndType/TableNameAndType.tsx b/src/page/TableComposition/components/TableNameAndType/TableNameAndType.tsx
index 246b02f8..19f23d42 100644
--- a/src/page/TableComposition/components/TableNameAndType/TableNameAndType.tsx
+++ b/src/page/TableComposition/components/TableNameAndType/TableNameAndType.tsx
@@ -1,18 +1,24 @@
 import ClearableInput from '../../../../components/ClearableInput/ClearableInput';
 import HeaderTitle from '../../../../components/HeaderTitle/HeaderTitle';
-import LabeledCheckbox from '../../../../components/LabledCheckBox/LabeledCheckbox';
 import DefaultLayout from '../../../../layout/defaultLayout/DefaultLayout';
 import { DebateInfo, StanceToString } from '../../../../type/type';
 
 interface TableNameAndTypeProps {
   info: DebateInfo;
+  isLoading: boolean;
   isEdit?: boolean;
   onInfoChange: (newInfo: DebateInfo) => void;
   onButtonClick: () => void;
 }
 
 export default function TableNameAndType(props: TableNameAndTypeProps) {
-  const { info, isEdit = false, onInfoChange, onButtonClick } = props;
+  const {
+    info,
+    isEdit = false,
+    onInfoChange,
+    isLoading,
+    onButtonClick,
+  } = props;
 
   const handleFieldChange = <K extends keyof DebateInfo>(
     field: K,
@@ -51,8 +57,8 @@ export default function TableNameAndType(props: TableNameAndTypeProps) {
       </DefaultLayout.Header>
 
       <DefaultLayout.ContentContainer>
-        <section className="md:p-8 mx-auto grid w-full max-w-4xl grid-cols-[180px_1fr] gap-x-4 gap-y-12 p-6">
-          <label className="md:text-2xl flex items-center text-base font-semibold">
+        <section className="mx-auto grid w-full max-w-4xl grid-cols-[180px_1fr] gap-x-4 gap-y-12 p-6 md:p-8">
+          <label className="flex items-center text-base font-semibold md:text-2xl">
             토론 시간표 이름
           </label>
           <ClearableInput
@@ -60,9 +66,10 @@ export default function TableNameAndType(props: TableNameAndTypeProps) {
             onChange={(e) => handleFieldChange('name', e.target.value)}
             onClear={() => clearField('name')}
             placeholder="시간표 1"
+            disabled={isLoading}
           />
 
-          <label className="md:text-2xl flex items-center text-base font-semibold">
+          <label className="flex items-center text-base font-semibold md:text-2xl">
             토론 주제
           </label>
           <ClearableInput
@@ -70,9 +77,10 @@ export default function TableNameAndType(props: TableNameAndTypeProps) {
             onChange={(e) => handleFieldChange('agenda', e.target.value)}
             onClear={() => clearField('agenda')}
             placeholder="토론 주제를 입력해주세요"
+            disabled={isLoading}
           />
           <>
-            <label className="md:text-2xl flex items-center text-base font-semibold">
+            <label className="flex items-center text-base font-semibold md:text-2xl">
               팀명
             </label>
             <div className="flex items-center gap-8">
@@ -86,6 +94,7 @@ export default function TableNameAndType(props: TableNameAndTypeProps) {
                 }
                 onClear={() => clearTeamNameField('prosTeamName')}
                 placeholder={StanceToString['PROS']}
+                disabled={isLoading}
               />
               <span>vs.</span>
               <ClearableInput
@@ -98,35 +107,17 @@ export default function TableNameAndType(props: TableNameAndTypeProps) {
                 }
                 onClear={() => clearTeamNameField('consTeamName')}
                 placeholder={StanceToString['CONS']}
+                disabled={isLoading}
               />
             </div>
           </>
-
-          <label className="md:text-2xl text-base font-semibold">
-            종소리 설정
-          </label>
-          <div className="flex flex-col gap-3">
-            <LabeledCheckbox
-              label="발언 종료 30초 전 알림"
-              checked={info.warningBell}
-              onChange={(e) =>
-                handleFieldChange('warningBell', e.target.checked)
-              }
-            />
-            <LabeledCheckbox
-              label="발언 종료 알림"
-              checked={info.finishBell}
-              onChange={(e) =>
-                handleFieldChange('finishBell', e.target.checked)
-              }
-            />
-          </div>
         </section>
       </DefaultLayout.ContentContainer>
 
       <DefaultLayout.StickyFooterWrapper>
         <div className="mx-auto mb-8 w-full max-w-4xl">
           <button
+            disabled={isLoading}
             onClick={() => {
               const pros = info.prosTeamName || '';
               const cons = info.consTeamName || '';
@@ -148,7 +139,7 @@ export default function TableNameAndType(props: TableNameAndTypeProps) {
               onInfoChange(updatedInfo);
               onButtonClick();
             }}
-            className="button enabled h-16 w-full"
+            className="button enabled brand w-full rounded-full"
           >
             다음
           </button>
diff --git a/src/page/TableComposition/components/DebatePanel/DebatePanel.stories.tsx b/src/page/TableComposition/components/TimeBox/TimeBox.stories.tsx
similarity index 84%
rename from src/page/TableComposition/components/DebatePanel/DebatePanel.stories.tsx
rename to src/page/TableComposition/components/TimeBox/TimeBox.stories.tsx
index 2cdd7273..3b97c0ea 100644
--- a/src/page/TableComposition/components/DebatePanel/DebatePanel.stories.tsx
+++ b/src/page/TableComposition/components/TimeBox/TimeBox.stories.tsx
@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react';
-import DebatePanel from './DebatePanel';
+import TimeBox from './TimeBox';
 
-const meta: Meta<typeof DebatePanel> = {
-  title: 'page/TableSetup/Components/DebatePanel',
-  component: DebatePanel,
+const meta: Meta<typeof TimeBox> = {
+  title: 'page/TableSetup/Components/TimeBox',
+  component: TimeBox,
   tags: ['autodocs'],
   args: {
     info: {
@@ -14,12 +14,13 @@ const meta: Meta<typeof DebatePanel> = {
       timePerTeam: null,
       timePerSpeaking: null,
       speaker: '1번',
+      bell: [],
     },
   },
 };
 
 export default meta;
-type Story = StoryObj<typeof DebatePanel>;
+type Story = StoryObj<typeof TimeBox>;
 
 // 찬성 입론
 export const ProsOpening: Story = {
@@ -32,6 +33,7 @@ export const ProsOpening: Story = {
       timePerTeam: null,
       timePerSpeaking: null,
       speaker: '1번',
+      bell: [],
     },
   },
 };
@@ -47,6 +49,7 @@ export const ConsRebuttal: Story = {
       timePerTeam: null,
       timePerSpeaking: null,
       speaker: '1번',
+      bell: [],
     },
   },
 };
@@ -62,6 +65,7 @@ export const NeutralTimeout: Story = {
       timePerTeam: null,
       timePerSpeaking: null,
       speaker: '1번',
+      bell: [],
     },
   },
 };
@@ -77,6 +81,7 @@ export const NeutralCustom: Story = {
       timePerTeam: 120,
       timePerSpeaking: 60,
       speaker: null,
+      bell: [],
     },
   },
 };
diff --git a/src/page/TableComposition/components/TimeBox/TimeBox.tsx b/src/page/TableComposition/components/TimeBox/TimeBox.tsx
new file mode 100644
index 00000000..d6a2074b
--- /dev/null
+++ b/src/page/TableComposition/components/TimeBox/TimeBox.tsx
@@ -0,0 +1,197 @@
+import { HTMLAttributes } from 'react';
+import TimeBoxManageButtons from '../TimeBoxManageButtons/TimeBoxManageButtons';
+import { TimeBoxInfo } from '../../../../type/type';
+import { Formatting } from '../../../../util/formatting';
+import DTDrag from '../../../../components/icons/Drag';
+import SmallIconButtonContainer from '../../../../components/SmallIconContainer/SmallIconContainer';
+import clsx from 'clsx';
+
+interface TimeBoxEventHandlers {
+  onSubmitEdit?: (updatedInfo: TimeBoxInfo) => void;
+  onSubmitDelete?: () => void;
+  onSubmitCopy?: () => void;
+  onMouseDown?: () => void;
+}
+interface TimeBoxProps extends HTMLAttributes<HTMLDivElement> {
+  info: TimeBoxInfo;
+  prosTeamName: string;
+  consTeamName: string;
+  eventHandlers?: TimeBoxEventHandlers;
+}
+
+export default function TimeBox(props: TimeBoxProps) {
+  const {
+    stance,
+    speechType,
+    boxType,
+    time,
+    timePerTeam,
+    timePerSpeaking,
+    speaker,
+  } = props.info;
+  const { eventHandlers } = props;
+  const onSubmitEdit = eventHandlers?.onSubmitEdit;
+  const onSubmitDelete = eventHandlers?.onSubmitDelete;
+  const onSubmitCopy = eventHandlers?.onSubmitCopy;
+  const onMouseDown = eventHandlers?.onMouseDown;
+  const isModifiable = !!eventHandlers;
+  let timeStr = '';
+  let timePerSpeakingStr = '';
+
+  if (boxType === 'NORMAL') {
+    const { minutes, seconds } = Formatting.formatSecondsToMinutes(time!);
+    timeStr = `${minutes}분 ${seconds}초`;
+  } else {
+    const { minutes, seconds } = Formatting.formatSecondsToMinutes(
+      timePerTeam!,
+    );
+    timeStr = `팀당 ${minutes}분 ${seconds}초`;
+  }
+
+  if (timePerSpeaking !== null) {
+    const { minutes, seconds } =
+      Formatting.formatSecondsToMinutes(timePerSpeaking);
+    timePerSpeakingStr = `발언당 ${minutes}분 ${seconds}초`;
+  }
+  const fullTimeStr = timePerSpeakingStr
+    ? `${timeStr} | ${timePerSpeakingStr}`
+    : timeStr;
+
+  const isPros = stance === 'PROS';
+  const isCons = stance === 'CONS';
+  const isNeutralTimeout = boxType === 'NORMAL' && stance === 'NEUTRAL'; // 작전시간
+  const isNeutralCustom = boxType === 'TIME_BASED' && stance === 'NEUTRAL'; // 자유토론타이머
+
+  const containerClass = isPros
+    ? 'justify-start'
+    : isCons
+      ? 'justify-end'
+      : 'justify-center';
+
+  const renderDragHandle = () => (
+    <div
+      className={`
+        absolute flex cursor-grab items-center justify-center
+        ${isPros ? 'right-[10px]' : 'left-[10px]'}
+      `}
+      onMouseDown={onMouseDown}
+      title="위/아래로 드래그"
+    >
+      <SmallIconButtonContainer className="h-[36px] w-[28px] px-[4px] py-[8px]">
+        <DTDrag className="h-full" />
+      </SmallIconButtonContainer>
+    </div>
+  );
+
+  const renderProsConsPanel = () => (
+    <div className={`timebox ${isPros ? 'pros' : 'cons'}`}>
+      {isPros
+        ? isModifiable && (
+            <>
+              <div className="absolute left-[10px] top-[10px]">
+                <TimeBoxManageButtons
+                  info={props.info}
+                  prosTeamName={props.prosTeamName}
+                  consTeamName={props.consTeamName}
+                  eventHandlers={{
+                    onSubmitEdit,
+                    onSubmitDelete,
+                    onSubmitCopy,
+                  }}
+                />
+              </div>
+              {renderDragHandle()}
+            </>
+          )
+        : isModifiable && (
+            <>
+              {renderDragHandle()}
+              <div className="absolute right-[10px] top-[10px]">
+                <TimeBoxManageButtons
+                  info={props.info}
+                  prosTeamName={props.prosTeamName}
+                  consTeamName={props.consTeamName}
+                  eventHandlers={{
+                    onSubmitEdit,
+                    onSubmitDelete,
+                    onSubmitCopy,
+                  }}
+                />
+              </div>
+            </>
+          )}
+      <span
+        className={clsx('flex flex-row text-[22px] text-default-black', {
+          'max-w-[200px]': isModifiable,
+        })}
+      >
+        <p className="truncate font-semibold">
+          {speechType}
+          {speaker && (
+            <span className="font-medium">{` | ${speaker} 토론자`}</span>
+          )}
+        </p>
+      </span>
+      <p className="text-[22px] font-medium">{timeStr}</p>
+    </div>
+  );
+
+  const renderNeutralTimeoutPanel = () => (
+    <div className="timebox neutral">
+      {isModifiable && renderDragHandle()}
+      <div className="absolute right-2 top-2">
+        <TimeBoxManageButtons
+          info={props.info}
+          prosTeamName={props.prosTeamName}
+          consTeamName={props.consTeamName}
+          eventHandlers={{
+            onSubmitEdit,
+            onSubmitDelete,
+            onSubmitCopy,
+          }}
+        />
+      </div>
+      <p className="text-[22px] font-semibold text-default-black">
+        {speechType}
+      </p>
+      <p className="text-[22px] font-medium text-default-black">{timeStr}</p>
+    </div>
+  );
+
+  const renderNeutralCustomPanel = () => (
+    <div className="timebox time-based">
+      {isModifiable && (
+        <>
+          {renderDragHandle()}
+          <div className="absolute right-2 top-2">
+            <TimeBoxManageButtons
+              info={props.info}
+              prosTeamName={props.prosTeamName}
+              consTeamName={props.consTeamName}
+              eventHandlers={{
+                onSubmitEdit,
+                onSubmitDelete,
+                onSubmitCopy,
+              }}
+            />
+          </div>
+        </>
+      )}
+      <span className="text-[22px] font-semibold text-default-black">
+        {speechType}
+      </span>
+      <span className="text-[22px] font-medium text-default-black">
+        {fullTimeStr}
+      </span>
+    </div>
+  );
+
+  return (
+    <div className={`flex w-full items-center ${containerClass}`}>
+      {(isPros || isCons) && renderProsConsPanel()}
+
+      {isNeutralTimeout && renderNeutralTimeoutPanel()}
+      {isNeutralCustom && renderNeutralCustomPanel()}
+    </div>
+  );
+}
diff --git a/src/page/TableComposition/components/EditDeleteButtons/EditDeleteButtons.stories.tsx b/src/page/TableComposition/components/TimeBoxManageButtons/TimeBoxManageButtons.stories.tsx
similarity index 60%
rename from src/page/TableComposition/components/EditDeleteButtons/EditDeleteButtons.stories.tsx
rename to src/page/TableComposition/components/TimeBoxManageButtons/TimeBoxManageButtons.stories.tsx
index 4e807d6a..37054081 100644
--- a/src/page/TableComposition/components/EditDeleteButtons/EditDeleteButtons.stories.tsx
+++ b/src/page/TableComposition/components/TimeBoxManageButtons/TimeBoxManageButtons.stories.tsx
@@ -1,16 +1,16 @@
 import { Meta, StoryObj } from '@storybook/react';
-import EditDeleteButtons from './EditDeleteButtons';
+import TimeBoxManageButtons from './TimeBoxManageButtons';
 import { TimeBoxInfo } from '../../../../type/type';
 
-const meta: Meta<typeof EditDeleteButtons> = {
-  title: 'page/TableSetup/components/EditDeleteButtons',
-  component: EditDeleteButtons,
+const meta: Meta<typeof TimeBoxManageButtons> = {
+  title: 'page/TableSetup/components/TimeBoxManageButtons',
+  component: TimeBoxManageButtons,
   tags: ['autodocs'],
 };
 
 export default meta;
 
-type Story = StoryObj<typeof EditDeleteButtons>;
+type Story = StoryObj<typeof TimeBoxManageButtons>;
 
 const normalTimeBoxInfo: TimeBoxInfo = {
   stance: 'PROS',
@@ -20,13 +20,17 @@ const normalTimeBoxInfo: TimeBoxInfo = {
   speaker: '김철수 토론자',
   timePerSpeaking: null,
   timePerTeam: null,
+  bell: [],
 };
 
 export const NormalTimeBox: Story = {
   args: {
     info: normalTimeBoxInfo,
-    onSubmitEdit: () => {},
-    onSubmitDelete: () => {},
+    eventHandlers: {
+      onSubmitEdit: () => {},
+      onSubmitDelete: () => {},
+      onSubmitCopy: () => {},
+    },
   },
 };
 
@@ -38,12 +42,15 @@ const timeBasedTimeBoxInfo: TimeBoxInfo = {
   speaker: null,
   timePerSpeaking: 120,
   timePerTeam: 480,
+  bell: [],
 };
 
 export const TimeBasedTimeBox: Story = {
   args: {
     info: timeBasedTimeBoxInfo,
-    onSubmitEdit: () => {},
-    onSubmitDelete: () => {},
+    eventHandlers: {
+      onSubmitEdit: () => {},
+      onSubmitDelete: () => {},
+    },
   },
 };
diff --git a/src/page/TableComposition/components/TimeBoxManageButtons/TimeBoxManageButtons.tsx b/src/page/TableComposition/components/TimeBoxManageButtons/TimeBoxManageButtons.tsx
new file mode 100644
index 00000000..eccbfcb3
--- /dev/null
+++ b/src/page/TableComposition/components/TimeBoxManageButtons/TimeBoxManageButtons.tsx
@@ -0,0 +1,98 @@
+import { TimeBoxInfo } from '../../../../type/type';
+import { useModal } from '../../../../hooks/useModal';
+import TimerCreationContent from '../TimerCreationContent/TimerCreationContent';
+import DialogModal from '../../../../components/DialogModal/DialogModal';
+import SmallIconButtonContainer from '../../../../components/SmallIconContainer/SmallIconContainer';
+import DTCopy from '../../../../components/icons/Copy';
+import DTEdit from '../../../../components/icons/Edit';
+import DTDelete from '../../../../components/icons/Delete';
+interface TimeBoxManageButtonsEventHandlers {
+  onSubmitEdit?: (updatedInfo: TimeBoxInfo) => void;
+  onSubmitDelete?: () => void;
+  onSubmitCopy?: () => void;
+}
+interface TimeBoxManageButtonsProps {
+  info: TimeBoxInfo;
+  prosTeamName: string;
+  consTeamName: string;
+  eventHandlers?: TimeBoxManageButtonsEventHandlers;
+}
+
+export default function TimeBoxManageButtons(props: TimeBoxManageButtonsProps) {
+  const {
+    openModal: openEditModal,
+    closeModal: closeEditModal,
+    ModalWrapper: EditModalWrapper,
+  } = useModal({ isCloseButtonExist: false });
+  const {
+    openModal: openDeleteModal,
+    closeModal: closeDeleteModal,
+    ModalWrapper: DeleteModalWrapper,
+  } = useModal({ isCloseButtonExist: false });
+  const { info, eventHandlers } = props;
+  const onSubmitEdit = eventHandlers?.onSubmitEdit;
+  const onSubmitDelete = eventHandlers?.onSubmitDelete;
+  const onSubmitCopy = eventHandlers?.onSubmitCopy;
+
+  return (
+    <>
+      <div className="flex justify-end gap-2">
+        {onSubmitEdit && (
+          <button onClick={openEditModal} aria-label="수정하기">
+            <SmallIconButtonContainer className="size-[28px] p-[8px]">
+              <DTEdit className="h-full" />
+            </SmallIconButtonContainer>
+          </button>
+        )}
+        {onSubmitDelete && (
+          <button onClick={openDeleteModal} aria-label="삭제하기">
+            <SmallIconButtonContainer className="size-[28px] p-[8px]">
+              <DTDelete className="h-full" />
+            </SmallIconButtonContainer>
+          </button>
+        )}
+        {onSubmitCopy && (
+          <button onClick={onSubmitCopy} aria-label="복사하기">
+            <SmallIconButtonContainer className="size-[28px] p-[8px]">
+              <DTCopy className="h-full" />
+            </SmallIconButtonContainer>
+          </button>
+        )}
+      </div>
+
+      {onSubmitEdit && (
+        <EditModalWrapper>
+          <TimerCreationContent
+            initData={info}
+            prosTeamName={props.prosTeamName}
+            consTeamName={props.consTeamName}
+            onSubmit={(newInfo) => {
+              onSubmitEdit(newInfo);
+            }}
+            onClose={closeEditModal}
+          />
+        </EditModalWrapper>
+      )}
+
+      {onSubmitDelete && (
+        <DeleteModalWrapper>
+          <DialogModal
+            left={{ text: '취소', onClick: () => closeDeleteModal() }}
+            right={{
+              text: '삭제',
+              onClick: () => {
+                onSubmitDelete();
+                closeDeleteModal();
+              },
+              isBold: true,
+            }}
+          >
+            <h1 className="px-20 py-10 text-xl font-bold">
+              이 타이머를 삭제하시겠습니까?
+            </h1>
+          </DialogModal>
+        </DeleteModalWrapper>
+      )}
+    </>
+  );
+}
diff --git a/src/page/TableComposition/components/TimeBoxStep/TimeBoxStep.tsx b/src/page/TableComposition/components/TimeBoxStep/TimeBoxStep.tsx
index 932206ec..8dbe94e6 100644
--- a/src/page/TableComposition/components/TimeBoxStep/TimeBoxStep.tsx
+++ b/src/page/TableComposition/components/TimeBoxStep/TimeBoxStep.tsx
@@ -1,5 +1,4 @@
-import DebatePanel from '../DebatePanel/DebatePanel';
-import TimerCreationButton from '../TimerCreationButton/TimerCreationButton';
+import TimeBox from '../TimeBox/TimeBox';
 import { useModal } from '../../../../hooks/useModal';
 import { useDragAndDrop } from '../../../../hooks/useDragAndDrop';
 import DefaultLayout from '../../../../layout/defaultLayout/DefaultLayout';
@@ -8,25 +7,46 @@ import HeaderTableInfo from '../../../../components/HeaderTableInfo/HeaderTableI
 import HeaderTitle from '../../../../components/HeaderTitle/HeaderTitle';
 import TimerCreationContent from '../TimerCreationContent/TimerCreationContent';
 import { DebateTableData, TimeBoxInfo } from '../../../../type/type';
+import DTEdit from '../../../../components/icons/Edit';
+import DTCheck from '../../../../components/icons/Check';
+import FloatingActionButton from '../../../../components/FloatingActionButton/FloatingActionButton';
+import DTAdd from '../../../../components/icons/Add';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import LoadingIndicator from '../../../../components/LoadingIndicator/LoadingIndicator';
 
 interface TimeBoxStepProps {
   initData: DebateTableData;
+  isLoading: boolean;
   onTimeBoxChange: React.Dispatch<React.SetStateAction<TimeBoxInfo[]>>;
   onFinishButtonClick: () => void;
   onEditTableInfoButtonClick: () => void;
   isEdit?: boolean;
+  isSubmitting?: boolean;
 }
 
 export default function TimeBoxStep(props: TimeBoxStepProps) {
+  const { openModal, closeModal, ModalWrapper } = useModal({
+    isCloseButtonExist: false,
+  });
   const {
     initData,
+    isLoading,
     onTimeBoxChange,
     onFinishButtonClick,
     onEditTableInfoButtonClick,
     isEdit = false,
+    isSubmitting = false,
   } = props;
   const initTimeBox = initData.table;
-  const { openModal, closeModal, ModalWrapper } = useModal();
+
+  const [isButtonFixed, setIsButtonFixed] = useState(false);
+  const [footerHeight, setFooterHeight] = useState(0);
+  const [buttonHeight, setButtonHeight] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const contentListRef = useRef<HTMLDivElement>(null);
+  const footerRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLDivElement>(null);
 
   const { handleMouseDown, getDraggingStyles, DragAndDropWrapper } =
     useDragAndDrop({
@@ -35,97 +55,264 @@ export default function TimeBoxStep(props: TimeBoxStepProps) {
       throttleDelay: 50,
     });
 
-  const handleSubmitEdit = (indexToEdit: number, updatedInfo: TimeBoxInfo) => {
-    onTimeBoxChange((prevData) =>
-      prevData.map((item, index) =>
-        index === indexToEdit ? updatedInfo : item,
-      ),
-    );
-  };
+  const handleSubmitEdit = useCallback(
+    (indexToEdit: number, updatedInfo: TimeBoxInfo) => {
+      onTimeBoxChange((prevData) =>
+        prevData.map((item, index) =>
+          index === indexToEdit ? updatedInfo : item,
+        ),
+      );
+    },
+    [onTimeBoxChange],
+  );
 
-  const handleSubmitDelete = (indexToRemove: number) => {
-    onTimeBoxChange((prevData) =>
-      prevData.filter((_, index) => index !== indexToRemove),
-    );
-  };
+  const handleSubmitDelete = useCallback(
+    (indexToRemove: number) => {
+      onTimeBoxChange((prevData) =>
+        prevData.filter((_, index) => index !== indexToRemove),
+      );
+    },
+    [onTimeBoxChange],
+  );
+
+  const handleCopy = useCallback(
+    (indexToCopy: number) => {
+      onTimeBoxChange((prevData) => {
+        const toCopy = prevData[indexToCopy];
+        if (!toCopy) return prevData;
+        const copyItem = JSON.parse(JSON.stringify(toCopy));
+        return [...prevData, copyItem];
+      });
+    },
+    [onTimeBoxChange],
+  );
+
+  const handleAddTimeBox = useCallback(
+    (data: TimeBoxInfo) => {
+      onTimeBoxChange((prev) => [...prev, data]);
+      closeModal();
+    },
+    [onTimeBoxChange, closeModal],
+  );
 
-  const isAbledSummitButton = initTimeBox.length !== 0;
+  const isSubmitButtonDisabled =
+    initTimeBox.length === 0 || isLoading || isSubmitting;
 
   const renderTimeBoxItem = (info: TimeBoxInfo, index: number) => {
     return (
-      <DebatePanel
+      <TimeBox
         key={index}
         info={info as TimeBoxInfo}
-        onSubmitEdit={(updatedInfo) => handleSubmitEdit(index, updatedInfo)}
         prosTeamName={initData.info.prosTeamName}
         consTeamName={initData.info.consTeamName}
-        onSubmitDelete={() => handleSubmitDelete(index)}
-        onMouseDown={() => handleMouseDown(index)}
+        eventHandlers={{
+          onSubmitEdit: (updatedInfo: TimeBoxInfo) =>
+            handleSubmitEdit(index, updatedInfo),
+          onSubmitDelete: () => handleSubmitDelete(index),
+          onSubmitCopy: () => handleCopy(index),
+          onMouseDown: () => handleMouseDown(index),
+        }}
       />
     );
   };
 
+  // 레이아웃 변화 감지 및 버튼의 위치 계산
+  useLayoutEffect(() => {
+    if (isLoading) {
+      return;
+    }
+
+    const containerElement = containerRef.current;
+    const contentListElement = contentListRef.current;
+    const footerElement = footerRef.current;
+    const buttonElement = buttonRef.current;
+
+    if (
+      !containerElement ||
+      !footerElement ||
+      !buttonElement ||
+      !contentListElement
+    ) {
+      return;
+    }
+
+    const calculatePosition = () => {
+      // 1. Footer 높이 측정
+      const newFooterHeight = footerElement.getBoundingClientRect().height;
+      setFooterHeight(newFooterHeight);
+
+      // 2. 버튼의 실제 높이(offsetHeight) 측정 및 state 업데이트
+      const newButtonHeight = buttonElement.offsetHeight;
+      setButtonHeight(newButtonHeight);
+
+      // 3. 스크롤 바 유무 판단
+      const hasScrollBar =
+        contentListElement.scrollHeight > containerElement.clientHeight;
+
+      // 4. 현재 상태와 다를 경우에만 상태 업데이트
+      if (isButtonFixed !== hasScrollBar) {
+        setIsButtonFixed(hasScrollBar);
+      }
+    };
+
+    calculatePosition();
+
+    const resizeObserver = new ResizeObserver(calculatePosition);
+    resizeObserver.observe(contentListElement);
+    resizeObserver.observe(footerElement);
+    resizeObserver.observe(buttonElement);
+    resizeObserver.observe(containerElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [
+    isLoading,
+    initTimeBox.length,
+    isButtonFixed,
+    buttonHeight,
+    footerHeight,
+  ]);
+
+  // 윈도우 리사이즈 감지
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      const containerElement = containerRef.current;
+      const contentListElement = contentListRef.current;
+
+      if (!containerElement || !contentListElement) {
+        return;
+      }
+
+      const hasScrollBar =
+        contentListElement.scrollHeight > containerElement.clientHeight;
+
+      if (isButtonFixed !== hasScrollBar) {
+        setIsButtonFixed(hasScrollBar);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [isButtonFixed]);
+
   return (
     <DefaultLayout>
       <DefaultLayout.Header>
         <DefaultLayout.Header.Left>
-          <HeaderTableInfo name={initData.info.name} />
+          {!isLoading && <HeaderTableInfo name={initData.info.name} />}
         </DefaultLayout.Header.Left>
         <DefaultLayout.Header.Center>
-          <HeaderTitle title={initData.info.agenda} />
+          {!isLoading && <HeaderTitle title={initData.info.agenda} />}
         </DefaultLayout.Header.Center>
         <DefaultLayout.Header.Right />
       </DefaultLayout.Header>
 
       <DefaultLayout.ContentContainer>
-        <section className="mx-auto flex w-full max-w-4xl flex-col justify-center">
-          <PropsAndConsTitle
-            prosTeamName={initData.info.prosTeamName}
-            consTeamName={initData.info.consTeamName}
-          />
-
-          <DragAndDropWrapper>
-            {initTimeBox.map((info, index) => (
-              <div key={index + info.stance} style={getDraggingStyles(index)}>
-                {renderTimeBoxItem(info, index)}
-              </div>
-            ))}
-          </DragAndDropWrapper>
+        {isLoading && <LoadingIndicator />}
+        {!isLoading && (
+          <div
+            ref={containerRef}
+            className="relative mx-auto flex h-full min-h-0 w-full max-w-4xl flex-col justify-start"
+          >
+            <div
+              ref={contentListRef}
+              className="min-h-0 flex-1 overflow-y-auto"
+            >
+              <PropsAndConsTitle
+                prosTeamName={initData.info.prosTeamName}
+                consTeamName={initData.info.consTeamName}
+              />
 
-          <TimerCreationButton onClick={openModal} />
-        </section>
+              <DragAndDropWrapper>
+                {initTimeBox.length > 0 &&
+                  initTimeBox.map((info, index) => (
+                    <div
+                      key={index + info.stance + info.speechType}
+                      style={getDraggingStyles(index)}
+                    >
+                      {renderTimeBoxItem(info, index)}
+                    </div>
+                  ))}
+
+                {/* 버튼이 고정될 때에만 하단 여백 추가 */}
+                {isButtonFixed && (
+                  <span style={{ height: `${buttonHeight}px` }}></span>
+                )}
+              </DragAndDropWrapper>
+
+              <div
+                ref={buttonRef}
+                className={clsx('flex items-center justify-center', {
+                  'fixed left-1/2 -translate-x-1/2': isButtonFixed,
+                  relative: !isButtonFixed,
+                })}
+                style={
+                  isButtonFixed
+                    ? {
+                        bottom: `${footerHeight + 32}px`,
+                      }
+                    : {}
+                }
+              >
+                <FloatingActionButton
+                  onClick={openModal}
+                  className="pointer-events-auto my-[16px] bg-default-disabled/hover hover:bg-default-neutral"
+                >
+                  <div className="flex h-[56px] w-fit flex-row items-center justify-center space-x-[12px] p-[16px]">
+                    <DTAdd className="h-full p-[4px]" />
+                    <p className="text-body whitespace-nowrap">타이머 추가</p>
+                  </div>
+                </FloatingActionButton>
+              </div>
+            </div>
+          </div>
+        )}
       </DefaultLayout.ContentContainer>
 
       <DefaultLayout.StickyFooterWrapper>
-        <div className="mx-auto mb-8 flex w-full max-w-4xl items-center justify-between gap-2">
-          {/* TODO: Need to add a function here */}
+        <div
+          ref={footerRef}
+          className="mx-auto mb-8 flex w-full max-w-4xl items-center justify-between gap-2"
+        >
           <button
             onClick={onEditTableInfoButtonClick}
-            className="button enabled h-16 w-full"
+            className={clsx(
+              'flex h-full w-full gap-[12px] rounded-full p-[24px]',
+              {
+                'button disabled': isLoading,
+                'button enabled neutral': !isLoading,
+              },
+            )}
+            disabled={isLoading}
           >
+            <DTEdit className="h-full" />
             토론 정보 수정하기
           </button>
 
           <button
             onClick={onFinishButtonClick}
-            className={`h-16 w-full ${
-              isAbledSummitButton ? 'button enabled' : 'button disabled'
-            }`}
-            disabled={!isAbledSummitButton}
+            className={clsx(
+              'flex h-full w-full gap-[12px] rounded-full p-[24px]',
+              {
+                'button enabled brand': !isSubmitButtonDisabled,
+                'button disabled': isSubmitButtonDisabled,
+              },
+            )}
+            disabled={isSubmitButtonDisabled}
           >
+            <DTCheck className="h-full" />
             {isEdit ? '수정 완료' : '추가하기'}
           </button>
         </div>
       </DefaultLayout.StickyFooterWrapper>
 
-      <ModalWrapper closeButtonColor="text-neutral-1000">
+      <ModalWrapper>
         <TimerCreationContent
           beforeData={initTimeBox[initTimeBox.length - 1] as TimeBoxInfo}
           prosTeamName={initData.info.prosTeamName}
           consTeamName={initData.info.consTeamName}
-          onSubmit={(data) => {
-            onTimeBoxChange((prev) => [...prev, data]);
-          }}
+          onSubmit={handleAddTimeBox}
           onClose={closeModal}
         />
       </ModalWrapper>
diff --git a/src/page/TableComposition/components/TimerCreationContent/TimeInputGroup.tsx b/src/page/TableComposition/components/TimerCreationContent/TimeInputGroup.tsx
new file mode 100644
index 00000000..160362b0
--- /dev/null
+++ b/src/page/TableComposition/components/TimerCreationContent/TimeInputGroup.tsx
@@ -0,0 +1,47 @@
+import ClearableInput from '../../../../components/ClearableInput/ClearableInput';
+import TimerCreationContentItem from './TimerCreationContentMenuItem';
+
+interface TimeInputGroupProps {
+  title: string;
+  minutes: number;
+  seconds: number;
+  onMinutesChange: (value: number) => void;
+  onSecondsChange: (value: number) => void;
+}
+
+export default function TimeInputGroup({
+  title,
+  minutes,
+  seconds,
+  onMinutesChange,
+  onSecondsChange,
+}: TimeInputGroupProps) {
+  const validateTime = (value: string) =>
+    value === '' ? 0 : Math.max(0, Math.min(59, Number(value)));
+
+  return (
+    <TimerCreationContentItem title={title}>
+      <span className="flex flex-row">
+        <span className="flex flex-1 flex-row items-center space-x-[8px]">
+          <ClearableInput
+            type="number"
+            value={minutes.toString()}
+            onChange={(e) => onMinutesChange(validateTime(e.target.value))}
+            onClear={() => onMinutesChange(0)}
+          />
+          <p className="text-body">분</p>
+        </span>
+        <span className="w-[16px]"></span>
+        <span className="flex flex-1 flex-row items-center space-x-[8px]">
+          <ClearableInput
+            type="number"
+            value={seconds.toString()}
+            onChange={(e) => onSecondsChange(validateTime(e.target.value))}
+            onClear={() => onSecondsChange(0)}
+          />
+          <p className="text-body">초</p>
+        </span>
+      </span>
+    </TimerCreationContentItem>
+  );
+}
diff --git a/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.stories.tsx b/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.stories.tsx
new file mode 100644
index 00000000..87d512ca
--- /dev/null
+++ b/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.stories.tsx
@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react';
+import TimerCreationContent from './TimerCreationContent';
+
+const meta: Meta<typeof TimerCreationContent> = {
+  title: 'page/TableComposition/Components/TimerCreationContent',
+  component: TimerCreationContent,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TimerCreationContent>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx b/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx
index d8d96f31..8a408f45 100644
--- a/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx
+++ b/src/page/TableComposition/components/TimerCreationContent/TimerCreationContent.tsx
@@ -1,10 +1,76 @@
-import { useState, useEffect, useMemo } from 'react';
-import { TimeBoxInfo, Stance, TimeBoxType } from '../../../../type/type';
+import { useCallback, useMemo, useState } from 'react';
+import {
+  TimeBoxInfo,
+  Stance,
+  TimeBoxType,
+  BellType,
+  BellTypeToString,
+  BellConfig,
+} from '../../../../type/type';
 import { Formatting } from '../../../../util/formatting';
-import normalTimer from '../../../../assets/timer/normal_timer.png';
-import timeBasedTimer from '../../../../assets/timer/timebased_timer.png';
-import LabeledCheckbox from '../../../../components/LabledCheckBox/LabeledCheckbox';
-import timeBasedPerSpeakingTimer from '../../../../assets/timer/timebased_perSpeaking_timer.png';
+import normalTimerProsImage from '../../../../assets/timer/normal_timer_pros.jpg';
+import normalTimerConsImage from '../../../../assets/timer/normal_timer_cons.jpg';
+import normalTimerNeutralImage from '../../../../assets/timer/normal_timer_neutral.jpg';
+import timeBasedTimerImage from '../../../../assets/timer/time_based_timer.jpg';
+import timeBasedTimerOnlyTotalImage from '../../../../assets/timer/time_based_timer_only_total.jpg';
+import DTClose from '../../../../components/icons/Close';
+import TimerCreationContentItem from './TimerCreationContentMenuItem';
+import LabeledRadioButton from '../../../../components/LabeledRadioButton/LabeledRadioButton';
+import ClearableInput from '../../../../components/ClearableInput/ClearableInput';
+import DropdownMenu, {
+  DropdownMenuItem,
+} from '../../../../components/DropdownMenu/DropdownMenu';
+import clsx from 'clsx';
+import TimeInputGroup from './TimeInputGroup';
+import DTBell from '../../../../components/icons/Bell';
+import DTAdd from '../../../../components/icons/Add';
+import NotificationBadge from '../../../../components/NotificationBadge/NotificationBadge';
+import DTExpand from '../../../../components/icons/Expand';
+
+type TimerCreationOption =
+  | 'TIMER_TYPE'
+  | 'SPEECH_TYPE_NORMAL'
+  | 'SPEECH_TYPE_TIME_BASED'
+  | 'TEAM'
+  | 'TIME_PER_TEAM'
+  | 'TIME_PER_SPEAKING'
+  | 'SPEAKER'
+  | 'TIME_NORMAL'
+  | 'BELL';
+
+type SpeechType = 'OPENING' | 'REBUTTAL' | 'TIMEOUT' | 'CLOSING' | 'CUSTOM';
+
+const SPEECH_TYPE_RECORD: Record<SpeechType, string> = {
+  OPENING: '입론',
+  CLOSING: '최종 발언',
+  CUSTOM: '직접 입력',
+  REBUTTAL: '반론',
+  TIMEOUT: '작전 시간',
+} as const;
+
+const STANCE_RECORD: Record<Stance, string> = {
+  PROS: '찬성',
+  CONS: '반대',
+  NEUTRAL: '중립',
+} as const;
+
+const NORMAL_OPTIONS: TimerCreationOption[] = [
+  'TIMER_TYPE',
+  'SPEECH_TYPE_NORMAL',
+  'TEAM',
+  'TIME_NORMAL',
+  'SPEAKER',
+  'BELL',
+] as const;
+
+const TIME_BASED_OPTIONS: TimerCreationOption[] = [
+  'TIMER_TYPE',
+  'SPEECH_TYPE_TIME_BASED',
+  'TIME_PER_TEAM',
+  'TIME_PER_SPEAKING',
+] as const;
+
+const SAVED_BELL_CONFIGS_KEY = 'savedBellInputConfigs';
 
 interface TimerCreationContentProps {
   beforeData?: TimeBoxInfo;
@@ -15,6 +81,13 @@ interface TimerCreationContentProps {
   onClose: () => void;
 }
 
+interface BellInputConfig {
+  type: BellType;
+  min: number;
+  sec: number;
+  count: number;
+}
+
 export default function TimerCreationContent({
   beforeData,
   initData,
@@ -32,21 +105,50 @@ export default function TimerCreationContent({
           : 'CONS'
       : (initData?.stance ?? 'PROS'),
   );
-  const [boxType, setBoxType] = useState<TimeBoxType>(
+  const [timerType, setTimerType] = useState<TimeBoxType>(
     beforeData?.boxType ?? initData?.boxType ?? 'NORMAL',
   );
 
-  const predefinedSpeechOptions = useMemo(
-    () => ['입론', '반론', '최종 발언', '작전 시간'],
-    [],
-  );
+  // 발언 유형 초기화
+  const getSpeechTypeFromString = (value: string): SpeechType => {
+    switch (value.trim()) {
+      case '입론':
+        return 'OPENING';
+      case '반론':
+        return 'REBUTTAL';
+      case '최종발언':
+      case '최종 발언':
+        return 'CLOSING';
+      case '작전시간':
+      case '작전 시간':
+        return 'TIMEOUT';
+      default:
+        return 'CUSTOM';
+    }
+  };
+
+  const initBellInput: BellInputConfig = useMemo(() => {
+    return {
+      type: 'BEFORE_END', // 기본값: 종료 전
+      min: 0,
+      sec: 0,
+      count: 1,
+    };
+  }, []);
 
   const initSpeechType =
     beforeData?.speechType ?? initData?.speechType ?? '입론';
-  const [speechType, setSpeechType] = useState<string>(initSpeechType);
-  const [isCustomSpeech, setIsCustomSpeech] = useState(
-    !predefinedSpeechOptions.includes(initSpeechType),
+  const [currentSpeechType, setCurrentSpeechType] = useState<SpeechType>(
+    getSpeechTypeFromString(initSpeechType),
   );
+  const [speechTypeTextValue, setSpeechTypeTextValue] = useState<string>(
+    currentSpeechType === 'CUSTOM'
+      ? (initData?.speechType ?? '')
+      : SPEECH_TYPE_RECORD[currentSpeechType],
+  );
+
+  // 종소리 영역 확장 여부
+  const [isBellExpanded, setIsBellExpanded] = useState(false);
 
   // 발언 시간
   const { minutes: initMinutes, seconds: initSeconds } =
@@ -67,424 +169,729 @@ export default function TimerCreationContent({
   // 1회당 발언 시간
   const { minutes: initSpeakerMinutes, seconds: initSpeakerSeconds } =
     Formatting.formatSecondsToMinutes(
-      beforeData?.timePerSpeaking ?? initData?.timePerSpeaking ?? 180,
+      beforeData?.timePerSpeaking ?? initData?.timePerSpeaking ?? 0,
     );
   const [speakerMinutes, setSpeakerMinutes] = useState(initSpeakerMinutes);
   const [speakerSeconds, setSpeakerSeconds] = useState(initSpeakerSeconds);
 
-  const [useSpeakerTime, setUseSpeakerTime] = useState<boolean>(
-    (beforeData?.timePerSpeaking ?? initData?.timePerSpeaking) != null,
-  );
-
   const [speaker, setSpeaker] = useState<string>(
     beforeData?.speaker ?? initData?.speaker ?? '',
   );
 
-  const handleSubmit = () => {
+  // 시간 총량제 타이머 샘플 이미지 및 대체 텍스트 결정
+  const isSpeakingTimerDisabled = speakerMinutes === 0 && speakerSeconds === 0;
+  const timeBasedPreviewSrc = isSpeakingTimerDisabled
+    ? timeBasedTimerOnlyTotalImage
+    : timeBasedTimerImage;
+  const timeBasedPreviewAlt = isSpeakingTimerDisabled
+    ? 'time-based-timer-only-total-timer'
+    : 'time-based-timer';
+
+  // 이전 종소리 설정
+  const rawBellConfigData = sessionStorage.getItem(SAVED_BELL_CONFIGS_KEY);
+  const defaultBellConfig: BellInputConfig[] = [
+    { type: 'BEFORE_END', min: 0, sec: 30, count: 1 },
+    { type: 'BEFORE_END', min: 0, sec: 0, count: 2 },
+  ];
+  const savedBellOptions: BellInputConfig[] =
+    rawBellConfigData === null
+      ? defaultBellConfig
+      : JSON.parse(rawBellConfigData);
+
+  // 종소리 input 상태
+  const [bellInput, setBellInput] = useState<BellInputConfig>(initBellInput);
+
+  // bell의 time(초)은: before => 양수, after => 음수로 변환
+  const getInitialBells = (): BellInputConfig[] => {
+    if (initData) {
+      const initBell = initData.bell === null ? [] : initData.bell;
+      return initBell.map(bellConfigToBellInputConfig);
+    }
+    return savedBellOptions;
+  };
+  const [bells, setBells] = useState<BellInputConfig[]>(getInitialBells);
+
+  const handleAddBell = () => {
+    setBells([
+      ...bells,
+      {
+        type: bellInput.type,
+        min: bellInput.min,
+        sec: bellInput.sec,
+        count: bellInput.count,
+      },
+    ]);
+    setBellInput(initBellInput);
+  };
+
+  const handleDeleteBell = (idx: number) => {
+    setBells(bells.filter((_, i) => i !== idx));
+  };
+
+  const isNormalTimer = timerType === 'NORMAL';
+
+  const speechTypeOptions: DropdownMenuItem<SpeechType>[] = [
+    { value: 'OPENING', label: SPEECH_TYPE_RECORD['OPENING'] },
+    { value: 'REBUTTAL', label: SPEECH_TYPE_RECORD['REBUTTAL'] },
+    { value: 'TIMEOUT', label: SPEECH_TYPE_RECORD['TIMEOUT'] },
+    { value: 'CLOSING', label: SPEECH_TYPE_RECORD['CLOSING'] },
+    { value: 'CUSTOM', label: SPEECH_TYPE_RECORD['CUSTOM'] },
+  ] as const;
+
+  const stanceOptions: DropdownMenuItem<Stance>[] = useMemo(
+    () => [
+      { value: 'PROS', label: prosTeamName },
+      { value: 'CONS', label: consTeamName },
+      { value: 'NEUTRAL', label: STANCE_RECORD['NEUTRAL'] },
+    ],
+    [prosTeamName, consTeamName],
+  );
+
+  const bellOptions: DropdownMenuItem<BellType>[] = useMemo(
+    () => [
+      { value: 'BEFORE_END', label: BellTypeToString['BEFORE_END'] },
+      { value: 'AFTER_END', label: BellTypeToString['AFTER_END'] },
+      { value: 'AFTER_START', label: BellTypeToString['AFTER_START'] },
+    ],
+    [],
+  );
+
+  const options = isNormalTimer ? NORMAL_OPTIONS : TIME_BASED_OPTIONS;
+
+  const handleSubmit = useCallback(() => {
     const totalTime = minutes * 60 + seconds;
     const totalTimePerTeam = teamMinutes * 60 + teamSeconds;
     const totalTimePerSpeaking = speakerMinutes * 60 + speakerSeconds;
 
+    // 입력 검증 로직
     const errors: string[] = [];
-    // 텍스트 길이 유효성 검사
-    if (speechType.length > 10) {
-      errors.push('발언 유형은 최대 10자까지 입력할 수 있습니다.');
-    }
-    if (speaker.length > 5) {
-      errors.push('발언자는 최대 5자까지 입력할 수 있습니다.');
+
+    if (timerType === 'NORMAL') {
+      if (totalTime <= 0) {
+        errors.push('발언 시간은 1초 이상이어야 해요.');
+      }
+
+      // 타종 옵션 유효성 검사
+      bells.forEach((item: BellInputConfig) => {
+        if (item.type === 'BEFORE_END') {
+          const bellTime = item.min * 60 + item.sec;
+
+          if (bellTime > totalTime) {
+            errors.push('종료 전 타종은 발언 시간보다 길 수 없어요.');
+          }
+        }
+      });
     }
-    // 발언시간 유효성 검사
-    if (
-      boxType === 'TIME_BASED' &&
-      useSpeakerTime &&
-      totalTimePerSpeaking > totalTimePerTeam
-    ) {
-      errors.push('1회당 발언 시간은 팀당 총 발언 시간보다 클 수 없습니다.');
+
+    if (timerType === 'TIME_BASED') {
+      if (totalTimePerTeam <= 0) {
+        errors.push('팀당 발언 시간은 1초 이상이어야 해요.');
+      }
+
+      if (totalTimePerSpeaking > totalTimePerTeam) {
+        errors.push('1회당 발언 시간은 팀당 발언 시간을 초과할 수 없어요.');
+      }
     }
-    // 커스텀 타이머 발언유형 유효성 검사
-    if (boxType === 'NORMAL' && speechType.trim() === '') {
-      errors.push('발언 유형을 입력해주세요.');
+
+    // SpeechType에 맞게 문자열 매핑
+    let speechTypeToSend: string;
+    let stanceToSend: Stance;
+    if (currentSpeechType === 'CUSTOM') {
+      // 텍스트 길이 유효성 검사
+      if (speechTypeTextValue.length > 10) {
+        errors.push('발언 유형은 최대 10자까지 입력할 수 있습니다.');
+      }
+      if (speaker.length > 5) {
+        errors.push('발언자는 최대 5자까지 입력할 수 있습니다.');
+      }
+
+      // 발언시간 유효성 검사
+      if (
+        timerType === 'TIME_BASED' &&
+        totalTimePerSpeaking > totalTimePerTeam
+      ) {
+        errors.push('1회당 발언 시간은 팀당 총 발언 시간보다 클 수 없습니다.');
+      }
+
+      // 커스텀 타이머 발언유형 유효성 검사
+      if (timerType === 'NORMAL' && speechTypeTextValue.trim() === '') {
+        errors.push('발언 유형을 입력해주세요.');
+      }
     }
+
     if (errors.length > 0) {
       alert(errors.join('\n'));
       return;
+    } else {
+      if (currentSpeechType === 'CUSTOM') {
+        speechTypeToSend = speechTypeTextValue;
+        stanceToSend = timerType === 'TIME_BASED' ? 'NEUTRAL' : stance;
+      } else {
+        speechTypeToSend = SPEECH_TYPE_RECORD[currentSpeechType];
+        stanceToSend = currentSpeechType === 'TIMEOUT' ? 'NEUTRAL' : stance;
+      }
     }
 
-    if (boxType === 'NORMAL') {
+    const bell = isNormalTimer ? bells.map(bellInputConfigToBellConfig) : null;
+    if (timerType === 'NORMAL') {
+      sessionStorage.setItem(SAVED_BELL_CONFIGS_KEY, JSON.stringify(bells));
       onSubmit({
-        stance,
-        speechType,
-        boxType,
+        stance: stanceToSend,
+        speechType: speechTypeToSend,
+        boxType: timerType,
         time: totalTime,
         timePerTeam: null,
         timePerSpeaking: null,
-        speaker,
+        speaker: stanceToSend === 'NEUTRAL' ? null : speaker,
+        bell,
       });
     } else {
-      // TIME_BASED
       onSubmit({
-        stance: 'NEUTRAL',
-        speechType: speechType.trim() === '' ? '자유토론' : speechType,
-        boxType,
+        stance: stanceToSend,
+        speechType:
+          speechTypeToSend.trim() === '' ? '자유토론' : speechTypeToSend,
+        boxType: timerType,
         time: null,
         timePerTeam: totalTimePerTeam,
-        timePerSpeaking: useSpeakerTime ? totalTimePerSpeaking : null,
+        timePerSpeaking:
+          totalTimePerSpeaking !== 0 ? totalTimePerSpeaking : null,
         speaker: null,
+        bell: null,
       });
     }
+
     onClose();
-  };
+  }, [
+    bells,
+    isNormalTimer,
+    currentSpeechType,
+    minutes,
+    seconds,
+    onClose,
+    onSubmit,
+    speaker,
+    speakerMinutes,
+    speakerSeconds,
+    teamMinutes,
+    teamSeconds,
+    stance,
+    speechTypeTextValue,
+    timerType,
+  ]);
+
+  const handleTimerChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const newTimerType = event.target.value as TimeBoxType;
+      setTimerType(newTimerType);
+
+      // 타이머 종류에 따라 발언 유형(speechType)을 적절하게 설정
+      if (newTimerType === 'NORMAL') {
+        setCurrentSpeechType('OPENING'); // 자유토론 > 일반 전환 시 '입론'으로 초기화
+        setStance('PROS');
+      } else {
+        setCurrentSpeechType('CUSTOM'); // 일반 > 자유토론 전환 시 '직접 입력'으로 초기화
+        setSpeechTypeTextValue('');
+      }
+    },
+    [],
+  );
 
-  const validateTime = (value: string) =>
-    value === '' ? 0 : Math.max(0, Math.min(59, Number(value)));
+  const handleSpeechTypeChange = useCallback(
+    (selectedValue: SpeechType) => {
+      setCurrentSpeechType(selectedValue);
 
-  const isNormalTimer = boxType === 'NORMAL';
+      if (selectedValue === 'CUSTOM') {
+        setSpeechTypeTextValue('');
+      }
 
-  // 자유토론 타이머로 전환되면 speechType 초기화
-  useEffect(() => {
-    if (!isNormalTimer) {
-      // 자유토론 타이머로 전환 시
-      /*
-      if (!initData?.speechType) {
-        setSpeechType('');
+      if (selectedValue === 'TIMEOUT') {
+        setStance('NEUTRAL');
+        setSpeaker('');
       }
-        */
-      setIsCustomSpeech(true);
-    } else {
-      // 일반 타이머로 전환 시, speechType이 predefined에 있으면 custom 아님
-      setIsCustomSpeech(!predefinedSpeechOptions.includes(speechType));
-    }
-    if (stance === 'NEUTRAL') {
-      setSpeaker('');
+
+      if (
+        stance === 'NEUTRAL' &&
+        selectedValue !== 'CUSTOM' &&
+        selectedValue !== 'TIMEOUT'
+      ) {
+        setStance('PROS');
+      }
+    },
+    [stance],
+  );
+
+  const handleStanceChange = useCallback(
+    (selectedValue: Stance) => {
+      if (selectedValue === 'NEUTRAL') {
+        if (currentSpeechType !== 'CUSTOM') {
+          alert(
+            "중립은 발언 유형이 '직접 입력'일 경우에만 선택할 수 있습니다.",
+          );
+          return;
+        }
+      }
+
+      setStance(selectedValue);
+    },
+    [currentSpeechType],
+  );
+
+  const handleBellExpandButtonClick = useCallback(() => {
+    setIsBellExpanded((prev) => !prev);
+  }, []);
+
+  // 1, 2, 3으로 범위가 제한되는 종소리 횟수에 사용하는 변경 함수
+  const handleBellCountChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+
+      // Backspace 대응
+      if (value === '') {
+        setBellInput((prev) => ({
+          ...prev,
+          count: 1,
+        }));
+        return;
+      }
+
+      // 마지막 입력 문자를 가져옴
+      const lastInput = value.slice(-1);
+      let newCount;
+
+      if (['1', '2', '3'].includes(lastInput)) {
+        // 유효한 입력(1, 2, 3)이면 해당 값으로 설정
+        newCount = lastInput;
+      } else {
+        // 유효하지 않은 문자(알파벳, 1~3 이외 숫자 등)가 마지막에 입력된 경우 무시
+        return;
+      }
+
+      setBellInput((prev) => ({
+        ...prev,
+        count: Number(newCount),
+      }));
+    },
+    [],
+  );
+
+  // 0 <= x <= 59로 범위가 제한되는 분과 초에 사용하는 검증 함수
+  const getValidateTimeValue = (value: string) => {
+    let num = parseInt(value, 10);
+    if (isNaN(num)) {
+      num = 0;
     }
-  }, [
-    isNormalTimer,
-    stance,
-    speechType,
-    predefinedSpeechOptions,
-    initData?.speechType,
-  ]);
+
+    return Math.max(0, Math.min(59, num));
+  };
 
   return (
-    <div className="relative p-6">
-      <div className="flex flex-col gap-1">
-        <div className="flex h-[280px] flex-row items-center justify-center p-2">
-          <div className="flex h-[260px] w-[260px] justify-center">
-            {/** 타이머 이미지 */}
-            {isNormalTimer ? (
-              <img
-                src={normalTimer}
-                alt="normal-timer"
-                className="h-full object-contain"
-              />
-            ) : useSpeakerTime ? (
-              <img
-                src={timeBasedPerSpeakingTimer}
-                alt="timebased-per-speaking-timer"
-                className="h-full object-contain"
-              />
+    <div className="flex w-[820px] flex-col">
+      {/* 헤더 */}
+      <section className="mx-[50px] mt-[25px] flex flex-row justify-between">
+        {/* 제목 */}
+        <span className="flex flex-col space-y-[16px]">
+          <h1 className="text-subtitle">
+            {timerType === 'NORMAL' ? '일반 타이머' : '자유토론 타이머'}
+          </h1>
+          <p className="text-body leading-[1.5] text-default-neutral ">
+            {timerType === 'NORMAL' ? (
+              '한 팀의 발언 시간이 세팅된 일반적인 타이머'
             ) : (
-              <img
-                src={timeBasedTimer}
-                alt="timebased-timer"
-                className="h-full object-contain"
-              />
+              <>
+                {'팀별 발언 시간과 1회당 발언 시간이 세팅된 타이머'}
+                <br />
+                {'1회당 발언 시간이 지나면, 상대 팀으로 발언권이 넘어감'}
+              </>
             )}
-          </div>
-
-          <div className="flex w-[350px] flex-col gap-6 p-5">
-            {/** boxType 라디오버튼 */}
-            <div className="flex items-center space-x-2">
-              <label
-                htmlFor="debate-type-select"
-                className="w-16 flex-shrink-0 font-semibold"
-              >
-                종류
-              </label>
-              <div className="flex w-full justify-between space-x-2">
-                <label className="flex cursor-pointer items-center gap-2">
-                  <input
-                    type="radio"
-                    name="boxType"
-                    value="NORMAL"
-                    checked={boxType === 'NORMAL'}
-                    onChange={(e) => {
-                      setBoxType(e.target.value as TimeBoxType);
-                      setSpeechType('');
-                    }}
+          </p>
+        </span>
+
+        {/* 닫기 버튼 */}
+        <button onClick={onClose}>
+          <DTClose className="size-8 text-default-black" />
+        </button>
+      </section>
+
+      {/* 디바이더 */}
+      <span className="mx-[50px] mt-[20px] h-[1px] bg-default-neutral"></span>
+
+      {/* 입력 폼 */}
+      <section className="mx-[50px] my-[30px] flex flex-1 flex-row">
+        {/* 타이머 사진 */}
+        <span className="relative flex w-[250px] items-center justify-center">
+          {isNormalTimer ? (
+            <img
+              src={
+                stance === 'NEUTRAL'
+                  ? normalTimerNeutralImage
+                  : stance === 'PROS'
+                    ? normalTimerProsImage
+                    : normalTimerConsImage
+              }
+              alt="normal-timer"
+              className="absolute top-1/3 w-full -translate-y-1/2 object-contain"
+            />
+          ) : (
+            <img
+              src={timeBasedPreviewSrc}
+              alt={timeBasedPreviewAlt}
+              className="absolute top-1/2 w-full -translate-y-1/2 object-contain"
+            />
+          )}
+        </span>
+
+        {/* 여백 */}
+        <span className="w-[40px]"></span>
+
+        {/* 옵션 */}
+        <span className="flex w-full flex-1 flex-col space-y-[16px]">
+          {options.map((timerType, index) => {
+            switch (timerType) {
+              // 타이머 종류
+              case 'TIMER_TYPE':
+                return (
+                  <TimerCreationContentItem
+                    title="종류"
+                    key={`${timerType}-${index}`}
+                  >
+                    <span className="flex w-full flex-row space-x-[16px]">
+                      <LabeledRadioButton
+                        id="timer-type-normal"
+                        name="timer-type"
+                        value="NORMAL"
+                        label="일반 타이머"
+                        checked={isNormalTimer}
+                        onChange={handleTimerChange}
+                      />
+                      <LabeledRadioButton
+                        id="timer-type-time-based"
+                        name="timer-type"
+                        value="TIME_BASED"
+                        label="자유토론 타이머"
+                        checked={!isNormalTimer}
+                        onChange={handleTimerChange}
+                      />
+                    </span>
+                  </TimerCreationContentItem>
+                );
+
+              // 발언자
+              case 'SPEAKER':
+                return (
+                  <TimerCreationContentItem
+                    title="발언자"
+                    key={`${timerType}-${index}`}
+                  >
+                    <ClearableInput
+                      id="speaker"
+                      value={speaker}
+                      onChange={(e) => setSpeaker(e.target.value)}
+                      onClear={() => setSpeaker('')}
+                      placeholder="N번 토론자"
+                      disabled={
+                        stance === 'NEUTRAL' || currentSpeechType === 'TIMEOUT'
+                      }
+                    />
+                  </TimerCreationContentItem>
+                );
+
+              // 발언 시간 (일반 타이머)
+              case 'TIME_NORMAL':
+                return (
+                  <TimeInputGroup
+                    title={`발언 시간`}
+                    key={`${timerType}-${index}`}
+                    minutes={minutes}
+                    seconds={seconds}
+                    onMinutesChange={setMinutes}
+                    onSecondsChange={setSeconds}
                   />
-                  일반 타이머
-                </label>
-                <label className="flex cursor-pointer items-center gap-2">
-                  <input
-                    type="radio"
-                    name="boxType"
-                    value="TIME_BASED"
-                    checked={boxType === 'TIME_BASED'}
-                    onChange={(e) => {
-                      setBoxType(e.target.value as TimeBoxType);
-                      setSpeechType('');
-                    }}
+                );
+
+              // 1회당 발언 시간 (시간 총량제 타이머)
+              case 'TIME_PER_SPEAKING':
+                return (
+                  <TimeInputGroup
+                    title={`1회당\n발언 시간`}
+                    key={`${timerType}-${index}`}
+                    minutes={speakerMinutes}
+                    seconds={speakerSeconds}
+                    onMinutesChange={setSpeakerMinutes}
+                    onSecondsChange={setSpeakerSeconds}
                   />
-                  자유토론 타이머
-                </label>
-              </div>
-            </div>
-            {/** 발언유형 */}
-            <div className="flex items-center space-x-2">
-              <label
-                htmlFor="debate-type-select"
-                className="w-16 flex-shrink-0 font-semibold"
-              >
-                발언 유형
-              </label>
-
-              {isNormalTimer && (
-                <select
-                  id="speech-type-select"
-                  className="flex flex-grow rounded border p-1"
-                  value={
-                    predefinedSpeechOptions.includes(speechType)
-                      ? speechType
-                      : '직접 입력'
-                  }
-                  onChange={(e) => {
-                    const selectedValue = e.target.value;
-                    if (selectedValue === '작전 시간') {
-                      setStance('NEUTRAL');
-                    } else if (
-                      stance === 'NEUTRAL' &&
-                      selectedValue !== '작전 시간'
-                    ) {
-                      setStance('PROS');
-                    }
-                    if (selectedValue === '직접 입력') {
-                      setIsCustomSpeech(true);
-                      setSpeechType('');
-                    } else {
-                      setIsCustomSpeech(false);
-                      setSpeechType(selectedValue);
-                    }
-                  }}
-                >
-                  <option value="입론">입론</option>
-                  <option value="반론">반론</option>
-                  <option value="최종 발언">최종 발언</option>
-                  <option value="작전 시간">작전 시간</option>
-                  <option value="직접 입력">직접 입력</option>
-                </select>
-              )}
-              {isCustomSpeech && (
-                <input
-                  id="speech-type-input"
-                  type="text"
-                  className="flex w-full rounded border p-1"
-                  value={speechType}
-                  onChange={(e) => {
-                    setSpeechType(e.target.value);
-                  }}
-                  placeholder={isNormalTimer ? '예) 보충 질의' : '자유토론'}
-                />
-              )}
-            </div>
-            {/** 팀 */}
-            {isNormalTimer && (
-              <div className="flex items-center space-x-2">
-                <label
-                  htmlFor="stance-select"
-                  className="w-16 flex-shrink-0 font-semibold"
-                >
-                  팀
-                </label>
-                <select
-                  id="stance-select"
-                  className={`flex-1 rounded border p-1 ${
-                    speechType === '작전 시간'
-                      ? 'cursor-not-allowed bg-gray-100'
-                      : ''
-                  }`}
-                  value={stance}
-                  onChange={(e) => setStance(e.target.value as Stance)}
-                  disabled={speechType === '작전 시간'}
-                >
-                  <option value="PROS">{prosTeamName}</option>
-                  <option value="CONS">{consTeamName}</option>
-                  {(stance === 'NEUTRAL' || isCustomSpeech) && (
-                    <option value="NEUTRAL">공통</option>
-                  )}
-                </select>
-              </div>
-            )}
-            {/* 시간 */}
-            {isNormalTimer && (
-              <div className="flex w-full items-center space-x-2">
-                <label
-                  htmlFor="minutes-input"
-                  className="w-16 flex-shrink-0 font-semibold"
-                >
-                  시간
-                </label>
-                <div className="flex w-full min-w-1 flex-wrap space-x-2">
-                  <div className="flex min-w-10 flex-1 items-center">
-                    <input
-                      id="minutes-input"
-                      type="number"
-                      min={0}
-                      max={59}
-                      className="min-w-8 flex-grow rounded border p-1"
-                      value={minutes.toString()}
-                      onChange={(e) => setMinutes(validateTime(e.target.value))}
-                    />
-                    <span className="ml-1 flex-shrink-0">분</span>
-                  </div>
-                  <div className="flex min-w-10 flex-1 items-center">
-                    <input
-                      id="seconds-input"
-                      type="number"
-                      min={0}
-                      max={59}
-                      className="min-w-8 flex-grow rounded border p-1"
-                      value={seconds.toString()}
-                      onChange={(e) => setSeconds(validateTime(e.target.value))}
+                );
+
+              // 팀당 발언 시간 (시간 총량제 타이머)
+              case 'TIME_PER_TEAM':
+                return (
+                  <TimeInputGroup
+                    title={`팀당\n발언 시간`}
+                    key={`${timerType}-${index}`}
+                    minutes={teamMinutes}
+                    seconds={teamSeconds}
+                    onMinutesChange={setTeamMinutes}
+                    onSecondsChange={setTeamSeconds}
+                  />
+                );
+
+              // 발언 유형 (시간 총량제 타이머)
+              case 'SPEECH_TYPE_TIME_BASED':
+                return (
+                  <TimerCreationContentItem
+                    title="발언 유형"
+                    key={`${timerType}-${index}`}
+                  >
+                    <ClearableInput
+                      id="speech-type-time-based"
+                      value={speechTypeTextValue}
+                      onChange={(e) => setSpeechTypeTextValue(e.target.value)}
+                      onClear={() => setSpeechTypeTextValue('')}
+                      placeholder="주도권 토론 등"
                     />
-                    <span className="ml-1 flex-shrink-0">초</span>
-                  </div>
-                </div>
-              </div>
-            )}
-            {/** 팀당 총 발언시간 */}
-            {!isNormalTimer && (
-              <>
-                <div className="flex w-full items-center space-x-2">
-                  <label
-                    htmlFor="team-minutes-input"
-                    className="w-24 flex-shrink-0 font-semibold"
+                  </TimerCreationContentItem>
+                );
+
+              // 발언 유형 (일반 타이머)
+              case 'SPEECH_TYPE_NORMAL':
+                return (
+                  <TimerCreationContentItem
+                    title="발언 유형"
+                    key={`${timerType}-${index}`}
                   >
-                    팀당 <br />총 발언 시간
-                  </label>
-                  <div className="flex w-full min-w-1 flex-wrap space-x-2">
-                    <div className="flex min-w-10 flex-1 items-center">
-                      <input
-                        id="team-minutes-input"
-                        type="number"
-                        min={0}
-                        max={59}
-                        className="min-w-8 flex-grow rounded border p-1"
-                        value={teamMinutes.toString()}
-                        onChange={(e) =>
-                          setTeamMinutes(validateTime(e.target.value))
-                        }
+                    <span className="flex flex-row items-center space-x-[16px]">
+                      <DropdownMenu
+                        className={clsx({
+                          'w-full': currentSpeechType !== 'CUSTOM',
+                        })}
+                        options={speechTypeOptions}
+                        selectedValue={currentSpeechType}
+                        onSelect={handleSpeechTypeChange}
+                        placeholder="선택"
                       />
-                      <span className="ml-1 flex-shrink-0">분</span>
-                    </div>
-                    <div className="flex min-w-10 flex-1 items-center">
-                      <input
-                        id="team-seconds-input"
-                        type="number"
-                        min={0}
-                        max={59}
-                        className="min-w-8 flex-grow rounded border p-1"
-                        value={teamSeconds.toString()}
-                        onChange={(e) =>
-                          setTeamSeconds(validateTime(e.target.value))
-                        }
-                      />
-                      <span className="ml-1 flex-shrink-0">초</span>
-                    </div>
-                  </div>
-                </div>
-                {/** 1회당 발언시간 */}
-                <div className="flex w-full items-center space-x-2">
-                  <div className="w-24 flex-shrink-0">
-                    <LabeledCheckbox
-                      id="speaker-toggle"
-                      label={
-                        <span className="ml-1 font-semibold">
-                          1회당 <br /> 발언 시간
-                        </span>
-                      }
-                      checked={useSpeakerTime}
-                      onChange={() => setUseSpeakerTime((prev) => !prev)}
+
+                      {currentSpeechType === 'CUSTOM' && (
+                        <ClearableInput
+                          id="speech-type-normal"
+                          value={speechTypeTextValue}
+                          onChange={(e) =>
+                            setSpeechTypeTextValue(e.target.value)
+                          }
+                          onClear={() => setSpeechTypeTextValue('')}
+                          placeholder="입론, 반론, 작전 시간 등"
+                        />
+                      )}
+                    </span>
+                  </TimerCreationContentItem>
+                );
+
+              // 팀
+              case 'TEAM':
+                return (
+                  <TimerCreationContentItem
+                    title="팀"
+                    key={`${timerType}-${index}`}
+                  >
+                    <DropdownMenu
+                      className="w-full"
+                      options={stanceOptions}
+                      selectedValue={stance}
+                      onSelect={handleStanceChange}
+                      disabled={currentSpeechType === 'TIMEOUT'}
                     />
-                  </div>
+                  </TimerCreationContentItem>
+                );
+
+              case 'BELL':
+                return (
                   <div
-                    className={`flex w-full min-w-1 flex-wrap space-x-2 ${
-                      useSpeakerTime ? '' : 'text-gray-400'
-                    }`}
+                    className="flex w-full flex-col space-y-[8px]"
+                    key={`${timerType}-${index}`}
                   >
-                    <div className="flex min-w-10 flex-1 items-center">
-                      <input
-                        id="speaker-minutes-input"
-                        type="number"
-                        min={0}
-                        max={59}
-                        className="min-w-8 flex-grow rounded border p-1"
-                        value={speakerMinutes.toString()}
-                        onChange={(e) =>
-                          setSpeakerMinutes(validateTime(e.target.value))
-                        }
-                        disabled={!useSpeakerTime}
-                      />
-                      <span className="ml-1 flex-shrink-0">분</span>
-                    </div>
-                    <div className="flex min-w-10 flex-1 items-center">
-                      <input
-                        id="speaker-seconds-input"
-                        type="number"
-                        min={0}
-                        max={59}
-                        className="min-w-8 flex-grow rounded border p-1"
-                        value={speakerSeconds.toString()}
-                        onChange={(e) =>
-                          setSpeakerSeconds(validateTime(e.target.value))
+                    {/* 제목 및 종소리 횟수 배지 */}
+                    <div className="flex w-full flex-row justify-between">
+                      <div className="relative flex items-center space-x-[8px]">
+                        <p className="text-body w-[80px] font-medium">
+                          종소리 설정
+                        </p>
+
+                        <NotificationBadge
+                          count={bells.length}
+                          className="absolute -right-[16px] -top-[4px]"
+                        />
+                      </div>
+
+                      <button
+                        className="h-full"
+                        type="button"
+                        aria-label={
+                          isBellExpanded
+                            ? '종소리 설정 접기'
+                            : '종소리 설정 펼치기'
                         }
-                        disabled={!useSpeakerTime}
-                      />
-                      <span className="ml-1 flex-shrink-0">초</span>
+                        onClick={handleBellExpandButtonClick}
+                      >
+                        <DTExpand
+                          className={clsx(
+                            'h-full transform rounded-full p-[8px] text-default-black transition-all duration-300 ease-in-out hover:bg-default-disabled/hover',
+                            {
+                              'rotate-180': isBellExpanded,
+                              'rotate-0': !isBellExpanded,
+                            },
+                          )}
+                        />
+                      </button>
                     </div>
+
+                    {/* 종소리 설정 영역 */}
+                    {isBellExpanded && (
+                      <div className="flex w-full flex-col space-y-[8px] rounded-[12px] bg-default-dim2 p-[8px]">
+                        {/* 입력부 */}
+                        <span className="flex w-full flex-row items-center space-x-[4px]">
+                          {/* 벨 유형 */}
+                          <DropdownMenu
+                            options={bellOptions}
+                            selectedValue={bellInput.type}
+                            onSelect={(value: BellType) => {
+                              setBellInput((prev) => ({
+                                ...prev,
+                                type: value,
+                              }));
+                            }}
+                          />
+                          <span className="w-[8px]"></span>
+
+                          {/* 분, 초, 타종 횟수 */}
+                          <input
+                            type="text"
+                            inputMode="numeric"
+                            pattern="[0-9]*"
+                            className="w-[60px] rounded-[4px] border border-default-border p-[8px]"
+                            value={bellInput.min}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>,
+                            ) => {
+                              const safeValue = e.target.value.replace(
+                                /[^0-9]/g,
+                                '',
+                              );
+
+                              setBellInput((prev) => ({
+                                ...prev,
+                                min: getValidateTimeValue(safeValue),
+                              }));
+                            }}
+                            placeholder="분"
+                          />
+                          <span>분</span>
+
+                          <input
+                            type="text"
+                            inputMode="numeric"
+                            pattern="[0-9]*"
+                            className="w-[60px] rounded-[4px] border border-default-border p-[8px]"
+                            value={bellInput.sec}
+                            onChange={(
+                              e: React.ChangeEvent<HTMLInputElement>,
+                            ) => {
+                              const safeValue = e.target.value.replace(
+                                /[^0-9]/g,
+                                '',
+                              );
+
+                              setBellInput((prev) => ({
+                                ...prev,
+                                sec: getValidateTimeValue(safeValue),
+                              }));
+                            }}
+                            placeholder="초"
+                          />
+                          <span>초</span>
+                          <span className="w-[8px]"></span>
+
+                          <DTBell className="w-[24px]" />
+                          <p>x</p>
+                          <input
+                            type="text"
+                            inputMode="numeric"
+                            className="w-[60px] rounded-[4px] border border-default-border p-[8px]"
+                            value={bellInput.count}
+                            onChange={handleBellCountChange}
+                            placeholder="횟수"
+                          />
+                          <span className="w-[8px]"></span>
+
+                          <button
+                            type="button"
+                            className="flex size-[28px] items-center justify-center rounded-[8px] bg-brand p-[6px] text-default-white transition-colors duration-200 hover:bg-brand-hover"
+                            onClick={handleAddBell}
+                          >
+                            <DTAdd />
+                          </button>
+                        </span>
+
+                        {/* 벨 리스트 */}
+                        <span className="flex h-[100px] w-full flex-col items-center gap-2 overflow-y-auto">
+                          {bells.map((bell, idx) => (
+                            <span
+                              key={idx}
+                              className="relative flex w-full flex-row rounded-[4px] border border-default-border bg-[#FFF2D0] px-[12px] py-[4px]"
+                            >
+                              <div className="flex items-center gap-1">
+                                <p className="text-[14px]">
+                                  {BellTypeToString[bell.type]}
+                                </p>
+                                <p className="text-[14px]">
+                                  {bell.min}분 {bell.sec}초
+                                </p>
+
+                                <span className="w-[8px]"></span>
+                                <DTBell className="size-[14px]" />
+                                <span className="text-[14px]">
+                                  x {bell.count}
+                                </span>
+                              </div>
+
+                              <button
+                                className="absolute right-2 top-1/2 -translate-y-1/2 text-default-border"
+                                onClick={() => handleDeleteBell(idx)}
+                              >
+                                <DTClose className="size-[10px]" />
+                              </button>
+                            </span>
+                          ))}
+                        </span>
+                      </div>
+                    )}
                   </div>
-                </div>
-              </>
-            )}
+                );
+              default:
+                return null;
+            }
+          })}
+        </span>
+      </section>
 
-            {/** 발언자 */}
-            {isNormalTimer && (
-              <div className="flex min-w-0 items-center space-x-2">
-                <label
-                  htmlFor="speaker-number-input"
-                  className="w-16 flex-shrink-0 font-semibold"
-                >
-                  발언자
-                </label>
-                <input
-                  id="speaker-input"
-                  type="text"
-                  className={`flex flex-grow rounded border p-1 ${
-                    stance === 'NEUTRAL' ? 'cursor-not-allowed bg-gray-100' : ''
-                  }`}
-                  value={speaker}
-                  onChange={(e) => {
-                    if (stance === 'NEUTRAL') {
-                      setSpeaker('');
-                    } else {
-                      setSpeaker(e.target.value);
-                    }
-                  }}
-                  placeholder="1번"
-                  disabled={stance === 'NEUTRAL'}
-                />
-                <span className="whitespace-nowrap">토론자</span>
-              </div>
-            )}
-          </div>
-        </div>
-        <button
-          className="rounded-xl border-[1px] border-neutral-700 p-2 text-[18px] font-semibold hover:bg-brand-main"
-          onClick={handleSubmit}
-        >
-          설정 완료
-        </button>
-      </div>
+      {/* 제출 버튼 */}
+      <button className="button enabled brand" onClick={handleSubmit}>
+        설정 완료
+      </button>
     </div>
   );
 }
+
+function bellInputConfigToBellConfig(input: BellInputConfig): BellConfig {
+  let time = input.min * 60 + input.sec;
+  if (input.type === 'AFTER_END') time = -time;
+  return {
+    time,
+    count: input.count,
+    type: input.type,
+  };
+}
+
+function bellConfigToBellInputConfig(data: BellConfig): BellInputConfig {
+  const { type, time, count } = data;
+  const { minutes, seconds } = Formatting.formatSecondsToMinutes(time);
+  const converted = { type, min: minutes, sec: seconds, count };
+  return converted;
+}
diff --git a/src/page/TableComposition/components/TimerCreationContent/TimerCreationContentMenuItem.tsx b/src/page/TableComposition/components/TimerCreationContent/TimerCreationContentMenuItem.tsx
new file mode 100644
index 00000000..b935ba27
--- /dev/null
+++ b/src/page/TableComposition/components/TimerCreationContent/TimerCreationContentMenuItem.tsx
@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+import { PropsWithChildren } from 'react';
+
+interface TimerCreationContentItemProps extends PropsWithChildren {
+  title: string;
+  className?: string;
+}
+
+export default function TimerCreationContentItem({
+  title,
+  children,
+  className = '',
+}: TimerCreationContentItemProps) {
+  return (
+    <div
+      className={clsx(
+        'my-[4px] flex flex-row items-center space-x-[16px]',
+        className,
+      )}
+    >
+      <p className="text-body w-[80px] font-medium">{title}</p>
+      <span className="flex-1">{children}</span>
+    </div>
+  );
+}
diff --git a/src/page/TableComposition/hook/useTableFrom.tsx b/src/page/TableComposition/hook/useTableFrom.tsx
index 1bebeae5..a82bffd5 100644
--- a/src/page/TableComposition/hook/useTableFrom.tsx
+++ b/src/page/TableComposition/hook/useTableFrom.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useNavigate, useNavigationType } from 'react-router-dom';
-import { TableCompositionStep } from '../TableComposition';
+import { TableCompositionStep } from '../TableCompositionPage';
 import useBrowserStorage from '../../../hooks/useBrowserStorage';
 import { DebateInfo, DebateTableData, TimeBoxInfo } from '../../../type/type';
 import useAddDebateTable from '../../../hooks/mutations/useAddDebateTable';
@@ -24,8 +24,6 @@ const useTableFrom = (
           agenda: '',
           prosTeamName: '',
           consTeamName: '',
-          warningBell: true,
-          finishBell: true,
         },
         table: [],
       },
@@ -54,8 +52,6 @@ const useTableFrom = (
       const debateInfo: DebateInfo = {
         name: newInfo.name,
         agenda: newInfo.agenda,
-        warningBell: newInfo.warningBell,
-        finishBell: newInfo.finishBell,
         prosTeamName: newInfo.prosTeamName,
         consTeamName: newInfo.consTeamName,
       };
@@ -80,28 +76,31 @@ const useTableFrom = (
     });
   };
 
-  const { mutate: onAddTable } = useAddDebateTable((tableId) => {
-    removeValue();
-    navigate(`/overview/customize/${tableId}`);
-  });
-
-  const { mutate: onModifyTable } = usePutDebateTable((tableId) => {
-    removeValue();
-    if (isGuestFlow()) {
-      navigate(`/overview/customize/guest`);
-    } else {
+  const { mutate: onAddTable, isPending: isAddingTable } = useAddDebateTable(
+    (tableId) => {
+      removeValue();
       navigate(`/overview/customize/${tableId}`);
-    }
-  });
+    },
+  );
+
+  const { mutate: onModifyTable, isPending: isModifyingTable } =
+    usePutDebateTable((tableId) => {
+      removeValue();
+      if (isGuestFlow()) {
+        navigate(`/overview/customize/guest`);
+      } else {
+        navigate(`/overview/customize/${tableId}`);
+      }
+    });
 
-  const AddTable = () => {
+  const addTable = () => {
     onAddTable({
       info: formData.info,
       table: formData.table as TimeBoxInfo[],
     });
   };
 
-  const EditTable = (tableId: number) => {
+  const editTable = (tableId: number) => {
     onModifyTable({
       tableId,
       info: formData.info,
@@ -113,8 +112,10 @@ const useTableFrom = (
     formData,
     updateInfo,
     updateTable,
-    AddTable,
-    EditTable,
+    addTable,
+    editTable,
+    isAddingTable,
+    isModifyingTable,
   };
 };
 
diff --git a/src/page/TableListPage/TableListPage.test.tsx b/src/page/TableListPage/TableListPage.test.tsx
index ed806d62..5ec29b74 100644
--- a/src/page/TableListPage/TableListPage.test.tsx
+++ b/src/page/TableListPage/TableListPage.test.tsx
@@ -5,6 +5,7 @@ import { describe, expect } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import TableListPage from './TableListPage';
 import userEvent from '@testing-library/user-event';
+import { Suspense } from 'react';
 
 function TestWrapper({ children }: { children: React.ReactNode }) {
   const queryClient = new QueryClient();
@@ -21,7 +22,9 @@ describe('TableListPage', () => {
   const renderTableListPage = () => {
     return render(
       <TestWrapper>
-        <TableListPage />
+        <Suspense>
+          <TableListPage />
+        </Suspense>
       </TestWrapper>,
     );
   };
diff --git a/src/page/TableListPage/TableListPage.tsx b/src/page/TableListPage/TableListPage.tsx
index 15ba4e5e..6dc2bb18 100644
--- a/src/page/TableListPage/TableListPage.tsx
+++ b/src/page/TableListPage/TableListPage.tsx
@@ -1,27 +1,10 @@
-import { useNavigate } from 'react-router-dom';
-import { useDeleteDebateTable } from '../../hooks/mutations/useDeleteDebateTable';
-import { useGetDebateTableList } from '../../hooks/query/useGetDebateTableList';
 import DefaultLayout from '../../layout/defaultLayout/DefaultLayout';
-import { DebateTable } from '../../type/type';
-import Table from './components/Table';
 import HeaderTitle from '../../components/HeaderTitle/HeaderTitle';
+import { Suspense } from 'react';
+import LoadingIndicator from '../../components/LoadingIndicator/LoadingIndicator';
+import TableListPageContent from './components/TableListPageContent';
 
 export default function TableListPage() {
-  const { data } = useGetDebateTableList();
-  const { mutate: deleteCustomizeTable } = useDeleteDebateTable();
-  const navigate = useNavigate();
-  // TODO: have to delete the query param 'type'
-  const onEdit = (tableId: number) => {
-    navigate(`/composition?mode=edit&tableId=${tableId}&type=CUSTOMIZE`);
-  };
-  // TODO: have to delete the string 'customize' from the URL
-  const onClick = (tableId: number) => {
-    navigate(`/overview/customize/${tableId}`);
-  };
-  const onDelete = (tableId: number) => {
-    deleteCustomizeTable({ tableId });
-  };
-
   return (
     <DefaultLayout>
       <DefaultLayout.Header>
@@ -33,29 +16,9 @@ export default function TableListPage() {
       </DefaultLayout.Header>
 
       <DefaultLayout.ContentContainer>
-        <div className="flex max-w-[1140px] flex-wrap justify-start">
-          {/** Button that adds new table */}
-          <button
-            onClick={() => navigate(`/composition?mode=add`)}
-            className="m-5 h-[220px] w-[340px] rounded-[28px] bg-neutral-200 shadow-lg duration-200 hover:scale-105"
-          >
-            <h1 className="text-[100px] font-light text-neutral-500">+</h1>
-          </button>
-
-          {/** All tables */}
-          {data &&
-            data.tables.map((table: DebateTable, idx: number) => (
-              <Table
-                key={idx}
-                id={table.id}
-                name={table.name}
-                agenda={table.agenda}
-                onDelete={() => onDelete(table.id)}
-                onEdit={() => onEdit(table.id)}
-                onClick={() => onClick(table.id)}
-              />
-            ))}
-        </div>
+        <Suspense fallback={<LoadingIndicator />}>
+          <TableListPageContent />
+        </Suspense>
       </DefaultLayout.ContentContainer>
     </DefaultLayout>
   );
diff --git a/src/page/TableListPage/components/Table.tsx b/src/page/TableListPage/components/Table.tsx
index 4e400a7b..e50a858e 100644
--- a/src/page/TableListPage/components/Table.tsx
+++ b/src/page/TableListPage/components/Table.tsx
@@ -1,10 +1,13 @@
 import { useState } from 'react';
 import { DebateTable } from '../../../type/type';
-import { IoArrowForward, IoShareOutline } from 'react-icons/io5';
-import { RiDeleteBinFill, RiEditFill } from 'react-icons/ri';
+import { IoArrowForward } from 'react-icons/io5';
 import { useModal } from '../../../hooks/useModal';
 import DialogModal from '../../../components/DialogModal/DialogModal';
 import { useTableShare } from '../../../hooks/useTableShare';
+import SmallIconButtonContainer from '../../../components/SmallIconContainer/SmallIconContainer';
+import DTEdit from '../../../components/icons/Edit';
+import DTDelete from '../../../components/icons/Delete';
+import DTShare from '../../../components/icons/Share';
 
 interface TableProps extends DebateTable {
   onEdit: () => void;
@@ -25,16 +28,17 @@ export default function Table({
   const { openModal, closeModal, ModalWrapper } = useModal({
     isCloseButtonExist: false,
   });
-  const bgColor = isHovered ? 'bg-brand-sub1' : 'bg-brand-main';
-  const squareColor = isHovered ? 'bg-neutral-0' : 'bg-brand-sub1';
-  const textBodyColor = isHovered ? 'text-neutral-0' : 'text-neutral-600';
-  const textTitleColor = isHovered ? 'text-neutral-0' : 'text-neutral-1000';
+  const bgColor = isHovered ? 'bg-brand' : 'bg-brand/70';
   const psClass = isHovered ? 'ps-12' : 'ps-0';
 
   return (
     <>
       <button
-        className={`m-5 flex h-[220px] w-[340px] items-center overflow-hidden rounded-[28px] ${bgColor} shadow-lg transition-all duration-300 hover:scale-105`}
+        className={`
+          m-5 flex h-[220px] w-[340px] items-center overflow-hidden rounded-[28px] shadow-lg transition-all duration-300 hover:scale-105
+          ${bgColor}
+          ${isHovered ? 'px-4' : 'px-12'}
+        `}
         onClick={() => onClick()}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
@@ -42,11 +46,10 @@ export default function Table({
       >
         {/* Left component (fixed width, slides in) */}
         <div
-          className={`transform transition-all duration-300 ${
-            isHovered
-              ? 'w-28 translate-x-0 opacity-100'
-              : 'w-0 -translate-x-10 opacity-0'
-          } flex h-full flex-col items-center justify-between overflow-hidden pb-12 pe-4 ps-8 pt-4`}
+          className={`
+            flex h-full transform flex-col items-start justify-between overflow-hidden pb-12 pt-4 transition-all duration-300
+            ${isHovered ? 'w-[144px] translate-x-0 opacity-100' : 'w-0 -translate-x-10 opacity-0'}
+          `}
         >
           <div className="flex flex-row space-x-1">
             <button
@@ -54,52 +57,55 @@ export default function Table({
                 e.stopPropagation();
                 onEdit();
               }}
-              className="rounded-sm bg-neutral-0 p-[2px]"
               aria-label="수정하기"
             >
-              <RiEditFill className="text-neutral-900" />
+              <SmallIconButtonContainer className="size-[28px] p-[8px]">
+                <DTEdit className="h-full" />
+              </SmallIconButtonContainer>
             </button>
             <button
               onClick={(e: React.MouseEvent) => {
                 e.stopPropagation();
                 openModal();
               }}
-              className="rounded-sm bg-neutral-0 p-[2px]"
               aria-label="삭제하기"
             >
-              <RiDeleteBinFill className="text-neutral-900" />
+              <SmallIconButtonContainer className="size-[28px] p-[8px]">
+                <DTDelete className="h-full" />
+              </SmallIconButtonContainer>
             </button>
             <button
               onClick={(e: React.MouseEvent) => {
                 e.stopPropagation();
                 openShareModal();
               }}
-              className="rounded-sm bg-neutral-0 p-[2px]"
               aria-label="공유하기"
             >
-              <IoShareOutline className="text-neutral-900" />
+              <SmallIconButtonContainer className="size-[28px] p-[7px]">
+                <DTShare className="h-full" />
+              </SmallIconButtonContainer>
             </button>
           </div>
 
-          <div className="flex size-[40px] items-center justify-center rounded-full bg-neutral-1000">
-            <IoArrowForward className="size-[24px] text-neutral-0" />
+          <div className="flex size-[40px] items-center justify-center rounded-full bg-default-black">
+            <IoArrowForward className="size-[24px] text-default-white" />
           </div>
         </div>
 
         {/* Right component (fills remaining space) */}
         <div
-          className={`flex flex-grow flex-col items-start overflow-hidden ${psClass} w-full pe-8 duration-300`}
+          className={`flex flex-grow flex-col items-start overflow-hidden ${psClass} w-full duration-300`}
         >
           <p
-            className={`text-[28px] font-bold ${textTitleColor} w-full truncate text-start duration-300`}
+            className={`w-full truncate text-start text-[28px] font-semibold text-default-black duration-300`}
           >
             {name}
           </p>
           <div
-            className={`my-3 size-[10px] text-start duration-300 ${squareColor}`}
+            className={`my-3 size-[10px] bg-semantic-table text-start duration-300`}
           ></div>
           <p
-            className={`text-[16px] duration-300 ${textBodyColor} w-full truncate text-start`}
+            className={`w-full truncate text-start text-[16px] text-default-black2 duration-300`}
           >
             주제 | {agenda}
           </p>
diff --git a/src/page/TableListPage/components/TableListPageContent.tsx b/src/page/TableListPage/components/TableListPageContent.tsx
new file mode 100644
index 00000000..96a376a4
--- /dev/null
+++ b/src/page/TableListPage/components/TableListPageContent.tsx
@@ -0,0 +1,48 @@
+import { useNavigate } from 'react-router-dom';
+import { useDeleteDebateTable } from '../../../hooks/mutations/useDeleteDebateTable';
+import { useGetDebateTableList } from '../../../hooks/query/useGetDebateTableList';
+import { DebateTable } from '../../../type/type';
+import Table from './Table';
+
+export default function TableListPageContent() {
+  const { data } = useGetDebateTableList();
+  const { mutate: deleteCustomizeTable } = useDeleteDebateTable();
+  const navigate = useNavigate();
+  // TODO: have to delete the query param 'type'
+  const onEdit = (tableId: number) => {
+    navigate(`/composition?mode=edit&tableId=${tableId}&type=CUSTOMIZE`);
+  };
+  // TODO: have to delete the string 'customize' from the URL
+  const onClick = (tableId: number) => {
+    navigate(`/overview/customize/${tableId}`);
+  };
+  const onDelete = (tableId: number) => {
+    deleteCustomizeTable({ tableId });
+  };
+
+  return (
+    <div className="flex max-w-[1140px] flex-wrap justify-start">
+      {/** Button that adds new table */}
+      <button
+        onClick={() => navigate(`/composition?mode=add`)}
+        className="m-5 h-[220px] w-[340px] rounded-[28px] bg-neutral-200 shadow-lg duration-200 hover:scale-105"
+      >
+        <h1 className="text-[100px] font-light text-neutral-500">+</h1>
+      </button>
+
+      {/** All tables */}
+      {data &&
+        data.tables.map((table: DebateTable) => (
+          <Table
+            key={table.id}
+            id={table.id}
+            name={table.name}
+            agenda={table.agenda}
+            onDelete={() => onDelete(table.id)}
+            onEdit={() => onEdit(table.id)}
+            onClick={() => onClick(table.id)}
+          />
+        ))}
+    </div>
+  );
+}
diff --git a/src/page/TableOverviewPage/TableOverview.tsx b/src/page/TableOverviewPage/TableOverview.tsx
deleted file mode 100644
index e1d6b687..00000000
--- a/src/page/TableOverviewPage/TableOverview.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import DefaultLayout from '../../layout/defaultLayout/DefaultLayout';
-import PropsAndConsTitle from '../../components/ProsAndConsTitle/PropsAndConsTitle';
-import { useNavigate, useParams } from 'react-router-dom';
-import HeaderTableInfo from '../../components/HeaderTableInfo/HeaderTableInfo';
-import HeaderTitle from '../../components/HeaderTitle/HeaderTitle';
-import { RiEditFill, RiSpeakFill } from 'react-icons/ri';
-import usePatchDebateTable from '../../hooks/mutations/usePatchDebateTable';
-import { useGetDebateTableData } from '../../hooks/query/useGetDebateTableData';
-import DebatePanel from '../TableComposition/components/DebatePanel/DebatePanel';
-import { useTableShare } from '../../hooks/useTableShare';
-import { MdOutlineIosShare } from 'react-icons/md';
-import { StanceToString } from '../../type/type';
-import { isGuestFlow } from '../../util/sessionStorage';
-
-export default function TableOverview() {
-  const { id } = useParams();
-  const tableId = Number(id);
-  const navigate = useNavigate();
-
-  // Only uses hooks related with customize due to the removal of parliamentary
-  const { data } = useGetDebateTableData(tableId);
-  const onModifyCustomizeTableData = usePatchDebateTable((tableId) => {
-    navigate(`/table/customize/${tableId}`);
-  });
-
-  // Hook for sharing tables
-  const { openShareModal, TableShareModal } = useTableShare(tableId);
-
-  return (
-    <>
-      <DefaultLayout>
-        <DefaultLayout.Header>
-          <DefaultLayout.Header.Left>
-            <HeaderTableInfo name={data?.info.name} />
-          </DefaultLayout.Header.Left>
-          <DefaultLayout.Header.Center>
-            <HeaderTitle title={data?.info.agenda} />
-          </DefaultLayout.Header.Center>
-          <DefaultLayout.Header.Right />
-        </DefaultLayout.Header>
-
-        <DefaultLayout.ContentContainer>
-          <section className="mx-auto flex w-full max-w-4xl flex-col justify-center">
-            <PropsAndConsTitle
-              prosTeamName={
-                data !== undefined
-                  ? data.info.prosTeamName
-                  : StanceToString['PROS']
-              }
-              consTeamName={
-                data !== undefined
-                  ? data.info.consTeamName
-                  : StanceToString['CONS']
-              }
-            />
-
-            <div className="flex w-full flex-col gap-2">
-              {data?.table.map((info, index) => (
-                <DebatePanel
-                  key={index}
-                  info={info}
-                  prosTeamName={data.info.prosTeamName}
-                  consTeamName={data.info.consTeamName}
-                />
-              ))}
-            </div>
-          </section>
-        </DefaultLayout.ContentContainer>
-
-        <DefaultLayout.StickyFooterWrapper>
-          <div className="mx-auto mb-8 flex w-full max-w-4xl items-center justify-between gap-2">
-            <button
-              className="button enabled-hover-neutral h-16 w-full"
-              onClick={() => {
-                if (isGuestFlow()) {
-                  navigate(`/composition?mode=edit&type=CUSTOMIZE`);
-                } else {
-                  navigate(
-                    `/composition?mode=edit&tableId=${tableId}&type=CUSTOMIZE`,
-                  );
-                }
-              }}
-            >
-              <div className="flex items-center justify-center gap-2">
-                <RiEditFill />
-                수정하기
-              </div>
-            </button>
-            <div className="flex h-16 w-full space-x-2">
-              <button
-                className="button enabled flex-1"
-                onClick={() => {
-                  if (isGuestFlow()) {
-                    navigate('/table/customize/guest');
-                  } else {
-                    onModifyCustomizeTableData.mutate({ tableId });
-                  }
-                }}
-              >
-                <div className="flex items-center justify-center gap-2">
-                  <RiSpeakFill />
-                  토론하기
-                </div>
-              </button>
-
-              <button
-                className="button enabled-hover-neutral flex size-16 items-center justify-center"
-                onClick={() => {
-                  openShareModal();
-                }}
-              >
-                <MdOutlineIosShare className="m-4 size-full" />
-              </button>
-            </div>
-          </div>
-        </DefaultLayout.StickyFooterWrapper>
-      </DefaultLayout>
-
-      <TableShareModal />
-    </>
-  );
-}
diff --git a/src/page/TableOverviewPage/TableOverview.stories.tsx b/src/page/TableOverviewPage/TableOverviewPage.stories.tsx
similarity index 81%
rename from src/page/TableOverviewPage/TableOverview.stories.tsx
rename to src/page/TableOverviewPage/TableOverviewPage.stories.tsx
index e15172a2..3e5b252c 100644
--- a/src/page/TableOverviewPage/TableOverview.stories.tsx
+++ b/src/page/TableOverviewPage/TableOverviewPage.stories.tsx
@@ -1,20 +1,20 @@
 import { Meta, StoryObj } from '@storybook/react';
-import TableOverview from './TableOverview';
+import TableOverviewPage from './TableOverviewPage';
 import {
   // ParliamentaryTimeBoxInfo,
   TimeBoxInfo,
 } from '../../type/type';
 
 // 1) 메타 설정
-const meta: Meta<typeof TableOverview> = {
-  title: 'page/TableOverview',
-  component: TableOverview,
+const meta: Meta<typeof TableOverviewPage> = {
+  title: 'page/TableOverviewPage',
+  component: TableOverviewPage,
   tags: ['autodocs'],
 };
 
 export default meta;
 
-type Story = StoryObj<typeof TableOverview>;
+type Story = StoryObj<typeof TableOverviewPage>;
 
 // 2) 스토리 정의
 export const Default: Story = {
diff --git a/src/page/TableOverviewPage/TableOverviewPage.tsx b/src/page/TableOverviewPage/TableOverviewPage.tsx
new file mode 100644
index 00000000..577ed899
--- /dev/null
+++ b/src/page/TableOverviewPage/TableOverviewPage.tsx
@@ -0,0 +1,212 @@
+import DefaultLayout from '../../layout/defaultLayout/DefaultLayout';
+import PropsAndConsTitle from '../../components/ProsAndConsTitle/PropsAndConsTitle';
+import { useNavigate, useParams } from 'react-router-dom';
+import HeaderTableInfo from '../../components/HeaderTableInfo/HeaderTableInfo';
+import HeaderTitle from '../../components/HeaderTitle/HeaderTitle';
+import usePatchDebateTable from '../../hooks/mutations/usePatchDebateTable';
+import { useGetDebateTableData } from '../../hooks/query/useGetDebateTableData';
+import TimeBox from '../TableComposition/components/TimeBox/TimeBox';
+import { useTableShare } from '../../hooks/useTableShare';
+import { CoinState, StanceToString } from '../../type/type';
+import { isGuestFlow } from '../../util/sessionStorage';
+import DTShare from '../../components/icons/Share';
+import DTDebate from '../../components/icons/Debate';
+import DTEdit from '../../components/icons/Edit';
+import ErrorIndicator from '../../components/ErrorIndicator/ErrorIndicator';
+import LoadingIndicator from '../../components/LoadingIndicator/LoadingIndicator';
+import Coins from '../../assets/teamSelection/coins.png';
+import TeamSelectionModal from './components/TeamSelectionModal/TeamSelectionModal';
+import { useModal } from '../../hooks/useModal';
+import clsx from 'clsx';
+import { useState, useCallback } from 'react';
+
+export default function TableOverviewPage() {
+  const { id } = useParams();
+  const tableId = Number(id);
+  const navigate = useNavigate();
+  const { openModal, closeModal, ModalWrapper } = useModal();
+  const [modalCoinState, setModalCoinState] = useState<CoinState>('initial');
+
+  const handleOpenModal = () => {
+    setModalCoinState('initial');
+    openModal();
+  };
+
+  const handleCoinStateChange = useCallback((newState: CoinState) => {
+    setModalCoinState(newState);
+  }, []);
+
+  // Only uses hooks related with customize due to the removal of parliamentary
+  const {
+    data,
+    isLoading: isFetching,
+    isError: isFetchError,
+    refetch,
+    isRefetching,
+    isRefetchError,
+  } = useGetDebateTableData(tableId);
+  const onModifyCustomizeTableData = usePatchDebateTable((tableId) => {
+    navigate(`/table/customize/${tableId}`);
+  });
+
+  // Hook for sharing tables
+  const { openShareModal, TableShareModal } = useTableShare(tableId);
+  const isLoading = isFetching || isRefetching;
+  const isError = isFetchError || isRefetchError;
+
+  // 토론 시작하기 핸들러
+  const handleStartDebate = () => {
+    if (isGuestFlow()) {
+      navigate('/table/customize/guest');
+    } else {
+      onModifyCustomizeTableData.mutate({ tableId });
+    }
+  };
+
+  // 토론 수정하기 핸들러
+  const handleEdit = () => {
+    if (isGuestFlow()) {
+      navigate(`/composition?mode=edit&type=CUSTOMIZE`, {
+        state: { step: 'NameAndType' },
+      });
+    } else {
+      navigate(`/composition?mode=edit&tableId=${tableId}&type=CUSTOMIZE`, {
+        state: { step: 'NameAndType' },
+      });
+    }
+  };
+
+  if (isError) {
+    return (
+      <DefaultLayout>
+        <DefaultLayout.ContentContainer>
+          <ErrorIndicator onClickRetry={() => refetch()} />
+        </DefaultLayout.ContentContainer>
+      </DefaultLayout>
+    );
+  }
+
+  return (
+    <>
+      <DefaultLayout>
+        <DefaultLayout.Header>
+          <DefaultLayout.Header.Left>
+            {!isLoading && <HeaderTableInfo name={data?.info.name} />}
+          </DefaultLayout.Header.Left>
+          <DefaultLayout.Header.Center>
+            {!isLoading && <HeaderTitle title={data?.info.agenda} />}
+          </DefaultLayout.Header.Center>
+          <DefaultLayout.Header.Right />
+        </DefaultLayout.Header>
+
+        <DefaultLayout.ContentContainer>
+          {isLoading && <LoadingIndicator />}
+          {!isLoading && (
+            <section className="mx-auto flex w-full max-w-4xl flex-col justify-center">
+              <PropsAndConsTitle
+                prosTeamName={
+                  data !== undefined
+                    ? data.info.prosTeamName
+                    : StanceToString['PROS']
+                }
+                consTeamName={
+                  data !== undefined
+                    ? data.info.consTeamName
+                    : StanceToString['CONS']
+                }
+              />
+
+              <div className="flex w-full flex-col gap-2">
+                {data?.table.map((info, index) => (
+                  <TimeBox
+                    key={index}
+                    info={info}
+                    prosTeamName={data.info.prosTeamName}
+                    consTeamName={data.info.consTeamName}
+                  />
+                ))}
+              </div>
+            </section>
+          )}
+          {!isLoading && (
+            <button
+              onClick={handleOpenModal}
+              className="sm:right-3 sm:top-20 sm:w-24 2xl:w-40 fixed right-2 top-16 flex w-20 flex-col items-center md:right-4 md:top-24 md:w-28 lg:right-6 lg:top-28 lg:w-32 xl:right-8 xl:top-32 xl:w-36"
+            >
+              <img
+                src={Coins}
+                alt="팀 선정하기"
+                className="mb-2 h-auto w-full"
+              />
+              <div className="sm:px-3 sm:py-2 sm:text-sm w-full rounded-full border-[2px] border-default-disabled/hover bg-default-white px-2 py-1.5 text-xs font-semibold text-default-black transition-colors duration-200 hover:bg-default-disabled/hover md:px-4 md:py-2.5 md:text-base lg:px-5 lg:py-3 lg:text-lg xl:px-6">
+                팀 선정하기
+              </div>
+            </button>
+          )}
+        </DefaultLayout.ContentContainer>
+
+        <DefaultLayout.StickyFooterWrapper>
+          <div className="mx-auto mb-8 mt-2 flex w-full max-w-4xl items-center justify-between gap-2">
+            <button
+              className={clsx('flex aspect-square rounded-full p-[20px]', {
+                'button disabled': isLoading,
+                'button enabled neutral': !isLoading,
+              })}
+              disabled={isLoading}
+              onClick={() => {
+                openShareModal();
+              }}
+            >
+              <DTShare className="h-full" />
+            </button>
+            <button
+              className={clsx('flex aspect-square rounded-full p-[20px]', {
+                'button disabled': isLoading,
+                'button enabled neutral': !isLoading,
+              })}
+              disabled={isLoading}
+              onClick={() => {
+                if (isGuestFlow()) {
+                  navigate(`/composition?mode=edit&type=CUSTOMIZE`);
+                } else {
+                  navigate(
+                    `/composition?mode=edit&tableId=${tableId}&type=CUSTOMIZE`,
+                  );
+                }
+              }}
+            >
+              <DTEdit className="h-full" />
+            </button>
+            <div className="flex w-full space-x-2">
+              <button
+                className={clsx(
+                  'flex flex-1 flex-row gap-[12px] rounded-full p-[24px]',
+                  {
+                    'button disabled': isLoading,
+                    'button enabled brand': !isLoading,
+                  },
+                )}
+                disabled={isLoading}
+                onClick={handleStartDebate}
+              >
+                <DTDebate className="h-full" />
+                토론하기
+              </button>
+            </div>
+          </div>
+        </DefaultLayout.StickyFooterWrapper>
+      </DefaultLayout>
+
+      <TableShareModal />
+      <ModalWrapper closeButtonColor="text-neutral-1000">
+        <TeamSelectionModal
+          onClose={closeModal}
+          onStartDebate={handleStartDebate}
+          onEdit={handleEdit}
+          initialCoinState={modalCoinState}
+          onCoinStateChange={handleCoinStateChange}
+        />
+      </ModalWrapper>
+    </>
+  );
+}
diff --git a/src/page/TableOverviewPage/components/TeamSelectionModal/TeamSelectionModal.tsx b/src/page/TableOverviewPage/components/TeamSelectionModal/TeamSelectionModal.tsx
new file mode 100644
index 00000000..676f7315
--- /dev/null
+++ b/src/page/TableOverviewPage/components/TeamSelectionModal/TeamSelectionModal.tsx
@@ -0,0 +1,179 @@
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import Cointoss from '../../../../assets/teamSelection/cointoss.png';
+import CoinFront from '../../../../assets/teamSelection/coinfront.png';
+import CoinBack from '../../../../assets/teamSelection/coinback.png';
+import { CoinState } from '../../../../type/type';
+
+interface TeamSelectionModalProps {
+  onClose: () => void;
+  onStartDebate: () => void;
+  onEdit: () => void;
+  initialCoinState: CoinState;
+  onCoinStateChange: (state: CoinState) => void;
+}
+
+export default function TeamSelectionModal({
+  onClose,
+  onStartDebate,
+  onEdit,
+  initialCoinState,
+  onCoinStateChange,
+}: TeamSelectionModalProps) {
+  const [coinState, setCoinState] = useState<CoinState>(initialCoinState);
+  const hasResultSoundPlayedRef = useRef(false);
+
+  const updateCoinState = useCallback(
+    (newState: CoinState) => {
+      setCoinState(newState);
+      onCoinStateChange(newState);
+    },
+    [onCoinStateChange],
+  );
+
+  // 효과음 객체
+  const coinTossSound = useMemo(() => new Audio('/sounds/cointoss.mp3'), []);
+  const coinResultSound = useMemo(
+    () => new Audio('/sounds/cointoss-result.mp3'),
+    [],
+  );
+
+  // 동전 던지는 소리 및 결과 처리
+  useEffect(() => {
+    if (coinState === 'tossing') {
+      // 동전 던질 때 false로 초기화
+      hasResultSoundPlayedRef.current = false;
+
+      coinTossSound.currentTime = 0;
+      coinTossSound.play();
+
+      const timer = setTimeout(() => {
+        // 다음 화면 상태 전환 직전 사운드 명시적 정지
+        coinTossSound.pause();
+        coinTossSound.currentTime = 0;
+
+        // 결과 결정 및 상태 업데이트
+        const result = Math.random() < 0.5 ? 'front' : 'back';
+        updateCoinState(result);
+
+        // 결과 소리 바로 재생
+        setTimeout(() => {
+          if (!hasResultSoundPlayedRef.current) {
+            coinResultSound.currentTime = 0;
+            coinResultSound.play();
+            hasResultSoundPlayedRef.current = true;
+          }
+        }, 100); // 약간의 딜레이로 자연스럽게 연결
+      }, 2000);
+
+      return () => {
+        clearTimeout(timer);
+        coinTossSound.pause();
+        coinTossSound.currentTime = 0;
+      };
+    }
+  }, [coinState, coinTossSound, coinResultSound, updateCoinState]);
+
+  // 초기 상태에서 결과 상태로 직접 진입한 경우 (탭 전환 등)
+  useEffect(() => {
+    if (
+      (coinState === 'front' || coinState === 'back') &&
+      initialCoinState === coinState
+    ) {
+      // 초기값과 현재값이 같다면 이미 결과가 나온 상태이므로 소리 재생하지 않음
+      hasResultSoundPlayedRef.current = true;
+    }
+  }, [coinState, initialCoinState]);
+
+  const handleStart = () => {
+    onClose();
+    onStartDebate();
+  };
+
+  const handleEdit = () => {
+    onClose();
+    onEdit();
+  };
+
+  return (
+    <div
+      className="sm:h-[350px] sm:w-[350px] relative flex h-[280px] w-[280px] flex-col overflow-hidden md:h-[400px] md:w-[400px] lg:h-[452px] lg:w-[452px]"
+      style={{
+        background: 'linear-gradient(180deg, #D1E5E9 0%, #FFF5D0 100%)',
+      }}
+    >
+      <div className="flex flex-grow flex-col items-center justify-center">
+        {coinState === 'initial' && (
+          <div className="mt-7 flex flex-col items-center justify-center p-8 text-center">
+            <p className="sm:text-xl sm:leading-loose text-lg font-semibold leading-7 md:text-2xl md:leading-9 lg:text-3xl lg:leading-[45px] xl:text-[34px] xl:leading-[50px]">
+              팀별로 <br /> 동전의 앞 / 뒷면 중 <br /> 하나를 선택해 주세요.
+            </p>
+          </div>
+        )}
+
+        {coinState === 'tossing' && (
+          <>
+            <div className="sm:w-[185px] sm:h-[280px] flex h-[250px] w-[150px] flex-col items-center justify-center md:h-[320px] md:w-[210px] lg:h-[300px] lg:w-[240px]">
+              <div className="sm:h-36 sm:w-32 flex h-32 w-28 items-center justify-center md:h-40 md:w-36 lg:h-[240px] lg:w-[220px]">
+                <img
+                  src={Cointoss}
+                  alt="동전"
+                  className="h-full w-full object-contain"
+                />
+              </div>
+            </div>
+            <div className="flex h-20 w-full items-center justify-center px-6">
+              <span className="text-neutral-1000 sm:text-xl text-lg font-semibold md:text-2xl">
+                동전 던지는 중...
+              </span>
+            </div>
+          </>
+        )}
+
+        {(coinState === 'front' || coinState === 'back') && (
+          <div className="sm:w-[185px] sm:h-[280px] flex h-[250px] w-[150px] flex-col items-center justify-center md:h-[320px] md:w-[210px] lg:h-[300px] lg:w-[240px]">
+            <div className="flex flex-col items-center justify-center space-y-4">
+              <div className="sm:h-32 sm:w-32 flex h-28 w-28 items-center justify-center md:h-36 md:w-36 lg:h-[220px] lg:w-[220px]">
+                <img
+                  src={coinState === 'front' ? CoinFront : CoinBack}
+                  alt="동전"
+                  className="h-full w-full object-contain"
+                />
+              </div>
+              <div className="sm:px-3 sm:py-1 sm:text-lg rounded-full bg-black px-2 py-0.5 text-base font-semibold text-white md:px-4 md:py-1.5 md:text-xl lg:px-4 lg:py-1.5 lg:text-2xl xl:px-5 xl:py-2">
+                {coinState === 'front' ? '앞' : '뒤'}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 모달의 콘텐츠 영역과 분리하기 위해 별도 작성 */}
+      <div className="w-full">
+        {coinState === 'initial' && (
+          <button
+            className="sm:text-lg sm:py-4 w-full bg-brand py-3 text-[22px] font-semibold hover:bg-brand-hover md:py-5 md:text-xl lg:py-[21px] lg:text-[22px]"
+            onClick={() => updateCoinState('tossing')}
+          >
+            동전 던지기
+          </button>
+        )}
+        {(coinState === 'front' || coinState === 'back') && (
+          <div className="flex">
+            <button
+              className="sm:text-lg sm:py-4 w-full border-[2px] border-default-disabled/hover py-3 text-lg font-semibold hover:bg-default-disabled/hover md:py-5 md:text-xl lg:py-[21px] lg:text-[22px]"
+              onClick={handleEdit}
+            >
+              토론 정보 수정하기
+            </button>
+            <button
+              className="sm:text-lg sm:py-4 w-full bg-brand py-3 text-lg font-bold hover:bg-brand-hover md:py-5 md:text-xl lg:py-[21px] lg:text-[22px]"
+              onClick={handleStart}
+            >
+              토론 바로 시작하기
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/page/TimerPage/FeedbackTimerPage.tsx b/src/page/TimerPage/FeedbackTimerPage.tsx
new file mode 100644
index 00000000..9e986b7a
--- /dev/null
+++ b/src/page/TimerPage/FeedbackTimerPage.tsx
@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { useFeedbackTimer } from './hooks/useFeedbackTimer';
+import FeedbackTimer from './components/FeedbackTimer';
+import DefaultLayout from '../../layout/defaultLayout/DefaultLayout';
+import GoToHomeButton from '../../components/GoToHomeButton/GoToHomeButton';
+
+const INITIAL_TIME = 0;
+
+export default function FeedbackTimerPage() {
+  const feedbackTimerInstance = useFeedbackTimer();
+  const { setTimer, setDefaultTimer } = feedbackTimerInstance;
+
+  useEffect(() => {
+    // 페이지가 로드될 때 타이머의 초기 시간을 설정
+    setTimer(INITIAL_TIME);
+    setDefaultTimer(INITIAL_TIME);
+  }, [setTimer, setDefaultTimer]);
+
+  return (
+    <DefaultLayout>
+      <DefaultLayout.ContentContainer>
+        <div className="relative flex h-full w-full flex-col items-center justify-center space-y-[54px] pb-[66px] xl:space-y-[60px]">
+          <FeedbackTimer feedbackTimerInstance={feedbackTimerInstance} />
+          <GoToHomeButton />
+        </div>
+      </DefaultLayout.ContentContainer>
+    </DefaultLayout>
+  );
+}
diff --git a/src/page/TimerPage/TimerPage.tsx b/src/page/TimerPage/TimerPage.tsx
index 1ac7e786..7772fd6a 100644
--- a/src/page/TimerPage/TimerPage.tsx
+++ b/src/page/TimerPage/TimerPage.tsx
@@ -1,841 +1,123 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router-dom';
 import DefaultLayout from '../../layout/defaultLayout/DefaultLayout';
-import TimeBasedTimer from './components/TimeBasedTimer';
-import { useNavigate, useParams } from 'react-router-dom';
-import FirstUseToolTip from './components/FirstUseToolTip';
 import HeaderTableInfo from '../../components/HeaderTableInfo/HeaderTableInfo';
 import HeaderTitle from '../../components/HeaderTitle/HeaderTitle';
-import IconButton from '../../components/IconButton/IconButton';
-import { IoHelpCircle } from 'react-icons/io5';
-import { useCustomTimer } from './hooks/useCustomTimer';
-import { useGetDebateTableData } from '../../hooks/query/useGetDebateTableData';
-import { FaExchangeAlt } from 'react-icons/fa';
-import NormalTimer from './components/NormalTimer';
-import { useNormalTimer } from './hooks/useNormalTimer';
-import RoundControlButton from '../../components/RoundControlButton/RoundControlButton';
-import { useModal } from '../../hooks/useModal';
-import { isGuestFlow } from '../../util/sessionStorage';
-import { oAuthLogin } from '../../util/googleAuth';
-import DialogModal from '../../components/DialogModal/DialogModal';
-
-type TimerState = 'default' | 'warning' | 'danger' | 'expired';
-const bgColorMap: Record<TimerState, string> = {
-  default: '',
-  warning: 'bg-brand-main', // 30초 ~ 11초
-  danger: 'bg-brand-sub3', // 10초 이하
-  expired: 'bg-neutral-700', // 0초 이하
-};
+import { useTimerPageState } from './hooks/useTimerPageState';
+import { useTimerHotkey } from './hooks/useTimerHotkey';
+import RoundControlRow from './components/RoundControlRow';
+import TimerView from './components/TimerView';
+import { FirstUseToolTipModal } from './components/FirstUseToolTipModal';
+import { LoginAndStoreModal } from './components/LoginAndStoreModal';
+import { useTimerPageModal } from './hooks/useTimerPageModal';
+import { bgColorMap } from '../../type/type';
+import DTHelp from '../../components/icons/Help';
+import clsx from 'clsx';
+import ErrorIndicator from '../../components/ErrorIndicator/ErrorIndicator';
+import LoadingIndicator from '../../components/LoadingIndicator/LoadingIndicator';
 
 export default function TimerPage() {
-  // ########## DECLARATION AREA ##########
-  // Load sounds and prepare for bell-related constants
-  const warningBellRef = useRef<HTMLAudioElement>(null);
-  const finishBellRef = useRef<HTMLAudioElement>(null);
-  const [isWarningBellOn, setWarningBell] = useState(false);
-  const [isFinishBellOn, setFinishBell] = useState(false);
-
-  // Parse params
   const pathParams = useParams();
   const tableId = Number(pathParams.id);
-  const navigate = useNavigate();
-
-  // Get query
-  const { data } = useGetDebateTableData(tableId);
-
-  // Prepare for tooltip-related constants
-  const [isFirst, setIsFirst] = useState(false);
-  const IS_FIRST = 'isFirst';
-  const TRUE = 'true';
-  const FALSE = 'false';
-  const {
-    openModal: openUseTooltipModal,
-    closeModal: closeUseTooltipModal,
-    ModalWrapper: UseToolTipWrapper,
-  } = useModal({
-    onClose: () => {
-      setIsFirst(false);
-      localStorage.setItem(IS_FIRST, FALSE);
-    },
-    isCloseButtonExist: false,
-  });
   const {
-    openModal: openLoginAndStoreModal,
-    closeModal: closeLoginAndStoreModal,
-    ModalWrapper: LoginAndStoreModalWrapper,
-  } = useModal();
-
-  // Prepare for changing background
-  const [bg, setBg] = useState<TimerState>('default');
-
-  // Prepare for additional timer
-  const [isAdditionalTimerOn, setIsAdditionalTimerOn] = useState(false);
-  const [savedTimer, saveTimer] = useState(0);
-  const [isTimerChangeable, setIsTimerChangeable] = useState(true);
-
-  // Prepare for index-related constants
-  const [index, setIndex] = useState(0);
-
-  // Prepare for timer hook
-  const timer1 = useCustomTimer({});
-  const timer2 = useCustomTimer({});
-  const normalTimer = useNormalTimer();
-  const [prosConsSelected, setProsConsSelected] = useState<'pros' | 'cons'>(
-    'pros',
-  );
-
-  // 타이머의 이전상태를 저장(타종 31->30초인 상황에서만 타종하기위한 로직)
-  const prevTimer1Ref = useRef<{
-    speakingTimer: number | null;
-    totalTimer: number | null;
-  }>({
-    speakingTimer: null,
-    totalTimer: null,
-  });
-
-  const prevTimer2Ref = useRef<{
-    speakingTimer: number | null;
-    totalTimer: number | null;
-  }>({
-    speakingTimer: null,
-    totalTimer: null,
-  });
-
-  const prevNormalTimerRef = useRef<number | null>(null);
-
-  // 이전 또는 다음 차례로 이동하는 함수
-  const goToOtherItem = useCallback(
-    (isPrev: boolean) => {
-      if (isPrev) {
-        if (index > 0) {
-          setIndex((prev) => prev - 1);
-        }
-      } else {
-        if (data && index < data.table.length - 1) {
-          setIndex((prev) => prev + 1);
-        }
-      }
-    },
-    [index, data],
-  );
-
-  // 발언 진영(pros/cons) 전환 함수 (ENTER 버튼 등에서 사용)
-  const switchCamp = useCallback(() => {
-    if (prosConsSelected === 'pros') {
-      if (timer2.isDone) return;
-      if (timer1.isRunning) {
-        timer1.pauseTimer();
-        timer2.startTimer();
-        setProsConsSelected('cons');
-      } else {
-        timer1.pauseTimer();
-        setProsConsSelected('cons');
-      }
-    } else if (prosConsSelected === 'cons') {
-      if (timer1.isDone) return;
-      if (timer2.isRunning) {
-        if (timer1.isDone) return;
-        timer2.pauseTimer();
-        timer1.startTimer();
-        setProsConsSelected('pros');
-      } else {
-        timer2.pauseTimer();
-        setProsConsSelected('pros');
-      }
-    }
-  }, [prosConsSelected, timer1, timer2]);
-
-  // ########### useEffect AREA ###########
-  // 로컬스토리지에 저장된 "최초 사용 여부" 확인 → 툴팁 띄울지 결정
-  useEffect(() => {
-    const storedIsFirst = localStorage.getItem(IS_FIRST);
-
-    if (storedIsFirst === null) {
-      setIsFirst(true);
-    } else {
-      setIsFirst(storedIsFirst.trim() === TRUE ? true : false);
-    }
-
-    if (isFirst) {
-      openUseTooltipModal();
-    }
-  }, [isFirst, openUseTooltipModal]);
-
-  // 타이머 상태에 따라 배경색(bg) 상태 설정
-  useEffect(() => {
-    const getBgStatus = () => {
-      const boxType = data?.table[index].boxType;
-
-      const getTimerStatus = (
-        speakingTimer: number | null,
-        totalTimer: number | null,
-      ) => {
-        const activeTimer = speakingTimer !== null ? speakingTimer : totalTimer;
-        if (activeTimer !== null) {
-          if (activeTimer > 10 && activeTimer <= 30) return 'warning';
-          if (activeTimer >= 0 && activeTimer <= 10) return 'danger';
-        }
-        return 'default';
-      };
-
-      if (boxType === 'NORMAL') {
-        if (!normalTimer.isRunning) return 'default';
-
-        if (normalTimer.timer !== null) {
-          if (normalTimer.timer > 10 && normalTimer.timer <= 30)
-            return 'warning';
-          if (normalTimer.timer >= 0 && normalTimer.timer <= 10)
-            return 'danger';
-          if (normalTimer.timer < 0) return 'expired';
-          return 'default';
-        }
-      }
-
-      if (boxType === 'TIME_BASED') {
-        if (prosConsSelected === 'pros' && timer1.isRunning) {
-          return getTimerStatus(timer1.speakingTimer, timer1.totalTimer);
-        }
-        if (prosConsSelected === 'cons' && timer2.isRunning) {
-          return getTimerStatus(timer2.speakingTimer, timer2.totalTimer);
-        }
-      }
-
-      return 'default';
-    };
-
-    setBg(getBgStatus());
-  }, [
-    normalTimer.isRunning,
-    normalTimer.timer,
-    timer1.isRunning,
-    timer1.totalTimer,
-    timer1.speakingTimer,
-    timer2.isRunning,
-    timer2.totalTimer,
-    timer2.speakingTimer,
-    prosConsSelected,
-    index,
-    data,
-  ]);
-
-  // 벨 소리 재생
-  useEffect(() => {
-    const shouldPlayWarningBell = () => {
-      const isAnyTimerRunning =
-        timer1.isRunning || timer2.isRunning || normalTimer.isRunning;
-      if (!warningBellRef.current || !isAnyTimerRunning || !isWarningBellOn)
-        return false;
-      const waringTime = 30;
-      const timerJustReached = (
-        prevTime: number | null,
-        currentTime: number | null,
-        defaultTime: number | null,
-      ) => {
-        return (
-          prevTime !== null &&
-          prevTime > waringTime &&
-          currentTime === waringTime &&
-          defaultTime !== waringTime
-        );
-      };
-
-      const isTimer1WarningTime =
-        timer1.isRunning &&
-        (timerJustReached(
-          prevTimer1Ref.current.speakingTimer,
-          timer1.speakingTimer,
-          timer1.defaultTime.defaultSpeakingTimer,
-        ) ||
-          (timer1.speakingTimer === null &&
-            timerJustReached(
-              prevTimer1Ref.current.totalTimer,
-              timer1.totalTimer,
-              timer1.defaultTime.defaultTotalTimer,
-            )));
-
-      const isTimer2WarningTime =
-        timer2.isRunning &&
-        (timerJustReached(
-          prevTimer2Ref.current.speakingTimer,
-          timer2.speakingTimer,
-          timer2.defaultTime.defaultSpeakingTimer,
-        ) ||
-          (timer2.speakingTimer === null &&
-            timerJustReached(
-              prevTimer2Ref.current.totalTimer,
-              timer2.totalTimer,
-              timer2.defaultTime.defaultTotalTimer,
-            )));
-
-      const isNormalTimerWarningTime =
-        normalTimer.isRunning &&
-        prevNormalTimerRef.current !== null &&
-        prevNormalTimerRef.current > waringTime &&
-        normalTimer.timer === waringTime &&
-        normalTimer.defaultTimer !== waringTime;
-
-      return (
-        isTimer1WarningTime || isTimer2WarningTime || isNormalTimerWarningTime
-      );
-    };
-
-    // 사용
-    if (warningBellRef.current && shouldPlayWarningBell()) {
-      warningBellRef.current.play();
-    }
-
-    const shouldPlayFinishBell = () => {
-      const isTimer1Finished =
-        timer1.isRunning &&
-        (timer1.speakingTimer === 0 || timer1.totalTimer === 0);
-
-      const isTimer2Finished =
-        timer2.isRunning &&
-        (timer2.speakingTimer === 0 || timer2.totalTimer === 0);
-
-      const isNormalTimerFinished =
-        normalTimer.isRunning && normalTimer.timer === 0;
-
-      const isAnyTimerRunning =
-        timer1.isRunning || timer2.isRunning || normalTimer.isRunning;
-      return (
-        isAnyTimerRunning &&
-        isFinishBellOn &&
-        (isTimer1Finished || isTimer2Finished || isNormalTimerFinished)
-      );
-    };
-
-    // 사용
-    if (finishBellRef.current && shouldPlayFinishBell()) {
-      finishBellRef.current.play();
-    }
-
-    prevTimer1Ref.current = {
-      speakingTimer: timer1.speakingTimer,
-      totalTimer: timer1.totalTimer,
-    };
-    prevTimer2Ref.current = {
-      speakingTimer: timer2.speakingTimer,
-      totalTimer: timer2.totalTimer,
-    };
-    prevNormalTimerRef.current = normalTimer.timer;
-  }, [
-    isFinishBellOn,
-    isWarningBellOn,
-    timer1.isRunning,
-    timer2.isRunning,
-    normalTimer.isRunning,
-    timer1.speakingTimer,
-    timer1.totalTimer,
-    timer1.defaultTime.defaultTotalTimer,
-    timer1.defaultTime.defaultSpeakingTimer,
-    timer2.speakingTimer,
-    timer2.totalTimer,
-    timer2.defaultTime.defaultSpeakingTimer,
-    normalTimer.timer,
-    normalTimer.defaultTimer,
-    timer2.defaultTime.defaultTotalTimer,
-  ]);
-
-  // 새로운 index(차례)로 이동했을 때 → 타이머 초기화 및 세팅
-  useEffect(() => {
-    if (!data) return;
-
-    const currentBox = data.table[index];
-    const { warningBell, finishBell } = data.info;
-
-    setWarningBell(warningBell);
-    setFinishBell(finishBell);
-    timer1.clearTimer();
-    timer2.clearTimer();
-    normalTimer.clearTimer();
-
-    if (currentBox.boxType === 'NORMAL') {
-      const defaultTime = currentBox.time ?? 0;
-      normalTimer.setDefaultTimer(defaultTime);
-      normalTimer.setTimer(defaultTime);
-    } else if (currentBox.boxType === 'TIME_BASED') {
-      normalTimer.clearTimer();
-
-      const defaultTotalTimer = currentBox.timePerTeam;
-      const defaultSpeakingTimer = currentBox.timePerSpeaking;
-
-      [timer1, timer2].forEach((timer) => {
-        timer.setDefaultTime({ defaultTotalTimer, defaultSpeakingTimer });
-        timer.setTimers(defaultTotalTimer, defaultSpeakingTimer);
-        timer.setIsSpeakingTimer(true);
-        timer.setIsDone(false);
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    data,
-    index,
-    timer1.setDefaultTime,
-    timer1.setTimers,
-    timer2.setDefaultTime,
-    timer2.setTimers,
-    normalTimer.setDefaultTimer,
-    normalTimer.setTimer,
-  ]);
-
-  // 키보드 단축키 제어
-  useEffect(() => {
-    const boxType = data?.table[index].boxType;
-    const handleKeyDown = (event: KeyboardEvent) => {
-      const keysToDisable = [
-        'Space',
-        'ArrowLeft',
-        'ArrowRight',
-        'KeyR',
-        'KeyA',
-        'KeyL',
-        'Enter',
-      ];
-
-      if (keysToDisable.includes(event.key)) {
-        event.preventDefault();
-      }
-      if (event.target instanceof HTMLElement) {
-        event.target.blur();
-      }
-
-      const toggleTimer = (timer: typeof timer1 | typeof timer2) => {
-        if (timer.isRunning) {
-          timer.pauseTimer();
-        } else {
-          timer.startTimer();
-        }
-      };
-
-      switch (event.code) {
-        case 'Space':
-          if (boxType === 'NORMAL') {
-            if (normalTimer.isRunning) {
-              normalTimer.pauseTimer();
-            } else {
-              normalTimer.startTimer();
-            }
-          } else {
-            if (prosConsSelected === 'pros') {
-              toggleTimer(timer1);
-            } else if (prosConsSelected === 'cons') {
-              toggleTimer(timer2);
-            }
-          }
-          break;
-        case 'ArrowLeft':
-          goToOtherItem(true);
-          break;
-        case 'ArrowRight':
-          goToOtherItem(false);
-          break;
-        case 'KeyR':
-          if (boxType === 'NORMAL') {
-            normalTimer.resetTimer();
-          } else {
-            if (prosConsSelected === 'pros') {
-              timer1.resetCurrentTimer();
-            } else {
-              timer2.resetCurrentTimer();
-            }
-          }
-          break;
-        case 'KeyA':
-          if (!timer1.isDone) {
-            setProsConsSelected('pros');
-            if (timer2.isRunning) timer2.pauseTimer();
-          }
-          break;
-        case 'KeyL':
-          if (!timer2.isDone) {
-            setProsConsSelected('cons');
-            if (timer1.isRunning) timer1.pauseTimer();
-          }
-          break;
-        case 'Enter':
-          switchCamp();
-          break;
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    goToOtherItem,
-    prosConsSelected,
-    timer1,
-    timer2,
-    setProsConsSelected,
-    switchCamp,
-  ]);
-
-  // 테이블에 작전시간 발언이 있는 경우 작전시간 타이머 변경 비활성화
-  useEffect(() => {
-    if (data) {
-      data.table.forEach((value) => {
-        if (value.speechType === '작전 시간') {
-          setIsTimerChangeable(false);
-        }
-      });
-    }
-  });
-
-  // 작전시간 타이머가 켜져 있고, 시간이 0이 되었을 때 → 저장된 시간으로 되돌림
-  useEffect(() => {
-    if (
-      isAdditionalTimerOn &&
-      normalTimer.timer === 0 &&
-      normalTimer.isRunning
-    ) {
-      normalTimer.pauseTimer();
-      normalTimer.setTimer(savedTimer);
-      setIsAdditionalTimerOn(!isAdditionalTimerOn);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    isAdditionalTimerOn,
-    normalTimer.timer,
-    savedTimer,
-    normalTimer.pauseTimer,
-    setIsAdditionalTimerOn,
-    normalTimer.setTimer,
-    normalTimer.isRunning,
-  ]);
-
-  //진영(pros/cons)이 바뀌면 → 상대 타이머 초기화
-  useEffect(() => {
-    if (prosConsSelected === 'cons') {
-      if (timer1.speakingTimer === null) return;
-      timer1.resetTimerForNextPhase();
-    } else if (prosConsSelected === 'pros') {
-      if (timer2.speakingTimer === null) return;
-      timer2.resetTimerForNextPhase();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [prosConsSelected]);
-
-  //타이머가 0초가 되면 자동으로 일시정지
-  useEffect(() => {
-    if (timer1.speakingTimer === 0 || timer1.totalTimer === 0) {
-      timer1.pauseTimer();
-    } else if (timer2.speakingTimer === 0 || timer2.totalTimer === 0) {
-      timer2.pauseTimer();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    timer1.speakingTimer,
-    timer1.totalTimer,
-    timer2.speakingTimer,
-    timer2.totalTimer,
-  ]);
-
-  //speakingTimer or totalTimer가 0초면 → 타이머 종료 처리 (isDone = true)
-  useEffect(() => {
-    if (prosConsSelected === 'pros') {
-      if (timer1.speakingTimer === null) {
-        if (timer1.totalTimer === 0) {
-          timer1.setIsDone(true);
-        }
-      } else {
-        if (timer1.speakingTimer === 0) {
-          timer1.setIsDone(true);
-        }
-      }
-    } else if (prosConsSelected === 'cons') {
-      if (timer2.speakingTimer === null) {
-        if (timer2.totalTimer === 0) {
-          timer2.setIsDone(true);
-        }
-      } else {
-        if (timer2.speakingTimer === 0) {
-          timer2.setIsDone(true);
-        }
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    prosConsSelected,
-    timer1.totalTimer,
-    timer1.speakingTimer,
-    timer2.totalTimer,
-    timer2.speakingTimer,
-  ]);
-  // ########### COMPONENT AREA ###########
-  if (!data) {
-    return;
+    openUseTooltipModal,
+    UseToolTipWrapper,
+    closeUseTooltipModal,
+    LoginAndStoreModalWrapper,
+    closeLoginAndStoreModal,
+    openLoginAndStoreModalOrGoToDebateEndPage,
+  } = useTimerPageModal(tableId);
+
+  const state = useTimerPageState(tableId);
+
+  useTimerHotkey(state);
+  const { data, bg, index, goToOtherItem, isLoading, isError, refetch } = state;
+
+  // If error, print error message and let user be able to retry
+  if (isError) {
+    return (
+      <DefaultLayout>
+        <DefaultLayout.ContentContainer>
+          <ErrorIndicator onClickRetry={() => refetch()} />
+        </DefaultLayout.ContentContainer>
+      </DefaultLayout>
+    );
   }
+
+  // If no error or on loading, print contents
   return (
     <>
-      <audio ref={warningBellRef} src="/sounds/bell-warning.mp3" />
-      <audio ref={finishBellRef} src="/sounds/bell-finish.mp3" />
-
       <DefaultLayout>
-        {/* Headers */}
         <DefaultLayout.Header>
           <DefaultLayout.Header.Left>
-            <HeaderTableInfo
-              name={
-                data === undefined || data.info.name.trim() === ''
-                  ? '테이블 이름 없음'
-                  : data.info.name
-              }
-            />
+            {!isLoading && data && (
+              <HeaderTableInfo
+                name={
+                  data.info.name.trim() === ''
+                    ? '테이블 이름 없음'
+                    : data.info.name
+                }
+              />
+            )}
           </DefaultLayout.Header.Left>
           <DefaultLayout.Header.Center>
-            <HeaderTitle
-              title={
-                data === undefined || data.info.agenda.trim() === ''
-                  ? '주제 없음'
-                  : data.info.agenda
-              }
-            />
+            {!isLoading && data && (
+              <HeaderTitle
+                title={
+                  data.info.agenda.trim() === ''
+                    ? '주제 없음'
+                    : data.info.agenda
+                }
+              />
+            )}
           </DefaultLayout.Header.Center>
           <DefaultLayout.Header.Right>
-            <IconButton
-              icon={<IoHelpCircle size={24} />}
-              onClick={() => {
-                if (isFirst) {
-                  setIsFirst(false);
-                  localStorage.setItem(IS_FIRST, FALSE);
-                } else {
-                  setIsFirst(true);
-                  localStorage.setItem(IS_FIRST, TRUE);
-                }
-              }}
-            />
+            <button
+              className="flex h-full items-center justify-center"
+              onClick={openUseTooltipModal}
+            >
+              <DTHelp className="size-full" />
+            </button>
           </DefaultLayout.Header.Right>
         </DefaultLayout.Header>
 
         {/* Containers */}
         <DefaultLayout.ContentContainer noPadding={true}>
-          <div
-            className={`flex h-full w-full flex-col items-center justify-center space-y-[25px] xl:space-y-[40px] ${bgColorMap[bg]}`}
-          >
-            {/* 타이머 두 개 + ENTER 버튼 */}
-            {data.table[index].boxType === 'NORMAL' && (
-              <NormalTimer
-                isAdditionalTimerOn={isAdditionalTimerOn}
-                onStart={() => normalTimer.startTimer()}
-                onPause={() => normalTimer.pauseTimer()}
-                onReset={() => normalTimer.resetTimer()}
-                addOnTimer={(delta: number) =>
-                  normalTimer.setTimer((normalTimer.timer ?? 0) + delta)
-                }
-                isRunning={normalTimer.isRunning}
-                timer={normalTimer.timer ?? 0}
-                isLastItem={
-                  data !== undefined && index === data.table.length - 1
-                }
-                isFirstItem={index === 0}
-                goToOtherItem={(isPrev: boolean) => {
-                  goToOtherItem(isPrev);
-                  normalTimer.resetTimer();
-                }}
-                isTimerChangeable={isTimerChangeable}
-                onChangingTimer={() => {
-                  normalTimer.pauseTimer();
-
-                  if (!isAdditionalTimerOn) {
-                    saveTimer(normalTimer.timer ?? 0);
-                    normalTimer.setTimer(0);
-                  } else {
-                    normalTimer.setTimer(savedTimer);
-                  }
-
-                  setIsAdditionalTimerOn(!isAdditionalTimerOn);
-                }}
-                item={data.table[index]}
-                teamName={
-                  data.table[index].stance === 'NEUTRAL'
-                    ? null
-                    : data.table[index].stance === 'PROS'
-                      ? data.info.prosTeamName
-                      : data.info.consTeamName
-                }
-              />
-            )}
-            {data.table[index].boxType === 'TIME_BASED' && (
-              <div className="relative flex flex-row items-center justify-center space-x-[30px]">
-                {/* 왼쪽 타이머 */}
-                <TimeBasedTimer
-                  onStart={() => timer1.startTimer()}
-                  onPause={() => timer1.pauseTimer()}
-                  onReset={() => timer1.resetCurrentTimer()}
-                  addOnTimer={(delta: number) =>
-                    timer1.setTimers(timer1.totalTimer ?? 0 + delta)
-                  }
-                  isRunning={timer1.isRunning}
-                  timer={timer1.totalTimer ?? 0}
-                  isLastItem={
-                    data !== undefined && index === data.table.length - 1
-                  }
-                  isFirstItem={index === 0}
-                  goToOtherItem={(isPrev: boolean) => {
-                    goToOtherItem(isPrev);
-                    timer1.resetTimerForNextPhase();
-                  }}
-                  isTimerChangeable={isTimerChangeable}
-                  onChangingTimer={() => {
-                    timer1.pauseTimer();
-                    setIsAdditionalTimerOn(!isAdditionalTimerOn);
-                  }}
-                  item={data.table[index]}
-                  speakingTimer={timer1.speakingTimer}
-                  isSelected={prosConsSelected === 'pros'}
-                  onActivate={() => {
-                    if (timer1.isDone) return;
-                    if (prosConsSelected === 'cons') {
-                      if (timer2.isRunning) {
-                        timer2.pauseTimer();
-                        timer1.startTimer();
-                        setProsConsSelected('pros');
-                      } else {
-                        timer2.pauseTimer();
-                        setProsConsSelected('pros');
-                      }
-                    }
-                  }}
-                  prosCons="pros"
-                  teamName={data.info.prosTeamName}
-                />
-
-                {/* 오른쪽 타이머 */}
-                <TimeBasedTimer
-                  onStart={() => timer2.startTimer()}
-                  onPause={() => timer2.pauseTimer()}
-                  onReset={() => timer2.resetCurrentTimer()}
-                  addOnTimer={(delta: number) =>
-                    timer2.setTimers(timer2.totalTimer ?? 0 + delta)
-                  }
-                  isRunning={timer2.isRunning}
-                  timer={timer2.totalTimer ?? 0}
-                  isLastItem={
-                    data !== undefined && index === data.table.length - 1
-                  }
-                  isFirstItem={index === 0}
-                  goToOtherItem={(isPrev: boolean) => {
-                    goToOtherItem(isPrev);
-                    timer2.resetTimerForNextPhase();
-                  }}
-                  isTimerChangeable={isTimerChangeable}
-                  onChangingTimer={() => {
-                    timer2.pauseTimer();
-                    setIsAdditionalTimerOn(!isAdditionalTimerOn);
-                  }}
-                  item={data.table[index]}
-                  speakingTimer={timer2.speakingTimer}
-                  isSelected={prosConsSelected === 'cons'}
-                  onActivate={() => {
-                    if (timer2.isDone) return;
-                    if (prosConsSelected === 'pros') {
-                      if (timer1.isRunning) {
-                        timer1.pauseTimer();
-                        timer2.startTimer();
-                        setProsConsSelected('cons');
-                      } else {
-                        timer1.pauseTimer();
-                        setProsConsSelected('cons');
-                      }
-                    }
-                  }}
-                  prosCons="cons"
-                  teamName={data.info.consTeamName}
+          {isLoading && <LoadingIndicator />}
+          {!isLoading && (
+            <div
+              className={clsx(
+                'relative flex h-full w-full flex-col items-center justify-center space-y-[32px] pb-[66px] xl:space-y-[60px]',
+                bgColorMap[bg],
+              )}
+            >
+              {/* 타이머 두 개 + ENTER 버튼 */}
+              <TimerView state={state} />
+              {/* Round control buttons on the bottom side */}
+              {data && (
+                <RoundControlRow
+                  table={data.table}
+                  index={index}
+                  goToOtherItem={goToOtherItem}
+                  openDoneModal={openLoginAndStoreModalOrGoToDebateEndPage}
+                  className="absolute bottom-[66px] left-1/2 -translate-x-1/2"
                 />
-
-                {/* ENTER 버튼 */}
-                <button
-                  onClick={() => {
-                    switchCamp();
-                  }}
-                  className="absolute left-1/2 top-1/2 flex h-[78px] w-[78px] -translate-x-[70px] -translate-y-6 flex-col items-center justify-center rounded-full bg-neutral-600 text-white shadow-lg transition hover:bg-neutral-500 lg:h-[100px] lg:w-[100px] lg:-translate-x-20 lg:-translate-y-8"
-                >
-                  <FaExchangeAlt className="text-[28px] lg:text-[36px]" />
-                  <span className="text-[12px] font-semibold lg:text-[18px] lg:font-bold">
-                    ENTER
-                  </span>
-                </button>
-              </div>
-            )}
-            {/* Round control buttons on the bottom side */}
-            {data && (
-              <div className="flex flex-row space-x-1 xl:space-x-8">
-                <div className="flex h-[70px] w-[175px] items-center justify-center lg:w-[200px]">
-                  {index === 0 && <></>}
-                  {index !== 0 && (
-                    <RoundControlButton
-                      type="PREV"
-                      onClick={() => {
-                        setIsAdditionalTimerOn(false);
-                        goToOtherItem(true);
-                      }}
-                    />
-                  )}
-                </div>
-
-                <div className="flex h-[70px] w-[175px] items-center justify-center lg:w-[200px]">
-                  {index === data.table.length - 1 && (
-                    <RoundControlButton
-                      type="DONE"
-                      onClick={() => {
-                        if (isGuestFlow()) {
-                          openLoginAndStoreModal();
-                        } else {
-                          navigate(`/overview/customize/${tableId}`);
-                        }
-                      }}
-                    />
-                  )}
-                  {index !== data.table.length - 1 && (
-                    <RoundControlButton
-                      type="NEXT"
-                      onClick={() => {
-                        setIsAdditionalTimerOn(false);
-                        goToOtherItem(false);
-                      }}
-                    />
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
+              )}
+            </div>
+          )}
         </DefaultLayout.ContentContainer>
       </DefaultLayout>
 
-      {/** Tooltip */}
-      <UseToolTipWrapper>
-        <FirstUseToolTip
-          onClose={() => {
-            closeUseTooltipModal();
-            setIsFirst(false);
-            localStorage.setItem(IS_FIRST, FALSE);
-          }}
-        />
-      </UseToolTipWrapper>
-      {/** Login And DataStore*/}
-      <LoginAndStoreModalWrapper closeButtonColor="text-neutral-1000">
-        <DialogModal
-          left={{
-            text: '아니오',
-            onClick: () => {
-              closeLoginAndStoreModal();
-            },
-          }}
-          right={{
-            text: '네',
-            onClick: () => {
-              closeLoginAndStoreModal();
-              oAuthLogin();
-            },
-            isBold: true,
-          }}
-        >
-          <div className="break-keep px-20 py-10 text-center text-xl font-bold">
-            토론을 끝내셨군요! <br />
-            지금까지의 시간표를 로그인하고 저장할까요?
-          </div>
-        </DialogModal>
-      </LoginAndStoreModalWrapper>
+      {/* Modal for users who have not used this timer */}
+      <FirstUseToolTipModal
+        Wrapper={UseToolTipWrapper}
+        onClose={closeUseTooltipModal}
+      />
+
+      {/* Modal that asks users whether they want to store the timetable in their account */}
+      <LoginAndStoreModal
+        Wrapper={LoginAndStoreModalWrapper}
+        onClose={closeLoginAndStoreModal}
+      />
     </>
   );
 }
diff --git a/src/page/TimerPage/components/AdditionalTimerControlButton.tsx b/src/page/TimerPage/components/AdditionalTimerControlButton.tsx
deleted file mode 100644
index 98c39201..00000000
--- a/src/page/TimerPage/components/AdditionalTimerControlButton.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-interface AdditionalTimerControlButtonProps {
-  text: string;
-  addOnTimer: () => void;
-}
-
-export default function AdditionalTimerControlButton({
-  text,
-  addOnTimer,
-}: AdditionalTimerControlButtonProps) {
-  return (
-    <button
-      className="flex h-[40px] w-[65px] items-center justify-center rounded-[10px] bg-neutral-300 shadow-lg lg:h-[45px] lg:w-[80px] lg:rounded-[13px] xl:h-[50px] xl:w-[100px]"
-      onClick={() => addOnTimer()}
-    >
-      <p className="text-center text-[18px] font-semibold lg:text-[20px] xl:text-[25px]">
-        {text}
-      </p>
-    </button>
-  );
-}
diff --git a/src/page/TimerPage/components/AdditionalTimerController.tsx b/src/page/TimerPage/components/AdditionalTimerController.tsx
deleted file mode 100644
index 5d2d3e14..00000000
--- a/src/page/TimerPage/components/AdditionalTimerController.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { FaPlay, FaStop } from 'react-icons/fa';
-import AdditionalTimerControlButton from './AdditionalTimerControlButton';
-
-interface AdditionalTimerControllerProps {
-  onStart: () => void;
-  onPause: () => void;
-  addOnTimer: (delta: number) => void;
-  isRunning: boolean;
-}
-
-export default function AdditionalTimerController({
-  onStart,
-  onPause,
-  addOnTimer,
-  isRunning,
-}: AdditionalTimerControllerProps) {
-  return (
-    <div
-      data-testid="additional-timer-controller"
-      className="flex h-[120px] w-[400px] flex-row items-center justify-center lg:h-[140px] lg:w-[520px] xl:h-[180px] xl:w-[730px]"
-    >
-      {/* Buttons that subtracts times */}
-      <AdditionalTimerControlButton
-        text="-1분"
-        addOnTimer={() => addOnTimer(-60)}
-      />
-      <div className="w-[10px]" />
-      <AdditionalTimerControlButton
-        text="-30초"
-        addOnTimer={() => addOnTimer(-30)}
-      />
-
-      {/* Start and pause buttons */}
-      {isRunning && (
-        <button
-          className="mx-[18px] size-[100px] rounded-full bg-neutral-900 p-[30px] hover:bg-brand-main lg:mx-[25px] lg:size-[130px] lg:p-[40px] xl:size-[152px] xl:p-[45px]"
-          onClick={() => onPause()}
-        >
-          <FaStop className="size-full justify-center text-neutral-50" />
-        </button>
-      )}
-      {!isRunning && (
-        <button
-          className="mx-[18px] size-[100px] rounded-full bg-neutral-900 p-[30px] hover:bg-brand-main lg:mx-[25px] lg:size-[130px] lg:p-[40px] xl:size-[152px] xl:p-[45px]"
-          onClick={() => onStart()}
-        >
-          <FaPlay className="size-full justify-center text-neutral-50" />
-        </button>
-      )}
-
-      {/* Buttons that adds times */}
-      <AdditionalTimerControlButton
-        text="+30초"
-        addOnTimer={() => addOnTimer(30)}
-      />
-      <div className="w-[10px]" />
-      <AdditionalTimerControlButton
-        text="+1분"
-        addOnTimer={() => addOnTimer(60)}
-      />
-    </div>
-  );
-}
diff --git a/src/page/TimerPage/components/CircularTimer.tsx b/src/page/TimerPage/components/CircularTimer.tsx
new file mode 100644
index 00000000..4923888d
--- /dev/null
+++ b/src/page/TimerPage/components/CircularTimer.tsx
@@ -0,0 +1,65 @@
+import { type PropsWithChildren } from 'react';
+import { Stance, TimeBoxType } from '../../../type/type';
+import { MotionValue, useTransform, motion } from 'framer-motion';
+
+/**
+ * CircularTimer 컴포넌트의 Props 정의
+ * @property {number} progress - 타이머의 진행률 (0 ~ 100 사이의 값).
+ * @property {number} [strokeWidth=15] - 테두리의 두께 (px).
+ */
+interface CircularTimerProps {
+  progress: MotionValue<number>;
+  stance: Stance;
+  boxType?: TimeBoxType;
+  strokeWidth?: number;
+  className?: string;
+}
+
+export default function CircularTimer({
+  progress,
+  strokeWidth = 15,
+  stance,
+  boxType,
+  className = 'w-[480px] h-[480px]',
+  children,
+}: PropsWithChildren<CircularTimerProps>) {
+  const BASE_COLOR = '#D6D7D9'; // bg-default-disabled/hover
+  const PROGRESS_COLOR =
+    boxType === 'FEEDBACK'
+      ? '#FECD4C' // bg-brand
+      : stance === 'NEUTRAL'
+        ? '#A3A3A3' // bg-default-neutral
+        : stance === 'PROS'
+          ? '#1E91D6' // bg-camp-blue
+          : '#E14666'; // bg-camp-red
+  const angle = useTransform(progress, [0, 100], [0, 360]);
+  const backgroundImage = useTransform(angle, (currentAngle) => {
+    if (currentAngle >= 360) {
+      return `conic-gradient(${BASE_COLOR})`;
+    } else if (currentAngle <= 0) {
+      return `conic-gradient(${PROGRESS_COLOR})`;
+    } else {
+      return `conic-gradient(from 0deg, ${BASE_COLOR} ${currentAngle}deg, ${PROGRESS_COLOR} ${currentAngle}deg 360deg)`;
+    }
+  });
+  const strokeGap = `${strokeWidth * 2}px`;
+
+  return (
+    <motion.div
+      className={`relative grid place-items-center rounded-full transition-all duration-300 ease-in-out ${className}`}
+      style={{
+        backgroundImage,
+      }}
+    >
+      <div
+        className="absolute grid place-items-center rounded-full bg-default-white"
+        style={{
+          width: `calc(100% - ${strokeGap})`,
+          height: `calc(100% - ${strokeGap})`,
+        }}
+      >
+        {children}
+      </div>
+    </motion.div>
+  );
+}
diff --git a/src/page/TimerPage/components/CompactTimeoutTimer.tsx b/src/page/TimerPage/components/CompactTimeoutTimer.tsx
new file mode 100644
index 00000000..bd88c559
--- /dev/null
+++ b/src/page/TimerPage/components/CompactTimeoutTimer.tsx
@@ -0,0 +1,135 @@
+import clsx from 'clsx';
+import DTClose from '../../../components/icons/Close';
+import { useNormalTimer } from '../hooks/useNormalTimer';
+import { Formatting } from '../../../util/formatting';
+import { GiPauseButton } from 'react-icons/gi';
+import DTPlay from '../../../components/icons/Play';
+import { useEffect, useState } from 'react';
+
+function CompactTimeoutTimerButton({
+  children,
+  className,
+  ...rest
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      className={clsx(
+        'flex h-[40px] w-[72px] items-center justify-center rounded-[10px] bg-default-neutral text-[20px] font-semibold text-default-black',
+        className,
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+}
+
+interface CompactTimeoutTimerProps {
+  onClose: () => void;
+  className: string;
+}
+
+export default function CompactTimeoutTimer({
+  onClose,
+  className,
+}: CompactTimeoutTimerProps) {
+  const state = useNormalTimer();
+  const minute = Formatting.formatTwoDigits(
+    Math.floor(Math.abs(state.timer ?? 0) / 60),
+  );
+  const second = Formatting.formatTwoDigits(Math.abs((state.timer ?? 0) % 60));
+
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+
+    return () => {
+      setIsMounted(false);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (state.timer !== null && state.isRunning && state.timer <= 0) {
+      state.pauseTimer();
+      onClose();
+    }
+  }, [onClose, state]);
+
+  return (
+    <div
+      className={clsx(
+        'flex flex-col items-center justify-center rounded-[10px] bg-default-neutral/50 p-[20px]',
+        'transition-all duration-700 ease-out',
+        {
+          'opacity-0 translate-y-8': !isMounted, // 초기 상태: 숨겨지고 아래로 내려감 (32px)
+          'opacity-100 translate-y-0': isMounted, // 최종 상태: 나타나고 원래 위치로
+        },
+        className,
+      )}
+    >
+      <span className="relative flex w-full items-center justify-center">
+        <h1 className="text-[36px] font-bold">작전 시간</h1>
+        <button className="absolute end-[20px]" onClick={onClose}>
+          <DTClose className="size-[24px]" />
+        </button>
+      </span>
+
+      <span className="my-[8px] flex w-full items-center justify-center text-[70px] font-bold">
+        <p className="w-[120px] text-center">{minute}</p>
+        <p className="text-center">:</p>
+        <p className="w-[120px] text-center">{second}</p>
+      </span>
+
+      <span className="flex w-full flex-row items-center justify-center space-x-[10px]">
+        <CompactTimeoutTimerButton
+          onClick={() => {
+            if (state.timer !== null && state.timer >= 60) {
+              state.setTimer(state.timer - 60);
+            }
+          }}
+        >
+          -1분
+        </CompactTimeoutTimerButton>
+        <CompactTimeoutTimerButton
+          onClick={() => {
+            if (state.timer !== null && state.timer >= 30) {
+              state.setTimer(state.timer - 30);
+            }
+          }}
+        >
+          -30초
+        </CompactTimeoutTimerButton>
+
+        {/* 재생 및 일시정지 버튼 */}
+        <button
+          className="flex size-[72px] items-center justify-center rounded-full bg-default-black p-[20px]"
+          onClick={() => {
+            if (!state.isRunning && state.timer !== null && state.timer > 0) {
+              state.startTimer();
+            } else {
+              state.pauseTimer();
+            }
+          }}
+        >
+          {state.isRunning && (
+            <GiPauseButton className="size-full text-default-white" />
+          )}
+          {!state.isRunning && (
+            <DTPlay className="size-full translate-x-[4px] text-default-white" />
+          )}
+        </button>
+
+        <CompactTimeoutTimerButton
+          onClick={() => state.setTimer((state.timer ?? 0) + 30)}
+        >
+          +30초
+        </CompactTimeoutTimerButton>
+        <CompactTimeoutTimerButton
+          onClick={() => state.setTimer((state.timer ?? 0) + 60)}
+        >
+          +1분
+        </CompactTimeoutTimerButton>
+      </span>
+    </div>
+  );
+}
diff --git a/src/page/TimerPage/components/FeedbackTimer.tsx b/src/page/TimerPage/components/FeedbackTimer.tsx
new file mode 100644
index 00000000..f997cfa3
--- /dev/null
+++ b/src/page/TimerPage/components/FeedbackTimer.tsx
@@ -0,0 +1,112 @@
+import TimerController from './TimerController';
+import { Formatting } from '../../../util/formatting';
+import CircularTimer from './CircularTimer';
+import clsx from 'clsx';
+import useCircularTimerAnimation from '../hooks/useCircularTimerAnimation';
+import useBreakpoint from '../../../hooks/useBreakpoint';
+import { FeedbackTimerLogics } from '../hooks/useFeedbackTimer';
+
+interface FeedbackTimerProps {
+  feedbackTimerInstance: FeedbackTimerLogics;
+}
+
+const timeAdjustments = [
+  { label: '-5분', value: -300 },
+  { label: '-1분', value: -60 },
+  { label: '+1분', value: 60 },
+  { label: '+5분', value: 300 },
+];
+
+export default function FeedbackTimer({
+  feedbackTimerInstance,
+}: FeedbackTimerProps) {
+  const {
+    timer,
+    isRunning,
+    startTimer,
+    pauseTimer,
+    resetTimer,
+    adjustTime,
+    defaultTimer,
+  } = feedbackTimerInstance;
+
+  const totalTime = timer ?? 0;
+  const { minutes, seconds } = Formatting.formatSecondsToMinutes(totalTime);
+  const minute = Formatting.formatTwoDigits(minutes);
+  const second = Formatting.formatTwoDigits(seconds);
+  const rawProgress =
+    timer !== null && defaultTimer > 0
+      ? ((defaultTimer - timer) / defaultTimer) * 100
+      : 0;
+  const progressMotionValue = useCircularTimerAnimation(rawProgress);
+  const breakpoint = useBreakpoint();
+
+  const getStrokeWidth = () => {
+    switch (breakpoint) {
+      case 'xl':
+        return 20;
+      default:
+        return 12;
+    }
+  };
+
+  return (
+    <div className="flex flex-row items-center space-x-[80px]">
+      {/* 좌측 영역 */}
+      <div className="flex h-[186px] w-[466px] flex-shrink-0 flex-col items-center justify-center space-y-[20px] px-[45px] xl:space-y-[36px]">
+        {/* 제목 */}
+        <h1 className="text-[52px] font-bold xl:text-[68px]">피드백 타이머</h1>
+
+        {/* 시간 조절 버튼 */}
+        <div className="flex w-[466px] flex-row gap-[22px] pt-[24px]">
+          {timeAdjustments.map(({ label, value }) => (
+            <button
+              key={label}
+              type="button"
+              onClick={() => adjustTime(value)}
+              disabled={isRunning}
+              className={clsx(
+                'flex h-[52px] w-[100px] items-center justify-center rounded-[16px] text-[20px] font-semibold text-default-black transition-all duration-200 ease-in-out',
+                'bg-brand/80 hover:bg-brand-hover disabled:cursor-not-allowed disabled:bg-default-neutral/50',
+              )}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* 우측 영역 */}
+      <div className="flex w-[360px] flex-col space-y-[16px] xl:min-w-[480px]">
+        {/* 타이머 */}
+        <CircularTimer
+          progress={progressMotionValue}
+          stance={'NEUTRAL'}
+          boxType={'FEEDBACK'}
+          strokeWidth={getStrokeWidth()}
+          className="aspect-square w-full"
+        >
+          <span
+            className={clsx(
+              'flex w-full flex-row items-center justify-center space-x-[16px] p-[16px] text-[70px] font-bold tabular-nums text-default-black xl:text-[110px]',
+            )}
+          >
+            <p className="flex flex-1 items-center justify-center">{minute}</p>
+            <p className="flex items-center justify-center">:</p>
+            <p className="flex flex-1 items-center justify-center">{second}</p>
+          </span>
+        </CircularTimer>
+
+        {/* 조작부 */}
+        <TimerController
+          isRunning={isRunning}
+          onStart={startTimer}
+          onPause={pauseTimer}
+          onReset={resetTimer}
+          stance={'NEUTRAL'}
+          boxType={'FEEDBACK'}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/src/page/TimerPage/components/FirstUseToolTip.tsx b/src/page/TimerPage/components/FirstUseToolTip.tsx
index fafc77ac..ea3ded13 100644
--- a/src/page/TimerPage/components/FirstUseToolTip.tsx
+++ b/src/page/TimerPage/components/FirstUseToolTip.tsx
@@ -21,7 +21,7 @@ export default function FirstUseToolTip({ onClose }: FirstUseToolTipProps) {
           <h2 className="text-xl font-bold">자유토론 타이머 조작</h2>
         </div>
 
-        <div className="text-m md:text-lg flex flex-col space-y-1">
+        <div className="text-m flex flex-col space-y-1 md:text-lg">
           <ListItem>재생 버튼을 눌러 타이머를 시작</ListItem>
           <ListItem>
             타이머가 동작 중일 때, 일시정지 버튼을 눌러 타이머를 일시정지
@@ -41,7 +41,7 @@ export default function FirstUseToolTip({ onClose }: FirstUseToolTipProps) {
           <h2 className="text-xl font-bold">일반 토론 타이머 조작</h2>
         </div>
 
-        <div className="text-m md:text-lg flex flex-col space-y-1">
+        <div className="text-m flex flex-col space-y-1 md:text-lg">
           <ListItem>재생 버튼을 눌러 타이머를 시작</ListItem>
           <ListItem>
             타이머가 동작 중일 때, 일시정지 버튼을 눌러 타이머를 일시정지
@@ -59,7 +59,7 @@ export default function FirstUseToolTip({ onClose }: FirstUseToolTipProps) {
           <h1 className="text-xl font-bold">키보드 조작</h1>
         </div>
 
-        <div className="text-m md:text-lg flex flex-col space-y-1">
+        <div className="text-m flex flex-col space-y-1 md:text-lg">
           <ListItem>스페이스 바로 타이머를 시작 및 일시정지</ListItem>
           <ListItem>R 키로 타이머 초기화</ListItem>
           <ListItem>좌우 방향키로 이전/다음 차례로 이동</ListItem>
diff --git a/src/page/TimerPage/components/FirstUseToolTipModal.tsx b/src/page/TimerPage/components/FirstUseToolTipModal.tsx
new file mode 100644
index 00000000..d0b9c9ee
--- /dev/null
+++ b/src/page/TimerPage/components/FirstUseToolTipModal.tsx
@@ -0,0 +1,15 @@
+// components/FirstUseToolTipModal.tsx
+import { ComponentType, ReactNode } from 'react';
+import FirstUseToolTip from '../components/FirstUseToolTip';
+
+interface Props {
+  Wrapper: ComponentType<{ children: ReactNode }>;
+  onClose: () => void;
+}
+export function FirstUseToolTipModal({ Wrapper, onClose }: Props) {
+  return (
+    <Wrapper>
+      <FirstUseToolTip onClose={onClose} />
+    </Wrapper>
+  );
+}
diff --git a/src/page/TimerPage/components/LoginAndStoreModal.tsx b/src/page/TimerPage/components/LoginAndStoreModal.tsx
new file mode 100644
index 00000000..71316dde
--- /dev/null
+++ b/src/page/TimerPage/components/LoginAndStoreModal.tsx
@@ -0,0 +1,46 @@
+import { ComponentType, ReactNode } from 'react';
+import DialogModal from '../../../components/DialogModal/DialogModal';
+import { oAuthLogin } from '../../../util/googleAuth';
+import { useNavigate } from 'react-router-dom';
+
+interface LoginAndStoreModalProps {
+  Wrapper: ComponentType<{
+    children: ReactNode;
+    closeButtonColor?: string;
+  }>;
+  onClose: () => void;
+}
+
+export function LoginAndStoreModal({
+  Wrapper,
+  onClose,
+}: LoginAndStoreModalProps) {
+  const navigate = useNavigate();
+
+  return (
+    <Wrapper closeButtonColor="text-neutral-1000">
+      <DialogModal
+        left={{
+          text: '아니오',
+          onClick: () => {
+            onClose();
+            navigate('/overview/customize/guest');
+          },
+        }}
+        right={{
+          text: '네',
+          onClick: () => {
+            onClose();
+            oAuthLogin();
+          },
+          isBold: true,
+        }}
+      >
+        <div className="break-keep px-20 py-10 text-center text-xl font-bold">
+          토론을 끝내셨군요! <br />
+          지금까지의 시간표를 로그인하고 저장할까요?
+        </div>
+      </DialogModal>
+    </Wrapper>
+  );
+}
diff --git a/src/page/TimerPage/components/NormalTimer.tsx b/src/page/TimerPage/components/NormalTimer.tsx
index f5378c0c..8cb82690 100644
--- a/src/page/TimerPage/components/NormalTimer.tsx
+++ b/src/page/TimerPage/components/NormalTimer.tsx
@@ -1,134 +1,161 @@
 import { TimeBoxInfo } from '../../../type/type';
 import TimerController from './TimerController';
 import { Formatting } from '../../../util/formatting';
-import AdditionalTimerController from './AdditionalTimerController';
-import { IoCloseOutline } from 'react-icons/io5';
-import { MdRecordVoiceOver } from 'react-icons/md';
+import CircularTimer from './CircularTimer';
+import clsx from 'clsx';
+import DTDebate from '../../../components/icons/Debate';
+import CompactTimeoutTimer from './CompactTimeoutTimer';
+import useCircularTimerAnimation from '../hooks/useCircularTimerAnimation';
+import useBreakpoint from '../../../hooks/useBreakpoint';
 
-interface NormalTimerProps {
-  onStart: () => void;
-  onPause: () => void;
-  onReset: () => void;
-  addOnTimer: (delta: number) => void;
-  onChangingTimer: () => void;
-  goToOtherItem: (isPrev: boolean) => void;
-  timer: number;
+type NormalTimerInstance = {
+  timer: number | null;
   isAdditionalTimerOn: boolean;
-  isTimerChangeable: boolean;
   isRunning: boolean;
-  isLastItem: boolean;
-  isFirstItem: boolean;
+  handleChangeAdditionalTimer: () => void;
+  handleCloseAdditionalTimer: () => void;
+  startTimer: () => void;
+  pauseTimer: () => void;
+  resetTimer: () => void;
+  setTimer: (val: number) => void;
+};
+
+interface NormalTimerProps {
+  normalTimerInstance: NormalTimerInstance;
+  isAdditionalTimerAvailable: boolean;
   item: TimeBoxInfo;
   teamName: string | null;
 }
 
 export default function NormalTimer({
-  onStart,
-  onPause,
-  onReset,
-  addOnTimer,
-  onChangingTimer,
-  timer,
-  isAdditionalTimerOn,
-  isTimerChangeable,
-  isRunning,
+  normalTimerInstance,
+  isAdditionalTimerAvailable,
   item,
   teamName,
 }: NormalTimerProps) {
-  const minute = Formatting.formatTwoDigits(Math.floor(Math.abs(timer) / 60));
-  const second = Formatting.formatTwoDigits(Math.abs(timer % 60));
-  const bgColorClass =
-    item.stance === 'NEUTRAL' || isAdditionalTimerOn
-      ? 'bg-neutral-500'
-      : item.stance === 'PROS'
-        ? 'bg-camp-blue'
-        : 'bg-camp-red';
-  const titleText = isAdditionalTimerOn ? '작전 시간' : item.speechType;
-
-  const boxShadow = isRunning
-    ? item.stance === 'NEUTRAL'
-      ? 'shadow-camp-neutral'
-      : item.stance === 'PROS'
-        ? 'shadow-camp-blue'
-        : 'shadow-camp-red'
-    : '';
+  const {
+    timer,
+    isAdditionalTimerOn,
+    isRunning,
+    startTimer,
+    pauseTimer,
+    resetTimer,
+    handleChangeAdditionalTimer,
+    handleCloseAdditionalTimer,
+  } = normalTimerInstance;
+  const totalTime = timer ?? 0;
+  const minute = Formatting.formatTwoDigits(
+    Math.floor(Math.abs(totalTime) / 60),
+  );
+  const second = Formatting.formatTwoDigits(Math.abs(totalTime % 60));
+  const titleText = item.speechType;
+  const rawProgress =
+    timer !== null && item.time ? ((item.time - timer) / item.time) * 100 : 0;
+  const progressMotionValue = useCircularTimerAnimation(rawProgress);
+  const breakpoint = useBreakpoint();
+  const getStrokeWidth = () => {
+    switch (breakpoint) {
+      case 'xl':
+        return 20;
+      default:
+        return 12;
+    }
+  };
 
+  // px-[45px]
   return (
-    <div
-      data-testid="timer"
-      className={`flex min-h-[300px] w-[460px] flex-col items-center rounded-[45px] bg-neutral-200 duration-100 lg:w-[600px] ${boxShadow} xl:w-[720px]`}
-    >
-      {/* Title of timer */}
-      <div
-        className={`flex h-[80px] w-full items-center justify-center rounded-t-[45px] lg:h-[105px] xl:h-[139px] ${bgColorClass} relative font-bold text-neutral-50`}
-      >
-        {/* Title text  
-        <h1 className="absolute left-1/2 w-max -translate-x-1/2 transform">
-          {titleText}
-        </h1> */}
-        <p className="w-full items-center text-center text-[45px] font-semibold lg:text-[60px] lg:font-bold xl:text-[75px]">
-          {titleText}
-        </p>
+    <div className="flex flex-row space-x-[80px]">
+      {/* 좌측 영역 */}
+      <span className="flex min-w-[360px] flex-col items-center justify-center xl:min-w-[450px]">
+        <span className="flex w-full flex-col items-center justify-center space-y-[20px] px-[45px] xl:space-y-[36px]">
+          {/* 제목 */}
+          <h1 className="text-[52px] font-bold xl:text-[68px]">{titleText}</h1>
 
-        {/* */}
-        {/* Close button, if additional timer is enabled */}
-        {isAdditionalTimerOn && (
-          <button
-            className="absolute right-10 top-1/2 -translate-y-1/2"
-            onClick={() => onChangingTimer()}
-          >
-            <IoCloseOutline className="size-[30px] hover:text-neutral-300 lg:size-[35px] xl:size-[40px]" />
-          </button>
-        )}
-      </div>
-
-      {/* Speaker's number, if necessary */}
-      <div className="my-[12px] h-[25px] lg:my-[17px] lg:h-[30px] xl:my-[20px] xl:h-[40px]">
-        <div className="flex w-full flex-row items-center justify-center space-x-2 text-neutral-900">
-          {item.stance !== 'NEUTRAL' && !isAdditionalTimerOn && (
-            <>
-              <MdRecordVoiceOver className="size-[30px] lg:size-[35px] xl:size-[40px]" />
-              <h3 className="text-[18px] font-semibold lg:text-[24px] xl:text-[28px]">
-                {teamName && teamName + '  팀 '}
-                {item.speaker && '| ' + item.speaker + ' 토론자'}
-              </h3>
-            </>
+          {/* 발언자 및 팀 정보 */}
+          {(teamName || item.speaker) && (
+            <span className="flex max-w-[600px] flex-row items-center justify-center space-x-[16px]">
+              <DTDebate className="w-[20px] flex-shrink-0 xl:w-[28px]" />
+              <p className="truncate text-[20px] xl:text-[28px]">
+                {teamName && teamName + ' 팀'}
+                {teamName && item.speaker && ' | '}
+                {item.speaker && item.speaker + ' 토론자'}
+              </p>
+            </span>
           )}
-        </div>
-      </div>
 
-      {/* Timer display */}
-      <div
-        className={`flex h-[140px] w-[400px] flex-row items-center justify-center bg-slate-50 text-center text-[90px] font-bold text-neutral-900 lg:h-[190px] lg:w-[520px] lg:text-[120px] xl:h-[230px] xl:w-[600px] xl:space-x-5 xl:text-[150px]`}
-      >
-        {timer < 0 && <p className="w-[30px] lg:w-[70px]">-</p>}
-        <p className="w-[130px] lg:w-[200px]">{minute}</p>
-        <p className="w-[50px] -translate-y-[7px] lg:-translate-y-[10px]">:</p>
-        <p className="w-[130px] lg:w-[200px]">{second}</p>
-      </div>
+          {/* 작전 시간 타이머 버튼 */}
+          {isAdditionalTimerAvailable && !isAdditionalTimerOn && (
+            <button
+              type="button"
+              onClick={handleChangeAdditionalTimer}
+              className={clsx(
+                'flex h-[52px] w-[320px] items-center justify-center rounded-[20px] bg-default-white xl:h-[68px] xl:w-[360px]',
+              )}
+            >
+              <span
+                className={clsx(
+                  'flex h-[52px] w-full items-center justify-center rounded-[20px] text-[20px] font-semibold transition-all duration-200 ease-in-out xl:h-[68px] xl:text-[28px]',
+                  {
+                    'bg-camp-blue/50 hover:bg-camp-blue':
+                      item.stance === 'PROS',
+                  },
+                  {
+                    'bg-camp-red/50 hover:bg-camp-red': item.stance === 'CONS',
+                  },
+                  {
+                    'bg-default-neutral/50 hover:bg-default-neutral':
+                      item.stance === 'NEUTRAL',
+                  },
+                )}
+              >
+                작전 시간 사용
+              </span>
+            </button>
+          )}
+        </span>
 
-      {/* Timer controller and additional timer controller */}
-      <div className="my-[20px] flex w-full items-center justify-center lg:my-[25px] xl:my-[30px]">
-        {!isAdditionalTimerOn && (
-          <TimerController
-            isRunning={isRunning}
-            isTimerChangeable={isTimerChangeable}
-            onChangingTimer={() => onChangingTimer()}
-            onStart={() => onStart()}
-            onPause={() => onPause()}
-            onReset={() => onReset()}
+        {isAdditionalTimerAvailable && isAdditionalTimerOn && (
+          <CompactTimeoutTimer
+            onClose={handleCloseAdditionalTimer}
+            className="mt-[56px]"
           />
         )}
+      </span>
 
-        {isAdditionalTimerOn && (
-          <AdditionalTimerController
-            isRunning={isRunning}
-            onStart={() => onStart()}
-            onPause={() => onPause()}
-            addOnTimer={(delta: number) => addOnTimer(delta)}
-          />
-        )}
-      </div>
+      {/* 우측 영역 */}
+      <span className="flex w-[360px] flex-col space-y-[16px] xl:min-w-[480px]">
+        {/* 타이머 */}
+        <CircularTimer
+          progress={progressMotionValue}
+          stance={item.stance}
+          strokeWidth={getStrokeWidth()}
+          className="aspect-square w-full"
+        >
+          <span
+            className={clsx(
+              'flex w-full flex-row items-center justify-center p-[16px] text-[70px] font-bold tabular-nums text-default-black xl:text-[110px]',
+              { 'space-x-[8px]': totalTime < 0 },
+              { 'space-x-[16px]': totalTime >= 0 },
+            )}
+          >
+            {totalTime < 0 && (
+              <p className="flex items-center justify-center">-</p>
+            )}
+            <p className="flex flex-1 items-center justify-center">{minute}</p>
+            <p className="flex items-center justify-center">:</p>
+            <p className="flex flex-1 items-center justify-center">{second}</p>
+          </span>
+        </CircularTimer>
+
+        {/* 조작부 */}
+        <TimerController
+          isRunning={isRunning}
+          onStart={startTimer}
+          onPause={pauseTimer}
+          onReset={() => resetTimer()}
+          stance={item.stance}
+        />
+      </span>
     </div>
   );
 }
diff --git a/src/page/TimerPage/components/NormalTimerTestPage.tsx b/src/page/TimerPage/components/NormalTimerTestPage.tsx
deleted file mode 100644
index b5c4382f..00000000
--- a/src/page/TimerPage/components/NormalTimerTestPage.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import DefaultLayout from '../../../layout/defaultLayout/DefaultLayout';
-import NormalTimer from './NormalTimer';
-import { TimeBoxInfo } from '../../../type/type';
-import HeaderTableInfo from '../../../components/HeaderTableInfo/HeaderTableInfo';
-import HeaderTitle from '../../../components/HeaderTitle/HeaderTitle';
-import RoundControlButton from '../../../components/RoundControlButton/RoundControlButton';
-
-export default function NormalTimerTestPage() {
-  const item: TimeBoxInfo = {
-    boxType: 'NORMAL',
-    speechType: '입론',
-    stance: 'PROS',
-    speaker: '케이티',
-    time: 120,
-    timePerTeam: null,
-    timePerSpeaking: null,
-  };
-
-  return (
-    <DefaultLayout>
-      {/* Header */}
-      <DefaultLayout.Header>
-        <DefaultLayout.Header.Left>
-          <HeaderTableInfo name="테스트 시간표" />
-        </DefaultLayout.Header.Left>
-        <DefaultLayout.Header.Center>
-          <HeaderTitle title="일반타이머 테스트입니다" />
-        </DefaultLayout.Header.Center>
-        <DefaultLayout.Header.Right />
-      </DefaultLayout.Header>
-
-      {/* Content */}
-      <DefaultLayout.ContentContainer noPadding>
-        <div className="flex flex-1 flex-col items-center justify-center space-y-[25px] bg-neutral-100 xl:space-y-[40px]">
-          <NormalTimer
-            timer={item.time ?? 0}
-            isRunning={false}
-            isAdditionalTimerOn={false}
-            isTimerChangeable={true}
-            onChangingTimer={() => {}}
-            onStart={() => {}}
-            onPause={() => {}}
-            onReset={() => {}}
-            goToOtherItem={() => {}}
-            addOnTimer={() => {}}
-            isFirstItem={true}
-            isLastItem={false}
-            item={item}
-            teamName="찬성"
-          />
-
-          {/* NEXT 버튼만 하단에 표시 */}
-          <div className="flex flex-row space-x-1 xl:space-x-8">
-            <div className="flex h-[70px] w-[175px] items-center justify-center lg:w-[200px]">
-              <RoundControlButton type="PREV" onClick={() => alert('이전')} />
-            </div>
-            <div className="flex h-[70px] w-[175px] items-center justify-center lg:w-[200px]">
-              <RoundControlButton type="NEXT" onClick={() => alert('다음')} />
-            </div>
-          </div>
-        </div>
-      </DefaultLayout.ContentContainer>
-    </DefaultLayout>
-  );
-}
diff --git a/src/page/TimerPage/components/RoundControlRow.tsx b/src/page/TimerPage/components/RoundControlRow.tsx
new file mode 100644
index 00000000..73438679
--- /dev/null
+++ b/src/page/TimerPage/components/RoundControlRow.tsx
@@ -0,0 +1,34 @@
+import clsx from 'clsx';
+import RoundControlButton from '../../../components/RoundControlButton/RoundControlButton';
+import { TimeBoxInfo } from '../../../type/type';
+
+interface RoundControlRowProps {
+  table: TimeBoxInfo[];
+  index: number;
+  goToOtherItem: (isPrev: boolean) => void;
+  openDoneModal: () => void;
+  className?: string;
+}
+
+export default function RoundControlRow(props: RoundControlRowProps) {
+  const { table, index, goToOtherItem, openDoneModal, className = '' } = props;
+  return (
+    <div className={clsx('flex flex-row space-x-1 xl:space-x-8', className)}>
+      <div className="flex w-[175px] items-center justify-center xl:w-[200px]">
+        {index !== 0 && (
+          <RoundControlButton type="PREV" onClick={() => goToOtherItem(true)} />
+        )}
+      </div>
+      <div className="flex w-[175px] items-center justify-center xl:w-[200px]">
+        {index === table.length - 1 ? (
+          <RoundControlButton type="DONE" onClick={openDoneModal} />
+        ) : (
+          <RoundControlButton
+            type="NEXT"
+            onClick={() => goToOtherItem(false)}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/page/TimerPage/components/TimeBasedTimer.tsx b/src/page/TimerPage/components/TimeBasedTimer.tsx
index 2ee5810c..c5e79b9c 100644
--- a/src/page/TimerPage/components/TimeBasedTimer.tsx
+++ b/src/page/TimerPage/components/TimeBasedTimer.tsx
@@ -1,50 +1,52 @@
-import { TimeBoxInfo } from '../../../type/type';
 import TimerController from './TimerController';
 import { Formatting } from '../../../util/formatting';
 import KeyboardKeyA from '../../../assets/keyboard/keyboard_key_A.png';
 import KeyboardKeyL from '../../../assets/keyboard/keyboard_key_l.png';
+import { TimeBasedStance, TimeBoxInfo } from '../../../type/type';
+import CircularTimer from './CircularTimer';
+import clsx from 'clsx';
+import useCircularTimerAnimation from '../hooks/useCircularTimerAnimation';
+import useBreakpoint from '../../../hooks/useBreakpoint';
 
-interface TimeBasedTimerProps {
-  onStart: () => void;
-  onPause: () => void;
-  onReset: () => void;
-  addOnTimer: (delta: number) => void;
-  onChangingTimer: () => void;
-  goToOtherItem: (isPrev: boolean) => void;
-  timer: number;
-  isTimerChangeable: boolean;
+type TimeBasedTimerInstance = {
+  totalTimer: number | null;
+  speakingTimer: number | null;
   isRunning: boolean;
-  isLastItem: boolean;
-  isFirstItem: boolean;
-  item: TimeBoxInfo;
+  startTimer: () => void;
+  pauseTimer: () => void;
+  resetCurrentTimer: () => void;
+};
 
-  /** 🚩 추가된 Props */
-  speakingTimer: number | null; // 발언시간용 타이머 추가
+interface TimeBasedTimerProps {
+  timeBasedTimerInstance: TimeBasedTimerInstance;
   isSelected: boolean;
   onActivate?: () => void;
-  prosCons: 'pros' | 'cons';
+  prosCons: TimeBasedStance;
   teamName: string;
+  item: TimeBoxInfo;
 }
 
 export default function TimeBasedTimer({
-  onStart,
-  onPause,
-  onReset,
-  onChangingTimer,
-  timer,
-  speakingTimer,
-  isRunning,
+  timeBasedTimerInstance,
   isSelected,
-  onActivate,
   prosCons,
   teamName,
+  item,
 }: TimeBasedTimerProps) {
+  const {
+    totalTimer,
+    speakingTimer,
+    isRunning,
+    startTimer,
+    pauseTimer,
+    resetCurrentTimer,
+  } = timeBasedTimerInstance;
+
   const minute = Formatting.formatTwoDigits(
-    Math.floor(Math.abs(timer ?? 0) / 60),
+    Math.floor(Math.abs(totalTimer ?? 0) / 60),
   );
-  const second = Formatting.formatTwoDigits(Math.abs((timer ?? 0) % 60));
+  const second = Formatting.formatTwoDigits(Math.abs((totalTimer ?? 0) % 60));
 
-  /** 🚩 추가된 코드: 발언시간 표시 처리 */
   const speakingMinute = Formatting.formatTwoDigits(
     Math.floor(Math.abs((speakingTimer ?? 0) / 60)),
   );
@@ -52,105 +54,134 @@ export default function TimeBasedTimer({
     Math.abs((speakingTimer ?? 0) % 60),
   );
 
-  const boxShadow = isRunning
-    ? prosCons === 'pros'
-      ? 'shadow-camp-blue'
-      : 'shadow-camp-red'
-    : '';
+  const initRawProgress = (): number => {
+    if (speakingTimer === null) {
+      // 1회당 발언 시간 X일 때...
+      if (item.timePerTeam && totalTimer && item.timePerTeam > 0) {
+        // 팀당 발언 시간 타이머가 정상 동작 중이고 남은 시간이 있을 경우, 진행도를 계산
+        if (totalTimer <= 0) {
+          return 100;
+        }
+        return ((item.timePerTeam - totalTimer) / item.timePerTeam) * 100;
+      } else {
+        // 팀당 발언 시간 타이머가 멈추거나 완료된 경우,
+        // 완료(100%)에 해당하는 진행도를 반환
+        return 100;
+      }
+    } else {
+      // 1회당 발언 시간 O일 때...
+      if (item.timePerSpeaking && speakingTimer && item.timePerSpeaking > 0) {
+        // 1회당 발언 시간 타이머가 정상 동작 중이고 남은 시간이 있을 경우, 진행도를 계산
+        return (
+          ((item.timePerSpeaking - speakingTimer) / item.timePerSpeaking) * 100
+        );
+      } else {
+        // 1회당 발언 시간 타이머가 멈추거나 완료된 경우,
+        // 완료(100%)에 해당하는 진행도를 반환
+        return 100;
+      }
+    }
+  };
 
-  const bgColorClass = prosCons === 'pros' ? 'bg-camp-blue' : 'bg-camp-red';
+  const rawProgress = initRawProgress();
+  const progressMotionValue = useCircularTimerAnimation(rawProgress);
+
+  const breakpoint = useBreakpoint();
+  const getStrokeWidth = () => {
+    switch (breakpoint) {
+      case 'xl':
+        return 20;
+      default:
+        return 12;
+    }
+  };
 
   return (
     <div
-      onClick={onActivate}
-      className={`rounded-[45px] duration-100 ${boxShadow}`}
+      data-testid="timer"
+      className={clsx(
+        'flex w-[400px] flex-col items-center justify-center space-y-[12px] xl:min-w-[560px] xl:space-y-[20px]',
+        {
+          'pointer-events-none opacity-50 grayscale': !isSelected,
+        },
+      )}
     >
-      <div
-        data-testid="timer"
-        className={`flex min-h-[300px] w-[460px] flex-col items-center rounded-[45px] bg-neutral-200 transition-all duration-300 lg:w-[600px] xl:w-[720px] ${
-          isSelected ? '' : 'pointer-events-none opacity-50 grayscale'
-        }`}
+      {/* 제목 */}
+      <section className="flex flex-row items-center justify-center space-x-[24px]">
+        <h1 className="text-[48px] font-bold text-default-black xl:text-[64px]">
+          {teamName}
+        </h1>
+        <img
+          src={prosCons === 'PROS' ? KeyboardKeyA : KeyboardKeyL}
+          alt={prosCons === 'PROS' ? 'A키' : 'L키'}
+          className="size-[44px] xl:size-[56px]"
+        />
+      </section>
+
+      {/* 타이머 */}
+      <CircularTimer
+        progress={progressMotionValue}
+        stance={prosCons}
+        strokeWidth={getStrokeWidth()}
+        className="size-[400px] xl:size-[560px]"
       >
-        {/* Timer Header */}
-        <div
-          className={`flex h-[80px] w-full items-center justify-between rounded-t-[45px] lg:h-[105px] xl:h-[139px] ${bgColorClass} relative text-[45px] font-semibold  text-neutral-50 lg:text-[60px] lg:font-bold xl:text-[75px]`}
-        >
-          <h2 className="absolute left-1/2 flex w-max -translate-x-1/2 transform items-center justify-center gap-2">
-            {teamName}
-            <img
-              src={prosCons === 'pros' ? KeyboardKeyA : KeyboardKeyL}
-              alt={prosCons === 'pros' ? 'A키' : 'ㅣ키'}
-              className="h-[35px] w-[35px] lg:h-[50px] lg:w-[50px] xl:h-[56px] xl:w-[56px]"
-            />
-          </h2>
-        </div>
-        {speakingTimer !== null ? (
-          <div className="h-7 lg:h-10" />
-        ) : (
-          <div className="h-12 lg:h-14 xl:h-20" />
+        {/* 1회당 발언 시간 X */}
+        {speakingTimer === null && (
+          <span className="flex w-full flex-row items-center justify-center p-[16px] text-[90px] font-bold tabular-nums text-default-black xl:text-[110px]">
+            <p className="flex flex-1 items-center justify-center">{minute}</p>
+            <p className="flex items-center justify-center">:</p>
+            <p className="flex flex-1 items-center justify-center">{second}</p>
+          </span>
         )}
-        {/* 🚩 Timer 영역 */}
-        <div className="flex flex-col items-center space-y-[10px] lg:space-y-[15px] xl:space-y-[20px]">
-          {speakingTimer !== null ? (
-            <>
-              {/* 전체시간 타이머 (상단 작게 표시) */}
-              <div
-                className={`relative flex h-[60px] w-[400px] items-center justify-center  text-[54px] font-semibold text-neutral-900 lg:h-[70px] lg:w-[520px] lg:text-[68px] lg:font-bold xl:h-[80px] xl:w-[600px] xl:text-[80px]`}
-              >
-                <div className="absolute left-3 top-2 text-xs font-semibold lg:text-sm">
-                  전체 시간
-                </div>
-                <div className="flex flex-row items-center justify-center text-center xl:space-x-3">
-                  <p className="w-[95px] lg:w-[120px]">{minute}</p>
-                  <p className="w-[20px] -translate-y-[4px] lg:w-[20px]">:</p>
-                  <p className="w-[95px] lg:w-[120px]">{second}</p>
-                </div>
-              </div>
 
-              {/* 현재시간 타이머 (크게 표시) */}
-              <div
-                className={`relative flex h-[110px] w-[400px] items-center justify-center bg-white text-[70px] font-semibold lg:h-[130px] lg:w-[520px] lg:text-[90px] lg:font-bold xl:h-[160px] xl:w-[600px] xl:text-[110px]`}
-              >
-                <div className="absolute left-3 top-2 text-xs font-semibold lg:text-sm">
-                  현재 시간
-                </div>
-                <div className="flex flex-row items-center justify-center text-center xl:space-x-3">
-                  <p className="w-[110px] lg:w-[150px] xl:w-[170px]">
-                    {speakingMinute}
-                  </p>
-                  <p className="w-[40px] -translate-y-[6px] xl:w-[40px] xl:-translate-y-[10px]">
-                    :
-                  </p>
-                  <p className="w-[110px] lg:w-[150px] xl:w-[170px]">
-                    {speakingSecond}
-                  </p>
-                </div>
-              </div>
-            </>
-          ) : (
-            <>
-              {/* 타이머가 하나일 때 (크게 표시) */}
-              <div
-                className={`flex h-[160px] w-[400px] items-center justify-center bg-white text-[75px] font-semibold text-neutral-900 shadow-inner lg:h-[199px] lg:w-[520px] lg:text-[100px] lg:font-bold xl:h-[220px] xl:w-[600px] xl:text-[120px]`}
-              >
-                {minute} : {second}
-              </div>
-            </>
-          )}
-        </div>
+        {/* 1회당 발언 시간 O */}
+        {speakingTimer !== null && (
+          <span className="flex w-full flex-col items-center justify-center p-[8px] xl:p-[16px]">
+            <h1 className="w-[88px] rounded-[8px] bg-default-black py-[6px] text-center text-[16px] text-default-white xl:w-[112px] xl:text-[20px]">
+              전체 시간
+            </h1>
+            <span className="flex flex-row text-[56px] font-semibold tabular-nums text-default-black xl:text-[72px]">
+              <p className="flex w-[80px] items-center justify-center xl:w-[120px]">
+                {minute}
+              </p>
+              <p className="flex items-center justify-center">:</p>
+              <p className="flex w-[80px] items-center justify-center xl:w-[120px]">
+                {second}
+              </p>
+            </span>
+
+            <span className="h-[18px] xl:h-[32px]"></span>
+
+            <h1
+              className={clsx(
+                'w-[140px] rounded-[8px] py-[6px] text-center text-[20px] text-default-white xl:w-[180px] xl:text-[28px]',
+                { 'bg-camp-blue': prosCons === 'PROS' },
+                { 'bg-camp-red': prosCons === 'CONS' },
+              )}
+            >
+              현재 시간
+            </h1>
+            <span className="flex flex-row text-[70px] font-bold tabular-nums text-default-black lg:text-[90px] xl:text-[110px]">
+              <p className="flex w-[108px] items-center justify-center xl:w-[180px]">
+                {speakingMinute}
+              </p>
+              <p className="flex items-center justify-center">:</p>
+              <p className="flex w-[108px] items-center justify-center xl:w-[180px]">
+                {speakingSecond}
+              </p>
+            </span>
+          </span>
+        )}
+      </CircularTimer>
 
-        {/* Timer controller 유지 */}
-        <div className="my-[15px] lg:my-[25px] xl:my-[30px]">
-          <TimerController
-            isRunning={isRunning}
-            isTimerChangeable={false}
-            onChangingTimer={onChangingTimer}
-            onStart={onStart}
-            onPause={onPause}
-            onReset={onReset}
-          />
-        </div>
-      </div>
+      {/* 조작부 */}
+      <TimerController
+        isRunning={isRunning}
+        onStart={startTimer}
+        onPause={pauseTimer}
+        onReset={resetCurrentTimer}
+        stance={prosCons}
+      />
     </div>
   );
 }
diff --git a/src/page/TimerPage/components/TimerController.tsx b/src/page/TimerPage/components/TimerController.tsx
index e91b7151..87765264 100644
--- a/src/page/TimerPage/components/TimerController.tsx
+++ b/src/page/TimerPage/components/TimerController.tsx
@@ -1,68 +1,74 @@
-import { FaPlay } from 'react-icons/fa';
-import { FiRefreshCcw } from 'react-icons/fi';
 import { GiPauseButton } from 'react-icons/gi';
+import DTReset from '../../../components/icons/Reset';
+import DTPlay from '../../../components/icons/Play';
+import { Stance, TimeBoxType } from '../../../type/type';
+import clsx from 'clsx';
 
 interface TimerControllerProps {
   onStart: () => void;
   onPause: () => void;
   onReset: () => void;
-  onChangingTimer: () => void;
-  isTimerChangeable: boolean;
   isRunning: boolean;
+  stance: Stance;
+  boxType?: TimeBoxType;
 }
 
 export default function TimerController({
   onStart,
   onPause,
   onReset,
-  onChangingTimer,
-  isTimerChangeable,
   isRunning,
+  stance,
+  boxType,
 }: TimerControllerProps) {
+  const bgClass =
+    boxType === 'FEEDBACK'
+      ? 'bg-brand'
+      : stance === 'PROS'
+        ? 'bg-camp-blue'
+        : stance === 'CONS'
+          ? 'bg-camp-red'
+          : 'bg-default-neutral';
   return (
-    <div
-      data-testid="timer-controller"
-      className="flex h-[120px] w-[480px] flex-row lg:h-[140px] lg:w-[620px] xl:h-[180px] xl:w-[730px]"
-    >
-      <div className="flex size-full flex-1 items-center justify-end ">
-        <button
-          className="size-[60px] rounded-full bg-neutral-900 p-[15px] hover:bg-brand-main lg:size-[70px] lg:p-[18px] xl:size-[82px]"
-          onClick={() => onReset()}
-        >
-          <FiRefreshCcw className="size-full justify-center text-slate-50" />
-        </button>
-      </div>
-      <div className="flex size-full flex-1 items-center justify-center ">
-        <button
-          className="size-[100px] rounded-full bg-neutral-900 p-[30px] hover:bg-brand-main lg:size-[130px] lg:p-[40px] xl:size-[152px] xl:p-[45px]"
-          onClick={() => {
-            if (isRunning) {
-              onPause();
-            } else {
-              onStart();
-            }
-          }}
-        >
-          {isRunning && (
-            <GiPauseButton className="size-full justify-center text-neutral-50" />
-          )}
-          {!isRunning && (
-            <FaPlay className="size-full justify-center text-neutral-50" />
-          )}
-        </button>
-      </div>
-      <div className="flex size-full flex-1 items-center justify-start ">
-        {isTimerChangeable && (
-          <button
-            data-testid="additional-timer-button"
-            className="h-[90px] w-[110px] flex-col items-center space-y-1 rounded-[18px] border-[3px] border-neutral-900 bg-neutral-50 text-[20px] font-bold leading-[27px] hover:bg-neutral-200 lg:h-[120px] lg:w-[150px] lg:rounded-[23px] lg:text-[27px] lg:leading-[37px] xl:h-[133px] xl:w-[165px] xl:space-y-2 xl:text-[30px]"
-            onClick={() => onChangingTimer()}
-          >
-            <p>작전 시간</p>
-            <p>사용</p>
-          </button>
+    <div className="flex flex-row items-center justify-center space-x-[16px] xl:space-x-[24px]">
+      {/* 초기화 버튼 */}
+      <button
+        type="button"
+        aria-label="타이머 초기화"
+        className={clsx(
+          'flex size-[76px] items-center justify-center rounded-full bg-default-black2 p-[20px] xl:size-[92px]',
+          { 'hover:bg-[#676767]': boxType === 'FEEDBACK' },
         )}
-      </div>
+        onClick={onReset}
+      >
+        <DTReset className="size-full text-default-white" />
+      </button>
+
+      {/* 재생 및 일시정지 버튼 */}
+      <button
+        type="button"
+        aria-label={isRunning ? '일시정지' : '재생'}
+        aria-pressed={isRunning}
+        className={clsx(
+          'flex size-[76px] items-center justify-center rounded-full p-[20px] xl:size-[92px]',
+          bgClass,
+          { 'hover:bg-brand-hover': boxType === 'FEEDBACK' },
+        )}
+        onClick={() => {
+          if (isRunning) {
+            onPause();
+          } else {
+            onStart();
+          }
+        }}
+      >
+        {isRunning && (
+          <GiPauseButton className="size-full text-default-white" />
+        )}
+        {!isRunning && (
+          <DTPlay className="size-full translate-x-[4px] text-default-white" />
+        )}
+      </button>
     </div>
   );
 }
diff --git a/src/page/TimerPage/components/TimerView.tsx b/src/page/TimerPage/components/TimerView.tsx
new file mode 100644
index 00000000..933ee49d
--- /dev/null
+++ b/src/page/TimerPage/components/TimerView.tsx
@@ -0,0 +1,94 @@
+// components/TimerView.tsx
+import DTExchange from '../../../components/icons/Exchange';
+import { TimerPageLogics } from '../hooks/useTimerPageState';
+import NormalTimer from './NormalTimer';
+import TimeBasedTimer from './TimeBasedTimer';
+
+export default function TimerView({ state }: { state: TimerPageLogics }) {
+  const {
+    data,
+    normalTimer,
+    timer1,
+    timer2,
+    prosConsSelected,
+    index,
+    isAdditionalTimerAvailable,
+    handleActivateTeam,
+    switchCamp,
+  } = state;
+  if (data && data.table[index].boxType === 'NORMAL') {
+    return (
+      <NormalTimer
+        normalTimerInstance={{
+          timer: normalTimer.timer,
+          isAdditionalTimerOn: normalTimer.isAdditionalTimerOn,
+          isRunning: normalTimer.isRunning,
+          handleChangeAdditionalTimer: normalTimer.handleChangeAdditionalTimer,
+          handleCloseAdditionalTimer: normalTimer.handleCloseAdditionalTimer,
+          startTimer: normalTimer.startTimer,
+          pauseTimer: normalTimer.pauseTimer,
+          resetTimer: normalTimer.resetTimer,
+          setTimer: normalTimer.setTimer,
+        }}
+        isAdditionalTimerAvailable={isAdditionalTimerAvailable}
+        item={data.table[index]}
+        teamName={
+          data.table[index].stance === 'NEUTRAL'
+            ? null
+            : data.table[index].stance === 'PROS'
+              ? data.info.prosTeamName
+              : data.info.consTeamName
+        }
+      />
+    );
+  }
+  if (data && data.table[index].boxType === 'TIME_BASED') {
+    return (
+      <div className="flex flex-row items-center justify-center space-x-[30px]">
+        {/* 왼쪽 타이머 */}
+        <TimeBasedTimer
+          timeBasedTimerInstance={{
+            totalTimer: timer1.totalTimer,
+            speakingTimer: timer1.speakingTimer,
+            isRunning: timer1.isRunning,
+            startTimer: timer1.startTimer,
+            pauseTimer: timer1.pauseTimer,
+            resetCurrentTimer: () => timer1.resetCurrentTimer(timer2.isDone),
+          }}
+          item={data.table[index]}
+          isSelected={prosConsSelected === 'PROS'}
+          onActivate={() => handleActivateTeam('PROS')}
+          prosCons="PROS"
+          teamName={data.info.prosTeamName}
+        />
+
+        {/* ENTER 버튼 */}
+        <button
+          onClick={switchCamp}
+          className="flex flex-col items-center justify-center rounded-[14px] bg-default-black2 px-[16px] py-[8px] text-default-white shadow-xl xl:px-[32px]"
+        >
+          <DTExchange className="size-[48px] xl:size-[64px]" />
+          <p className="text-[12px] font-semibold xl:text-[24px]">ENTER</p>
+        </button>
+
+        {/* 오른쪽 타이머 */}
+        <TimeBasedTimer
+          timeBasedTimerInstance={{
+            totalTimer: timer2.totalTimer,
+            speakingTimer: timer2.speakingTimer,
+            isRunning: timer2.isRunning,
+            startTimer: timer2.startTimer,
+            pauseTimer: timer2.pauseTimer,
+            resetCurrentTimer: () => timer2.resetCurrentTimer(timer1.isDone),
+          }}
+          item={data.table[index]}
+          isSelected={prosConsSelected === 'CONS'}
+          onActivate={() => handleActivateTeam('CONS')}
+          prosCons="CONS"
+          teamName={data.info.consTeamName}
+        />
+      </div>
+    );
+  }
+  return null;
+}
diff --git a/src/page/TimerPage/hooks/useBellSound.ts b/src/page/TimerPage/hooks/useBellSound.ts
new file mode 100644
index 00000000..a9e96588
--- /dev/null
+++ b/src/page/TimerPage/hooks/useBellSound.ts
@@ -0,0 +1,43 @@
+import { useEffect } from 'react';
+import { NormalTimerLogics } from './useNormalTimer';
+import { BellConfig } from '../../../type/type';
+
+interface UseBellSoundProps {
+  normalTimer: NormalTimerLogics;
+  bells?: BellConfig[] | null;
+}
+
+export function useBellSound({ normalTimer, bells }: UseBellSoundProps) {
+  // 종소리 여러 번 - 새로운 Audio로 재생
+  function playBell(count: number) {
+    const audio = new Audio(`/sounds/bell-${count}.mp3`);
+    audio.play().catch((err) => {
+      console.warn('audio.play() 실패:', err);
+    });
+  }
+
+  useEffect(() => {
+    const timerVal = normalTimer.timer;
+    const defaultTime = normalTimer.defaultTimer;
+    if (!bells || timerVal == null) return;
+
+    bells.forEach((bell) => {
+      let trigger = false;
+
+      if (bell.type === 'BEFORE_END') {
+        // timerVal이 남은 시간 === bell.time일 때
+        trigger = timerVal === bell.time;
+      } else if (bell.type === 'AFTER_END') {
+        // timerVal이 0보다 작아진 후, timerVal === bell.time (bell.time < 0)
+        trigger = timerVal === bell.time;
+      } else if (bell.type === 'AFTER_START') {
+        // 시작 후 N초: timerVal === defaultTime - bell.time
+        trigger = timerVal === defaultTime - bell.time;
+      }
+
+      if (trigger) {
+        playBell(bell.count);
+      }
+    });
+  }, [normalTimer.timer, bells, normalTimer.defaultTimer]);
+}
diff --git a/src/page/TimerPage/hooks/useCircularTimerAnimation.ts b/src/page/TimerPage/hooks/useCircularTimerAnimation.ts
new file mode 100644
index 00000000..228fd692
--- /dev/null
+++ b/src/page/TimerPage/hooks/useCircularTimerAnimation.ts
@@ -0,0 +1,18 @@
+import { animate, clamp, useMotionValue } from 'framer-motion';
+import { useEffect } from 'react';
+
+export default function useCircularTimerAnimation(rawProgress: number) {
+  const progress = clamp(0, 100, rawProgress);
+  const progressMotionValue = useMotionValue(0);
+
+  useEffect(() => {
+    const controls = animate(progressMotionValue, progress, {
+      duration: 0.7,
+      ease: 'easeOut',
+    });
+
+    return () => controls.stop();
+  }, [progress, progressMotionValue]);
+
+  return progressMotionValue;
+}
diff --git a/src/page/TimerPage/hooks/useCustomTimer.ts b/src/page/TimerPage/hooks/useCustomTimer.ts
deleted file mode 100644
index 36d969d4..00000000
--- a/src/page/TimerPage/hooks/useCustomTimer.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-import { useCallback, useRef, useState, useEffect } from 'react';
-
-interface useCustomTimerProps {
-  initIsSpeakingTimer?: boolean;
-}
-
-export function useCustomTimer({
-  initIsSpeakingTimer = false,
-}: useCustomTimerProps) {
-  const [totalTimer, setTotalTimer] = useState<number | null>(null);
-  const [isSpeakingTimer, setIsSpeakingTimer] = useState(initIsSpeakingTimer);
-  const [speakingTimer, setSpeakingTimer] = useState<number | null>(null);
-  const [defaultTime, setDefaultTime] = useState<{
-    defaultTotalTimer: number | null;
-    defaultSpeakingTimer: number | null;
-  }>({ defaultTotalTimer: 0, defaultSpeakingTimer: null });
-
-  const [isRunning, setIsRunning] = useState(false);
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
-  const [isDone, setIsDone] = useState(false);
-
-  const [savedTime, setSavedTime] = useState<{
-    savedTotalTimer: number | null;
-    savedSpeakingTimer: number | null;
-  }>({ savedTotalTimer: 0, savedSpeakingTimer: null });
-
-  // 타이머 시작
-  const startTimer = useCallback(() => {
-    if (intervalRef.current !== null) return;
-    if (!isDone) {
-      intervalRef.current = setInterval(() => {
-        setSavedTime((prev) => {
-          return { ...prev, savedTotalTimer: totalTimer };
-        });
-        setTotalTimer((prev) =>
-          prev === null ? null : prev - 1 >= 0 ? prev - 1 : 0,
-        );
-        if (isSpeakingTimer) {
-          setSavedTime((prev) => {
-            return { ...prev, savedSpeakingTimer: speakingTimer };
-          });
-          setSpeakingTimer((prev) =>
-            prev === null ? null : prev - 1 >= 0 ? prev - 1 : 0,
-          );
-        }
-      }, 1000);
-      setIsRunning(true);
-    }
-  }, [isDone, isSpeakingTimer, totalTimer, speakingTimer]);
-
-  // 타이머 일시정지
-  const pauseTimer = useCallback(() => {
-    if (intervalRef.current) {
-      clearInterval(intervalRef.current);
-      intervalRef.current = null;
-    }
-    setIsRunning(false);
-  }, []);
-
-  // 가장 최근의 시간정보로 타이머 리셋
-  const resetCurrentTimer = useCallback(() => {
-    pauseTimer();
-    setIsDone(false);
-    setTotalTimer(savedTime.savedTotalTimer);
-    if (
-      isSpeakingTimer &&
-      defaultTime.defaultSpeakingTimer !== null &&
-      totalTimer !== null
-    ) {
-      setSpeakingTimer(savedTime.savedSpeakingTimer);
-    }
-  }, [
-    isSpeakingTimer,
-    defaultTime.defaultSpeakingTimer,
-    savedTime.savedTotalTimer,
-    savedTime.savedSpeakingTimer,
-    totalTimer,
-    pauseTimer,
-  ]);
-
-  // 타이머 전환 간에 타이머를 초기화하는 함수
-  const resetTimerForNextPhase = useCallback(() => {
-    pauseTimer();
-    if (
-      isSpeakingTimer &&
-      defaultTime.defaultSpeakingTimer !== null &&
-      totalTimer !== null
-    ) {
-      setSpeakingTimer(
-        defaultTime.defaultSpeakingTimer < totalTimer
-          ? defaultTime.defaultSpeakingTimer
-          : totalTimer,
-      );
-      if (totalTimer > 0) {
-        setIsDone(false);
-      }
-      return;
-    }
-    if (totalTimer === 0) return;
-    setTotalTimer(defaultTime.defaultTotalTimer);
-  }, [
-    defaultTime.defaultSpeakingTimer,
-    defaultTime.defaultTotalTimer,
-    isSpeakingTimer,
-    totalTimer,
-    pauseTimer,
-  ]);
-
-  // 특정 시간에 액션 수행
-  const actOnTime = useCallback(
-    (targetTime: number, action: () => void, isSpeakingTimer = false) => {
-      const timer = isSpeakingTimer ? speakingTimer : totalTimer;
-      if (timer === targetTime) {
-        action();
-      }
-    },
-    [totalTimer, speakingTimer],
-  );
-
-  // ✅ 외부에서 타이머를 재설정할 수 있는 Setter 제공
-  const setTimers = useCallback(
-    (total: number | null, speaking: number | null = null) => {
-      pauseTimer();
-      setTotalTimer(total);
-      setSpeakingTimer(speaking);
-    },
-    [pauseTimer],
-  );
-  const clearTimer = useCallback(() => {
-    pauseTimer();
-    setDefaultTime({ defaultTotalTimer: 0, defaultSpeakingTimer: null });
-    setTotalTimer(null);
-    setIsSpeakingTimer(initIsSpeakingTimer);
-    setSpeakingTimer(null);
-    setIsDone(false);
-    intervalRef.current = null;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pauseTimer]);
-
-  // Cleanup
-  useEffect(() => () => pauseTimer(), [pauseTimer]);
-
-  return {
-    totalTimer,
-    speakingTimer,
-    isRunning,
-    isDone,
-    defaultTime,
-    isSpeakingTimer,
-    startTimer,
-    pauseTimer,
-    resetTimerForNextPhase,
-    resetCurrentTimer,
-    actOnTime,
-    setTimers,
-    setDefaultTime,
-    setIsSpeakingTimer,
-    setIsDone,
-    clearTimer,
-  };
-}
diff --git a/src/page/TimerPage/hooks/useFeedbackTimer.ts b/src/page/TimerPage/hooks/useFeedbackTimer.ts
new file mode 100644
index 00000000..c073317e
--- /dev/null
+++ b/src/page/TimerPage/hooks/useFeedbackTimer.ts
@@ -0,0 +1,126 @@
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+export function useFeedbackTimer(): FeedbackTimerLogics {
+  // 타이머에 표시되는 현재 남은 시간
+  const [timer, setTimer] = useState<number | null>(null);
+  // 타이머 요청에 대한 ID를 저장
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  // 타이머의 총 시간
+  const [defaultTimer, setDefaultTimer] = useState(0);
+
+  // 타이머가 현재 동작중인지 여부
+  const [isRunning, setIsRunning] = useState(false);
+
+  // 실제 시간 계산용 레퍼런스
+  const targetTimeRef = useRef<number | null>(null);
+
+  /**
+   * 타이머 일시정지 (setInterval 해제)
+   */
+  const pauseTimer = useCallback(() => {
+    if (intervalRef.current !== null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    setIsRunning(false);
+  }, []);
+
+  /**
+   * 타이머를 1초마다 1씩 감소시키며 시작
+   * 이미 동작중이면 재시작하지 않음
+   */
+  const startTimer = useCallback(() => {
+    if (intervalRef.current !== null || timer === null || timer <= 0) return;
+
+    const startTime = Date.now();
+    targetTimeRef.current = startTime + timer * 1000;
+
+    setIsRunning(true);
+
+    intervalRef.current = setInterval(() => {
+      if (targetTimeRef.current === null) {
+        return;
+      }
+
+      const now = Date.now();
+      const remainingTotal = targetTimeRef.current - now;
+      const remainingSeconds = Math.ceil(remainingTotal / 1000);
+
+      if (remainingSeconds <= 0) {
+        pauseTimer();
+        setTimer(0);
+        return;
+      }
+
+      setTimer(remainingSeconds);
+    }, 200);
+  }, [timer, pauseTimer]);
+
+  /**
+   * 타이머를 특정 값(혹은 기본값)으로 리셋
+   */
+  const resetTimer = useCallback(() => {
+    if (intervalRef.current !== null) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    setTimer(defaultTimer);
+    setIsRunning(false);
+  }, [defaultTimer]);
+
+  /**
+   * 타이머 시간을 조정 (타이머가 멈춰있을 때만)
+   * @param amount - 추가하거나 뺄 시간 (초)
+   */
+  const adjustTime = useCallback(
+    (amount: number) => {
+      if (isRunning) return;
+
+      setTimer((prevTimer) => {
+        const newTime = (prevTimer ?? 0) + amount;
+        return newTime < 0 ? 0 : newTime;
+      });
+
+      setDefaultTimer((prevDefault) => {
+        const newDefault = prevDefault + amount;
+        return newDefault < 0 ? 0 : newDefault;
+      });
+    },
+    [isRunning],
+  );
+
+  // 컴포넌트가 언마운트될 때 setInterval로 인한 메모리 누수 방지
+  useEffect(() => () => pauseTimer(), [pauseTimer]);
+
+  return {
+    timer,
+    isRunning,
+    defaultTimer,
+    setTimer,
+    startTimer,
+    pauseTimer,
+    resetTimer,
+    setDefaultTimer,
+    adjustTime,
+  };
+}
+
+export interface FeedbackTimerLogics {
+  timer: number | null;
+  isRunning: boolean;
+  defaultTimer: number;
+  setTimer: Dispatch<SetStateAction<number | null>>;
+  startTimer: () => void;
+  pauseTimer: () => void;
+  resetTimer: (value?: number) => void;
+  setDefaultTimer: Dispatch<SetStateAction<number>>;
+  adjustTime: (amount: number) => void;
+}
diff --git a/src/page/TimerPage/hooks/useNormalTimer.ts b/src/page/TimerPage/hooks/useNormalTimer.ts
index 580f3287..d1e4e94a 100644
--- a/src/page/TimerPage/hooks/useNormalTimer.ts
+++ b/src/page/TimerPage/hooks/useNormalTimer.ts
@@ -1,20 +1,72 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
-export function useNormalTimer() {
+/**
+ * "일반 타이머" 기능을 제공하는 커스텀 훅
+ * - 한 명(한 팀)만 시간을 쓰는 단일 타이머 상황에서 사용
+ */
+export function useNormalTimer(): NormalTimerLogics {
+  // 타이머에 표시할 '남은 시간'(초)
   const [timer, setTimer] = useState<number | null>(null);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  // 타이머가 초기화될 때 사용하는 '기본 시간값' (reset 시 사용)
   const [defaultTimer, setDefaultTimer] = useState(0);
 
+  // 타이머가 현재 동작중인지 여부
   const [isRunning, setIsRunning] = useState(false);
 
+  // 작전 시간 타이머 작동 여부
+  const [isAdditionalTimerOn, setIsAdditionalTimerOn] = useState(false);
+
+  // 실제 시간 계산용 레퍼런스
+  const targetTimeRef = useRef<number | null>(null);
+
+  /**
+   * 타이머를 1초마다 1씩 감소시키며 시작
+   * 이미 동작중이면 재시작하지 않음
+   */
   const startTimer = useCallback(() => {
-    if (intervalRef.current !== null) return;
-    intervalRef.current = setInterval(() => {
-      setTimer((prev) => (prev === null ? null : prev - 1));
-    }, 1000);
+    if (intervalRef.current !== null || timer === null) return;
+
+    // 목표 시각을 실제 시각 기반으로 계산
+    // 예를 들어, 현재 시각이 오후 13시 00분 30초인데, 1회당 발언 시간이 30초라면,
+    // 1회당 발언 시간이 모두 끝나는 시간은 13시 01분 00초이므로,
+    // 해당 시간을 목표 시간으로 두는 식임
+    const startTime = Date.now();
+    targetTimeRef.current = startTime + timer * 1000;
+
+    // isRunning 상태를 true로 바꿔주고 인터벌 처리
     setIsRunning(true);
-  }, []);
 
+    // 목표 시각에 기반하여 타이머 계산
+    intervalRef.current = setInterval(() => {
+      // 목표 시각 레퍼런스의 유효성 확인
+      if (targetTimeRef.current === null) {
+        return;
+      }
+
+      // 현재 시각 확인
+      const now = Date.now();
+
+      // 목표 시각까지 얼마나 더 필요한지, 남은 시간을 초 단위로 계산
+      const remainingTotal = targetTimeRef.current - now;
+      const remainingSeconds = Math.ceil(remainingTotal / 1000);
+
+      // 계산한 남은 시간을 타이머에 반영
+      setTimer(remainingSeconds);
+    }, 200);
+  }, [timer]);
+
+  /**
+   * 타이머 일시정지 (setInterval 해제)
+   */
   const pauseTimer = useCallback(() => {
     if (intervalRef.current !== null) {
       clearInterval(intervalRef.current);
@@ -23,47 +75,78 @@ export function useNormalTimer() {
     setIsRunning(false);
   }, []);
 
+  /**
+   * 타이머를 특정 값(혹은 기본값)으로 리셋
+   * (interval 정리, 남은 시간 초기화)
+   */
   const resetTimer = useCallback(
     (value?: number) => {
       if (intervalRef.current !== null) {
         clearInterval(intervalRef.current);
         intervalRef.current = null;
       }
+      // 값이 있으면 그 값으로, 없으면 defaultTimer로 세팅
       setTimer(value !== undefined ? value : defaultTimer);
       setIsRunning(false);
     },
     [defaultTimer],
   );
 
-  const actOnTime = useCallback(
-    (time: number, act: () => void) => {
-      if (timer === time) {
-        act();
-      }
-    },
-    [timer],
-  );
-
+  /**
+   * 모든 타이머 상태 초기화
+   * (타이머 값, default값, setInterval 핸들 모두 초기화)
+   */
   const clearTimer = useCallback(() => {
     pauseTimer();
     setTimer(null);
     setDefaultTimer(0);
     intervalRef.current = null;
+  }, [pauseTimer]);
+
+  /**
+   * 작전시간 타이머 사용 시, 기존 타이머 저장
+   */
+  const handleChangeAdditionalTimer = useCallback(() => {
+    pauseTimer();
+    setIsAdditionalTimerOn(!isAdditionalTimerOn);
+  }, [isAdditionalTimerOn, pauseTimer]);
+
+  /**
+   * 작전시간 타이머 사용 시, 기존 타이머 저장
+   */
+  const handleCloseAdditionalTimer = useCallback(() => {
+    setIsAdditionalTimerOn(false);
   }, []);
 
-  // Cleanup
   useEffect(() => () => pauseTimer(), [pauseTimer]);
 
   return {
     timer,
     isRunning,
     defaultTimer,
+    isAdditionalTimerOn,
     setTimer,
     startTimer,
     pauseTimer,
     resetTimer,
-    actOnTime,
     setDefaultTimer,
     clearTimer,
+    handleChangeAdditionalTimer,
+    handleCloseAdditionalTimer,
   };
 }
+
+export interface NormalTimerLogics {
+  timer: number | null;
+  isRunning: boolean;
+  defaultTimer: number;
+  isAdditionalTimerOn: boolean;
+  setTimer: Dispatch<SetStateAction<number | null>>;
+  startTimer: () => void;
+  pauseTimer: () => void;
+  resetTimer: (value?: number) => void;
+  setDefaultTimer: Dispatch<SetStateAction<number>>;
+  clearTimer: () => void;
+  handleChangeAdditionalTimer: () => void;
+  handleCloseAdditionalTimer: () => void;
+}
diff --git a/src/page/TimerPage/hooks/useTimeBasedTimer.ts b/src/page/TimerPage/hooks/useTimeBasedTimer.ts
new file mode 100644
index 00000000..d9957547
--- /dev/null
+++ b/src/page/TimerPage/hooks/useTimeBasedTimer.ts
@@ -0,0 +1,308 @@
+import {
+  useCallback,
+  useRef,
+  useState,
+  useEffect,
+  Dispatch,
+  SetStateAction,
+} from 'react';
+
+/**
+ * 토론에서 사용하는 커스텀 타이머 훅
+ * - 전체시간, 전체시간 + 발언 당 시간(2가지) 모드 지원
+ */
+export function useTimeBasedTimer(): TimeBasedTimerLogics {
+  // 전체 남은 시간 (null이면 타이머 미사용)
+  const [totalTimer, setTotalTimer] = useState<number | null>(null);
+
+  // 발언당 시간 타이머(=각 phase별 제한시간, 모드 전환 가능)
+  const [speakingTimer, setSpeakingTimer] = useState<number | null>(null);
+  const isSpeakingTimerAvailable = speakingTimer !== null;
+
+  // 기본(초기) 시간값 (reset 등에서 참조)
+  const [defaultTime, setDefaultTime] = useState<{
+    defaultTotalTimer: number | null;
+    defaultSpeakingTimer: number | null;
+  }>({ defaultTotalTimer: 0, defaultSpeakingTimer: null });
+
+  // 현재 타이머 동작중 여부
+  const [isRunning, setIsRunning] = useState(false);
+
+  // setInterval() 저장용 ref
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  // 타이머가 0이 되면 true (완료 상태)
+  const [isDone, setIsDone] = useState(false);
+
+  // 실제 시간 계산용 레퍼런스
+  const targetTimeRef = useRef<number | null>(null);
+  const speakingTargetTimeRef = useRef<number | null>(null);
+
+  /**
+   * 타이머 시작을 위해 사용하는 저수준 함수
+   */
+  const setTimerInterval = useCallback(() => {
+    // isRunning 상태를 true로 바꿔주고 인터벌 처리
+    setIsRunning(true);
+
+    // 목표 시각에 기반하여 타이머 계산
+    intervalRef.current = setInterval(() => {
+      // 목표 시각 레퍼런스의 유효성 확인
+      if (targetTimeRef.current === null) {
+        return;
+      }
+
+      // 현재 시각 확인
+      const now = Date.now();
+
+      // 목표 시각까지 얼마나 더 필요한지, 남은 시간을 초 단위로 계산
+      const remainingTotal = targetTimeRef.current - now;
+      const remainingSeconds = Math.max(0, Math.ceil(remainingTotal / 1000));
+
+      // 계산한 남은 시간을 타이머에 반영
+      setTotalTimer(remainingSeconds);
+
+      // 1회당 발언 시간 타이머도 사용하고 있을 경우, 마찬가지로 남은 시간 계산
+      if (isSpeakingTimerAvailable) {
+        if (speakingTargetTimeRef.current === null) {
+          return;
+        }
+
+        const remainingSpeaking = speakingTargetTimeRef.current - now;
+        const remainingSpeakingSeconds = Math.max(
+          0,
+          Math.ceil(remainingSpeaking / 1000),
+        );
+        setSpeakingTimer(remainingSpeakingSeconds);
+      }
+    }, 200);
+  }, [isSpeakingTimerAvailable]);
+
+  /**
+   * 타이머 카운트다운 시작
+   * - 이미 실행 중이면 무시
+   * - isDone(완료) 상태일 땐 시작X
+   * - 1초마다 totalTimer, speakingTimer(필요시) 감소
+   */
+  const startTimer = useCallback(() => {
+    if (intervalRef.current !== null || totalTimer === null || isDone) {
+      return;
+    }
+
+    // 목표 시각을 실제 시각 기반으로 계산
+    // 예를 들어, 현재 시각이 오후 13시 00분 30초인데, 1회당 발언 시간이 30초라면,
+    // 1회당 발언 시간이 모두 끝나는 시간은 13시 01분 00초이므로,
+    // 해당 시간을 목표 시간으로 두는 식임
+    const startTime = Date.now();
+    targetTimeRef.current = startTime + totalTimer * 1000;
+    if (isSpeakingTimerAvailable) {
+      speakingTargetTimeRef.current = startTime + speakingTimer * 1000;
+    }
+
+    // 타이머 인터벌 시작
+    setTimerInterval();
+  }, [
+    isDone,
+    isSpeakingTimerAvailable,
+    setTimerInterval,
+    speakingTimer,
+    totalTimer,
+  ]);
+
+  /**
+   * 타이머 일시정지
+   * - setInterval 해제, 동작 멈춤
+   */
+  const pauseTimer = useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    setIsRunning(false);
+  }, []);
+
+  /**
+   * 최근 저장된 시간(savedTime)으로 복원
+   */
+  const resetCurrentTimer = useCallback(
+    (isOpponentDone: boolean) => {
+      // 초기화를 위해 타이머 정지
+      pauseTimer();
+
+      // 타이머가 초기화되었으니 이제부터는 당연히 다시 동작 가능하기 때문에,
+      // isDone을 false로 설정
+      setIsDone(false);
+
+      // 전체 발언 시간 복원
+      setTotalTimer(defaultTime.defaultTotalTimer);
+
+      // 1회당 발언 시간 사용하는지 여부와 유효성 확인
+      if (
+        !isSpeakingTimerAvailable ||
+        defaultTime.defaultSpeakingTimer === null ||
+        totalTimer === null
+      ) {
+        return;
+      }
+
+      // 상대편 발언 종료 여부에 따라 1회당 발언 시간 다르게 계산
+      if (isOpponentDone) {
+        setSpeakingTimer(defaultTime.defaultTotalTimer);
+      } else {
+        setSpeakingTimer(defaultTime.defaultSpeakingTimer);
+      }
+    },
+    [
+      isSpeakingTimerAvailable,
+      defaultTime.defaultSpeakingTimer,
+      defaultTime.defaultTotalTimer,
+      totalTimer,
+      pauseTimer,
+    ],
+  );
+
+  /**
+   * 발언자 전환 시 타이머 리셋/초기화
+   * - 발언 타이머 사용중이면 default값(또는 totalTimer 이하)로 재설정
+   * - 전체 타이머는 초기값(defaultTotalTimer)로 리셋
+   */
+  const resetTimerForNextPhase = useCallback(
+    (isOpponentDone: boolean): number => {
+      if (
+        isSpeakingTimerAvailable &&
+        defaultTime.defaultSpeakingTimer !== null &&
+        totalTimer !== null
+      ) {
+        // # 1회당 발언 시간을 사용할 경우
+
+        // 다음 발언 시간 계산
+        // - 상대방 시간 모두 소진 시, 남아있는 전체 발언 시간을 모두 1회당 발언 시간으로 사용
+        // - 상대방 시간이 남았을 때, 1회당 발언 시간과 남은 전체 발언 시간 중 더 작은 것을 사용
+        const nextSpeakingTime = isOpponentDone
+          ? totalTimer
+          : Math.min(totalTimer, defaultTime.defaultSpeakingTimer);
+
+        // 계산한 시간을 1회당 발언 시간으로 설정
+        setSpeakingTimer(nextSpeakingTime);
+        return nextSpeakingTime;
+      } else {
+        // # 1회당 발언 시간을 사용하지 않을 경우
+
+        // 전체 발언 시간 타이머는 초기값으로 리셋
+        if (totalTimer === 0 || totalTimer === null) {
+          return 0;
+        }
+        return totalTimer;
+      }
+    },
+    [defaultTime.defaultSpeakingTimer, isSpeakingTimerAvailable, totalTimer],
+  );
+
+  /**
+   * 발언자 전환 시 타이머 리셋/초기화 후 즉시 실행
+   * - 발언 타이머 사용중이면 default값(또는 totalTimer 이하)로 재설정
+   * - 전체 타이머는 초기값(defaultTotalTimer)로 리셋
+   */
+  const resetAndStartTimer = useCallback(
+    (isOpponentDone: boolean) => {
+      console.log(`# resetAndStartTimer 호출`);
+      const newTime = resetTimerForNextPhase(isOpponentDone);
+
+      if (intervalRef.current !== null || totalTimer === null || isDone) {
+        return;
+      }
+
+      // 목표 시각을 실제 시각 기반으로 계산
+      // 예를 들어, 현재 시각이 오후 13시 00분 30초인데, 1회당 발언 시간이 30초라면,
+      // 1회당 발언 시간이 모두 끝나는 시간은 13시 01분 00초이므로,
+      // 해당 시간을 목표 시간으로 두는 식임
+      const startTime = Date.now();
+      targetTimeRef.current = startTime + totalTimer * 1000;
+      if (isSpeakingTimerAvailable) {
+        speakingTargetTimeRef.current = startTime + newTime * 1000;
+      }
+
+      // 타이머 인터벌 시작
+      setTimerInterval();
+    },
+    [
+      resetTimerForNextPhase,
+      setTimerInterval,
+      isDone,
+      isSpeakingTimerAvailable,
+      totalTimer,
+    ],
+  );
+
+  /**
+   * 외부에서 전체/발언 타이머를 지정값으로 재설정
+   * - start/pause 후 원하는 값 지정할 때 사용
+   */
+  const setTimers = useCallback(
+    (total: number | null, speaking: number | null = null) => {
+      pauseTimer();
+      setTotalTimer(total);
+      setSpeakingTimer(speaking);
+    },
+    [pauseTimer],
+  );
+
+  /**
+   * 타이머 상태값 모두 초기화 (clear)
+   * - phase 전환 등 모든 값 리셋할 때 사용
+   */
+  const clearTimer = useCallback(() => {
+    pauseTimer();
+    setDefaultTime({ defaultTotalTimer: 0, defaultSpeakingTimer: null });
+    setTotalTimer(null);
+    setSpeakingTimer(null);
+    setIsDone(false);
+    intervalRef.current = null;
+  }, [pauseTimer]);
+
+  useEffect(() => () => pauseTimer(), [pauseTimer]);
+
+  return {
+    totalTimer,
+    speakingTimer,
+    isRunning,
+    isDone,
+    defaultTime,
+    isSpeakingTimerAvailable,
+    startTimer,
+    pauseTimer,
+    resetTimerForNextPhase,
+    resetAndStartTimer,
+    resetCurrentTimer,
+    setTimers,
+    setDefaultTime,
+    setIsDone,
+    clearTimer,
+  };
+}
+
+export interface TimeBasedTimerLogics {
+  totalTimer: number | null;
+  speakingTimer: number | null;
+  isRunning: boolean;
+  isDone: boolean;
+  defaultTime: {
+    defaultTotalTimer: number | null;
+    defaultSpeakingTimer: number | null;
+  };
+  isSpeakingTimerAvailable: boolean;
+  startTimer: () => void;
+  pauseTimer: () => void;
+  resetTimerForNextPhase: (isOpponentDone: boolean) => number;
+  resetAndStartTimer: (isOpponentDone: boolean) => void;
+  resetCurrentTimer: (isOpponentDone: boolean) => void;
+  setTimers: (total: number | null, speaking?: number | null) => void;
+  setDefaultTime: Dispatch<
+    SetStateAction<{
+      defaultTotalTimer: number | null;
+      defaultSpeakingTimer: number | null;
+    }>
+  >;
+  setIsDone: Dispatch<SetStateAction<boolean>>;
+  clearTimer: () => void;
+}
diff --git a/src/page/TimerPage/hooks/useTimerBackground.ts b/src/page/TimerPage/hooks/useTimerBackground.ts
new file mode 100644
index 00000000..36880527
--- /dev/null
+++ b/src/page/TimerPage/hooks/useTimerBackground.ts
@@ -0,0 +1,97 @@
+// src/page/TimerPage/hooks/useTimerBackgroundState.ts
+
+import { useEffect, useState } from 'react';
+import { TimeBasedTimerLogics } from './useTimeBasedTimer';
+import { NormalTimerLogics } from './useNormalTimer';
+import {
+  DebateTableData,
+  TimeBasedStance,
+  TimerBGState,
+} from '../../../type/type';
+
+const TIME_THRESHOLDS = {
+  WARNING_MAX: 30,
+  DANGER_MAX: 10,
+  DANGER_MIN: 0,
+} as const;
+
+/**
+ * 타이머 상태(색상)를 계산한다.
+ * isRunning이 false면 항상 'default' 반환.
+ */
+function getTimerStatusByTime(
+  time: number | null,
+  isRunning: boolean,
+): TimerBGState {
+  if (!isRunning) return 'default';
+  if (typeof time !== 'number') return 'default';
+  if (time > TIME_THRESHOLDS.DANGER_MAX && time <= TIME_THRESHOLDS.WARNING_MAX)
+    return 'warning';
+  if (time >= TIME_THRESHOLDS.DANGER_MIN && time <= TIME_THRESHOLDS.DANGER_MAX)
+    return 'danger';
+  if (time < TIME_THRESHOLDS.DANGER_MIN) return 'expired';
+  return 'default';
+}
+interface UseTimerBackgroundProps {
+  timer1: TimeBasedTimerLogics;
+  timer2: TimeBasedTimerLogics;
+  normalTimer: NormalTimerLogics;
+  prosConsSelected: TimeBasedStance;
+  data: DebateTableData | undefined;
+  index: number;
+}
+
+export function useTimerBackground({
+  timer1,
+  timer2,
+  normalTimer,
+  prosConsSelected,
+  data,
+  index,
+}: UseTimerBackgroundProps) {
+  const [bg, setBg] = useState<TimerBGState>('default');
+
+  useEffect(() => {
+    const boxType = data?.table[index].boxType;
+
+    if (boxType === 'NORMAL') {
+      setBg(getTimerStatusByTime(normalTimer.timer, normalTimer.isRunning));
+    } else if (boxType === 'TIME_BASED') {
+      if (prosConsSelected === 'PROS') {
+        const timer = timer1;
+        setBg(
+          getTimerStatusByTime(
+            timer.speakingTimer ?? timer.totalTimer,
+            timer.isRunning,
+          ),
+        );
+      } else {
+        const timer = timer2;
+        setBg(
+          getTimerStatusByTime(
+            timer.speakingTimer ?? timer.totalTimer,
+            timer.isRunning,
+          ),
+        );
+      }
+    } else {
+      setBg('default');
+    }
+  }, [
+    normalTimer.isRunning,
+    normalTimer.timer,
+    timer1.isRunning,
+    timer1.speakingTimer,
+    timer1.totalTimer,
+    timer2.isRunning,
+    timer2.speakingTimer,
+    timer2.totalTimer,
+    prosConsSelected,
+    data,
+    index,
+    timer1,
+    timer2,
+  ]);
+
+  return { bg, setBg };
+}
diff --git a/src/page/TimerPage/hooks/useTimerHotkey.ts b/src/page/TimerPage/hooks/useTimerHotkey.ts
new file mode 100644
index 00000000..cf066907
--- /dev/null
+++ b/src/page/TimerPage/hooks/useTimerHotkey.ts
@@ -0,0 +1,133 @@
+import { useEffect } from 'react';
+import { TimerPageLogics } from './useTimerPageState';
+
+/**
+ * 타이머 페이지에서 키보드 단축키(핫키) 기능을 제공하는 커스텀 훅입니다.
+ * - Space: 타이머 시작/일시정지
+ * - KeyR: 타이머 리셋
+ * - KeyA/KeyL: 각각 찬/반 진영 타이머 활성화
+ * - Enter, NumpadEnter: 진영 전환
+ */
+export function useTimerHotkey(state: TimerPageLogics) {
+  const {
+    data,
+    index,
+    prosConsSelected,
+    timer1,
+    timer2,
+    normalTimer,
+    goToOtherItem,
+    setProsConsSelected,
+    switchCamp,
+  } = state;
+
+  useEffect(() => {
+    // 데이터가 아직 로딩 중이면 핫키 적용하지 않음
+    if (!data) return;
+    const boxType = data.table[index].boxType;
+
+    /**
+     * 키보드 이벤트 리스너 (핫키 처리)
+     */
+    const handleKeyDown = (event: KeyboardEvent) => {
+      // 핫키로 쓸 키 목록
+      const keysToDisable = new Set([
+        'Space',
+        'KeyR',
+        'KeyA',
+        'KeyL',
+        'Enter',
+        'NumpadEnter',
+      ]);
+
+      // 핫키 입력시, 기본 동작(스크롤, 폼 전송 등) 막음
+      if (keysToDisable.has(event.code)) {
+        event.preventDefault();
+      }
+      // 입력 포커스 해제(특히 input/select 사용 중일 때)
+      if (event.target instanceof HTMLElement) {
+        event.target.blur();
+      }
+
+      // 찬/반 타이머 토글 (시작/정지)
+      const toggleTimer = (timer: typeof timer1 | typeof timer2) => {
+        if (timer.isRunning) {
+          timer.pauseTimer();
+        } else {
+          timer.startTimer();
+        }
+      };
+
+      switch (event.code) {
+        case 'Space':
+          // 일반 타이머/진영별 타이머 동작 제어
+          if (boxType === 'NORMAL') {
+            if (normalTimer.isRunning) {
+              normalTimer.pauseTimer();
+            } else {
+              normalTimer.startTimer();
+            }
+          } else {
+            if (prosConsSelected === 'PROS') {
+              toggleTimer(timer1);
+            } else if (prosConsSelected === 'CONS') {
+              toggleTimer(timer2);
+            }
+          }
+          break;
+        case 'KeyR':
+          // 타이머 리셋
+          if (boxType === 'NORMAL') {
+            normalTimer.resetTimer();
+          } else {
+            if (prosConsSelected === 'PROS') {
+              timer1.resetCurrentTimer(timer2.isDone);
+            } else {
+              timer2.resetCurrentTimer(timer1.isDone);
+            }
+          }
+          break;
+        case 'KeyA':
+          // 찬성 진영 선택 및 반대 타이머 정지
+          if (prosConsSelected === 'CONS') {
+            if (timer1.isDone) {
+              setProsConsSelected('PROS');
+            } else {
+              switchCamp();
+            }
+          }
+          break;
+        case 'KeyL':
+          // 반대 진영 선택 및 찬성 타이머 정지
+          if (prosConsSelected === 'PROS') {
+            if (timer1.isDone) {
+              setProsConsSelected('CONS');
+            } else {
+              switchCamp();
+            }
+          }
+          break;
+        case 'Enter':
+        case 'NumpadEnter':
+          // 진영 전환
+          switchCamp();
+          break;
+      }
+    };
+
+    // 전역 단축키 리스너 등록
+    window.addEventListener('keydown', handleKeyDown);
+    // 언마운트 시 리스너 해제
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [
+    data,
+    index,
+    prosConsSelected,
+    timer1,
+    timer2,
+    normalTimer,
+    goToOtherItem,
+    setProsConsSelected,
+    switchCamp,
+  ]);
+}
diff --git a/src/page/TimerPage/hooks/useTimerPageModal.ts b/src/page/TimerPage/hooks/useTimerPageModal.ts
new file mode 100644
index 00000000..7d17d90a
--- /dev/null
+++ b/src/page/TimerPage/hooks/useTimerPageModal.ts
@@ -0,0 +1,60 @@
+// hooks/useTimerPageModal.ts
+import { useEffect } from 'react';
+import { useModal } from '../../../hooks/useModal';
+import { useNavigate } from 'react-router-dom';
+import { isGuestFlow } from '../../../util/sessionStorage';
+
+export function useTimerPageModal(tableId: number) {
+  const navigate = useNavigate();
+  const IS_VISITED = 'isVisited';
+  const TRUE = 'true';
+
+  // 툴팁(처음 사용 안내) 모달
+  const {
+    openModal: openUseTooltipModal,
+    closeModal: closeUseTooltipModal,
+    ModalWrapper: UseToolTipWrapper,
+    isOpen: isUseTooltipOpen,
+  } = useModal({
+    onClose: () => {
+      localStorage.setItem(IS_VISITED, TRUE);
+    },
+    isCloseButtonExist: false,
+  });
+
+  // 로그인/저장 유도 모달
+  const {
+    openModal: openLoginAndStoreModal,
+    closeModal: closeLoginAndStoreModal,
+    ModalWrapper: LoginAndStoreModalWrapper,
+    isOpen: isLoginAndStoreOpen,
+  } = useModal();
+
+  useEffect(() => {
+    const isVisited = localStorage.getItem(IS_VISITED);
+    if (isVisited === null || isVisited !== TRUE) {
+      openUseTooltipModal();
+    }
+    // eslint-disable-next-line
+  }, []);
+
+  const openLoginAndStoreModalOrGoToDebateEndPage = () => {
+    if (isGuestFlow()) {
+      openLoginAndStoreModal();
+    } else {
+      navigate(`/table/customize/${tableId}/end`);
+    }
+  };
+
+  return {
+    isUseTooltipOpen,
+    isLoginAndStoreOpen,
+    UseToolTipWrapper,
+    LoginAndStoreModalWrapper,
+    openUseTooltipModal,
+    closeUseTooltipModal,
+    openLoginAndStoreModal,
+    closeLoginAndStoreModal,
+    openLoginAndStoreModalOrGoToDebateEndPage,
+  };
+}
diff --git a/src/page/TimerPage/hooks/useTimerPageState.ts b/src/page/TimerPage/hooks/useTimerPageState.ts
new file mode 100644
index 00000000..14e14ee6
--- /dev/null
+++ b/src/page/TimerPage/hooks/useTimerPageState.ts
@@ -0,0 +1,281 @@
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { useGetDebateTableData } from '../../../hooks/query/useGetDebateTableData';
+import { TimeBasedTimerLogics, useTimeBasedTimer } from './useTimeBasedTimer';
+import { NormalTimerLogics, useNormalTimer } from './useNormalTimer';
+import { useBellSound } from './useBellSound';
+import {
+  DebateTableData,
+  TimeBasedStance,
+  TimerBGState,
+} from '../../../type/type';
+import { useTimerBackground } from './useTimerBackground';
+
+/**
+ * 타이머 페이지의 상태(타이머, 라운드, 벨 등) 전반을 관리하는 커스텀 훅
+ */
+export function useTimerPageState(tableId: number): TimerPageLogics {
+  // Get data with useQuery of TanStack Query
+  const {
+    data,
+    isLoading: isFetching,
+    isError: isFetchingError,
+    isRefetching,
+    isRefetchError,
+    refetch,
+  } = useGetDebateTableData(tableId);
+  const isLoading = isFetching || isRefetching;
+  const isError = isFetchingError || isRefetchError;
+
+  // 추가 타이머가 가능한지 여부 (예: 사전에 설정한 "작전 시간"이 있으면 false)
+  const isAdditionalTimerAvailable = useMemo(() => {
+    if (data) {
+      return !data.table.some((value) => value.speechType === '작전 시간');
+    }
+    return true;
+  }, [data]);
+
+  // 현재 진행 중인 토론 순서 인덱스
+  const [index, setIndex] = useState(0);
+
+  // 자유토론 타이머, 일반 타이머 상태 관리 커스텀 훅
+  const timer1 = useTimeBasedTimer();
+  const timer2 = useTimeBasedTimer();
+  const normalTimer = useNormalTimer();
+
+  // 현재 발언자('PROS'/'CONS')
+  const [prosConsSelected, setProsConsSelected] =
+    useState<TimeBasedStance>('PROS');
+
+  // 벨 사운드 관련 훅
+  useBellSound({
+    normalTimer,
+    bells: data?.table[index].bell,
+  });
+
+  const { bg, setBg } = useTimerBackground({
+    timer1,
+    timer2,
+    normalTimer,
+    prosConsSelected,
+    data,
+    index,
+  });
+
+  /**
+   * 라운드 이동 (이전/다음)
+   */
+  const goToOtherItem = useCallback(
+    (isPrev: boolean) => {
+      if (isPrev) {
+        if (index > 0) {
+          setIndex((prev) => prev - 1);
+        }
+      } else {
+        if (data && index < data.table.length - 1) {
+          setIndex((prev) => prev + 1);
+        }
+      }
+    },
+    [index, data],
+  );
+
+  /**
+   * 발언 진영 전환(ENTER 키/버튼)
+   * - pros → cons, cons → pros로 타이머/상태 전환
+   */
+  const switchCamp = useCallback(() => {
+    // 1. 현재 팀과 다음 팀의 정보 설정
+    const currentTimer = prosConsSelected === 'PROS' ? timer1 : timer2;
+    const nextTimer = prosConsSelected === 'PROS' ? timer2 : timer1;
+    const nextTeam = prosConsSelected === 'PROS' ? 'CONS' : 'PROS';
+
+    // 2. 상대 팀이 시간을 모두 소진했을 경우, 차례를 넘기지 않고 반환
+    if (nextTimer.isDone) {
+      return;
+    }
+
+    // 3. 현재 팀의 발언이 종료되었는지 확인
+    const isOpponentDone =
+      currentTimer.totalTimer !== null && currentTimer.totalTimer <= 0;
+
+    // 4. 현재 타이머를 멈추기 전, 실행 중이었는지를 저장
+    const wasRunning = currentTimer.isRunning;
+
+    // 5. 이제 현재 타이머를 정지하고...
+    currentTimer.pauseTimer();
+
+    // 6. 발언권을 다음 팀에게 넘김 (현재 발언권 가진 팀을 다음 팀으로 설정)
+    setProsConsSelected(nextTeam);
+
+    if (wasRunning) {
+      // 7-1. 만약 타이머가 실행 중이었다면, 다음 타이머 초기화 후 즉시 시작
+      nextTimer.resetAndStartTimer(isOpponentDone);
+    } else {
+      // 7-1. 만약 타이머가 멈춰 있었다면, 다음 타이머 초기화만 진행
+      nextTimer.resetTimerForNextPhase(isOpponentDone);
+    }
+  }, [prosConsSelected, timer1, timer2]);
+
+  /**
+   * 특정 진영(팀)을 활성화하는 함수
+   * - 사용자가 좌/우 타이머 영역을 직접 클릭할 때 사용
+   * - 현재 진영이 아닌 타이머를 클릭한 경우에만 동작
+   */
+  const handleActivateTeam = useCallback(
+    (team: TimeBasedStance) => {
+      const clickedTimerStance = team === 'PROS' ? 'PROS' : 'CONS';
+      const clickedTimer = clickedTimerStance === 'PROS' ? timer1 : timer2;
+
+      // 클릭한 타이머가 현재 타이머와 동일한 타이머라면, 바로 반환
+      if (prosConsSelected === clickedTimerStance) return;
+
+      // 아니라면, 타이머 변경
+      if (clickedTimer.isDone) {
+        setProsConsSelected(clickedTimerStance);
+      } else {
+        switchCamp();
+      }
+    },
+    [prosConsSelected, switchCamp, timer1, timer2],
+  );
+
+  /**
+   * 라운드 이동/초기 진입 시 타이머 상태 초기화 및 셋업
+   */
+  useEffect(() => {
+    if (!data) return;
+    const currentBox = data.table[index];
+    timer1.clearTimer();
+    timer2.clearTimer();
+    normalTimer.clearTimer();
+    normalTimer.handleCloseAdditionalTimer();
+
+    // 일반 타이머(중립 발언 등)
+    if (currentBox.boxType === 'NORMAL') {
+      const defaultTime = currentBox.time ?? 0;
+      normalTimer.setDefaultTimer(defaultTime);
+      normalTimer.setTimer(defaultTime);
+    }
+    // 진영별 타이머(찬/반)
+    else if (currentBox.boxType === 'TIME_BASED') {
+      normalTimer.clearTimer();
+      const defaultTotalTimer = currentBox.timePerTeam;
+      const defaultSpeakingTimer = currentBox.timePerSpeaking;
+      [timer1, timer2].forEach((timer) => {
+        timer.setDefaultTime({ defaultTotalTimer, defaultSpeakingTimer });
+        timer.setTimers(defaultTotalTimer, defaultSpeakingTimer);
+        timer.setIsDone(false);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    data,
+    index,
+    timer1.setDefaultTime,
+    timer1.setTimers,
+    timer2.setDefaultTime,
+    timer2.setTimers,
+    normalTimer.setDefaultTimer,
+    normalTimer.setTimer,
+  ]);
+
+  /**
+   * 진영 전환 시, 상대 타이머가 작동가능하면 isDone false로 변경
+   */
+  useEffect(() => {
+    const isPros = prosConsSelected === 'PROS';
+    const opponentTimer = isPros ? timer2 : timer1;
+    if (opponentTimer.totalTimer !== null && opponentTimer.totalTimer > 0) {
+      opponentTimer.setIsDone(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [prosConsSelected]);
+
+  /**
+   * 각 타이머가 종료 시 자동으로 타이머 일시정지
+   */
+  useEffect(() => {
+    [timer1, timer2].forEach((timer) => {
+      if (timer.speakingTimer === 0 || timer.totalTimer === 0) {
+        timer.pauseTimer();
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    timer1.speakingTimer,
+    timer1.totalTimer,
+    timer2.speakingTimer,
+    timer2.totalTimer,
+  ]);
+
+  /**
+   * 각 진영의 타이머가 완전히 끝난 경우(isDone 처리)
+   */
+  useEffect(() => {
+    const selectedTimer = prosConsSelected === 'PROS' ? timer1 : timer2;
+
+    const isDone =
+      selectedTimer.speakingTimer === null
+        ? selectedTimer.totalTimer === 0
+        : selectedTimer.speakingTimer === 0;
+
+    if (isDone) {
+      selectedTimer.setIsDone(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    timer1.totalTimer,
+    timer1.speakingTimer,
+    timer2.totalTimer,
+    timer2.speakingTimer,
+  ]);
+
+  return {
+    data,
+    bg,
+    setBg,
+    isAdditionalTimerAvailable,
+    index,
+    setIndex,
+    timer1,
+    timer2,
+    normalTimer,
+    prosConsSelected,
+    setProsConsSelected,
+    goToOtherItem,
+    switchCamp,
+    handleActivateTeam,
+    tableId,
+    isLoading,
+    isError,
+    refetch,
+  };
+}
+
+export interface TimerPageLogics {
+  data: DebateTableData | undefined;
+  bg: TimerBGState;
+  setBg: Dispatch<SetStateAction<TimerBGState>>;
+  isAdditionalTimerAvailable: boolean;
+  index: number;
+  setIndex: Dispatch<SetStateAction<number>>;
+  timer1: TimeBasedTimerLogics;
+  timer2: TimeBasedTimerLogics;
+  normalTimer: NormalTimerLogics;
+  prosConsSelected: TimeBasedStance;
+  setProsConsSelected: Dispatch<SetStateAction<TimeBasedStance>>;
+  goToOtherItem: (isPrev: boolean) => void;
+  switchCamp: () => void;
+  handleActivateTeam: (team: TimeBasedStance) => void;
+  tableId: number;
+  isLoading: boolean;
+  isError: boolean;
+  refetch: () => void;
+}
diff --git a/src/page/TimerPage/stories/AdditionalTimerControlButton.stories.tsx b/src/page/TimerPage/stories/AdditionalTimerControlButton.stories.tsx
deleted file mode 100644
index 0cdeb334..00000000
--- a/src/page/TimerPage/stories/AdditionalTimerControlButton.stories.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import AdditionalTimerControlButton from '../components/AdditionalTimerControlButton';
-
-const meta: Meta<typeof AdditionalTimerControlButton> = {
-  title: 'page/TimerPage/Components/AdditionalTimerControlButton',
-  component: AdditionalTimerControlButton,
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof AdditionalTimerControlButton>;
-
-export const Default: Story = {
-  args: {
-    text: '+30초',
-    addOnTimer: () => {},
-  },
-};
diff --git a/src/page/TimerPage/stories/AdditionalTimerController.stories.tsx b/src/page/TimerPage/stories/AdditionalTimerController.stories.tsx
deleted file mode 100644
index 23ddf394..00000000
--- a/src/page/TimerPage/stories/AdditionalTimerController.stories.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import AdditionalTimerController from '../components/AdditionalTimerController';
-
-const meta: Meta<typeof AdditionalTimerController> = {
-  title: 'page/TimerPage/Components/AdditionalTimerController',
-  component: AdditionalTimerController,
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof AdditionalTimerController>;
-
-export const Default: Story = {
-  args: {
-    onStart: () => {},
-    onPause: () => {},
-    addOnTimer: (delta: number) => {
-      console.log(delta);
-    },
-    isRunning: false,
-  },
-};
diff --git a/src/page/TimerPage/stories/CircularTimer.stories.tsx b/src/page/TimerPage/stories/CircularTimer.stories.tsx
new file mode 100644
index 00000000..ac0d27db
--- /dev/null
+++ b/src/page/TimerPage/stories/CircularTimer.stories.tsx
@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react';
+import CircularTimer from '../components/CircularTimer';
+import { MotionValue } from 'framer-motion';
+
+const meta: Meta<typeof CircularTimer> = {
+  title: 'page/TimerPage/Components/CircularTimer',
+  component: CircularTimer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CircularTimer>;
+
+const value = new MotionValue<number>(30);
+
+export const OnPros: Story = {
+  args: {
+    progress: value,
+    strokeWidth: 20,
+    stance: 'PROS',
+    children: <span className="text-timer text-default-black">02 : 30</span>,
+  },
+};
+
+export const OnCons: Story = {
+  args: {
+    progress: value,
+    strokeWidth: 20,
+    stance: 'CONS',
+    children: <span className="text-timer text-default-black">02 : 30</span>,
+  },
+};
+
+export const OnNeutral: Story = {
+  args: {
+    progress: value,
+    strokeWidth: 20,
+    stance: 'NEUTRAL',
+    children: <span className="text-timer text-default-black">02 : 30</span>,
+  },
+};
+
+export const OnNarrowerBorder: Story = {
+  args: {
+    progress: value,
+    strokeWidth: 15,
+    stance: 'NEUTRAL',
+    children: (
+      <span className="text-[80px] font-bold text-default-black">02 : 30</span>
+    ),
+  },
+};
diff --git a/src/page/TimerPage/stories/CompactTimeoutTimer.stories.tsx b/src/page/TimerPage/stories/CompactTimeoutTimer.stories.tsx
new file mode 100644
index 00000000..39c0e5e2
--- /dev/null
+++ b/src/page/TimerPage/stories/CompactTimeoutTimer.stories.tsx
@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+import CompactTimeoutTimer from '../components/CompactTimeoutTimer';
+
+const meta: Meta<typeof CompactTimeoutTimer> = {
+  title: 'page/TimerPage/Components/CompactTimeoutTimer',
+  component: CompactTimeoutTimer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CompactTimeoutTimer>;
+
+export const Default: Story = {
+  args: {
+    onClose: () => {
+      console.log('# Close button clicked.');
+    },
+  },
+};
diff --git a/src/page/TimerPage/stories/FeedbackTimer.stories.tsx b/src/page/TimerPage/stories/FeedbackTimer.stories.tsx
new file mode 100644
index 00000000..d70956e6
--- /dev/null
+++ b/src/page/TimerPage/stories/FeedbackTimer.stories.tsx
@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { useEffect } from 'react';
+import FeedbackTimer from '../components/FeedbackTimer';
+import { useFeedbackTimer } from '../hooks/useFeedbackTimer';
+
+// Storybook의 arg를 받아 실제 훅을 사용하는 래퍼 컴포넌트
+const FeedbackTimerWrapper = (args: { initialTime: number }) => {
+  const feedbackTimerInstance = useFeedbackTimer();
+  const { setTimer, setDefaultTimer } = feedbackTimerInstance;
+
+  useEffect(() => {
+    // 초기 시간 설정
+    setTimer(args.initialTime);
+    setDefaultTimer(args.initialTime);
+  }, [args.initialTime, setTimer, setDefaultTimer]);
+
+  return <FeedbackTimer feedbackTimerInstance={feedbackTimerInstance} />;
+};
+
+const meta: Meta<typeof FeedbackTimerWrapper> = {
+  title: 'page/TimerPage/Components/FeedbackTimer',
+  component: FeedbackTimerWrapper,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof FeedbackTimerWrapper>;
+
+export const Default: Story = {
+  args: {
+    initialTime: 0, // 초기 시간 0초
+  },
+};
diff --git a/src/page/TimerPage/stories/NormalTimer.stories.tsx b/src/page/TimerPage/stories/NormalTimer.stories.tsx
index bfad3227..60c58860 100644
--- a/src/page/TimerPage/stories/NormalTimer.stories.tsx
+++ b/src/page/TimerPage/stories/NormalTimer.stories.tsx
@@ -13,20 +13,17 @@ type Story = StoryObj<typeof NormalTimer>;
 
 export const OnPros: Story = {
   args: {
-    onChangingTimer: () => {},
-    onPause: () => {},
-    onReset: () => {},
-    onStart: () => {},
-    goToOtherItem: (isPrev: boolean) => {
-      console.log(isPrev);
+    normalTimerInstance: {
+      timer: 150,
+      isRunning: false,
+      isAdditionalTimerOn: true,
+      setTimer: () => {},
+      startTimer: () => {},
+      pauseTimer: () => {},
+      resetTimer: () => {},
+      handleChangeAdditionalTimer: () => {},
+      handleCloseAdditionalTimer: () => {},
     },
-    addOnTimer: () => {},
-    timer: 150,
-    isAdditionalTimerOn: false,
-    isTimerChangeable: false,
-    isRunning: false,
-    isLastItem: false,
-    isFirstItem: false,
     item: {
       stance: 'PROS',
       speechType: '입론1',
@@ -35,26 +32,25 @@ export const OnPros: Story = {
       timePerTeam: null,
       timePerSpeaking: null,
       speaker: '발언자',
+      bell: null,
     },
+    teamName: '찬성',
   },
 };
 
 export const OnCons: Story = {
   args: {
-    onChangingTimer: () => {},
-    onPause: () => {},
-    onReset: () => {},
-    onStart: () => {},
-    goToOtherItem: (isPrev: boolean) => {
-      console.log(isPrev);
+    normalTimerInstance: {
+      timer: 150,
+      isRunning: false,
+      isAdditionalTimerOn: true,
+      setTimer: () => {},
+      startTimer: () => {},
+      pauseTimer: () => {},
+      resetTimer: () => {},
+      handleChangeAdditionalTimer: () => {},
+      handleCloseAdditionalTimer: () => {},
     },
-    addOnTimer: () => {},
-    timer: 150,
-    isAdditionalTimerOn: false,
-    isTimerChangeable: false,
-    isRunning: false,
-    isLastItem: false,
-    isFirstItem: false,
     item: {
       stance: 'CONS',
       speechType: '입론1',
@@ -63,26 +59,25 @@ export const OnCons: Story = {
       timePerTeam: null,
       timePerSpeaking: null,
       speaker: '발언자',
+      bell: null,
     },
+    teamName: '찬성',
   },
 };
 
 export const OnNeutral: Story = {
   args: {
-    onChangingTimer: () => {},
-    onPause: () => {},
-    onReset: () => {},
-    onStart: () => {},
-    goToOtherItem: (isPrev: boolean) => {
-      console.log(isPrev);
+    normalTimerInstance: {
+      timer: 150,
+      isRunning: false,
+      isAdditionalTimerOn: true,
+      setTimer: () => {},
+      startTimer: () => {},
+      pauseTimer: () => {},
+      resetTimer: () => {},
+      handleChangeAdditionalTimer: () => {},
+      handleCloseAdditionalTimer: () => {},
     },
-    addOnTimer: () => {},
-    timer: 150,
-    isAdditionalTimerOn: false,
-    isTimerChangeable: false,
-    isRunning: false,
-    isLastItem: false,
-    isFirstItem: false,
     item: {
       stance: 'NEUTRAL',
       speechType: '작전 시간',
@@ -91,90 +86,119 @@ export const OnNeutral: Story = {
       timePerTeam: null,
       timePerSpeaking: null,
       speaker: '홍길동',
+      bell: null,
     },
+    teamName: '찬성',
   },
 };
 
-export const OnRunning: Story = {
+export const OnMinus: Story = {
   args: {
-    onChangingTimer: () => {},
-    onPause: () => {},
-    onReset: () => {},
-    onStart: () => {},
-    goToOtherItem: (isPrev: boolean) => {
-      console.log(isPrev);
+    normalTimerInstance: {
+      timer: -30,
+      isRunning: false,
+      isAdditionalTimerOn: true,
+      setTimer: () => {},
+      startTimer: () => {},
+      pauseTimer: () => {},
+      resetTimer: () => {},
+      handleChangeAdditionalTimer: () => {},
+      handleCloseAdditionalTimer: () => {},
     },
-    addOnTimer: () => {},
-    timer: 150,
-    isAdditionalTimerOn: false,
-    isTimerChangeable: false,
-    isRunning: true,
-    isLastItem: false,
-    isFirstItem: false,
     item: {
-      stance: 'PROS',
-      speechType: '입론 1',
+      stance: 'NEUTRAL',
+      speechType: '작전 시간',
       boxType: 'NORMAL',
       time: 30,
       timePerTeam: null,
       timePerSpeaking: null,
       speaker: '홍길동',
+      bell: null,
     },
+    teamName: '찬성',
   },
 };
 
-export const WhenAdditionalTimerAvailable: Story = {
+export const OnProsAdditionalTimerAvailable: Story = {
   args: {
-    onChangingTimer: () => {},
-    onPause: () => {},
-    onReset: () => {},
-    onStart: () => {},
-    goToOtherItem: (isPrev: boolean) => {
-      console.log(isPrev);
+    normalTimerInstance: {
+      timer: 150,
+      isRunning: false,
+      isAdditionalTimerOn: true,
+      setTimer: () => {},
+      startTimer: () => {},
+      pauseTimer: () => {},
+      resetTimer: () => {},
+      handleChangeAdditionalTimer: () => {},
+      handleCloseAdditionalTimer: () => {},
     },
-    addOnTimer: () => {},
-    timer: 150,
-    isAdditionalTimerOn: false,
-    isTimerChangeable: true,
-    isRunning: true,
-    isLastItem: false,
-    isFirstItem: false,
     item: {
       stance: 'PROS',
-      speechType: '입론 1',
-      boxType: 'NORMAL',
+      speechType: '입론1',
+      boxType: 'TIME_BASED',
       time: 30,
       timePerTeam: null,
       timePerSpeaking: null,
-      speaker: '홍길동',
+      speaker: '발언자',
+      bell: null,
     },
+    teamName: '찬성',
+    isAdditionalTimerAvailable: true,
   },
 };
 
-export const OnAdditionalTimerEnabled: Story = {
+export const OnConsAdditionalTimerAvailable: Story = {
   args: {
-    onChangingTimer: () => {},
-    onPause: () => {},
-    onReset: () => {},
-    onStart: () => {},
-    goToOtherItem: (isPrev: boolean) => {
-      console.log(isPrev);
+    normalTimerInstance: {
+      timer: 150,
+      isRunning: false,
+      isAdditionalTimerOn: true,
+      setTimer: () => {},
+      startTimer: () => {},
+      pauseTimer: () => {},
+      resetTimer: () => {},
+      handleChangeAdditionalTimer: () => {},
+      handleCloseAdditionalTimer: () => {},
     },
-    addOnTimer: () => {},
-    timer: 150,
-    isAdditionalTimerOn: true,
-    isTimerChangeable: false,
-    isRunning: false,
-    isLastItem: false,
-    isFirstItem: false,
     item: {
-      stance: 'PROS',
+      stance: 'CONS',
       speechType: '입론1',
       boxType: 'TIME_BASED',
       time: 30,
       timePerTeam: null,
       timePerSpeaking: null,
       speaker: '발언자',
+      bell: null,
+    },
+    teamName: '찬성',
+    isAdditionalTimerAvailable: true,
+  },
+};
+
+export const OnSpeakerNameTooLong: Story = {
+  args: {
+    normalTimerInstance: {
+      timer: 150,
+      isRunning: false,
+      isAdditionalTimerOn: true,
+      setTimer: () => {},
+      startTimer: () => {},
+      pauseTimer: () => {},
+      resetTimer: () => {},
+      handleChangeAdditionalTimer: () => {},
+      handleCloseAdditionalTimer: () => {},
+    },
+    item: {
+      stance: 'CONS',
+      speechType: '입론1',
+      boxType: 'TIME_BASED',
+      time: 30,
+      timePerTeam: null,
+      timePerSpeaking: null,
+      speaker: '발언자 2847277237',
+      bell: null,
     },
+    teamName: '매우 엄청 짱 길어서 감당이 불가능할 정도의 길이를 가진',
+    isAdditionalTimerAvailable: true,
   },
 };
diff --git a/src/page/TimerPage/stories/NormalTimerTestPage.stories.tsx b/src/page/TimerPage/stories/NormalTimerTestPage.stories.tsx
index ba46e43c..96d4cfad 100644
--- a/src/page/TimerPage/stories/NormalTimerTestPage.stories.tsx
+++ b/src/page/TimerPage/stories/NormalTimerTestPage.stories.tsx
@@ -1,7 +1,70 @@
 // NormalTimerTestPage.stories.tsx
 import { Meta, StoryObj } from '@storybook/react';
-import NormalTimerTestPage from '../components/NormalTimerTestPage';
+import { TimeBoxInfo } from '../../../type/type';
+import DefaultLayout from '../../../layout/defaultLayout/DefaultLayout';
+import HeaderTableInfo from '../../../components/HeaderTableInfo/HeaderTableInfo';
+import HeaderTitle from '../../../components/HeaderTitle/HeaderTitle';
+import NormalTimer from '../components/NormalTimer';
+import RoundControlButton from '../../../components/RoundControlButton/RoundControlButton';
+const item: TimeBoxInfo = {
+  boxType: 'NORMAL',
+  speechType: '입론',
+  stance: 'PROS',
+  speaker: '케이티',
+  time: 120,
+  timePerTeam: null,
+  timePerSpeaking: null,
+  bell: null,
+};
+
+function NormalTimerTestPage() {
+  return (
+    <DefaultLayout>
+      {/* Header */}
+      <DefaultLayout.Header>
+        <DefaultLayout.Header.Left>
+          <HeaderTableInfo name="테스트 시간표" />
+        </DefaultLayout.Header.Left>
+        <DefaultLayout.Header.Center>
+          <HeaderTitle title="일반타이머 테스트입니다" />
+        </DefaultLayout.Header.Center>
+        <DefaultLayout.Header.Right />
+      </DefaultLayout.Header>
+
+      {/* Content */}
+      <DefaultLayout.ContentContainer noPadding>
+        <div className="flex flex-1 flex-col items-center justify-center space-y-[25px] bg-neutral-100 xl:space-y-[40px]">
+          <NormalTimer
+            normalTimerInstance={{
+              timer: 150,
+              isRunning: false,
+              isAdditionalTimerOn: false,
+              setTimer: () => {},
+              startTimer: () => {},
+              pauseTimer: () => {},
+              resetTimer: () => {},
+              handleChangeAdditionalTimer: () => {},
+              handleCloseAdditionalTimer: () => {},
+            }}
+            item={item}
+            teamName="찬성"
+            isAdditionalTimerAvailable={false}
+          />
 
+          {/* NEXT 버튼만 하단에 표시 */}
+          <div className="flex flex-row space-x-1 xl:space-x-8">
+            <div className="flex h-[70px] w-[175px] items-center justify-center lg:w-[200px]">
+              <RoundControlButton type="PREV" onClick={() => alert('이전')} />
+            </div>
+            <div className="flex h-[70px] w-[175px] items-center justify-center lg:w-[200px]">
+              <RoundControlButton type="NEXT" onClick={() => alert('다음')} />
+            </div>
+          </div>
+        </div>
+      </DefaultLayout.ContentContainer>
+    </DefaultLayout>
+  );
+}
 const meta: Meta<typeof NormalTimerTestPage> = {
   title: 'page/TimerPage/NormalTimerTestPage',
   component: NormalTimerTestPage,
diff --git a/src/page/TimerPage/stories/TimeBasedTimer.stories.tsx b/src/page/TimerPage/stories/TimeBasedTimer.stories.tsx
index 45790080..e6ae3cf5 100644
--- a/src/page/TimerPage/stories/TimeBasedTimer.stories.tsx
+++ b/src/page/TimerPage/stories/TimeBasedTimer.stories.tsx
@@ -1,108 +1,111 @@
 import { Meta, StoryObj } from '@storybook/react';
 import TimeBasedTimer from '../components/TimeBasedTimer';
+import { TimeBoxInfo } from '../../../type/type';
+
+// --- Mock 타이머 인스턴스 ---
+const mockTimerInstance = {
+  totalTimer: 150,
+  speakingTimer: 50,
+  isRunning: false,
+  isDone: false,
+  defaultTime: { defaultTotalTimer: 150, defaultSpeakingTimer: 50 },
+  isSpeakingTimer: true,
+  startTimer: () => {},
+  pauseTimer: () => {},
+  resetTimerForNextPhase: () => {},
+  resetCurrentTimer: () => {},
+  setTimers: () => {},
+  setSavedTime: () => {},
+  setDefaultTime: () => {},
+  setIsSpeakingTimer: () => {},
+  setIsDone: () => {},
+  clearTimer: () => {},
+};
+
+const TIME_BASED_TIMEBOX_SAMPLE: TimeBoxInfo = {
+  boxType: 'TIME_BASED',
+  speaker: null,
+  speechType: '주도권 토론',
+  stance: 'NEUTRAL',
+  time: null,
+  timePerSpeaking: 60,
+  timePerTeam: 120,
+  bell: null,
+} as const;
 
 const meta: Meta<typeof TimeBasedTimer> = {
   title: 'page/TimerPage/Components/TimeBasedTimer',
   component: TimeBasedTimer,
   tags: ['autodocs'],
 };
-
 export default meta;
 
 type Story = StoryObj<typeof TimeBasedTimer>;
 
 export const OnPros: Story = {
   args: {
-    onChangingTimer: () => {},
-    onPause: () => {},
-    onReset: () => {},
-    onStart: () => {},
-    goToOtherItem: (isPrev: boolean) => {
-      console.log(isPrev);
-    },
-    timer: 150,
-    isTimerChangeable: false,
-    isRunning: false,
-    item: {
-      stance: 'PROS',
-      speechType: '입론1',
-      boxType: 'TIME_BASED',
-      time: null,
-      timePerTeam: 10,
-      timePerSpeaking: 10,
-      speaker: '나',
+    timeBasedTimerInstance: {
+      ...mockTimerInstance,
     },
+    isSelected: true,
+    onActivate: () => {},
+    prosCons: 'PROS',
+    teamName: '찬성팀',
+    item: TIME_BASED_TIMEBOX_SAMPLE,
   },
 };
 
 export const OnCons: Story = {
   args: {
-    onChangingTimer: () => {},
-    onPause: () => {},
-    onReset: () => {},
-    onStart: () => {},
-    goToOtherItem: (isPrev: boolean) => {
-      console.log(isPrev);
-    },
-    timer: 150,
-    isTimerChangeable: false,
-    isRunning: false,
-    item: {
-      stance: 'CONS',
-      speechType: '입론1',
-      boxType: 'TIME_BASED',
-      time: null,
-      timePerTeam: 10,
-      timePerSpeaking: 10,
-      speaker: '나',
+    timeBasedTimerInstance: {
+      ...mockTimerInstance,
     },
+    isSelected: true,
+    onActivate: () => {},
+    prosCons: 'CONS',
+    teamName: '반대팀',
+    item: TIME_BASED_TIMEBOX_SAMPLE,
   },
 };
 
 export const OnRunning: Story = {
   args: {
-    onChangingTimer: () => {},
-    onPause: () => {},
-    onReset: () => {},
-    onStart: () => {},
-    goToOtherItem: (isPrev: boolean) => {
-      console.log(isPrev);
-    },
-    timer: 150,
-    isTimerChangeable: false,
-    isRunning: true,
-    item: {
-      stance: 'PROS',
-      speechType: '입론1',
-      boxType: 'TIME_BASED',
-      time: null,
-      timePerTeam: 10,
-      timePerSpeaking: 10,
-      speaker: '나',
+    timeBasedTimerInstance: {
+      ...mockTimerInstance,
+      isRunning: true,
     },
+    isSelected: true,
+    onActivate: () => {},
+    prosCons: 'PROS',
+    teamName: '찬성팀',
+    item: TIME_BASED_TIMEBOX_SAMPLE,
   },
 };
 
-export const WhenOnlyTeamPerTime: Story = {
+export const WhenOnlyTimePerTeam: Story = {
   args: {
-    onChangingTimer: () => {},
-    onPause: () => {},
-    onReset: () => {},
-    onStart: () => {},
-    goToOtherItem: (isPrev: boolean) => {
-      console.log(isPrev);
+    timeBasedTimerInstance: {
+      ...mockTimerInstance,
+      speakingTimer: null,
     },
-    timer: 150,
-    isTimerChangeable: true,
-    isRunning: false,
-    item: {
-      stance: 'PROS',
-      speechType: '입론1',
-      boxType: 'TIME_BASED',
-      time: null,
-      timePerTeam: 10,
-      timePerSpeaking: null,
-      speaker: '나',
+    isSelected: true,
+    onActivate: () => {},
+    prosCons: 'PROS',
+    teamName: '찬성팀',
+    item: TIME_BASED_TIMEBOX_SAMPLE,
+  },
+};
+
+export const OnDisabled: Story = {
+  args: {
+    timeBasedTimerInstance: {
+      ...mockTimerInstance,
+      speakingTimer: null,
     },
+    isSelected: false,
+    onActivate: () => {},
+    prosCons: 'PROS',
+    teamName: '찬성팀',
+    item: TIME_BASED_TIMEBOX_SAMPLE,
   },
 };
diff --git a/src/page/TimerPage/stories/TimerController.stories.tsx b/src/page/TimerPage/stories/TimerController.stories.tsx
index 07a2e347..58032883 100644
--- a/src/page/TimerPage/stories/TimerController.stories.tsx
+++ b/src/page/TimerPage/stories/TimerController.stories.tsx
@@ -13,33 +13,18 @@ type Story = StoryObj<typeof TimerController>;
 
 export const OnStopped: Story = {
   args: {
-    onChangingTimer: () => {},
     onPause: () => {},
     onReset: () => {},
     onStart: () => {},
-    isTimerChangeable: false,
     isRunning: false,
   },
 };
 
 export const OnRunning: Story = {
   args: {
-    onChangingTimer: () => {},
     onPause: () => {},
     onReset: () => {},
     onStart: () => {},
-    isTimerChangeable: false,
     isRunning: true,
   },
 };
-
-export const WhenAdditionalTimerAvailable: Story = {
-  args: {
-    onChangingTimer: () => {},
-    onPause: () => {},
-    onReset: () => {},
-    onStart: () => {},
-    isTimerChangeable: true,
-    isRunning: false,
-  },
-};
diff --git a/src/routes/routes.tsx b/src/routes/routes.tsx
index 59de4c16..87e3f1dd 100644
--- a/src/routes/routes.tsx
+++ b/src/routes/routes.tsx
@@ -1,7 +1,7 @@
 import { createBrowserRouter } from 'react-router-dom';
 import TableListPage from '../page/TableListPage/TableListPage';
-import TableOverview from '../page/TableOverviewPage/TableOverview';
-import TableComposition from '../page/TableComposition/TableComposition';
+import TableOverviewPage from '../page/TableOverviewPage/TableOverviewPage';
+import TableCompositionPage from '../page/TableComposition/TableCompositionPage';
 import ErrorBoundaryWrapper from '../components/ErrorBoundary/ErrorBoundaryWrapper';
 import ProtectedRoute from './ProtectedRoute';
 import OAuth from '../page/OAuthPage/OAuth';
@@ -9,8 +9,10 @@ import ReactGA from 'react-ga4';
 import NotFoundPage from '../components/ErrorBoundary/NotFoundPage';
 import BackActionHandler from '../components/BackActionHandler';
 import TimerPage from '../page/TimerPage/TimerPage';
+import FeedbackTimerPage from '../page/TimerPage/FeedbackTimerPage';
 import LandingPage from '../page/LandingPage/LandingPage';
 import TableSharingPage from '../page/TableSharingPage/TableSharingPage';
+import DebateEndPage from '../page/DebateEndPage/DebateEndPage';
 
 const routesConfig = [
   {
@@ -25,12 +27,12 @@ const routesConfig = [
   },
   {
     path: '/composition',
-    element: <TableComposition />,
+    element: <TableCompositionPage />,
     requiresAuth: false,
   },
   {
     path: '/overview/:type/:id',
-    element: <TableOverview />,
+    element: <TableOverviewPage />,
     requiresAuth: false,
   },
   {
@@ -38,6 +40,16 @@ const routesConfig = [
     element: <TimerPage />,
     requiresAuth: false,
   },
+  {
+    path: '/table/customize/:id/end',
+    element: <DebateEndPage />,
+    requiresAuth: true,
+  },
+  {
+    path: '/table/customize/:id/end/feedback',
+    element: <FeedbackTimerPage />,
+    requiresAuth: true,
+  },
   {
     path: '/oauth',
     element: <OAuth />,
diff --git a/src/type/type.ts b/src/type/type.ts
index 6b91c185..b47c0f03 100644
--- a/src/type/type.ts
+++ b/src/type/type.ts
@@ -1,6 +1,15 @@
 // Types
 export type Stance = 'PROS' | 'CONS' | 'NEUTRAL';
-export type TimeBoxType = 'NORMAL' | 'TIME_BASED';
+export type TimeBasedStance = Exclude<Stance, 'NEUTRAL'>;
+export type TimeBoxType = 'NORMAL' | 'TIME_BASED' | 'FEEDBACK';
+export type CoinState = 'initial' | 'tossing' | 'front' | 'back';
+
+export type BellType = 'BEFORE_END' | 'AFTER_END' | 'AFTER_START';
+export type BellConfig = {
+  type: BellType;
+  time: number;
+  count: number;
+};
 
 // Type converters
 export const StanceToString: Record<Stance, string> = {
@@ -12,6 +21,13 @@ export const StanceToString: Record<Stance, string> = {
 export const TimeBoxTypeToString: Record<TimeBoxType, string> = {
   NORMAL: '일반 타이머',
   TIME_BASED: '자유토론 타이머',
+  FEEDBACK: '피드백 타이머',
+};
+
+export const BellTypeToString: Record<BellType, string> = {
+  BEFORE_END: '종료 전',
+  AFTER_END: '종료 후',
+  AFTER_START: '시작 후',
 };
 
 // Interfaces
@@ -23,6 +39,7 @@ export interface User {
 export interface TimeBoxInfo {
   stance: Stance;
   speechType: string;
+  bell: BellConfig[] | null;
   boxType: TimeBoxType;
   time: number | null;
   timePerTeam: number | null;
@@ -35,8 +52,6 @@ export interface DebateInfo {
   agenda: string;
   prosTeamName: string;
   consTeamName: string;
-  warningBell: boolean;
-  finishBell: boolean;
 }
 
 export interface DebateTable {
@@ -49,3 +64,25 @@ export interface DebateTableData {
   info: DebateInfo;
   table: TimeBoxInfo[];
 }
+
+// ===== 배경 색상 상태 타입 및 컬러 맵 정의 =====
+export type TimerBGState = 'default' | 'warning' | 'danger' | 'expired';
+export const bgColorMap: Record<TimerBGState, string> = {
+  default: '',
+  warning: 'bg-brand', // 30초~11초 구간
+  danger: 'bg-semantic-warning', // 10초 이하
+  expired: 'bg-default-timeout', // 0초 이하
+};
+
+type Action = {
+  label: string; // 좌측에 표시할 토론 형식 이름 (예: "CEDA 토론")
+  href: string; // 우측 "토론하기" 버튼의 이동 링크
+};
+
+export type DebateTemplate = {
+  title: string; // 제목 (예: "서방정토")
+  subtitle?: string; // 서브 제목 (예: "서강대")
+  logoSrc?: string; // 로고 이미지
+  actions: Action[];
+  className?: string; // 카드의 추가 className이 필요하면 사용
+};
diff --git a/src/util/arrayEncoding.test.ts b/src/util/arrayEncoding.test.ts
index 2af7a9e8..cdb4e985 100644
--- a/src/util/arrayEncoding.test.ts
+++ b/src/util/arrayEncoding.test.ts
@@ -13,8 +13,6 @@ describe('토론 테이블 인코딩 유틸리티', () => {
       agenda: '토론 주제',
       prosTeamName: '찬성',
       consTeamName: '반대',
-      warningBell: true,
-      finishBell: true,
     },
     table: [
       {
@@ -25,6 +23,7 @@ describe('토론 테이블 인코딩 유틸리티', () => {
         timePerTeam: 60,
         timePerSpeaking: 33,
         speaker: null,
+        bell: null,
       },
       {
         stance: 'NEUTRAL',
@@ -34,6 +33,7 @@ describe('토론 테이블 인코딩 유틸리티', () => {
         timePerTeam: 35,
         timePerSpeaking: null,
         speaker: null,
+        bell: null,
       },
       {
         stance: 'PROS',
@@ -43,6 +43,7 @@ describe('토론 테이블 인코딩 유틸리티', () => {
         timePerTeam: null,
         timePerSpeaking: null,
         speaker: '발언자 1',
+        bell: null,
       },
       {
         stance: 'PROS',
@@ -52,6 +53,7 @@ describe('토론 테이블 인코딩 유틸리티', () => {
         timePerTeam: null,
         timePerSpeaking: null,
         speaker: '발언자 1',
+        bell: null,
       },
       {
         stance: 'NEUTRAL',
@@ -61,6 +63,7 @@ describe('토론 테이블 인코딩 유틸리티', () => {
         timePerTeam: null,
         timePerSpeaking: null,
         speaker: null,
+        bell: null,
       },
       {
         stance: 'CONS',
@@ -70,6 +73,7 @@ describe('토론 테이블 인코딩 유틸리티', () => {
         timePerTeam: null,
         timePerSpeaking: null,
         speaker: '발언자 2',
+        bell: null,
       },
       {
         stance: 'PROS',
@@ -79,6 +83,7 @@ describe('토론 테이블 인코딩 유틸리티', () => {
         timePerTeam: null,
         timePerSpeaking: null,
         speaker: '발언자 2',
+        bell: null,
       },
     ],
   };
diff --git a/src/util/delay.ts b/src/util/delay.ts
new file mode 100644
index 00000000..c896eb15
--- /dev/null
+++ b/src/util/delay.ts
@@ -0,0 +1,3 @@
+export default function delay(ms: number) {
+  return new Promise((res) => setTimeout(res, ms));
+}
diff --git a/src/util/formatting.ts b/src/util/formatting.ts
index 002c9391..075731f6 100644
--- a/src/util/formatting.ts
+++ b/src/util/formatting.ts
@@ -1,7 +1,8 @@
 export const Formatting = {
   formatSecondsToMinutes: (time: number) => {
-    const minutes = Math.floor(time / 60);
-    const seconds = time % 60;
+    const positiveTime = time >= 0 ? time : -time;
+    const minutes = Math.floor(positiveTime / 60);
+    const seconds = positiveTime % 60;
     return { minutes, seconds };
   },
   // Function that set all number to be have 2 digits (if time is 3, it will return 03)
diff --git a/tailwind.config.js b/tailwind.config.js
index 72016096..a32beb13 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -55,48 +55,51 @@ export default {
           'sans-serif',
         ],
       },
+      fontSize: {
+        'display-raw': ['72px'],
+        'title-raw': ['28px'],
+        'subtitle-raw': ['24px'],
+        'detail-raw': ['20px'],
+        'body-raw': ['16px'],
+        'timer-raw': ['110px'],
+      },
       boxShadow: {
         'camp-blue': `0 0 30px #FF3B2F`,
         'camp-red': `0 0 30px #007AFF`,
         'camp-neutral': `0 0 30px #737373`,
       },
       colors: {
-        brand: {
-          main: '#FECD4C',
-          main501: '#FFF2B3',
-          main502: '#FFD866',
-          main504: '#E6B843',
-          main505: '#C4A64C',
-
-          sub1: '#FF5622',
-          sub2: '#028391',
-          sub3: '#FF8B87',
-        },
-        neutral: {
-          1000: '#000000',
-          0: '#FFFFFF',
+        camp: {
+          red: '#E14666',
+          blue: '#1E91D6',
         },
-        system: {
-          warning: '#FFBF40',
-          success: '#4BD964',
-          danger: '#FF3F2F',
-          error: '#FF8B87',
+        brand: {
+          DEFAULT: '#FECD4C',
+          hover: '#DBA822',
         },
-        camp: {
-          red: '#F64740',
-          blue: '#2B74E1',
+        default: {
+          'disabled/hover': '#D6D7D9',
+          neutral: '#A3A3A3',
+          dim: '#222222',
+          dim2: '#F2F2F2',
+          border: '#79747E',
+          timeout: '#4F4F4F',
+          white: '#FFFFFF',
+          black: '#222222',
+          black2: '#404040',
         },
-        background: {
-          default: '#F6F5F4',
-          secondary: '#FFF3DD',
-          dark: '#E8E8E8',
+        semantic: {
+          warning: '#FF8B87',
+          error: '#D70000',
+          table: '#FF5622',
+          material: '#6750A4',
         },
       },
     },
     screens: {
       md: '768px',
       lg: '1280px',
-      xl: '1450px',
+      xl: { raw: '(min-width: 1600px) and (min-height: 1024px)' },
     },
   },
 };
diff --git a/vite.config.ts b/vite.config.ts
index 71ce1c1b..ce11360d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -16,6 +16,7 @@ const viteConfig = defineViteConfig(({ mode }) => {
           ws: true,
         },
       },
+      port: 3000,
     },
   };
 });