PART 5 — 운세 화면: 만세력·명반·별자리·타로·꿈해몽

[프롬프트]
온보딩에서 받은 생년월일시로 만세력 화면을 만들어 주세요.

데이터: POST /api/float/manseryeok (이미 만든 프록시 경유)
요청 body: manseryeokBody(profile) + requestId = { year, month, day, hour?, minute?, timezone: "Asia/Seoul", gender, requestId }
   ※ timezone 은 만세력에만 있는 필드다. 상담(reading·reading/memory)에 이 객체를 그대로 재사용하면 FLOAT가 400("property timezone should not exist")을 돌려준다 — 상담은 lib/api.ts 의 readingBody() 로 따로 만든다
   ※ requestId 는 lib/api.ts 의 newRequestId() 로 이 조회 1회에 한 번만 만들고, 재시도 시 같은 값을 다시 보낸다 (없으면 프록시가 400). 아래 📄 lib/api.ts(get-book-code 가 만든 파일)의 callProxy 로 호출
   ※ 시간 모름이면 hour·minute 키를 아예 빼고 보내 주세요(12:00을 앱에서 채워 보내지 말 것 (정오 대체 없음))
응답은 { success, data } 형태이고 실제 데이터는 data 안에 있어요.

화면 요구사항 (아래 📄 4파일(get-book-code 가 만든 파일)을 그대로 쓰고, 결정서의 "만세력 표시 깊이"에 맞춰 쓴다 — 특정 폴더 구조를 강제하지 않으니 기존 프로젝트의 lib/·components/ 자리에 맞춰 넣는다):
1. API 응답은 화면에서 직접 읽지 않는다. lib/manseryeok.normalize.ts 의 normalizeManseryeok(raw) 로 먼저 정규화하고, 그 결과(ManseryeokView)만 components/ManseryeokDetail.tsx 에 넘긴다. 응답의 특정 필드가 항상 있다고 가정하지 말 것 — 없는 값은 null/[] 이고, 화면은 그 섹션을 생략하거나 "계산 정보 없음 / 해당 없음" 한 줄만 보여준다. 값을 지어내지 않는다
2. 요약(항상 표시): 4기둥 큰 한자(세로) + 한글 + 오행색 테두리, 오행 분포 바, 일간 한 줄 요약, 현재 대운. 디자인 토큰(색·간격)은 앱 것을 그대로 쓴다 — 카드를 무더기로 늘어놓지 말 것
3. 상세(펼쳐보기, <details>): 원국 각 주의 한글·한자·오행·천간/지지 십신·지장간·12운성·납음·주요/보조 신살(표), 용신/조후/억부·통관·병약, 신강약 result/level/score/breakdown/통근, 격국 상세(핵심·직업·성격·과제), 합충형해(천간합·천간충·반합투간·합작용·지지관계), 대운 전체(현재 강조), 세운, 공망(년주/일주 기준 발현), 천을귀인, 월령, 천간론, 허자, 오행 변수 — 응답에 실제로 있는 만큼만. 결정서가 "간단 요약"이면 상세 섹션을 렌더하지 않는다
4. 시간을 모르는 사용자는 hour·minute 키 자체를 요청에서 뺀다(12:00 을 앱이 대신 채워 보내지 말 것). 응답은 hour 가 null, birthHour.known=false, birthHour.basis="three_pillars" 이다. 용신·신강약·격국·세운·일간요약은 빠지지 않고 년·월·일 3주(6글자) 기준 값으로 온다(birthHour.excludedFields 는 항상 빈 배열 — 시간 미상 판별은 birthHour.known 으로만). 화면은 시주 자리에 "출생시간을 알려주면 시주까지 볼 수 있어요" 안내, 분석 섹션은 그대로 그리고 요약에 "출생시간을 모르면 시주를 뺀 년·월·일 6글자로 계산해요" 한 줄. 시주 추정값·정오 참고값을 만들지 않는다
5. 접근성·반응형: h2(만세력) → h3(섹션) → h4(하위) 위계, 표에는 caption·th scope, 펼침은 키보드로 열림. 390px 폭에서 기둥은 2열로 접히고 표만 내부 가로 스크롤, 페이지 본문의 가로 넘침 0. 데스크톱에서는 기둥 4개 한 줄
6. 타입: any 금지. lib/manseryeok.types.ts 의 명시 타입만 쓴다
완료 기준 (전부 실제로 실행해 증명):
- npx vitest run tests/manseryeok.test.tsx 통과 (시간 있음 / 시간 미상 / 중첩 불완전 픽스처 6개)
- 1990-03-15 08:30 male 로 실제 호출 → 요약 + 상세 섹션 7개가 펼쳐지고, 원국 상세 표의 십신·지장간·12운성·납음·신살, 용신·신강약 score·격국 상세, 합충, 대운 전체(현재 강조), 세운, 공망·천을귀인, 허자·오행 변수 값이 응답 JSON 과 일치(개발자도구 Network 의 data 와 눈으로 대조)
- 시간 모름(hour 생략)으로 호출 → 응답 wonkuk.hour === null, birthHour.known === false. 시주 자리에 안내 카드, 용신·신강약·격국·세운은 3주 기준 값으로 표시되고 "출생시간을 모르면 시주를 뺀 년·월·일 6글자로 계산해요" 안내가 보임, 화면 어디에도 undefined/null/NaN 텍스트 없음
- 390px(모바일)·1280px(데스크톱)에서 document.documentElement.scrollWidth === clientWidth (가로 넘침 0), 표는 내부에서만 가로 스크롤, 상세 섹션이 키보드 Enter 로 열림
- 스크린샷 4장: 시간 있음 요약 / 시간 있음 상세 펼침 / 시간 미상 / 390px

