From a2bebb3485b1a7360ca835bfb7f14f97c835d413 Mon Sep 17 00:00:00 2001 From: corpi Date: Mon, 2 Mar 2026 12:17:35 +0900 Subject: [PATCH] =?UTF-8?q?feat(app-hub):=20=ED=97=88=EB=B8=8C=20=EB=8F=84?= =?UTF-8?q?=EA=B5=AC=20=EB=A0=88=EC=9D=BC=EA=B3=BC=20=EC=9E=85=EC=9E=A5=20?= =?UTF-8?q?=EB=8F=99=EC=84=A0=EC=9D=84=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 맥락:\n- 상단 헤더 요소가 많아 허브의 핵심 흐름(공간 선택 → 목표 입력 → 입장)이 분산되었습니다.\n- 메모/통계/설정 진입을 상단이 아닌 보조 동선으로 옮겨 감성 톤을 유지할 필요가 있었습니다.\n\n변경사항:\n- 우측 아이콘 레일과 우측 드로어를 추가해 Inbox/Stats/Settings를 동일 패턴으로 제공했습니다.\n- TopBar에서 메모 버튼을 제거하고, 멤버십/PRO 동선은 ProfileMenu 드롭다운으로 정리했습니다.\n- Selected Space 박스를 슬림화하고 설명을 1줄로 제한해 시선 분산을 줄였습니다.\n- 추천 공간 카드에 텍스트 가독성 오버레이와 선택 표시(은은한 테두리/체크)를 적용했습니다.\n- Quick Entry에서 커스텀 CTA 무게를 낮추고 전체 톤을 가볍게 조정했습니다.\n- docs/work.template.md를 추가하고 docs/work.md의 현재 작업 지시를 갱신했습니다.\n\n검증:\n- npm run build\n- npx tsc --noEmit\n\n세션-상태: /app 허브가 상단 과밀 없이 레일+드로어 보조 동선으로 정리되었습니다.\n세션-다음: 드로어 패널의 실제 데이터 연결 시 도메인 상태와 연동을 진행합니다.\n세션-리스크: 드로어 포커스 트랩/키보드 동선은 추가 접근성 점검이 필요합니다. --- docs/work.md | 50 +------- docs/work.template.md | 48 +++++++ src/features/profile-menu/ui/ProfileMenu.tsx | 24 +++- .../room-select/ui/RoomPreviewCard.tsx | 47 +++++-- src/widgets/app-hub/ui/AppHubWidget.tsx | 30 ++--- src/widgets/app-top-bar/ui/AppTopBar.tsx | 63 +-------- src/widgets/app-utility-rail/index.ts | 3 + src/widgets/app-utility-rail/model/types.ts | 2 + .../app-utility-rail/ui/AppUtilityDrawer.tsx | 91 +++++++++++++ .../ui/AppUtilityRailWidget.tsx | 121 ++++++++++++++++++ .../ui/panels/InboxDrawerPanel.tsx | 78 +++++++++++ .../ui/panels/SettingsDrawerPanel.tsx | 98 ++++++++++++++ .../ui/panels/StatsDrawerPanel.tsx | 64 +++++++++ .../ui/RoomsGalleryWidget.tsx | 21 +-- .../ui/StartRitualWidget.tsx | 14 +- .../ui/ThoughtSummaryEntryWidget.tsx | 20 +-- 16 files changed, 610 insertions(+), 164 deletions(-) create mode 100644 docs/work.template.md create mode 100644 src/widgets/app-utility-rail/index.ts create mode 100644 src/widgets/app-utility-rail/model/types.ts create mode 100644 src/widgets/app-utility-rail/ui/AppUtilityDrawer.tsx create mode 100644 src/widgets/app-utility-rail/ui/AppUtilityRailWidget.tsx create mode 100644 src/widgets/app-utility-rail/ui/panels/InboxDrawerPanel.tsx create mode 100644 src/widgets/app-utility-rail/ui/panels/SettingsDrawerPanel.tsx create mode 100644 src/widgets/app-utility-rail/ui/panels/StatsDrawerPanel.tsx diff --git a/docs/work.md b/docs/work.md index d21e10a..1d31eb8 100644 --- a/docs/work.md +++ b/docs/work.md @@ -1,48 +1,2 @@ -# Work Order - -이 파일은 사용자가 이번 세션에서 처리할 작업을 적는 실행 입력서다. - -## 작성 규칙 - -- 작업은 가능한 한 "주제별"로 분리해서 작성한다. -- 한 주제는 가능하면 한 커밋으로 끝낼 수 있게 범위를 좁힌다. -- "금지사항/제외 범위"를 명시해서 불필요한 변경을 막는다. - -## 작업 템플릿 - -아래 블록을 복사해서 사용: - -```md -## 작업 1 -- 제목: -- 목적: -- 변경 범위: - - -- 제외 범위: - - -- 완료 조건: - - -- 검증: - - npx tsc --noEmit -- 커밋 힌트: - - type(scope): 한국어 요약 - -## 작업 2 (선택) -- 제목: -- 목적: -- 변경 범위: - - -- 제외 범위: - - -- 완료 조건: - - -- 검증: - - -- 커밋 힌트: - - -``` - -## 우선순위 - -- 위에서 아래 순서대로 높은 우선순위로 간주한다. -- `작업 1`을 먼저 처리하고, 완료 시 다음 작업으로 넘어간다. +프로필 왼쪽의 등급 칩의 글자가 너무 작다. +실제로 돈을 낸 사람들이 대우를 받을 수 있다는 느낌이 들도록 좀더 세련된 느낌을 줘야한다. diff --git a/docs/work.template.md b/docs/work.template.md new file mode 100644 index 0000000..d21e10a --- /dev/null +++ b/docs/work.template.md @@ -0,0 +1,48 @@ +# Work Order + +이 파일은 사용자가 이번 세션에서 처리할 작업을 적는 실행 입력서다. + +## 작성 규칙 + +- 작업은 가능한 한 "주제별"로 분리해서 작성한다. +- 한 주제는 가능하면 한 커밋으로 끝낼 수 있게 범위를 좁힌다. +- "금지사항/제외 범위"를 명시해서 불필요한 변경을 막는다. + +## 작업 템플릿 + +아래 블록을 복사해서 사용: + +```md +## 작업 1 +- 제목: +- 목적: +- 변경 범위: + - +- 제외 범위: + - +- 완료 조건: + - +- 검증: + - npx tsc --noEmit +- 커밋 힌트: + - type(scope): 한국어 요약 + +## 작업 2 (선택) +- 제목: +- 목적: +- 변경 범위: + - +- 제외 범위: + - +- 완료 조건: + - +- 검증: + - +- 커밋 힌트: + - +``` + +## 우선순위 + +- 위에서 아래 순서대로 높은 우선순위로 간주한다. +- `작업 1`을 먼저 처리하고, 완료 시 다음 작업으로 넘어간다. diff --git a/src/features/profile-menu/ui/ProfileMenu.tsx b/src/features/profile-menu/ui/ProfileMenu.tsx index d995711..3853569 100644 --- a/src/features/profile-menu/ui/ProfileMenu.tsx +++ b/src/features/profile-menu/ui/ProfileMenu.tsx @@ -1,12 +1,20 @@ import type { ViewerProfile } from '@/entities/user'; import { Dropdown, DropdownItem } from '@/shared/ui'; +import { cn } from '@/shared/lib/cn'; interface ProfileMenuProps { user: ViewerProfile; onLogout: () => void; + onOpenBilling?: () => void; } -export const ProfileMenu = ({ user, onLogout }: ProfileMenuProps) => { +const MEMBERSHIP_LABEL_MAP: Record = { + pro: 'PRO MEMBER', + normal: 'NORMAL', + team: 'TEAM', +}; + +export const ProfileMenu = ({ user, onLogout, onOpenBilling }: ProfileMenuProps) => { return ( { } > +
+

