feat: 사건작성 페이지 구현 (disputes/[id]/statement)

[juahcheon]

3. 관련 Issue

• close #

4. 관련 기능 요구사항

• FR-

5. 관련 비기능 요구사항

• NFR-

6. 변경 사항

• disputes/[id]/statement 사건작성 페이지 신규 구현
  • 이전 페이지 searchParams에서 카테고리 수신, 선택된 카테고리 1개만 표시
  • 카테고리 없을 시 모달 블로킹 처리 (확인 클릭 시 이전 페이지로 이동)
  • MBTI 선택 드롭다운, 진술 내용 입력 (최대 1000자), 진술저장 버튼
• Select 컴포넌트 네이티브 select → 커스텀 드롭다운으로 교체 (항상 아래 방향 열림)
• Select placeholder 색상 --text-secondary 적용
• Textarea focus 시 border 색상 변경 제거
• Button 좌우 패딩 16 → 12 조정

Summary by CodeRabbit

릴리스 노트

• New Features

  • 분쟁 진술서 작성 페이지 추가( MBTI 선택, 내용 입력 및 저장)

• Bug Fixes

  • 분쟁 생성 시 방 상태가 종료/만료이면 즉시 생성 중단 및 안내 문구 개선

• Style

  • Select가 커스텀 드롭다운으로 고도화(키보드 조작/접근성 강화) 및 버튼 패딩 조정
  • Textarea 스타일 업데이트(포커스 테두리/카운터 색상 등)
  • SCSS 스타일 import 경로를 절대 경로 규칙으로 통일

• Documentation

  • 코딩 컨벤션 문서의 SCSS import 규칙 및 관련 섹션 정리

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
talky-owl	Ready	Preview, Comment	Jun 18, 2026 1:45am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 31b24520-f767-4754-8f9e-71cd442685df

📥 Commits

Reviewing files that changed from the base of the PR and between 4dfc753 and 4cc683d.

📒 Files selected for processing (1)

• src/components/ui/Select.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/ui/Select.tsx

---

📝 Walkthrough

Walkthrough

분쟁 진술서 작성 페이지(StatementPage)를 신규 추가하고, Select 컴포넌트를 네이티브 <select>에서 커스텀 button+드롭다운 구조로 교체했다. 전체 SCSS 파일의 @use 경로를 상대 경로에서 @/ 별칭으로 표준화하고, 코딩 컨벤션 문서에 해당 규칙을 추가했으며, 분쟁 생성 API 검증 로직을 CLOSED/EXPIRED 상태 체크 기반으로 변경했다.

Changes

StatementPage 신규 구현

Layer / File(s)	Summary
StatementPage 레이아웃 및 모달 스타일 src/app/(page)/disputes/[id]/statement/StatementPage.module.scss	페이지·콘텐츠·카테고리·하단 고정 푸터·모달 오버레이 전체의 플렉스 레이아웃, 아이콘 스타일, 모달 컨테이너 및 텍스트 스타일을 신규 CSS Module로 정의했다.
StatementPage 컴포넌트 로직 및 렌더링 src/app/(page)/disputes/[id]/statement/page.tsx	React.use로 params·searchParams를 파싱해 유효하지 않은 category이면 뒤로가기 모달을 조기 반환하고, MBTI·내용 상태를 관리해 content가 있을 때만 진술저장 버튼을 활성화하며 저장 시 /disputes/${id}로 라우팅한다.

Select 컴포넌트 커스텀 드롭다운 재작성

Layer / File(s)	Summary
Select 타입 및 상태 관리 src/components/ui/Select.tsx	SelectOption과 SelectProps 타입을 커스텀 인터페이스로 재정의하고, 컴포넌트가 open·focusedIndex 상태와 여러 ref를 관리하도록 구성했다.
Select 이펙트 및 포커스 관리 src/components/ui/Select.tsx	외부 클릭 감지 useEffect로 드롭다운을 닫고, open 상태일 때 자동으로 listbox로 포커스를 이동시킨다.
Select 옵션 선택 및 키보드 핸들러 src/components/ui/Select.tsx	handleSelect·handleToggle 메서드와 화살표·Enter/Space·Escape/Tab 키보드 내비게이션 로직을 구현했다.
Select 렌더링 및 접근성 속성 src/components/ui/Select.tsx	렌더링을 button 트리거와 role="listbox"·role="option" 구조로 전환하고, aria-expanded·aria-haspopup·aria-invalid·aria-describedby·aria-activedescendant·aria-selected 속성을 추가했다. 옵션은 onMouseDown과 onMouseEnter로 선택 및 포커스를 관리한다.
Select SCSS 구조 재정의 src/components/ui/Select.module.scss	SCSS @use 경로를 @/로 변경하고, &__select를 &__trigger·&__chevron·&__dropdown·&__option으로 분리하며 chevron 회전 애니메이션 및 옵션 상태(hover·selected·focused) 스타일을 새로 정의했다.

