refactor(control-center): Quick Controls 재디자인 및 플랜/잠금 결제 동선 정리

2026-03-04 14:36:38 +09:00
parent 60cd093308
commit 3cddd3c1f4
21 changed files with 983 additions and 149 deletions
--- a/src/features/paywall-sheet/ui/PaywallSheetContent.tsx
+++ b/src/features/paywall-sheet/ui/PaywallSheetContent.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import { useState } from 'react';
+import { cn } from '@/shared/lib/cn';
+
+interface PaywallSheetContentProps {
+  onStartPro: () => void;
+  onClose: () => void;
+}
+
+type BillingCycle = 'monthly' | 'yearly';
+
+const BILLING_OPTIONS: Array<{ id: BillingCycle; label: string; caption: string }> = [
+  { id: 'monthly', label: '월간', caption: '월 9,900원 (더미)' },
+  { id: 'yearly', label: '연간', caption: '연 79,000원 (더미)' },
+];
+
+const VALUE_POINTS = [
+  '더 많은 공간 / 고화질 배경',
+  '작업용 BGM / 사운드 확장',
+  '프리셋 팩 / 고급 타이머',
+];
+
+export const PaywallSheetContent = ({ onStartPro, onClose }: PaywallSheetContentProps) => {
+  const [cycle, setCycle] = useState<BillingCycle>('monthly');
+
+  return (
+    <div className="space-y-4">
+      <header className="space-y-1">
+        <h3 className="text-lg font-semibold tracking-tight text-white">PRO로 더 깊게</h3>
+        <p className="text-xs text-white/62">필요할 때만 잠금 해제하고, 무대는 그대로 유지해요.</p>
+      </header>
+
+      <ul className="space-y-2">
+        {VALUE_POINTS.map((point) => (
+          <li key={point} className="rounded-xl border border-white/14 bg-white/[0.04] px-3 py-2 text-sm text-white/86">
+            {point}
+          </li>
+        ))}
+      </ul>
+
+      <section className="rounded-2xl border border-white/14 bg-white/[0.04] p-3">
+        <p className="text-xs text-white/60">가격</p>
+        <div className="mt-2 grid grid-cols-2 gap-2">
+          {BILLING_OPTIONS.map((option) => {
+            const selected = option.id === cycle;
+
+            return (
+              <button
+                key={option.id}
+                type="button"
+                onClick={() => setCycle(option.id)}
+                className={cn(
+                  'rounded-xl border px-2.5 py-2 text-left text-xs transition-colors',
+                  selected
+                    ? 'border-sky-200/40 bg-sky-200/14 text-white'
+                    : 'border-white/16 bg-white/[0.03] text-white/72 hover:bg-white/[0.08]',
+                )}
+              >
+                <p className="font-medium">{option.label}</p>
+                <p className="mt-0.5 text-[10px] text-white/56">{option.caption}</p>
+              </button>
+            );
+          })}
+        </div>
+      </section>
+
+      <div className="flex items-center justify-end gap-2">
+        <button
+          type="button"
+          onClick={onClose}
+          className="rounded-full border border-white/18 bg-white/[0.05] px-3 py-1.5 text-xs text-white/74 transition-colors hover:bg-white/[0.11]"
+        >
+          나중에
+        </button>
+        <button
+          type="button"
+          onClick={onStartPro}
+          className="rounded-full border border-sky-200/44 bg-sky-300/84 px-3.5 py-1.5 text-xs font-semibold text-slate-900 transition-colors hover:bg-sky-300"
+        >
+          PRO 시작하기
+        </button>
+      </div>
+    </div>
+  );
+};