[✨ Feature] Modal / Panel 공통 컴포넌트 구현

[Lseojeong]

📌 설명

서비스 전반에서 일관된 방식으로 모달과 패널을 사용할 수 있도록 공통 컴포넌트를 구현합니다.

Root 기반의 Compound Pattern을 적용하여 모달과 패널을 동일한 인터페이스로 사용할 수 있도록 구성합니다. 모달은 Overlay를 제공하고, 패널은 Overlay 없이 화면에 표시되도록 지원합니다. 또한 ESC 키 및 외부 영역 클릭 시 닫기 기능을 제공하며, 작성 중인 모달은 의도치 않게 닫히지 않도록 제어할 수 있도록 구현합니다.

🛠️ 구현 목록 (TODO)

진행할 작업을 체크리스트로 작성해주세요.

Modal / Panel

• Root 기반 Compound Pattern 구현
• Modal 지원
• Panel 지원
• Panel은 Overlay 없이 표시
• Controlled / Uncontrolled 지원
• Open / Close 상태 관리

Compound Pattern

• Root 구현
• Trigger 구현
• Portal 구현
• Overlay 구현
• Content 구현
• Header 구현
• Body 구현
• Footer 구현
• Close 구현

Interaction

• ESC 키 닫기 Hook 구현
• Click Outside 시 닫기 구현
• 작성 중인 모달은 Outside Click 닫기 방지
• 작성 중인 모달은 ESC 닫기 방지 옵션 지원

접근성

• Focus Trap 적용
• Focus Restore 지원
• ARIA 속성 적용
• Scroll Lock 지원

문서화

• Storybook 작성
• Modal / Panel 예제 작성

✅ 참고

디자인 링크, 관련 이슈 등 (선택)

• Radix UI Dialog
• 웹 접근성(WAI-ARIA Dialog Pattern)