⚙️[기능추가][RoomPage] RoomPage UI 레이아웃 구현 (목업 지도 + 패널 + 모달)

[EM-H20]

📝 현재 문제점

• 서비스 핵심 화면인 RoomPage(지도 화면)가 구현되어 있지 않음
• 닉네임 입력, 위치 등록, 결과 확인 등 핵심 사용자 플로우가 없음

🛠️ 해결 방안 / 제안 기능

• PRD 와이어프레임 7.2~7.4 기반 RoomPage 구현
• Google Maps API 키 미확보 상태이므로 목업 지도로 먼저 UI 완성
• 컴포넌트: RoomPage 셸, MapView(목업), MapMarker, NicknameModal, ResultPanel, ParticipantList, LocationConfirmSheet

⚙️ 작업 내용

• RoomPage 레이아웃 셸 구현 (헤더 + 지도영역 + 하단패널)
• MapView 목업 컴포넌트 구현 (마커 표시, 지도 클릭 시뮬레이션)
• MapMarker 컴포넌트 구현 (내 마커/타인 마커/중심점 색상 구분)
• 닉네임 입력 모달 구현 (Dialog 기반, 첫 진입 시 자동 표시)
• 결과 패널 + 참여자 목록 구현 (중심점, 최단거리, 참여자별 거리)
• 위치 확정 바텀시트 구현 (Drawer 기반, "여기로 확정!" + 취소)
• 전체 플로우 연결: 지도 클릭 → 위치 확정 → 마커 등록 → 결과 표시

🙋‍♂️ 담당자

• 백엔드: 이름
• 프론트엔드: 이름
• 디자인: 이름

[EM-H20]

Guide by SUH-LAB

브랜치

20260228_#5_RoomPage_UI_레이아웃_구현_목업_지도_패널_모달

커밋 메시지

RoomPage UI 레이아웃 구현 (목업 지도 + 패널 + 모달) : feat : {변경 사항에 대한 설명} https://github.com/Moaplace/moaplace-client/issues/5

[EM-H20]

📌 작업 개요

홈 화면(/)을 placeholder에서 실제 서비스 진입점으로 구현. 모아장소/모아타임 듀얼 기능 선택 UI, 방 생성 폼, 캘린더 기반 날짜 선택, PWA 설치 배너까지 포함하는 HomePage 전체 플로우 완성.

🎯 구현 목표

• PRD 와이어프레임 7.1 기반 HomePage 신규 구현
• 모아장소(place) / 모아타임(time) 듀얼 모드 지원
• 모아타임 선택 시 캘린더 다중 날짜 선택 기능 제공
• 캘린더 UI 리디자인 (대형 셀, 한국어 로케일, 커스텀 월 네비게이션)
• Room 타입 시스템 확장 (type, dates 필드 추가)

---

✅ 구현 내용

1. HomePage 구현

• 파일: src/pages/HomePage.tsx (신규)
• 변경 내용: 히어로 섹션 + 기능 선택 카드 + 방 생성 폼 + PWA 설치 배너 4개 섹션으로 구성
• 상태 관리: useState<RoomType>('place')로 선택된 기능 타입 관리, 하위 컴포넌트에 props 전달

2. FeatureSelector 카드 컴포넌트

• 파일: src/components/Home/FeatureSelector.tsx (신규)
• 변경 내용: 모아장소/모아타임 2열 그리드 카드 선택 UI 구현
• 디자인: 선택 시 border-primary + bg-primary-100, 미선택 시 border-black-300 + bg-white
• 아이콘: lucide-react의 MapPin(장소), Clock(시간) 사용

3. CreateRoom 방 생성 폼

• 파일: src/components/Home/CreateRoom.tsx (신규)
• 변경 내용: roomType에 따라 분기하는 방 생성 폼 구현
  • 공통: 모임 이름 입력 + CTA 버튼
  • 모아타임(time): 캘린더 다중 날짜 선택 UI 추가 표시
  • 모아장소(place): 캘린더 숨김
• 플로우: 생성 성공 시 toast 알림 + /room/:roomId로 네비게이트

4. 캘린더 UI 리디자인

• 파일: src/components/ui/calendar.tsx (shadcn 기반 커스텀)
• 변경 내용:
  • MonthCaption 커스텀: 현재 월 좌우에 인접 월 번호 표시 (2 **3** 4 형태)
  • Weekday 커스텀: 일요일 text-error(빨강), 토요일 text-primary(파랑) 컬러 코딩
  • CalendarDayButton: 단일/범위 선택 스타일 분기 처리
