feat: 사주 웹사이트 핵심 기능 구현

- 사주팔자 계산 라이브러리 구현 (천간, 지지, 십성, 십이운성)
- 사주 결과 페이지 구현 (사주팔자 표 및 해석)
- 오늘의 운세 페이지 구현 (일일 운세, 행운의 요소)
- 궁합 보기 기능 구현 (두 사람 입력 폼)
- 궁합 결과 페이지 구현 (종합 점수, 세부 분석)
- 페이지 간 네비게이션 연결

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/page.tsx

@@ -1,65 +1,214 @@
-import Image from "next/image";
+import Link from 'next/link';
+import SajuForm from './components/SajuForm';
 
 export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
+    <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50">
+      {/* Navigation */}
+      <nav className="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <div className="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
+              🔮 사주보기
+            </div>
+            <div className="hidden md:flex space-x-6">
+              <Link href="#saju" className="text-gray-700 hover:text-indigo-600 transition font-medium">사주팔자</Link>
+              <Link href="/compatibility" className="text-gray-700 hover:text-indigo-600 transition font-medium">궁합</Link>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      {/* Hero Section */}
+      <section className="pt-20 pb-32 px-4">
+        <div className="max-w-4xl mx-auto text-center">
+          <div className="inline-block mb-6 px-6 py-2 bg-white/50 backdrop-blur-sm rounded-full text-indigo-700 font-semibold border border-indigo-200">
+            무료로 내 사주를 확인해보세요
+          </div>
+
+          <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight">
+            나의 <span className="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">사주팔자</span>를<br />
+            확인하세요
           </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
+
+          <p className="text-xl text-gray-600 mb-12 max-w-2xl mx-auto">
+            생년월일시를 입력하면 무료로 사주팔자, 운세, 궁합을 확인할 수 있습니다.
+            쉽고 빠르게 나의 운명을 알아보세요.
           </p>