[프롬프트]
자미두수 명반 화면을 만들어 주세요. 아래 코드 파일 세 개(lib/ziwei.ts · components/ZiweiChart.tsx · tests/ziwei.test.tsx)와 components/Fortune.module.css 는 get-book-code 가 이미 만들었다 — 고쳐 쓰지 말고 그대로 쓴다. 화면 파일(app/page.tsx)에는 <ZiweiChart profile={원국} /> 와 상담 <Chat profile={원국} topic={{ only: 'ziwei' }} /> 를 놓는다.

데이터: POST /api/float/ziwei-chart (이미 만든 프록시 경유 — lib/api.ts 의 callProxy, requestId 필수)
요청 body: ziweiBody(원국) = { year, month, day, hour, minute, gender, referenceDate: "이달 1일" } — hour 가 없으면 ziweiBody 가 null 을 돌려주고 화면은 부르지 않는다
응답 data: { chart: { solarDate, lunarDate, yearGanzhi, fiveElementsClass, soulPalaceBranch, bodyPalaceBranch, palaces[12], mutagens[], currentDecadal, yearly, yearBasisNote }, notes: { lateZiNotice, approximateTimeNote }, clock, referenceDate, lang }
   palaces[] 하나 = { key(ming·siblings·…), label(명궁 …), branch{key,label}, stem{key,label}, isBodyPalace, majorStars[], minorStars[], decadal{from,to,isCurrent} }
   별 하나 = { key, label, brightness{key,label}|null, mutagen{key,label}|null }

화면 요구사항 (components/ZiweiChart.tsx 가 이미 지키는 것 — 디자인을 바꿀 때 깨지 말 것):
1. 응답은 lib/ziwei.ts 의 normalizeZiwei(raw) 로 먼저 정규화하고 그 결과(ZiweiView)만 그린다. 없는 값은 빼고, 값을 지어내지 않는다
2. 넓은 화면은 전통 4×4 판(사·오·미·신 / 진·유 / 묘·술 / 인·축·자·해, 가운데 2×2 = 요약), 좁은 화면(640px 미만)은 12궁 목록
3. 궁마다 궁 이름·천간지지·주성(밝기·사화)·보조성·대한 나이. 명궁·신궁·지금 대한·올해 유년은 배지로 표시
4. 가운데 요약: 오행국 · 생년 간지 · 양력/음력 · 명궁/신궁 지지 · 생년사화 4개 · 지금 대한 · 올해 유년. notes 의 안내 문구는 판 아래 그대로
5. 시각이 없는 원국: 명반 대신 안내 한 줄(부르지 않는다). 상담도 띄우지 않는다 — 자미두수 상담은 시각이 있어야 한다
완료 기준 (전부 실제로 실행해 증명):
- npx vitest run tests/ziwei.test.tsx 통과
- 1990-05-15 14:30 여성으로 실제 호출 → 12궁이 모두 보이고, 명궁 주성·생년사화·지금 대한이 응답 JSON(개발자도구 Network 의 data)과 같다
- 시각 모름 원국 → Network 에 ziwei-chart 호출이 없고 안내 한 줄만 보인다. 화면 어디에도 undefined·null·NaN 이 없다
- 390px·1280px 에서 document.documentElement.scrollWidth === clientWidth (가로 넘침 0)
- 스크린샷 3장: 1280px 판 / 390px 목록 / 시각 모름 안내

