Files

corpi 85488f542e style(profile): 멤버십 배지를 Quiet Premium 톤으로 2차 고급화

맥락:
- 프로필 왼쪽 등급 칩에 고급스러운 대우감이 더 필요해 재질감/여백/위계를 추가 보정했다.

변경사항:
- 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의 큐레이션형 치환 범위를 확정해야 한다.
세션-리스크: 등급 칩 최소폭 증가로 초소형 화면에서 헤더 가로 여유가 줄어들 수 있다.

2026-03-01 12:39:27 +09:00

14 KiB

Raw Blame History

90. Current State

Last Updated: 2026-02-28

DONE

세션 복구 운영 문서 추가:
- docs/06_commit_convention.md
- docs/07_session_recovery.md
워크플로우 토큰 절약 모드 추가:
- docs/context_core.md 신설
- docs/workFlow.md를 기본 3문서 + 조건부 로드로 변경
워크플로우 기본 로드를 2파일로 축소:
- docs/work.md
- docs/session_brief.md
복구 스크립트 추가:
- scripts/session/recover-context.sh
npm run session:recover 명령 추가
/app Start Ritual에서 절차감을 높이던 건너뛰기 제거
/app에서 다시 시작(30초) 제거
/space HUD에 features/restart-30s 기반 ↻ 다시 시작 + 30초 배지 추가
/space 하단 사운드 프리셋 바 제거, 오른쪽 🎧 Sound 시트로 이동
features/sound-preset + widgets/sound-sheet 추가
features/immersion-mode 추가, Quick 시트에서 몰입 모드 토글 연결
/space 상단 헤더 크롬 최소화:
- 헤더 프레임(border/강한 배경) 제거
- 패딩 축소로 배경 노출 증가
타이머 HUD 하단 위치를 safe-area 기반 최소 여백으로 조정
몰입 모드 ON 시 상단 액션을 나가기 버튼으로 전환
- 클릭 시 토스트 나가기(더미) 노출 + 몰입 모드 OFF
/space 상단 우측 나가기 액션을 롱프레스(1초)로 변경
- 0.05초에 진행률 20%까지 빠르게 상승
- 1초 유지 시 나가기(더미) 토스트 + 몰입 모드 OFF
- 몰입 OFF: 좌→우 fill(bar), 몰입 ON: 원형 ring 진행 표시
롱프레스 bar 진행 표시 버그 수정:
- 눌렀을 때 즉시 fill이 보이도록 CSS keyframes 기반으로 교체
- 완료 후 fill이 0으로 역방향 축소되는 현상 제거(짧은 유지 후 언마운트)
- fill 끝단을 직선 형태로 정리(rounded 캡 제거)
30초 복귀 액션 카피를 감성 라운지 톤으로 리브랜딩:
- 버튼 라벨: 숨 고르기 30초
- 진입 시 HUD 모드 라벨: BREATHE
- 클릭 시 저자극 안내 문구 노출(2초 이내 미니 안내 + 토스트)
/landing 이후 앱 플로우 배경 톤을 밝은 무드로 조정:
- /app 허브 배경 오버레이를 밝게 조정하고 룸 카드 어두운 마스크 강도 완화
- /space 배경 오버레이/비네팅 강도를 낮춰 배경 노출 증가
- /stats, /settings 배경/패널을 라이트 팔레트로 전환
/app 룸 카드 hydration 에러 수정:
- RoomPreviewCard의 중첩 <button> 구조 제거
- 카드 내부 칩을 비인터랙티브 span으로 변경해 HTML 규칙 위반 해소
/app 허브 배경/카드 가시성 안정화 패치:
- 허브 배경에 blur + 밝기 보정 + 저채도 필터를 적용해 배경 복잡도 완화
- 허브 전역 오버레이를 밝은 워시 중심으로 조정하고 그레인 강도 축소
- RoomPreviewCard 내부 콘텐츠 영역에 반투명 패널을 추가해 배경 변동과 텍스트 대비를 분리
- GlassCard 표면을 조금 더 밝고 가벼운 글래스 톤으로 보정
커스텀 입장 모달 톤/레이아웃 안정화:
- 모달 표면/오버레이를 허브 밝은 톤과 유사한 저대비 글래스로 전환
- 공간/사운드/타이머 탭 콘텐츠 영역을 고정 높이로 통일해 전환 시 모달 크기 흔들림 제거
- 탭/옵션 버튼과 입력 필드를 밝은 팔레트로 정리해 가독성 개선
/app 핵심 카드(시작/공간) 라이트 카드 전환:
- 지금, 몰입을 시작해요 / 오늘의 공간 컨테이너를 흰 표면 + 어두운 텍스트 톤으로 조정
- 입력/칩/보조 버튼 색상도 라이트 카드 기준으로 재정렬
- 허브 배경은 가상 공간 이미지를 더 강한 blur로 노출해 카드 외곽 배경으로 유지
/app 오늘의 공간 카드/배경을 룸별 단색 팔레트로 전환:
- entities/room에 룸별 hubColor를 추가하고 색이 서로 겹치지 않도록 분리
- 오늘의 공간 카드는 이미지 대신 룸 고유 단색 배경으로 렌더링
- 허브 페이지 배경도 선택된 룸의 동일 색으로 전환되도록 연결
/app 오늘의 공간 카드에 실제 사진(외부 URL) 적용:
- entities/room에 cardPhotoUrl, googleImageSearchUrl, managedCardPhotoUrl 필드 추가
- 카드 배경은 실제 사진을 사용하고, Google 이미지 검색 링크를 룸별로 보관
- 추후 managedCardPhotoUrl만 채우면 자가 관리 이미지로 전환되도록 fallback helper 추가
/app 배경을 카드 사진 기반 블러로 전환:
- 허브 배경이 선택된 카드의 실제 사진을 블러 처리해 표시되도록 변경
- 앱 첫 진입 시 ROOM_THEMES[0]를 초기 선택으로 명시해 배경/선택 테두리 기준을 고정
/app 헤더/프로필/공간 카드 디테일 조정:
- AppTopBar 배경 제거 및 로고 왼쪽 원형 V 배지 제거
- 프로필 트리거의 이름 왼쪽에 멤버십 등급(PRO/NORMAL/TEAM) 배지 노출
- 공간 카드 높이를 고정해 카드 사진 사이즈를 통일
- 배경 사진 전환 시 resize처럼 보이던 transition-all 제거
/app 헤더/프로필 시각 위계 재정렬:
- 헤더 배경/보더/텍스트를 Start Ritual 카드와 동일한 라이트 톤(bg-white/78, text-brand-dark)으로 통일
- 멤버십 등급 뱃지를 프로필 드롭다운 트리거 외부로 분리해, 프로필 왼쪽 독립 뷰로 배치
- 프로필 드롭다운 트리거는 아바타+이름만 유지하도록 단순화
/app 멤버십 등급 배지의 프리미엄 톤 강화:
- 배지 타이포를 text-xs 이상으로 상향하고 칩 높이/패딩을 키워 가독성과 존재감을 개선
- PRO MEMBER 라벨과 저채도 그라데이션/내부 하이라이트/부드러운 그림자로 유료 멤버 위계를 강화
- NORMAL/TEAM도 등급별 표면 톤과 마커를 분리해 동일 구조 안에서 차분한 구분을 제공
/app 멤버십 배지 고급화 2차 적용:
- 등급 칩 높이를 h-9, 최소폭을 부여해 헤더 내에서 배지가 독립된 프리미엄 토큰처럼 보이도록 정렬
- PRO는 모바일 축약 라벨, 데스크톱 PRO MEMBER 라벨을 분리해 밀집을 완화
- 헤더 우측 그룹 간격을 gap-3으로 조정해 배지와 프로필 트리거의 시각 충돌을 완화
몰입 모드 ON 시 /space 크롬 정리:
- 상단 Current Room 블록 숨김
- 우상단 허브 버튼 소형 아이콘화
- 오른쪽 아이콘 레일 기본 미니화(hover/click 시 확장)
- HUD 대비/불투명도 완화
- 비네팅/그레인 강화
/app 룸 카드의 인원수 기반 정보 제거
entities/room에 분위기/추천 필드 추가:
- recommendedSound
- recommendedTime
- vibeLabel
룸 카드 정보 표현을 큐레이션 중심으로 전환

