feat(app): weekly review teaser 진입 추가

src/widgets/focus-dashboard/ui/FocusDashboardWidget.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Link from 'next/link';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { useMediaCatalog, getSceneStageBackgroundStyle } from '@/entities/media';
@@ -9,6 +10,7 @@ import { SOUND_PRESETS } from '@/entities/session';
 import { PaywallSheetContent } from '@/features/paywall-sheet';
 import { PlanPill } from '@/features/plan-pill';
 import { focusSessionApi, type FocusSession } from '@/features/focus-session/api/focusSessionApi';
+import { useFocusStats } from '@/features/stats';
 import { copy } from '@/shared/i18n';
 import { cn } from '@/shared/lib/cn';
 
@@ -36,6 +38,10 @@ const entryCopy = {
   resumeMicroStepLabel: '마지막 한 조각',
   resumeNewGoalHint: '새 목표는 현재 세션을 마무리한 뒤 시작할 수 있어요.',
   loadFailed: '세션 상태를 불러오지 못했어요. 새로 시작은 계속 할 수 있어요.',
+  reviewEyebrow: 'Weekly Review',
+  reviewTitle: '이번 주 review를 잠깐 보고 갈까요?',
+  reviewCta: '주간 review 보기',
+  reviewHelper: '다음 세션 전에 가볍게 보고 갈 수 있어요.',
   paywallLead: 'Calm Session OS PRO',
   paywallBody: 'Pro는 더 빠른 ritual과 더 깊은 review로 시작과 복귀를 가볍게 만듭니다.',
 };
@@ -65,6 +71,7 @@ export const FocusDashboardWidget = () => {
   const router = useRouter();
   const { plan, isPro, setPlan } = usePlanTier();
   const { sceneAssetMap } = useMediaCatalog();
+  const { review, summary: weeklySummary } = useFocusStats();
 
   const [goalDraft, setGoalDraft] = useState('');
   const [microStepDraft, setMicroStepDraft] = useState('');
@@ -89,6 +96,10 @@ export const FocusDashboardWidget = () => {
 
   const trimmedGoal = goalDraft.trim();
   const canStart = trimmedGoal.length > 0 && !isStartingSession && !currentSession;
+  const hasEnoughWeeklyData =
+    weeklySummary.last7Days.startedSessions >= 3 &&
+    (weeklySummary.last7Days.completedSessions >= 2 ||
+      review.recoveryQuality.availability === 'ready');
 
   useEffect(() => {
     let cancelled = false;
@@ -166,6 +177,9 @@ export const FocusDashboardWidget = () => {
     router.push('/space');
   };
 
+  const shouldShowWeeklyReviewTeaser =
+    !isCheckingSession && !currentSession && hasEnoughWeeklyData;
+
   return (
     <div className="relative min-h-dvh overflow-hidden bg-slate-950 text-white selection:bg-white/20">
       <div
@@ -226,102 +240,129 @@ export const FocusDashboardWidget = () => {
               <p className="text-sm text-white/56">{entryCopy.resumeNewGoalHint}</p>
             </div>
           ) : (
-            <div className={goalCardClass}>
-              <div className="space-y-3 text-center">
-                <h1 className="text-[2rem] font-light leading-[1.08] tracking-[-0.04em] text-white md:text-[2.9rem]">
-                  {entryCopy.title}
-                </h1>
-                <p className="mx-auto max-w-[32rem] text-[15px] leading-6 text-white/70 md:text-base">
-                  {entryCopy.description}
-                </p>
-              </div>
-
-              <div className="mt-8 space-y-4">
-                <label className="block">
-                  <span className="sr-only">Goal</span>
-                  <input
-                    ref={goalInputRef}
-                    value={goalDraft}
-                    onChange={(event) => setGoalDraft(event.target.value)}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter' && !event.shiftKey) {
-                        event.preventDefault();
-                        void handleStartSession();
-                      }
-                    }}
-                    placeholder={entryCopy.goalPlaceholder}
-                    className={cn(
-                      inputShellClass,
-                      'text-[1.15rem] font-light tracking-[-0.02em] placeholder:text-white/34 md:text-[1.4rem]',
-                    )}
-                    autoFocus
-                  />
-                </label>
-
-                <label className="block space-y-2">
-                  <span className="text-[12px] font-medium uppercase tracking-[0.16em] text-white/46">
-                    {entryCopy.microStepLabel}
-                  </span>
-                  <input
-                    value={microStepDraft}
-                    onChange={(event) => setMicroStepDraft(event.target.value)}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter' && !event.shiftKey) {
-                        event.preventDefault();
-                        void handleStartSession();
-                      }
-                    }}
-                    placeholder={entryCopy.microStepPlaceholder}
-                    className={cn(inputShellClass, 'text-[0.98rem] placeholder:text-white/30')}
-                  />
-                </label>
-
-                <p className="text-sm text-white/48">{entryCopy.microStepHelper}</p>
-              </div>
-
-              <div className="mt-6 flex flex-wrap gap-2.5">
-                {GOAL_SUGGESTIONS.map((suggestion) => {
-                  const isActive = trimmedGoal === suggestion.label;
-
-                  return (
-                    <button
-                      key={suggestion.id}
-                      type="button"
-                      onClick={() => handleSelectSuggestion(suggestion.label)}
-                      className={cn(
-                        'rounded-full border px-3.5 py-1.5 text-sm transition',
-                        isActive
-                          ? 'border-white/32 bg-white/14 text-white'
-                          : 'border-white/14 bg-white/[0.04] text-white/72 hover:border-white/22 hover:text-white',
-                      )}
-                    >
-                      {suggestion.label}
-                    </button>
-                  );
-                })}
-              </div>
-
-              <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-                <button
-                  type="button"
-                  onClick={() => {
-                    void handleStartSession();
-                  }}
-                  disabled={!canStart}
-                  className={primaryButtonClass}
-                >
-                  {isStartingSession ? entryCopy.startLoading : entryCopy.startNow}
-                </button>
-                <div className="space-y-1 text-left sm:text-right">
-                  <p className="text-xs font-medium uppercase tracking-[0.16em] text-white/44">
-                    {entryCopy.ritualHint}
+            <div className="space-y-4">
+              <div className={goalCardClass}>
+                <div className="space-y-3 text-center">
+                  <h1 className="text-[2rem] font-light leading-[1.08] tracking-[-0.04em] text-white md:text-[2.9rem]">
+                    {entryCopy.title}
+                  </h1>
+                  <p className="mx-auto max-w-[32rem] text-[15px] leading-6 text-white/70 md:text-base">
+                    {entryCopy.description}
                   </p>