Membership

+

+ {MEMBERSHIP_LABEL_MAP[user.membershipTier]} +

+
+ {onOpenBilling ? ( + PRO 기능 보기 + ) : null} Stats Settings diff --git a/src/features/room-select/ui/RoomPreviewCard.tsx b/src/features/room-select/ui/RoomPreviewCard.tsx index cfb1a61..07b2194 100644 --- a/src/features/room-select/ui/RoomPreviewCard.tsx +++ b/src/features/room-select/ui/RoomPreviewCard.tsx @@ -31,10 +31,16 @@ export const RoomPreviewCard = ({ compact ? 'h-[98px] min-w-[152px] snap-start p-2 sm:min-w-0 sm:aspect-[5/4]' : 'h-[292px] p-3 sm:h-[334px] sm:p-4 lg:h-[356px]', + compact && + 'after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-[62%] after:bg-[linear-gradient(to_top,rgba(2,6,23,0.88),rgba(2,6,23,0.34),rgba(2,6,23,0))]', selected - ? cinematic - ? 'border-sky-200/44 shadow-[0_0_0_1px_rgba(186,230,253,0.34),0_20px_50px_rgba(2,6,23,0.32)]' - : 'border-brand-dark/28 shadow-[0_0_0_1px_rgba(48,77,109,0.18),0_16px_40px_rgba(15,23,42,0.16)]' + ? compact + ? cinematic + ? 'border-sky-200/54 shadow-[0_0_0_1px_rgba(186,230,253,0.36),0_0_20px_rgba(125,211,252,0.22)]' + : 'border-brand-dark/32 shadow-[0_0_0_1px_rgba(48,77,109,0.22),0_0_16px_rgba(99,173,242,0.18)]' + : cinematic + ? 'border-sky-200/44 shadow-[0_0_0_1px_rgba(186,230,253,0.34),0_20px_50px_rgba(2,6,23,0.32)]' + : 'border-brand-dark/28 shadow-[0_0_0_1px_rgba(48,77,109,0.18),0_16px_40px_rgba(15,23,42,0.16)]' : cinematic ? 'border-white/16 hover:border-white/28' : 'border-brand-dark/16 hover:border-brand-dark/26', @@ -73,20 +79,33 @@ export const RoomPreviewCard = ({ )} > {selected ? ( - - 선택됨 - + compact ? ( + + ✓ + + ) : ( + + 선택됨 + + ) ) : null} {compact ? ( -
+

{room.name}

{room.vibeLabel}

diff --git a/src/widgets/app-hub/ui/AppHubWidget.tsx b/src/widgets/app-hub/ui/AppHubWidget.tsx index c719383..cd81ac7 100644 --- a/src/widgets/app-hub/ui/AppHubWidget.tsx +++ b/src/widgets/app-hub/ui/AppHubWidget.tsx @@ -20,12 +20,14 @@ import { } from '@/shared/config/appHubVisualMode'; import { cn } from '@/shared/lib/cn'; import { useToast } from '@/shared/ui'; +import { + AppUtilityRailWidget, + type AppUtilityPanelId, +} from '@/widgets/app-utility-rail'; import { AppTopBar } from '@/widgets/app-top-bar/ui/AppTopBar'; import { CustomEntryWidget } from '@/widgets/custom-entry-widget/ui/CustomEntryWidget'; import { RoomsGalleryWidget } from '@/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget'; import { StartRitualWidget } from '@/widgets/start-ritual-widget/ui/StartRitualWidget'; -import { ThoughtInboxSheet } from '@/widgets/thought-inbox-sheet'; -import { ThoughtSummaryEntryWidget } from '@/widgets/thought-summary-entry'; const buildSpaceQuery = ( roomId: string, @@ -59,7 +61,9 @@ export const AppHubWidget = () => { const [goalInput, setGoalInput] = useState(''); const [selectedGoalId, setSelectedGoalId] = useState(null); const [isCustomEntryOpen, setCustomEntryOpen] = useState(false); - const [isThoughtInboxOpen, setThoughtInboxOpen] = useState(false); + const [activeUtilityPanel, setActiveUtilityPanel] = useState( + null, + ); const visualMode: AppHubVisualMode = DEFAULT_APP_HUB_VISUAL_MODE; const cinematic = visualMode === 'cinematic'; @@ -147,8 +151,6 @@ export const AppHubWidget = () => { oneLiner={TODAY_ONE_LINER} onLogout={handleLogout} visualMode={visualMode} - thoughtCount={thoughtCount} - onOpenThoughtInbox={() => setThoughtInboxOpen(true)} onOpenBilling={() => router.push('/settings')} /> @@ -172,13 +174,6 @@ export const AppHubWidget = () => { /> )} /> -
- setThoughtInboxOpen(true)} - /> -
@@ -190,11 +185,14 @@ export const AppHubWidget = () => { onEnter={handleCustomEnter} /> - setThoughtInboxOpen(false)} - onClear={() => { + thoughtCount={thoughtCount} + onOpenPanel={setActiveUtilityPanel} + onClosePanel={() => setActiveUtilityPanel(null)} + onClearInbox={() => { clearThoughts(); pushToast({ title: '메모 인박스를 비웠어요' }); }} diff --git a/src/widgets/app-top-bar/ui/AppTopBar.tsx b/src/widgets/app-top-bar/ui/AppTopBar.tsx index bf1b4fe..1571bbd 100644 --- a/src/widgets/app-top-bar/ui/AppTopBar.tsx +++ b/src/widgets/app-top-bar/ui/AppTopBar.tsx @@ -1,4 +1,4 @@ -import { MembershipTierBadge, type ViewerProfile } from '@/entities/user'; +import type { ViewerProfile } from '@/entities/user'; import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode'; import { cn } from '@/shared/lib/cn'; import { ProfileMenu } from '@/features/profile-menu'; @@ -8,8 +8,6 @@ interface AppTopBarProps { oneLiner: string; onLogout: () => void; visualMode?: AppHubVisualMode; - thoughtCount?: number; - onOpenThoughtInbox?: () => void; onOpenBilling?: () => void; } @@ -18,12 +16,9 @@ export const AppTopBar = ({ oneLiner, onLogout, visualMode = 'light', - thoughtCount = 0, - onOpenThoughtInbox, onOpenBilling, }: AppTopBarProps) => { const cinematic = visualMode === 'cinematic'; - const thoughtCountLabel = thoughtCount > 99 ? '99+' : `${thoughtCount}`; return (
@@ -38,66 +33,16 @@ export const AppTopBar = ({

- VibeRoom -

-
- {onOpenBilling ? ( - - ) : null} - {onOpenThoughtInbox ? ( - - ) : null} - - +
diff --git a/src/widgets/app-utility-rail/index.ts b/src/widgets/app-utility-rail/index.ts new file mode 100644 index 0000000..df50847 --- /dev/null +++ b/src/widgets/app-utility-rail/index.ts @@ -0,0 +1,3 @@ +export * from './model/types'; +export * from './ui/AppUtilityRailWidget'; + diff --git a/src/widgets/app-utility-rail/model/types.ts b/src/widgets/app-utility-rail/model/types.ts new file mode 100644 index 0000000..1a5c857 --- /dev/null +++ b/src/widgets/app-utility-rail/model/types.ts @@ -0,0 +1,2 @@ +export type AppUtilityPanelId = 'inbox' | 'stats' | 'settings'; + diff --git a/src/widgets/app-utility-rail/ui/AppUtilityDrawer.tsx b/src/widgets/app-utility-rail/ui/AppUtilityDrawer.tsx new file mode 100644 index 0000000..74de164 --- /dev/null +++ b/src/widgets/app-utility-rail/ui/AppUtilityDrawer.tsx @@ -0,0 +1,91 @@ +'use client'; + +import { useEffect, type ReactNode } from 'react'; +import { cn } from '@/shared/lib/cn'; + +interface AppUtilityDrawerProps { + open: boolean; + title: string; + visualMode: 'light' | 'cinematic'; + onClose: () => void; + children: ReactNode; +} + +export const AppUtilityDrawer = ({ + open, + title, + visualMode, + onClose, + children, +}: AppUtilityDrawerProps) => { + const cinematic = visualMode === 'cinematic'; + + useEffect(() => { + if (!open) { + return; + } + + const handleEscape = (event: KeyboardEvent) => { + if (event.key === 'Escape') { + onClose(); + } + }; + + document.addEventListener('keydown', handleEscape); + + return () => { + document.removeEventListener('keydown', handleEscape); + }; + }, [open, onClose]); + + if (!open) { + return null; + } + + return ( + <> + + +
{children}
+ + + + ); +}; + diff --git a/src/widgets/app-utility-rail/ui/AppUtilityRailWidget.tsx b/src/widgets/app-utility-rail/ui/AppUtilityRailWidget.tsx new file mode 100644 index 0000000..cf0a315 --- /dev/null +++ b/src/widgets/app-utility-rail/ui/AppUtilityRailWidget.tsx @@ -0,0 +1,121 @@ +'use client'; + +import type { RecentThought } from '@/entities/session'; +import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode'; +import { cn } from '@/shared/lib/cn'; +import { AppUtilityDrawer } from './AppUtilityDrawer'; +import { type AppUtilityPanelId } from '../model/types'; +import { InboxDrawerPanel } from './panels/InboxDrawerPanel'; +import { SettingsDrawerPanel } from './panels/SettingsDrawerPanel'; +import { StatsDrawerPanel } from './panels/StatsDrawerPanel'; + +interface AppUtilityRailWidgetProps { + visualMode: AppHubVisualMode; + activePanel: AppUtilityPanelId | null; + thoughts: RecentThought[]; + thoughtCount: number; + onOpenPanel: (panel: AppUtilityPanelId) => void; + onClosePanel: () => void; + onClearInbox: () => void; +} + +const RAIL_ITEMS: Array<{ + id: AppUtilityPanelId; + icon: string; + label: string; +}> = [ + { id: 'inbox', icon: '📨', label: 'Inbox' }, + { id: 'stats', icon: '📊', label: 'Stats' }, + { id: 'settings', icon: '⚙', label: 'Settings' }, +]; + +const PANEL_TITLE_MAP: Record = { + inbox: '임시 보관함', + stats: '집중 요약', + settings: '설정', +}; + +export const AppUtilityRailWidget = ({ + visualMode, + activePanel, + thoughts, + thoughtCount, + onOpenPanel, + onClosePanel, + onClearInbox, +}: AppUtilityRailWidgetProps) => { + const cinematic = visualMode === 'cinematic'; + + return ( + <> +
+
+ {RAIL_ITEMS.map((item) => { + const selected = activePanel === item.id; + + return ( + + ); + })} +
+
+ + + {activePanel === 'inbox' ? ( + + ) : null} + {activePanel === 'stats' ? : null} + {activePanel === 'settings' ? ( + + ) : null} + + + ); +}; + diff --git a/src/widgets/app-utility-rail/ui/panels/InboxDrawerPanel.tsx b/src/widgets/app-utility-rail/ui/panels/InboxDrawerPanel.tsx new file mode 100644 index 0000000..b5153c4 --- /dev/null +++ b/src/widgets/app-utility-rail/ui/panels/InboxDrawerPanel.tsx @@ -0,0 +1,78 @@ +import type { RecentThought } from '@/entities/session'; +import { cn } from '@/shared/lib/cn'; + +interface InboxDrawerPanelProps { + visualMode: 'light' | 'cinematic'; + thoughts: RecentThought[]; + onClear: () => void; +} + +export const InboxDrawerPanel = ({ + visualMode, + thoughts, + onClear, +}: InboxDrawerPanelProps) => { + const cinematic = visualMode === 'cinematic'; + + return ( +
+
+

+ 집중 중 떠오른 생각을 잠시 모아두는 공간 +

+ +
+ + {thoughts.length === 0 ? ( +

+ 지금은 비어 있어요. 집중 중 떠오른 생각을 여기로 주차할 수 있어요. +

+ ) : ( +
    + {thoughts.slice(0, 10).map((thought) => ( +
  • +

    + {thought.text} +

    +
    + {thought.capturedAt} +
    +
    • + ))} +
+ )} +
+ ); +}; + diff --git a/src/widgets/app-utility-rail/ui/panels/SettingsDrawerPanel.tsx b/src/widgets/app-utility-rail/ui/panels/SettingsDrawerPanel.tsx new file mode 100644 index 0000000..f4c8171 --- /dev/null +++ b/src/widgets/app-utility-rail/ui/panels/SettingsDrawerPanel.tsx @@ -0,0 +1,98 @@ +'use client'; + +import { useState } from 'react'; +import { DEFAULT_PRESET_OPTIONS } from '@/shared/config/settingsOptions'; +import { cn } from '@/shared/lib/cn'; + +interface SettingsDrawerPanelProps { + visualMode: 'light' | 'cinematic'; +} + +export const SettingsDrawerPanel = ({ visualMode }: SettingsDrawerPanelProps) => { + const cinematic = visualMode === 'cinematic'; + const [reduceMotion, setReduceMotion] = useState(false); + const [defaultPresetId, setDefaultPresetId] = useState< + (typeof DEFAULT_PRESET_OPTIONS)[number]['id'] + >(DEFAULT_PRESET_OPTIONS[0].id); + + return ( +
+
+
+
+

+ Reduce Motion +

+

+ 화면 전환을 조금 더 차분하게 표시합니다. +

+
+ +
+
+ +
+

+ 기본 프리셋 +

+
+ {DEFAULT_PRESET_OPTIONS.map((preset) => ( + + ))} +
+
+
+ ); +}; diff --git a/src/widgets/app-utility-rail/ui/panels/StatsDrawerPanel.tsx b/src/widgets/app-utility-rail/ui/panels/StatsDrawerPanel.tsx new file mode 100644 index 0000000..6a69ca5 --- /dev/null +++ b/src/widgets/app-utility-rail/ui/panels/StatsDrawerPanel.tsx @@ -0,0 +1,64 @@ +import { TODAY_STATS, WEEKLY_STATS } from '@/entities/session'; +import { cn } from '@/shared/lib/cn'; + +interface StatsDrawerPanelProps { + visualMode: 'light' | 'cinematic'; +} + +export const StatsDrawerPanel = ({ visualMode }: StatsDrawerPanelProps) => { + const cinematic = visualMode === 'cinematic'; + + return ( +
+

+ 오늘 흐름과 최근 7일의 리듬을 가볍게 확인하세요. +

+ +
+ {[TODAY_STATS[0], TODAY_STATS[1], WEEKLY_STATS[0], WEEKLY_STATS[2]].map((stat) => ( +
+

+ {stat.label} +

+

+ {stat.value} +

+

+ {stat.delta} +

+
+ ))} +
+ +
+
+

+ 그래프 플레이스홀더 +

+
+
+ ); +}; + diff --git a/src/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget.tsx b/src/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget.tsx index 6a5725a..c410111 100644 --- a/src/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget.tsx +++ b/src/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useState, type ReactNode } from 'react'; +import { useMemo, useState, type ReactNode } from 'react'; import { getHubRoomSections, getRoomCardBackgroundStyle, @@ -28,7 +28,12 @@ export const RoomsGalleryWidget = ({ const [carouselOffset, setCarouselOffset] = useState(0); const cinematic = visualMode === 'cinematic'; const selectedRoom = rooms.find((room) => room.id === selectedRoomId) ?? rooms[0]; - const { recommendedRooms, allRooms } = getHubRoomSections(rooms, selectedRoom.id, 6); + const stableRecommendedBaseId = rooms[0]?.id ?? selectedRoom.id; + const { recommendedRooms, allRooms } = getHubRoomSections( + rooms, + stableRecommendedBaseId, + 6, + ); const canRotate = recommendedRooms.length > 1; const rotatedRecommendedRooms = useMemo(() => { if (recommendedRooms.length === 0) { @@ -45,10 +50,6 @@ export const RoomsGalleryWidget = ({ ]; }, [carouselOffset, recommendedRooms]); - useEffect(() => { - setCarouselOffset(0); - }, [selectedRoomId]); - return (
-
+

Selected Space

-

+

{selectedRoom.name}

-

{selectedRoom.description}

+

+ {selectedRoom.description} +

diff --git a/src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx b/src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx index d21da73..d313be7 100644 --- a/src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx +++ b/src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx @@ -36,7 +36,7 @@ export const StartRitualWidget = ({ inStage ? 'space-y-3 p-3.5 sm:p-4' : 'space-y-3.5 p-4 sm:p-5', cinematic ? inStage - ? 'border-white/18 bg-slate-950/62 text-white shadow-[0_18px_36px_rgba(2,6,23,0.36)] backdrop-blur-xl' + ? 'border-white/24 bg-slate-950/72 text-white shadow-[0_20px_44px_rgba(2,6,23,0.44),inset_0_1px_0_rgba(255,255,255,0.04)] backdrop-blur-xl' : 'border-white/16 bg-slate-950/48 text-white shadow-[0_20px_44px_rgba(2,6,23,0.36)] backdrop-blur-xl' : 'border-brand-dark/10 bg-white/80 text-brand-dark shadow-[0_16px_40px_rgba(15,23,42,0.12)] backdrop-blur-md', )} @@ -99,8 +99,8 @@ export const StartRitualWidget = ({
{countLabel} - - 열기 → + + 열기