RoomSheetWidget/도크 패널의 인원수 기반 UI를 큐레이션형 정보로 재정의
몰입 모드에서 터치 환경(hover 없음) 레일 노출 UX를 보완할지 정책 확정
/space 헤더 최소화 스타일을 테마별(밝은 배경) 대비 점검
롱프레스 나가기 버튼의 터치 환경 힌트(첫 진입 안내) 필요 여부 판단
Room 시트 인원수 기반 카피를 분위기형 카피로 치환
30초 복귀 안내 카피의 노출 위치(HUD 내 vs 토스트 전용) AB 점검

RISKS

npm run build는 네트워크 제한 시 Google Font fetch 실패 가능
터치 기기에서 레일 미니 상태가 발견성 낮을 수 있어 추가 힌트가 필요할 수 있음
일부 시트(예: Room)는 아직 인원수 중심 문구가 남아 있어 톤 불일치 가능성 존재
safe-area 값이 작은 기기에서는 HUD가 너무 낮게 느껴질 수 있어 세부 조정 여지 존재
롱프레스 인터랙션은 첫 사용자에게 즉시 인지되지 않을 수 있어 시각적 힌트 필요 가능성 있음
bar/ring 진행 표시는 서로 다른 구현(JS/CSS)이라 동기화 규칙 변경 시 회귀 점검이 필요
안내 카피가 HUD 목표 문구와 교체 표시되므로 정보 밀도 균형 점검 필요
밝아진 배경 구간에서 일부 white 텍스트의 대비가 환경(디스플레이 밝기)에 따라 약해질 수 있음
배경 필터/블러 적용으로 저사양 환경에서 스크롤 시 미세한 페인팅 비용 증가 가능성 존재
모달 본문 고정 높이 적용으로 작은 화면에서 내부 스크롤 의존도가 이전보다 높아질 수 있음
룸 프리뷰 카드 내부는 이미지 기반 다크 텍스트 체계라 컨테이너와 톤 차이가 남아 추가 톤 정리가 필요할 수 있음
단색 팔레트가 일부 기기 색감에서 유사하게 보일 수 있어 실제 디스플레이 기준 재점검 필요
외부 이미지 URL(임시) 의존이라 소스 만료/속도 이슈 가능성이 있어 자가 호스팅 전환 필요
전체 배경 블러 강도 증가로 저사양 환경에서 GPU 부담이 늘 수 있어 실기기 체감 점검 필요
밝은 배경 사진과 라이트 헤더 조합에서 상단 경계 인지가 약해질 수 있어 대비 점검 필요
등급 칩 최소폭 증가로 초소형 화면에서 헤더 가로 여유가 줄어들 수 있어 간격 점검 필요

