[UI/#15] 공통 모달 구현

[sungtaegyeong]

📌 관련 이슈번호

(Closes 키워드가 있어야 PR이 머지되었을 때 이슈가 자동으로 닫힌다)

• Closes [UI] 공통 모달 구현 #15

📌 PR 유형

어떤 변경 사항이 있나요?

• 새 기능 추가
• 버그 수정
• 리팩토링

📌 PR 요약

공통 모달 UI 컴포넌트와 Zustand 기반 모달 store, 앱 전역에서 모달을 렌더링하는 ModalProvider를 추가했습니다.

📌 작업 세부 내용

1. 모달의 공통 구조를 기준으로 Modal 공통 컴포넌트를 추가했습니다.

   • dim backdrop
   • 제목 헤더
   • cancel / check 헤더 아이콘 옵션
   • 긴 본문 대응을 위한 ScrollView
   • 버튼/폼 등 세부 콘텐츠는 children으로 조합

2. Storybook에서 모달 UI를 확인할 수 있도록 예시 스토리를 추가했습니다.

   • 기본 모달
   • 확인 버튼이 포함된 모달
   • 긴 본문 모달

3. Zustand 기반 modalStore를 추가했습니다.

   • modal
   • openModal
   • closeModal

4. 앱 루트에 ModalProvider를 연결했습니다.

   • store의 modal 상태를 구독
   • modal이 있을 때 공통 Modal 렌더링
   • 닫기 동작은 closeModal로 연결

📸 스크린샷

🔗 기타 (공유사항)

[coderabbitai]

Walkthrough

Zustand 기반 모달 스토어와 공통 Modal 컴포넌트를 추가했다. ModalProvider를 앱 루트 레이아웃에 연결했다. 기본, 확인, 긴 본문 모달 Storybook 스토리를 추가했다.

Changes

공통 모달

Layer / File(s)	Summary
모달 상태 계약 store/modalStore.ts	ModalOptions와 ModalStore 타입을 추가했다. openModal은 옵션을 저장하고 closeModal은 모달 상태를 null로 변경한다.
Modal 컴포넌트와 스토리 components/common/Modal/Modal.tsx, components/common/Modal/Modal.stories.tsx	헤더 아이콘, 닫기 콜백, 오버레이 터치, 페이드 표시, 스크롤 콘텐츠를 지원하는 Modal을 추가했다. 기본, 확인, 긴 본문 스토리를 정의했다.
전역 모달 연결 components/ModalProvider.tsx, app/_layout.tsx	ModalProvider가 스토어의 모달 상태를 구독하고 Modal을 조건부 렌더링한다. 루트 레이아웃에 ModalProvider를 추가했다.

Estimated code review effort: 3 (Moderate) | ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	제목이 이슈 #15의 공통 모달 구현 내용을 명확하게 요약합니다.
Description check	✅ Passed	관련 이슈, 변경 유형, 요약, 세부 내용, 스크린샷을 포함해 템플릿을 대부분 충족합니다.
Linked Issues check	✅ Passed	공용 Modal 컴포넌트 구현 요구사항을 충족하며, 관련 store와 provider도 모달 동작에 필요한 범위입니다.
Out of Scope Changes check	✅ Passed	Modal, modalStore, ModalProvider, Storybook 변경은 공통 모달 구현 목적과 직접 관련됩니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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 ui/15-common-modal

---

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

[github-actions]

🤖 PR Checks 결과

체크 항목	결과
Lint	✅
Typecheck	✅
Expo Doctor	✅

워크플로우 로그 보기

[coderabbitai]

🧹 Nitpick comments (1)

components/common/Modal/Modal.tsx (1)

25-32: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

ModalProps를 파일 상단으로 이동하세요.

ModalProps를 import와 ModalHeaderIcon 선언 다음에 배치하세요. 현재 위치는 components/**의 props 타입 선언 규칙과 다릅니다.

As per path instructions, "props 타입은 파일 상단에 type XxxProps = {} 형태로 선언".

🤖 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 `@components/common/Modal/Modal.tsx` around lines 25 - 32, ModalProps 선언을
Modal.tsx 파일 상단으로 이동하세요. import 문과 ModalHeaderIcon 선언 바로 다음, 컴포넌트 구현보다 앞에 배치하고
현재의 props 필드와 타입은 그대로 유지하세요.

Source: Path instructions

🤖 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.

Nitpick comments:
In `@components/common/Modal/Modal.tsx`:
- Around line 25-32: ModalProps 선언을 Modal.tsx 파일 상단으로 이동하세요. import 문과
ModalHeaderIcon 선언 바로 다음, 컴포넌트 구현보다 앞에 배치하고 현재의 props 필드와 타입은 그대로 유지하세요.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 78e0399d-e338-4839-8159-b212da4451b1

📥 Commits

Reviewing files that changed from the base of the PR and between d5a547d and 76fb21d.

📒 Files selected for processing (5)

• app/_layout.tsx
• components/ModalProvider.tsx
• components/common/Modal/Modal.stories.tsx
• components/common/Modal/Modal.tsx
• store/modalStore.ts