[프롬프트]
나의 별자리(네이탈 차트) 화면을 만들어 주세요. 아래 코드 파일 세 개(lib/natal.ts · components/NatalChart.tsx · tests/natal.test.tsx)와 components/Fortune.module.css 는 get-book-code 가 이미 만들었다 — 고쳐 쓰지 말고 그대로 쓴다. 화면 파일(app/page.tsx)에는 <NatalChart profile={원국} /> 와 상담 <Chat profile={원국} topic={{ only: 'astro' }} /> 를 놓는다.

데이터: POST /api/float/astrology (점성술 토탈, 프록시 경유 — callProxy, requestId 필수)
요청 body: natalBody(원국, 도시) = { birthDate: "YYYY-MM-DD", houseSystems: ["placidus"], birthTime?: "HH:mm", birthTimePrecision?: "exact", birthLatitude?, birthLongitude? }
   시각을 모르면 birthDate·houseSystems 만 보낸다. 좌표는 시각과 도시가 둘 다 있을 때만 넣는다(좌표만으로는 상승궁이 나오지 않는다)
응답 data: { natal: { bodies[10], angles|null, anglesOmitted, houses, aspects, dignities, features, moonSignUncertain }, readings: { dignities[], aspects[] }, readingsUnavailable, costPoints: 50 }
   천체 하나 = { id(Sun~Pluto), sign, signName(한글 별자리), degreeInSign(0~30), house: { placidus: 1~12 }, retrograde, dignities }
   angles = { ascSign, mcSign, … } — 각각 { sign, signName, degreeInSign } · 풀이 문단 하나 = { key, text, lang }

화면 요구사항 (components/NatalChart.tsx 가 이미 지키는 것):
1. 응답은 lib/natal.ts 의 normalizeNatal(raw) 로 먼저 정규화하고 그 결과(NatalView)만 그린다
2. 맨 위 한 줄: 태양·달·상승궁 별자리. 아래 표: 천체·별자리·도수·하우스 — 10개 천체 + 상승궁·중천(있을 때) (표에는 caption·th scope)
3. 상승궁이 없으면 이유를 사람 말로: 시각이 없으면 "태어난 시각을 넣으면 상승궁도 볼 수 있어요", 시각은 있는데 도시를 안 골랐으면 "태어난 도시를 고르면". anglesOmitted(영문)은 화면에 그대로 내지 않는다
4. 도시 고르기는 시각이 있는 원국에서만 보이고, 고른 도시는 이 브라우저에 기억한다
5. 표 아래 "풀이": readings 의 문단(품위 → 애스펙트 순) 목록. readingsUnavailable 이면 "불러오지 못했어요", 문단이 없으면 상담으로 안내
완료 기준 (전부 실제로 실행해 증명):
- npx vitest run tests/natal.test.tsx 통과
- 1990-05-15 12:00 + 서울로 실제 호출 → 10개 천체·상승궁·중천·풀이 문단이 응답 JSON(Network 의 data)과 같다
- 시각 모름 원국 → 상승궁 없이 안내 문구, 화면 어디에도 undefined·null·NaN 이 없다
- 390px·1280px 가로 넘침 0 (표만 내부 가로 스크롤)

[프롬프트]
타로 뽑기 화면을 만들어 주세요. 아래 코드 파일 세 개(lib/tarot.ts · components/TarotDraw.tsx · tests/tarot.test.tsx)와 components/Fortune.module.css 는 get-book-code 가 이미 만들었다 — 고쳐 쓰지 말고 그대로 쓴다. 화면 파일(app/page.tsx)에는 <TarotDraw onDrawn={setTopic} /> 를 놓고, 한 번 뽑은 뒤에만 상담 <Chat key={JSON.stringify(topic)} profile={null} topic={topic} /> 을 띄운다(topic = { only: 'tarot', tarot: { spread, seed } } — 뽑을 때마다 새 상담 화면).