SCSS @use 경로 표준화 및 스타일 조정

Layer / File(s)	Summary
코딩 컨벤션 SCSS import 규칙 추가 및 섹션 재번호 docs/guides/CODING_CONVENTION.md	@/ 절대경로 강제·상대경로 금지 예시를 담은 "SCSS import 규칙" 섹션을 신설하고, 이후 상태 관리·폴더·금지 구조·보안·MUI 섹션의 헤딩 번호를 갱신했다.
SCSS @use 경로 일괄 변경 및 스타일 값 조정 src/components/feedback/Toast.module.scss, src/components/layout/BottomNavigation.module.scss, src/components/layout/Header.module.scss, src/components/ui/ActionPrompt.module.scss, src/components/ui/Button.module.scss, src/components/ui/CaseCard.module.scss, src/components/ui/CategoryFilter.module.scss, src/components/ui/Input.module.scss, src/components/ui/Spinner.module.scss, src/components/ui/StatusBadge.module.scss, src/components/ui/Tab.module.scss, src/components/ui/Tabs.module.scss, src/components/ui/Textarea.module.scss	13개 SCSS 파일의 @use 경로를 ../../styles/... 상대 경로에서 @/styles/... 별칭으로 일괄 변경했다. Button의 padding을 fn.r(16)→fn.r(12)로 조정하고, Textarea의 border 변수를 --border-strong으로 교체하며 :focus border-color 제거, 카운터 색상을 --text-disabled로 변경했다.

분쟁 생성 API 검증 로직 변경

Layer / File(s)	Summary
분쟁 생성 API 검증 로직 및 주석 변경 src/app/api/disputes/route.ts	POST /api/disputes 엔드포인트 주석을 활성 방(ai_chat, invite_ready, one_to_one) 기준으로 갱신하고, room.roomMode가 CLOSED 또는 EXPIRED인 경우 ROOM_NOT_READY 오류로 반환하는 조건을 추가했다. 기존 ONE_TO_ONE 전용 검증 로직은 제거되었다.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐇 토끼가 길을 찾다가,
상대경로 미로에서 길을 잃었네.
@/styles로 별칭을 달고 나니,
어디서든 쑥쑥 찾아가는 지름길!
Select도 드롭다운으로 새 옷 입고,
진술서 페이지도 뚝딱 완성~ 🎉

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	PR 설명이 필수 섹션 대부분을 누락했으며, 작업 내용, 담당 영역 체크, 테스트 결과 등의 중요 정보가 부족합니다.	작업 내용 섹션 작성, 담당 영역 체크, 테스트 결과 및 작업 범위 확인 항목을 완성하고, 관련 이슈 및 요구사항 번호를 구체적으로 기입하세요.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 주요 변경사항인 사건작성 페이지 구현을 명확하게 반영하고 있으며, 간결하고 구체적입니다.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/dispute-page

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 6

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/ui/Select.module.scss (1)

21-36: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

포커스 표시를 복원하세요.

outline: none만 있고 대체 :focus-visible 스타일이 없어 키보드 사용자가 현재 포커스를 확인할 수 없습니다. 트리거와 옵션 모두에 명시적인 포커스 스타일을 추가하세요.

