// pages.jsx — 페이지별 컴포넌트 const SD = window.SajuData; // ───────────────────────────────────────────── // 홈 — 오늘의 일주 + 오늘의 블로그 글 // ───────────────────────────────────────────── function HomePage({ setRoute }) { const todayP = useMemo(() => { const t = Saju.todayPillar(); return Saju.pillarInfo(t.stem, t.branch); }, []); const today = new Date(); const post = BlogPosts[0]; const otherPosts = BlogPosts.slice(1, 4); const todayInfo = SD.CHEONGAN_INFO[todayP.stem]; return (
{/* 헤로 — 오늘의 글 + 오늘의 일진 */}
{/* 오늘의 글 */}
오늘의 글 · 今日之文

{post.title}

{post.subtitle}

{fmtDate(post.date)} · {post.readMin}분 읽기 {post.tag}
{/* 오늘의 일진 — 작은 카드 */}
{/* 더 읽기 — 최근 글 */}
지난 글 · 過去之文
{otherPosts.map(p => (
setRoute({ name: 'post', id: p.id })}>
{p.tag} {fmtDateShort(p.date)}

{p.title}

{p.subtitle}

))}
{/* CTA */}
萬歲曆

내 사주, 네 기둥으로 펼쳐 보기

생년월일시를 입력하면 천간과 지지로 이루어진 여덟 글자가 펼쳐집니다.

); } // ───────────────────────────────────────────── // 만세력 페이지 — 입력 + 4주표 // ───────────────────────────────────────────── function ManseryeokPage() { const [form, setForm] = useState({ year: 1990, month: 5, day: 22, hour: 14, minute: 30, gender: 'male' }); const [showResult, setShowResult] = useState(true); const saju = useMemo(() => { return Saju.computeSaju(form.year, form.month, form.day, form.hour, form.minute); }, [form]); // 오행 통계 const stats = useMemo(() => { const counts = { 목: 0, 화: 0, 토: 0, 금: 0, 수: 0 }; ['year','month','day','hour'].forEach(k => { counts[saju[k].stemElement]++; counts[saju[k].branchElement]++; }); return counts; }, [saju]); const update = (k, v) => setForm(f => ({ ...f, [k]: v })); return (
만세력 · 萬歲曆

여덟 글자로 펼치는 네 기둥

태어난 연·월·일·시를 입력하면 오른쪽부터 왼쪽으로 — 년주·월주·일주·시주가 자리 잡습니다.

update('year', +e.target.value)} />
update('month', +e.target.value)} />
update('day', +e.target.value)} />
update('hour', +e.target.value)} />
update('minute', +e.target.value)} />
* 절기 기준 근사 계산. 정확한 자시(子時) 구분과 시간대 보정은 적용되지 않습니다.
{showResult && ( <>
생년월일시 {form.year}.{String(form.month).padStart(2,'0')}.{String(form.day).padStart(2,'0')} {String(form.hour).padStart(2,'0')}:{String(form.minute).padStart(2,'0')}
일주 {saju.day.label} · {saju.day.labelHJ}
일간 {saju.day.stem}({saju.day.stemHJ}) {saju.day.stemElement}{saju.day.stemYY}
{/* 오행 분포 */}
OHAENG · 五行 분포
{Object.entries(stats).map(([el, n]) => (
{elHJ(el)}
{el}
{n}/8
))}
{/* 일주 해설 */}
일주론 · {saju.day.label}

나의 일주는 {saju.day.label}({saju.day.labelHJ})입니다

{SD.ILJU_KEYWORDS[saju.day.label]}

일간 {saju.day.stem}({saju.day.stemHJ}) — {SD.CHEONGAN_INFO[saju.day.stem].character}
)}
); } // ───────────────────────────────────────────── // 천간·일주 — 천간 10개 그리드 → 클릭하면 그 천간의 일주 6개 // ───────────────────────────────────────────── function CheonganPage({ initialStem, setRoute }) { const [stem, setStem] = useState(initialStem || '갑'); const info = SD.CHEONGAN_INFO[stem]; const stemIdx = Saju.STEMS.indexOf(stem); const ilju = useMemo(() => Saju.iljuByStem(stemIdx), [stemIdx]); return (
천간·일주 · 天干日柱

하늘의 열 글자, 그리고 그 일주들

천간 한 글자를 누르면 그 천간을 일간으로 하는 여섯 개의 일주가 펼쳐집니다.

{/* 10개 그리드 */}
{Saju.STEMS.map(s => ( setStem(s)} /> ))}
{/* 선택된 천간 상세 */}
선택 · 選
{info.hj}
{stem}
{info.element}({elHJ(info.element)}) · {info.yy}
SYMBOL · 物象
{info.symbol}
{info.symbolDetail}
KEYWORDS · 性
{info.keywords.map(k => ( {k} ))}

{info.character}

STRENGTH · 長
{info.strength}
WEAKNESS · 短
{info.weakness}
{/* 6개 일주 */}
{stem}({info.hj}) 일주 · 六十甲子 中

{stem}이 일간인 여섯 개의 일주

총 6개
{ilju.map(p => ( ))}
); } // ───────────────────────────────────────────── // 블로그 목록 // ───────────────────────────────────────────── function BlogListPage({ setRoute }) { return (
글 · 日誌

매일 한 편씩 쌓이는 사주 이야기

입문자를 위한 짧은 글들. 매일 한 편씩 천천히 읽어 보세요.

{BlogPosts.map(p => (
setRoute({ name: 'post', id: p.id })}>
{p.tag} {fmtDate(p.date)} · {p.readMin}분

{p.title}

{p.subtitle}

{p.title.match(/[\u4e00-\u9fff]/g)?.[0] || '命'}
))}
); } // ───────────────────────────────────────────── // 블로그 상세 // ───────────────────────────────────────────── function PostDetailPage({ id, setRoute }) { const post = BlogPosts.find(p => p.id === id) || BlogPosts[0]; return (
{post.tag} {fmtDate(post.date)} · {post.readMin}분 읽기

{post.title}

{post.subtitle}
{post.hero}
{post.body.map((b, i) => { if (b.type === 'h') return

{b.text}

; if (b.type === 'q') return
{b.text}
; return

{b.text}

; })}
紫
{post.author}
Purplica · 매일 한 편
); } Object.assign(window, { HomePage, ManseryeokPage, CheonganPage, BlogListPage, PostDetailPage });