+
+          {/* Main Input Card */}
+          <div className="bg-white rounded-3xl shadow-2xl p-8 md:p-12 max-w-2xl mx-auto">
+            <h2 className="text-2xl font-bold text-gray-900 mb-8">생년월일시 입력</h2>
+
+            <SajuForm />
+              {/* 생년월일 */}
+              <div>
+                <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
+                  생년월일
+                </label>
+                <div className="grid grid-cols-3 gap-3">
+                  <input
+                    type="number"
+                    placeholder="년 (예: 1990)"
+                    className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition"
+                    min="1900"
+                    max="2100"
+                  />
+                  <input
+                    type="number"
+                    placeholder="월 (1-12)"
+                    className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition"
+                    min="1"
+                    max="12"
+                  />
+                  <input
+                    type="number"
+                    placeholder="일 (1-31)"
+                    className="px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition"
+                    min="1"
+                    max="31"
+                  />
+                </div>
+              </div>
+
+              {/* 태어난 시간 */}
+              <div>
+                <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
+                  태어난 시간 (선택)
+                </label>
+                <select className="w-full px-4 py-3 border-2 border-gray-200 rounded-xl focus:border-indigo-500 focus:outline-none transition">
+                  <option value="">모름 / 시간 선택 안함</option>
+                  <option value="23-01">자시 (子時) 23:00 - 01:00</option>
+                  <option value="01-03">축시 (丑時) 01:00 - 03:00</option>
+                  <option value="03-05">인시 (寅時) 03:00 - 05:00</option>
+                  <option value="05-07">묘시 (卯時) 05:00 - 07:00</option>
+                  <option value="07-09">진시 (辰時) 07:00 - 09:00</option>
+                  <option value="09-11">사시 (巳時) 09:00 - 11:00</option>
+                  <option value="11-13">오시 (午時) 11:00 - 13:00</option>
+                  <option value="13-15">미시 (未時) 13:00 - 15:00</option>
+                  <option value="15-17">신시 (申時) 15:00 - 17:00</option>
+                  <option value="17-19">유시 (酉時) 17:00 - 19:00</option>
+                  <option value="19-21">술시 (戌時) 19:00 - 21:00</option>
+                  <option value="21-23">해시 (亥時) 21:00 - 23:00</option>
+                </select>
+              </div>
+
+              {/* 양력/음력 선택 */}
+              <div>
+                <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
+                  생일 구분
+                </label>
+                <div className="grid grid-cols-2 gap-3">
+                  <button
+                    type="button"
+                    className="px-6 py-3 bg-indigo-600 text-white rounded-xl font-semibold hover:bg-indigo-700 transition"
+                  >
+                    양력
+                  </button>
+                  <button
+                    type="button"
+                    className="px-6 py-3 bg-white border-2 border-gray-200 text-gray-700 rounded-xl font-semibold hover:border-indigo-500 hover:text-indigo-600 transition"
+                  >
+                    음력
+                  </button>
+                </div>
+              </div>
+
+              {/* 성별 선택 */}
+              <div>
+                <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
+                  성별
+                </label>
+                <div className="grid grid-cols-2 gap-3">
+                  <button
+                    type="button"
+                    className="px-6 py-3 bg-indigo-600 text-white rounded-xl font-semibold hover:bg-indigo-700 transition"
+                  >
+                    남성
+                  </button>
+                  <button
+                    type="button"
+                    className="px-6 py-3 bg-white border-2 border-gray-200 text-gray-700 rounded-xl font-semibold hover:border-indigo-500 hover:text-indigo-600 transition"
+                  >
+                    여성
+                  </button>
+                </div>
+              </div>
+
+              {/* 제출 버튼 */}
+          </div>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
+      </section>
+
+      {/* Features Section */}
+      <section className="py-20 px-4 bg-white">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl font-bold text-gray-900 mb-4">무엇을 확인할 수 있나요?</h2>
+            <p className="text-xl text-gray-600">다양한 사주 정보를 한 번에 확인하세요</p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {/* Feature 1 */}
+            <div className="text-center p-6 rounded-2xl hover:bg-indigo-50 transition">
+              <div className="text-5xl mb-4">📜</div>
+              <h3 className="text-xl font-bold text-gray-900 mb-3">사주팔자</h3>
+              <p className="text-gray-600">
+                나의 천간, 지지, 십성, 십이운성을 확인하고 운명의 흐름을 파악하세요.
+              </p>
+            </div>
+
+            {/* Feature 2 */}
+            <div className="text-center p-6 rounded-2xl hover:bg-purple-50 transition">
+              <div className="text-5xl mb-4">🌟</div>
+              <h3 className="text-xl font-bold text-gray-900 mb-3">오늘의 운세</h3>
+              <p className="text-gray-600">
+                사주를 확인한 후 오늘 하루의 운세를 확인하고 행운의 방향을 찾아보세요.
+              </p>
+            </div>
+
+            {/* Feature 3 */}
+            <Link href="/compatibility" className="text-center p-6 rounded-2xl hover:bg-pink-50 transition block">
+              <div className="text-5xl mb-4">💕</div>
+              <h3 className="text-xl font-bold text-gray-900 mb-3">궁합</h3>
+              <p className="text-gray-600">
+                두 사람의 사주를 비교하여 궁합을 확인하세요.
+              </p>
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-20 px-4 bg-gradient-to-r from-indigo-600 to-purple-600">
+        <div className="max-w-4xl mx-auto text-center text-white">
+          <h2 className="text-4xl md:text-5xl font-bold mb-6">
+            지금 바로 내 사주를 확인해보세요
+          </h2>
+          <p className="text-xl mb-8 opacity-90">
+            무료로 제공되는 정확한 사주 정보로 나의 운명을 알아보세요
+          </p>
+          <a href="#" className="inline-block bg-white text-indigo-600 px-8 py-4 rounded-xl text-lg font-bold hover:bg-gray-100 transition shadow-lg">
+            무료로 시작하기
           </a>
         </div>
-      </main>
+      </section>
+
+      {/* Footer */}
+      <footer className="bg-gray-900 text-white py-12 px-4">
+        <div className="max-w-7xl mx-auto text-center">
+          <div className="text-2xl font-bold mb-4 bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">
+            🔮 사주보기
+          </div>
+          <p className="text-gray-400 mb-6">
+            쟁승메이드가 제공하는 무료 사주 서비스
+          </p>
+          <div className="text-sm text-gray-500">
+            <p>문의: bgg8988@gmail.com | <a href="https://jaengseung-made.com" target="_blank" rel="noopener noreferrer" className="hover:text-indigo-400">쟁승메이드</a></p>
+            <p className="mt-2">&copy; 2025 쟁승메이드. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 }