사주 풀이 고도화, NAS 배포 자동화

2026-02-16 19:02:04 +09:00
parent d513c063cf
commit 7042373448
44 changed files with 6280 additions and 978 deletions
--- a/app/tojeong/result/TojeongDetailUnlock.tsx
+++ b/app/tojeong/result/TojeongDetailUnlock.tsx
@@ -0,0 +1,134 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { createBrowserClient } from '@supabase/ssr';
+import { useRouter } from 'next/navigation';
+import TokenPurchaseModal from '@/components/TokenPurchaseModal';
+import { ensureProfile } from '@/lib/ensure-profile';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function TojeongDetailUnlock({ children }: Props) {
+  const [isUnlocked, setIsUnlocked] = useState(false);
+  const [user, setUser] = useState<any>(null);
+  const [credits, setCredits] = useState(0);
+  const [showModal, setShowModal] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+
+  const supabase = createBrowserClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+  );
+
+  useEffect(() => {
+    const init = async () => {
+      const { data: { user } } = await supabase.auth.getUser();
+      if (user) {
+        setUser(user);
+        const currentCredits = await ensureProfile(supabase, user);
+        setCredits(currentCredits);
+      }
+    };
+    init();
+  }, []);
+
+  const handleUnlock = async () => {
+    if (!user) {
+      if (confirm('로그인이 필요합니다. 로그인 페이지로 이동하시겠습니까?')) {
+        router.push('/login');
+      }
+      return;
+    }
+
+    if (credits < 1) {
+      setShowModal(true);
+      return;
+    }
+
+    setLoading(true);
+    const { error } = await supabase
+      .from('profiles')
+      .update({ credits: credits - 1 })
+      .eq('id', user.id);
+
+    if (error) {
+      alert('토큰 차감에 실패했습니다. 다시 시도해주세요.');
+      setLoading(false);
+      return;
+    }
+
+    setCredits(credits - 1);
+    setIsUnlocked(true);
+    setLoading(false);
+  };
+
+  const handlePurchaseComplete = async () => {
+    setShowModal(false);
+    if (user) {
+      const { data: profile } = await supabase
+        .from('profiles')
+        .select('credits')
+        .eq('id', user.id)
+        .single();
+      if (profile) setCredits(profile.credits || 0);
+    }
+  };
+
+  if (isUnlocked) {
+    return <>{children}</>;
+  }
+
+  return (
+    <>
+      <div className="relative mb-8">
+        {/* 블러 처리된 미리보기 */}
+        <div className="filter blur-sm select-none pointer-events-none opacity-60">
+          <div className="bg-white rounded-2xl shadow-lg p-8">
+            <h3 className="text-2xl font-bold text-gray-900 mb-6 flex items-center">
+              <span className="text-3xl mr-3">💡</span>
+              한 해를 위한 조언
+            </h3>
+            <div className="space-y-3">
+              <div className="h-4 bg-gray-200 rounded w-full"></div>
+              <div className="h-4 bg-gray-200 rounded w-5/6"></div>
+              <div className="h-4 bg-gray-200 rounded w-4/6"></div>
+              <div className="h-4 bg-gray-200 rounded w-full"></div>
+            </div>
+          </div>
+        </div>
+
+        {/* 잠금 오버레이 */}
+        <div className="absolute inset-0 flex items-center justify-center bg-white/40 backdrop-blur-[2px] rounded-2xl">
+          <div className="text-center p-8 bg-white/95 backdrop-blur-md rounded-2xl shadow-xl border border-amber-100 max-w-sm mx-auto">
+            <div className="text-4xl mb-4">🔐</div>
+            <h3 className="text-2xl font-bold text-gray-900 mb-2">상세 조언 잠금해제</h3>
+            <p className="text-gray-600 mb-2">
+              토정비결의 상세한 조언과 해석을 확인하세요.
+            </p>
+            <p className="text-sm text-gray-500 mb-4">
+              토큰 1개 사용 | 보유: <span className="font-bold text-amber-600">{credits}개</span>
+            </p>
+            <button
+              onClick={handleUnlock}
+              disabled={loading}
+              className="w-full bg-gradient-to-r from-amber-600 to-orange-600 text-white font-bold py-3 px-6 rounded-xl hover:shadow-lg hover:scale-105 transition transform disabled:opacity-50"
+            >
+              {loading ? '처리 중...' : credits >= 1 ? '토큰 1개로 잠금해제' : '토큰 충전하기'}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <TokenPurchaseModal
+        isOpen={showModal}
+        onClose={() => setShowModal(false)}
+        onPurchaseComplete={handlePurchaseComplete}
+        user={user}
+        supabase={supabase}
+      />
+    </>
+  );
+}