corpi
85488f542e
맥락: - 프로필 왼쪽 등급 칩에 고급스러운 대우감이 더 필요해 재질감/여백/위계를 추가 보정했다. 변경사항: - MembershipTierBadge의 높이(h-9), 최소폭, 자간을 조정해 배지가 독립된 프리미엄 토큰처럼 보이도록 정렬했다. - PRO는 모바일에서 PRO, 데스크톱에서 PRO MEMBER를 표시하도록 분리해 작은 화면 밀집을 줄였다. - 등급별 표면을 샴페인/뉴트럴/틸 계열 저채도 그라데이션과 미세 하이라이트로 조정해 차분한 프리미엄 톤을 강화했다. - AppTopBar 우측 그룹 간격을 gap-3으로 넓혀 배지와 프로필 트리거 간 시각 충돌을 완화했다. - docs/session_brief.md, docs/90_current_state.md에 변경사항과 리스크를 갱신했다. 검증: - npx tsc --noEmit 세션-상태: /app 헤더의 멤버십 배지를 조용한 프리미엄 위계로 고도화했다. 세션-다음: RoomSheet 인원수 기반 UI의 큐레이션형 치환 범위를 확정해야 한다. 세션-리스크: 등급 칩 최소폭 증가로 초소형 화면에서 헤더 가로 여유가 줄어들 수 있다.
VibeRoom Web
Next.js(App Router) + TypeScript + TailwindCSS 기반 VibeRoom 프론트엔드입니다.
실행 방법
npm install
npm run dev
브라우저에서 http://localhost:3000 접속
주요 라우트
/: Landing 페이지 (src/app/(landing)/page.tsx)/app: 가상공간 입장 허브/space: 집중공간 스켈레톤/stats: 집중 통계 목업/settings: 설정 목업/login: 로그인
구조
FSD 스타일로 src/ 하위 레이어를 사용합니다.
src/entities: room/user/session 타입 + 더미 데이터src/features: room-select/check-in/reactions/custom-entry-modal/profile-menu/distraction-dumpsrc/widgets: 페이지 섹션 단위 UI (TopBar, StartRitual, RoomsGallery, SpaceShell 등)src/shared: 공용 UI, 유틸, 설정src/app: App Router 페이지 조합
구현 범위
이번 변경은 UI 목업 중심입니다.
- 타이머 카운트다운/오디오 재생/실시간/DB 저장/API 호출 미구현
- 선택 하이라이트, 패널 토글, 모달 탭, 드롭다운, 라우팅, 토스트만 구현
문서(작업 재개용)
세션이 끊겨도 같은 품질로 이어서 작업하려면 아래 문서를 먼저 확인합니다.
docs/README.mddocs/00_project_brief.mddocs/01_ui_guidelines.mddocs/02_arch_fsd_rules.mddocs/03_routes_map.mddocs/90_current_state.md