-                  <p className="text-xs text-white/52">{entryCopy.ritualHelper}</p>
                 </div>
+
+                <div className="mt-8 space-y-4">
+                  <label className="block">
+                    <span className="sr-only">Goal</span>
+                    <input
+                      ref={goalInputRef}
+                      value={goalDraft}
+                      onChange={(event) => setGoalDraft(event.target.value)}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter' && !event.shiftKey) {
+                          event.preventDefault();
+                          void handleStartSession();
+                        }
+                      }}
+                      placeholder={entryCopy.goalPlaceholder}
+                      className={cn(
+                        inputShellClass,
+                        'text-[1.15rem] font-light tracking-[-0.02em] placeholder:text-white/34 md:text-[1.4rem]',
+                      )}
+                      autoFocus
+                    />
+                  </label>
+
+                  <label className="block space-y-2">
+                    <span className="text-[12px] font-medium uppercase tracking-[0.16em] text-white/46">
+                      {entryCopy.microStepLabel}
+                    </span>
+                    <input
+                      value={microStepDraft}
+                      onChange={(event) => setMicroStepDraft(event.target.value)}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter' && !event.shiftKey) {
+                          event.preventDefault();
+                          void handleStartSession();
+                        }
+                      }}
+                      placeholder={entryCopy.microStepPlaceholder}
+                      className={cn(inputShellClass, 'text-[0.98rem] placeholder:text-white/30')}
+                    />
+                  </label>
+
+                  <p className="text-sm text-white/48">{entryCopy.microStepHelper}</p>
+                </div>
+
+                <div className="mt-6 flex flex-wrap gap-2.5">
+                  {GOAL_SUGGESTIONS.map((suggestion) => {
+                    const isActive = trimmedGoal === suggestion.label;
+
+                    return (
+                      <button
+                        key={suggestion.id}
+                        type="button"
+                        onClick={() => handleSelectSuggestion(suggestion.label)}
+                        className={cn(
+                          'rounded-full border px-3.5 py-1.5 text-sm transition',
+                          isActive
+                            ? 'border-white/32 bg-white/14 text-white'
+                            : 'border-white/14 bg-white/[0.04] text-white/72 hover:border-white/22 hover:text-white',
+                        )}
+                      >
+                        {suggestion.label}
+                      </button>
+                    );
+                  })}
+                </div>
+
+                <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      void handleStartSession();
+                    }}
+                    disabled={!canStart}
+                    className={primaryButtonClass}
+                  >
+                    {isStartingSession ? entryCopy.startLoading : entryCopy.startNow}
+                  </button>
+                  <div className="space-y-1 text-left sm:text-right">
+                    <p className="text-xs font-medium uppercase tracking-[0.16em] text-white/44">
+                      {entryCopy.ritualHint}
+                    </p>
+                    <p className="text-xs text-white/52">{entryCopy.ritualHelper}</p>
+                  </div>
+                </div>
+
+                {sessionLookupError ? (
+                  <p className="mt-5 text-sm text-amber-100/80">{entryCopy.loadFailed}</p>
+                ) : null}
               </div>
 
-              {sessionLookupError ? (
-                <p className="mt-5 text-sm text-amber-100/80">{entryCopy.loadFailed}</p>
+              {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"
+                >
+                  <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+                    <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">
+                        {entryCopy.reviewTitle}
+                      </p>
+                      <p className="mt-2 max-w-[34rem] text-[13px] leading-[1.6] text-white/62">
+                        {review.snapshotSummary}
+                      </p>
+                      <p className="mt-2 text-[12px] text-white/44">{entryCopy.reviewHelper}</p>
+                    </div>
+                    <span className="inline-flex shrink-0 items-center text-[12px] font-medium tracking-[0.04em] text-white/74">
+                      {entryCopy.reviewCta}
+                    </span>
+                  </div>
+                </Link>
               ) : null}
             </div>
           )}