corpi
abdde2a8ae
맥락: - 기존 app 대시보드와 space 화면의 UI가 SaaS 툴처럼 딱딱하고 투박하여, 유저가 기꺼이 지갑을 열 만한 몰입감과 고급스러움(Premium feel)이 부족함. - 인지적 과부하를 줄이기 위해 제안된 '첫 5분 행동(Micro-step)'이 타이머 영역에 묻혀 있어 행동 유발 효과가 미미함. 변경사항: - app: 컨테이너 박스를 제거하고 전체 배경 화면(Immersive Background)과 Glassmorphism을 활용한 1.5 Step 진입 플로우로 전면 개편. - space/hud: 하단의 두꺼운 타이머 패널을 초박형(Slim) 글라스 알약 형태로 축소하여 배경 씬의 개방감 확보. - space/hud: 목표(Goal)와 첫 단계(Micro-step)를 분리하여 좌측 상단의 우아한 Floating UI로 재배치하고, 체크 완료 시 사라지는 도파민 인터랙션 추가. - space/tools: 흩어져 있던 노트, 사운드, 설정 도구들을 우측 레일(Right-Rail)로 통합하고 팝오버 디자인을 고급화함. - ui/contrast: 밝은 배경에서도 텍스트가 잘 보이도록 좌측 상단 비네팅(Vignette) 및 다중 텍스트 그림자(Multi-layered Shadow) 효과 적용. 검증: - npm run build 정상 통과 확인. - 브라우저 상에서 micro-step 완료 애니메이션 및 도구막대 팝오버 슬라이드 동작 확인. 세션-상태: app 진입부터 space 몰입까지의 코어 UX/UI 하이엔드 개편 완료. 세션-다음: 프로 요금제(PRO) 전환 유도(Paywall) 흐름 및 상세 분석 리포트(Analytics) 뷰 구현. 세션-리스크: 없음.
1.8 KiB
1.8 KiB
02. Architecture & FSD Rules
레이어 구조
src/
app/ # 라우트 진입점, 조합 전용
widgets/ # 화면 섹션 단위 조합
features/ # 사용자 액션/유즈케이스 단위
entities/ # 도메인 타입/더미 데이터
shared/ # 공용 UI/유틸
핵심 규칙
page.tsx는 조합만 수행한다.- 비즈니스 로직은
features또는entities로 이동한다. - UI 상태(토글/선택)만 컴포넌트 내부에서 최소 허용한다.
- 파일 길이 500줄 이상이면 즉시 분리한다.
- 하위 레이어가 상위 레이어를 import하지 않는다.
- 전역 상태가 필요하면 먼저 해당 도메인 slice의
model/안에 둔다.
Import 방향 규칙
app->widgets,features,entities,sharedwidgets->features,entities,sharedfeatures->entities,sharedentities->sharedshared-> 외부 의존성 또는shared내부
금지:
features-> 다른features직접 참조 (강한 결합 유발)shared->entities/features/widgets/app참조page.tsx에 도메인 로직/세부 UI 구현 누적- 루트 전역 저장소를 관성적으로 추가하는 것
구현 정책 (이 프로젝트 전용)
- 실제 타이머/오디오/서버/DB 기능은 구현하지 않는다.
- 기능 트리거는 토스트 또는 더미 상태 전환으로 표현한다.
- 도메인 표시는
entities데이터에서 읽고 뷰 하드코딩을 지양한다. - 인증/세션 같은 전역 상태도 가능하면 해당 도메인
entities/*/model안에서 관리한다.
파일 분리 기준
- 조건:
- 파일 500줄 이상
- 하나의 파일에 2개 이상의 독립 관심사가 혼재
- 분리 대상 예시:
- UI 파트 ->
ui/* - 상태/핸들러 ->
model/* - 타입 ->
model/types.ts
- UI 파트 ->