CHANGED FILES

docs/06_commit_convention.md
docs/07_session_recovery.md
docs/context_core.md
docs/session_brief.md
docs/workFlow.md
docs/README.md
.gitmessage-session.txt
scripts/session/recover-context.sh
package.json
src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx
src/widgets/app-hub/ui/AppHubWidget.tsx
src/entities/room/model/types.ts
src/entities/room/model/rooms.ts
src/features/room-select/ui/RoomPreviewCard.tsx
src/widgets/app-hub/ui/AppHubWidget.tsx
src/widgets/app-top-bar/ui/AppTopBar.tsx
src/entities/user/model/types.ts
src/entities/user/model/mockUser.ts
src/entities/user/ui/MembershipTierBadge.tsx
src/features/profile-menu/ui/ProfileMenu.tsx
src/features/restart-30s/index.ts
src/features/restart-30s/model/useRestart30s.ts
src/features/restart-30s/ui/Restart30sAction.tsx
src/features/immersion-mode/index.ts
src/features/immersion-mode/model/useImmersionMode.ts
src/features/immersion-mode/ui/ImmersionModeToggle.tsx
src/features/sound-preset/index.ts
src/features/sound-preset/model/useSoundPresetSelection.ts
src/features/sound-preset/ui/SoundPresetControls.tsx
src/shared/ui/Toggle.tsx
src/widgets/sound-sheet/index.ts
src/widgets/sound-sheet/ui/SoundSheetWidget.tsx
src/widgets/space-chrome/index.ts
src/widgets/space-chrome/ui/SpaceChromeWidget.tsx
src/widgets/quick-sheet/ui/QuickSheetWidget.tsx
src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx
src/widgets/space-tools-dock/model/useSpaceToolsDock.ts
src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx
src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
src/widgets/space-chrome/ui/SpaceChromeWidget.tsx
src/features/immersion-mode/model/useImmersionMode.ts
src/features/exit-hold/index.ts
src/features/exit-hold/model/useHoldToConfirm.ts
src/features/exit-hold/ui/ExitHoldButton.tsx
src/app/globals.css
src/features/restart-30s/model/copy.ts
src/features/restart-30s/model/useRestart30s.ts
src/features/restart-30s/ui/Restart30sAction.tsx
src/features/restart-30s/index.ts
src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
src/widgets/app-hub/ui/AppHubWidget.tsx
src/features/room-select/ui/RoomPreviewCard.tsx
src/app/(app)/space/page.tsx
src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx
src/widgets/stats-overview/ui/StatsOverviewWidget.tsx
src/widgets/settings-panel/ui/SettingsPanelWidget.tsx
src/shared/ui/GlassCard.tsx
src/widgets/app-hub/ui/AppHubWidget.tsx
src/features/room-select/ui/RoomPreviewCard.tsx
src/shared/ui/Modal.tsx
src/shared/ui/Tabs.tsx
src/features/custom-entry-modal/ui/CustomEntryModal.tsx
src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx
src/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget.tsx
src/widgets/app-hub/ui/AppHubWidget.tsx
src/entities/room/model/types.ts
src/entities/room/model/rooms.ts
src/features/room-select/ui/RoomPreviewCard.tsx