♿ 제안 수정

   &__trigger {
     width: 100%;
     height: fn.r(52);
@@
     text-align: left;
     transition: border-color 0.15s;
+
+    &:focus-visible {
+      outline: 2px solid var(--border-brand);
+      outline-offset: fn.r(2);
+    }
 
     &--placeholder {
       color: var(--text-secondary);

-    &:hover {
+    &:hover,
+    &:focus-visible {
       background-color: var(--bg-page);
     }
+
+    &:focus-visible {
+      outline: 2px solid var(--border-brand);
+      outline-offset: fn.r(2);
+    }
 
     &--selected {

Also applies to: 77-88

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/ui/Select.module.scss` around lines 21 - 36, The &__trigger
selector removes the default outline with outline: none but provides no
alternative focus indicator, making it inaccessible for keyboard users. Add a
:focus-visible pseudo-selector to the &__trigger block that restores visible
focus indication using properties like outline, border-color, or box-shadow.
Additionally, apply the same :focus-visible focus styling to the options block
(referenced in the "Also applies to" note) to ensure consistent focus indication
across both the trigger and dropdown options for keyboard navigation
accessibility.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/app/`(page)/disputes/[id]/statement/page.tsx:
- Around line 34-36: The category variable is being assigned a default fallback
value of 'romance' when the raw category is invalid, which prevents the
conditional check at line 46 from ever being true. Instead of always assigning a
fallback value in the ternary expression, modify the category assignment to set
it as undefined or null when rawCategory is not found in VALID_CATEGORIES,
allowing the if (!category) conditional block to properly execute the modal
blocking logic when category is missing.

In `@src/app/`(page)/disputes/[id]/statement/StatementPage.module.scss:
- Around line 27-29: The StatementPage.module.scss file has Stylelint violations
for the `declaration-empty-line-before` rule at lines 27-29, 57-59, and 105-107.
Add an empty line before the first declaration that follows the `@include`
statement in each of these locations. Specifically, insert a blank line between
`@include` m.text-body-s; and color: v.$color-black; to comply with the
declaration-empty-line-before spacing requirement and prevent CI merge blockers.

In `@src/components/ui/Select.module.scss`:
- Around line 61-75: The &__dropdown class is missing a margin reset for the ul
element. While list-style and padding have been reset to control the visual
appearance, the browser's default ul margin is not being reset, which can cause
spacing and alignment issues with the absolutely positioned dropdown. Add
margin: 0 to the &__dropdown styles to reset this default margin along with the
existing list-style and padding properties.

In `@src/components/ui/Select.tsx`:
- Around line 39-40: The hasValue determination at line 40 checks if value is
truthy, but it should instead verify that the selected value actually exists in
the options array. When selectedLabel is undefined (because options.find returns
no match), hasValue should be false to prevent displaying an empty trigger text.
Replace the hasValue logic to check whether selectedLabel exists instead of
checking Boolean(value), ensuring the display state is determined by whether a
matching option was actually found.
- Around line 58-72: The button element with id {selectId} in the Select
component is applying error styling conditionally based on the error prop, but
it lacks the necessary ARIA attributes to communicate the error state to
assistive devices. Add aria-invalid attribute set to the truthiness of the error
prop to indicate invalid state, and add aria-describedby attribute pointing to
an error message element id so screen readers can associate the error
description with the trigger button. This ensures both the invalid state and
error details are properly announced to users of assistive technologies.
- Around line 85-99: The Select component's option items (li elements with
role="option") currently only support mouse interaction via onMouseDown. To make
the dropdown keyboard-accessible, add keyboard support to the list items by:
making them focusable with tabIndex="0", adding an onKeyDown handler to the li
elements that calls handleSelect when Enter or Space keys are pressed, and
ensure the ul with role="listbox" properly manages focus. This will allow users
to navigate and select options without a mouse while maintaining the existing
mouse functionality.

---

Outside diff comments:
In `@src/components/ui/Select.module.scss`:
- Around line 21-36: The &__trigger selector removes the default outline with
outline: none but provides no alternative focus indicator, making it
inaccessible for keyboard users. Add a :focus-visible pseudo-selector to the
&__trigger block that restores visible focus indication using properties like
outline, border-color, or box-shadow. Additionally, apply the same
:focus-visible focus styling to the options block (referenced in the "Also
applies to" note) to ensure consistent focus indication across both the trigger
and dropdown options for keyboard navigation accessibility.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: a43fa458-dc64-4aa5-b08f-fa09b538417f

📥 Commits

Reviewing files that changed from the base of the PR and between d7f47d4 and 95019dd.

📒 Files selected for processing (18)

• docs/guides/CODING_CONVENTION.md
• src/app/(page)/disputes/[id]/statement/StatementPage.module.scss
• src/app/(page)/disputes/[id]/statement/page.tsx
• src/components/feedback/Toast.module.scss
• src/components/layout/BottomNavigation.module.scss
• src/components/layout/Header.module.scss
• src/components/ui/ActionPrompt.module.scss
• src/components/ui/Button.module.scss
• src/components/ui/CaseCard.module.scss
• src/components/ui/CategoryFilter.module.scss
• src/components/ui/Input.module.scss
• src/components/ui/Select.module.scss
• src/components/ui/Select.tsx
• src/components/ui/Spinner.module.scss
• src/components/ui/StatusBadge.module.scss
• src/components/ui/Tab.module.scss
• src/components/ui/Tabs.module.scss
• src/components/ui/Textarea.module.scss

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/ui/Select.tsx`:
- Around line 31-33: The Select component is creating DOM IDs from the `label`
string, which is unstable since labels can contain spaces, be duplicates, or be
display-only text, causing unreliable `htmlFor` and `aria-activedescendant`
connections. Remove the label-based ID generation in the `resolvedId` assignment
(where it constructs `select-${label}`) and always use the stable `internalId`
from React.useId() instead. Additionally, review the option ID generation at
lines 145-151 (referenced in "Also applies to" section) and replace any
value/label-based option IDs with index-based option IDs to ensure consistent,
reliable accessibility connections.
- Around line 82-87: The keyboard event handler in the Select component is
preventing the default Tab key behavior for both Escape and Tab cases. Separate
the Escape and Tab case handlers so that Escape continues to call
preventDefault() and focus the trigger, while Tab only closes the dropdown by
calling setOpen(false) without preventDefault(), allowing the browser's natural
tab focus movement to continue to the next focusable element.
- Around line 67-81: The handleListKeyDown function crashes when attempting to
select an option if the options array is empty or the focusedIndex is out of
bounds. In the Enter and Space key case within the switch statement, add a guard
condition to check that options array is not empty and focusedIndex is a valid
index before calling handleSelect with options[focusedIndex].value. Only proceed
with the selection if these conditions are met.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 542e3c5c-137b-4a79-ba67-4ead94e68002

📥 Commits

Reviewing files that changed from the base of the PR and between 95019dd and 8a98285.

📒 Files selected for processing (2)

• src/components/ui/Select.module.scss
• src/components/ui/Select.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/ui/Select.module.scss

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/app/api/disputes/route.ts (1)

176-188: ⚠️ Potential issue | 🟠 Major

차단 목록(blocklist) 방식은 DELETED 모드를 허용하므로 허용 목록(allowlist) 방식으로 변경 필요

현재 room.roomMode === 'CLOSED' || room.roomMode === 'EXPIRED' 조건은 DELETED 모드를 허용합니다. 주석(line 123)에 명시된 대로 ai_chat, invite_ready, one_to_one 모드만 허용해야 합니다. Prisma 스키마에는 이미 DELETED 모드가 정의되어 있으며, 같은 파일 구조의 다른 엔드포인트(rooms/[id]/close/route.ts)에서는 allowlist 패턴(CLOSEABLE_MODES)을 사용하고 있습니다.

✅ Allowlist 방식으로 정렬하는 제안

+    const ALLOWED_DISPUTE_MODES = ['AI_CHAT', 'INVITE_READY', 'ONE_TO_ONE'] as const
-    if (room.roomMode === 'CLOSED' || room.roomMode === 'EXPIRED') {
+    if (!ALLOWED_DISPUTE_MODES.includes(room.roomMode as (typeof ALLOWED_DISPUTE_MODES)[number])) {
       return NextResponse.json<ApiResponse>(
         {
           success: false,
           error: {
             code: 'ROOM_NOT_READY',
-            message: '이미 종료되거나 만료된 방입니다.',
+            message: '사건을 생성할 수 없는 방 상태입니다.',
             details: `현재 방 상태: ${room.roomMode.toLowerCase()}`,
           },
         },
         { status: 422 },
       )
     }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/api/disputes/route.ts` around lines 176 - 188, The room mode
validation in the disputes route is using a blocklist approach that
inadvertently allows the DELETED mode. Change the validation logic from
rejecting CLOSED and EXPIRED modes to an allowlist approach that only accepts
the valid modes: ai_chat, invite_ready, and one_to_one. Replace the condition
that currently checks for CLOSED or EXPIRED with a check that verifies the
room.roomMode is one of the allowed modes. Consider defining a constant (similar
to CLOSEABLE_MODES pattern used in rooms/[id]/close/route.ts) to maintain
consistency across the codebase and improve maintainability.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@src/app/api/disputes/route.ts`:
- Around line 176-188: The room mode validation in the disputes route is using a
blocklist approach that inadvertently allows the DELETED mode. Change the
validation logic from rejecting CLOSED and EXPIRED modes to an allowlist
approach that only accepts the valid modes: ai_chat, invite_ready, and
one_to_one. Replace the condition that currently checks for CLOSED or EXPIRED
with a check that verifies the room.roomMode is one of the allowed modes.
Consider defining a constant (similar to CLOSEABLE_MODES pattern used in
rooms/[id]/close/route.ts) to maintain consistency across the codebase and
improve maintainability.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 3e72691f-8630-44d3-9233-d3c355e9e041

📥 Commits

Reviewing files that changed from the base of the PR and between 8a98285 and 4dfc753.

📒 Files selected for processing (1)

• src/app/api/disputes/route.ts