249 lines
12 KiB
TypeScript
249 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { useMemo } from 'react';
|
|
import { useMediaCatalog, getSceneStageBackgroundStyle } from '@/entities/media';
|
|
import { usePlanTier } from '@/entities/plan';
|
|
import { getSceneById, SCENE_THEMES } from '@/entities/scene';
|
|
import { useFocusStats } from '@/features/stats';
|
|
import { copy } from '@/shared/i18n';
|
|
import { cn } from '@/shared/lib/cn';
|
|
|
|
const DEFAULT_STATS_SCENE_ID = getSceneById('forest')?.id ?? SCENE_THEMES[0].id;
|
|
|
|
const reviewStageSceneByPreset = (presetId: string) => {
|
|
if (presetId.startsWith('forest')) {
|
|
return getSceneById('forest') ?? SCENE_THEMES[0];
|
|
}
|
|
|
|
return getSceneById(DEFAULT_STATS_SCENE_ID) ?? SCENE_THEMES[0];
|
|
};
|
|
|
|
export const StatsOverviewWidget = () => {
|
|
const { stats } = copy;
|
|
const { isPro } = usePlanTier();
|
|
const { sceneAssetMap } = useMediaCatalog();
|
|
const { review, isLoading, error, source, refetch } = useFocusStats();
|
|
|
|
const activeScene = useMemo(
|
|
() => reviewStageSceneByPreset(review.carryForward.presetId),
|
|
[review.carryForward.presetId],
|
|
);
|
|
const sourceLabel = source === 'api' ? stats.sourceApi : stats.sourceMock;
|
|
const syncLabel = error ? error : isLoading ? stats.loading : stats.synced;
|
|
const carryForwardCtaLabel = isPro ? stats.reviewCarryCtaPro : review.carryForward.ctaLabel;
|
|
|
|
return (
|
|
<div className="relative min-h-dvh overflow-hidden bg-black text-white selection:bg-white/20 font-sans">
|
|
{/* Immersive Background */}
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center transition-transform duration-[2s] ease-[cubic-bezier(0.22,1,0.36,1)] scale-105 blur-[60px] brightness-50"
|
|
style={getSceneStageBackgroundStyle(activeScene, sceneAssetMap?.[activeScene.id])}
|
|
/>
|
|
{/* Premium Cinematic Overlays */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.85)_100%)] mix-blend-multiply pointer-events-none" />
|
|
<div className="absolute inset-0 bg-black/40 pointer-events-none" />
|
|
<div className="absolute inset-0 bg-[linear-gradient(180deg,transparent_0%,rgba(0,0,0,0.6)_50%,rgba(0,0,0,0.9)_100%)] pointer-events-none" />
|
|
|
|
{/* Header */}
|
|
<header className="absolute inset-x-0 top-0 z-40 flex items-center justify-between px-8 py-8 md:px-12 md:py-10 opacity-0 animate-fade-in delay-150">
|
|
<div className="flex items-center gap-3">
|
|
<p className="text-[11px] font-bold uppercase tracking-[0.4em] text-white/50 drop-shadow-sm">
|
|
Weekly Review
|
|
</p>
|
|
{isPro && (
|
|
<span className="rounded-full bg-white/10 px-2 py-0.5 text-[9px] font-bold uppercase tracking-widest text-white/60 backdrop-blur-md">
|
|
PRO
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
void refetch();
|
|
}}
|
|
className="group flex items-center gap-2 rounded-full border border-white/5 bg-white/5 px-4 py-1.5 text-[10px] font-semibold uppercase tracking-widest text-white/50 backdrop-blur-md transition-all hover:bg-white/10 hover:text-white/80"
|
|
>
|
|
{stats.refresh}
|
|
</button>
|
|
<Link
|
|
href="/app"
|
|
className="group flex items-center gap-2 rounded-full border border-white/5 bg-white/5 px-4 py-1.5 text-[10px] font-semibold uppercase tracking-widest text-white/50 backdrop-blur-md transition-all hover:bg-white/10 hover:text-white/80"
|
|
>
|
|
<span>{copy.common.hub}</span>
|
|
<span className="transition-transform group-hover:translate-x-0.5">→</span>
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Flow */}
|
|
<main className="relative z-10 mx-auto flex min-h-dvh w-full max-w-6xl flex-col px-6 pb-24 pt-32 md:px-12 md:pt-40">
|
|
|
|
{/* 1. Hero Summary (Cinematic Entry) */}
|
|
<section className="mb-20 flex flex-col items-center text-center opacity-0 animate-fade-in-up delay-150">
|
|
<div className="mb-6 flex flex-wrap justify-center gap-3">
|
|
<div className="inline-flex items-center gap-2 rounded-full border border-white/5 bg-white/5 px-3 py-1.5 backdrop-blur-md">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-white/40" />
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-white/70">
|
|
{review.periodLabel}
|
|
</span>
|
|
</div>
|
|
<div className="inline-flex items-center gap-2 rounded-full border border-white/5 bg-white/5 px-3 py-1.5 backdrop-blur-md">
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-white/40">
|
|
{sourceLabel}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 className="max-w-4xl text-[2.5rem] font-light leading-[1.1] tracking-tight text-white/95 md:text-[4rem]">
|
|
{review.snapshotSummary}
|
|
</h1>
|
|
<p className="mt-6 text-[13px] font-medium tracking-widest uppercase text-white/40">
|
|
{syncLabel}
|
|
</p>
|
|
|
|
{/* Inline Snapshot Metrics */}
|
|
<div className="mt-16 flex flex-wrap justify-center gap-8 md:gap-16">
|
|
{review.snapshotMetrics.map((metric) => (
|
|
<div key={metric.id} className="flex flex-col items-center">
|
|
<p className="text-[10px] font-bold uppercase tracking-[0.2em] text-white/40">
|
|
{metric.label}
|
|
</p>
|
|
<p className="mt-2 text-4xl font-light tracking-tight text-white/90 md:text-5xl">
|
|
{metric.value}
|
|
</p>
|
|
<p className="mt-2 max-w-[12rem] text-center text-[12px] leading-relaxed text-white/50">
|
|
{metric.hint}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* 2. Insight Pillars (Start, Recovery, Completion) */}
|
|
<section className="mb-24 grid gap-6 md:grid-cols-3 opacity-0 animate-fade-in-up delay-300">
|
|
{[
|
|
{
|
|
data: review.startQuality,
|
|
accent: 'bg-[radial-gradient(circle_at_top,rgba(96,165,250,0.15),transparent_70%)]'
|
|
},
|
|
{
|
|
data: review.recoveryQuality,
|
|
accent: 'bg-[radial-gradient(circle_at_top,rgba(20,184,166,0.15),transparent_70%)]'
|
|
},
|
|
{
|
|
data: review.completionQuality,
|
|
accent: 'bg-[radial-gradient(circle_at_top,rgba(245,158,11,0.15),transparent_70%)]'
|
|
}
|
|
].map((column, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="relative flex flex-col overflow-hidden rounded-[2rem] border border-white/5 bg-white/5 p-8 backdrop-blur-2xl transition-all hover:bg-white/10 hover:border-white/10"
|
|
>
|
|
<div className={cn("absolute inset-0 pointer-events-none", column.accent)} />
|
|
<div className="relative z-10 flex flex-col h-full">
|
|
<p className="text-[10px] font-bold uppercase tracking-[0.2em] text-white/40">
|
|
{column.data.title}
|
|
</p>
|
|
<p className="mt-4 text-[14px] leading-relaxed text-white/70">
|
|
{column.data.summary}
|
|
</p>
|
|
|
|
<div className="mt-8 flex-1 space-y-6">
|
|
{column.data.metrics.map((metric, mIdx) => (
|
|
<div key={metric.id} className={cn("flex flex-col", mIdx > 0 && "pt-6 border-t border-white/5")}>
|
|
<p className="text-[10px] font-semibold uppercase tracking-widest text-white/40">
|
|
{metric.label}
|
|
</p>
|
|
<p className={cn("mt-1 font-light tracking-tight text-white/90", mIdx === 0 ? "text-4xl" : "text-2xl")}>
|
|
{metric.value}
|
|
</p>
|
|
<p className="mt-2 text-[12px] leading-relaxed text-white/50">
|
|
{metric.hint}
|
|
</p>
|
|
</div>
|
|
))}
|
|
{column.data.metrics.length === 0 && (
|
|
<p className="text-[12px] leading-relaxed text-white/30 italic">지표 데이터가 부족합니다.</p>
|
|
)}
|
|
</div>
|
|
|
|
{column.data.note && (
|
|
<div className="mt-8 rounded-2xl border border-white/5 bg-white/5 p-4">
|
|
<p className="text-[11px] leading-relaxed text-white/50">
|
|
{column.data.note}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{column.data.availability === 'limited' && (
|
|
<div className="mt-6 inline-flex self-start rounded-full border border-white/5 bg-white/5 px-3 py-1 text-[9px] font-bold uppercase tracking-widest text-white/30">
|
|
Limited Data
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</section>
|
|
|
|
{/* 3. Carry Forward Climax */}
|
|
<section className="flex flex-col items-center text-center opacity-0 animate-fade-in-up delay-500">
|
|
<div className="relative w-full max-w-3xl overflow-hidden rounded-[2.5rem] border border-white/10 bg-white/5 p-10 backdrop-blur-3xl shadow-2xl md:p-16">
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(168,85,247,0.15),transparent_70%)] pointer-events-none" />
|
|
<div className="relative z-10 flex flex-col items-center">
|
|
<div className="inline-flex items-center gap-2 rounded-full border border-white/5 bg-white/5 px-3 py-1.5 backdrop-blur-md mb-6">
|
|
<span className="h-1.5 w-1.5 rounded-full bg-white/40" />
|
|
<span className="text-[10px] font-bold uppercase tracking-widest text-white/60">
|
|
Carry Forward
|
|
</span>
|
|
</div>
|
|
|
|
<h2 className="text-3xl font-light tracking-tight text-white/95 md:text-4xl">
|
|
다음 세션에 가져갈 흐름
|
|
</h2>
|
|
<p className="mt-6 text-lg text-white/70 font-light leading-relaxed max-w-xl">
|
|
"{review.carryForward.keepDoing}"
|
|
</p>
|
|
|
|
<div className="mt-10 grid gap-6 text-left w-full md:grid-cols-2">
|
|
<div className="rounded-2xl border border-white/5 bg-white/5 p-5">
|
|
<p className="text-[10px] font-bold uppercase tracking-[0.2em] text-white/40">
|
|
작은 변화 시도하기
|
|
</p>
|
|
<p className="mt-3 text-[13px] leading-relaxed text-white/70">
|
|
{review.carryForward.tryNext}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/5 bg-white/5 p-5">
|
|
<p className="text-[10px] font-bold uppercase tracking-[0.2em] text-white/40 flex justify-between">
|
|
<span>추천 Atmosphere</span>
|
|
{isPro && <span className="text-white/30">PRO</span>}
|
|
</p>
|
|
<p className="mt-3 text-[15px] font-medium tracking-tight text-white/90">
|
|
{review.carryForward.presetLabel}
|
|
</p>
|
|
<p className="mt-1 text-[12px] text-white/50">가장 무리 없이 들어갈 수 있는 흐름.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-12 flex flex-col items-center gap-4">
|
|
<Link
|
|
href={review.carryForward.ctaHref}
|
|
className="group relative flex h-14 items-center justify-center overflow-hidden rounded-full border border-white/20 bg-white/10 px-10 text-[14px] font-medium tracking-wide text-white shadow-2xl backdrop-blur-md transition-all duration-300 hover:bg-white/20 hover:scale-[1.02] active:scale-[0.98]"
|
|
>
|
|
<span className="relative z-10">{carryForwardCtaLabel}</span>
|
|
</Link>
|
|
<p className="text-[11px] text-white/30 tracking-wide">
|
|
Review는 끝이 아니라, 더 가벼운 시작을 위한 출발점입니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|