corpi/viberoom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(app): atmosphere entry shell 고급화

Browse Source
This commit is contained in:
corpi
2026-03-16 12:37:36 +09:00
parent 16d620ee4a
commit 81e969c116
6 changed files with 286 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/widgets/focus-dashboard/ui/FocusDashboardWidget.tsx
View File

@@ -50,7 +50,7 @@ const entryCopy = {
startLoading: '입장 준비 중...',
atmosphereTitle: '어떤 분위기에서 들어갈까요?',
atmosphereBody:
'배경과 사운드는 같이 움직여요. 오늘 goal에 맞는 atmosphere 하나만 고르면 바로 들어갈 수 있어요.',
'배경과 사운드는 하나의 atmosphere로 움직입니다. 지금 할 일의 온도에 맞는 분위기 하나만 고르면 바로 들어갈 수 있어요.',
loadFailed: '세션 상태를 불러오지 못했어요. 새로 시작은 계속 할 수 있어요.',
reviewEyebrow: 'Weekly Review',
reviewTitle: '이번 주 review를 잠깐 보고 갈까요?',
@@ -74,7 +74,7 @@ const entryCopy = {
};
const goalCardClass =
'w-full rounded-[2rem] border border-white/12 bg-[#0f1115]/26 px-6 py-6 shadow-[0_24px_60px_rgba(3,7,18,0.32)] backdrop-blur-xl md:px-8 md:py-8';
'w-full rounded-[2.2rem] border border-white/12 bg-[linear-gradient(160deg,rgba(9,13,20,0.52)_0%,rgba(9,13,20,0.24)_52%,rgba(9,13,20,0.5)_100%)] px-6 py-6 shadow-[0_26px_90px_rgba(3,7,18,0.34)] backdrop-blur-[24px] md:px-8 md:py-8';
const reviewCarryCopyByHint: Record<
ReviewCarryHint,
@@ -311,18 +311,19 @@ export const FocusDashboardWidget = () => {
)}
style={getSceneStageBackgroundStyle(activeScene, sceneAssetMap?.[activeScene.id])}
/>
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(2,6,23,0.22)_0%,rgba(2,6,23,0.38)_55%,rgba(2,6,23,0.5)_100%)]" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.06),rgba(255,255,255,0)_42%)]" />
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(2,6,23,0.18)_0%,rgba(2,6,23,0.28)_42%,rgba(2,6,23,0.54)_100%)]" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,255,255,0.08),rgba(255,255,255,0)_42%)]" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_left,rgba(6,10,20,0.24),rgba(6,10,20,0)_36%)]" />
<header className="relative z-10 flex items-center justify-between px-5 py-5 md:px-8 md:py-7">
<p className="text-sm font-semibold tracking-[0.28em] text-white/56 uppercase">
<p className="text-sm font-semibold uppercase tracking-[0.28em] text-white/56">
{entryCopy.eyebrow}
</p>
<PlanPill plan={plan} onClick={openPaywall} />
</header>
<main className="relative z-10 flex min-h-[calc(100dvh-84px)] items-center justify-center px-4 pb-8 pt-4 md:px-6">
<div className="w-full max-w-[42rem]">
<main className="relative z-10 flex min-h-[calc(100dvh-84px)] items-start justify-center px-4 pb-10 pt-3 md:px-6 md:pb-12 md:pt-6">
<div className="w-full max-w-[86rem]">
{isCheckingSession ? (
<div className={cn(goalCardClass, 'space-y-4 text-center')}>
<p className="text-[15px] text-white/72">세션 상태를 불러오는 중이에요.</p>
@@ -330,11 +331,11 @@ export const FocusDashboardWidget = () => {
) : (
<div className="space-y-4">
{reviewReturnCopy ? (
<div className="rounded-[1.55rem] border border-white/10 bg-[#0f1115]/16 px-5 py-4 backdrop-blur-lg">
<div className="rounded-[1.65rem] border border-white/12 bg-[linear-gradient(145deg,rgba(255,255,255,0.1)_0%,rgba(255,255,255,0.04)_100%)] px-5 py-4 backdrop-blur-xl">
<p className="text-[11px] font-medium uppercase tracking-[0.16em] text-white/42">
{entryCopy.reviewReturnEyebrow}
</p>
<p className="mt-2 text-[1rem] font-medium tracking-[-0.02em] text-white/90">
<p className="mt-2 text-[1rem] font-medium tracking-[-0.03em] text-white/90">
{reviewReturnCopy.title}
</p>
<p className="mt-2 max-w-[34rem] text-[13px] leading-[1.6] text-white/62">
@@ -361,14 +362,14 @@ export const FocusDashboardWidget = () => {
shouldShowWeeklyReviewTeaser ? (
<Link
href="/stats"
className="block rounded-[1.6rem] border border-white/10 bg-[#0f1115]/18 px-5 py-4 backdrop-blur-lg transition hover:bg-[#0f1115]/24"
className="block transition"
>
<div className="flex flex-col gap-3">
<div className="min-w-0">
<p className="text-[11px] font-medium uppercase tracking-[0.16em] text-white/42">
{entryCopy.reviewEyebrow}
</p>
<p className="mt-2 text-[1rem] font-medium tracking-[-0.02em] text-white/88">
<p className="mt-2 text-[1rem] font-medium tracking-[-0.03em] text-white/88">
{reviewTeaserTitle}
</p>
<p className="mt-2 text-[13px] leading-[1.6] text-white/62">
@@ -376,7 +377,7 @@ export const FocusDashboardWidget = () => {
</p>
<p className="mt-2 text-[12px] text-white/44">{reviewTeaserHelper}</p>
</div>
<span className="inline-flex items-center text-[12px] font-medium tracking-[0.04em] text-white/74">
<span className="inline-flex items-center text-[12px] font-medium tracking-[0.04em] text-white/74 transition group-hover:text-white">
{reviewTeaserCta}
</span>
</div>