diff --git a/.claude/skills/create/SKILL.md b/.claude/skills/create/SKILL.md
new file mode 100644
index 00000000..297af730
--- /dev/null
+++ b/.claude/skills/create/SKILL.md
@@ -0,0 +1,116 @@
+---
+name: create
+description: 스펙 문서를 읽고 지정한 경로에 코드를 생성한다. FSD 레이어 책임 범위, conventions, code-quality 4원칙을 준수하며 테스트까지 작성한다.
+arguments: [path, spec]
+---
+
+# create
+
+스펙 문서와 대상 경로를 바탕으로 코드를 생성하고, 테스트까지 작성한다.
+
+**참조 문서:**
+
+- @docs/architecture.md — FSD 레이어별 책임 범위 및 의존성 방향
+- @docs/conventions.md — 파일 네이밍 및 코드 컨벤션
+- @docs/code-quality.md — 코드 품질 기준 (가독성 / 예측 가능성 / 응집도 / 결합도)
+- @docs/testing-guide.md — 테스트 도구 선택 기준
+
+---
+
+## 실행 절차
+
+### 1단계 — 스펙 파악
+
+`$spec` 경로의 문서를 읽고 다음을 파악한다.
+
+- 구현해야 할 기능과 동작 조건
+- 필요한 props / 인터페이스 / 상태
+- 예외 처리 및 에러 케이스
+- 스펙에 명시되지 않은 부분은 architecture.md와 conventions.md를 기준으로 합리적으로 판단하고, 가정한 내용을 결과 보고에 명시한다.
+
+### 2단계 — FSD 레이어 판단
+
+`$path`에서 레이어를 확인하고 `docs/architecture.md` 기준으로 책임 범위를 파악한다.
+
+- 생성할 코드가 해당 레이어의 책임에 맞는가?
+- 의존성 방향이 올바른가? (상위 레이어 → 하위 레이어만 허용)
+- 이미 존재하는 인접 파일이 있으면 함께 읽어 패턴을 맞춘다.
+
+### 3단계 — 코드 생성
+
+`docs/conventions.md`의 네이밍 규칙과 `docs/code-quality.md`의 4원칙을 준수하며 코드를 작성한다.
+
+**가독성:**
+
+- 동시에 실행되지 않는 분기는 컴포넌트/함수로 분리한다.
+- 구현 세부사항은 적절히 추상화한다.
+- 복잡한 조건과 매직 넘버에는 이름을 붙인다.
+- 중첩 삼항 연산자 대신 if 문을 사용한다.
+- 비교 연산은 왼쪽에서 오른쪽으로 읽히도록 작성한다. (`minPrice <= price && price <= maxPrice`)
+
+**예측 가능성:**
+
+- 같은 유형의 함수는 반환 타입을 통일한다. (API 훅은 Query 객체, validation 함수는 `{ ok, reason }`)
+- 함수 이름·파라미터·반환값으로 예측할 수 없는 로직은 함수 밖으로 분리한다.
+- 기존 코드베이스의 이름과 충돌하지 않도록 명확한 이름을 사용한다.
+
+**응집도:**
+
+- 함께 수정될 파일은 같은 디렉터리에 둔다.
+- 매직 넘버는 상수로 선언해 변경 지점을 하나로 모은다.
+- 폼 검증은 필드 레벨/폼 레벨 중 스펙에 맞는 방식을 선택한다.
+
+**결합도:**
+
+- 하나의 함수/훅이 하나의 책임만 가지도록 설계한다.
+- Props Drilling이 발생하면 Composition 패턴으로 해소한다.
+- 공통 추출보다 중복 허용이 나은 경우를 판단한다. (페이지마다 동작이 달라질 가능성이 있으면 중복 허용)
+
+### 4단계 — 테스트 작성
+
+`docs/testing-guide.md`의 레이어별 기준에 따라 테스트를 작성한다.
+
+**테스트 작성 판단 기준:**
+
+- 버그가 생기면 치명적인가?
+- 이 코드가 바뀔 가능성이 높은가?
+- 로직이 복잡한가?
+
+→ 하나라도 해당되면 Jest + RTL 테스트를 작성한다.
+
+**레이어별 테스트 도구:**
+
+| 경로 패턴                             | Jest + RTL            | Storybook Chromatic | Storybook play() |
+| ------------------------------------- | --------------------- | ------------------- | ---------------- |
+| `shared/lib`, `shared/utils`          | 반드시                | —                   | —                |
+| `shared/hooks`, `shared/store`        | 반드시 (`renderHook`) | —                   | —                |
+| `shared/ui`                           | 내부 로직이 있을 때만 | 항상                | 검토             |
+| `entities/model`, `entities/api`      | 반드시                | —                   | —                |
+| `entities/ui`                         | 검토                  | 항상                | 항상             |
+| `entities/query`                      | **작성 금지**         | —                   | —                |
+| `features/ui`                         | 반드시                | 검토                | 검토             |
+| `features/mutation`, `features/hooks` | 반드시 (MSW 모킹)     | —                   | —                |
+| `widgets/`                            | 핵심 인터랙션만       | 검토                | 검토             |
+
+### 5단계 — 검증
+
+```bash
+# 타입 체크
+pnpm tsc --noEmit
+
+# lint
+pnpm lint {생성한 파일 경로}
+
+# 테스트 실행
+pnpm test -- {생성한 테스트 파일 경로}
+```
+
+실패하면 에러를 읽고 수정한다. 모든 항목이 통과할 때까지 반복한다.
+
+### 6단계 — 결과 보고
+
+- 생성한 파일 목록
+- 파일별 역할 요약
+- 스펙에 명시되지 않아 가정한 내용
+- 원칙 간 트레이드오프가 있었던 경우 판단 이유
+- Storybook / Chromatic이 추가로 필요하다 판단되면 언급
diff --git a/.claude/skills/document-feature/SKILL.md b/.claude/skills/document-feature/SKILL.md
new file mode 100644
index 00000000..8024e03c
--- /dev/null
+++ b/.claude/skills/document-feature/SKILL.md
@@ -0,0 +1,115 @@
+---
+name: document-feature
+description: 지정한 기능의 코드를 추적해 docs/features/{name}.md 스펙 문서를 생성한다. 이 문서는 이후 변경 요청의 기준점으로 사용된다.
+arguments: [feature-name, entry-path]
+---
+
+# document-feature
+
+기능 코드를 추적해 스펙 문서를 생성한다.  
+생성된 문서는 **스펙을 먼저 수정 → Claude에게 구현 요청** 워크플로의 기준점이 된다.
+
+---
+
+## 실행 절차
+
+### 1단계 — 진입점 파악
+
+`$entry-path`에서 시작해 이 기능이 어디서 호출되는지 찾는다.
+
+- 버튼 컴포넌트, 메뉴 항목, 페이지 마운트 등 사용자 행동과 연결된 모든 진입점을 찾는다.
+- `grep`으로 기능 핵심 훅/컴포넌트 이름을 역추적해 누락된 진입점이 없는지 확인한다.
+
+### 2단계 — 데이터 흐름 추적
+
+진입점에서 시작해 다음 순서로 관련 파일을 모두 읽는다.
+
+1. **훅** (`features/{domain}/hooks/`) — 모달/페이지 open 로직, 사전 데이터 조회
+2. **폼 훅** (`features/{domain}/hooks/use*Form.ts`) — 폼 상태, 유효성 검사, submit 핸들러
+3. **mutation 훅** (`features/{domain}/mutation/`) — API 호출, 캐시 무효화, 토스트
+4. **UI** (`features/{domain}/ui/`) — 폼 레이아웃, 필드 구성, 서브 컴포넌트
+5. **entity API** (`entities/{domain}/api/`) — 실제 HTTP 호출 함수
+6. **entity 타입** (`entities/{domain}/types/`) — Request / Response 타입
+7. **mock 핸들러** (`features/{domain}/mock/` 또는 `shared/mock/`) — API 스펙 보조 확인
+
+파일을 읽으며 다음을 기록한다.
+
+- 폼 필드 목록과 각 필드의 타입·필수 여부·제약
+- 유효성 검사 규칙과 처리 방식
+- 모달/페이지에 사전 주입되는 데이터와 그 출처
+- API endpoint, request body, response 타입, 캐시 무효화 키
+- 개인/팀 목표처럼 조건에 따라 동작이 달라지는 분기
+
+### 3단계 — 문서 생성
+
+`docs/features/$feature-name.md`를 아래 구조로 작성한다.  
+해당 기능에 없는 섹션(예: 폼이 없는 경우 "폼 필드 스펙")은 생략한다.
+
+```markdown
+# {기능명}
+
+---
+
+## 진입점
+
+| 위치 | 파일 | 조건 |
+| ... | ... | ... |
+
+진입점이 공통으로 호출하는 함수/훅을 한 줄로 서술한다.
+
+---
+
+## 폼 필드 스펙 ← 폼이 있을 때만
+
+| 필드 | 타입 | 필수 | 제약 | 비고 |
+| ... | ... | ... | ... | ... |
+
+조건에 따라 동작이 달라지는 필드(예: 개인/팀 목표)는 별도 표로 설명한다.
+
+---
+
+## 유효성 검사 ← 검사 규칙이 있을 때만
+
+| 검사 | 시점 | 처리 |
+| ... | ... | ... |
+
+---
+
+## 데이터 흐름
+
+텍스트 다이어그램으로 진입점 → 훅 → mutation → API → 후처리 순서를 표현한다.
+각 노드에 실제 파일명과 핵심 동작을 함께 기재한다.
+
+---
+
+## API
+
+엔드포인트, request body 타입(코드 블록), response 타입, 캐시 무효화 키를 기재한다.
+
+---
+
+## 모달/페이지에 사전 주입되는 데이터 ← 데이터 주입이 있을 때만
+
+| prop | 출처 |
+| ... | ... |
+
+---
+
+## 관련 파일 위치
+
+src/ 트리 형태로 관련 파일 경로와 각 파일의 역할을 한 줄로 기재한다.
+```
+
+**작성 원칙:**
+
+- 표(table)로 표현할 수 있는 정보는 표로 쓴다.
+- 데이터 흐름은 텍스트 다이어그램(`│`, `▼`, `←`)으로 표현한다.
+- 코드 스니펫은 타입 정의처럼 변경 시 반드시 함께 수정해야 하는 것만 포함한다.
+- 파일 위치 섹션은 "어디를 건드려야 하는가"를 빠르게 파악할 수 있게 작성한다.
+- Claude가 이 문서만 읽고 구현 변경을 수행할 수 있을 만큼 구체적으로 쓴다.
+
+### 4단계 — 결과 보고
+
+- 생성한 파일 경로
+- 추적한 파일 목록
+- 문서에 포함하지 못한 불확실한 부분이 있으면 명시
diff --git a/.claude/skills/refactor/SKILL.md b/.claude/skills/refactor/SKILL.md
new file mode 100644
index 00000000..8531b5e4
--- /dev/null
+++ b/.claude/skills/refactor/SKILL.md
@@ -0,0 +1,99 @@
+---
+name: refactor
+description: 지정한 경로의 코드를 docs/code-quality.md의 4원칙(가독성·예측 가능성·응집도·결합도) 기준으로 분석하고 개선한다. FSD 레이어와 conventions도 함께 준수한다.
+arguments: [path]
+---
+
+# refactor
+
+대상 코드를 읽고, 품질 기준에 맞게 개선한 뒤 lint와 테스트로 검증한다.
+
+**참조 문서:**
+
+- @docs/code-quality.md — 리팩터링 판단 기준 (가독성 / 예측 가능성 / 응집도 / 결합도)
+- @docs/architecture.md — FSD 레이어별 책임 범위
+- @docs/conventions.md — 파일 네이밍 및 코드 컨벤션
+
+---
+
+## 실행 절차
+
+### 1단계 — 대상 파일 파악
+
+`$path` 경로 아래의 모든 소스 파일을 읽는다.  
+연관된 파일(import 대상, 같은 레이어의 인접 파일)도 함께 읽어 전체 맥락을 파악한다.
+
+### 2단계 — 문제 분석
+
+`docs/code-quality.md`의 4원칙 기준으로 개선이 필요한 부분을 파악한다.  
+각 문제에 대해 **어떤 원칙을 위반하는지**, **왜 문제인지**를 명시한다.
+
+**가독성 체크리스트:**
+
+- 동시에 실행되지 않는 코드가 한 함수/컴포넌트에 혼재하는가?
+- 구현 세부사항이 불필요하게 노출되어 있는가?
+- 로직 유형(query param, state 등)으로 함수를 묶고 있는가?
+- 복잡한 조건이나 매직 넘버에 이름이 없는가?
+- 중첩 삼항 연산자가 있는가?
+- 코드를 위에서 아래로 읽을 때 눈의 이동이 많은가?
+
+**예측 가능성 체크리스트:**
+
+- 같은 이름을 가진 함수/변수가 다른 동작을 하는가?
+- 유사한 함수의 반환 타입이 일치하지 않는가?
+- 함수 이름·파라미터·반환값으로 예측할 수 없는 숨겨진 로직이 있는가?
+
+**응집도 체크리스트:**
+
+- 함께 수정될 파일이 서로 다른 디렉터리에 흩어져 있는가?
+- 매직 넘버가 하드코딩되어 변경 지점이 여러 곳에 분산되어 있는가?
+- 폼의 검증 로직이 적절한 레벨(필드/폼)에서 관리되고 있는가?
+
+**결합도 체크리스트:**
+
+- 하나의 함수/훅이 지나치게 넓은 책임을 가지고 있는가?
+- 중복을 제거하기 위해 공통 훅/컴포넌트로 묶었지만 페이지마다 동작이 달라질 가능성이 있는가?
+- Props Drilling이 발생하고 있는가?
+
+**FSD/conventions 체크리스트:**
+
+- 레이어 간 의존성 방향이 올바른가? (상위 레이어 → 하위 레이어)
+- 파일명·함수명이 conventions.md를 준수하는가?
+
+### 3단계 — 리팩터링 계획 수립
+
+분석 결과를 바탕으로 수정할 항목을 우선순위와 함께 나열한다.
+
+> 원칙 간 트레이드오프가 있을 때는 현재 코드의 맥락을 고려해 판단하고, 이유를 명시한다.  
+> 예: "응집도를 높이면 가독성이 낮아지지만, 이 값은 반드시 함께 수정되어야 하므로 응집도를 우선한다."
+
+### 4단계 — 리팩터링 실행
+
+계획한 순서대로 코드를 수정한다.
+
+- 한 번에 하나의 원칙씩 수정하고, 각 수정이 다른 원칙을 침해하지 않는지 확인한다.
+- import 경로는 **반드시 현재 실제 경로**를 사용한다. (구 경로 사용 금지)
+- 수정 범위가 넓다면 파일별로 나누어 단계적으로 진행한다.
+
+### 5단계 — 검증
+
+```bash
+# 타입 체크
+pnpm tsc --noEmit
+
+# lint
+pnpm lint {수정한 파일 경로}
+
+# 관련 테스트 실행
+pnpm test -- {관련 테스트 파일 경로}
+```
+
+실패하면 에러를 읽고 수정한다. 모든 항목이 통과할 때까지 반복한다.
+
+### 6단계 — 결과 보고
+
+- 수정한 파일 목록
+- 파일별 적용한 원칙과 변경 내용 요약
+- 트레이드오프가 있었던 경우 판단 이유 명시
+- 이번 리팩터링 범위에서 의도적으로 제외한 항목이 있다면 이유 명시
+- 테스트가 추가로 필요하다 판단되면 언급 (`/write-tests` 실행 제안)
diff --git a/.claude/skills/write-tests/SKILL.md b/.claude/skills/write-tests/SKILL.md
index 90077e12..a0edaf9f 100644
--- a/.claude/skills/write-tests/SKILL.md
+++ b/.claude/skills/write-tests/SKILL.md
@@ -30,20 +30,39 @@ arguments: [path]
 
 경로에서 레이어를 확인하고 `docs/testing-guide.md`의 기준으로 도구를 결정한다.
 
-| 경로 패턴                             | 도구                             |
-| ------------------------------------- | -------------------------------- |
-| `shared/lib`, `shared/utils`          | Jest + RTL (필수)                |
-| `shared/hooks`, `shared/store`        | Jest + RTL (`renderHook`)        |
-| `shared/ui`                           | Jest + RTL + Storybook play 검토 |
-| `entities/model`                      | Jest + RTL                       |
-| `entities/api`                        | Jest + RTL (apiClient 모킹)      |
-| `entities/query`                      | **테스트 작성 금지**             |
-| `features/mutation`, `features/hooks` | Jest + RTL (MSW 모킹)            |
-| `widgets/`                            | Jest + RTL (핵심 인터랙션만)     |
+**도구 선택 전 판단 기준 (Jest + RTL):**
 
-Chromatic은 CI 설정이므로 코드로 작성하지 않는다. 해당 컴포넌트라면 주석으로 언급만 한다.
+다음 중 하나라도 해당되면 Jest + RTL 테스트를 작성한다.
 
-### 3단계 — 테스트 작성
+- 버그가 생기면 치명적인가?
+- 이 코드가 바뀔 가능성이 높은가?
+- 로직이 복잡한가?
+
+**도구 선택 전 판단 기준 (Story 정의):**
+
+다음 중 하나라도 해당되면 Story를 작성한다.
+
+- 다른 UI에서 재사용될 가능성이 있는가?
+- props나 상태 변경에 따른 UI 변화가 있는가?
+
+**레이어별 도구 선택표:**
+
+| 경로 패턴                             | Jest + RTL            | Storybook Chromatic | Storybook play() |
+| ------------------------------------- | --------------------- | ------------------- | ---------------- |
+| `shared/lib`, `shared/utils`          | 반드시                | —                   | —                |
+| `shared/hooks`, `shared/store`        | 반드시 (`renderHook`) | —                   | —                |
+| `shared/ui`                           | 내부 로직이 있을 때만 | 항상                | 검토             |
+| `entities/model`, `entities/api`      | 반드시                | —                   | —                |
+| `entities/ui`                         | 검토                  | 항상                | 항상             |
+| `entities/query`                      | **작성 금지**         | —                   | —                |
+| `features/ui`                         | 반드시                | 검토                | 검토             |
+| `features/mutation`, `features/hooks` | 반드시 (MSW 모킹)     | —                   | —                |
+| `widgets/`                            | 핵심 인터랙션만       | 검토                | 검토             |
+
+> `entities/query` — React Query 훅처럼 외부 라이브러리에 의존하는 레이어는 테스트 작성 금지.  
+> Chromatic은 CI 설정이므로 코드로 작성하지 않는다. 해당 레이어라면 주석으로 언급만 한다.
+
+### 3단계 — Jest + RTL 테스트 작성
 
 **파일 위치:** 소스 파일과 같은 디렉터리에 `{SourceFile}.test.tsx` (또는 `.test.ts`)
 
@@ -83,6 +102,25 @@ const mockUseParams = useParams as jest.MockedFunction<typeof useParams>;
 mockUseParams.mockReturnValue({ teamId: "1" } as ReturnType<typeof useParams>);
 ```
 
+**훅 반환값 mock 시 타입 단언 규칙:**
+
+`UseMutationResult`, `UseQueryResult` 같이 필드 수가 많은 타입은 일부 필드만 제공한 객체를 `as ReturnType<...>` 단일 단언으로 캐스팅하면 TS 에러가 발생한다.
+테스트에 필요한 필드만 제공할 때는 반드시 `as unknown as ReturnType<...>` 이중 단언을 사용한다.
+
+```ts
+// ❌ 단일 단언 — UseMutationResult와 구조가 충분히 겹치지 않아 TS 에러
+mockUseXxxMutation.mockReturnValue({
+  mutate: mockMutate,
+  isPending: false,
+} as ReturnType<typeof useXxxMutation>);
+
+// ✅ 이중 단언 — unknown을 경유해 타입 검사를 우회
+mockUseXxxMutation.mockReturnValue({
+  mutate: mockMutate,
+  isPending: false,
+} as unknown as ReturnType<typeof useXxxMutation>);
+```
+
 **커스텀 훅 테스트 (renderHook) 기본 패턴:**
 
 ```ts
@@ -114,7 +152,78 @@ describe("{컴포넌트 또는 훅 이름}", () => {
 });
 ```
 
-### 4단계 — 실행 및 검증
+### 4단계 — Story 작성
+
+2단계에서 Story 기준에 해당한다고 판단한 컴포넌트에 대해 `{SourceFile}.stories.tsx`를 작성한다.
+
+**파일 위치:** 소스 파일과 같은 디렉터리
+
+**기본 구조:**
+
+```tsx
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { ComponentName } from "./ComponentName";
+
+const meta = {
+  title: "{layer}/{domain}/{ComponentName}",
+  component: ComponentName,
+  tags: ["autodocs"],
+} satisfies Meta<typeof ComponentName>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: { ... } };
+export const AnotherVariant: Story = { args: { ... } };
+```
+
+**Story 케이스 선정 기준:**
+
+- props 값에 따른 시각적 상태 변화 (예: status별 색상, 개수별 레이아웃)
+- 빈 상태 / 경계값 (예: 담당자 0명, 최대 초과)
+- 이미 커버된 케이스는 작성하지 않는다
+
+**복잡한 hook 의존성이 있는 경우:**
+
+React Query가 필요한 컴포넌트는 전역 `preview.tsx`에 `QueryClientProvider` + `Suspense` 데코레이터가 있는지 확인한다.
+없으면 story에 로컬 decorator로 추가한다.
+
+```tsx
+decorators: [
+  (Story) => (
+    <QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
+      <Suspense fallback={null}><Story /></Suspense>
+    </QueryClientProvider>
+  ),
+],
+```
+
+MSW로 API를 인터셉트해야 하는 컴포넌트(`useSuspenseQuery` 내부 호출 포함)는
+`.storybook/preview.tsx`에 `beforeAll`로 worker가 시작되는지 먼저 확인한다.
+없으면 추가한 뒤 story를 작성한다.
+
+```tsx
+// .storybook/preview.tsx
+import { worker } from "@/shared/mock/browser";
+beforeAll: async () => {
+  await worker.start({ onUnhandledRequest: "bypass" });
+},
+```
+
+`useParams`가 필요한 경우 `parameters.nextjs.navigation.segments`로 공급한다.
+
+```tsx
+parameters: {
+  nextjs: {
+    appDirectory: true,
+    navigation: {
+      segments: { goalId: "1" },
+    },
+  },
+},
+```
+
+### 5단계 — 실행 및 검증
 
 작성 후 아래 명령으로 실행한다.
 
@@ -125,9 +234,8 @@ pnpm test -- {작성한 테스트 파일 경로}
 실패하면 에러를 읽고 수정한다. 모든 케이스가 통과할 때까지 반복한다.
 테스트 통과 후, 수정 파일에 대한 lint 에러도 확인한다.
 
-### 5단계 — 결과 보고
+### 6단계 — 결과 보고
 
-- 작성한 파일 목록
+- 작성한 파일 목록 (Jest 테스트 + Story 파일 모두)
 - 파일별 커버한 시나리오 요약
 - 의도적으로 제외한 케이스가 있으면 이유 명시
-- Storybook play가 추가로 필요하다 판단되면 언급
diff --git a/.storybook/main.ts b/.storybook/main.ts
index fe1aecaf..6d67e665 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,6 +1,10 @@
 import type { StorybookConfig } from "@storybook/nextjs-vite";
+import path from "path";
+import { fileURLToPath } from "url";
 import svgr from "vite-plugin-svgr";
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
 const config: StorybookConfig = {
   stories: [
     // 스토리북 파일 경로 설정
@@ -29,6 +33,13 @@ const config: StorybookConfig = {
         include: "**/*.svg",
       }),
     ];
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve?.alias,
+        "@": path.resolve(__dirname, "../src"),
+      },
+    };
     return config;
   },
   staticDirs: ["../public"],
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
deleted file mode 100644
index 8866056a..00000000
--- a/.storybook/preview.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import "@/app/globals.css";
-
-import type { Preview } from "@storybook/nextjs-vite";
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/i,
-      },
-    },
-
-    a11y: {
-      // 'todo' - show a11y violations in the test UI only
-      // 'error' - fail CI on a11y violations
-      // 'off' - skip a11y checks entirely
-      test: "todo",
-    },
-  },
-};
-
-export default preview;
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
new file mode 100644
index 00000000..107c9ce0
--- /dev/null
+++ b/.storybook/preview.tsx
@@ -0,0 +1,43 @@
+import "@/app/globals.css";
+
+import type { Preview } from "@storybook/nextjs-vite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Suspense } from "react";
+
+import { worker } from "@/shared/mock/browser";
+import ToastProvider from "@/shared/providers/ToastProvider";
+
+const preview: Preview = {
+  beforeAll: async () => {
+    await worker.start({ onUnhandledRequest: "bypass" });
+  },
+  decorators: [
+    (Story) => {
+      const queryClient = new QueryClient({
+        defaultOptions: { queries: { retry: false } },
+      });
+      return (
+        <QueryClientProvider client={queryClient}>
+          <ToastProvider>
+            <Suspense fallback={null}>
+              <Story />
+            </Suspense>
+          </ToastProvider>
+        </QueryClientProvider>
+      );
+    },
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    a11y: {
+      test: "todo",
+    },
+  },
+};
+
+export default preview;
diff --git a/.storybook/tsconfig.json b/.storybook/tsconfig.json
new file mode 100644
index 00000000..4110cb8d
--- /dev/null
+++ b/.storybook/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["*.ts", "*.tsx", "../src/app/globals.css", "../src/global.d.ts"]
+}
diff --git a/CLAUDE.md b/CLAUDE.md
index a272f486..5cdeab9f 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -137,5 +137,6 @@ MSW runs in `development` only. Initialized via `initMocks()` in `app/layout.tsx
 
 ## References
 
