Frontend
결과 · 역할
- 공통
- FSD + DDD-lite 구조로 작업
- 역할
- 테마 상태관리 및 Modal, 개별 페이지 작업
주요 작업
담당한 역할
- 테마(다크모드) 상태 관리
- 모달 매니저(Zustand stack) 통합
- 개별 페이지 구현
구현한 기능
- 예약/관리 플로우
- 알림/리뷰/프로필 영역 구성
문제와 해결
1
FSD + DDD-lite 구조 정착
page는 조립만 담당하고 features/entities에 로직을 고정하였습니다. Lint/CI로 디렉토리 규칙을 자동 검증해 구조가 흔들리지 않도록 유지하였습니다.
FSD :
page(화면 조립)
features(기능 로직)
entities(공통 상태·규칙)
shared(기술적 재사용 요소)
lite DDD :
규모 대비 복잡도가 과도해질 수 있음을 고려하여
완전한 DDD의 Entity 구현이 아닌,
타입/스키마로 구조 및 제약을 표현2
다크 모드 상태 관리 일관화
쿠키로 초기 테마를 결정한 뒤 Provider에서 상태를 관리하고, data-theme로 스타일을 전환하였습니다. CSS 변수와 Tailwind 매핑으로 유지보수 비용을 줄였습니다.
3
모달 매니저 통합
Zustand + stack(LIFO) 구조로 모달을 중앙 관리하고 Portal로 렌더링하였습니다. z-index 순서와 공통 UX(ESC/배경 클릭)를 통일해 예측 가능한 흐름을 만들었습니다.
아키텍처 · 기술 선택
- app은 라우팅/레이아웃만 담당
- 비즈니스 로직은 features/entities에만 배치
- API 네이밍은 Swagger 기준 정렬
깨달은 점
- 디렉토리 규칙을 CI로 고정하면 구조가 흔들리지 않음
- 테마·모달처럼 전역 UX는 한곳에서 관리하는 편이 예측 가능함