QUICK VERIFY

/app: 건너뛰기/다시 시작 노출 없음
/app: 룸 카드에 사람 수 문구 없음, 추천 정보 노출
/space: 하단 사운드 바 없음, 오른쪽 🎧 Sound 시트에서 프리셋 선택 가능
/space: 몰입 모드 ON 시 상단 룸 블록 숨김 + 레일 미니화 + HUD 저대비 적용
/app: 콘솔에 button cannot be a descendant of button hydration 에러가 재발하지 않음
/app: 숲/벽난로처럼 텍스처가 많은 룸 선택 시에도 카드 내부 텍스트 시인성이 유지됨
커스텀 입장 모달 탭 전환(공간/사운드/타이머) 시 외곽 모달 크기가 유지됨
/app: 시작 카드/공간 카드가 흰 표면 + 어두운 텍스트로 표시되고, 카드 밖 배경은 블러된 가상 공간으로 노출됨
/app: 오늘의 공간 카드가 룸별 단색으로 표시되고, 허브 배경도 선택 카드 색으로 동기화됨
/app: 오늘의 공간 카드가 실제 사진으로 표시되고, room 데이터에 Google 검색 링크/자가 이미지 전환 필드가 포함됨
/app: 첫 진입 시 첫 카드가 선택된 상태로 보이며, 배경도 해당 카드 사진 블러로 시작됨
/app: 헤더가 시작 카드와 같은 라이트 톤으로 표시되고, 등급 배지가 프로필 왼쪽 독립 뷰로 노출됨
/app: 공간 카드가 동일 높이로 맞춰지고 카드 전환 시 배경 resize 느낌이 완화됨

14 KiB Raw Blame History

90. Current State

DONE

NEXT

RISKS

CHANGED FILES

QUICK VERIFY

14 KiB

Raw Blame History