-- Architecture & layer rules: [@docs/architecture.md](@docs/architecture.md)
-- Naming & code conventions: [@docs/conventions.md](@docs/conventions.md)
+- Architecture & layer rules: @docs/architecture.md
+- Naming & code conventions: @docs/conventions.md
+- Code quality: @docs/code-quality.md
diff --git a/docs/code-quality.md b/docs/code-quality.md
new file mode 100644
index 00000000..8d01d289
--- /dev/null
+++ b/docs/code-quality.md
@@ -0,0 +1,582 @@
+# Frontend Fundamentals — 코드 품질 가이드
+
+> Toss 프론트엔드 챕터가 정리한 "변경하기 쉬운 코드"의 기준.  
+> 좋은 프론트엔드 코드 = **변경하기 쉬운 코드**. 새 요구사항을 구현할 때 수정과 배포가 쉬우면 좋은 코드다.
+
+---
+
+## 핵심 원칙 4가지
+
+| 원칙                             | 한 줄 정의                                                       |
+| -------------------------------- | ---------------------------------------------------------------- |
+| **가독성 (Readability)**         | 한 번에 파악해야 할 맥락이 적고, 위에서 아래로 자연스럽게 읽힌다 |
+| **예측 가능성 (Predictability)** | 이름·파라미터·반환값만 봐도 동작을 예측할 수 있다                |
+| **응집도 (Cohesion)**            | 함께 수정될 코드는 항상 함께 수정된다                            |
+| **결합도 (Coupling)**            | 코드를 수정했을 때 영향 범위가 제한적이다                        |
+
+> ⚠️ 네 가지를 동시에 만족하기는 어렵다. 상황에 따라 무엇을 우선할지 판단해야 한다.  
+> 예를 들어 응집도를 높이려고 추상화하면 가독성이 낮아질 수 있고, 중복을 허용하면 결합도는 낮아지지만 응집도도 낮아진다.
+
+---
+
+## 1. 가독성 (Readability)
+
+코드를 수정하려면 먼저 이해해야 한다. 가독성이 높은 코드는 한 번에 고려할 맥락이 적고, 위에서 아래로 자연스럽게 읽힌다.
+
+### 1-1. 맥락 줄이기
+
+#### A. 함께 실행되지 않는 코드는 분리한다
+
+하나의 함수나 컴포넌트 안에 동시에 실행되지 않는 코드가 섞여 있으면 한눈에 파악하기 어렵다.
+
+```tsx
+// ❌ Before: viewer / 일반 유저 로직이 한 컴포넌트에 혼재
+function SubmitButton() {
+  const isViewer = useRole() === "viewer";
+
+  useEffect(() => {
+    if (isViewer) return;
+    showButtonAnimation();
+  }, [isViewer]);
+
+  return isViewer ? (
+    <TextButton disabled>Submit</TextButton>
+  ) : (
+    <Button type="submit">Submit</Button>
+  );
+}
+
+// ✅ After: 분기를 하나로 모으고 각 컴포넌트는 한 가지 맥락만 담당
+function SubmitButton() {
+  const isViewer = useRole() === "viewer";
+  return isViewer ? <ViewerSubmitButton /> : <AdminSubmitButton />;
+}
+
+function ViewerSubmitButton() {
+  return <TextButton disabled>Submit</TextButton>;
+}
+
+function AdminSubmitButton() {
+  useEffect(() => {
+    showButtonAnimation();
+  }, []);
+  return <Button type="submit">Submit</Button>;
+}
+```
+
+#### B. 구현 세부사항을 추상화한다
+
+불필요한 세부사항이 노출되면 한 번에 파악해야 할 맥락이 늘어난다.
+
+```tsx
+// ❌ Before: 로그인 체크 로직이 LoginStartPage 안에 그대로 노출
+function LoginStartPage() {
+  useCheckLogin({
+    onChecked: (status) => {
+      if (status === "LOGGED_IN") location.href = "/home";
+    },
+  });
+  return <>{/* 로그인 관련 컴포넌트 */}</>;
+}
+
+// ✅ After A — Wrapper 컴포넌트로 분리
+function App() {
+  return (
+    <AuthGuard>
+      <LoginStartPage />
+    </AuthGuard>
+  );
+}
+
+function AuthGuard({ children }) {
+  const status = useCheckLoginStatus();
+  useEffect(() => {
+    if (status === "LOGGED_IN") location.href = "/home";
+  }, [status]);
+  return status !== "LOGGED_IN" ? children : null;
+}
+
+// ✅ After B — HOC로 분리
+export default withAuthGuard(LoginStartPage);
+```
+
+관련 로직과 실행 버튼을 함께 추상화하면 각 컴포넌트의 역할이 명확해진다.
+
+```tsx
+// ❌ Before: FriendInvitation 안에 overlay 열기 로직이 노출
+function FriendInvitation() {
+  const handleClick = async () => {
+    const canInvite = await overlay.openAsync(/* 복잡한 JSX */);
+    if (canInvite) await sendPush();
+  };
+  return <Button onClick={handleClick}>Invite</Button>;
+}
+
+// ✅ After: 초대 관련 로직을 InviteButton으로 추상화
+function FriendInvitation() {
+  return <InviteButton name={data.name} />;
+}
+
+function InviteButton({ name }) {
+  return (
+    <Button
+      onClick={async () => {
+        const canInvite = await overlay.openAsync(/* ... */);
+        if (canInvite) await sendPush();
+      }}
+    >
+      Invite
+    </Button>
+  );
+}
+```
+
+#### C. 로직 유형이 아닌 역할 단위로 함수를 분리한다
+
+"이 페이지의 모든 query param을 관리한다"처럼 로직 유형으로 묶으면 책임이 무한정 커진다.
+
+```tsx
+// ❌ Before: 페이지 전체의 query param을 한 훅에서 관리
+function usePageState() {
+  const [query, setQuery] = useQueryParams({
+    cardId: NumberParam,
+    statementId: NumberParam,
+    dateFrom: DateParam,
+    // ...
+  });
+  // ...
+}
+
+// ✅ After: query param별로 훅을 분리
+function useCardIdQueryParam() {
+  const [cardId, _setCardId] = useQueryParam("cardId", NumberParam);
+  const setCardId = useCallback((cardId: number) => {
+    _setCardId({ cardId }, "replaceIn");
+  }, []);
+  return [cardId ?? undefined, setCardId] as const;
+}
+```
+
+---
+
+### 1-2. 네이밍
+
+#### A. 복잡한 조건에 이름을 붙인다
+
+```tsx
+// ❌ Before
+const result = products.filter((product) =>
+  product.categories.some(
+    (category) =>
+      category.id === targetCategory.id &&
+      product.prices.some((price) => price >= minPrice && price <= maxPrice),
+  ),
+);
+
+// ✅ After
+const matchedProducts = products.filter((product) => {
+  return product.categories.some((category) => {
+    const isSameCategory = category.id === targetCategory.id;
+    const isPriceInRange = product.prices.some(
+      (price) => price >= minPrice && price <= maxPrice,
+    );
+    return isSameCategory && isPriceInRange;
+  });
+});
+```
+
+네이밍이 필요한 상황: 로직이 복잡할 때, 재사용이 필요할 때, 단위 테스트가 필요할 때.  
+네이밍이 불필요한 상황: 로직이 단순할 때(`arr.map(x => x * 2)`), 한 번만 쓰이고 단순할 때.
+
+#### B. 매직 넘버에 이름을 붙인다
+
+```tsx
+// ❌ Before: 300이 왜 필요한지 알 수 없음
+async function onLikeClick() {
+  await postLike(url);
+  await delay(300);
+  await refetchPostLike();
+}
+
+// ✅ After
+const ANIMATION_DELAY_MS = 300;
+
+async function onLikeClick() {
+  await postLike(url);
+  await delay(ANIMATION_DELAY_MS);
+  await refetchPostLike();
+}
+```
+
+---
+
+### 1-3. 위에서 아래로 읽기
+
+#### A. 눈의 이동을 줄인다
+
+여러 파일이나 함수를 오가며 읽어야 할수록 맥락을 유지하기 어렵다.
+
+```tsx
+// ❌ Before: canInvite를 파악하려면 getPolicyByRole → POLICY_SET 순서로 이동해야 함
+function Page() {
+  const user = useUser();
+  const policy = getPolicyByRole(user.role);
+  return (
+    <div>
+      <Button disabled={!policy.canInvite}>Invite</Button>
+      <Button disabled={!policy.canView}>View</Button>
+    </div>
+  );
+}
+function getPolicyByRole(role) {
+  /* ... */
+}
+const POLICY_SET = { admin: ["invite", "view"], viewer: ["view"] };
+
+// ✅ After A: 조건을 직접 노출
+function Page() {
+  const user = useUser();
+  switch (user.role) {
+    case "admin":
+      return (
+        <div>
+          <Button>Invite</Button>
+          <Button>View</Button>
+        </div>
+      );
+    case "viewer":
+      return (
+        <div>
+          <Button disabled>Invite</Button>
+          <Button>View</Button>
+        </div>
+      );
+    default:
+      return null;
+  }
+}
+
+// ✅ After B: 컴포넌트 안에서 한눈에 파악할 수 있는 객체로 관리
+function Page() {
+  const user = useUser();
+  const policy = {
+    admin: { canInvite: true, canView: true },
+    viewer: { canInvite: false, canView: true },
+  }[user.role];
+  return (
+    <div>
+      <Button disabled={!policy.canInvite}>Invite</Button>
+      <Button disabled={!policy.canView}>View</Button>
+    </div>
+  );
+}
+```
+
+#### B. 삼항 연산자를 단순화한다
+
+```tsx
+// ❌ Before: 중첩 삼항 연산자
+const status =
+  ACondition && BCondition
+    ? "BOTH"
+    : ACondition || BCondition
+      ? ACondition
+        ? "A"
+        : "B"
+      : "NONE";
+
+// ✅ After: if 문으로 풀어내기
+const status = (() => {
+  if (ACondition && BCondition) return "BOTH";
+  if (ACondition) return "A";
+  if (BCondition) return "B";
+  return "NONE";
+})();
+```
+
+#### C. 비교 연산은 왼쪽에서 오른쪽으로 읽히도록 작성한다
+
+```tsx
+// ❌ Before: a를 두 번 확인해야 함
+if (a >= b && a <= c) {
+}
+if (score >= 80 && score <= 100) {
+}
+
+// ✅ After: 수학의 부등식처럼 b ≤ a ≤ c 순서로
+if (b <= a && a <= c) {
+}
+if (80 <= score && score <= 100) {
+}
+if (minPrice <= price && price <= maxPrice) {
+}
+```
+
+---
+
+## 2. 예측 가능성 (Predictability)
+
+이름·파라미터·반환값만 보고도 동작을 예측할 수 있어야 한다.
+
+### A. 이름이 겹치지 않도록 관리한다
+
+```tsx
+// ❌ Before: http라는 이름이 라이브러리와 서비스 모듈에 동시 사용
+import { http as httpLibrary } from "@some-library/http";
+export const http = {
+  async get(url: string) {
+    const token = await fetchToken(); // 이름만 봐선 토큰 추가를 알 수 없음
+    return httpLibrary.get(url, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+  },
+};
+
+// ✅ After: 역할을 드러내는 이름으로 구분
+export const httpService = {
+  async getWithAuth(url: string) {
+    const token = await fetchToken();
+    return httpLibrary.get(url, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+  },
+};
+```
+
+### B. 유사한 함수는 반환 타입을 통일한다
+
+```tsx
+// ❌ Before: 같은 API 호출 훅인데 반환 타입이 다름
+function useUser() {
+  return useQuery({ queryKey: ["user"], queryFn: fetchUser }); // Query 객체 반환
+}
+function useServerTime() {
+  return useQuery({ queryKey: ["serverTime"], queryFn: fetchServerTime }).data; // data만 반환
+}
+
+// ✅ After: 모두 Query 객체를 반환
+function useUser() {
+  return useQuery({ queryKey: ["user"], queryFn: fetchUser });
+}
+function useServerTime() {
+  return useQuery({ queryKey: ["serverTime"], queryFn: fetchServerTime });
+}
+```
+
+validation 함수도 마찬가지로 반환 타입을 통일한다.
+
+```tsx
+// ✅ Discriminated Union으로 일관된 반환 타입 정의
+type ValidationResult = { ok: true } | { ok: false; reason: string };
+
+function checkIsNameValid(name: string): ValidationResult {
+  /* ... */
+}
+function checkIsAgeValid(age: number): ValidationResult {
+  /* ... */
+}
+```
+
+### C. 숨겨진 로직을 드러낸다
+
+```tsx
+// ❌ Before: fetchBalance를 호출하면 로깅이 발생하지만 이름에서 알 수 없음
+async function fetchBalance(): Promise<number> {
+  const balance = await http.get<number>("...");
+  logging.log("balance_fetched"); // 숨겨진 사이드 이펙트
+  return balance;
+}
+
+// ✅ After: 함수는 이름이 나타내는 일만 한다
+async function fetchBalance(): Promise<number> {
+  return http.get<number>("...");
+}
+
+// 로깅은 호출부에서 명시적으로
+<Button
+  onClick={async () => {
+    const balance = await fetchBalance();
+    logging.log("balance_fetched");
+    await syncBalance(balance);
+  }}
+>
+  Update Account Balance
+</Button>;
+```
+
+---
+
+## 3. 응집도 (Cohesion)
+
+함께 수정될 코드는 항상 함께 수정되도록 구조화한다.
+
+> **가독성과 응집도는 충돌할 수 있다.** 함께 수정하지 않으면 버그가 생길 위험이 크다면 응집도를 우선하고, 위험이 낮다면 가독성(중복 허용)을 우선한다.
+
+### A. 함께 수정되는 파일은 같은 디렉터리에 둔다
+
+```text
+// ❌ Before: 모듈 유형별로 분리 → 관련 파일이 여기저기 흩어짐
+src/
+  components/
+  hooks/
+  utils/
+  constants/
+
+// ✅ After: 함께 변경되는 파일을 도메인 단위로 묶음
+src/
+  components/    ← 프로젝트 전체에서 사용
+  hooks/
+  domains/
+    Domain1/     ← Domain1에서만 사용하는 코드 모음
+      components/
+      hooks/
+      utils/
+    Domain2/
+      components/
+      hooks/
+```
+
+같은 도메인 내 코드만 서로 참조해야 한다. 다른 도메인의 파일을 import하는 구조라면 경고 신호다.
+
+### B. 매직 넘버를 제거한다 (응집도 관점)
+
+```tsx
+// ❌ Before: 애니메이션 시간이 300으로 하드코딩 — 애니메이션 변경 시 이 코드를 찾아 함께 바꿔야 함을 알기 어려움
+async function onLikeClick() {
+  await postLike(url);
+  await delay(300);
+  await refetchPostLike();
+}
+
+// ✅ After: 상수로 선언해 변경 지점을 하나로 모음
+const ANIMATION_DELAY_MS = 300;
+
+async function onLikeClick() {
+  await postLike(url);
+  await delay(ANIMATION_DELAY_MS);
+  await refetchPostLike();
+}
+```
+
+### C. 폼 응집도를 고려한다
+
+폼 관리는 **필드 레벨 응집도**와 **폼 레벨 응집도** 중 상황에 맞는 방식을 선택한다.
+
+**필드 레벨 응집도** — 각 필드가 독립적으로 검증 로직을 가짐
+
+```tsx
+// react-hook-form의 register 안에 validate를 필드별로 정의
+<input {...register("name", { validate: (v) => v ? "" : "이름을 입력해주세요" })} />
+<input {...register("email", { validate: (v) => isValidEmail(v) ? "" : "올바른 이메일 형식이 아닙니다" })} />
+```
+
+언제 선택: 비동기 검증이 필요하거나 필드를 다른 폼에서 재사용할 때.
+
+**폼 레벨 응집도** — Zod 등 스키마로 전체 폼 검증을 한 곳에서 관리
+
+```tsx
+const schema = z.object({
+  name: z.string().min(1, "이름을 입력해주세요"),
+  email: z.string().min(1).email("올바른 이메일 형식이 아닙니다"),
+});
+useForm({ resolver: zodResolver(schema) });
+```
+
+언제 선택: 필드가 서로 의존하거나, 단일 비즈니스 로직을 구성하는 폼일 때.
+
+---
+
+## 4. 결합도 (Coupling)
+
+코드를 수정했을 때 영향 범위가 넓을수록 수정하기 어렵다.
+
+### A. 책임을 개별로 관리한다
+
+```tsx
+// ❌ Before: "페이지의 모든 query param"을 한 훅이 담당 → 이 훅에 의존하는 컴포넌트가 많아질수록 변경 위험 증가
+function usePageState() {
+  /* cardId, statementId, dateFrom, dateTo, statusList 전부 */
+}
+
+// ✅ After: query param별로 책임을 분리
+function useCardIdQueryParam() {
+  /* cardId만 */
+}
+function useDateRangeQueryParam() {
+  /* dateFrom, dateTo만 */
+}
+```
+
+### B. 중복 코드를 허용한다
+
+공통 훅/컴포넌트로 묶으면 코드는 줄지만, 한쪽 변경이 다른 쪽에 영향을 미칠 위험이 커진다.
+
+```tsx
+// 공통 훅으로 추출 전에 스스로에게 물어본다:
+// - 로깅 값이 페이지마다 달라질 가능성이 있는가?
+// - 화면을 닫는 동작이 일부 페이지에서만 필요한가?
+// - 바텀시트에 보여줄 텍스트/이미지가 달라질 수 있는가?
+// → 하나라도 "예"라면 중복을 허용하는 것이 더 안전하다
+```
+
+중복 코드 허용이 나은 경우: 페이지마다 동작이 달라질 가능성이 있을 때.  
+공통 추출이 나은 경우: 동작이 완전히 동일하고 미래에도 동일할 것이 확실할 때.
+
+### C. Props Drilling을 제거한다
+
+```tsx
+// ❌ Before: recommendedItems, onConfirm이 ItemEditModal → ItemEditBody → ItemEditList로 전달
+function ItemEditModal({ items, recommendedItems, onConfirm, onClose }) {
+  return (
+    <Modal>
+      <ItemEditBody
+        items={items}
+        keyword={keyword}
+        recommendedItems={recommendedItems}
+        onConfirm={onConfirm}
+        onClose={onClose}
+      />
+    </Modal>
+  );
+}
+
+// ✅ After: Composition 패턴으로 중간 컴포넌트 제거
+function ItemEditModal({ items, recommendedItems, onConfirm, onClose }) {
+  const [keyword, setKeyword] = useState("");
+  return (
+    <Modal onClose={onClose}>
+      <Input
+        value={keyword}
+        onChange={(e) => setKeyword(e.target.value)}
+      />
+      <Button onClick={onClose}>Close</Button>
+      <ItemEditList
+        keyword={keyword}
+        items={items}
+        recommendedItems={recommendedItems}
+        onConfirm={onConfirm}
+      />
+    </Modal>
+  );
+}
+```
+
+---
+
+## 판단 흐름 요약
+
+```
+코드를 작성하거나 리뷰할 때 아래 순서로 확인한다.
+
+1. 가독성  — 한 번에 파악해야 할 맥락이 너무 많지 않은가?
+2. 예측 가능성 — 이름·파라미터·반환값만 봐도 동작을 예측할 수 있는가?
+3. 응집도  — 함께 변경될 코드가 흩어져 있지 않은가?
+4. 결합도  — 이 코드를 바꿀 때 영향 범위가 지나치게 넓지 않은가?
+
+네 가지를 동시에 만족하기 어려울 때는 현재 상황에서 어떤 값을
+우선해야 장기적으로 변경이 쉬운지 팀과 함께 판단한다.
+```
+
+---
+
+> 출처: [Frontend Fundamentals](https://frontend-fundamentals.com) — Toss Frontend Chapter
diff --git a/docs/features/features-guide.md b/docs/features/features-guide.md
new file mode 100644
index 00000000..9084029c
--- /dev/null
+++ b/docs/features/features-guide.md
@@ -0,0 +1,244 @@
+# features/ — 레이어 가이드
+
+`features/`는 **사용자 행동(mutation, form submit, 비즈니스 액션)** 을 담당하는 FSD 레이어다.  
+데이터를 조회하는 것은 `entities/`의 역할이고, UI를 조합하는 것은 `widgets/`의 역할이다.  
+`features/`는 그 중간에서 "사용자가 무언가를 했을 때 어떤 일이 일어나는가"를 책임진다.
+
+---
+
+## 현재 슬라이스 목록
+
+| 슬라이스       | 담당 도메인                                |
+| -------------- | ------------------------------------------ |
+| `auth`         | 로그인·로그아웃·회원가입, 인증 상태 스토어 |
+| `goal`         | 목표 생성·수정·삭제·즐겨찾기               |
+| `notification` | SSE 알림 구독                              |
+| `team`         | 팀 생성                                    |
+| `todo`         | 할 일 생성·삭제·상태 변경·상세 보기        |
+| `trash`        | 휴지통 항목 삭제·복구                      |
+| `user`         | 프로필 수정·이미지 업로드·회원 탈퇴        |
+
+---
+
+## 슬라이스 내부 구조
+
+슬라이스마다 필요한 세그먼트만 둔다. 모든 세그먼트가 항상 필요한 것은 아니다.
+
+```
+features/{domain}/
+├── index.ts          — public API (외부에 노출할 것만 명시적으로 export)
+├── mutation/         — useMutation 훅
+├── hooks/            — overlay·form 등 사용자 행동 진입점 훅
+├── ui/               — 이 feature 전용 모달·폼 컴포넌트
+├── store/            — 도메인 UI 상태 (전역 상태가 필요한 경우만)
+├── constants/        — 이 feature 내에서만 쓰는 상수
+├── utils/            — 이 feature 내에서만 쓰는 순수 함수
+└── mock/             — MSW 핸들러 (개발 환경 전용)
+```
+
+---
+
+## 세그먼트별 규칙
+
+### `mutation/`
+
+`useMutation` 훅 하나 = 파일 하나. 파일명은 `use{Action}Mutation.ts`.
+
+```ts
+// features/goal/mutation/useCreatePersonalGoalMutation.ts
+
+type UseCreatePersonalGoalMutationOptions = {
+  onSuccess?: () => void; // UI side effect는 콜백으로 위임
+};
+
+export function useCreatePersonalGoalMutation({
+  onSuccess,
+}: UseCreatePersonalGoalMutationOptions = {}) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ name, dueDate }: CreatePersonalGoalVariables) =>
+      goalApi.createGoal({ name, dueDate, type: "PERSONAL" }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["personal", "goals"] });
+      onSuccess?.(); // 모달 닫기·라우팅 등은 호출 측에서 결정
+    },
+  });
+}
+```
+
+**규칙:**
+
+- `mutationFn`은 반드시 `entities/{domain}/api/`의 함수를 호출한다. 직접 `fetch`/`axios` 금지.
+- `queryClient.invalidateQueries`는 훅 내부 `onSuccess`에서 처리한다.
+- navigation·모달 닫기 등 UI side effect는 `onSuccess` 콜백으로 위임하고 훅 내부에서 처리하지 않는다.
+- 에러 처리가 필요하면 `throwOnError: false` + `onError` 토스트 조합을 사용한다.
+
+**낙관적 업데이트**가 필요한 경우 `onMutate` → `onError(rollback)` → `onSettled(invalidate)` 패턴을 쓴다.
+
+```ts
+// features/todo/mutation/usePatchTodoStatusMutation.ts
+return useMutation({
+  mutationFn: ...,
+  onMutate: async (variables) => {
+    await queryClient.cancelQueries({ queryKey });
+    const previousData = queryClient.getQueryData(queryKey);
+    queryClient.setQueryData(queryKey, /* 낙관적 업데이트 */);
+    return { previousData };  // rollback용으로 context에 저장
+  },
+  onError: (_err, _vars, context) => {
+    queryClient.setQueryData(queryKey, context?.previousData);
+  },
+  onSettled: (_data, _err, variables) => {
+    queryClient.invalidateQueries({ queryKey });  // 성공·실패 무관 최종 동기화
+  },
+});
+```
+
+---
+
+### `hooks/`
+
+overlay(모달)를 열거나 폼 상태를 관리하는 훅. `use{Domain}{Action}Modal.tsx` 또는 `use{Action}Form.ts` 형태.
+
+**모달 훅 패턴 (`useOverlay`):**
+
+```tsx
+// features/todo/hooks/useTodoCreateModal.tsx
+export const useTodoCreateModal = () => {
+  const overlay = useOverlay();
+
+  // 모달에 사전 주입할 데이터를 여기서 조회
+  const {
+    data: { goalName },
+  } = useSuspenseQuery(goalQueryOptions.getSummary(goalId));
+
+  const openTodoCreateModal = () => {
+    overlay.open(
+      "todo-create-modal", // overlay ID — 슬라이스 내 고유 상수로 관리
+      <TodoCreateModal
+        onClose={() => overlay.close()}
+        goalName={goalName}
+        // ...
+      />,
+    );
+  };
+
+  return { openTodoCreateModal, closeTodoCreateModal: () => overlay.close() };
+};
+```
+
+**규칙:**
+
+- 모달에 필요한 데이터 조회는 모달 컴포넌트 안이 아니라 **이 훅 안**에서 처리한다.
+- overlay ID는 훅 파일 상단에 상수로 선언한다 (`const TODO_CREATE_MODAL_ID = "todo-create-modal"`).
+- `onClose`는 항상 props로 전달해 모달 컴포넌트가 닫기 방식에 의존하지 않도록 한다.
+
+**폼 훅 패턴:**
+
+```ts
+// features/todo/hooks/useCreateTodoForm.ts
+export const useCreateTodoForm = ({ goalId, onSuccess, initialAssigneeIds }) => {
+  const { mutate, isPending } = useCreateTodoMutation();
+  const [assigneeIds, setAssigneeIds] = useState(initialAssigneeIds);
+  const [startDate, setStartDate] = useState("");
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // 유효성 검사
+    if (dueDate < startDate) { showToast("error", "..."); return; }
+    mutate({ goalId, todoData: { ... } }, { onSuccess });
+  };
+
+  return { assigneeIds, setAssigneeIds, startDate, handleSubmit, isPending };
+};
+```
+
+---
+
+### `ui/`
+
+이 feature에서만 사용하는 모달·폼 컴포넌트. `widgets/`에서 재사용하지 않는다.
+
+- 컴포넌트는 **props만 받아 렌더링**한다. 데이터 조회나 mutation 호출은 하지 않는다.
+- 폼 상태는 `hooks/` 훅으로 분리하고 컴포넌트에서는 핸들러만 받는다.
+- `index.ts`를 통해 외부에 노출하지 않아도 된다 (훅을 통해 간접 사용되기 때문).
+
+---
+
+### `store/`
+
+도메인 UI 상태가 필요할 때만 만든다. 전역 UI 상태(`overlay` 등)는 `shared/store/`를 사용한다.
+
+현재 프로젝트에서 `features/` 내 store는 `auth/store/auth.store.ts` 하나뿐이며, `persist` + `immer` 미들웨어를 사용한다.
+
+```ts
+// features/auth/store/auth.store.ts
+export const useAuthStore = create<AuthStore>()(
+  persist(
+    immer((set) => ({
+      user: null,
+      setUser: (user) =>
+        set((state) => {
+          state.user = user;
+        }),
+      clearUser: () =>
+        set((state) => {
+          state.user = null;
+        }),
+    })),
+    { name: "taskmate-auth" }, // localStorage 키
+  ),
+);
+```
+
+---
+
+### `mock/`
+
+MSW `http` 핸들러. `shared/mock/` 에서 통합 등록되며, 개발 환경에서만 활성화된다.  
+새 슬라이스에 mock이 필요하면 `{domain}Handlers` 배열을 export하고 `shared/mock/`에 추가한다.
+
+---
+
+## index.ts — Public API
+
+외부 레이어(widgets 등)에서 필요한 것만 명시적으로 노출한다.
+
+```ts
+// features/todo/index.ts
+export type { TodoListSortLabel };
+export { TODO_COLUMN_DEFAULT_SORT_LABEL };
+export { TODO_COLUMN_SORT_LABEL_ORDER };
+export { TODO_LIST_SORT_BY_LABEL };
+export { useTodoCreateModal };
+export { TodoList };
+export { formatDDay };
+```
+
+- `export *` 금지 — 무엇이 노출되는지 명확하게 유지한다.
+- 내부 구현(mutation 훅·모달 컴포넌트 등)은 feature 안에서만 사용하면 노출하지 않아도 된다.
+
+---
+
+## 금지 사항
+
+| 규칙                                                | 이유                                                  |
+| --------------------------------------------------- | ----------------------------------------------------- |
+| `fetch`/`axios` 직접 호출 금지                      | API 함수는 `entities/{domain}/api/`에만 존재해야 한다 |
+| 같은 레이어 cross-slice import 금지                 | `features/todo`가 `features/goal`을 import하는 것 등  |
+| `shared/`에 도메인 개념 추가 금지                   | `shared`는 도메인 무관 원시 단위만 허용한다           |
+| mutation 훅 내부에서 navigation·모달 닫기 처리 금지 | side effect는 `onSuccess` 콜백으로 위임한다           |
+
+---
+
+## 새 슬라이스 추가 순서
+
+1. `entities/{domain}/types/` — Request/Response 타입 정의
+2. `entities/{domain}/api/` — apiClient 기반 API 함수
+3. `entities/{domain}/query/` — queryOptions, queryKey
+4. `features/{domain}/mutation/use{Action}Mutation.ts` — 뮤테이션 훅
+5. `features/{domain}/hooks/use{Action}Modal.tsx` — overlay 훅 (모달이 있을 때)
+6. `features/{domain}/ui/` — 모달·폼 컴포넌트
+7. `features/{domain}/index.ts` — 외부 노출 항목 정리
+8. `features/{domain}/mock/` — MSW 핸들러 (개발 환경 필요 시)
diff --git a/docs/features/todo/createTodo.md b/docs/features/todo/createTodo.md
new file mode 100644
index 00000000..9da44acb
--- /dev/null
+++ b/docs/features/todo/createTodo.md
@@ -0,0 +1,158 @@
+# Create Todo
+
+---
+
+## 진입점
+
+| 위치                   | 파일                                       | 조건            |
+| ---------------------- | ------------------------------------------ | --------------- |
+| Todo 컬럼 하단 버튼    | `features/todo/ui/List/CreateButton.tsx`   | 항상 표시       |
+| Todo 컬럼 빈 상태 버튼 | `widgets/todo/TodoSection/state/Empty.tsx` | 할 일이 없을 때 |
+
+두 진입점 모두 `useTodoCreateModal().openTodoCreateModal()`을 호출한다.
+
+---
+
+## 폼 필드 스펙
+
+| 필드          | 타입     | 필수 | 제약                         | 비고               |
+| ------------- | -------- | ---- | ---------------------------- | ------------------ |
+| `title`       | string   | ✅   | —                            | 할 일 제목         |
+| `startDate`   | string   | ✅   | `YYYY-MM-DD`                 | 시작 날짜          |
+| `dueDate`     | string   | ✅   | `YYYY-MM-DD`, `>= startDate` | 마감 날짜          |
+| `assigneeIds` | number[] | —    | 빈 배열 허용                 | 담당자 userId 목록 |
+| `memo`        | string   | —    | 최대 80자                    | 메모               |
+
+### 담당자 필드 — 개인 목표 vs 팀 목표
+
+| 구분      | 조건 (`isPersonal`)           | 동작                                                    |
+| --------- | ----------------------------- | ------------------------------------------------------- |
+| 개인 목표 | `true` (URL에 `teamId` 없음)  | 로그인 유저로 고정, 수정 불가 (`AssigneeSelect` 미표시) |
+| 팀 목표   | `false` (URL에 `teamId` 있음) | `AssigneeSelect` 드롭다운으로 팀 멤버 중 선택           |
+
+`initialAssigneeIds`:
+
+- 개인 목표: `[myInfo.id]`
+- 팀 목표: `[]`
+
+---
+
+## 유효성 검사
+
+| 검사                                             | 시점    | 처리                                                                                         |
+| ------------------------------------------------ | ------- | -------------------------------------------------------------------------------------------- |
+| 필수 필드 누락 (`title`, `startDate`, `dueDate`) | submit  | HTML `required` — 브라우저 기본 검사                                                         |
+| `dueDate < startDate`                            | submit  | 브라우저 `min={startDate}` 속성으로 1차 차단, `useToast` 에러 토스트로 2차 차단 후 제출 중단 |
+| `memo` 최대 80자                                 | 입력 중 | `<textarea maxLength={80}>`                                                                  |
+
+---
+
+## 데이터 흐름
+
+```
+CreateButton / Empty
+  │
+  ▼
+useTodoCreateModal                    ← useGoalId() — URL params에서 goalId 추출
+  │ useSuspenseQuery                    goalQueryOptions.getSummary(goalId) → goalName
+  │ useQuery (팀 목표일 때만)           teamQueryOptions.summary(teamId) → teamName
+  │ useQuery (개인 목표일 때만)         userQueries.myInfo() → myInfo
+  │ useQuery (팀 목표일 때만)           teamQueryOptions.memberList(teamId) → memberList
+  │
+  ▼
+overlay.open(TODO_CREATE_MODAL_ID, <TodoCreateModal ...props />)
+  │
+  ▼
+TodoCreateModal                       ← useGoalId() — URL params에서 goalId 직접 읽음 (prop 아님)
+  │                                   ← useCreateTodoForm({ goalId, onSuccess: onClose, initialAssigneeIds })
+  │                                       assigneeIds state — 선택된 담당자 ID 목록
+  │                                       startDate state — 마감일 min 동기화용
+  │                                       handleSubmit — 유효성 검사 + createTodo 호출
+  │
+  ▼
+useCreateTodoMutation
+  │ mutationFn                          todoApi.create(goalId, todoData)
+  │                                     POST /api/goals/{goalId}/todos
+  │ onSuccess                           queryClient.invalidateQueries(["todo", goalId, "list"])
+  │                                     성공 토스트
+  │ onError                             에러 토스트
+  │
+  ▼
+onSuccess 콜백 → overlay.close()
+```
+
+---
+
+## API
+
+**`POST /api/goals/{goalId}/todos`**
+
+Request Body (`CreateTodoRequest`):
+
+```ts
+{
+  title: string;         // 필수
+  startDate: string;     // 필수, "YYYY-MM-DD"
+  dueDate: string;       // 필수, "YYYY-MM-DD"
+  assigneeIds: number[]; // 담당자 userId 목록 (빈 배열 허용)
+  memo: string;          // 선택, 최대 80자
+}
+```
+
+Response: `ApiResponse<null>`
+
+**캐시 무효화 키:** `["todo", goalId, "list"]`
+
+---
+
+## 모달에 사전 주입되는 데이터
+
+`useTodoCreateModal`이 `overlay.open()` 시 `TodoCreateModal`에 props로 전달한다.  
+`goalId`는 props로 전달하지 않고, `TodoCreateModal` 내부에서 `useGoalId()`로 직접 읽는다.
+
+| prop                    | 타입     | 출처                                                                   |
+| ----------------------- | -------- | ---------------------------------------------------------------------- |
+| `goalName`              | string   | `goalQueryOptions.getSummary(goalId)`                                  |
+| `teamName`              | string   | `teamQueryOptions.summary(teamId).teamName` (팀) / `"개인"` (개인)     |
+| `memberList`            | Member[] | `teamQueryOptions.memberList(teamId)` (팀) / `[personalMember]` (개인) |
+| `isAssigneeFixed`       | boolean  | `isPersonal` 여부                                                      |
+| `fixedAssigneeNickname` | string?  | `myInfo.nickname` (개인 목표에서만, 없으면 `"나"` 폴백)                |
+| `initialAssigneeIds`    | number[] | `[myInfo.id]` (개인) / `[]` (팀)                                       |
+
+---
+
+## 미완성 항목 (TODO)
+
+> `features/todo/ui/CreateTodoModal/TodoCreateModal.tsx` 참고
+
+- 할 일 생성 실패 시 UI 처리 미구현 (현재 뮤테이션 에러 토스트만 표시)
+- 팀 멤버 리스트 연동 미완성
+
+---
+
+## 관련 파일 위치
+
+```
+src/
+├── features/todo/
+│   ├── index.ts                           — public API (useTodoCreateModal, TodoList 등 외부 노출)
+│   ├── hooks/
+│   │   ├── useTodoCreateModal.tsx         — 모달 open/close, 사전 데이터 조회, overlay 관리
+│   │   └── useCreateTodoForm.ts           — 폼 상태, 유효성 검사, submit 핸들러
+│   ├── mutation/
+│   │   └── useCreateTodoMutation.ts       — API 호출, 캐시 무효화, 토스트
+│   └── ui/
+│       ├── CreateTodoModal/
+│       │   ├── TodoCreateModal.tsx        — 모달 UI (폼 레이아웃)
+│       │   └── AssigneeSelect/
+│       │       └── index.tsx             — 팀 목표 담당자 선택 드롭다운
+│       └── List/
+│           └── CreateButton.tsx          — 할 일 추가 버튼 (컬럼 하단)
+│
+├── entities/todo/
+│   ├── api/todo.api.ts                   — todoApi.create()
+│   └── types/todo.types.ts              — CreateTodoRequest 타입
+│
+└── widgets/todo/TodoSection/
+    └── state/Empty.tsx                   — 빈 상태 진입점
+```
diff --git a/docs/features/todo/deleteTodo.md b/docs/features/todo/deleteTodo.md
new file mode 100644
index 00000000..f7cb9c94
--- /dev/null
+++ b/docs/features/todo/deleteTodo.md
@@ -0,0 +1,85 @@
+# Delete Todo
+
+---
+
+## 진입점
+
+| 위치                  | 파일                             | 조건                              |
+| --------------------- | -------------------------------- | --------------------------------- |
+| Todo 아이템 삭제 버튼 | `features/todo/ui/List/Item.tsx` | 각 아이템 우측 휴지통 아이콘 클릭 |
+
+`useTodoDeleteModal({ todoId: todo.id.toString() }).openTodoDeleteModal()`을 호출한다.
+
+---
+
+## 데이터 흐름
+
+```
+Item.tsx — 휴지통 버튼 클릭 (e.stopPropagation으로 상세 모달 열림 방지)
+  │  todoId: todo.id.toString()
+  ▼
+useTodoDeleteModal({ todoId })    ← useGoalId() — URL params에서 goalId 추출
+  │  useDeleteTodoMutation({ onSuccess: closeTodoDeleteModal })
+  │
+  ▼
+overlay.open(TODO_DELETE_MODAL_ID, <TodoDeleteModal onClose={...} onConfirm={...} />)
+  │
+  ▼  사용자가 "삭제" 버튼 클릭
+onConfirm() → deleteTodo({ goalId, todoId })
+  │
+  ▼
+useDeleteTodoMutation
+  │ mutationFn                    todoApi.delete(goalId, todoId)
+  │                               DELETE /api/goals/{goalId}/todos/{todoId}
+  │ onSuccess                     queryClient.invalidateQueries(["todo", goalId, "list"])
+  │                               성공 토스트 ("할 일 삭제 완료")
+  │                               onSuccess 콜백 → overlay.close()
+  │ onError                       에러 토스트 ("할 일 삭제 실패")
+```
+
+---
+
+## API
+
+**`DELETE /api/goals/{goalId}/todos/{todoId}`**
+
+Request Body: 없음
+
+Response: `ApiResponse<null>`
+
+**캐시 무효화 키:** `["todo", goalId, "list"]`
+
+---
+
+## 모달 구성
+
+확인 모달로, 폼 입력 없이 취소/삭제 버튼만 존재한다.
+
+| 요소      | 내용                                      |
+| --------- | ----------------------------------------- |
+| 제목      | `"할 일을 삭제하시겠습니까?"` (고정 문구) |
+| 취소 버튼 | `onClose` 호출 → 모달 닫기                |
+| 삭제 버튼 | `onConfirm` 호출 → API 호출 후 모달 닫기  |
+
+`goalId`와 `todoId`는 모두 `useTodoDeleteModal` 내부에서 처리하며, `TodoDeleteModal`에는 전달하지 않는다.
+
+---
+
+## 관련 파일 위치
+
+```
+src/
+├── features/todo/
+│   ├── hooks/
+│   │   └── useTodoDeleteModal.tsx       — 모달 open/close, goalId 조회, mutation 연결
+│   ├── mutation/
+│   │   └── useDeleteTodoMutation.ts     — API 호출, 캐시 무효화, 토스트, onSuccess 콜백
+│   └── ui/
+│       ├── TodoDeleteModal/
+│       │   └── TodoDeleteModal.tsx      — 삭제 확인 모달 UI
+│       └── List/
+│           └── Item.tsx                 — 진입점 (휴지통 버튼)
+│
+└── entities/todo/
+    └── api/todo.api.ts                  — todoApi.delete()
+```
diff --git a/docs/features/todo/structure.md b/docs/features/todo/structure.md
new file mode 100644
index 00000000..1bd040a8
--- /dev/null
+++ b/docs/features/todo/structure.md
@@ -0,0 +1,151 @@
+# features/todo — 디렉터리 구조
+
+`src/features/todo`는 할 일(Todo) 도메인의 사용자 행동(생성·삭제·상태 변경·상세 보기)을 담당하는 feature slice다.
+
+---
+
+## 디렉터리 트리
+
+```
+src/features/todo/
+├── index.ts                          — public API (외부 노출 진입점)
+│
+├── constants/
+│   └── todoColumnSort.ts             — 컬럼별 정렬 옵션·기본값 상수
+│
+├── hooks/
+│   ├── useCreateTodoForm.ts          — 할 일 생성 폼 상태 및 submit 핸들러
+│   ├── useTodoCreateModal.tsx        — 생성 모달 open/close 및 사전 데이터 조회
+│   ├── useTodoDeleteModal.tsx        — 삭제 확인 모달 open/close
+│   └── useTodoDetailModal.tsx        — 상세 모달 open/close 및 사전 데이터 조회
+│
+├── mutation/
+│   ├── useCreateTodoMutation.ts      — POST /api/goals/:goalId/todos
+│   ├── useDeleteTodoMutation.ts      — DELETE /api/goals/:goalId/todos/:todoId
+│   └── usePatchTodoStatusMutation.ts — PATCH /api/goals/:goalId/todos/:todoId (낙관적 업데이트)
+│
+├── utils/
+│   └── formatDDay.ts                 — 날짜 → D-day 문자열 변환
+│
+├── mock/
+│   └── todos.ts                      — MSW 핸들러 (개발 환경 전용)
+│
+└── ui/
+    ├── List/
+    │   ├── index.tsx                 — TodoList.List 컨테이너 (정렬 셀렉터 + 스크롤 영역)
+    │   ├── Item.tsx                  — TodoList.Item (상태 뱃지·제목·D-day·담당자·삭제 버튼)
+    │   ├── CreateButton.tsx          — TodoList.CreateButton ("할 일 추가" 버튼)
+    │   ├── TodoAssigneeAvatars.tsx   — 담당자 아바타 오버랩 표시 (최대 4개)
+    │   └── TodoStatusSelect.tsx     — 상태 변경 드롭다운 + 색상 뱃지
+    │
+    ├── CreateTodoModal/
+    │   ├── TodoCreateModal.tsx       — 할 일 생성 폼 모달 UI
+    │   └── AssigneeSelect/
+    │       └── index.tsx             — 팀 목표용 담당자 멀티 셀렉트 드롭다운
+    │
+    ├── TodoDeleteModal/
+    │   └── TodoDeleteModal.tsx       — 삭제 확인 모달 UI (취소/삭제 버튼만)
+    │
+    ├── TodoDetailModal/
+    │   └── TodoDetailModal.tsx       — 할 일 상세 읽기 전용 모달 UI
+    │
+    └── TodoItem/
+        ├── index.tsx                 — TodoItem 복합 객체 (하위 컴포넌트 묶음)
+        ├── Row.tsx                   — 가로 배치 flex 컨테이너
+        ├── Wrapper.tsx               — 라운드 카드 컨테이너
+        ├── Name/Name.tsx             — 제목 텍스트
+        ├── Day/Day.tsx               — D-day 색상 뱃지 (blue·red·gray)
+        ├── Goal/Goal.tsx             — 목표명 텍스트
+        └── Team/Team.tsx             — 팀명 뱃지
+```
+
+---
+
+## index.ts — Public API
+
+외부 레이어(widgets 등)는 `features/todo/index.ts`를 통해서만 import한다.
+
+```ts
+// features/todo/index.ts 노출 목록
+export type { TodoListSortLabel };
+export { TODO_COLUMN_DEFAULT_SORT_LABEL };
+export { TODO_COLUMN_SORT_LABEL_ORDER };
+export { TODO_LIST_SORT_BY_LABEL };
+export { useTodoCreateModal };
+export { TodoList }; // { List, Item, CreateButton }
+export { formatDDay };
+```
+
+> `useTodoDeleteModal`, `useTodoDetailModal`, `usePatchTodoStatusMutation` 등 내부에서만 사용되는 항목은 노출하지 않는다.
+
+---
+
+## 세그먼트별 책임
+
+### `constants/`
+
+정렬 레이블(`"마감일 순"`, `"최신순"`, `"오래된순"`)과 API 값(`DUE_DATE`, `CREATED_LATEST`, `CREATED_OLDEST`) 간 매핑, 그리고 컬럼 상태(`TODO` / `DOING` / `DONE`)별 기본 정렬 및 노출 순서를 관리한다.
+
+### `hooks/`
+
+각 사용자 행동에 진입하는 overlay 열기 로직과 폼 상태를 캡슐화한다.
+
+| 훅                   | 역할                                                             |
+| -------------------- | ---------------------------------------------------------------- |
+| `useCreateTodoForm`  | 폼 상태(담당자·시작일), 날짜 유효성 검사, submit → mutation 연결 |
+| `useTodoCreateModal` | 목표·팀·유저·팀 멤버 사전 조회 후 `TodoCreateModal` overlay open |
+| `useTodoDeleteModal` | goalId 조회 후 `TodoDeleteModal` overlay open, mutation 연결     |
+| `useTodoDetailModal` | 목표·팀 사전 조회 후 `TodoDetailModal` overlay open              |
+
+### `mutation/`
+
+React Query `useMutation` 기반. 캐시 무효화와 토스트는 훅 내부 `onSuccess`/`onError`에서 처리한다.
+
+| 훅                           | 특이사항                                       |
+| ---------------------------- | ---------------------------------------------- |
+| `useCreateTodoMutation`      | 성공 시 `["todo", goalId, "list"]` 무효화      |
+| `useDeleteTodoMutation`      | `onSuccess` 콜백 위임 지원 (모달 닫기용)       |
+| `usePatchTodoStatusMutation` | 낙관적 업데이트 적용, 에러 시 이전 캐시로 롤백 |
+
+### `ui/`
+
+| 디렉터리           | 역할                                                      |
+| ------------------ | --------------------------------------------------------- |
+| `List/`            | 컬럼 컨테이너(리스트·정렬·푸터)와 아이템 행 UI            |
+| `CreateTodoModal/` | 생성 폼 모달 및 담당자 멀티 셀렉트                        |
+| `TodoDeleteModal/` | 삭제 확인 모달                                            |
+| `TodoDetailModal/` | 상세 읽기 전용 모달                                       |
+| `TodoItem/`        | 아이템 내 각 요소(이름·날짜·목표·팀)의 원시 표현 컴포넌트 |
+
+### `utils/`
+
+`formatDDay(dueDate: string): string` — ISO 날짜 문자열을 D-day 표기로 변환한다.
+
+| 입력               | 출력      |
+| ------------------ | --------- |
+| 오늘 이전          | `"D+N"`   |
+| 오늘               | `"D-day"` |
+| 오늘 이후          | `"D-N"`   |
+| 유효하지 않은 형식 | `"D-?"`   |
+
+### `mock/`
+
+MSW `http` 핸들러 모음. 개발 환경에서 실제 백엔드 없이 todo CRUD를 시뮬레이션한다. `shared/mock/`에서 통합 등록되며 프로덕션 빌드에는 포함되지 않는다.
+
+---
+
+## 의존 관계
+
+```
+features/todo
+  ↓ (import)
+entities/todo          — todoApi, todoQueryOptions, Todo 타입
+entities/goal          — goalQueryOptions.getSummary
+entities/team          — teamQueryOptions.summary, teamQueryOptions.memberList
+entities/user          — userQueries.myInfo
+shared/hooks/useOverlay
+shared/hooks/useGoalId
+shared/ui/             — Button, Icon, Modal 등
+```
+
+같은 레이어의 다른 slice(`features/auth` 등)는 import하지 않는다.
diff --git a/docs/testing-guide.md b/docs/testing-guide.md
index 64e356dd..c77550b6 100644
--- a/docs/testing-guide.md
+++ b/docs/testing-guide.md
@@ -31,6 +31,14 @@
 - 시각적으로 올바르게 보이는지
 - 반응형 레이아웃
 
+### 작성 판단 기준
+
+다음 중 하나라도 해당되면 Jest + RTL 테스트를 작성한다.
+
+- 버그가 생기면 치명적인가?
+- 이 코드가 바뀔 가능성이 높은가?
+- 로직이 복잡한가?
+
 ### 예시
 
 ```tsx
@@ -52,42 +60,41 @@ test("이메일 형식이 틀리면 에러 메시지가 표시된다", async ()
 });
 ```
 
-### FSD 기준 작성 대상
+---
 
-```
-shared/lib      → 반드시 (순수 함수, 유틸)
-shared/api      → 반드시 (MSW + RTL)
-entities/model  → 반드시 (상태 로직, 셀렉터)
-features/       → 반드시 (비즈니스 로직 핵심)
-widgets/        → 핵심 인터랙션만
-shared/ui       → 내부 로직이 있을 때만
-pages/          → 통합 테스트로 대체
-```
+## 2. Storybook
 
----
+### Story 정의 기준
 
-## 2. Storybook play()
+다음 중 하나라도 해당되면 Story를 작성한다.
 
-### 무엇인가
+- 다른 UI에서 재사용될 가능성이 있는가?
+- props나 상태 변경에 따른 UI 변화가 있는가?
+
+### Storybook play()
+
+#### 무엇인가
 
 Story 안에 `play` 함수를 작성하면 **브라우저에서 인터랙션을 자동으로 실행**하고 결과를 검증할 수 있다.  
 RTL과 거의 동일한 문법(`within`, `userEvent`, `expect`)을 사용하지만, 실제 브라우저에서 실행된다는 점이 다르다.
 
 `@storybook/addon-vitest` 를 사용하면 `play()` 함수가 Vitest 테스트로도 실행된다. 즉, **Story 하나가 문서이자 테스트**가 된다.
 
-### 왜 쓰는가
+#### 왜 쓰는가
 
 - 별도의 `.test.tsx` 없이 Story의 `play()` 만으로 인터랙션 검증 가능
 - 실행되는 과정을 Storybook UI에서 **눈으로 볼 수 있음**
 - CSS, 레이아웃, 실제 렌더링까지 반영됨 (RTL의 jsdom과 다른 점)
 
-### 무엇을 검증하는가
+#### 무엇을 검증하는가
+
+클릭, 포커스 등 인터랙션 후 UI가 바뀌는가
 
 - 버튼 클릭 후 UI가 바뀌는가
 - 폼 제출 후 에러 메시지가 표시되는가
 - 특정 상태에서 올바른 요소가 보이는가
 
-### 예시
+#### 예시
 
 ```tsx
 // LoginForm.stories.tsx
@@ -116,50 +123,32 @@ export const SubmitWithValidData: Story = {
 };
 ```
 
-### Jest + RTL과의 차이
-
-|                  | Jest + RTL | Storybook play()        |
-| ---------------- | ---------- | ----------------------- |
-| 실행 환경        | jsdom      | 실제 브라우저           |
-| CSS 반영         | 안됨       | 됨                      |
-| 속도             | 빠름       | 느림                    |
-| 시각 확인        | 불가       | 가능                    |
-| 별도 테스트 파일 | 필요       | 불필요 (Story가 테스트) |
-
-### FSD 기준 작성 대상
-
-```
-shared/ui      → 인터랙션이 있는 컴포넌트 (Modal, Dropdown 등)
-entities/ui    → 상태에 따른 UI 변화가 있는 것
-features/      → 폼 제출, 버튼 인터랙션 등
-```
-
----
+### Storybook Chromatic
 
-## 3. Storybook Chromatic
-
-### 무엇인가
+#### 무엇인가
 
 Storybook과 연동하는 **시각적 회귀 테스트(Visual Regression Test) 서비스**다.  
 각 Story의 스크린샷을 찍어 이전 버전과 픽셀 단위로 비교하고, 변경된 부분을 PR 코멘트로 알려준다.
 
-### 왜 쓰는가
+#### 왜 쓰는가
 
 CSS 한 줄을 수정했을 때 의도치 않게 다른 컴포넌트의 스타일이 바뀌는 것을 **배포 전에 감지**하기 위해 쓴다.  
 코드 리뷰만으로는 시각적 변경을 확인하기 어렵기 때문에, Chromatic이 자동으로 diff를 만들어 리뷰어가 로컬 실행 없이 확인할 수 있게 해준다.
 
-### 무엇을 검증하는가
+#### 무엇을 검증하는가
+
+시각적으로 올바르게 렌더링되는가
 
 - 컴포넌트의 시각적 상태가 이전과 동일한가
 - 의도치 않은 스타일 변경이 없는가
 - 반응형 레이아웃이 깨지지 않았는가
 
-### 할 수 없는 것
+#### 할 수 없는 것
 
 - 로직/동작 검증 (스크린샷 비교만 함)
 - 인터랙션 후 상태 검증 (정적 스냅샷)
 
-### 동작 방식
+#### 동작 방식
 
 ```
 PR 생성
@@ -176,7 +165,7 @@ GitHub Actions에서 Chromatic 실행
 리뷰어가 변경 승인 or 거부
 ```
 
-### CI 설정 예시
+#### CI 설정 예시
 
 ```yaml
 # .github/workflows/ci.yml
@@ -187,14 +176,15 @@ GitHub Actions에서 Chromatic 실행
     storybookBuildDir: storybook-static
 ```
 
-### FSD 기준 작성 대상
+### Jest + RTL과의 차이
 
-```
-shared/ui      → 반드시 (디자인 시스템의 핵심)
-entities/ui    → 반드시 (도메인 상태별 시각 검증)
-features/      → 복잡한 UI 상태가 있는 것만
-widgets/       → 레이아웃이 복잡한 것만
-```
+|                  | Jest + RTL | Storybook play()        |
+| ---------------- | ---------- | ----------------------- |
+| 실행 환경        | jsdom      | 실제 브라우저           |
+| CSS 반영         | 안됨       | 됨                      |
+| 속도             | 빠름       | 느림                    |
+| 시각 확인        | 불가       | 가능                    |
+| 별도 테스트 파일 | 필요       | 불필요 (Story가 테스트) |
 
 ---
 
@@ -232,6 +222,45 @@ widgets/       → 레이아웃이 복잡한 것만
 
 ---
 
+## FSD 기준 테스트 작성 대상
+
+### shared
+
+| 레이어                  | Jest + RTL            | Storybook Chromatic | Storybook play() |
+| ----------------------- | --------------------- | ------------------- | ---------------- |
+| `shared/lib`, `utils`   | 반드시                | —                   | —                |
+| `shared/hooks`, `store` | 반드시                | —                   | —                |
+| `shared/ui`             | 내부 로직이 있을 때만 | 항상                | 검토             |
+
+### entities
+
+| 레이어                  | Jest + RTL | Storybook Chromatic | Storybook play() |
+| ----------------------- | ---------- | ------------------- | ---------------- |
+| `entities/model`, `api` | 반드시     | —                   | —                |
+| `entities/ui`           | 검토       | 항상                | 항상             |
+| `entities/query`        | 작성 금지  | —                   | —                |
+
+> `entities/query` — React Query 훅처럼 외부 라이브러리에 의존하는 레이어는 테스트 작성 금지. 라이브러리 자체를 테스트하는 것이 되기 때문.
+
+### features
+
+| 레이어                       | Jest + RTL | Storybook Chromatic | Storybook play() |
+| ---------------------------- | ---------- | ------------------- | ---------------- |
+| `features/ui`                | 반드시     | 검토                | 검토             |
+| `features/mutation`, `hooks` | 반드시     | —                   | —                |
+
+### widgets
+
+| 레이어    | Jest + RTL      | Storybook Chromatic | Storybook play() |
+| --------- | --------------- | ------------------- | ---------------- |
+| `widgets` | 핵심 인터랙션만 | 검토                | 검토             |
+
+### pages
+
+통합 테스트로 대체한다.
+
+---
+
 ## MSW와의 관계
 
 세 도구 모두 MSW 핸들러를 공유한다.
diff --git a/jest.config.ts b/jest.config.ts
index f40fb890..9859108e 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -25,10 +25,10 @@ const config: Config = {
 
   coverageThreshold: {
     global: {
-      branches: 80,
-      functions: 80,
-      lines: 80,
-      statements: 80,
+      branches: 70,
+      functions: 70,
+      lines: 70,
+      statements: 70,
     },
   },
 };
diff --git a/src/features/goal/hooks/useGoalId.ts b/src/features/goal/hooks/useGoalId.ts
index 163a38fc..d7415607 100644
--- a/src/features/goal/hooks/useGoalId.ts
+++ b/src/features/goal/hooks/useGoalId.ts
@@ -1,13 +1 @@
-"use client";
-
-import { useParams } from "next/navigation";
-
-export const useGoalId = () => {
-  const { goalId } = useParams();
-
-  if (!goalId) {
-    throw new Error("Goal ID is required");
-  }
-
-  return String(goalId);
-};
+export { useGoalId } from "@/shared/hooks/useGoalId";
diff --git a/src/features/team/mock/management.ts b/src/features/team/mock/management.ts
index d2154f87..62f81852 100644
--- a/src/features/team/mock/management.ts
+++ b/src/features/team/mock/management.ts
@@ -2,7 +2,6 @@ import { HttpResponse } from "msw";
 
 import { apiMock } from "@/shared/mock/apiMock";
 
-// @TODO: ?
 const now = "2026-04-02T00:00:00Z";
 
 const teamDetail = {
diff --git a/src/features/todo/hooks/useCreateTodoForm.test.ts b/src/features/todo/hooks/useCreateTodoForm.test.ts
new file mode 100644
index 00000000..3ffb442f
--- /dev/null
+++ b/src/features/todo/hooks/useCreateTodoForm.test.ts
@@ -0,0 +1,284 @@
+import { act, renderHook } from "@testing-library/react";
+
+import { useToast } from "@/shared/hooks/useToast";
+
+import { useCreateTodoMutation } from "../mutation/useCreateTodoMutation";
+import { useCreateTodoForm } from "./useCreateTodoForm";
+
+jest.mock("@/shared/hooks/useToast");
+jest.mock("../mutation/useCreateTodoMutation");
+
+const mockUseToast = useToast as jest.MockedFunction<typeof useToast>;
+const mockUseCreateTodoMutation = useCreateTodoMutation as jest.MockedFunction<
+  typeof useCreateTodoMutation
+>;
+
+const makeMockMutate = () => jest.fn();
+
+const defaultParams = {
+  goalId: "1",
+  onSuccess: jest.fn(),
+  initialAssigneeIds: [10],
+};
+
+describe("useCreateTodoForm", () => {
+  let mockToast: jest.Mock;
+  let mockMutate: jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockToast = jest.fn();
+    mockMutate = makeMockMutate();
+
+    mockUseToast.mockReturnValue({
+      toast: mockToast,
+    } as unknown as ReturnType<typeof useToast>);
+
+    mockUseCreateTodoMutation.mockReturnValue({
+      mutate: mockMutate,
+      isPending: false,
+    } as unknown as ReturnType<typeof useCreateTodoMutation>);
+  });
+
+  describe("초기 상태", () => {
+    test("initialAssigneeIds로 assigneeIds를 초기화한다", () => {
+      const { result } = renderHook(() => useCreateTodoForm(defaultParams));
+      expect(result.current.assigneeIds).toEqual([10]);
+    });
+
+    test("initialAssigneeIds가 없으면 빈 배열로 초기화한다", () => {
+      const { result } = renderHook(() =>
+        useCreateTodoForm({ goalId: "1", onSuccess: jest.fn() }),
+      );
+      expect(result.current.assigneeIds).toEqual([]);
+    });
+
+    test("startDate의 초기값은 빈 문자열이다", () => {
+      const { result } = renderHook(() => useCreateTodoForm(defaultParams));
+      expect(result.current.startDate).toBe("");
+    });
+
+    test("isPending은 mutation의 isPending을 그대로 반환한다", () => {
+      mockUseCreateTodoMutation.mockReturnValue({
+        mutate: mockMutate,
+        isPending: true,
+      } as unknown as ReturnType<typeof useCreateTodoMutation>);
+
+      const { result } = renderHook(() => useCreateTodoForm(defaultParams));
+      expect(result.current.isPending).toBe(true);
+    });
+  });
+
+  describe("handleStartDateChange", () => {
+    test("startDate 상태를 업데이트한다", () => {
+      const { result } = renderHook(() => useCreateTodoForm(defaultParams));
+
+      act(() => {
+        result.current.handleStartDateChange({
+          target: { value: "2026-05-01" },
+        } as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(result.current.startDate).toBe("2026-05-01");
+    });
+  });
+
+  describe("setAssigneeIds", () => {
+    test("assigneeIds를 업데이트한다", () => {
+      const { result } = renderHook(() => useCreateTodoForm(defaultParams));
+
+      act(() => {
+        result.current.setAssigneeIds([1, 2, 3]);
+      });
+
+      expect(result.current.assigneeIds).toEqual([1, 2, 3]);
+    });
+  });
+
+  describe("handleSubmit", () => {
+    test("dueDate가 startDate보다 이른 경우 에러 토스트를 표시하고 제출을 중단한다", () => {
+      const { result } = renderHook(() => useCreateTodoForm(defaultParams));
+
+      const formData = new Map<string, string>([
+        ["title", "테스트 할 일"],
+        ["startDate", "2026-05-10"],
+        ["dueDate", "2026-05-01"],
+        ["memo", ""],
+      ]);
+
+      const mockFormData = jest.spyOn(global, "FormData").mockImplementation(
+        () =>
+          ({
+            get: (key: string) => formData.get(key) ?? null,
+          }) as unknown as FormData,
+      );
+
+      const event = {
+        preventDefault: jest.fn(),
+        currentTarget: {},
+      } as unknown as React.FormEvent<HTMLFormElement>;
+
+      act(() => {
+        result.current.handleSubmit(event);
+      });
+
+      expect(mockToast).toHaveBeenCalledWith(
+        expect.objectContaining({
+          variant: "error",
+          title: "날짜 입력 오류",
+        }),
+      );
+      expect(mockMutate).not.toHaveBeenCalled();
+
+      mockFormData.mockRestore();
+    });
+
+    test("dueDate가 startDate와 같은 경우 createTodo를 호출한다", () => {
+      const { result } = renderHook(() => useCreateTodoForm(defaultParams));
+
+      const formData = new Map<string, string>([
+        ["title", "테스트 할 일"],
+        ["startDate", "2026-05-01"],
+        ["dueDate", "2026-05-01"],
+        ["memo", ""],
+      ]);
+
+      const mockFormData = jest.spyOn(global, "FormData").mockImplementation(
+        () =>
+          ({
+            get: (key: string) => formData.get(key) ?? null,
+          }) as unknown as FormData,
+      );
+
+      const event = {
+        preventDefault: jest.fn(),
+        currentTarget: {},
+      } as unknown as React.FormEvent<HTMLFormElement>;
+
+      act(() => {
+        result.current.handleSubmit(event);
+      });
+
+      expect(mockToast).not.toHaveBeenCalled();
+      expect(mockMutate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          goalId: "1",
+          todoData: expect.objectContaining({
+            title: "테스트 할 일",
+            startDate: "2026-05-01",
+            dueDate: "2026-05-01",
+            assigneeIds: [10],
+          }),
+        }),
+        expect.objectContaining({ onSuccess: defaultParams.onSuccess }),
+      );
+
+      mockFormData.mockRestore();
+    });
+
+    test("dueDate가 startDate보다 늦은 경우 createTodo를 호출한다", () => {
+      const { result } = renderHook(() => useCreateTodoForm(defaultParams));
+
+      const formData = new Map<string, string>([
+        ["title", "마감일 테스트"],
+        ["startDate", "2026-05-01"],
+        ["dueDate", "2026-05-31"],
+        ["memo", "메모 내용"],
+      ]);
+
+      const mockFormData = jest.spyOn(global, "FormData").mockImplementation(
+        () =>
+          ({
+            get: (key: string) => formData.get(key) ?? null,
+          }) as unknown as FormData,
+      );
+
+      const event = {
+        preventDefault: jest.fn(),
+        currentTarget: {},
+      } as unknown as React.FormEvent<HTMLFormElement>;
+
+      act(() => {
+        result.current.handleSubmit(event);
+      });
+
+      expect(mockMutate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          goalId: "1",
+          todoData: expect.objectContaining({
+            title: "마감일 테스트",
+            memo: "메모 내용",
+          }),
+        }),
+        expect.anything(),
+      );
+
+      mockFormData.mockRestore();
+    });
+
+    test("startDate 또는 dueDate가 빈 문자열이면 날짜 검사를 건너뛴다", () => {
+      const { result } = renderHook(() => useCreateTodoForm(defaultParams));
+
+      const formData = new Map<string, string>([
+        ["title", "날짜 없는 할 일"],
+        ["startDate", ""],
+        ["dueDate", ""],
+        ["memo", ""],
+      ]);
+
+      const mockFormData = jest.spyOn(global, "FormData").mockImplementation(
+        () =>
+          ({
+            get: (key: string) => formData.get(key) ?? null,
+          }) as unknown as FormData,
+      );
+
+      const event = {
+        preventDefault: jest.fn(),
+        currentTarget: {},
+      } as unknown as React.FormEvent<HTMLFormElement>;
+
+      act(() => {
+        result.current.handleSubmit(event);
+      });
+
+      expect(mockToast).not.toHaveBeenCalled();
+      expect(mockMutate).toHaveBeenCalled();
+
+      mockFormData.mockRestore();
+    });
+
+    test("폼 제출 시 e.preventDefault()를 호출한다", () => {
+      const { result } = renderHook(() => useCreateTodoForm(defaultParams));
+
+      const formData = new Map<string, string>([
+        ["title", "t"],
+        ["startDate", "2026-05-01"],
+        ["dueDate", "2026-05-02"],
+        ["memo", ""],
+      ]);
+
+      const mockFormData = jest.spyOn(global, "FormData").mockImplementation(
+        () =>
+          ({
+            get: (key: string) => formData.get(key) ?? null,
+          }) as unknown as FormData,
+      );
+
+      const preventDefault = jest.fn();
+      const event = {
+        preventDefault,
+        currentTarget: {},
+      } as unknown as React.FormEvent<HTMLFormElement>;
+
+      act(() => {
+        result.current.handleSubmit(event);
+      });
+
+      expect(preventDefault).toHaveBeenCalledTimes(1);
+
+      mockFormData.mockRestore();
+    });
+  });
+});
diff --git a/src/features/todo/hooks/useTodoCreateModal.test.tsx b/src/features/todo/hooks/useTodoCreateModal.test.tsx
new file mode 100644
index 00000000..cbb7187f
--- /dev/null
+++ b/src/features/todo/hooks/useTodoCreateModal.test.tsx
@@ -0,0 +1,392 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook } from "@testing-library/react";
+import { useParams } from "next/navigation";
+
+import { useGoalId } from "@/shared/hooks/useGoalId";
+import { useOverlay } from "@/shared/hooks/useOverlay";
+
+import { useTodoCreateModal } from "./useTodoCreateModal";
+
+jest.mock("next/navigation", () => ({
+  useParams: jest.fn(),
+}));
+jest.mock("@/shared/hooks/useGoalId");
+jest.mock("@/shared/hooks/useOverlay");
+jest.mock("@/entities/goal", () => ({
+  goalQueryOptions: {
+    getSummary: (goalId: string) => ({
+      queryKey: ["goal", goalId, "summary"],
+      queryFn: jest.fn(),
+    }),
+  },
+}));
+jest.mock("@/entities/team", () => ({
+  teamQueryOptions: {
+    summary: (teamId: string) => ({
+      queryKey: ["team", teamId, "summary"],
+      queryFn: jest.fn(),
+    }),
+    memberList: (teamId: string) => ({
+      queryKey: ["team", teamId, "memberList"],
+      queryFn: jest.fn(),
+    }),
+  },
+}));
+jest.mock("@/entities/auth/query/user.queryKey", () => ({
+  userQueries: {
+    all: ["auth"],
+    myInfo: () => ({
+      queryKey: ["auth", "myInfo"],
+      queryFn: jest.fn(),
+    }),
+  },
+}));
+jest.mock("@/features/todo/ui/CreateTodoModal/TodoCreateModal", () => ({
+  TodoCreateModal: () => null,
+}));
+
+const mockUseParams = useParams as jest.MockedFunction<typeof useParams>;
+const mockUseGoalId = useGoalId as jest.MockedFunction<typeof useGoalId>;
+const mockUseOverlay = useOverlay as jest.MockedFunction<typeof useOverlay>;
+
+const myInfoData = {
+  id: 101,
+  email: "user@test.com",
+  nickname: "테스터",
+  profileImageUrl: null,
+  createdAt: "2026-01-01T00:00:00.000Z",
+};
+
+const teamMemberListData = [
+  {
+    id: 1,
+    userId: 201,
+    userEmail: "member@test.com",
+    profileImageUrl: null,
+    userNickname: "팀원",
+    role: "MEMBER" as const,
+    joinedAt: "2026-01-01T00:00:00.000Z",
+  },
+];
+
+const createWrapper = (preloadedData: {
+  goalSummary: object;
+  myInfo?: object;
+  teamSummary?: object;
+  teamMemberList?: object;
+}) => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false, staleTime: Infinity } },
+  });
+
+  queryClient.setQueryData(
+    ["goal", "10", "summary"],
+    preloadedData.goalSummary,
+  );
+  queryClient.setQueryData(["auth", "myInfo"], preloadedData.myInfo ?? null);
+  if (preloadedData.teamSummary) {
+    queryClient.setQueryData(
+      ["team", "2", "summary"],
+      preloadedData.teamSummary,
+    );
+  }
+  if (preloadedData.teamMemberList) {
+    queryClient.setQueryData(
+      ["team", "2", "memberList"],
+      preloadedData.teamMemberList,
+    );
+  }
+
+  function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  }
+
+  return Wrapper;
+};
+
+describe("useTodoCreateModal", () => {
+  let mockOpen: jest.Mock;
+  let mockClose: jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockOpen = jest.fn();
+    mockClose = jest.fn();
+
+    mockUseGoalId.mockReturnValue("10");
+    mockUseOverlay.mockReturnValue({ open: mockOpen, close: mockClose });
+  });
+
+  describe("개인 목표 (teamId 없음)", () => {
+    beforeEach(() => {
+      mockUseParams.mockReturnValue({} as ReturnType<typeof useParams>);
+    });
+
+    test("todo-create-modal ID로 overlay를 연다", () => {
+      const wrapper = createWrapper({
+        goalSummary: { goalName: "개인 목표" },
+        myInfo: myInfoData,
+      });
+
+      const { result } = renderHook(() => useTodoCreateModal(), { wrapper });
+
+      act(() => {
+        result.current.openTodoCreateModal();
+      });
+
+      expect(mockOpen).toHaveBeenCalledWith(
+        "todo-create-modal",
+        expect.anything(),
+      );
+    });
+
+    test("TodoCreateModal에 goalName을 전달한다", () => {
+      const wrapper = createWrapper({
+        goalSummary: { goalName: "개인 목표" },
+        myInfo: myInfoData,
+      });
+
+      const { result } = renderHook(() => useTodoCreateModal(), { wrapper });
+
+      act(() => {
+        result.current.openTodoCreateModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ goalName: string }>,
+      ];
+      expect(element.props.goalName).toBe("개인 목표");
+    });
+
+    test("teamName을 '개인'으로 전달한다", () => {
+      const wrapper = createWrapper({
+        goalSummary: { goalName: "개인 목표" },
+        myInfo: myInfoData,
+      });
+
+      const { result } = renderHook(() => useTodoCreateModal(), { wrapper });
+
+      act(() => {
+        result.current.openTodoCreateModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ teamName: string }>,
+      ];
+      expect(element.props.teamName).toBe("개인");
+    });
+
+    test("isAssigneeFixed를 true로 전달한다", () => {
+      const wrapper = createWrapper({
+        goalSummary: { goalName: "개인 목표" },
+        myInfo: myInfoData,
+      });
+
+      const { result } = renderHook(() => useTodoCreateModal(), { wrapper });
+
+      act(() => {
+        result.current.openTodoCreateModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ isAssigneeFixed: boolean }>,
+      ];
+      expect(element.props.isAssigneeFixed).toBe(true);
+    });
+
+    test("myInfo가 있으면 initialAssigneeIds에 myInfo.id를 넣는다", () => {
+      const wrapper = createWrapper({
+        goalSummary: { goalName: "개인 목표" },
+        myInfo: myInfoData,
+      });
+
+      const { result } = renderHook(() => useTodoCreateModal(), { wrapper });
+
+      act(() => {
+        result.current.openTodoCreateModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ initialAssigneeIds: number[] }>,
+      ];
+      expect(element.props.initialAssigneeIds).toEqual([101]);
+    });
+
+    test("myInfo.nickname을 fixedAssigneeNickname으로 전달한다", () => {
+      const wrapper = createWrapper({
+        goalSummary: { goalName: "개인 목표" },
+        myInfo: myInfoData,
+      });
+
+      const { result } = renderHook(() => useTodoCreateModal(), { wrapper });
+
+      act(() => {
+        result.current.openTodoCreateModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ fixedAssigneeNickname: string }>,
+      ];
+      expect(element.props.fixedAssigneeNickname).toBe("테스터");
+    });
+
+    test("myInfo가 없으면 fixedAssigneeNickname을 '나'로 폴백한다", () => {
+      const wrapper = createWrapper({
+        goalSummary: { goalName: "개인 목표" },
+      });
+
+      const { result } = renderHook(() => useTodoCreateModal(), { wrapper });
+
+      act(() => {
+        result.current.openTodoCreateModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ fixedAssigneeNickname: string }>,
+      ];
+      expect(element.props.fixedAssigneeNickname).toBe("나");
+    });
+  });
+
+  describe("팀 목표 (teamId 있음)", () => {
+    beforeEach(() => {
+      mockUseParams.mockReturnValue({
+        teamId: "2",
+      } as ReturnType<typeof useParams>);
+    });
+
+    test("isAssigneeFixed를 false로 전달한다", () => {
+      const wrapper = createWrapper({
+        goalSummary: { goalName: "팀 목표" },
+        teamSummary: { teamName: "프론트엔드 팀" },
+        teamMemberList: teamMemberListData,
+      });
+
+      const { result } = renderHook(() => useTodoCreateModal(), { wrapper });
+
+      act(() => {
+        result.current.openTodoCreateModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ isAssigneeFixed: boolean }>,
+      ];
+      expect(element.props.isAssigneeFixed).toBe(false);
+    });
+
+    test("팀 이름을 teamName으로 전달한다", () => {
+      const wrapper = createWrapper({
+        goalSummary: { goalName: "팀 목표" },
+        teamSummary: { teamName: "프론트엔드 팀" },
+        teamMemberList: teamMemberListData,
+      });
+
+      const { result } = renderHook(() => useTodoCreateModal(), { wrapper });
+
+      act(() => {
+        result.current.openTodoCreateModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ teamName: string }>,
+      ];
+      expect(element.props.teamName).toBe("프론트엔드 팀");
+    });
+
+    test("initialAssigneeIds를 빈 배열로 전달한다", () => {
+      const wrapper = createWrapper({
+        goalSummary: { goalName: "팀 목표" },
+        teamSummary: { teamName: "프론트엔드 팀" },
+        teamMemberList: teamMemberListData,
+      });
+
+      const { result } = renderHook(() => useTodoCreateModal(), { wrapper });
+
+      act(() => {
+        result.current.openTodoCreateModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ initialAssigneeIds: number[] }>,
+      ];
+      expect(element.props.initialAssigneeIds).toEqual([]);
+    });
+
+    test("팀 멤버 리스트를 memberList로 전달한다", () => {
+      const wrapper = createWrapper({
+        goalSummary: { goalName: "팀 목표" },
+        teamSummary: { teamName: "프론트엔드 팀" },
+        teamMemberList: teamMemberListData,
+      });
+
+      const { result } = renderHook(() => useTodoCreateModal(), { wrapper });
+
+      act(() => {
+        result.current.openTodoCreateModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ memberList: typeof teamMemberListData }>,
+      ];
+      expect(element.props.memberList).toEqual(teamMemberListData);
+    });
+  });
+
+  describe("closeTodoCreateModal", () => {
+    test("overlay.close를 호출한다", () => {
+      const wrapper = createWrapper({
+        goalSummary: { goalName: "개인 목표" },
+        myInfo: myInfoData,
+      });
+      mockUseParams.mockReturnValue({} as ReturnType<typeof useParams>);
+
+      const { result } = renderHook(() => useTodoCreateModal(), { wrapper });
+
+      act(() => {
+        result.current.closeTodoCreateModal();
+      });
+
+      expect(mockClose).toHaveBeenCalled();
+    });
+  });
+
+  describe("모달의 onClose prop", () => {
+    test("onClose 호출 시 overlay.close를 실행한다", () => {
+      const wrapper = createWrapper({
+        goalSummary: { goalName: "개인 목표" },
+        myInfo: myInfoData,
+      });
+      mockUseParams.mockReturnValue({} as ReturnType<typeof useParams>);
+
+      const { result } = renderHook(() => useTodoCreateModal(), { wrapper });
+
+      act(() => {
+        result.current.openTodoCreateModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ onClose: () => void }>,
+      ];
+
+      act(() => {
+        element.props.onClose();
+      });
+
+      expect(mockClose).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/features/todo/hooks/useTodoCreateModal.tsx b/src/features/todo/hooks/useTodoCreateModal.tsx
index 10538587..8eb2c0e3 100644
--- a/src/features/todo/hooks/useTodoCreateModal.tsx
+++ b/src/features/todo/hooks/useTodoCreateModal.tsx
@@ -7,197 +7,12 @@ import { userQueries } from "@/entities/auth/query/user.queryKey";
 import { goalQueryOptions } from "@/entities/goal";
 import type { Member } from "@/entities/team";
 import { teamQueryOptions } from "@/entities/team";
-import { useGoalId } from "@/features/goal/hooks/useGoalId";
-import { AssigneeSelect } from "@/features/todo/ui/AssigneeSelect";
+import { TodoCreateModal } from "@/features/todo/ui/CreateTodoModal/TodoCreateModal";
+import { useGoalId } from "@/shared/hooks/useGoalId";
 import { useOverlay } from "@/shared/hooks/useOverlay";
-import Button from "@/shared/ui/Button/Button/Button";
-import Input from "@/shared/ui/Input";
-import { Modal } from "@/shared/ui/Modal";
-import { Spacing } from "@/shared/ui/Spacing";
-
-import { useCreateTodoForm } from "./useCreateTodoForm";
 
 const TODO_CREATE_MODAL_ID = "todo-create-modal";
 
-// @TODO: 할일 생성 실패 시, 처리 빠짐
-// @TODO: 멤버 리스트 가져와서 처리하기 ( 효진님 작업 이후 )
-const TodoCreateModal = ({
-  onClose,
-  goalName,
-  teamName,
-  memberList,
-  isAssigneeFixed,
-  fixedAssigneeNickname,
-  initialAssigneeIds,
-}: {
-  onClose: () => void;
-  goalName: string;
-  teamName: string;
-  memberList: Member[];
-  isAssigneeFixed: boolean;
-  fixedAssigneeNickname?: string;
-  initialAssigneeIds: number[];
-}) => {
-  const goalId = useGoalId();
-
-  const {
-    assigneeIds,
-    setAssigneeIds,
-    startDate,
-    handleStartDateChange,
-    handleSubmit,
-    isPending,
-  } = useCreateTodoForm({
-    goalId,
-    onSuccess: onClose,
-    initialAssigneeIds,
-  });
-
-  return (
-    <Modal.Root onClose={onClose}>
-      <Modal.Backdrop />
-      <form
-        onSubmit={handleSubmit}
-        className="relative z-10 flex max-h-[90vh] w-full max-w-[488px] flex-col items-start overflow-y-scroll rounded-2xl bg-white p-8 shadow-xl"
-      >
-        <div className="flex w-fit items-center justify-start gap-[6px]">
-          <h2 className="typography-heading-2 font-semibold">{goalName}</h2>
-          <span className="typography-label-2 rounded-lg bg-gray-100 px-[10px] py-1 font-semibold text-gray-400">
-            {teamName}
-          </span>
-        </div>
-
-        <Spacing size={32} />
-
-        <div className="flex w-full flex-col gap-6">
-          <div className="flex w-full flex-col items-start gap-1">
-            <label className="typography-body-2 text-label-neutral font-semibold">
-              목표
-            </label>
-            <div className="w-full">
-              <Input
-                variant="disabled"
-                type="text"
-                name="goal"
-                className="w-full"
-                value={goalName}
-                disabled
-              />
-            </div>
-          </div>
-
-          <div className="flex w-full flex-col items-start gap-1">
-            <label className="typography-body-2 text-label-neutral font-semibold">
-              제목 <span className="typography-body-2 text-red-normal">*</span>
-            </label>
-            <div className="w-full">
-              <Input
-                type="text"
-                name="title"
-                className="w-full"
-                placeholder="할 일 제목을 입력해주세요"
-                required
-              />
-            </div>
-          </div>
-
-          <div className="flex w-full flex-col items-start gap-1">
-            <label className="typography-body-2 text-label-neutral font-semibold">
-              시작 날짜
-              <span className="typography-body-2 text-red-normal">*</span>
-            </label>
-            <div className="w-full">
-              <Input
-                type="date"
-                name="startDate"
-                className="w-full"
-                placeholder="시작 날짜를 선택해주세요"
-                value={startDate}
-                onChange={handleStartDateChange}
-                required
-              />
-            </div>
-          </div>
-
-          <div className="flex w-full flex-col items-start gap-1">
-            <label className="typography-body-2 text-label-neutral font-semibold">
-              마감 날짜
-              <span className="typography-body-2 text-red-normal">*</span>
-            </label>
-            <div className="w-full">
-              <Input
-                type="date"
-                name="dueDate"
-                className="w-full"
-                placeholder="마감 날짜를 선택해주세요"
-                min={startDate}
-                required
-              />
-            </div>
-          </div>
-
-          <div className="flex w-full flex-col items-start gap-1">
-            <label className="typography-body-2 text-label-neutral font-semibold">
-              담당자
-            </label>
-            <div className="w-full">
-              {isAssigneeFixed ? (
-                <div className="min-h-11 w-full rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-sm leading-5 font-medium text-gray-500">
-                  {fixedAssigneeNickname ?? "나"}
-                </div>
-              ) : (
-                <AssigneeSelect
-                  members={memberList}
-                  value={assigneeIds}
-                  onChange={setAssigneeIds}
-                  placeholder="담당자를 선택해주세요"
-                />
-              )}
-            </div>
-          </div>
-
-          <div className="flex w-full flex-col items-start gap-1">
-            <label className="typography-body-2 text-label-neutral font-semibold">
-              메모
-            </label>
-            <div className="w-full">
-              <textarea
-                name="memo"
-                className="h-[120px] w-full resize-none rounded-xl border border-gray-300 p-3"
-                placeholder="80자 이내로 입력해주세요"
-                maxLength={80}
-              />
-            </div>
-          </div>
-        </div>
-
-        <Spacing size={40} />
-
-        <div className="flex w-full items-center justify-between gap-2">
-          <button
-            type="button"
-            className="shadow-[0 0 14px 0 rgba(138, 138, 138, 0.08)] h-[64px] w-full cursor-pointer rounded-full border border-gray-300 px-4 py-3"
-            onClick={onClose}
-          >
-            <span className="typography-body-2 font-semibold text-gray-400">
-              취소
-            </span>
-          </button>
-          <Button
-            color="gray"
-            size="xxl"
-            className="w-full"
-            type="submit"
-            isDisabled={isPending}
-          >
-            할일 생성
-          </Button>
-        </div>
-      </form>
-    </Modal.Root>
-  );
-};
-
 export const useTodoCreateModal = () => {
   const overlay = useOverlay();
   const params = useParams<{ teamId?: string }>();
diff --git a/src/features/todo/hooks/useTodoDeleteModal.test.tsx b/src/features/todo/hooks/useTodoDeleteModal.test.tsx
new file mode 100644
index 00000000..e59b411a
--- /dev/null
+++ b/src/features/todo/hooks/useTodoDeleteModal.test.tsx
@@ -0,0 +1,147 @@
+import { act, renderHook } from "@testing-library/react";
+
+import { useDeleteTodoMutation } from "@/features/todo/mutation/useDeleteTodoMutation";
+import { useGoalId } from "@/shared/hooks/useGoalId";
+import { useOverlay } from "@/shared/hooks/useOverlay";
+
+import { useTodoDeleteModal } from "./useTodoDeleteModal";
+
+jest.mock("@/shared/hooks/useGoalId");
+jest.mock("@/shared/hooks/useOverlay");
+jest.mock("@/features/todo/mutation/useDeleteTodoMutation");
+jest.mock("@/features/todo/ui/TodoDeleteModal/TodoDeleteModal", () => ({
+  TodoDeleteModal: () => null,
+}));
+
+const mockUseGoalId = useGoalId as jest.MockedFunction<typeof useGoalId>;
+const mockUseOverlay = useOverlay as jest.MockedFunction<typeof useOverlay>;
+const mockUseDeleteTodoMutation = useDeleteTodoMutation as jest.MockedFunction<
+  typeof useDeleteTodoMutation
+>;
+
+describe("useTodoDeleteModal", () => {
+  let mockOpen: jest.Mock;
+  let mockClose: jest.Mock;
+  let mockDeleteTodo: jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockOpen = jest.fn();
+    mockClose = jest.fn();
+    mockDeleteTodo = jest.fn();
+
+    mockUseGoalId.mockReturnValue("10");
+    mockUseOverlay.mockReturnValue({ open: mockOpen, close: mockClose });
+    mockUseDeleteTodoMutation.mockReturnValue({
+      mutate: mockDeleteTodo,
+      isPending: false,
+    } as unknown as ReturnType<typeof useDeleteTodoMutation>);
+  });
+
+  describe("openTodoDeleteModal", () => {
+    test("todo-delete-confirm-modal ID로 overlay를 연다", () => {
+      const { result } = renderHook(() => useTodoDeleteModal({ todoId: "5" }));
+
+      act(() => {
+        result.current.openTodoDeleteModal();
+      });
+
+      expect(mockOpen).toHaveBeenCalledWith(
+        "todo-delete-confirm-modal",
+        expect.anything(),
+      );
+    });
+
+    test("TodoDeleteModal에 onClose와 onConfirm props를 전달한다", () => {
+      const { result } = renderHook(() => useTodoDeleteModal({ todoId: "5" }));
+
+      act(() => {
+        result.current.openTodoDeleteModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ onClose: () => void; onConfirm: () => void }>,
+      ];
+
+      expect(typeof element.props.onClose).toBe("function");
+      expect(typeof element.props.onConfirm).toBe("function");
+    });
+
+    test("onConfirm 호출 시 goalId와 todoId로 deleteTodo를 실행한다", () => {
+      const { result } = renderHook(() => useTodoDeleteModal({ todoId: "5" }));
+
+      act(() => {
+        result.current.openTodoDeleteModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ onConfirm: () => void }>,
+      ];
+
+      act(() => {
+        element.props.onConfirm();
+      });
+
+      expect(mockDeleteTodo).toHaveBeenCalledWith({
+        goalId: "10",
+        todoId: "5",
+      });
+    });
+
+    test("onClose 호출 시 overlay.close를 실행한다", () => {
+      const { result } = renderHook(() => useTodoDeleteModal({ todoId: "5" }));
+
+      act(() => {
+        result.current.openTodoDeleteModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ onClose: () => void }>,
+      ];
+
+      act(() => {
+        element.props.onClose();
+      });
+
+      expect(mockClose).toHaveBeenCalled();
+    });
+  });
+
+  describe("closeTodoDeleteModal", () => {
+    test("overlay.close를 호출한다", () => {
+      const { result } = renderHook(() => useTodoDeleteModal({ todoId: "5" }));
+
+      act(() => {
+        result.current.closeTodoDeleteModal();
+      });
+
+      expect(mockClose).toHaveBeenCalled();
+    });
+  });
+
+  describe("useDeleteTodoMutation에 전달되는 onSuccess", () => {
+    test("mutation 성공 시 overlay.close가 호출된다", () => {
+      let capturedOnSuccess: (() => void) | undefined;
+
+      mockUseDeleteTodoMutation.mockImplementation(({ onSuccess } = {}) => {
+        capturedOnSuccess = onSuccess;
+        return {
+          mutate: mockDeleteTodo,
+          isPending: false,
+        } as unknown as ReturnType<typeof useDeleteTodoMutation>;
+      });
+
+      renderHook(() => useTodoDeleteModal({ todoId: "5" }));
+
+      act(() => {
+        capturedOnSuccess?.();
+      });
+
+      expect(mockClose).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/features/todo/hooks/useTodoDeleteModal.tsx b/src/features/todo/hooks/useTodoDeleteModal.tsx
index e3c67445..15fa54cb 100644
--- a/src/features/todo/hooks/useTodoDeleteModal.tsx
+++ b/src/features/todo/hooks/useTodoDeleteModal.tsx
@@ -1,48 +1,12 @@
 "use client";
 
-import { todoApi } from "@/entities/todo";
-import { useGoalId } from "@/features/goal/hooks/useGoalId";
+import { useDeleteTodoMutation } from "@/features/todo/mutation/useDeleteTodoMutation";
+import { TodoDeleteModal } from "@/features/todo/ui/TodoDeleteModal/TodoDeleteModal";
+import { useGoalId } from "@/shared/hooks/useGoalId";
 import { useOverlay } from "@/shared/hooks/useOverlay";
-import Button from "@/shared/ui/Button/Button/Button";
-import { Modal } from "@/shared/ui/Modal";
 
 const TODO_DELETE_MODAL_ID = "todo-delete-confirm-modal";
 
-const TodoDeleteModal = ({
-  onClose,
-  onConfirm,
-}: {
-  onClose: () => void;
-  onConfirm: () => void;
-}) => {
-  return (
-    <Modal.Root onClose={onClose}>
-      <Modal.Backdrop />
-      <Modal.Content>
-        <Modal.Title>할 일을 삭제하시겠습니까?</Modal.Title>
-        <Modal.Actions>
-          <Button
-            variant="secondary"
-            size="md"
-            className="flex-1"
-            onClick={onClose}
-          >
-            취소
-          </Button>
-          <Button
-            variant="primary"
-            size="md"
-            className="flex-1"
-            onClick={onConfirm}
-          >
-            삭제
-          </Button>
-        </Modal.Actions>
-      </Modal.Content>
-    </Modal.Root>
-  );
-};
-
 export const useTodoDeleteModal = ({ todoId }: { todoId: string }) => {
   const overlay = useOverlay();
   const goalId = useGoalId();
@@ -51,17 +15,16 @@ export const useTodoDeleteModal = ({ todoId }: { todoId: string }) => {
     overlay.close();
   };
 
-  const openTodoDeleteModal = () => {
-    const handleConfirm = async () => {
-      await todoApi.delete(goalId, todoId);
-      closeTodoDeleteModal();
-    };
+  const { mutate: deleteTodo } = useDeleteTodoMutation({
+    onSuccess: closeTodoDeleteModal,
+  });
 
+  const openTodoDeleteModal = () => {
     overlay.open(
       TODO_DELETE_MODAL_ID,
       <TodoDeleteModal
         onClose={closeTodoDeleteModal}
-        onConfirm={handleConfirm}
+        onConfirm={() => deleteTodo({ goalId, todoId })}
       />,
     );
   };
diff --git a/src/features/todo/hooks/useTodoDetailModal.test.tsx b/src/features/todo/hooks/useTodoDetailModal.test.tsx
new file mode 100644
index 00000000..4ee204de
--- /dev/null
+++ b/src/features/todo/hooks/useTodoDetailModal.test.tsx
@@ -0,0 +1,246 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook } from "@testing-library/react";
+import { useParams } from "next/navigation";
+
+import type { Todo } from "@/entities/todo";
+import { useGoalId } from "@/shared/hooks/useGoalId";
+import { useOverlay } from "@/shared/hooks/useOverlay";
+
+import { useTodoDetailModal } from "./useTodoDetailModal";
+
+jest.mock("next/navigation", () => ({
+  useParams: jest.fn(),
+}));
+jest.mock("@/shared/hooks/useGoalId");
+jest.mock("@/shared/hooks/useOverlay");
+jest.mock("@/entities/goal", () => ({
+  goalQueryOptions: {
+    getSummary: (goalId: string) => ({
+      queryKey: ["goal", goalId, "summary"],
+      queryFn: jest.fn(),
+    }),
+  },
+}));
+jest.mock("@/entities/team", () => ({
+  teamQueryOptions: {
+    summary: (teamId: string) => ({
+      queryKey: ["team", teamId, "summary"],
+      queryFn: jest.fn(),
+      enabled: Boolean(teamId),
+    }),
+  },
+}));
+jest.mock("@/features/todo/ui/TodoDetailModal/TodoDetailModal", () => ({
+  TodoDetailModal: () => null,
+}));
+
+const mockUseParams = useParams as jest.MockedFunction<typeof useParams>;
+const mockUseGoalId = useGoalId as jest.MockedFunction<typeof useGoalId>;
+const mockUseOverlay = useOverlay as jest.MockedFunction<typeof useOverlay>;
+
+const makeTodo = (overrides: Partial<Todo> = {}): Todo => ({
+  id: 1,
+  goalId: 10,
+  title: "테스트 할 일",
+  startDate: "2026-05-01",
+  dueDate: "2026-05-31",
+  status: "TODO",
+  memo: "메모",
+  assigneeSummary: "",
+  assignees: [],
+  ...overrides,
+});
+
+const createWrapper = (goalSummaryData: object, teamSummaryData?: object) => {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false, staleTime: Infinity } },
+  });
+
+  queryClient.setQueryData(["goal", "10", "summary"], goalSummaryData);
+  if (teamSummaryData) {
+    queryClient.setQueryData(["team", "2", "summary"], teamSummaryData);
+  }
+
+  function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  }
+
+  return Wrapper;
+};
+
+describe("useTodoDetailModal", () => {
+  let mockOpen: jest.Mock;
+  let mockClose: jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockOpen = jest.fn();
+    mockClose = jest.fn();
+
+    mockUseGoalId.mockReturnValue("10");
+    mockUseOverlay.mockReturnValue({ open: mockOpen, close: mockClose });
+  });
+
+  describe("개인 목표 (teamId 없음)", () => {
+    beforeEach(() => {
+      mockUseParams.mockReturnValue({} as ReturnType<typeof useParams>);
+    });
+
+    test("openTodoDetailModal 호출 시 todo-detail-modal ID로 overlay를 연다", () => {
+      const wrapper = createWrapper({ goalName: "디자인 시스템" });
+      const todo = makeTodo();
+
+      const { result } = renderHook(() => useTodoDetailModal({ todo }), {
+        wrapper,
+      });
+
+      act(() => {
+        result.current.openTodoDetailModal();
+      });
+
+      expect(mockOpen).toHaveBeenCalledWith(
+        "todo-detail-modal",
+        expect.anything(),
+      );
+    });
+
+    test("TodoDetailModal에 goalName을 전달한다", () => {
+      const wrapper = createWrapper({ goalName: "디자인 시스템" });
+      const todo = makeTodo();
+
+      const { result } = renderHook(() => useTodoDetailModal({ todo }), {
+        wrapper,
+      });
+
+      act(() => {
+        result.current.openTodoDetailModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ goalName: string; teamName: string; todo: Todo }>,
+      ];
+
+      expect(element.props.goalName).toBe("디자인 시스템");
+    });
+
+    test("팀 정보 없으면 teamName을 '개인'으로 전달한다", () => {
+      const wrapper = createWrapper({ goalName: "디자인 시스템" });
+      const todo = makeTodo();
+
+      const { result } = renderHook(() => useTodoDetailModal({ todo }), {
+        wrapper,
+      });
+
+      act(() => {
+        result.current.openTodoDetailModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ teamName: string }>,
+      ];
+
+      expect(element.props.teamName).toBe("개인");
+    });
+
+    test("TodoDetailModal에 todo를 전달한다", () => {
+      const wrapper = createWrapper({ goalName: "디자인 시스템" });
+      const todo = makeTodo({ title: "중요한 할 일" });
+
+      const { result } = renderHook(() => useTodoDetailModal({ todo }), {
+        wrapper,
+      });
+
+      act(() => {
+        result.current.openTodoDetailModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ todo: Todo }>,
+      ];
+
+      expect(element.props.todo).toEqual(todo);
+    });
+  });
+
+  describe("팀 목표 (teamId 있음)", () => {
+    beforeEach(() => {
+      mockUseParams.mockReturnValue({
+        teamId: "2",
+      } as ReturnType<typeof useParams>);
+    });
+
+    test("팀 정보가 있으면 teamName을 팀 이름으로 전달한다", () => {
+      const wrapper = createWrapper(
+        { goalName: "팀 목표" },
+        { teamName: "프론트엔드 팀" },
+      );
+      const todo = makeTodo();
+
+      const { result } = renderHook(() => useTodoDetailModal({ todo }), {
+        wrapper,
+      });
+
+      act(() => {
+        result.current.openTodoDetailModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ teamName: string }>,
+      ];
+
+      expect(element.props.teamName).toBe("프론트엔드 팀");
+    });
+  });
+
+  describe("closeTodoDetailModal", () => {
+    test("overlay.close를 호출한다", () => {
+      const wrapper = createWrapper({ goalName: "디자인 시스템" });
+      mockUseParams.mockReturnValue({} as ReturnType<typeof useParams>);
+      const todo = makeTodo();
+
+      const { result } = renderHook(() => useTodoDetailModal({ todo }), {
+        wrapper,
+      });
+
+      act(() => {
+        result.current.closeTodoDetailModal();
+      });
+
+      expect(mockClose).toHaveBeenCalled();
+    });
+  });
+
+  describe("onClose prop", () => {
+    test("모달의 onClose 호출 시 overlay.close를 실행한다", () => {
+      const wrapper = createWrapper({ goalName: "디자인 시스템" });
+      mockUseParams.mockReturnValue({} as ReturnType<typeof useParams>);
+      const todo = makeTodo();
+
+      const { result } = renderHook(() => useTodoDetailModal({ todo }), {
+        wrapper,
+      });
+
+      act(() => {
+        result.current.openTodoDetailModal();
+      });
+
+      const [, element] = mockOpen.mock.calls[0] as [
+        string,
+        React.ReactElement<{ onClose: () => void }>,
+      ];
+
+      act(() => {
+        element.props.onClose();
+      });
+
+      expect(mockClose).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/features/todo/hooks/useTodoDetailModal.tsx b/src/features/todo/hooks/useTodoDetailModal.tsx
index 61a86d8d..6d796da4 100644
--- a/src/features/todo/hooks/useTodoDetailModal.tsx
+++ b/src/features/todo/hooks/useTodoDetailModal.tsx
@@ -1,133 +1,17 @@
 "use client";
 
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
-import Image from "next/image";
 import { useParams } from "next/navigation";
 
 import { goalQueryOptions } from "@/entities/goal";
 import { teamQueryOptions } from "@/entities/team";
 import type { Todo } from "@/entities/todo";
-import { useGoalId } from "@/features/goal/hooks/useGoalId";
-import defaultAvatar from "@/shared/assets/images/avatar.png";
+import { TodoDetailModal } from "@/features/todo/ui/TodoDetailModal/TodoDetailModal";
+import { useGoalId } from "@/shared/hooks/useGoalId";
 import { useOverlay } from "@/shared/hooks/useOverlay";
-import Button from "@/shared/ui/Button/Button/Button";
-import { Icon } from "@/shared/ui/Icon";
-import { Modal } from "@/shared/ui/Modal";
 
 const TODO_DETAIL_MODAL_ID = "todo-detail-modal";
 
-interface TodoDetailModalProps {
-  onClose: () => void;
-  todo: Todo;
-  goalName: string;
-  teamName: string;
-}
-
-const TodoDetailModal = ({
-  onClose,
-  todo,
-  goalName,
-  teamName,
-}: TodoDetailModalProps) => {
-  return (
-    <Modal.Root onClose={onClose}>
-      <Modal.Backdrop />
-      <div className="relative z-10 flex w-full max-w-[488px] flex-col items-start gap-8 rounded-2xl bg-white p-8 shadow-xl">
-        <div className="flex w-fit items-center justify-start gap-[6px]">
-          <h2 className="typography-heading-2 font-semibold">{todo.title}</h2>
-          <span className="typography-label-2 rounded-lg bg-gray-100 px-[10px] py-1 font-semibold text-gray-400">
-            {teamName}
-          </span>
-        </div>
-
-        <div className="mt-2 grid grid-cols-[100px_1fr] gap-x-4 gap-y-3">
-          <div className="flex items-center justify-start gap-[6px]">
-            <Icon
-              name="Flag"
-              size={16}
-              className="text-gray-400"
-            />
-            <span className="typography-label-1 font-medium text-gray-400">
-              목표
-            </span>
-          </div>
-          <span className="typography-label-1 text-label-neutral font-medium">
-            {goalName}
-          </span>
-
-          <div className="flex items-center justify-start gap-[6px]">
-            <Icon
-              name="Calendar"
-              size={16}
-              className="text-gray-400"
-            />
-            <span className="typography-label-1 font-medium text-gray-400">
-              시작 날짜
-            </span>
-          </div>
-          <span className="typography-label-1 text-label-neutral font-medium">
-            {todo.startDate}
-          </span>
-
-          <div className="flex items-center justify-start gap-[6px]">
-            <Icon
-              name="Calendar"
-              size={16}
-              className="text-gray-400"
-            />
-            <span className="typography-label-1 font-medium text-gray-400">
-              마감 날짜
-            </span>
-          </div>
-          <span className="typography-label-1 text-label-neutral font-medium">
-            {todo.dueDate}
-          </span>
-        </div>
-
-        <div className="flex w-full flex-col items-start gap-[5px]">
-          <h3 className="typography-body-2 font-semibold">담당자</h3>
-          <div className="flex max-h-[120px] w-full flex-wrap items-start justify-start gap-4 overflow-y-scroll rounded-2xl border border-gray-300 px-4 py-3">
-            {todo.assignees.map((assignee) => (
-              <div
-                key={assignee.userId}
-                className="flex shrink-0 items-center gap-1"
-              >
-                <Image
-                  src={defaultAvatar.src}
-                  alt="Avatar Image"
-                  width={32}
-                  height={32}
-                  className="shrink-0 rounded-full object-cover"
-                />
-                <span className="typography-label-1 shrink-0 font-semibold">
-                  {assignee.nickname}
-                </span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="flex w-full flex-col items-start gap-[5px]">
-          <h3 className="typography-body-2 font-semibold">메모</h3>
-          <div className="flex max-h-[120px] w-full flex-wrap items-start justify-start gap-4 overflow-y-scroll rounded-2xl border border-gray-300 px-4 py-3">
-            <span className="typography-body-2 text-label-normal">
-              {todo.memo}
-            </span>
-          </div>
-        </div>
-
-        <Button
-          size="xl"
-          className="mt-2 w-full"
-          onClick={onClose}
-        >
-          닫기
-        </Button>
-      </div>
-    </Modal.Root>
-  );
-};
-
 export const useTodoDetailModal = ({ todo }: { todo: Todo }) => {
   const overlay = useOverlay();
   const params = useParams<{ teamId?: string }>();
diff --git a/src/features/todo/index.ts b/src/features/todo/index.ts
new file mode 100644
index 00000000..4500a1b4
--- /dev/null
+++ b/src/features/todo/index.ts
@@ -0,0 +1,9 @@
+export type { TodoListSortLabel } from "./constants/todoColumnSort";
+export {
+  TODO_COLUMN_DEFAULT_SORT_LABEL,
+  TODO_COLUMN_SORT_LABEL_ORDER,
+  TODO_LIST_SORT_BY_LABEL,
+} from "./constants/todoColumnSort";
+export { useTodoCreateModal } from "./hooks/useTodoCreateModal";
+export { TodoList } from "./ui/List";
+export { formatDDay } from "./utils/formatDDay";
diff --git a/src/features/todo/mutation/useCreateTodoMutation.test.tsx b/src/features/todo/mutation/useCreateTodoMutation.test.tsx
new file mode 100644
index 00000000..0f432eeb
--- /dev/null
+++ b/src/features/todo/mutation/useCreateTodoMutation.test.tsx
@@ -0,0 +1,148 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { http, HttpResponse } from "msw";
+
+import { useToast } from "@/shared/hooks/useToast";
+import { server } from "@/shared/mock/server";
+
+import { useCreateTodoMutation } from "./useCreateTodoMutation";
+
+jest.mock("@/shared/hooks/useToast");
+
+const mockUseToast = useToast as jest.MockedFunction<typeof useToast>;
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  }
+
+  return { queryClient, Wrapper };
+};
+
+const validPayload = {
+  goalId: "1",
+  todoData: {
+    title: "테스트 할 일",
+    startDate: "2026-05-01",
+    dueDate: "2026-05-31",
+    assigneeIds: [] as number[],
+    memo: "",
+  },
+};
+
+describe("useCreateTodoMutation", () => {
+  let mockToast: jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockToast = jest.fn();
+    mockUseToast.mockReturnValue({
+      toast: mockToast,
+    } as unknown as ReturnType<typeof useToast>);
+  });
+
+  describe("onSuccess", () => {
+    test("할 일 목록 캐시를 무효화한다", async () => {
+      const { queryClient, Wrapper } = createWrapper();
+      const spy = jest.spyOn(queryClient, "invalidateQueries");
+
+      const { result } = renderHook(() => useCreateTodoMutation(), {
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.mutate(validPayload);
+      });
+
+      await waitFor(() => {
+        expect(spy).toHaveBeenCalledWith(
+          expect.objectContaining({
+            queryKey: ["todo", "1", "list"],
+          }),
+        );
+      });
+    });
+
+    test("성공 토스트를 표시한다", async () => {
+      const { Wrapper } = createWrapper();
+
+      const { result } = renderHook(() => useCreateTodoMutation(), {
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.mutate(validPayload);
+      });
+
+      await waitFor(() => {
+        expect(mockToast).toHaveBeenCalledWith(
+          expect.objectContaining({
+            variant: "success",
+            title: "할 일 생성 완료",
+          }),
+        );
+      });
+    });
+  });
+
+  describe("onError", () => {
+    beforeEach(() => {
+      server.use(
+        http.post("*/api/goals/:goalId/todos", () =>
+          HttpResponse.json({ message: "서버 오류" }, { status: 500 }),
+        ),
+      );
+    });
+
+    test("에러 토스트를 표시한다", async () => {
+      const { Wrapper } = createWrapper();
+
+      const { result } = renderHook(() => useCreateTodoMutation(), {
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.mutate(validPayload);
+      });
+
+      await waitFor(() => {
+        expect(mockToast).toHaveBeenCalledWith(
+          expect.objectContaining({
+            variant: "error",
+            title: "할 일 생성 실패",
+          }),
+        );
+      });
+    });
+
+    test("에러 메시지를 토스트 description에 담는다", async () => {
+      const { Wrapper } = createWrapper();
+
+      const { result } = renderHook(() => useCreateTodoMutation(), {
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.mutate(validPayload);
+      });
+
+      await waitFor(() => {
+        expect(mockToast).toHaveBeenCalledWith(
+          expect.objectContaining({
+            variant: "error",
+            description: "서버 오류",
+          }),
+        );
+      });
+    });
+  });
+});
diff --git a/src/features/todo/mutation/useCreateTodoMutation.ts b/src/features/todo/mutation/useCreateTodoMutation.ts
index ef60f60f..fc4e922f 100644
--- a/src/features/todo/mutation/useCreateTodoMutation.ts
+++ b/src/features/todo/mutation/useCreateTodoMutation.ts
@@ -1,5 +1,4 @@
-import { useMutation } from "@tanstack/react-query";
-import { useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 import type { CreateTodoRequest } from "@/entities/todo";
 import { todoApi } from "@/entities/todo";
diff --git a/src/features/todo/mutation/useDeleteTodoMutation.test.tsx b/src/features/todo/mutation/useDeleteTodoMutation.test.tsx
new file mode 100644
index 00000000..3ff307a5
--- /dev/null
+++ b/src/features/todo/mutation/useDeleteTodoMutation.test.tsx
@@ -0,0 +1,172 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { http, HttpResponse } from "msw";
+
+import { useToast } from "@/shared/hooks/useToast";
+import { server } from "@/shared/mock/server";
+
+import { useDeleteTodoMutation } from "./useDeleteTodoMutation";
+
+jest.mock("@/shared/hooks/useToast");
+
+const mockUseToast = useToast as jest.MockedFunction<typeof useToast>;
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  }
+
+  return { queryClient, Wrapper };
+};
+
+const validVariables = { goalId: "1", todoId: "5" };
+
+describe("useDeleteTodoMutation", () => {
+  let mockToast: jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockToast = jest.fn();
+    mockUseToast.mockReturnValue({
+      toast: mockToast,
+    } as unknown as ReturnType<typeof useToast>);
+  });
+
+  describe("onSuccess", () => {
+    test("할 일 목록 캐시를 무효화한다", async () => {
+      const { queryClient, Wrapper } = createWrapper();
+      const spy = jest.spyOn(queryClient, "invalidateQueries");
+
+      const { result } = renderHook(() => useDeleteTodoMutation(), {
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.mutate(validVariables);
+      });
+
+      await waitFor(() => {
+        expect(spy).toHaveBeenCalledWith(
+          expect.objectContaining({
+            queryKey: ["todo", "1", "list"],
+          }),
+        );
+      });
+    });
+
+    test("성공 토스트를 표시한다", async () => {
+      const { Wrapper } = createWrapper();
+
+      const { result } = renderHook(() => useDeleteTodoMutation(), {
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.mutate(validVariables);
+      });
+
+      await waitFor(() => {
+        expect(mockToast).toHaveBeenCalledWith(
+          expect.objectContaining({
+            variant: "success",
+            title: "할 일 삭제 완료",
+          }),
+        );
+      });
+    });
+
+    test("onSuccess 콜백을 호출한다", async () => {
+      const { Wrapper } = createWrapper();
+      const onSuccessCallback = jest.fn();
+
+      const { result } = renderHook(
+        () => useDeleteTodoMutation({ onSuccess: onSuccessCallback }),
+        { wrapper: Wrapper },
+      );
+
+      act(() => {
+        result.current.mutate(validVariables);
+      });
+
+      await waitFor(() => {
+        expect(onSuccessCallback).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    test("onSuccess 콜백 없이도 동작한다", async () => {
+      const { Wrapper } = createWrapper();
+
+      const { result } = renderHook(() => useDeleteTodoMutation(), {
+        wrapper: Wrapper,
+      });
+
+      await expect(
+        act(() => {
+          result.current.mutate(validVariables);
+        }),
+      ).resolves.not.toThrow();
+    });
+  });
+
+  describe("onError", () => {
+    beforeEach(() => {
+      server.use(
+        http.delete("*/api/goals/:goalId/todos/:todoId", () =>
+          HttpResponse.json({ message: "삭제 실패" }, { status: 500 }),
+        ),
+      );
+    });
+
+    test("에러 토스트를 표시한다", async () => {
+      const { Wrapper } = createWrapper();
+
+      const { result } = renderHook(() => useDeleteTodoMutation(), {
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.mutate(validVariables);
+      });
+
+      await waitFor(() => {
+        expect(mockToast).toHaveBeenCalledWith(
+          expect.objectContaining({
+            variant: "error",
+            title: "할 일 삭제 실패",
+          }),
+        );
+      });
+    });
+
+    test("에러 시 onSuccess 콜백을 호출하지 않는다", async () => {
+      const { Wrapper } = createWrapper();
+      const onSuccessCallback = jest.fn();
+
+      const { result } = renderHook(
+        () => useDeleteTodoMutation({ onSuccess: onSuccessCallback }),
+        { wrapper: Wrapper },
+      );
+
+      act(() => {
+        result.current.mutate(validVariables);
+      });
+
+      await waitFor(() => {
+        expect(mockToast).toHaveBeenCalledWith(
+          expect.objectContaining({ variant: "error" }),
+        );
+      });
+
+      expect(onSuccessCallback).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/features/todo/mutation/useDeleteTodoMutation.ts b/src/features/todo/mutation/useDeleteTodoMutation.ts
new file mode 100644
index 00000000..038db8dd
--- /dev/null
+++ b/src/features/todo/mutation/useDeleteTodoMutation.ts
@@ -0,0 +1,45 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { todoApi } from "@/entities/todo";
+import { useToast } from "@/shared/hooks/useToast";
+import type { ApiError } from "@/shared/lib/api/types";
+
+type UseDeleteTodoMutationOptions = {
+  onSuccess?: () => void;
+};
+
+type DeleteTodoVariables = {
+  goalId: string;
+  todoId: string;
+};
+
+export const useDeleteTodoMutation = ({
+  onSuccess,
+}: UseDeleteTodoMutationOptions = {}) => {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+
+  return useMutation({
+    mutationFn: ({ goalId, todoId }: DeleteTodoVariables) =>
+      todoApi.delete(goalId, todoId),
+    throwOnError: false,
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["todo", variables.goalId, "list"],
+      });
+      toast({
+        title: "할 일 삭제 완료",
+        description: "할 일이 삭제되었습니다.",
+        variant: "success",
+      });
+      onSuccess?.();
+    },
+    onError: (error: ApiError) => {
+      toast({
+        variant: "error",
+        title: "할 일 삭제 실패",
+        description: error.message ?? "잠시 후 다시 시도해주세요.",
+      });
+    },
+  });
+};
diff --git a/src/features/todo/mutation/usePatchTodoStatusMutation.test.tsx b/src/features/todo/mutation/usePatchTodoStatusMutation.test.tsx
new file mode 100644
index 00000000..f2e2e376
--- /dev/null
+++ b/src/features/todo/mutation/usePatchTodoStatusMutation.test.tsx
@@ -0,0 +1,195 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { http, HttpResponse } from "msw";
+
+import type { Todo } from "@/entities/todo";
+import { server } from "@/shared/mock/server";
+
+import { usePatchTodoStatusMutation } from "./usePatchTodoStatusMutation";
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    );
+  }
+
+  return { queryClient, Wrapper };
+};
+
+const makeTodo = (overrides: Partial<Todo> = {}): Todo => ({
+  id: 1,
+  goalId: 10,
+  title: "테스트 할 일",
+  startDate: "2026-05-01",
+  dueDate: "2026-05-31",
+  status: "TODO",
+  memo: "메모",
+  assigneeSummary: "",
+  assignees: [],
+  ...overrides,
+});
+
+const patchPayload = {
+  goalId: "10",
+  todoId: "1",
+  todoData: {
+    title: "수정된 할 일",
+    startDate: "2026-05-01",
+    dueDate: "2026-05-31",
+    status: "DOING" as const,
+    memo: "메모",
+    assigneeIds: [],
+  },
+};
+
+describe("usePatchTodoStatusMutation", () => {
+  describe("onMutate (낙관적 업데이트)", () => {
+    test("캐시의 해당 할 일 status를 즉시 업데이트한다", async () => {
+      const { queryClient, Wrapper } = createWrapper();
+
+      const original = makeTodo({ id: 1, status: "TODO" });
+      queryClient.setQueryData(["todo", "10", "list"], [original]);
+
+      server.use(
+        http.patch("*/api/goals/:goalId/todos/:todoId", async () => {
+          await new Promise<void>((resolve) => setTimeout(resolve, 100));
+          return HttpResponse.json({ success: true, code: "OK", data: null });
+        }),
+      );
+
+      const { result } = renderHook(() => usePatchTodoStatusMutation(), {
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.mutate(patchPayload);
+      });
+
+      await waitFor(() => {
+        const todos = queryClient.getQueryData<Todo[]>(["todo", "10", "list"]);
+        expect(todos?.[0].status).toBe("DOING");
+      });
+    });
+
+    test("id가 다른 할 일은 변경하지 않는다", async () => {
+      const { queryClient, Wrapper } = createWrapper();
+
+      const todo1 = makeTodo({ id: 1, status: "TODO" });
+      const todo2 = makeTodo({ id: 2, status: "TODO" });
+      queryClient.setQueryData(["todo", "10", "list"], [todo1, todo2]);
+
+      server.use(
+        http.patch("*/api/goals/:goalId/todos/:todoId", async () => {
+          await new Promise<void>((resolve) => setTimeout(resolve, 100));
+          return HttpResponse.json({ success: true, code: "OK", data: null });
+        }),
+      );
+
+      const { result } = renderHook(() => usePatchTodoStatusMutation(), {
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.mutate(patchPayload);
+      });
+
+      await waitFor(() => {
+        const todos = queryClient.getQueryData<Todo[]>(["todo", "10", "list"]);
+        expect(todos?.[0].status).toBe("DOING");
+        expect(todos?.[1].status).toBe("TODO");
+      });
+    });
+  });
+
+  describe("onError (롤백)", () => {
+    beforeEach(() => {
+      server.use(
+        http.patch("*/api/goals/:goalId/todos/:todoId", () =>
+          HttpResponse.json({ message: "서버 오류" }, { status: 500 }),
+        ),
+      );
+    });
+
+    test("API 실패 시 캐시를 이전 데이터로 복원한다", async () => {
+      const { queryClient, Wrapper } = createWrapper();
+
+      const original = makeTodo({ id: 1, status: "TODO" });
+      queryClient.setQueryData(["todo", "10", "list"], [original]);
+
+      const { result } = renderHook(() => usePatchTodoStatusMutation(), {
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.mutate(patchPayload);
+      });
+
+      await waitFor(() => {
+        expect(result.current.isError).toBe(true);
+      });
+
+      const todos = queryClient.getQueryData<Todo[]>(["todo", "10", "list"]);
+      expect(todos?.[0].status).toBe("TODO");
+    });
+  });
+
+  describe("onSettled (캐시 무효화)", () => {
+    test("성공 후 할 일 목록 캐시를 무효화한다", async () => {
+      const { queryClient, Wrapper } = createWrapper();
+      const spy = jest.spyOn(queryClient, "invalidateQueries");
+
+      const { result } = renderHook(() => usePatchTodoStatusMutation(), {
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.mutate(patchPayload);
+      });
+
+      await waitFor(() => {
+        expect(spy).toHaveBeenCalledWith(
+          expect.objectContaining({
+            queryKey: ["todo", "10", "list"],
+          }),
+        );
+      });
+    });
+
+    test("실패 후에도 할 일 목록 캐시를 무효화한다", async () => {
+      server.use(
+        http.patch("*/api/goals/:goalId/todos/:todoId", () =>
+          HttpResponse.json({ message: "서버 오류" }, { status: 500 }),
+        ),
+      );
+
+      const { queryClient, Wrapper } = createWrapper();
+      const spy = jest.spyOn(queryClient, "invalidateQueries");
+
+      const { result } = renderHook(() => usePatchTodoStatusMutation(), {
+        wrapper: Wrapper,
+      });
+
+      act(() => {
+        result.current.mutate(patchPayload);
+      });
+
+      await waitFor(() => {
+        expect(result.current.isError).toBe(true);
+      });
+
+      expect(spy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          queryKey: ["todo", "10", "list"],
+        }),
+      );
+    });
+  });
+});
diff --git a/src/features/todo/ui/AssigneeSelect/index.test.tsx b/src/features/todo/ui/CreateTodoModal/AssigneeSelect/index.test.tsx
similarity index 100%
rename from src/features/todo/ui/AssigneeSelect/index.test.tsx
rename to src/features/todo/ui/CreateTodoModal/AssigneeSelect/index.test.tsx
diff --git a/src/features/todo/ui/AssigneeSelect/index.tsx b/src/features/todo/ui/CreateTodoModal/AssigneeSelect/index.tsx
similarity index 92%
rename from src/features/todo/ui/AssigneeSelect/index.tsx
rename to src/features/todo/ui/CreateTodoModal/AssigneeSelect/index.tsx
index 3141feb3..f6200cfa 100644
--- a/src/features/todo/ui/AssigneeSelect/index.tsx
+++ b/src/features/todo/ui/CreateTodoModal/AssigneeSelect/index.tsx
@@ -25,10 +25,7 @@ export function AssigneeSelect({
     members.map((member) => String(member.userId)),
   );
 
-  const selectedMembers = () => {
-    const byId = new Map(members.map((member) => [member.userId, member]));
-    return value.map((id) => byId.get(id)).filter(Boolean) as Member[];
-  };
+  const selectedMembers = members.filter((m) => value.includes(m.userId));
 
   const toggleMember = (id: number) => {
     if (value.includes(id)) {
@@ -50,17 +47,17 @@ export function AssigneeSelect({
   return (
     <div
       ref={containerRef}
-      className={"relative w-full"}
+      className="relative w-full"
     >
       <div
         onClick={toggle}
         className="text-label-normal flex min-h-11 w-full cursor-pointer items-center gap-2 rounded-xl border border-gray-300 bg-white py-3 pr-3 pl-4 text-sm leading-5 font-medium"
       >
         <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
-          {selectedMembers().length === 0 ? (
+          {selectedMembers.length === 0 ? (
             <span className="text-label-alternative">{placeholder}</span>
           ) : (
-            selectedMembers().map((member) => (
+            selectedMembers.map((member) => (
               <span
                 key={member.userId}
                 className="flex items-center gap-1"
diff --git a/src/features/todo/ui/CreateTodoModal/TodoCreateModal.stories.tsx b/src/features/todo/ui/CreateTodoModal/TodoCreateModal.stories.tsx
new file mode 100644
index 00000000..44331c87
--- /dev/null
+++ b/src/features/todo/ui/CreateTodoModal/TodoCreateModal.stories.tsx
@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { TodoCreateModal } from "./TodoCreateModal";
+
+const meta = {
+  title: "features/todo/TodoCreateModal",
+  component: TodoCreateModal,
+  tags: ["autodocs"],
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: [["goalId", "1"]],
+      },
+    },
+  },
+  args: {
+    onClose: () => {},
+    goalName: "디자인 시스템 완성",
+    teamName: "개인",
+    memberList: [],
+    isAssigneeFixed: true,
+    fixedAssigneeNickname: "나",
+    initialAssigneeIds: [],
+  },
+} satisfies Meta<typeof TodoCreateModal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const PersonalGoal: Story = {
+  name: "개인 목표 (담당자 고정)",
+  args: {
+    isAssigneeFixed: true,
+    fixedAssigneeNickname: "나",
+    teamName: "개인",
+  },
+};
+
+export const TeamGoal: Story = {
+  name: "팀 목표 (담당자 선택)",
+  args: {
+    isAssigneeFixed: false,
+    teamName: "프론트엔드 팀",
+    memberList: [
+      {
+        id: 1,
+        userId: 101,
+        userEmail: "alice@test.com",
+        profileImageUrl: null,
+        userNickname: "Alice",
+        role: "MEMBER",
+        joinedAt: "2026-01-01T00:00:00Z",
+      },
+      {
+        id: 2,
+        userId: 102,
+        userEmail: "bob@test.com",
+        profileImageUrl: null,
+        userNickname: "Bob",
+        role: "ADMIN",
+        joinedAt: "2026-01-01T00:00:00Z",
+      },
+    ],
+    initialAssigneeIds: [],
+  },
+};
diff --git a/src/features/todo/ui/CreateTodoModal/TodoCreateModal.test.tsx b/src/features/todo/ui/CreateTodoModal/TodoCreateModal.test.tsx
new file mode 100644
index 00000000..22e5c1a9
--- /dev/null
+++ b/src/features/todo/ui/CreateTodoModal/TodoCreateModal.test.tsx
@@ -0,0 +1,153 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { useCreateTodoForm } from "@/features/todo/hooks/useCreateTodoForm";
+import { useGoalId } from "@/shared/hooks/useGoalId";
+
+import { TodoCreateModal } from "./TodoCreateModal";
+
+jest.mock("@/shared/hooks/useGoalId");
+jest.mock("@/features/todo/hooks/useCreateTodoForm");
+jest.mock("./AssigneeSelect", () => ({
+  AssigneeSelect: () => <div data-testid="assignee-select" />,
+}));
+
+const mockUseGoalId = useGoalId as jest.MockedFunction<typeof useGoalId>;
+const mockUseCreateTodoForm = useCreateTodoForm as jest.MockedFunction<
+  typeof useCreateTodoForm
+>;
+
+const defaultFormState = {
+  assigneeIds: [],
+  setAssigneeIds: jest.fn(),
+  startDate: "",
+  handleStartDateChange: jest.fn(),
+  handleSubmit: jest.fn((e) => e.preventDefault()),
+  isPending: false,
+};
+
+const defaultProps = {
+  onClose: jest.fn(),
+  goalName: "디자인 시스템 완성",
+  teamName: "개인",
+  memberList: [],
+  isAssigneeFixed: true,
+  fixedAssigneeNickname: "나",
+  initialAssigneeIds: [],
+};
+
+describe("TodoCreateModal", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseGoalId.mockReturnValue("1");
+    mockUseCreateTodoForm.mockReturnValue(defaultFormState);
+  });
+
+  describe("초기 렌더링", () => {
+    test("목표 이름을 표시한다", () => {
+      render(<TodoCreateModal {...defaultProps} />);
+      expect(screen.getAllByText("디자인 시스템 완성").length).toBeGreaterThan(
+        0,
+      );
+    });
+
+    test("팀 이름을 표시한다", () => {
+      render(<TodoCreateModal {...defaultProps} />);
+      expect(screen.getByText("개인")).toBeInTheDocument();
+    });
+
+    test("취소 버튼을 표시한다", () => {
+      render(<TodoCreateModal {...defaultProps} />);
+      expect(screen.getByRole("button", { name: "취소" })).toBeInTheDocument();
+    });
+
+    test("할일 생성 버튼을 표시한다", () => {
+      render(<TodoCreateModal {...defaultProps} />);
+      expect(
+        screen.getByRole("button", { name: "할일 생성" }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("개인 목표 (isAssigneeFixed=true)", () => {
+    test("고정 담당자 닉네임을 표시한다", () => {
+      render(
+        <TodoCreateModal
+          {...defaultProps}
+          isAssigneeFixed={true}
+          fixedAssigneeNickname="홍길동"
+        />,
+      );
+
+      expect(screen.getByText("홍길동")).toBeInTheDocument();
+    });
+
+    test("fixedAssigneeNickname이 없으면 '나'를 표시한다", () => {
+      render(
+        <TodoCreateModal
+          {...defaultProps}
+          isAssigneeFixed={true}
+          fixedAssigneeNickname={undefined}
+        />,
+      );
+
+      expect(screen.getByText("나")).toBeInTheDocument();
+    });
+
+    test("AssigneeSelect를 렌더링하지 않는다", () => {
+      render(
+        <TodoCreateModal
+          {...defaultProps}
+          isAssigneeFixed={true}
+        />,
+      );
+      expect(screen.queryByTestId("assignee-select")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("팀 목표 (isAssigneeFixed=false)", () => {
+    test("AssigneeSelect를 렌더링한다", () => {
+      render(
+        <TodoCreateModal
+          {...defaultProps}
+          isAssigneeFixed={false}
+        />,
+      );
+      expect(screen.getByTestId("assignee-select")).toBeInTheDocument();
+    });
+  });
+
+  describe("취소 버튼", () => {
+    test("클릭 시 onClose를 호출한다", async () => {
+      render(<TodoCreateModal {...defaultProps} />);
+      await userEvent.click(screen.getByRole("button", { name: "취소" }));
+      expect(defaultProps.onClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("isPending 상태", () => {
+    test("isPending=true이면 할일 생성 버튼이 비활성화된다", () => {
+      mockUseCreateTodoForm.mockReturnValue({
+        ...defaultFormState,
+        isPending: true,
+      });
+
+      render(<TodoCreateModal {...defaultProps} />);
+
+      const submitBtn = screen.getByRole("button", { name: "할일 생성" });
+      expect(submitBtn).toHaveClass("pointer-events-none");
+    });
+
+    test("isPending=false이면 할일 생성 버튼이 활성화된다", () => {
+      mockUseCreateTodoForm.mockReturnValue({
+        ...defaultFormState,
+        isPending: false,
+      });
+
+      render(<TodoCreateModal {...defaultProps} />);
+
+      const submitBtn = screen.getByRole("button", { name: "할일 생성" });
+      expect(submitBtn).not.toHaveClass("pointer-events-none");
+    });
+  });
+});
diff --git a/src/features/todo/ui/CreateTodoModal/TodoCreateModal.tsx b/src/features/todo/ui/CreateTodoModal/TodoCreateModal.tsx
new file mode 100644
index 00000000..b7a55199
--- /dev/null
+++ b/src/features/todo/ui/CreateTodoModal/TodoCreateModal.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import type { Member } from "@/entities/team";
+import { useCreateTodoForm } from "@/features/todo/hooks/useCreateTodoForm";
+import { useGoalId } from "@/shared/hooks/useGoalId";
+import Button from "@/shared/ui/Button/Button/Button";
+import Input from "@/shared/ui/Input";
+import { Modal } from "@/shared/ui/Modal";
+import { Spacing } from "@/shared/ui/Spacing";
+
+import { AssigneeSelect } from "./AssigneeSelect";
+
+interface TodoCreateModalProps {
+  onClose: () => void;
+  goalName: string;
+  teamName: string;
+  memberList: Member[];
+  isAssigneeFixed: boolean;
+  fixedAssigneeNickname?: string;
+  initialAssigneeIds: number[];
+}
+
+export function TodoCreateModal({
+  onClose,
+  goalName,
+  teamName,
+  memberList,
+  isAssigneeFixed,
+  fixedAssigneeNickname,
+  initialAssigneeIds,
+}: TodoCreateModalProps) {
+  const goalId = useGoalId();
+
+  const {
+    assigneeIds,
+    setAssigneeIds,
+    startDate,
+    handleStartDateChange,
+    handleSubmit,
+    isPending,
+  } = useCreateTodoForm({ goalId, onSuccess: onClose, initialAssigneeIds });
+
+  return (
+    <Modal.Root onClose={onClose}>
+      <Modal.Backdrop />
+      <form
+        onSubmit={handleSubmit}
+        className="relative z-10 flex max-h-[90vh] w-full max-w-[488px] flex-col items-start overflow-y-scroll rounded-2xl bg-white p-8 shadow-xl"
+      >
+        <div className="flex w-fit items-center justify-start gap-[6px]">
+          <h2 className="typography-heading-2 font-semibold">{goalName}</h2>
+          <span className="typography-label-2 rounded-lg bg-gray-100 px-[10px] py-1 font-semibold text-gray-400">
+            {teamName}
+          </span>
+        </div>
+
+        <Spacing size={32} />
+
+        <div className="flex w-full flex-col gap-6">
+          <div className="flex w-full flex-col items-start gap-1">
+            <label className="typography-body-2 text-label-neutral font-semibold">
+              목표
+            </label>
+            <div className="w-full">
+              <Input
+                variant="disabled"
+                type="text"
+                name="goal"
+                className="w-full"
+                value={goalName}
+                disabled
+              />
+            </div>
+          </div>
+
+          <div className="flex w-full flex-col items-start gap-1">
+            <label className="typography-body-2 text-label-neutral font-semibold">
+              제목 <span className="typography-body-2 text-red-normal">*</span>
+            </label>
+            <div className="w-full">
+              <Input
+                type="text"
+                name="title"
+                className="w-full"
+                placeholder="할 일 제목을 입력해주세요"
+                required
+              />
+            </div>
+          </div>
+
+          <div className="flex w-full flex-col items-start gap-1">
+            <label className="typography-body-2 text-label-neutral font-semibold">
+              시작 날짜
+              <span className="typography-body-2 text-red-normal">*</span>
+            </label>
+            <div className="w-full">
+              <Input
+                type="date"
+                name="startDate"
+                className="w-full"
+                placeholder="시작 날짜를 선택해주세요"
+                value={startDate}
+                onChange={handleStartDateChange}
+                required
+              />
+            </div>
+          </div>
+
+          <div className="flex w-full flex-col items-start gap-1">
+            <label className="typography-body-2 text-label-neutral font-semibold">
+              마감 날짜
+              <span className="typography-body-2 text-red-normal">*</span>
+            </label>
+            <div className="w-full">
+              <Input
+                type="date"
+                name="dueDate"
+                className="w-full"
+                placeholder="마감 날짜를 선택해주세요"
+                min={startDate}
+                required
+              />
+            </div>
+          </div>
+
+          <div className="flex w-full flex-col items-start gap-1">
+            <label className="typography-body-2 text-label-neutral font-semibold">
+              담당자
+            </label>
+            <div className="w-full">
+              {isAssigneeFixed ? (
+                <div className="min-h-11 w-full rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-sm leading-5 font-medium text-gray-500">
+                  {fixedAssigneeNickname ?? "나"}
+                </div>
+              ) : (
+                <AssigneeSelect
+                  members={memberList}
+                  value={assigneeIds}
+                  onChange={setAssigneeIds}
+                  placeholder="담당자를 선택해주세요"
+                />
+              )}
+            </div>
+          </div>
+
+          <div className="flex w-full flex-col items-start gap-1">
+            <label className="typography-body-2 text-label-neutral font-semibold">
+              메모
+            </label>
+            <div className="w-full">
+              <textarea
+                name="memo"
+                className="h-[120px] w-full resize-none rounded-xl border border-gray-300 p-3"
+                placeholder="80자 이내로 입력해주세요"
+                maxLength={80}
+              />
+            </div>
+          </div>
+        </div>
+
+        <Spacing size={40} />
+
+        <div className="flex w-full items-center justify-between gap-2">
+          <button
+            type="button"
+            className="shadow-[0 0 14px 0 rgba(138, 138, 138, 0.08)] h-[64px] w-full cursor-pointer rounded-full border border-gray-300 px-4 py-3"
+            onClick={onClose}
+          >
+            <span className="typography-body-2 font-semibold text-gray-400">
+              취소
+            </span>
+          </button>
+          <Button
+            color="gray"
+            size="xxl"
+            className="w-full"
+            type="submit"
+            isDisabled={isPending}
+          >
+            할일 생성
+          </Button>
+        </div>
+      </form>
+    </Modal.Root>
+  );
+}
diff --git a/src/features/todo/ui/List/CreateButton.stories.tsx b/src/features/todo/ui/List/CreateButton.stories.tsx
new file mode 100644
index 00000000..86224452
--- /dev/null
+++ b/src/features/todo/ui/List/CreateButton.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { CreateButton } from "./CreateButton";
+
+const meta = {
+  title: "features/todo/List/CreateButton",
+  component: CreateButton,
+  tags: ["autodocs"],
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: [["goalId", "1"]],
+      },
+    },
+  },
+} satisfies Meta<typeof CreateButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/features/todo/ui/List/CreateButton.test.tsx b/src/features/todo/ui/List/CreateButton.test.tsx
new file mode 100644
index 00000000..c08e80f2
--- /dev/null
+++ b/src/features/todo/ui/List/CreateButton.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { CreateButton } from "./CreateButton";
+
+const mockOpenTodoCreateModal = jest.fn();
+
+jest.mock("@/features/todo/hooks/useTodoCreateModal", () => ({
+  useTodoCreateModal: () => ({
+    openTodoCreateModal: mockOpenTodoCreateModal,
+  }),
+}));
+
+jest.mock("@/shared/ui/Icon", () => ({
+  Icon: ({ name }: { name: string }) => <span data-testid={`icon-${name}`} />,
+}));
+
+describe("CreateButton", () => {
+  beforeEach(() => {
+    mockOpenTodoCreateModal.mockClear();
+  });
+
+  test("'할 일 추가' 버튼이 렌더링된다", () => {
+    render(<CreateButton />);
+    expect(screen.getByText("할 일 추가")).toBeInTheDocument();
+  });
+
+  test("버튼 클릭 시 openTodoCreateModal이 호출된다", async () => {
+    render(<CreateButton />);
+    await userEvent.click(screen.getByRole("button", { name: /할 일 추가/i }));
+    expect(mockOpenTodoCreateModal).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/features/todo/ui/List/Item.stories.tsx b/src/features/todo/ui/List/Item.stories.tsx
new file mode 100644
index 00000000..78ed472e
--- /dev/null
+++ b/src/features/todo/ui/List/Item.stories.tsx
@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import type { Todo } from "@/entities/todo";
+
+import { Item } from "./Item";
+
+const baseTodo: Todo = {
+  id: 1,
+  goalId: 1,
+  title: "컴포넌트 리팩토링 작업",
+  startDate: "2026-04-01",
+  dueDate: "2026-05-01",
+  status: "TODO",
+  memo: "",
+  assigneeSummary: "홍길동",
+  assignees: [{ userId: 101, nickname: "홍길동" }],
+};
+
+const meta = {
+  title: "features/todo/List/Item",
+  component: Item,
+  tags: ["autodocs"],
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        segments: [["goalId", "1"]],
+      },
+    },
+  },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <ul className="w-full rounded-2xl bg-white">
+        <Story />
+      </ul>
+    ),
+  ],
+} satisfies Meta<typeof Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const TodoStatus: Story = {
+  args: { todo: { ...baseTodo, status: "TODO" } },
+};
+
+export const DoingStatus: Story = {
+  args: { todo: { ...baseTodo, status: "DOING" } },
+};
+
+export const DoneStatus: Story = {
+  args: { todo: { ...baseTodo, status: "DONE" } },
+};
+
+export const NoAssignees: Story = {
+  args: {
+    todo: {
+      ...baseTodo,
+      assignees: [],
+      assigneeSummary: "",
+    },
+  },
+};
+
+export const MultipleAssignees: Story = {
+  name: "담당자 5명 (아바타 4개까지 표시)",
+  args: {
+    todo: {
+      ...baseTodo,
+      assignees: [
+        { userId: 101, nickname: "홍길동" },
+        { userId: 102, nickname: "김철수" },
+        { userId: 103, nickname: "이영희" },
+        { userId: 104, nickname: "박민수" },
+        { userId: 105, nickname: "최지수" },
+      ],
+      assigneeSummary: "홍길동 외 4명",
+    },
+  },
+};
+
+export const LongTitle: Story = {
+  name: "긴 제목 (말줄임 처리)",
+  args: {
+    todo: {
+      ...baseTodo,
+      title:
+        "매우 긴 할 일 제목이 들어왔을 때 텍스트가 올바르게 잘리는지 확인하는 스토리입니다",
+    },
+  },
+};
diff --git a/src/features/todo/ui/List/Item.test.tsx b/src/features/todo/ui/List/Item.test.tsx
new file mode 100644
index 00000000..15307438
--- /dev/null
+++ b/src/features/todo/ui/List/Item.test.tsx
@@ -0,0 +1,118 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import type { Todo } from "@/entities/todo";
+import { useTodoDeleteModal } from "@/features/todo/hooks/useTodoDeleteModal";
+import { useTodoDetailModal } from "@/features/todo/hooks/useTodoDetailModal";
+
+import { Item } from "./Item";
+
+jest.mock("@/features/todo/hooks/useTodoDeleteModal", () => ({
+  useTodoDeleteModal: jest.fn(),
+}));
+
+jest.mock("@/features/todo/hooks/useTodoDetailModal", () => ({
+  useTodoDetailModal: jest.fn(),
+}));
+
+jest.mock("@/features/todo/utils/formatDDay", () => ({
+  formatDDay: (dueDate: string) => `D-test(${dueDate})`,
+}));
+
+jest.mock("@/shared/ui/Icon", () => ({
+  Icon: ({ name }: { name: string }) => <span data-testid={`icon-${name}`} />,
+}));
+
+jest.mock("./TodoAssigneeAvatars", () => ({
+  TodoAssigneeAvatars: () => <div data-testid="assignee-avatars" />,
+}));
+
+jest.mock("./TodoStatusSelect", () => ({
+  TodoStatusSelect: () => <div data-testid="todo-status-select" />,
+}));
+
+const mockOpenTodoDeleteModal = jest.fn();
+const mockOpenTodoDetailModal = jest.fn();
+
+const mockUseTodoDeleteModal = useTodoDeleteModal as jest.MockedFunction<
+  typeof useTodoDeleteModal
+>;
+const mockUseTodoDetailModal = useTodoDetailModal as jest.MockedFunction<
+  typeof useTodoDetailModal
+>;
+
+const makeTodo = (overrides: Partial<Todo> = {}): Todo => ({
+  id: 1,
+  goalId: 100,
+  title: "테스트 할 일",
+  startDate: "2026-04-01",
+  dueDate: "2026-12-31",
+  status: "TODO",
+  memo: "",
+  assigneeSummary: "",
+  assignees: [],
+  ...overrides,
+});
+
+describe("Item", () => {
+  beforeEach(() => {
+    mockOpenTodoDeleteModal.mockClear();
+    mockOpenTodoDetailModal.mockClear();
+
+    mockUseTodoDeleteModal.mockReturnValue({
+      openTodoDeleteModal: mockOpenTodoDeleteModal,
+      closeTodoDeleteModal: jest.fn(),
+    });
+    mockUseTodoDetailModal.mockReturnValue({
+      openTodoDetailModal: mockOpenTodoDetailModal,
+      closeTodoDetailModal: jest.fn(),
+    });
+  });
+
+  describe("초기 렌더링", () => {
+    test("할 일 제목이 표시된다", () => {
+      render(<Item todo={makeTodo({ title: "오늘 할 일" })} />);
+      expect(screen.getByText("오늘 할 일")).toBeInTheDocument();
+    });
+
+    test("formatDDay로 포맷된 마감일이 표시된다", () => {
+      render(<Item todo={makeTodo({ dueDate: "2026-12-31" })} />);
+      expect(screen.getByText("D-test(2026-12-31)")).toBeInTheDocument();
+    });
+
+    test("상태 셀렉트가 렌더링된다", () => {
+      render(<Item todo={makeTodo()} />);
+      expect(screen.getByTestId("todo-status-select")).toBeInTheDocument();
+    });
+
+    test("담당자 아바타 영역이 렌더링된다", () => {
+      render(<Item todo={makeTodo()} />);
+      expect(screen.getByTestId("assignee-avatars")).toBeInTheDocument();
+    });
+
+    test("삭제 아이콘 버튼이 렌더링된다", () => {
+      render(<Item todo={makeTodo()} />);
+      expect(screen.getByTestId("icon-Trash")).toBeInTheDocument();
+    });
+  });
+
+  describe("인터랙션", () => {
+    test("아이템 영역 클릭 시 openTodoDetailModal이 호출된다", async () => {
+      render(<Item todo={makeTodo({ title: "클릭할 할 일" })} />);
+      await userEvent.click(screen.getByText("클릭할 할 일"));
+      expect(mockOpenTodoDetailModal).toHaveBeenCalledTimes(1);
+    });
+
+    test("삭제 버튼 클릭 시 openTodoDeleteModal이 호출된다", async () => {
+      render(<Item todo={makeTodo()} />);
+      await userEvent.click(screen.getByRole("button"));
+      expect(mockOpenTodoDeleteModal).toHaveBeenCalledTimes(1);
+    });
+
+    test("삭제 버튼 클릭 시 이벤트가 부모로 전파되지 않아 openTodoDetailModal이 호출되지 않는다", async () => {
+      render(<Item todo={makeTodo()} />);
+      await userEvent.click(screen.getByRole("button"));
+      expect(mockOpenTodoDetailModal).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/features/todo/ui/List/Item.tsx b/src/features/todo/ui/List/Item.tsx
index 33dff2a9..606a4c10 100644
--- a/src/features/todo/ui/List/Item.tsx
+++ b/src/features/todo/ui/List/Item.tsx
@@ -22,7 +22,7 @@ export const Item = ({ todo }: ItemProps) => {
 
   return (
     <li
-      className="flex w-full items-center justify-between px-3 py-[10px]"
+      className="flex w-full items-center justify-between px-3 py-2.5"
       onClick={openTodoDetailModal}
     >
       <div className="flex min-w-0 flex-1 items-center justify-start gap-2">
diff --git a/src/features/todo/ui/List/TodoAssigneeAvatars.stories.tsx b/src/features/todo/ui/List/TodoAssigneeAvatars.stories.tsx
new file mode 100644
index 00000000..31a9c57f
--- /dev/null
+++ b/src/features/todo/ui/List/TodoAssigneeAvatars.stories.tsx
@@ -0,0 +1,34 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+
+import { TodoAssigneeAvatars } from "./TodoAssigneeAvatars";
+
+const meta = {
+  title: "features/todo/List/TodoAssigneeAvatars",
+  component: TodoAssigneeAvatars,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+const makeAssignees = (count: number) =>
+  Array.from({ length: count }, (_, i) => ({
+    userId: i + 1,
+    nickname: `담당자${i + 1}`,
+  }));
+
+export const NoAssignees: StoryObj<typeof TodoAssigneeAvatars> = {
+  args: { assignees: [] },
+};
+
+export const TwoAssignees: StoryObj<typeof TodoAssigneeAvatars> = {
+  args: { assignees: makeAssignees(2) },
+};
+
+export const FourAssignees: StoryObj<typeof TodoAssigneeAvatars> = {
+  args: { assignees: makeAssignees(4) },
+};
+
+export const OverMax: StoryObj<typeof TodoAssigneeAvatars> = {
+  name: "6명 (최대 4개만 표시)",
+  args: { assignees: makeAssignees(6) },
+};
diff --git a/src/features/todo/ui/List/TodoAssigneeAvatars.test.tsx b/src/features/todo/ui/List/TodoAssigneeAvatars.test.tsx
new file mode 100644
index 00000000..034fae2a
--- /dev/null
+++ b/src/features/todo/ui/List/TodoAssigneeAvatars.test.tsx
@@ -0,0 +1,38 @@
+import { render, screen } from "@testing-library/react";
+
+import { TodoAssigneeAvatars } from "./TodoAssigneeAvatars";
+
+jest.mock("next/image", () => ({
+  __esModule: true,
+  default: ({ alt }: { src: string; alt: string }) => <img alt={alt} />,
+}));
+
+jest.mock("@/shared/assets/images/avatar.png", () => ({ src: "/avatar.png" }));
+
+const makeAssignees = (count: number) =>
+  Array.from({ length: count }, (_, i) => ({
+    userId: i + 1,
+    nickname: `담당자${i + 1}`,
+  }));
+
+describe("TodoAssigneeAvatars", () => {
+  test("담당자가 없으면 아바타 이미지가 렌더링되지 않는다", () => {
+    render(<TodoAssigneeAvatars assignees={[]} />);
+    expect(screen.queryByRole("img")).not.toBeInTheDocument();
+  });
+
+  test("담당자가 2명이면 아바타 이미지가 2개 렌더링된다", () => {
+    render(<TodoAssigneeAvatars assignees={makeAssignees(2)} />);
+    expect(screen.getAllByRole("img")).toHaveLength(2);
+  });
+
+  test("담당자가 4명이면 아바타 이미지가 4개 렌더링된다", () => {
+    render(<TodoAssigneeAvatars assignees={makeAssignees(4)} />);
+    expect(screen.getAllByRole("img")).toHaveLength(4);
+  });
+
+  test("담당자가 5명이어도 최대 4개의 아바타만 렌더링된다", () => {
+    render(<TodoAssigneeAvatars assignees={makeAssignees(5)} />);
+    expect(screen.getAllByRole("img")).toHaveLength(4);
+  });
+});
diff --git a/src/features/todo/ui/List/TodoAssigneeAvatars.tsx b/src/features/todo/ui/List/TodoAssigneeAvatars.tsx
index 6f6ccd6c..50242a45 100644
--- a/src/features/todo/ui/List/TodoAssigneeAvatars.tsx
+++ b/src/features/todo/ui/List/TodoAssigneeAvatars.tsx
@@ -5,6 +5,8 @@ import Image from "next/image";
 import type { Todo } from "@/entities/todo";
 import defaultAvatar from "@/shared/assets/images/avatar.png";
 
+const MAX_VISIBLE_ASSIGNEES = 4;
+
 interface TodoAssigneeAvatarsProps {
   assignees: Todo["assignees"];
 }
@@ -14,23 +16,23 @@ export const TodoAssigneeAvatars = ({
 }: TodoAssigneeAvatarsProps) => {
   return (
     <div className="flex items-center">
-      {/* @TODO: 담당자 이미지 받아서 처리 필요 ( 중간 이후 )*/}
-      {/* @TODO: mouse hover 시 담당자 정보 표시? */}
-      {(assignees ?? []).slice(0, 4).map((assignee, index) => (
-        <span
-          key={assignee.userId}
-          className="relative -ml-[14px] shrink-0 first:ml-0"
-          style={{ zIndex: index + 1 }}
-        >
-          <Image
-            src={defaultAvatar.src}
-            alt="Avatar Image"
-            width={40}
-            height={40}
-            className="shrink-0 rounded-full object-cover"
-          />
-        </span>
-      ))}
+      {(assignees ?? [])
+        .slice(0, MAX_VISIBLE_ASSIGNEES)
+        .map((assignee, index) => (
+          <span
+            key={assignee.userId}
+            className="relative -ml-3.5 shrink-0 first:ml-0"
+            style={{ zIndex: index + 1 }}
+          >
+            <Image
+              src={defaultAvatar.src}
+              alt="Avatar Image"
+              width={40}
+              height={40}
+              className="shrink-0 rounded-full object-cover"
+            />
+          </span>
+        ))}
     </div>
   );
 };
diff --git a/src/features/todo/ui/List/TodoStatusSelect.stories.tsx b/src/features/todo/ui/List/TodoStatusSelect.stories.tsx
new file mode 100644
index 00000000..3c34fb63
--- /dev/null
+++ b/src/features/todo/ui/List/TodoStatusSelect.stories.tsx
@@ -0,0 +1,37 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+
+import type { Todo } from "@/entities/todo";
+
+import { TodoStatusSelect } from "./TodoStatusSelect";
+
+const meta = {
+  title: "features/todo/List/TodoStatusSelect",
+  component: TodoStatusSelect,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+const baseTodo: Todo = {
+  id: 1,
+  goalId: 100,
+  title: "테스트 할 일",
+  startDate: "2026-04-01",
+  dueDate: "2026-12-31",
+  status: "TODO",
+  memo: "",
+  assigneeSummary: "",
+  assignees: [],
+};
+
+export const TodoStatus: StoryObj<typeof TodoStatusSelect> = {
+  args: { todo: { ...baseTodo, status: "TODO" } },
+};
+
+export const DoingStatus: StoryObj<typeof TodoStatusSelect> = {
+  args: { todo: { ...baseTodo, status: "DOING" } },
+};
+
+export const DoneStatus: StoryObj<typeof TodoStatusSelect> = {
+  args: { todo: { ...baseTodo, status: "DONE" } },
+};
diff --git a/src/features/todo/ui/List/TodoStatusSelect.test.tsx b/src/features/todo/ui/List/TodoStatusSelect.test.tsx
new file mode 100644
index 00000000..e2b01efa
--- /dev/null
+++ b/src/features/todo/ui/List/TodoStatusSelect.test.tsx
@@ -0,0 +1,142 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import type { Todo } from "@/entities/todo";
+import { usePatchTodoStatusMutation } from "@/features/todo/mutation/usePatchTodoStatusMutation";
+
+import { TodoStatusSelect } from "./TodoStatusSelect";
+
+jest.mock("@/features/todo/mutation/usePatchTodoStatusMutation", () => ({
+  usePatchTodoStatusMutation: jest.fn(),
+}));
+
+jest.mock("@/shared/ui/Icon", () => ({
+  Icon: ({ name }: { name: string }) => <span data-testid={`icon-${name}`} />,
+}));
+
+const mockMutate = jest.fn();
+const mockUsePatchTodoStatusMutation =
+  usePatchTodoStatusMutation as jest.MockedFunction<
+    typeof usePatchTodoStatusMutation
+  >;
+
+const makeTodo = (overrides: Partial<Todo> = {}): Todo => ({
+  id: 1,
+  goalId: 100,
+  title: "테스트 할 일",
+  startDate: "2026-04-01",
+  dueDate: "2026-12-31",
+  status: "TODO",
+  memo: "",
+  assigneeSummary: "",
+  assignees: [],
+  ...overrides,
+});
+
+describe("TodoStatusSelect", () => {
+  beforeEach(() => {
+    mockMutate.mockClear();
+    mockUsePatchTodoStatusMutation.mockReturnValue({
+      mutate: mockMutate,
+      isPending: false,
+    } as unknown as ReturnType<typeof usePatchTodoStatusMutation>);
+  });
+
+  describe("초기 렌더링", () => {
+    test("현재 상태 배지가 표시된다", () => {
+      render(<TodoStatusSelect todo={makeTodo({ status: "TODO" })} />);
+      expect(screen.getByText("TODO")).toBeInTheDocument();
+    });
+
+    test("DOING 상태의 배지가 표시된다", () => {
+      render(<TodoStatusSelect todo={makeTodo({ status: "DOING" })} />);
+      expect(screen.getByText("DOING")).toBeInTheDocument();
+    });
+
+    test("초기에 드롭다운이 닫혀 있다", () => {
+      render(<TodoStatusSelect todo={makeTodo({ status: "TODO" })} />);
+      expect(screen.queryByText("DONE")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("드롭다운 열기", () => {
+    test("배지 버튼 클릭 시 모든 상태 옵션이 표시된다", async () => {
+      render(<TodoStatusSelect todo={makeTodo({ status: "TODO" })} />);
+      await userEvent.click(screen.getByRole("button"));
+      expect(screen.getByText("DOING")).toBeInTheDocument();
+      expect(screen.getByText("DONE")).toBeInTheDocument();
+    });
+  });
+
+  describe("상태 변경", () => {
+    test("DOING 선택 시 patchTodoStatus가 DOING 상태로 호출된다", async () => {
+      const todo = makeTodo({
+        id: 1,
+        goalId: 100,
+        status: "TODO",
+        assignees: [{ userId: 5, nickname: "홍길동" }],
+      });
+      render(<TodoStatusSelect todo={todo} />);
+      await userEvent.click(screen.getByRole("button"));
+
+      const doingText = screen.getByText("DOING");
+      await userEvent.click(doingText.closest("button")!);
+
+      expect(mockMutate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          goalId: "100",
+          todoId: "1",
+          todoData: expect.objectContaining({
+            status: "DOING",
+            assigneeIds: [5],
+          }),
+        }),
+      );
+    });
+
+    test("DONE 선택 시 patchTodoStatus가 DONE 상태로 호출된다", async () => {
+      render(<TodoStatusSelect todo={makeTodo({ status: "TODO" })} />);
+      await userEvent.click(screen.getByRole("button"));
+
+      const doneText = screen.getByText("DONE");
+      await userEvent.click(doneText.closest("button")!);
+
+      expect(mockMutate).toHaveBeenCalledWith(
+        expect.objectContaining({
+          todoData: expect.objectContaining({ status: "DONE" }),
+        }),
+      );
+    });
+  });
+
+  describe("isPending 상태", () => {
+    test("isPending이 true이면 옵션 버튼이 disabled 처리된다", async () => {
+      mockUsePatchTodoStatusMutation.mockReturnValue({
+        mutate: mockMutate,
+        isPending: true,
+      } as unknown as ReturnType<typeof usePatchTodoStatusMutation>);
+
+      render(<TodoStatusSelect todo={makeTodo({ status: "TODO" })} />);
+      await userEvent.click(screen.getByRole("button"));
+
+      const allButtons = screen.getAllByRole("button");
+      const optionButtons = allButtons.slice(1);
+      optionButtons.forEach((btn) => {
+        expect(btn).toBeDisabled();
+      });
+    });
+  });
+
+  describe("이벤트 전파 차단", () => {
+    test("상태 셀렉트 컨테이너 클릭이 부모로 전파되지 않는다", async () => {
+      const parentClick = jest.fn();
+      render(
+        <div onClick={parentClick}>
+          <TodoStatusSelect todo={makeTodo()} />
+        </div>,
+      );
+      await userEvent.click(screen.getByRole("button"));
+      expect(parentClick).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/features/todo/ui/List/TodoStatusSelect.tsx b/src/features/todo/ui/List/TodoStatusSelect.tsx
index aa78f591..26ccb94f 100644
--- a/src/features/todo/ui/List/TodoStatusSelect.tsx
+++ b/src/features/todo/ui/List/TodoStatusSelect.tsx
@@ -57,7 +57,7 @@ export const TodoStatusSelect = ({ todo }: TodoStatusSelectProps) => {
 
   const { mutate: patchTodoStatus, isPending } = usePatchTodoStatusMutation();
 
-  const currentStatus = (selected || todo.status) as TodoStatus;
+  const currentStatus = selected as TodoStatus;
 
   const handleSelect = (value: string) => {
     if (isPending) return;
diff --git a/src/features/todo/ui/List/index.stories.tsx b/src/features/todo/ui/List/index.stories.tsx
new file mode 100644
index 00000000..46127971
--- /dev/null
+++ b/src/features/todo/ui/List/index.stories.tsx
@@ -0,0 +1,47 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+
+import { TodoList } from "./index";
+
+const meta = {
+  title: "features/todo/List/TodoList",
+  component: TodoList.List,
+  tags: ["autodocs"],
+  args: {
+    name: "TODO",
+    height: "400px",
+    sortOptions: ["마감일 순", "최신순", "오래된순"],
+    selectedSort: "마감일 순",
+    onSortChange: () => {},
+  },
+};
+
+export default meta;
+
+export const Empty: StoryObj<typeof TodoList.List> = {
+  render: (args) => <TodoList.List {...args}>{null}</TodoList.List>,
+};
+
+export const WithItems: StoryObj<typeof TodoList.List> = {
+  render: (args) => (
+    <TodoList.List {...args}>
+      <li className="px-3 py-2 text-sm text-gray-700">할 일 항목 1</li>
+      <li className="px-3 py-2 text-sm text-gray-700">할 일 항목 2</li>
+      <li className="px-3 py-2 text-sm text-gray-700">할 일 항목 3</li>
+    </TodoList.List>
+  ),
+};
+
+export const WithFooter: StoryObj<typeof TodoList.List> = {
+  render: (args) => (
+    <TodoList.List
+      {...args}
+      footer={
+        <button className="w-full rounded-lg bg-blue-800 py-2 text-sm font-semibold text-white">
+          할 일 추가
+        </button>
+      }
+    >
+      <li className="px-3 py-2 text-sm text-gray-700">할 일 항목 1</li>
+    </TodoList.List>
+  ),
+};
diff --git a/src/features/todo/ui/List/index.test.tsx b/src/features/todo/ui/List/index.test.tsx
new file mode 100644
index 00000000..1be6ae6d
--- /dev/null
+++ b/src/features/todo/ui/List/index.test.tsx
@@ -0,0 +1,121 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { TodoList } from "./index";
+
+jest.mock("@/shared/ui/Spacing", () => ({
+  Spacing: () => null,
+}));
+
+jest.mock("@/shared/ui/Order", () => ({
+  Order: ({
+    selected,
+    onSelect,
+    options,
+  }: {
+    selected: string;
+    onSelect: (v: string) => void;
+    options: string[];
+  }) => (
+    <div>
+      <span data-testid="order-selected">{selected}</span>
+      {options.map((opt) => (
+        <button
+          key={opt}
+          onClick={() => onSelect(opt)}
+        >
+          {opt}
+        </button>
+      ))}
+    </div>
+  ),
+}));
+
+describe("TodoList.List", () => {
+  const onSortChange = jest.fn();
+
+  const defaultProps = {
+    name: "TODO",
+    height: "728px",
+    sortOptions: ["마감일 순", "최신순", "오래된순"],
+    selectedSort: "마감일 순",
+    onSortChange,
+  };
+
+  beforeEach(() => {
+    onSortChange.mockClear();
+  });
+
+  describe("초기 렌더링", () => {
+    test("name이 헤딩으로 표시된다", () => {
+      render(
+        <TodoList.List {...defaultProps}>
+          <li>아이템</li>
+        </TodoList.List>,
+      );
+      expect(screen.getByRole("heading", { name: "TODO" })).toBeInTheDocument();
+    });
+
+    test("선택된 정렬 옵션이 Order에 전달된다", () => {
+      render(
+        <TodoList.List {...defaultProps}>
+          <li>아이템</li>
+        </TodoList.List>,
+      );
+      expect(screen.getByTestId("order-selected")).toHaveTextContent(
+        "마감일 순",
+      );
+    });
+
+    test("children이 목록에 렌더링된다", () => {
+      render(
+        <TodoList.List {...defaultProps}>
+          <li>아이템 1</li>
+          <li>아이템 2</li>
+        </TodoList.List>,
+      );
+      expect(screen.getByText("아이템 1")).toBeInTheDocument();
+      expect(screen.getByText("아이템 2")).toBeInTheDocument();
+    });
+  });
+
+  describe("footer 조건부 렌더링", () => {
+    test("footer가 전달되면 렌더링된다", () => {
+      render(
+        <TodoList.List
+          {...defaultProps}
+          footer={<button>할 일 추가</button>}
+        >
+          <li>아이템</li>
+        </TodoList.List>,
+      );
+      expect(
+        screen.getByRole("button", { name: "할 일 추가" }),
+      ).toBeInTheDocument();
+    });
+
+    test("footer가 없으면 footer 영역이 렌더링되지 않는다", () => {
+      render(
+        <TodoList.List {...defaultProps}>
+          <li>아이템</li>
+        </TodoList.List>,
+      );
+      expect(
+        screen.queryByRole("button", { name: "할 일 추가" }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe("정렬 변경", () => {
+    test("정렬 옵션 선택 시 onSortChange가 선택된 값으로 호출된다", async () => {
+      render(
+        <TodoList.List {...defaultProps}>
+          <li>아이템</li>
+        </TodoList.List>,
+      );
+      await userEvent.click(screen.getByRole("button", { name: "최신순" }));
+      expect(onSortChange).toHaveBeenCalledWith("최신순");
+      expect(onSortChange).toHaveBeenCalledTimes(1);
+    });
+  });
+});
diff --git a/src/features/todo/ui/List/index.tsx b/src/features/todo/ui/List/index.tsx
index a805ce0d..bc470ece 100644
--- a/src/features/todo/ui/List/index.tsx
+++ b/src/features/todo/ui/List/index.tsx
@@ -1,10 +1,11 @@
 "use client";
 
+import { Order } from "@/shared/ui/Order";
 import { Spacing } from "@/shared/ui/Spacing";
+import { cn } from "@/shared/utils/styles/cn";
 
 import { CreateButton } from "./CreateButton";
 import { Item } from "./Item";
-import { Order } from "./Order";
 
 interface ListProps {
   name: string;
@@ -38,24 +39,20 @@ const ListComponent = ({
 
       <Spacing size={20} />
 
-      {footer != null ? (
-        <div
-          style={{ height }}
-          className="flex w-full flex-col overflow-hidden rounded-4xl bg-white px-5 py-8"
+      <div
+        style={{ height }}
+        className="flex w-full flex-col overflow-hidden rounded-4xl bg-white px-5 py-8"
+      >
+        <ul
+          className={cn(
+            "relative overflow-y-auto",
+            footer != null ? "min-h-0 flex-1" : "w-full",
+          )}
         >
-          <ul className="relative min-h-0 flex-1 overflow-y-auto">
-            {children}
-          </ul>
-          <div className="shrink-0 px-5 pb-8">{footer}</div>
-        </div>
-      ) : (
-        <div
-          style={{ height }}
-          className="flex w-full flex-col overflow-hidden rounded-4xl bg-white px-5 py-8"
-        >
-          <ul className="relative w-full overflow-y-scroll">{children}</ul>
-        </div>
-      )}
+          {children}
+        </ul>
+        {footer != null && <div className="shrink-0 px-5 pb-8">{footer}</div>}
+      </div>
     </div>
   );
 };
diff --git a/src/features/todo/ui/TodoDeleteModal/TodoDeleteModal.stories.tsx b/src/features/todo/ui/TodoDeleteModal/TodoDeleteModal.stories.tsx
new file mode 100644
index 00000000..e15d9605
--- /dev/null
+++ b/src/features/todo/ui/TodoDeleteModal/TodoDeleteModal.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { TodoDeleteModal } from "./TodoDeleteModal";
+
+const meta = {
+  title: "features/todo/TodoDeleteModal",
+  component: TodoDeleteModal,
+  tags: ["autodocs"],
+  args: {
+    onClose: () => {},
+    onConfirm: () => {},
+  },
+} satisfies Meta<typeof TodoDeleteModal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/features/todo/ui/TodoDeleteModal/TodoDeleteModal.test.tsx b/src/features/todo/ui/TodoDeleteModal/TodoDeleteModal.test.tsx
new file mode 100644
index 00000000..f290ca5a
--- /dev/null
+++ b/src/features/todo/ui/TodoDeleteModal/TodoDeleteModal.test.tsx
@@ -0,0 +1,60 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { TodoDeleteModal } from "./TodoDeleteModal";
+
+describe("TodoDeleteModal", () => {
+  const defaultProps = {
+    onClose: jest.fn(),
+    onConfirm: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("초기 렌더링", () => {
+    test("삭제 확인 문구를 표시한다", () => {
+      render(<TodoDeleteModal {...defaultProps} />);
+      expect(screen.getByText("할 일을 삭제하시겠습니까?")).toBeInTheDocument();
+    });
+
+    test("취소 버튼을 표시한다", () => {
+      render(<TodoDeleteModal {...defaultProps} />);
+      expect(screen.getByRole("button", { name: "취소" })).toBeInTheDocument();
+    });
+
+    test("삭제 버튼을 표시한다", () => {
+      render(<TodoDeleteModal {...defaultProps} />);
+      expect(screen.getByRole("button", { name: "삭제" })).toBeInTheDocument();
+    });
+  });
+
+  describe("취소 버튼", () => {
+    test("클릭 시 onClose를 호출한다", async () => {
+      render(<TodoDeleteModal {...defaultProps} />);
+      await userEvent.click(screen.getByRole("button", { name: "취소" }));
+      expect(defaultProps.onClose).toHaveBeenCalledTimes(1);
+    });
+
+    test("클릭 시 onConfirm은 호출하지 않는다", async () => {
+      render(<TodoDeleteModal {...defaultProps} />);
+      await userEvent.click(screen.getByRole("button", { name: "취소" }));
+      expect(defaultProps.onConfirm).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("삭제 버튼", () => {
+    test("클릭 시 onConfirm을 호출한다", async () => {
+      render(<TodoDeleteModal {...defaultProps} />);
+      await userEvent.click(screen.getByRole("button", { name: "삭제" }));
+      expect(defaultProps.onConfirm).toHaveBeenCalledTimes(1);
+    });
+
+    test("클릭 시 onClose는 호출하지 않는다", async () => {
+      render(<TodoDeleteModal {...defaultProps} />);
+      await userEvent.click(screen.getByRole("button", { name: "삭제" }));
+      expect(defaultProps.onClose).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/features/todo/ui/TodoDeleteModal/TodoDeleteModal.tsx b/src/features/todo/ui/TodoDeleteModal/TodoDeleteModal.tsx
new file mode 100644
index 00000000..b41aab6d
--- /dev/null
+++ b/src/features/todo/ui/TodoDeleteModal/TodoDeleteModal.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import Button from "@/shared/ui/Button/Button/Button";
+import { Modal } from "@/shared/ui/Modal";
+
+interface TodoDeleteModalProps {
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export const TodoDeleteModal = ({
+  onClose,
+  onConfirm,
+}: TodoDeleteModalProps) => {
+  return (
+    <Modal.Root onClose={onClose}>
+      <Modal.Backdrop />
+      <Modal.Content>
+        <Modal.Title>할 일을 삭제하시겠습니까?</Modal.Title>
+        <Modal.Actions>
+          <Button
+            variant="secondary"
+            size="md"
+            className="flex-1"
+            onClick={onClose}
+          >
+            취소
+          </Button>
+          <Button
+            variant="primary"
+            size="md"
+            className="flex-1"
+            onClick={onConfirm}
+          >
+            삭제
+          </Button>
+        </Modal.Actions>
+      </Modal.Content>
+    </Modal.Root>
+  );
+};
diff --git a/src/features/todo/ui/TodoDetailModal/TodoDetailModal.stories.tsx b/src/features/todo/ui/TodoDetailModal/TodoDetailModal.stories.tsx
new file mode 100644
index 00000000..fe2d3cfa
--- /dev/null
+++ b/src/features/todo/ui/TodoDetailModal/TodoDetailModal.stories.tsx
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import type { Todo } from "@/entities/todo";
+
+import { TodoDetailModal } from "./TodoDetailModal";
+
+const baseTodo: Todo = {
+  id: 1,
+  goalId: 10,
+  title: "컴포넌트 리팩토링 작업",
+  startDate: "2026-05-01",
+  dueDate: "2026-05-31",
+  status: "TODO",
+  memo: "Next.js App Router 기준으로 코드 정리 필요",
+  assigneeSummary: "홍길동",
+  assignees: [{ userId: 101, nickname: "홍길동" }],
+};
+
+const meta = {
+  title: "features/todo/TodoDetailModal",
+  component: TodoDetailModal,
+  tags: ["autodocs"],
+  args: {
+    onClose: () => {},
+    todo: baseTodo,
+    goalName: "디자인 시스템 완성",
+    teamName: "개인",
+  },
+} satisfies Meta<typeof TodoDetailModal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const TeamGoal: Story = {
+  name: "팀 목표",
+  args: {
+    teamName: "프론트엔드 팀",
+    todo: {
+      ...baseTodo,
+      assignees: [
+        { userId: 101, nickname: "홍길동" },
+        { userId: 102, nickname: "김철수" },
+      ],
+    },
+  },
+};
+
+export const NoAssignees: Story = {
+  name: "담당자 없음",
+  args: {
+    todo: {
+      ...baseTodo,
+      assignees: [],
+      assigneeSummary: "",
+    },
+  },
+};
+
+export const NoMemo: Story = {
+  name: "메모 없음",
+  args: {
+    todo: {
+      ...baseTodo,
+      memo: "",
+    },
+  },
+};
diff --git a/src/features/todo/ui/TodoDetailModal/TodoDetailModal.test.tsx b/src/features/todo/ui/TodoDetailModal/TodoDetailModal.test.tsx
new file mode 100644
index 00000000..dcbf1e97
--- /dev/null
+++ b/src/features/todo/ui/TodoDetailModal/TodoDetailModal.test.tsx
@@ -0,0 +1,123 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import type { Todo } from "@/entities/todo";
+
+import { TodoDetailModal } from "./TodoDetailModal";
+
+jest.mock("next/image", () => ({
+  __esModule: true,
+  // eslint-disable-next-line @next/next/no-img-element
+  default: ({ alt }: { alt: string }) => <img alt={alt} />,
+}));
+
+jest.mock("@/shared/ui/Icon", () => ({
+  Icon: ({ name }: { name: string }) => <span data-testid={`icon-${name}`} />,
+}));
+
+jest.mock("@/shared/assets/images/avatar.png", () => ({
+  src: "/avatar-fallback.png",
+}));
+
+const makeTodo = (overrides: Partial<Todo> = {}): Todo => ({
+  id: 1,
+  goalId: 10,
+  title: "컴포넌트 리팩토링",
+  startDate: "2026-05-01",
+  dueDate: "2026-05-31",
+  status: "TODO",
+  memo: "리팩토링 메모 내용",
+  assigneeSummary: "홍길동",
+  assignees: [{ userId: 101, nickname: "홍길동" }],
+  ...overrides,
+});
+
+const defaultProps = {
+  onClose: jest.fn(),
+  todo: makeTodo(),
+  goalName: "디자인 시스템 완성",
+  teamName: "개인",
+};
+
+describe("TodoDetailModal", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("초기 렌더링", () => {
+    test("할 일 제목을 표시한다", () => {
+      render(<TodoDetailModal {...defaultProps} />);
+      expect(screen.getByText("컴포넌트 리팩토링")).toBeInTheDocument();
+    });
+
+    test("팀 이름을 표시한다", () => {
+      render(<TodoDetailModal {...defaultProps} />);
+      expect(screen.getByText("개인")).toBeInTheDocument();
+    });
+
+    test("목표 이름을 표시한다", () => {
+      render(<TodoDetailModal {...defaultProps} />);
+      expect(screen.getByText("디자인 시스템 완성")).toBeInTheDocument();
+    });
+
+    test("시작 날짜를 표시한다", () => {
+      render(<TodoDetailModal {...defaultProps} />);
+      expect(screen.getByText("2026-05-01")).toBeInTheDocument();
+    });
+
+    test("마감 날짜를 표시한다", () => {
+      render(<TodoDetailModal {...defaultProps} />);
+      expect(screen.getByText("2026-05-31")).toBeInTheDocument();
+    });
+
+    test("메모를 표시한다", () => {
+      render(<TodoDetailModal {...defaultProps} />);
+      expect(screen.getByText("리팩토링 메모 내용")).toBeInTheDocument();
+    });
+
+    test("담당자 이름을 표시한다", () => {
+      render(<TodoDetailModal {...defaultProps} />);
+      expect(screen.getByText("홍길동")).toBeInTheDocument();
+    });
+  });
+
+  describe("닫기 버튼", () => {
+    test("클릭 시 onClose를 호출한다", async () => {
+      render(<TodoDetailModal {...defaultProps} />);
+      await userEvent.click(screen.getByRole("button", { name: "닫기" }));
+      expect(defaultProps.onClose).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("담당자가 여러 명인 경우", () => {
+    test("모든 담당자 이름을 표시한다", () => {
+      render(
+        <TodoDetailModal
+          {...defaultProps}
+          todo={makeTodo({
+            assignees: [
+              { userId: 101, nickname: "홍길동" },
+              { userId: 102, nickname: "김철수" },
+            ],
+          })}
+        />,
+      );
+
+      expect(screen.getByText("홍길동")).toBeInTheDocument();
+      expect(screen.getByText("김철수")).toBeInTheDocument();
+    });
+  });
+
+  describe("담당자가 없는 경우", () => {
+    test("담당자 이름을 표시하지 않는다", () => {
+      render(
+        <TodoDetailModal
+          {...defaultProps}
+          todo={makeTodo({ assignees: [], assigneeSummary: "" })}
+        />,
+      );
+
+      expect(screen.queryByText("홍길동")).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/features/todo/ui/TodoDetailModal/TodoDetailModal.tsx b/src/features/todo/ui/TodoDetailModal/TodoDetailModal.tsx
new file mode 100644
index 00000000..cdee7d64
--- /dev/null
+++ b/src/features/todo/ui/TodoDetailModal/TodoDetailModal.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import Image from "next/image";
+
+import type { Todo } from "@/entities/todo";
+import defaultAvatar from "@/shared/assets/images/avatar.png";
+import Button from "@/shared/ui/Button/Button/Button";
+import { Icon } from "@/shared/ui/Icon";
+import { Modal } from "@/shared/ui/Modal";
+
+interface TodoDetailModalProps {
+  onClose: () => void;
+  todo: Todo;
+  goalName: string;
+  teamName: string;
+}
+
+export const TodoDetailModal = ({
+  onClose,
+  todo,
+  goalName,
+  teamName,
+}: TodoDetailModalProps) => {
+  return (
+    <Modal.Root onClose={onClose}>
+      <Modal.Backdrop />
+      <div className="relative z-10 flex w-full max-w-[488px] flex-col items-start gap-8 rounded-2xl bg-white p-8 shadow-xl">
+        <div className="flex w-fit items-center justify-start gap-[6px]">
+          <h2 className="typography-heading-2 font-semibold">{todo.title}</h2>
+          <span className="typography-label-2 rounded-lg bg-gray-100 px-[10px] py-1 font-semibold text-gray-400">
+            {teamName}
+          </span>
+        </div>
+
+        <div className="mt-2 grid grid-cols-[100px_1fr] gap-x-4 gap-y-3">
+          <div className="flex items-center justify-start gap-[6px]">
+            <Icon
+              name="Flag"
+              size={16}
+              className="text-gray-400"
+            />
+            <span className="typography-label-1 font-medium text-gray-400">
+              목표
+            </span>
+          </div>
+          <span className="typography-label-1 text-label-neutral font-medium">
+            {goalName}
+          </span>
+
+          <div className="flex items-center justify-start gap-[6px]">
+            <Icon
+              name="Calendar"
+              size={16}
+              className="text-gray-400"
+            />
+            <span className="typography-label-1 font-medium text-gray-400">
+              시작 날짜
+            </span>
+          </div>
+          <span className="typography-label-1 text-label-neutral font-medium">
+            {todo.startDate}
+          </span>
+
+          <div className="flex items-center justify-start gap-[6px]">
+            <Icon
+              name="Calendar"
+              size={16}
+              className="text-gray-400"
+            />
+            <span className="typography-label-1 font-medium text-gray-400">
+              마감 날짜
+            </span>
+          </div>
+          <span className="typography-label-1 text-label-neutral font-medium">
+            {todo.dueDate}
+          </span>
+        </div>
+
+        <div className="flex w-full flex-col items-start gap-[5px]">
+          <h3 className="typography-body-2 font-semibold">담당자</h3>
+          <div className="flex max-h-[120px] w-full flex-wrap items-start justify-start gap-4 overflow-y-scroll rounded-2xl border border-gray-300 px-4 py-3">
+            {todo.assignees.map((assignee) => (
+              <div
+                key={assignee.userId}
+                className="flex shrink-0 items-center gap-1"
+              >
+                <Image
+                  src={defaultAvatar.src}
+                  alt="Avatar Image"
+                  width={32}
+                  height={32}
+                  className="shrink-0 rounded-full object-cover"
+                />
+                <span className="typography-label-1 shrink-0 font-semibold">
+                  {assignee.nickname}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex w-full flex-col items-start gap-[5px]">
+          <h3 className="typography-body-2 font-semibold">메모</h3>
+          <div className="flex max-h-[120px] w-full flex-wrap items-start justify-start gap-4 overflow-y-scroll rounded-2xl border border-gray-300 px-4 py-3">
+            <span className="typography-body-2 text-label-normal">
+              {todo.memo}
+            </span>
+          </div>
+        </div>
+
+        <Button
+          size="xl"
+          className="mt-2 w-full"
+          onClick={onClose}
+        >
+          닫기
+        </Button>
+      </div>
+    </Modal.Root>
+  );
+};
diff --git a/src/features/todo/ui/TodoItem/Team/Tean.test.tsx b/src/features/todo/ui/TodoItem/Team/Team.test.tsx
similarity index 100%
rename from src/features/todo/ui/TodoItem/Team/Tean.test.tsx
rename to src/features/todo/ui/TodoItem/Team/Team.test.tsx
diff --git a/src/features/todo/utils/formatDDay.ts b/src/features/todo/utils/formatDDay.ts
index 7a05c0d3..f21f8877 100644
--- a/src/features/todo/utils/formatDDay.ts
+++ b/src/features/todo/utils/formatDDay.ts
@@ -1,16 +1,20 @@
+const MS_PER_DAY = 86_400_000;
+
 export function formatDDay(dueDate: string): string {
   const parts = dueDate.split("-").map(Number);
-  if (parts.length !== 3 || parts.some((n) => Number.isNaN(n))) return "D-?";
+  const isInvalidFormat = parts.length !== 3 || parts.some(Number.isNaN);
+  if (isInvalidFormat) return "D-?";
 
-  const [y, m, d] = parts;
-  const due = new Date(y, m - 1, d);
+  const [year, month, day] = parts;
   const today = new Date();
   today.setHours(0, 0, 0, 0);
+
+  const due = new Date(year, month - 1, day);
   due.setHours(0, 0, 0, 0);
 
-  const diffDays = Math.round((due.getTime() - today.getTime()) / 86_400_000);
+  const diffDays = Math.round((due.getTime() - today.getTime()) / MS_PER_DAY);
 
-  if (diffDays < 0) return `D+${-diffDays}`;
+  if (diffDays < 0) return `D+${Math.abs(diffDays)}`;
   if (diffDays === 0) return "D-day";
   return `D-${diffDays}`;
 }
diff --git a/src/shared/hooks/useGoalId/index.ts b/src/shared/hooks/useGoalId/index.ts
new file mode 100644
index 00000000..163a38fc
--- /dev/null
+++ b/src/shared/hooks/useGoalId/index.ts
@@ -0,0 +1,13 @@
+"use client";
+
+import { useParams } from "next/navigation";
+
+export const useGoalId = () => {
+  const { goalId } = useParams();
+
+  if (!goalId) {
+    throw new Error("Goal ID is required");
+  }
+
+  return String(goalId);
+};
diff --git a/src/shared/ui/Order/Order.stories.tsx b/src/shared/ui/Order/Order.stories.tsx
new file mode 100644
index 00000000..10eaac9d
--- /dev/null
+++ b/src/shared/ui/Order/Order.stories.tsx
@@ -0,0 +1,22 @@
+import type { StoryObj } from "@storybook/nextjs-vite";
+
+import { Order } from "./Order";
+
+const meta = {
+  title: "shared/ui/Order",
+  component: Order,
+  tags: ["autodocs"],
+  args: {
+    options: ["마감일 순", "최신순", "오래된순"],
+    selected: "마감일 순",
+    onSelect: () => {},
+  },
+};
+
+export default meta;
+
+export const Closed: StoryObj<typeof Order> = {};
+
+export const AnotherSelected: StoryObj<typeof Order> = {
+  args: { selected: "최신순" },
+};
diff --git a/src/shared/ui/Order/Order.test.tsx b/src/shared/ui/Order/Order.test.tsx
new file mode 100644
index 00000000..eacc0d79
--- /dev/null
+++ b/src/shared/ui/Order/Order.test.tsx
@@ -0,0 +1,113 @@
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Order } from "./Order";
+
+jest.mock("@/shared/ui/Icon", () => ({
+  Icon: ({ name }: { name: string }) => <span data-testid={`icon-${name}`} />,
+}));
+
+describe("Order", () => {
+  const options = ["마감일 순", "최신순", "오래된순"];
+  const onSelect = jest.fn();
+
+  beforeEach(() => {
+    onSelect.mockClear();
+  });
+
+  describe("초기 렌더링", () => {
+    test("선택된 정렬 옵션이 표시된다", () => {
+      render(
+        <Order
+          options={options}
+          selected="마감일 순"
+          onSelect={onSelect}
+        />,
+      );
+      expect(screen.getByText("마감일 순")).toBeInTheDocument();
+    });
+
+    test("초기에 드롭다운이 닫혀 있다", () => {
+      render(
+        <Order
+          options={options}
+          selected="마감일 순"
+          onSelect={onSelect}
+        />,
+      );
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("드롭다운 열기/닫기", () => {
+    test("버튼 클릭 시 드롭다운이 열린다", async () => {
+      render(
+        <Order
+          options={options}
+          selected="마감일 순"
+          onSelect={onSelect}
+        />,
+      );
+      await userEvent.click(screen.getByRole("button"));
+      expect(screen.getByRole("listbox")).toBeInTheDocument();
+    });
+
+    test("드롭다운이 열리면 전달된 모든 옵션이 표시된다", async () => {
+      render(
+        <Order
+          options={options}
+          selected="마감일 순"
+          onSelect={onSelect}
+        />,
+      );
+      await userEvent.click(screen.getByRole("button"));
+      const listbox = screen.getByRole("listbox");
+      options.forEach((option) => {
+        expect(within(listbox).getByText(option)).toBeInTheDocument();
+      });
+    });
+
+    test("버튼을 두 번 클릭하면 드롭다운이 닫힌다", async () => {
+      render(
+        <Order
+          options={options}
+          selected="마감일 순"
+          onSelect={onSelect}
+        />,
+      );
+      const button = screen.getByRole("button");
+      await userEvent.click(button);
+      await userEvent.click(button);
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("옵션 선택", () => {
+    test("옵션 클릭 시 onSelect가 해당 값으로 호출된다", async () => {
+      render(
+        <Order
+          options={options}
+          selected="마감일 순"
+          onSelect={onSelect}
+        />,
+      );
+      await userEvent.click(screen.getByRole("button"));
+      await userEvent.click(screen.getByText("최신순"));
+      expect(onSelect).toHaveBeenCalledWith("최신순");
+      expect(onSelect).toHaveBeenCalledTimes(1);
+    });
+
+    test("옵션 선택 후 드롭다운이 닫힌다", async () => {
+      render(
+        <Order
+          options={options}
+          selected="마감일 순"
+          onSelect={onSelect}
+        />,
+      );
+      await userEvent.click(screen.getByRole("button"));
+      await userEvent.click(screen.getByText("최신순"));
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/features/todo/ui/List/Order.tsx b/src/shared/ui/Order/Order.tsx
similarity index 97%
rename from src/features/todo/ui/List/Order.tsx
rename to src/shared/ui/Order/Order.tsx
index 32ca919f..15292a1f 100644
--- a/src/features/todo/ui/List/Order.tsx
+++ b/src/shared/ui/Order/Order.tsx
@@ -29,7 +29,7 @@ export const Order = ({ options, selected, onSelect }: OrderProps) => {
         onClick={toggle}
       >
         <span className="typography-body-2 font-semibold text-gray-500">
-          {selectedSort || "최신순"}
+          {selectedSort}
         </span>
         <Icon
           name={isOpen ? "UpFilledArrow" : "DownFilledArrow"}
diff --git a/src/shared/ui/Order/index.ts b/src/shared/ui/Order/index.ts
new file mode 100644
index 00000000..8da0b40c
--- /dev/null
+++ b/src/shared/ui/Order/index.ts
@@ -0,0 +1 @@
+export { Order } from "./Order";
diff --git a/src/shared/ui/Toggle/index.tsx b/src/shared/ui/Toggle/index.tsx
index 69c3f7ca..0dd0682f 100644
--- a/src/shared/ui/Toggle/index.tsx
+++ b/src/shared/ui/Toggle/index.tsx
@@ -55,18 +55,17 @@ export const Toggle = ({
   return (
     <button
       type="button"
+      aria-pressed={pressed}
       onClick={toggle}
       className={cn(
-        "relative box-border shrink-0 cursor-pointer rounded-full p-[5px] transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-blue-800 focus-visible:ring-offset-2 focus-visible:outline-none",
+        "relative box-border shrink-0 cursor-pointer rounded-full transition-colors duration-200 ease-out focus-visible:ring-2 focus-visible:ring-blue-800 focus-visible:ring-offset-2 focus-visible:outline-none",
         pressed ? "bg-blue-800" : "bg-gray-300",
         className,
       )}
       style={{ width, height }}
     >
       <span
-        className={cn(
-          "pointer-events-none absolute top-1/2 -translate-y-1/2 rounded-full bg-blue-50 transition-[left] duration-200 ease-out",
-        )}
+        className="pointer-events-none absolute top-1/2 -translate-y-1/2 rounded-full bg-blue-50 transition-[left] duration-200 ease-out"
         style={{
           left: pressed ? width - trackPadding - thumbSize : trackPadding,
           width: thumbSize,
diff --git a/src/widgets/goal/Summary/GoalInfo/GoalInfo.tsx b/src/widgets/goal/Summary/GoalInfo/GoalInfo.tsx
index f80e0651..07ebe0d7 100644
--- a/src/widgets/goal/Summary/GoalInfo/GoalInfo.tsx
+++ b/src/widgets/goal/Summary/GoalInfo/GoalInfo.tsx
@@ -5,8 +5,8 @@ import { useState } from "react";
 
 import { goalQueryOptions } from "@/entities/goal";
 import { useGoalActions } from "@/features/goal/hooks/useGoalActions";
-import { useGoalId } from "@/features/goal/hooks/useGoalId";
 import { useOptionalTeamId } from "@/features/team/hooks/useOptionalTeamId";
+import { useGoalId } from "@/shared/hooks/useGoalId";
 import { Icon } from "@/shared/ui/Icon";
 import { cn } from "@/shared/utils/styles/cn";
 
diff --git a/src/widgets/goal/Summary/GoalProgress/GoalProgress.tsx b/src/widgets/goal/Summary/GoalProgress/GoalProgress.tsx
index 5464a57f..d9ca0315 100644
--- a/src/widgets/goal/Summary/GoalProgress/GoalProgress.tsx
+++ b/src/widgets/goal/Summary/GoalProgress/GoalProgress.tsx
@@ -4,8 +4,8 @@ import { useSuspenseQueries } from "@tanstack/react-query";
 
 import { userQueries } from "@/entities/auth/query/user.queryKey";
 import { goalQueryOptions } from "@/entities/goal";
-import { useGoalId } from "@/features/goal/hooks/useGoalId";
 import { useBreakpoint } from "@/shared/hooks/useBreakpoint";
+import { useGoalId } from "@/shared/hooks/useGoalId";
 import { CircularProgress } from "@/shared/ui/CircularProgress";
 import { cn } from "@/shared/utils/styles/cn";
 
diff --git a/src/widgets/home/MainTodoItem/MainTodoItem.tsx b/src/widgets/home/MainTodoItem/MainTodoItem.tsx
index 87b8b2fe..742db45d 100644
--- a/src/widgets/home/MainTodoItem/MainTodoItem.tsx
+++ b/src/widgets/home/MainTodoItem/MainTodoItem.tsx
@@ -1,5 +1,5 @@
 import { TodoItem } from "@/entities/todo";
-import { formatDDay } from "@/features/todo/utils/formatDDay";
+import { formatDDay } from "@/features/todo";
 
 type Props = TodoItem;
 
diff --git a/src/widgets/team/GoalList/GoalList.tsx b/src/widgets/team/GoalList/GoalList.tsx
index 59988593..45394020 100644
--- a/src/widgets/team/GoalList/GoalList.tsx
+++ b/src/widgets/team/GoalList/GoalList.tsx
@@ -4,9 +4,9 @@ import { useMemo, useState } from "react";
 
 import { goalQueryOptions, SortType } from "@/entities/goal";
 import { useTeamId } from "@/features/team/hooks/useTeamId";
-import { Order } from "@/features/todo/ui/List/Order";
 import { useInfiniteScroll } from "@/shared/hooks/useInfiniteScroll/useInfiniteScroll";
 import { Icon } from "@/shared/ui/Icon";
+import { Order } from "@/shared/ui/Order";
 import { MainSecondaryProgressCard } from "@/widgets/team/MainSecondaryProgressCard";
 
 const sortTypeByLabel: Record<string, SortType> = {
diff --git a/src/widgets/todo/TodoSection/TodoColumnList.test.tsx b/src/widgets/todo/TodoSection/TodoColumnList.test.tsx
new file mode 100644
index 00000000..22a46766
--- /dev/null
+++ b/src/widgets/todo/TodoSection/TodoColumnList.test.tsx
@@ -0,0 +1,285 @@
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import type { Todo } from "@/entities/todo";
+import { useInfiniteScroll } from "@/shared/hooks/useInfiniteScroll";
+
+import { TodoColumnList } from "./TodoColumnList";
+
+jest.mock("@/shared/hooks/useInfiniteScroll", () => ({
+  useInfiniteScroll: jest.fn(),
+}));
+
+jest.mock("@/features/todo/hooks/useTodoCreateModal", () => ({
+  useTodoCreateModal: () => ({ openTodoCreateModal: jest.fn() }),
+}));
+
+jest.mock("@/features/todo/hooks/useTodoDeleteModal", () => ({
+  useTodoDeleteModal: () => ({ openTodoDeleteModal: jest.fn() }),
+}));
+
+jest.mock("@/features/todo/hooks/useTodoDetailModal", () => ({
+  useTodoDetailModal: () => ({ openTodoDetailModal: jest.fn() }),
+}));
+
+jest.mock("@/features/todo/mutation/usePatchTodoStatusMutation", () => ({
+  usePatchTodoStatusMutation: () => ({ mutate: jest.fn(), isPending: false }),
+}));
+
+jest.mock("next/image", () => ({
+  __esModule: true,
+  default: ({ src, alt }: { src: string; alt: string }) => (
+    <img
+      src={src}
+      alt={alt}
+    />
+  ),
+}));
+
+jest.mock("@/shared/assets/images/avatar.png", () => ({ src: "/avatar.png" }));
+
+jest.mock("@/shared/ui/Icon", () => ({
+  Icon: ({ name }: { name: string }) => <span data-testid={`icon-${name}`} />,
+}));
+
+const mockUseInfiniteScroll = useInfiniteScroll as jest.MockedFunction<
+  typeof useInfiniteScroll
+>;
+
+const makeTodo = (overrides: Partial<Todo> = {}): Todo => ({
+  id: 1,
+  goalId: 100,
+  title: "테스트 할 일",
+  startDate: "2026-04-01",
+  dueDate: "2026-12-31",
+  status: "TODO",
+  memo: "",
+  assigneeSummary: "",
+  assignees: [],
+  ...overrides,
+});
+
+const defaultProps = {
+  goalId: "1",
+  keyword: "",
+  isMyTodo: false,
+};
+
+beforeEach(() => {
+  mockUseInfiniteScroll.mockReturnValue({
+    ref: { current: null },
+    data: { pages: [{ items: [] }] },
+    isFetchingNextPage: false,
+  } as ReturnType<typeof useInfiniteScroll>);
+});
+
+describe("TodoColumnList", () => {
+  describe("컬럼 이름 렌더링", () => {
+    test("status가 TODO이면 'TODO' 헤딩이 표시된다", () => {
+      render(
+        <TodoColumnList
+          status="TODO"
+          {...defaultProps}
+        />,
+      );
+      expect(screen.getByRole("heading", { name: "TODO" })).toBeInTheDocument();
+    });
+
+    test("status가 DOING이면 'DOING' 헤딩이 표시된다", () => {
+      render(
+        <TodoColumnList
+          status="DOING"
+          {...defaultProps}
+        />,
+      );
+      expect(
+        screen.getByRole("heading", { name: "DOING" }),
+      ).toBeInTheDocument();
+    });
+
+    test("status가 DONE이면 'DONE' 헤딩이 표시된다", () => {
+      render(
+        <TodoColumnList
+          status="DONE"
+          {...defaultProps}
+        />,
+      );
+      expect(screen.getByRole("heading", { name: "DONE" })).toBeInTheDocument();
+    });
+  });
+
+  describe("기본 정렬 레이블", () => {
+    test("TODO 컬럼의 기본 정렬은 '마감일 순'이다", () => {
+      render(
+        <TodoColumnList
+          status="TODO"
+          {...defaultProps}
+        />,
+      );
+      expect(screen.getByText("마감일 순")).toBeInTheDocument();
+    });
+
+    test("DOING 컬럼의 기본 정렬은 '최신순'이다", () => {
+      render(
+        <TodoColumnList
+          status="DOING"
+          {...defaultProps}
+        />,
+      );
+      expect(screen.getByText("최신순")).toBeInTheDocument();
+    });
+
+    test("DONE 컬럼의 기본 정렬은 '오래된순'이다", () => {
+      render(
+        <TodoColumnList
+          status="DONE"
+          {...defaultProps}
+        />,
+      );
+      expect(screen.getByText("오래된순")).toBeInTheDocument();
+    });
+  });
+
+  describe("할 일 추가 버튼", () => {
+    test("TODO 컬럼에는 '할 일 추가' 버튼이 표시된다", () => {
+      render(
+        <TodoColumnList
+          status="TODO"
+          {...defaultProps}
+        />,
+      );
+      expect(
+        screen.getByRole("button", { name: "할 일 추가" }),
+      ).toBeInTheDocument();
+    });
+
+    test("DOING 컬럼에는 '할 일 추가' 버튼이 표시되지 않는다", () => {
+      render(
+        <TodoColumnList
+          status="DOING"
+          {...defaultProps}
+        />,
+      );
+      expect(
+        screen.queryByRole("button", { name: "할 일 추가" }),
+      ).not.toBeInTheDocument();
+    });
+
+    test("DONE 컬럼에는 '할 일 추가' 버튼이 표시되지 않는다", () => {
+      render(
+        <TodoColumnList
+          status="DONE"
+          {...defaultProps}
+        />,
+      );
+      expect(
+        screen.queryByRole("button", { name: "할 일 추가" }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
+  describe("할일 목록 렌더링", () => {
+    test("페이지에 할일이 있으면 해당 제목이 표시된다", () => {
+      const todo1 = makeTodo({ id: 1, title: "첫 번째 할 일" });
+      const todo2 = makeTodo({ id: 2, title: "두 번째 할 일" });
+
+      mockUseInfiniteScroll.mockReturnValue({
+        ref: { current: null },
+        data: { pages: [{ items: [todo1, todo2] }] },
+        isFetchingNextPage: false,
+      } as ReturnType<typeof useInfiniteScroll>);
+
+      render(
+        <TodoColumnList
+          status="TODO"
+          {...defaultProps}
+        />,
+      );
+
+      expect(screen.getByText("첫 번째 할 일")).toBeInTheDocument();
+      expect(screen.getByText("두 번째 할 일")).toBeInTheDocument();
+    });
+
+    test("여러 페이지에 걸친 할일이 모두 표시된다", () => {
+      const todo1 = makeTodo({ id: 1, title: "페이지1 할 일" });
+      const todo2 = makeTodo({ id: 2, title: "페이지2 할 일" });
+
+      mockUseInfiniteScroll.mockReturnValue({
+        ref: { current: null },
+        data: { pages: [{ items: [todo1] }, { items: [todo2] }] },
+        isFetchingNextPage: false,
+      } as ReturnType<typeof useInfiniteScroll>);
+
+      render(
+        <TodoColumnList
+          status="TODO"
+          {...defaultProps}
+        />,
+      );
+
+      expect(screen.getByText("페이지1 할 일")).toBeInTheDocument();
+      expect(screen.getByText("페이지2 할 일")).toBeInTheDocument();
+    });
+
+    test("할일이 없으면 할일 제목이 표시되지 않는다", () => {
+      render(
+        <TodoColumnList
+          status="TODO"
+          {...defaultProps}
+        />,
+      );
+
+      expect(screen.queryByText("테스트 할 일")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("정렬 변경", () => {
+    test("정렬 버튼 클릭 시 정렬 옵션 드롭다운이 열린다", async () => {
+      render(
+        <TodoColumnList
+          status="TODO"
+          {...defaultProps}
+        />,
+      );
+
+      await userEvent.click(screen.getByText("마감일 순"));
+
+      expect(screen.getByRole("listbox")).toBeInTheDocument();
+    });
+
+    test("TODO 컬럼에서 다른 정렬 옵션 선택 시 선택된 정렬이 변경된다", async () => {
+      render(
+        <TodoColumnList
+          status="TODO"
+          {...defaultProps}
+        />,
+      );
+
+      await userEvent.click(screen.getByText("마감일 순"));
+      const listbox = screen.getByRole("listbox");
+      await userEvent.click(within(listbox).getByText("최신순"));
+
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: "최신순" }),
+      ).toBeInTheDocument();
+    });
+
+    test("DOING 컬럼에서 '마감일 순'으로 정렬 변경 시 반영된다", async () => {
+      render(
+        <TodoColumnList
+          status="DOING"
+          {...defaultProps}
+        />,
+      );
+
+      await userEvent.click(screen.getByText("최신순"));
+      const listbox = screen.getByRole("listbox");
+      await userEvent.click(within(listbox).getByText("마감일 순"));
+
+      expect(
+        screen.getByRole("button", { name: "마감일 순" }),
+      ).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/widgets/todo/TodoSection/TodoColumnList.tsx b/src/widgets/todo/TodoSection/TodoColumnList.tsx
index a4729c02..42c97bca 100644
--- a/src/widgets/todo/TodoSection/TodoColumnList.tsx
+++ b/src/widgets/todo/TodoSection/TodoColumnList.tsx
@@ -7,9 +7,9 @@ import {
   TODO_COLUMN_DEFAULT_SORT_LABEL,
   TODO_COLUMN_SORT_LABEL_ORDER,
   TODO_LIST_SORT_BY_LABEL,
+  TodoList as TodoListUi,
   type TodoListSortLabel,
-} from "@/features/todo/constants/todoColumnSort";
-import { TodoList as TodoListUi } from "@/features/todo/ui/List";
+} from "@/features/todo";
 import { useInfiniteScroll } from "@/shared/hooks/useInfiniteScroll";
 import { Spacing } from "@/shared/ui/Spacing";
 
@@ -102,11 +102,21 @@ export function TodoColumnList({
           todo={todo}
         />
       ))}
-      <div
-        ref={ref}
-        className="h-1 w-full"
-      />
-      {!config.showCreateButton && <Spacing size={24} />}
+      <li
+        className="h-1 w-full list-none"
+        aria-hidden
+      >
+        <div
+          ref={ref}
+          className="h-full w-full"
+        />
+      </li>
+      {!config.showCreateButton && (
+        <li
+          className="h-6 list-none"
+          aria-hidden
+        />
+      )}
     </TodoListUi.List>
   );
 }
diff --git a/src/widgets/todo/TodoSection/index.test.tsx b/src/widgets/todo/TodoSection/index.test.tsx
new file mode 100644
index 00000000..4569b0d3
--- /dev/null
+++ b/src/widgets/todo/TodoSection/index.test.tsx
@@ -0,0 +1,139 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { TodoSection } from ".";
+
+jest.mock("@/shared/hooks/useGoalId", () => ({
+  useGoalId: jest.fn().mockReturnValue("1"),
+}));
+
+jest.mock("@/shared/hooks/useBreakpoint", () => ({
+  useBreakpoint: jest.fn().mockReturnValue("desktop"),
+}));
+
+const mockOnKeywordChange = jest.fn();
+
+jest.mock("@/shared/hooks/useDebouncedKeyword", () => ({
+  useDebouncedKeyword: () => ({
+    keywordInput: "",
+    keyword: "검색어",
+    onKeywordChange: mockOnKeywordChange,
+  }),
+}));
+
+type CapturedProps = {
+  status: string;
+  goalId: string;
+  keyword: string;
+  isMyTodo: boolean;
+};
+const capturedProps: CapturedProps[] = [];
+
+jest.mock("./TodoColumnList", () => ({
+  TodoColumnList: (props: CapturedProps) => {
+    capturedProps.push(props);
+    return <div data-testid={`todo-column-${props.status}`} />;
+  },
+}));
+
+jest.mock("@/shared/ui/AsyncBoundary", () => ({
+  __esModule: true,
+  default: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+jest.mock("@/shared/ui/Icon", () => ({
+  Icon: ({ name }: { name: string }) => <span data-testid={`icon-${name}`} />,
+}));
+
+beforeEach(() => {
+  capturedProps.length = 0;
+});
+
+describe("TodoSection", () => {
+  describe("초기 렌더링", () => {
+    test("검색 인풋이 렌더링된다", () => {
+      render(<TodoSection />);
+      expect(
+        screen.getByPlaceholderText("할 일을 이름으로 검색해보세요."),
+      ).toBeInTheDocument();
+    });
+
+    test("'내 할일만 보기' 레이블이 표시된다", () => {
+      render(<TodoSection />);
+      expect(screen.getByText("내 할일만 보기")).toBeInTheDocument();
+    });
+
+    test("TODO, DOING, DONE 세 컬럼이 렌더링된다", () => {
+      render(<TodoSection />);
+      expect(screen.getByTestId("todo-column-TODO")).toBeInTheDocument();
+      expect(screen.getByTestId("todo-column-DOING")).toBeInTheDocument();
+      expect(screen.getByTestId("todo-column-DONE")).toBeInTheDocument();
+    });
+  });
+
+  describe("'내 할일만 보기' 토글", () => {
+    test("초기에 토글이 비활성화 상태이다", () => {
+      render(<TodoSection />);
+      expect(screen.getByRole("button")).toHaveClass("bg-gray-300");
+    });
+
+    test("토글 클릭 시 활성화 상태로 전환된다", async () => {
+      render(<TodoSection />);
+      const toggle = screen.getByRole("button");
+      await userEvent.click(toggle);
+      expect(toggle).toHaveClass("bg-blue-800");
+    });
+
+    test("토글을 두 번 클릭하면 비활성화 상태로 돌아온다", async () => {
+      render(<TodoSection />);
+      const toggle = screen.getByRole("button");
+      await userEvent.click(toggle);
+      await userEvent.click(toggle);
+      expect(toggle).toHaveClass("bg-gray-300");
+    });
+  });
+
+  describe("검색 인풋", () => {
+    test("검색어 입력 시 onKeywordChange가 호출된다", async () => {
+      render(<TodoSection />);
+      const input =
+        screen.getByPlaceholderText("할 일을 이름으로 검색해보세요.");
+      await userEvent.type(input, "테스트");
+      expect(mockOnKeywordChange).toHaveBeenCalled();
+    });
+  });
+
+  describe("TodoColumnList 로 props 전파", () => {
+    test("세 컬럼 모두 useGoalId에서 반환된 goalId를 전달받는다", () => {
+      render(<TodoSection />);
+      const columns = capturedProps.filter((p) =>
+        ["TODO", "DOING", "DONE"].includes(p.status),
+      );
+      expect(columns).toHaveLength(3);
+      columns.forEach((p) => expect(p.goalId).toBe("1"));
+    });
+
+    test("세 컬럼 모두 useDebouncedKeyword에서 반환된 keyword를 전달받는다", () => {
+      render(<TodoSection />);
+      capturedProps
+        .filter((p) => ["TODO", "DOING", "DONE"].includes(p.status))
+        .forEach((p) => expect(p.keyword).toBe("검색어"));
+    });
+
+    test("초기에 세 컬럼 모두 isMyTodo=false를 전달받는다", () => {
+      render(<TodoSection />);
+      capturedProps
+        .filter((p) => ["TODO", "DOING", "DONE"].includes(p.status))
+        .forEach((p) => expect(p.isMyTodo).toBe(false));
+    });
+
+    test("토글 클릭 후 세 컬럼 모두 isMyTodo=true를 전달받는다", async () => {
+      render(<TodoSection />);
+      await userEvent.click(screen.getByRole("button"));
+      const latest = ["TODO", "DOING", "DONE"].map(
+        (status) => capturedProps.filter((p) => p.status === status).at(-1)!,
+      );
+      latest.forEach((p) => expect(p.isMyTodo).toBe(true));
+    });
+  });
+});
diff --git a/src/widgets/todo/TodoSection/index.tsx b/src/widgets/todo/TodoSection/index.tsx
index 6c719b7a..7f9e1ab0 100644
--- a/src/widgets/todo/TodoSection/index.tsx
+++ b/src/widgets/todo/TodoSection/index.tsx
@@ -2,9 +2,9 @@
 
 import { useState } from "react";
 
-import { useGoalId } from "@/features/goal/hooks/useGoalId";
 import { useBreakpoint } from "@/shared/hooks/useBreakpoint";
 import { useDebouncedKeyword } from "@/shared/hooks/useDebouncedKeyword";
+import { useGoalId } from "@/shared/hooks/useGoalId";
 import AsyncBoundary from "@/shared/ui/AsyncBoundary";
 import { Icon } from "@/shared/ui/Icon";
 import Input from "@/shared/ui/Input";
@@ -15,31 +15,6 @@ import { Error as ListError } from "./state/Error";
 import { Loading } from "./state/Loading";
 import { TodoColumnList } from "./TodoColumnList";
 
-type TodoColumnSectionProps = {
-  className?: string;
-  children: React.ReactNode;
-};
-
-function TodoColumnSection({ className, children }: TodoColumnSectionProps) {
-  return (
-    <section className={cn("flex min-h-0 w-full flex-col", className)}>
-      <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col">
-        <AsyncBoundary
-          loadingFallback={<Loading />}
-          errorFallback={(error, onReset) => (
-            <ListError
-              error={error}
-              onReset={onReset}
-            />
-          )}
-        >
-          {children}
-        </AsyncBoundary>
-      </div>
-    </section>
-  );
-}
-
 export const TodoSection = () => {
   const goalId = useGoalId();
   const breakpoint = useBreakpoint();
@@ -68,8 +43,8 @@ export const TodoSection = () => {
           />
         </div>
 
-        <div className="tablet:w-auto flex w-full shrink-0 items-center justify-between justify-end gap-[10px]">
-          <span className="text-label-1 tablet:typography-body-1 min-w-0 pr-2 text-left font-semibold text-blue-800">
+        <div className="tablet:w-auto tablet:justify-end flex w-full shrink-0 items-center justify-between gap-2.5">
+          <span className="typography-label-1 tablet:typography-body-1 min-w-0 pr-2 text-left font-semibold text-blue-800">
             내 할일만 보기
           </span>
 
@@ -107,3 +82,28 @@ export const TodoSection = () => {
     </div>
   );
 };
+
+type TodoColumnSectionProps = {
+  className?: string;
+  children: React.ReactNode;
+};
+
+function TodoColumnSection({ className, children }: TodoColumnSectionProps) {
+  return (
+    <section className={cn("flex min-h-0 w-full flex-col", className)}>
+      <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col">
+        <AsyncBoundary
+          loadingFallback={<Loading />}
+          errorFallback={(error, onReset) => (
+            <ListError
+              error={error}
+              onReset={onReset}
+            />
+          )}
+        >
+          {children}
+        </AsyncBoundary>
+      </div>
+    </section>
+  );
+}
diff --git a/src/widgets/todo/TodoSection/state/Empty.test.tsx b/src/widgets/todo/TodoSection/state/Empty.test.tsx
new file mode 100644
index 00000000..bf08234c
--- /dev/null
+++ b/src/widgets/todo/TodoSection/state/Empty.test.tsx
@@ -0,0 +1,42 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Empty } from "./Empty";
+
+const mockOpenTodoCreateModal = jest.fn();
+
+jest.mock("@/features/todo/hooks/useTodoCreateModal", () => ({
+  useTodoCreateModal: () => ({
+    openTodoCreateModal: mockOpenTodoCreateModal,
+    closeTodoCreateModal: jest.fn(),
+  }),
+}));
+
+jest.mock("@/shared/ui/Icon", () => ({
+  Icon: ({ name }: { name: string }) => <span data-testid={`icon-${name}`} />,
+}));
+
+describe("TodoSection Empty 상태", () => {
+  beforeEach(() => {
+    mockOpenTodoCreateModal.mockClear();
+  });
+
+  test("빈 상태 안내 문구가 표시된다", () => {
+    render(<Empty />);
+    expect(screen.getByText("생성된 할 일이 없어요")).toBeInTheDocument();
+    expect(
+      screen.getByText("새로운 할 일을 만들고 관리해보세요"),
+    ).toBeInTheDocument();
+  });
+
+  test("'할 일 추가' 버튼이 표시된다", () => {
+    render(<Empty />);
+    expect(screen.getByText("할 일 추가")).toBeInTheDocument();
+  });
+
+  test("'할 일 추가' 버튼 클릭 시 openTodoCreateModal이 호출된다", async () => {
+    render(<Empty />);
+    await userEvent.click(screen.getByText("할 일 추가"));
+    expect(mockOpenTodoCreateModal).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/widgets/todo/TodoSection/state/Empty.tsx b/src/widgets/todo/TodoSection/state/Empty.tsx
index c9e0f4be..38c0b65f 100644
--- a/src/widgets/todo/TodoSection/state/Empty.tsx
+++ b/src/widgets/todo/TodoSection/state/Empty.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useTodoCreateModal } from "@/features/todo/hooks/useTodoCreateModal";
+import { useTodoCreateModal } from "@/features/todo";
 import Button from "@/shared/ui/Button/Button/Button";
 import { Icon } from "@/shared/ui/Icon";
 
diff --git a/src/widgets/todo/TodoSection/state/Error.test.tsx b/src/widgets/todo/TodoSection/state/Error.test.tsx
new file mode 100644
index 00000000..ce4bb7a9
--- /dev/null
+++ b/src/widgets/todo/TodoSection/state/Error.test.tsx
@@ -0,0 +1,60 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Error as ListError } from "./Error";
+
+jest.mock("@/shared/ui/Icon", () => ({
+  Icon: ({ name }: { name: string }) => <span data-testid={`icon-${name}`} />,
+}));
+
+describe("TodoSection Error 상태", () => {
+  const error = new Error("서버 오류가 발생했습니다");
+  const onReset = jest.fn();
+
+  beforeEach(() => {
+    onReset.mockClear();
+  });
+
+  test("에러 안내 문구가 표시된다", () => {
+    render(
+      <ListError
+        error={error}
+        onReset={onReset}
+      />,
+    );
+    expect(
+      screen.getByText("할 일 목록을 불러오지 못했어요"),
+    ).toBeInTheDocument();
+  });
+
+  test("전달된 에러 메시지가 표시된다", () => {
+    render(
+      <ListError
+        error={error}
+        onReset={onReset}
+      />,
+    );
+    expect(screen.getByText("서버 오류가 발생했습니다")).toBeInTheDocument();
+  });
+
+  test("'다시 요청하기' 버튼이 표시된다", () => {
+    render(
+      <ListError
+        error={error}
+        onReset={onReset}
+      />,
+    );
+    expect(screen.getByText("다시 요청하기")).toBeInTheDocument();
+  });
+
+  test("'다시 요청하기' 버튼 클릭 시 onReset이 호출된다", async () => {
+    render(
+      <ListError
+        error={error}
+        onReset={onReset}
+      />,
+    );
+    await userEvent.click(screen.getByText("다시 요청하기"));
+    expect(onReset).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/widgets/todo/TodoSection/state/Loading.test.tsx b/src/widgets/todo/TodoSection/state/Loading.test.tsx
new file mode 100644
index 00000000..6ef4adf4
--- /dev/null
+++ b/src/widgets/todo/TodoSection/state/Loading.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+
+import { Loading } from "./Loading";
+
+describe("TodoSection Loading 상태", () => {
+  test("로딩 중 안내 문구가 표시된다", () => {
+    render(<Loading />);
+    expect(
+      screen.getByText("할 일 목록을 불러오고 있어요"),
+    ).toBeInTheDocument();
+  });
+
+  test("스피너가 렌더링된다", () => {
+    render(<Loading />);
+    expect(screen.getByLabelText("할 일 목록 로딩 중")).toBeInTheDocument();
+  });
+});
diff --git a/src/widgets/todo/TodoSection/state/Loading.tsx b/src/widgets/todo/TodoSection/state/Loading.tsx
index 21a106be..dd6d5c9e 100644
--- a/src/widgets/todo/TodoSection/state/Loading.tsx
+++ b/src/widgets/todo/TodoSection/state/Loading.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import Spinner from "@/shared/ui/Spinner";
 
 import { Wrapper } from "./Wrapper";
diff --git a/src/widgets/todo/TodoSection/state/Wrapper.tsx b/src/widgets/todo/TodoSection/state/Wrapper.tsx
index 1ff8f542..32c59e6e 100644
--- a/src/widgets/todo/TodoSection/state/Wrapper.tsx
+++ b/src/widgets/todo/TodoSection/state/Wrapper.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { ReactNode } from "react";
 
 interface WrapperProps {