• CreateRoom에서의 classNames 오버라이드:
  • 흰색 카드 배경 (rounded-2xl bg-white shadow-sm)
  • 48px 셀 사이즈 (--cell-size: --spacing(12))
  • 한국어 로케일 (locale={ko})
  • showOutsideDays={false}로 이전/다음 달 날짜 숨김
  • 오늘 날짜 원형 primary 하이라이트

5. RoomType 타입 시스템 확장

• 파일: src/types/index.ts
• 변경 내용: RoomType = 'place' | 'time' 타입 추가, Room 인터페이스에 type, dates? 필드 추가

6. API 계층 시그니처 확장

• 파일: src/lib/api.interface.ts, src/lib/api.mock.ts
• 변경 내용: createRoom(name, type, dates?) 시그니처로 확장. Mock API에서 type/dates를 Room 객체에 저장

7. Zustand 스토어 확장

• 파일: src/store/roomStore.ts
• 변경 내용: createRoom 액션 시그니처를 (name, type, dates?) 3인자로 확장

8. 라우팅 및 레이아웃

• 파일: src/App.tsx
• 변경 내용: / → HomePage 연결, 레이아웃 max-w-2xl px-5로 확장

9. 전역 스타일 변경

• 파일: src/styles/globals.css
• 변경 내용: --background 값을 white(#FFFFFF) → black100(#F1F5F9)으로 변경하여 연회색 배경 적용

---

🔧 주요 변경사항 상세

클린 아키텍처 준수

Port(api.interface.ts) → Adapter(api.mock.ts) → Factory(api.ts) 구조 유지. createRoom 시그니처 변경이 3개 레이어에 일관되게 반영됨.

캘린더 커스텀 전략

shadcn/ui Calendar 기본 컴포넌트를 유지하면서 classNames 오버라이드와 components 커스텀(MonthCaption, Weekday)으로 확장. 기본 Calendar 동작은 보존하면서 CreateRoom에서만 대형 카드 스타일 적용.

특이사항:

• react-day-picker v9의 components.MonthCaption 오버라이드로 월 네비게이션 구현
• classNames 오버라이드 시 months에 relative 포함 필수 (nav absolute 기준점)
• 한국어 로케일은 react-day-picker/locale에서 직접 import

---

📦 의존성 변경

패키지	변경	용도
react-day-picker	추가 (shadcn Calendar 의존)	캘린더 컴포넌트

---

🧪 테스트 및 검증

• npm run build 빌드 성공 확인
• 모아장소 선택 시 캘린더 미표시, 모아타임 선택 시 캘린더 표시 확인
• 캘린더 다중 날짜 선택 동작 확인
• 월 네비게이션 (< >) 화살표 정상 동작 확인
• 요일 헤더 컬러 코딩 (일=빨강, 토=파랑) 확인
• 방 생성 후 /room/:roomId로 이동 확인

---

📁 변경 파일 목록

파일	상태	설명
src/pages/HomePage.tsx	신규	홈페이지 (히어로 + 기능 선택 + 방 생성 + PWA)
src/components/Home/FeatureSelector.tsx	신규	모아장소/모아타임 카드 선택 컴포넌트
src/components/Home/CreateRoom.tsx	신규	방 생성 폼 (캘린더 포함)
src/components/ui/calendar.tsx	신규	shadcn Calendar + MonthCaption/Weekday 커스텀
src/types/index.ts	수정	RoomType 추가, Room에 type/dates 필드
src/lib/api.interface.ts	수정	createRoom 시그니처 확장
src/lib/api.mock.ts	수정	Mock createRoom에 type/dates 반영
src/store/roomStore.ts	수정	createRoom 액션 시그니처 확장
src/App.tsx	수정	라우팅 연결 + 레이아웃 확장
src/styles/globals.css	수정	배경색 black100 변경

---

📌 참고사항

• PWA 설치 배너는 onInstall/onDismiss 콜백이 placeholder 상태 (Phase 6에서 usePWA 훅 연결 예정)
• /room/:roomId 페이지는 현재 placeholder (Room Page (준비 중))
• Mock API 사용 중이며 실제 백엔드 연동은 별도 작업 필요