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

app/result/page.tsx

@@ -1,11 +1,14 @@
+
 import { calculateSaju } from '@/lib/saju-calculator';
 import Link from 'next/link';
 import PDFButton from '../components/PDFButton';
 import ShareButtons from '../components/ShareButtons';
+import UserMenu from '@/components/UserMenu';
 import { calculateDaeun, getCurrentDaeun, getDaeunDescription } from '@/lib/daeun-calculator';
 import { getCurrentSolarTerm, getSolarTermName, getSolarTermMonthBranch } from '@/lib/solar-terms';
-import { EARTHLY_BRANCHES_KR } from '@/lib/saju-calculator';
-import { generateInterpretation, calculateElementScore } from '@/lib/ai-interpretation';
+import { EARTHLY_BRANCHES_KR, FIVE_ELEMENTS_KR, FIVE_ELEMENTS } from '@/lib/saju-calculator';
+import { calculateElementScore, performFullAnalysis } from '@/lib/ai-interpretation';
+import AiInterpretationSection from '@/components/AiInterpretationSection';
 
 interface PageProps {
   searchParams: Promise<{
@@ -15,18 +18,31 @@ interface PageProps {
     hour?: string;
     gender: 'male' | 'female';
     calendarType: 'solar' | 'lunar';
+    originalYear?: string;
+    originalMonth?: string;
+    originalDay?: string;
+    isLeapMonth?: string;
   }>;
 }
 
 export default async function ResultPage({ searchParams }: PageProps) {
   const params = await searchParams;
-  const { year, month, day, hour, gender } = params;
+  const {
+    year, month, day, hour, gender, calendarType,
+    originalYear, originalMonth, originalDay, isLeapMonth
+  } = params;
 
   const yearNum = parseInt(year);
   const monthNum = parseInt(month);
   const dayNum = parseInt(day);
   const hourNum = hour ? parseInt(hour) : null;
 
+  const inputYear = originalYear ? parseInt(originalYear) : yearNum;
+  const inputMonth = originalMonth ? parseInt(originalMonth) : monthNum;
+  const inputDay = originalDay ? parseInt(originalDay) : dayNum;
+  const isLunar = calendarType === 'lunar';
+  const isLeap = isLeapMonth === 'true';
+
   const sajuData = calculateSaju(yearNum, monthNum, dayNum, hourNum, gender);
 
   // 절기 정보
@@ -35,22 +51,29 @@ export default async function ResultPage({ searchParams }: PageProps) {
   const monthBranchIndex = getSolarTermMonthBranch(yearNum, monthNum, dayNum);
   const monthBranchName = EARTHLY_BRANCHES_KR[monthBranchIndex];
 
-  // AI 해석 생성
-  const interpretation = generateInterpretation(sajuData);
-  const elementScores = calculateElementScore(sajuData);
+  // 종합 분석 수행
+  const analysis = performFullAnalysis(sajuData);
+  const elementScores = analysis.elementScores;
 
   // 대운 계산
   const daeunList = calculateDaeun(
-    yearNum,
-    monthNum,
-    dayNum,
-    gender,
-    sajuData.month.stem,
-    sajuData.month.branch
+    yearNum, monthNum, dayNum, gender,
+    sajuData.month.stem, sajuData.month.branch
   );
   const currentYear = new Date().getFullYear();
   const currentDaeun = getCurrentDaeun(daeunList, currentYear);
 
+  // 오행 색상 매핑
+  const elementColors: { [key: string]: string } = {
+    '木': 'text-green-600', '火': 'text-red-500', '土': 'text-yellow-600',
+    '金': 'text-gray-500', '水': 'text-blue-600',
+  };
+  const elementBgColors: { [key: string]: string } = {
+    '木': 'bg-green-100 border-green-300', '火': 'bg-red-100 border-red-300',
+    '土': 'bg-yellow-100 border-yellow-300', '金': 'bg-gray-100 border-gray-300',
+    '水': 'bg-blue-100 border-blue-300',
+  };
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50">
       {/* Navigation */}
@@ -58,14 +81,14 @@ export default async function ResultPage({ searchParams }: PageProps) {
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex justify-between items-center h-16">
             <Link href="/" className="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
-              🔮 사주보기
-            </Link>
-            <Link
-              href="/"
-              className="text-gray-700 hover:text-indigo-600 transition font-medium"
-            >
-              다시 보기
+              사주보기
             </Link>
+            <div className="flex items-center space-x-4">
+              <Link href="/" className="text-gray-700 hover:text-indigo-600 transition font-medium">
+                다시 보기
+              </Link>
+              <UserMenu />
+            </div>
           </div>
         </div>
       </nav>
@@ -78,7 +101,19 @@ export default async function ResultPage({ searchParams }: PageProps) {
             내 사주팔자
           </h1>
           <p className="text-xl text-gray-600">
-            {yearNum}년 {monthNum}월 {dayNum}일 {hourNum !== null && `${hourNum}시`}
+            {isLunar ? (
+              <>
+                음력 {inputYear}년 {inputMonth}월 {inputDay}일{isLeap && ' (윤달)'} {hourNum !== null && `${hourNum}시`}
+                <br />
+                <span className="text-base text-gray-500">
+                  (양력 {yearNum}년 {monthNum}월 {dayNum}일)
+                </span>
+              </>
+            ) : (
+              <>
+                {yearNum}년 {monthNum}월 {dayNum}일 {hourNum !== null && `${hourNum}시`}
+              </>
+            )}
             {gender === 'male' ? ' 남성' : ' 여성'}
           </p>
         </div>
@@ -146,6 +181,36 @@ export default async function ResultPage({ searchParams }: PageProps) {
                   </td>
                 </tr>
 
+                {/* 지장간 (NEW) */}
+                <tr className="border-b border-gray-200 hover:bg-amber-50 transition">
+                  <td className="py-4 px-6 text-center font-semibold text-gray-700">
+                    지장간 (藏干)
+                    <div className="text-xs text-gray-400 mt-1">숨은 천간</div>
+                  </td>
+                  {(() => {
+                    const pillars = sajuData.hour
+                      ? [analysis.hiddenStems.find(h => h.pillar === '시주'), analysis.hiddenStems.find(h => h.pillar === '일주'), analysis.hiddenStems.find(h => h.pillar === '월주'), analysis.hiddenStems.find(h => h.pillar === '년주')]
+                      : [analysis.hiddenStems.find(h => h.pillar === '일주'), analysis.hiddenStems.find(h => h.pillar === '월주'), analysis.hiddenStems.find(h => h.pillar === '년주')];
+                    return pillars.map((h, idx) => (
+                      <td key={idx} className={`py-3 px-4 text-center ${h?.pillar === '일주' ? 'bg-blue-50' : ''}`}>
+                        {h && (
+                          <div className="flex flex-wrap justify-center gap-1">
+                            {h.stems.map((s, si) => (
+                              <span
+                                key={si}
+                                className={`inline-block px-2 py-1 rounded text-xs font-semibold border ${elementBgColors[s.element] || 'bg-gray-100'}`}
+                                title={s.role}
+                              >
+                                {s.stemKr}({FIVE_ELEMENTS_KR[s.element as keyof typeof FIVE_ELEMENTS_KR]})
+                              </span>
+                            ))}
+                          </div>
+                        )}
+                      </td>
+                    ));
+                  })()}
+                </tr>
+
                 {/* 십성 */}
                 <tr className="border-b border-gray-200 hover:bg-emerald-50 transition">
                   <td className="py-4 px-6 text-center font-semibold text-gray-700">십성 (十星)</td>
@@ -187,103 +252,56 @@ export default async function ResultPage({ searchParams }: PageProps) {
             </table>
           </div>
 
-          <div className="mt-6 space-y-3">
-            <div className="p-4 bg-blue-50 rounded-xl">
-              <p className="text-sm text-gray-700">
-                <strong className="text-blue-600">일간 (日干):</strong> {sajuData.day.stem}({sajuData.day.stemKr}) - 나 자신을 나타내는 중심 기둥입니다.
-              </p>
+          {/* 지지 상호작용 (합/충/형/파/해) */}
+          {analysis.branchInteractions.length > 0 && (
+            <div className="mt-6 pt-6 border-t border-gray-100">
+              <h3 className="text-lg font-bold text-gray-900 mb-3 flex items-center justify-center">
+                <span className="mr-2">🔗</span> 지지 상호작용
+              </h3>
+              <div className="flex flex-wrap justify-center gap-2">
+                {analysis.branchInteractions.map((inter, idx) => {
+                  const isPositive = inter.type.includes('합');
+                  const isNegative = inter.type.includes('충') || inter.type.includes('형');
+                  const colorClass = isPositive
+                    ? 'bg-emerald-50 border-emerald-300 text-emerald-800'
+                    : isNegative
+                      ? 'bg-red-50 border-red-300 text-red-800'
+                      : 'bg-amber-50 border-amber-300 text-amber-800';
+                  return (
+                    <span key={idx} className={`inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold border ${colorClass}`}>
+                      {inter.type} {inter.branchesKr.join('')}
+                      {inter.resultElement && ` → ${FIVE_ELEMENTS_KR[inter.resultElement as keyof typeof FIVE_ELEMENTS_KR]}`}
+                    </span>
+                  );
+                })}
+              </div>
             </div>
-            <div className="p-4 bg-green-50 rounded-xl">
-              <p className="text-sm text-gray-700">
-                <strong className="text-green-600">절기 (節氣):</strong> {solarTermName} 이후 -
-                월주는 절기를 기준으로 {monthBranchName}월입니다.
-              </p>
-              <p className="text-xs text-gray-600 mt-1">
-                * 사주 월주는 양력 월이 아닌 24절기를 기준으로 계산됩니다.
-              </p>
-            </div>
-          </div>
-        </div>
+          )}
 
-        {/* 사주 해석 */}
-        <div className="grid md:grid-cols-2 gap-8 mb-8">
-          {/* 성격 */}
-          <div className="bg-white rounded-2xl shadow-lg p-8">
-            <h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
-              <span className="text-3xl mr-3">👤</span>
-              성격 특징
-            </h3>
-            <div className="space-y-3 text-gray-700">
-              <p className="leading-relaxed">
-                일간이 <strong className="text-indigo-600">{sajuData.day.stem}({sajuData.day.stemKr})</strong>인 사람은
-                {sajuData.day.element === '木' && ' 나무처럼 성장하고 발전하려는 의지가 강합니다. 창의적이고 진취적인 성향을 가지고 있습니다.'}
-                {sajuData.day.element === '火' && ' 불처럼 열정적이고 활동적입니다. 리더십이 있고 사교성이 뛰어납니다.'}
-                {sajuData.day.element === '土' && ' 흙처럼 안정적이고 신뢰감 있습니다. 포용력이 있고 책임감이 강합니다.'}
-                {sajuData.day.element === '金' && ' 금속처럼 강인하고 원칙적입니다. 결단력 있고 의리를 중시합니다.'}
-                {sajuData.day.element === '水' && ' 물처럼 유연하고 지혜롭습니다. 적응력이 뛰어나고 사려 깊습니다.'}
-              </p>
-            </div>
-          </div>
-
-          {/* 운세 */}
-          <div className="bg-white rounded-2xl shadow-lg p-8">
-            <h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
-              <span className="text-3xl mr-3">🌟</span>
-              운세 흐름
-            </h3>
-            <div className="space-y-3 text-gray-700">
-              <p className="leading-relaxed">
-                현재 십이운성이 <strong className="text-purple-600">{sajuData.day.fortune}</strong>으로,
-                {sajuData.day.fortune === '장생' && ' 새로운 시작과 성장의 시기입니다.'}
-                {sajuData.day.fortune === '목욕' && ' 정화와 준비의 시기입니다.'}
-                {sajuData.day.fortune === '관대' && ' 사회적으로 인정받는 시기입니다.'}
-                {sajuData.day.fortune === '건록' && ' 안정되고 왕성한 활동의 시기입니다.'}
-                {sajuData.day.fortune === '제왕' && ' 최고의 전성기를 맞이하는 시기입니다.'}
-                {sajuData.day.fortune === '쇠' && ' 조금씩 힘이 약해지는 시기입니다.'}
-                {sajuData.day.fortune === '병' && ' 어려움이 있을 수 있는 시기입니다.'}
-                {sajuData.day.fortune === '사' && ' 끝과 새 시작을 준비하는 시기입니다.'}
-                {sajuData.day.fortune === '묘' && ' 잠시 휴식이 필요한 시기입니다.'}
-                {sajuData.day.fortune === '절' && ' 극복과 인내가 필요한 시기입니다.'}
-                {sajuData.day.fortune === '태' && ' 새로운 기운이 싹트는 시기입니다.'}
-                {sajuData.day.fortune === '양' && ' 성장을 준비하는 시기입니다.'}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* AI 상세 해석 */}
-        <div className="bg-gradient-to-br from-purple-50 to-indigo-50 rounded-3xl shadow-2xl p-8 md:p-12 mb-8">
-          <h2 className="text-3xl font-bold text-gray-900 mb-2 text-center flex items-center justify-center">
-            <span className="text-4xl mr-3">🤖</span>
-            AI 상세 해석
-          </h2>
-          <p className="text-center text-gray-600 mb-8">사주 데이터 분석 기반 맞춤 해석</p>
-
-          {/* 오행 균형 */}
-          <div className="bg-white rounded-2xl p-6 mb-6">
-            <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
+          {/* 오행 균형 시각화 */}
+          <div className="mt-8 pt-8 border-t border-gray-100">
+            <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center justify-center">
               <span className="text-2xl mr-2">⚖️</span>
-              오행 균형
+              내 사주의 오행 균형
+              <span className="text-sm font-normal text-gray-500 ml-2">(지장간 가중치 적용)</span>
             </h3>
-            <div className="grid grid-cols-5 gap-3">
+            <div className="grid grid-cols-5 gap-3 max-w-2xl mx-auto">
               {Object.entries(elementScores).map(([element, score]) => (
                 <div key={element} className="text-center">
-                  <div className="text-2xl font-bold mb-1">{element}</div>
+                  <div className={`text-2xl font-bold mb-1 ${elementColors[element] || ''}`}>{element}</div>
                   <div className="text-sm text-gray-600 mb-2">
-                    {element === '木' && '목'}
-                    {element === '火' && '화'}
-                    {element === '土' && '토'}
-                    {element === '金' && '금'}
-                    {element === '水' && '수'}
+                    {FIVE_ELEMENTS_KR[element as keyof typeof FIVE_ELEMENTS_KR]}
+                    <span className="text-xs text-gray-400 ml-1">
+                      ({analysis.elementBalance[element as keyof typeof analysis.elementBalance]}점)
+                    </span>
                   </div>
-                  <div className="w-full bg-gray-200 rounded-full h-2 mb-1">
+                  <div className="w-full bg-gray-200 rounded-full h-3 mb-1">
                     <div
-                      className={`h-2 rounded-full ${
-                        element === sajuData.day.element
-                          ? 'bg-gradient-to-r from-indigo-500 to-purple-500'
-                          : 'bg-gray-400'
-                      }`}
-                      style={{ width: `${score}%` }}
+                      className={`h-3 rounded-full transition-all ${element === sajuData.day.element
+                        ? 'bg-gradient-to-r from-indigo-500 to-purple-500'
+                        : 'bg-gray-400'
+                        }`}
+                      style={{ width: `${Math.max(score, 5)}%` }}
                     ></div>
                   </div>
                   <div className="text-xs font-semibold text-gray-700">{score}%</div>
@@ -291,138 +309,127 @@ export default async function ResultPage({ searchParams }: PageProps) {
               ))}
             </div>
           </div>
+        </div>
 
-          {/* 장단점 */}
-          <div className="grid md:grid-cols-2 gap-6 mb-6">
-            <div className="bg-white rounded-2xl p-6">
-              <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
-                <span className="text-2xl mr-2">💪</span>
-                장점
-              </h3>
-              <ul className="space-y-2">
-                {interpretation.strengths.map((strength, i) => (
-                  <li key={i} className="flex items-start text-gray-700">
-                    <span className="text-green-600 mr-2">✓</span>
-                    <span>{strength}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            <div className="bg-white rounded-2xl p-6">
-              <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
-                <span className="text-2xl mr-2">⚠️</span>
-                주의할 점
-              </h3>
-              <ul className="space-y-2">
-                {interpretation.weaknesses.map((weakness, i) => (
-                  <li key={i} className="flex items-start text-gray-700">
-                    <span className="text-orange-600 mr-2">!</span>
-                    <span>{weakness}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-
-          {/* 직업, 대인관계, 재물, 건강 */}
-          <div className="grid md:grid-cols-2 gap-6">
-            {/* 직업 */}
-            <div className="bg-white rounded-2xl p-6">
-              <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
-                <span className="text-2xl mr-2">💼</span>
-                직업 운세
-              </h3>
-              <ul className="space-y-2">
-                {interpretation.career.map((item, i) => (
-                  <li key={i} className="flex items-start text-gray-700 text-sm">
-                    <span className="text-blue-600 mr-2">•</span>
-                    <span>{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* 대인관계 */}
-            <div className="bg-white rounded-2xl p-6">
-              <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
-                <span className="text-2xl mr-2">👥</span>
-                대인 관계
-              </h3>
-              <ul className="space-y-2">
-                {interpretation.relationships.map((item, i) => (
-                  <li key={i} className="flex items-start text-gray-700 text-sm">
-                    <span className="text-pink-600 mr-2">•</span>
-                    <span>{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* 재물 */}
-            <div className="bg-white rounded-2xl p-6">
-              <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
-                <span className="text-2xl mr-2">💰</span>
-                재물 운세
-              </h3>
-              <ul className="space-y-2">
-                {interpretation.wealth.map((item, i) => (
-                  <li key={i} className="flex items-start text-gray-700 text-sm">
-                    <span className="text-yellow-600 mr-2">•</span>
-                    <span>{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* 건강 */}
-            <div className="bg-white rounded-2xl p-6">
-              <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
-                <span className="text-2xl mr-2">🏥</span>
-                건강 운세
-              </h3>
-              <ul className="space-y-2">
-                {interpretation.health.map((item, i) => (
-                  <li key={i} className="flex items-start text-gray-700 text-sm">
-                    <span className="text-red-600 mr-2">•</span>
-                    <span>{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </div>
-
-          {/* 조언 */}
-          <div className="bg-white rounded-2xl p-6 mt-6">
-            <h3 className="text-xl font-bold text-gray-900 mb-4 flex items-center">
-              <span className="text-2xl mr-2">💡</span>
-              AI의 조언
+        {/* 신강/신약 + 용신 + 신살 카드 */}
+        <div className="grid md:grid-cols-2 gap-6 mb-8">
+          {/* 신강/신약 + 용신 카드 */}
+          <div className="bg-white rounded-3xl shadow-xl p-8 border border-gray-100">
+            <h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
+              <span className="mr-2">⚡</span> 일간 세력 분석
             </h3>
-            <div className="grid md:grid-cols-2 gap-3">
-              {interpretation.advice.map((item, i) => (
-                <div key={i} className="flex items-start text-gray-700 text-sm bg-indigo-50 p-3 rounded-lg">
-                  <span className="text-indigo-600 mr-2">→</span>
-                  <span>{item}</span>
-                </div>
+            <div className="flex items-center gap-3 mb-4">
+              <span className={`inline-block px-4 py-2 rounded-xl text-lg font-bold ${
+                analysis.dayMasterStrength.result === '신강'
+                  ? 'bg-red-100 text-red-700'
+                  : analysis.dayMasterStrength.result === '신약'
+                    ? 'bg-blue-100 text-blue-700'
+                    : 'bg-green-100 text-green-700'
+              }`}>
+                {analysis.dayMasterStrength.result}
+              </span>
+              <span className="text-gray-500 text-sm">점수: {analysis.dayMasterStrength.score}</span>
+            </div>
+            <ul className="space-y-1.5 text-sm text-gray-600 mb-6">
+              {analysis.dayMasterStrength.reasons.map((r, i) => (
+                <li key={i} className="flex items-start">
+                  <span className="text-indigo-400 mr-2 mt-0.5">-</span>
+                  <span>{r}</span>
+                </li>
               ))}
+            </ul>
+
+            <div className="border-t border-gray-100 pt-4">
+              <h4 className="font-bold text-gray-800 mb-3">용신 / 희신 / 기신</h4>
+              <div className="flex flex-wrap gap-2 mb-3">
+                <span className={`px-3 py-1.5 rounded-lg text-sm font-bold border ${elementBgColors[analysis.yongShin.yongShin] || 'bg-gray-100'}`}>
+                  용신: {analysis.yongShin.yongShinKr}({analysis.yongShin.yongShin})
+                </span>
+                <span className={`px-3 py-1.5 rounded-lg text-sm font-bold border ${elementBgColors[analysis.yongShin.heeShin] || 'bg-gray-100'}`}>
+                  희신: {analysis.yongShin.heeShinKr}({analysis.yongShin.heeShin})
+                </span>
+                <span className="px-3 py-1.5 rounded-lg text-sm font-bold bg-gray-200 border border-gray-400 text-gray-700">
+                  기신: {analysis.yongShin.giShinKr}({analysis.yongShin.giShin})
+                </span>
+              </div>
+              <p className="text-sm text-gray-600 leading-relaxed">{analysis.yongShin.explanation}</p>
             </div>
           </div>
 
-          <div className="mt-6 p-4 bg-purple-100 rounded-xl">
-            <p className="text-xs text-gray-700 text-center">
-              💡 AI 해석은 전통 사주 이론을 기반으로 생성되었습니다. 참고용으로 활용하시고,
-              중요한 결정은 전문가와 상담하시기 바랍니다.
-            </p>
+          {/* 신살 + 공망 카드 */}
+          <div className="bg-white rounded-3xl shadow-xl p-8 border border-gray-100">
+            <h3 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
+              <span className="mr-2">🌟</span> 신살 (神煞)
+            </h3>
+            {analysis.shinsal.length > 0 ? (
+              <div className="space-y-3 mb-6">
+                {analysis.shinsal.map((s, i) => (
+                  <div key={i} className="flex items-start gap-3 p-3 rounded-xl bg-gray-50">
+                    <span className="inline-block px-2 py-1 bg-indigo-100 text-indigo-700 rounded-lg text-xs font-bold whitespace-nowrap">
+                      {s.name}
+                    </span>
+                    <div>
+                      <div className="text-sm font-semibold text-gray-800">
+                        {s.pillar} {s.branchKr}({s.branch})
+                      </div>
+                      <div className="text-xs text-gray-500 mt-0.5">{s.description}</div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-gray-500 text-sm mb-6">특별한 신살이 발견되지 않았습니다.</p>
+            )}
+
+            <div className="border-t border-gray-100 pt-4">
+              <h4 className="font-bold text-gray-800 mb-2 flex items-center">
+                <span className="mr-2">🕳️</span> 공망 (空亡)
+              </h4>
+              <div className="flex gap-2 mb-2">
+                {analysis.gongmang.branchesKr.map((bk, i) => (
+                  <span key={i} className="px-3 py-1.5 bg-gray-800 text-white rounded-lg text-sm font-bold">
+                    {bk}({analysis.gongmang.branches[i]})
+                  </span>
+                ))}
+              </div>
+              <p className="text-xs text-gray-500 leading-relaxed">{analysis.gongmang.description}</p>
+            </div>
+
+            {/* 세운 정보 */}
+            <div className="border-t border-gray-100 pt-4 mt-4">
+              <h4 className="font-bold text-gray-800 mb-2 flex items-center">
+                <span className="mr-2">📅</span> {analysis.seun.year}년 세운
+              </h4>
+              <div className="flex items-center gap-2 mb-2">
+                <span className={`px-3 py-1.5 rounded-lg text-sm font-bold border ${elementBgColors[analysis.seun.element] || 'bg-gray-100'}`}>
+                  {analysis.seun.stemKr}{analysis.seun.branchKr} ({analysis.seun.stem}{analysis.seun.branch})
+                </span>
+                <span className="text-sm text-gray-500">{analysis.seun.elementKr}({analysis.seun.element}) 기운</span>
+              </div>
+              {analysis.seun.interactions.length > 0 && (
+                <div className="flex flex-wrap gap-1.5 mt-2">
+                  {analysis.seun.interactions.map((si, i) => (
+                    <span key={i} className={`text-xs px-2 py-1 rounded-full font-semibold ${
+                      si.type.includes('합') ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700'
+                    }`}>
+                      {si.type} {si.branchesKr.join('')}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
           </div>
         </div>
 
+        {/* AI 상세 해석 */}
+        <AiInterpretationSection sajuData={sajuData} currentDaeun={currentDaeun} daeunList={daeunList} />
+
         {/* 대운 (大運) */}
         <div className="bg-white rounded-3xl shadow-2xl p-8 md:p-12 mb-8">
           <h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
-            🔄 대운 (大運) - 10년 주기 운세
+            대운 (大運) - 10년 주기 운세
           </h2>
 
-          {/* 현재 대운 */}
           {currentDaeun && (
             <div className="bg-gradient-to-r from-indigo-500 to-purple-500 rounded-2xl p-6 mb-8 text-white">
               <h3 className="text-2xl font-bold mb-4 text-center">현재 대운</h3>
@@ -443,7 +450,6 @@ export default async function ResultPage({ searchParams }: PageProps) {
             </div>
           )}
 
-          {/* 전체 대운 목록 */}
           <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
             {daeunList.map((daeun, index) => {
               const isCurrent = currentDaeun &&
@@ -453,11 +459,10 @@ export default async function ResultPage({ searchParams }: PageProps) {
               return (
                 <div
                   key={index}
-                  className={`rounded-xl p-4 border-2 transition ${
-                    isCurrent
-                      ? 'bg-indigo-50 border-indigo-400'
-                      : 'bg-gray-50 border-gray-200 hover:border-indigo-300'
-                  }`}
+                  className={`rounded-xl p-4 border-2 transition ${isCurrent
+                    ? 'bg-indigo-50 border-indigo-400'
+                    : 'bg-gray-50 border-gray-200 hover:border-indigo-300'
+                    }`}
                 >
                   <div className="text-center">
                     <div className="text-3xl font-bold text-gray-900 mb-1">
@@ -484,18 +489,6 @@ export default async function ResultPage({ searchParams }: PageProps) {
               );
             })}
           </div>
-
-          <div className="mt-6 p-4 bg-indigo-50 rounded-xl">
-            <p className="text-sm text-gray-700 mb-2">
-              <strong className="text-indigo-600">대운(大運):</strong> 10년 단위로 변화하는 큰 운의 흐름입니다.
-              각 대운마다 삶의 방향과 환경이 달라질 수 있으므로, 현재 대운의 특성을 이해하고 활용하는 것이 중요합니다.
-            </p>
-            {daeunList.length > 0 && (
-              <p className="text-xs text-gray-600">
-                * 대운은 생일부터 다음 절기까지의 일수를 기준으로 {daeunList[0].age}세부터 시작됩니다. (3일 = 1세)
-              </p>
-            )}
-          </div>
         </div>
 
         {/* 추가 기능 버튼 */}
@@ -535,7 +528,7 @@ export default async function ResultPage({ searchParams }: PageProps) {
       <footer className="bg-gray-900 text-white py-12 px-4 mt-20">
         <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">
             쟁승메이드가 제공하는 무료 사주 서비스

app/result/saved/[id]/SavedInterpretation.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { AccordionItem, parseSections, SECTION_ICONS } from '@/components/AccordionItem';
+
+export default function SavedInterpretation({ interpretation }: { interpretation: string }) {
+    const sections = parseSections(interpretation);
+
+    if (sections.length > 0) {
+        return (
+            <div className="space-y-3">
+                {sections.map((section, idx) => (
+                    <AccordionItem
+                        key={idx}
+                        title={section.title}
+                        content={section.content}
+                        icon={SECTION_ICONS[idx] || '📌'}
+                        defaultOpen={idx === 0}
+                    />
+                ))}
+            </div>
+        );
+    }
+
+    return (
+        <article className="prose prose-lg max-w-none prose-indigo">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                {interpretation}
+            </ReactMarkdown>
+        </article>
+    );
+}

app/result/saved/[id]/page.tsx

@@ -0,0 +1,78 @@
+
+import Link from 'next/link';
+import { createClient } from '@/lib/supabase/server';
+import SavedInterpretation from './SavedInterpretation';
+
+interface PageProps {
+    params: Promise<{ id: string }>;
+}
+
+export default async function SavedResultPage({ params }: PageProps) {
+    const { id } = await params;
+    const supabase = await createClient();
+
+    // 인증된 사용자의 쿠키를 사용하여 RLS 통과
+    const { data: record, error } = await supabase
+        .from('saju_records')
+        .select('*')
+        .eq('id', id)
+        .single();
+
+    if (error || !record) {
+        return (
+            <div className="min-h-screen flex flex-col items-center justify-center p-4">
+                <h1 className="text-2xl font-bold text-red-600 mb-4">기록을 찾을 수 없습니다.</h1>
+                <p className="text-gray-500 mb-4">로그인이 필요하거나 삭제된 기록일 수 있습니다.</p>
+                <div className="flex gap-4">
+                    <Link href="/login" className="text-indigo-600 hover:underline">로그인</Link>
+                    <Link href="/mypage" className="text-indigo-600 hover:underline">마이페이지</Link>
+                    <Link href="/" className="text-indigo-600 hover:underline">홈으로</Link>
+                </div>
+            </div>
+        );
+    }
+
+    const { saju_data, interpretation } = record;
+    const date = new Date(record.created_at).toLocaleDateString();
+
+    return (
+        <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+            <div className="max-w-4xl mx-auto">
+                <div className="text-center mb-12">
+                    <span className="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm font-semibold mb-4">
+                        {date} 저장됨
+                    </span>
+                    <h1 className="text-3xl font-bold text-gray-900">저장된 사주 결과</h1>
+                    <p className="mt-2 text-gray-600">
+                        {saju_data.birthDate.year}년 {saju_data.birthDate.month}월 {saju_data.birthDate.day}일생
+                    </p>
+                </div>
+
+                <div className="bg-white rounded-3xl shadow-xl p-6 md:p-10 mb-8">
+                    <SavedInterpretation interpretation={interpretation} />
+                </div>
+
+                <div className="text-center flex flex-wrap justify-center gap-4">
+                    <Link
+                        href="/"
+                        className="px-6 py-3 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition font-medium"
+                    >
+                        홈으로
+                    </Link>
+                    <Link
+                        href="/mypage"
+                        className="px-6 py-3 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition font-medium"
+                    >
+                        목록으로
+                    </Link>
+                    <Link
+                        href="/saju"
+                        className="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition font-medium"
+                    >
+                        새로운 사주 보기
+                    </Link>
+                </div>
+            </div>
+        </div>
+    );
+}