데이터: POST /api/float/tarot (프록시 경유 — callProxy, requestId 필수)
요청 body: tarotBody(spread, seed, 질문?) = { spread, seed, question? } — seed 는 뽑을 때마다 새로(newRequestId()), 질문은 적었을 때만(500자까지)
응답 data: { lang, count, spread: { type, name, description, positions[] } | null, reversedAllowed, seed, cards[], cardBackUrl, question, costPoints }
   카드 하나 = { position(1부터), positionLabel(스프레드 자리 이름|null), id, name, nameEn, arcana, reversed, keywords[], meaning, imageUrl }

화면 요구사항 (components/TarotDraw.tsx 가 이미 지키는 것):
1. 스프레드 버튼 다섯 개(장수 표시) + 질문 입력(선택) + "카드 뽑기". 뽑는 동안 버튼 비활성화(두 번 눌러 두 번 과금되지 않게)
2. 응답은 lib/tarot.ts 의 normalizeTarot(raw) 로 먼저 정규화한다. 이미지 주소는 https 만 쓴다(그 밖의 주소는 버린다)
3. 카드마다 자리 이름·카드 이름·역방향 여부·키워드·뜻. 역방향 카드 이미지는 180도 돌린다. 이미지에는 카드 이름이 든 alt
4. 뽑은 뒤 onDrawn({ only: 'tarot', tarot: { spread, seed } }) — 상담은 이 seed 로 같은 카드를 읽는다
완료 기준 (전부 실제로 실행해 증명):
- npx vitest run tests/tarot.test.tsx 통과
- 과거·현재·미래로 실제 호출 → 카드 3장이 자리 이름과 함께 보이고, 역방향 카드는 이미지가 뒤집혀 있다. 이름·뜻이 응답 JSON 과 같다
- 뽑은 뒤 상담에 "이 카드들로 봐 주세요" → 답변이 화면의 카드 이름을 말한다(같은 seed 라 같은 카드)
- 390px·1280px 가로 넘침 0

[프롬프트]
꿈해몽 화면을 만들어 주세요. 아래 코드 파일 세 개(lib/dream.ts · components/DreamSearch.tsx · tests/dream.test.tsx)와 components/Fortune.module.css 는 get-book-code 가 이미 만들었다 — 고쳐 쓰지 말고 그대로 쓴다. 화면 파일(app/page.tsx)에는 <DreamSearch onSearched={setTopic} /> 를 놓고, 한 번 찾은 뒤에만 상담 <Chat key={JSON.stringify(topic)} profile={null} topic={topic} /> 을 띄운다(topic = { only: 'dream', dream: 꿈 이야기 }).

데이터: POST /api/float/dream (프록시 경유 — callProxy, requestId 필수)
요청 body: dreamBody(꿈, 감정?) = { dream, feeling? } — 앞뒤 공백을 지우고 1,000자·300자까지
응답 data: { lang: "ko", mode, items: [{ keywords: 상징 낱말[], score }], llm?: { status, report } }

화면 요구사항 (components/DreamSearch.tsx 가 이미 지키는 것):
1. 꿈 입력(필수, 1,000자) + 감정 입력(선택, 300자) + "해몽 찾기". 찾는 동안 버튼 비활성화
2. 응답은 lib/dream.ts 의 normalizeDream(raw) 로 먼저 정규화한다
3. 찾은 상징 낱말을 칩으로 한 번씩 보이고, "관련 상징" 목록(낱말 · 관련도 %)은 관련도가 가장 높은 항목을 강조해 처음 8개만 보인다. 나머지는 "더 보기"
4. 하나도 못 찾으면 오류가 아니라 "꿈에서 상징을 찾지 못했어요" 한 줄(요금 0원). 풀이 문장은 응답에 llm.report(status ok)가 있을 때만 보이고, 없으면 "상징이 무슨 뜻인지는 아래 상담에서 AI 에게 물어보세요" 안내 한 줄
5. 찾은 뒤 onSearched({ only: 'dream', dream }) — 상담은 같은 꿈 이야기로 꿈해몽 AI 에게 묻는다
완료 기준 (전부 실제로 실행해 증명):
- npx vitest run tests/dream.test.tsx 통과
- "큰 뱀이 집 안으로 들어와 물을 마셨어"로 실제 호출 → 화면의 상징 낱말·관련도가 응답 JSON 의 keywords·score 와 같다
- 아무 뜻 없는 글자로 호출 → 안내 한 줄, 콘솔 사용량에 ₩0
- 390px·1280px 가로 넘침 0