feat: 음력 변환, 대운 계산, 소셜 공유 기능 추가

- 음력 변환 기능 구현
  - lunar-calendar 라이브러리 추가
  - 음력-양력 변환 유틸리티 생성
  - 모든 입력 폼에 양력/음력 선택 및 윤달 옵션 추가
  - SajuForm, CompatibilityForm에 음력 지원

- 대운(大運) 계산 기능 구현
  - 10년 단위 대운 계산 알고리즘
  - 현재 대운 표시 및 해석
  - 사주팔자 결과 페이지에 대운 섹션 추가
  - 8개 대운 (80년치) 표시

- 소셜 공유 기능 구현
  - ShareButtons 컴포넌트 생성
  - 카카오톡, 페이스북, 트위터 공유
  - 네이티브 공유 API 지원
  - 링크 복사 기능
  - 모든 결과 페이지에 공유 버튼 추가

- 메타데이터 개선
  - 사이트 제목 및 설명 최적화
  - 한국어(ko) 설정
  - 카카오 SDK 추가

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

app/components/CompatibilityForm.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { lunarToSolar } from '@/lib/lunar-utils';
 
 export default function CompatibilityForm() {
   const router = useRouter();
@@ -12,6 +13,8 @@ export default function CompatibilityForm() {
   const [day1, setDay1] = useState('');
   const [hour1, setHour1] = useState('');
   const [gender1, setGender1] = useState<'male' | 'female'>('male');
+  const [calendarType1, setCalendarType1] = useState<'solar' | 'lunar'>('solar');
+  const [isLeapMonth1, setIsLeapMonth1] = useState(false);
 
   // Person 2
   const [year2, setYear2] = useState('');
@@ -19,6 +22,8 @@ export default function CompatibilityForm() {
   const [day2, setDay2] = useState('');
   const [hour2, setHour2] = useState('');
   const [gender2, setGender2] = useState<'male' | 'female'>('female');
+  const [calendarType2, setCalendarType2] = useState<'solar' | 'lunar'>('solar');
+  const [isLeapMonth2, setIsLeapMonth2] = useState(false);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -33,15 +38,33 @@ export default function CompatibilityForm() {
       return;
     }
 
+    let finalYear1 = year1, finalMonth1 = month1, finalDay1 = day1;
+    let finalYear2 = year2, finalMonth2 = month2, finalDay2 = day2;
+
+    // 음력인 경우 양력으로 변환
+    if (calendarType1 === 'lunar') {
+      const solar = lunarToSolar(parseInt(year1), parseInt(month1), parseInt(day1), isLeapMonth1);
+      finalYear1 = solar.year.toString();
+      finalMonth1 = solar.month.toString();
+      finalDay1 = solar.day.toString();
+    }
+
+    if (calendarType2 === 'lunar') {
+      const solar = lunarToSolar(parseInt(year2), parseInt(month2), parseInt(day2), isLeapMonth2);
+      finalYear2 = solar.year.toString();
+      finalMonth2 = solar.month.toString();
+      finalDay2 = solar.day.toString();
+    }
+
     // URL 파라미터로 전달
     const params = new URLSearchParams({
-      year1,
-      month1,
-      day1,
+      year1: finalYear1,
+      month1: finalMonth1,
+      day1: finalDay1,
       gender1,
-      year2,
-      month2,
-      day2,
+      year2: finalYear2,
+      month2: finalMonth2,
+      day2: finalDay2,
       gender2,
     });
 
@@ -126,6 +149,50 @@ export default function CompatibilityForm() {
             </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"
+                onClick={() => setCalendarType1('solar')}
+                className={`px-6 py-3 rounded-xl font-semibold transition ${
+                  calendarType1 === 'solar'
+                    ? 'bg-pink-600 text-white'
+                    : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-pink-500 hover:text-pink-600'
+                }`}
+              >
+                양력
+              </button>
+              <button
+                type="button"
+                onClick={() => setCalendarType1('lunar')}
+                className={`px-6 py-3 rounded-xl font-semibold transition ${
+                  calendarType1 === 'lunar'
+                    ? 'bg-pink-600 text-white'
+                    : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-pink-500 hover:text-pink-600'
+                }`}
+              >
+                음력
+              </button>
+            </div>
+            {calendarType1 === 'lunar' && (
+              <div className="mt-3">
+                <label className="flex items-center justify-center gap-2 text-sm text-gray-600 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={isLeapMonth1}
+                    onChange={(e) => setIsLeapMonth1(e.target.checked)}
+                    className="w-4 h-4 text-pink-600 border-gray-300 rounded focus:ring-pink-500"
+                  />
+                  <span>윤달</span>
+                </label>
+              </div>
+            )}
+          </div>
+
           {/* 성별 선택 */}
           <div>
             <label className="block text-left text-sm font-semibold text-gray-700 mb-2">
@@ -230,6 +297,50 @@ export default function CompatibilityForm() {
             </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"
+                onClick={() => setCalendarType2('solar')}
+                className={`px-6 py-3 rounded-xl font-semibold transition ${
+                  calendarType2 === 'solar'
+                    ? 'bg-purple-600 text-white'
+                    : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-purple-500 hover:text-purple-600'
+                }`}
+              >
+                양력
+              </button>
+              <button
+                type="button"
+                onClick={() => setCalendarType2('lunar')}
+                className={`px-6 py-3 rounded-xl font-semibold transition ${
+                  calendarType2 === 'lunar'
+                    ? 'bg-purple-600 text-white'
+                    : 'bg-white border-2 border-gray-200 text-gray-700 hover:border-purple-500 hover:text-purple-600'
+                }`}
+              >
+                음력
+              </button>
+            </div>
+            {calendarType2 === 'lunar' && (
+              <div className="mt-3">
+                <label className="flex items-center justify-center gap-2 text-sm text-gray-600 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={isLeapMonth2}
+                    onChange={(e) => setIsLeapMonth2(e.target.checked)}
+                    className="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500"
+                  />
+                  <span>윤달</span>
+                </label>
+              </div>
+            )}
+          </div>
+
           {/* 성별 선택 */}
           <div>
             <label className="block text-left text-sm font-semibold text-gray-700 mb-2">

app/components/SajuForm.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { lunarToSolar } from '@/lib/lunar-utils';
 
 export default function SajuForm() {
   const router = useRouter();
@@ -11,6 +12,7 @@ export default function SajuForm() {
   const [hour, setHour] = useState('');
   const [calendarType, setCalendarType] = useState<'solar' | 'lunar'>('solar');
   const [gender, setGender] = useState<'male' | 'female'>('male');
+  const [isLeapMonth, setIsLeapMonth] = useState(false);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -20,19 +22,43 @@ export default function SajuForm() {
       return;
     }
 
+    let finalYear = year;
+    let finalMonth = month;
+    let finalDay = day;
+
+    // 음력인 경우 양력으로 변환
+    if (calendarType === 'lunar') {
+      const solar = lunarToSolar(
+        parseInt(year),
+        parseInt(month),
+        parseInt(day),
+        isLeapMonth
+      );
+      finalYear = solar.year.toString();
+      finalMonth = solar.month.toString();
+      finalDay = solar.day.toString();
+    }
+
     // URL 파라미터로 전달
     const params = new URLSearchParams({
-      year,
-      month,
-      day,
+      year: finalYear,
+      month: finalMonth,
+      day: finalDay,
       gender,
-      calendarType
+      calendarType,
+      originalYear: year,
+      originalMonth: month,
+      originalDay: day,
     });
 
     if (hour) {
       params.append('hour', hour);
     }
 
+    if (calendarType === 'lunar') {
+      params.append('isLeapMonth', isLeapMonth.toString());
+    }
+
     router.push(`/result?${params.toString()}`);
   };
 
@@ -132,6 +158,19 @@ export default function SajuForm() {
             음력
           </button>
         </div>
+        {calendarType === 'lunar' && (
+          <div className="mt-3">
+            <label className="flex items-center justify-center gap-2 text-sm text-gray-600 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={isLeapMonth}
+                onChange={(e) => setIsLeapMonth(e.target.checked)}
+                className="w-4 h-4 text-indigo-600 border-gray-300 rounded focus:ring-indigo-500"
+              />
+              <span>윤달</span>
+            </label>
+          </div>
+        )}
       </div>
 
       {/* 성별 선택 */}

app/components/ShareButtons.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import { useState } from 'react';
+
+interface ShareButtonsProps {
+  title: string;
+  description: string;
+  url?: string;
+}
+
+export default function ShareButtons({ title, description, url }: ShareButtonsProps) {
+  const [showShareMenu, setShowShareMenu] = useState(false);
+  const shareUrl = url || (typeof window !== 'undefined' ? window.location.href : '');
+
+  const handleKakaoShare = () => {
+    if (typeof window !== 'undefined' && (window as any).Kakao) {
+      (window as any).Kakao.Share.sendDefault({
+        objectType: 'feed',
+        content: {
+          title: title,
+          description: description,
+          imageUrl: 'https://developers.kakao.com/assets/img/about/logos/kakaolink/kakaolink_btn_medium.png',
+          link: {
+            mobileWebUrl: shareUrl,
+            webUrl: shareUrl,
+          },
+        },
+        buttons: [
+          {
+            title: '자세히 보기',
+            link: {
+              mobileWebUrl: shareUrl,
+              webUrl: shareUrl,
+            },
+          },
+        ],
+      });
+    } else {
+      alert('카카오톡 공유 기능을 사용할 수 없습니다.');
+    }
+  };
+
+  const handleFacebookShare = () => {
+    const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`;
+    window.open(facebookUrl, '_blank', 'width=600,height=400');
+  };
+
+  const handleTwitterShare = () => {
+    const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(shareUrl)}`;
+    window.open(twitterUrl, '_blank', 'width=600,height=400');
+  };
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      alert('링크가 복사되었습니다!');
+      setShowShareMenu(false);
+    } catch (err) {
+      alert('링크 복사에 실패했습니다.');
+    }
+  };
+
+  const handleNativeShare = async () => {
+    if (navigator.share) {
+      try {
+        await navigator.share({
+          title: title,
+          text: description,
+          url: shareUrl,
+        });
+        setShowShareMenu(false);
+      } catch (err) {
+        console.log('Share cancelled or failed', err);
+      }
+    } else {
+      setShowShareMenu(true);
+    }
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={handleNativeShare}
+        className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition text-center group w-full"
+      >
+        <div className="text-4xl mb-3">📤</div>
+        <h3 className="text-xl font-bold text-gray-900 mb-2">공유하기</h3>
+        <p className="text-gray-600 text-sm">결과를 친구에게 공유</p>
+      </button>
+
+      {/* 공유 메뉴 (모바일에서 네이티브 공유가 안 될 때) */}
+      {showShareMenu && (
+        <>
+          {/* 배경 오버레이 */}
+          <div
+            className="fixed inset-0 bg-black bg-opacity-50 z-40"
+            onClick={() => setShowShareMenu(false)}
+          ></div>
+
+          {/* 공유 메뉴 */}
+          <div className="fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl shadow-2xl z-50 p-6 animate-slide-up">
+            <div className="flex justify-between items-center mb-6">
+              <h3 className="text-xl font-bold text-gray-900">공유하기</h3>
+              <button
+                onClick={() => setShowShareMenu(false)}
+                className="text-gray-500 hover:text-gray-700 text-2xl"
+              >
+                ✕
+              </button>
+            </div>
+
+            <div className="grid grid-cols-4 gap-4 mb-4">
+              {/* 카카오톡 */}
+              <button
+                onClick={handleKakaoShare}
+                className="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-gray-50 transition"
+              >
+                <div className="w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center text-2xl">
+                  💬
+                </div>
+                <span className="text-xs text-gray-700">카카오톡</span>
+              </button>
+
+              {/* 페이스북 */}
+              <button
+                onClick={handleFacebookShare}
+                className="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-gray-50 transition"
+              >
+                <div className="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-2xl text-white">
+                  f
+                </div>
+                <span className="text-xs text-gray-700">페이스북</span>
+              </button>
+
+              {/* 트위터 */}
+              <button
+                onClick={handleTwitterShare}
+                className="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-gray-50 transition"
+              >
+                <div className="w-12 h-12 bg-blue-400 rounded-full flex items-center justify-center text-2xl text-white">
+                  𝕏
+                </div>
+                <span className="text-xs text-gray-700">트위터</span>
+              </button>
+
+              {/* 링크 복사 */}
+              <button
+                onClick={handleCopyLink}
+                className="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-gray-50 transition"
+              >
+                <div className="w-12 h-12 bg-gray-600 rounded-full flex items-center justify-center text-2xl text-white">
+                  🔗
+                </div>
+                <span className="text-xs text-gray-700">링크 복사</span>
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}