Claude

대화형 MBTI 테스트

2026.05.12

프롬프트 소개

인터렉티브한 MBTI 테스트를 할 수 있는 프롬프트입니다.
클로드 API와 연결되어 있기 때문에 다른 LLM 에서 돌리면 조금 수정하셔야 할 수도 있습니다.

카드뉴스 형태로 출력됩니다.

결과에 있는 주소를 검색창에 넣고 실행시키세요.

프롬프트 실행환경

Claude

프롬프트

import { useState, useEffect, useRef } from "react";

const QUESTIONS_BY_THEME = {
fantasy: [
{
q: "던전 입구에 도착했다. 당신의 첫 행동은?",
a: "지도를 펼쳐 구조를 분석한다",
b: "일단 들어가본다, 느낌이 좋으니까!",
dim: "EI",
},
{
q: "마법사가 두 가지 능력 중 하나를 준다면?",
a: "미래를 볼 수 있는 예지력",
b: "과거를 바꿀 수 있는 시간여행",
dim: "SN",
},
{
q: "파티원이 실수로 함정을 밟았다!",
a: "왜 조심하지 않았는지 논리적으로 따진다",
b: "일단 괜찮냐고 걱정부터 한다",
dim: "TF",
},
{
q: "보물 상자 두 개, 하나만 열 수 있다.",
a: "단서를 모아 확실한 것을 연다",
b: "직감으로 고른다, 운명을 믿어!",
dim: "JP",
},
{
q: "용을 만났다! 당신의 선택은?",
a: "혼자서 전략을 세워 도전한다",
b: "동료들과 힘을 합쳐 싸운다",
dim: "EI",
},
{
q: "마법의 숲에서 길을 잃었다면?",
a: "이끼 방향, 별자리 등 현실적 단서를 찾는다",
b: "숲이 보내는 신비로운 기운을 느끼며 걷는다",
dim: "SN",
},
{
q: "동료가 위험한 계획을 세웠다!",
a: "성공 확률을 계산해서 판단한다",
b: "동료의 열정과 진심에 마음이 기운다",
dim: "TF",
},
{
q: "퀘스트 보상을 받을 시간!",
a: "미리 계획한 장비를 구매한다",
b: "그때 기분에 따라 쇼핑을 즐긴다",
dim: "JP",
},
{
q: "마왕 앞에서 최후의 한마디를 한다면?",
a: "조용히 검을 들어 행동으로 보여준다",
b: "동료들에게 연설하며 사기를 높인다",
dim: "EI",
},
{
q: "전설의 무기 vs 전설의 방어구?",
a: "확실한 방어로 생존을 택한다",
b: "강력한 공격으로 가능성에 베팅한다",
dim: "SN",
},
],
daily: [
{
q: "갑자기 생긴 공짜 하루, 어떻게 보내겠어?",
a: "집에서 혼자만의 시간을 즐긴다",
b: "친구에게 연락해서 어디든 나간다",
dim: "EI",
},
{
q: "카페에서 주문할 때 당신은?",
a: "늘 먹던 검증된 메뉴를 고른다",
b: "신메뉴가 있으면 일단 도전한다",
dim: "SN",
},
{
q: "친구가 심각한 고민을 털어놓았다!",
a: "해결책과 현실적 조언을 해준다",
b: "일단 공감하고 옆에 있어준다",
dim: "TF",
},
{
q: "여행 준비 스타일은?",
a: "숙소·교통·일정을 꼼꼼히 짠다",
b: "비행기만 끊고 나머진 현지에서!",
dim: "JP",
},
{
q: "이사를 했다! 첫날 밤에?",
a: "조용히 짐 정리하며 새 공간에 적응한다",
b: "이웃에게 인사하거나 동네 탐험을 나선다",
dim: "EI",
},
{
q: "마트에서 장보기 스타일은?",
a: "리스트를 보며 필요한 것만 산다",
b: "돌아다니다 끌리는 걸 담는다",
dim: "SN",
},
{
q: "팀 프로젝트에서 갈등이 생기면?",
a: "객관적 기준으로 최선의 방안을 따진다",
b: "팀원들 감정을 먼저 살핀다",
dim: "TF",
},
{
q: "알람 스타일은?",
a: "여유 있게 여러 개 맞춰두고 계획대로 일어난다",
b: "알람은 일단 끄고… 몸이 알아서 일어난다",
dim: "JP",
},
{
q: "sns에 올리는 스타일은?",
a: "잘 찍은 사진을 엄선해서 가끔 올린다",
b: "일상을 실시간으로 공유하는 편이다",
dim: "EI",
},
{
q: "요리할 때 당신은?",
a: "레시피를 정확히 따른다",
b: "대충 감으로 넣는다, 그게 맛있어!",
dim: "SN",
},
],
island: [
{
q: "무인도에 떨어졌다! 첫 반응은?",
a: "주변을 관찰하며 생존 전략을 세운다",
b: "누군가 있는지 소리쳐서 찾아본다",
dim: "EI",
},
{
q: "식량을 구해야 한다면?",
a: "안전한 열매와 물부터 확보한다",
b: "낚시나 사냥 등 새로운 방법을 시도한다",
dim: "SN",
},
{
q: "표류자 한 명을 발견! 그런데 수상하다.",
a: "상황을 분석하고 신뢰 여부를 판단한다",
b: "어쨌든 사람이니 함께 지내자고 한다",
dim: "TF",
},
{
q: "탈출용 뗏목 만들기!",
a: "설계도를 그리고 순서대로 만든다",
b: "일단 재료 모으면서 되는대로 만든다",
dim: "JP",
},
{
q: "밤이 되었다. 당신은?",
a: "혼자 모닥불 옆에서 생각에 잠긴다",
b: "동료와 이야기하며 밤을 보낸다",
dim: "EI",
},
{
q: "섬 반대편에 신비로운 동굴이 있다는 소문!",
a: "위험할 수 있으니 준비부터 한다",
b: "호기심을 참을 수 없다, 당장 탐험!",
dim: "SN",
},
{
q: "식량이 부족한데 동료가 아프다!",
a: "공평하게 나누는 게 장기적으로 옳다",
b: "아픈 사람에게 더 많이 준다",
dim: "TF",
},
{
q: "구조 신호를 보내는 방법은?",
a: "매일 정해진 시간에 규칙적으로 보낸다",
b: "배가 보일 때마다 즉흥적으로 대응한다",
dim: "JP",
},
{
q: "드디어 구조선 발견! 그런데 방향이 애매하다.",
a: "조류와 바람을 계산해서 최적 루트로 간다",
b: "저 배가 우릴 보면 올 거야, 기다리자",
dim: "EI",
},
{
q: "구조 후 인터뷰에서 한마디!",
a: "생존에 필요했던 기술과 전략을 설명한다",
b: "함께한 사람들 덕분이라고 감사를 전한다",
dim: "TF",
},
],
office: [
{
q: "월요일 아침 출근, 당신의 모습은?",
a: "이어폰 끼고 조용히 자리에 앉는다",
b: "동료들에게 주말 어땠냐고 인사한다",
dim: "EI",
},
{
q: "새 프로젝트가 시작됐다!",
a: "기존 데이터와 사례를 먼저 조사한다",
b: "새로운 접근법을 브레인스토밍한다",
dim: "SN",
},
{
q: "동료가 업무 실수를 했는데 상사가 모른다!",
a: "팀 성과를 위해 알려야 한다고 판단한다",
b: "동료 입장을 생각해서 몰래 도와준다",
dim: "TF",
},
{
q: "마감이 일주일 남았다! 스타일은?",
a: "D-7부터 매일 할 분량을 나눠 진행한다",
b: "아이디어가 떠오를 때 몰아서 한다",
dim: "JP",
},
{
q: "점심시간, 당신의 선택은?",
a: "혼밥하며 잠깐 리셋 타임을 갖는다",
b: "팀원들과 함께 먹으러 간다",
dim: "EI",
},
{
q: "회의에서 의견 대립!",
a: "데이터와 근거를 제시하며 설득한다",
b: "분위기를 살피며 중재안을 제안한다",
dim: "TF",
},
{
q: "업무 보고서 작성 스타일은?",
a: "팩트 중심으로 깔끔하게 정리한다",
b: "스토리텔링으로 맥락을 풍부하게 한다",
dim: "SN",
},
{
q: "갑자기 오후에 일정이 비었다!",
a: "밀린 업무를 처리하거나 정리한다",
b: "예상 못한 여유를 즐기며 새로운 걸 시도한다",
dim: "JP",
},
{
q: "퇴근 후 팀 회식에 초대받았다!",
a: "적당히 참석하고 일찍 빠진다",
b: "분위기 메이커로 끝까지 함께한다",
dim: "EI",
},
{
q: "승진 기회! 어떤 포지션을 원해?",
a: "전문성을 깊이 파는 스페셜리스트",
b: "다양한 분야를 넘나드는 제너럴리스트",
dim: "SN",
},
],
};

const THEME_MAP = {
fantasy: { label: "판타지 세계관", emoji: "\u{1F409}", gradient: "linear-gradient(135deg, #1a0533 0%, #2d1b69 40%, #0f1b3d 100%)" },
daily: { label: "일상생활", emoji: "\u2615", gradient: "linear-gradient(135deg, #1a1714 0%, #2a2118 40%, #1e1915 100%)" },
island: { label: "무인도 생존기", emoji: "\u{1F3DD}\uFE0F", gradient: "linear-gradient(135deg, #0a2e38 0%, #134e5e 40%, #0b3d2e 100%)" },
office: { label: "회사 생활", emoji: "\u{1F4BC}", gradient: "linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%)" },
};

const PURPOSE_OPTIONS = [
{ id: 1, label: "진짜 성격과 자아 탐구", emoji: "\u{1F50D}" },
{ id: 2, label: "연애 스타일과 이상형 파악", emoji: "\u{1F495}" },
{ id: 3, label: "진로 및 업무 성향 분석", emoji: "\u{1F4BC}" },
{ id: 4, label: "대인관계 궁합 확인", emoji: "\u{1F91D}" },
{ id: 5, label: "심심풀이 가벼운 테스트", emoji: "\u{1F3AE}" },
];

const THEME_OPTIONS = [
{ id: "fantasy", label: "판타지 세계관", emoji: "\u{1F409}" },
{ id: "daily", label: "일상생활", emoji: "\u2615" },
{ id: "island", label: "무인도 생존기", emoji: "\u{1F3DD}\uFE0F" },
{ id: "office", label: "회사 생활", emoji: "\u{1F4BC}" },
];

const SPECIAL_OPTIONS = [
{ id: 1, label: "귀여운 이모티콘 듬뿍", emoji: "\u{1F970}" },
{ id: 2, label: "뼈 때리는 팩트 분석", emoji: "\u{1F480}" },
{ id: 3, label: "따뜻한 공감과 위로", emoji: "\u{1FAC2}" },
{ id: 4, label: "찰떡궁합 유명인 매칭", emoji: "\u2B50" },
{ id: 5, label: "단점 극복 방법 포함", emoji: "\u{1F4AA}" },
];

const COUNT_OPTIONS = [
{ id: 5, label: "빠르게 5문항", emoji: "\u26A1" },
{ id: 8, label: "표준 8문항", emoji: "\u{1F4DD}" },
{ id: 10, label: "정밀 10문항", emoji: "\u{1F52C}" },
];

const MBTI_DATA = {
INTJ: { nickname: "전략의 설계자", color: "#6C5CE7" },
INTP: { nickname: "논리의 탐험가", color: "#0984E3" },
ENTJ: { nickname: "대담한 지휘관", color: "#D63031" },
ENTP: { nickname: "영리한 발명가", color: "#E17055" },
INFJ: { nickname: "조용한 예언자", color: "#A29BFE" },
INFP: { nickname: "몽상의 치유자", color: "#FD79A8" },
ENFJ: { nickname: "카리스마 멘토", color: "#00B894" },
ENFP: { nickname: "열정의 스파크", color: "#FDCB6E" },
ISTJ: { nickname: "세상의 소금", color: "#636E72" },
ISFJ: { nickname: "헌신적인 수호자", color: "#81ECEC" },
ESTJ: { nickname: "엄격한 관리자", color: "#2D3436" },
ESFJ: { nickname: "사교의 달인", color: "#55EFC4" },
ISTP: { nickname: "냉철한 장인", color: "#74B9FF" },
ISFP: { nickname: "호기심 많은 예술가", color: "#FF7675" },
ESTP: { nickname: "모험을 즐기는 사업가", color: "#FAB1A0" },
ESFP: { nickname: "자유로운 연예인", color: "#FD79A8" },
};

const COMPAT = {
INTJ: { best: "ENFP", worst: "ESFP" },
INTP: { best: "ENTJ", worst: "ESFJ" },
ENTJ: { best: "INTP", worst: "ISFP" },
ENTP: { best: "INFJ", worst: "ISFJ" },
INFJ: { best: "ENTP", worst: "ESTP" },
INFP: { best: "ENFJ", worst: "ESTJ" },
ENFJ: { best: "INFP", worst: "ISTP" },
ENFP: { best: "INTJ", worst: "ISTJ" },
ISTJ: { best: "ESFP", worst: "ENFP" },
ISFJ: { best: "ESTP", worst: "ENTP" },
ESTJ: { best: "ISFP", worst: "INFP" },
ESFJ: { best: "ISTP", worst: "INTP" },
ISTP: { best: "ESFJ", worst: "ENFJ" },
ISFP: { best: "ESTJ", worst: "ENTJ" },
ESTP: { best: "ISFJ", worst: "INFJ" },
ESFP: { best: "ISTJ", worst: "INTJ" },
};

function calculateMBTI(answers) {
const scores = { EI: 0, SN: 0, TF: 0, JP: 0 };
answers.forEach((a) => {
if (a.dim && a.choice) {
scores[a.dim] += a.choice === "a" ? 1 : -1;
}
});
const E = scores.EI <= 0 ? "E" : "I";
const S = scores.SN >= 0 ? "S" : "N";
const T = scores.TF >= 0 ? "T" : "F";
const J = scores.JP >= 0 ? "J" : "P";
return E + S + T + J;
}

function ProgressBar({ current, total }) {
const pct = (current / total) * 100;
return (

style={{
width: `${pct}%`,
height: "100%",
background: "linear-gradient(90deg, #a78bfa, #c084fc)",
borderRadius: 3,
transition: "width 0.5s ease",
}}
/>

);
}

function CardShell({ children, style }) {
return (
style={{
background: "rgba(255,255,255,0.06)",
backdropFilter: "blur(20px)",
borderRadius: 24,
border: "1px solid rgba(255,255,255,0.1)",
padding: "32px 28px",
maxWidth: 480,
width: "100%",
margin: "0 auto",
boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
...style,
}}
>
{children}

);
}

function OptionButton({ children, selected, onClick, style }) {
return (
onClick={onClick}
style={{
width: "100%",
padding: "14px 18px",
borderRadius: 14,
border: selected ? "2px solid #a78bfa" : "1px solid rgba(255,255,255,0.12)",
background: selected ? "rgba(167,139,250,0.2)" : "rgba(255,255,255,0.04)",
color: "#e8e0f0",
fontSize: 15,
cursor: "pointer",
textAlign: "left",
transition: "all 0.25s ease",
fontFamily: "'Noto Sans KR', sans-serif",
...style,
}}
>
{children}

);
}

export default function MBTITest() {
const [step, setStep] = useState("welcome");
const [purpose, setPurpose] = useState(null);
const [theme, setTheme] = useState(null);
const [count, setCount] = useState(null);
const [specials, setSpecials] = useState([]);
const [qIndex, setQIndex] = useState(0);
const [answers, setAnswers] = useState([]);
const [result, setResult] = useState(null);
const [aiAnalysis, setAiAnalysis] = useState("");
const [loading, setLoading] = useState(false);
const [fadeIn, setFadeIn] = useState(true);
const containerRef = useRef(null);

const questions = theme ? (QUESTIONS_BY_THEME[theme] || []).slice(0, count || 10) : [];

const transition = (nextStep) => {
setFadeIn(false);
setTimeout(() => {
setStep(nextStep);
setFadeIn(true);
}, 300);
};

const toggleSpecial = (id) => {
setSpecials((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
};

const handleAnswer = (choice) => {
const q = questions[qIndex];
const newAnswers = [...answers, { dim: q.dim, choice }];
setAnswers(newAnswers);

if (qIndex + 1 >= questions.length) {
const mbti = calculateMBTI(newAnswers);
setResult(mbti);
transition("analyzing");
fetchAIAnalysis(mbti, newAnswers);
} else {
setFadeIn(false);
setTimeout(() => {
setQIndex(qIndex + 1);
setFadeIn(true);
}, 250);
}
};

const fetchAIAnalysis = async (mbti, ans) => {
setLoading(true);
const purposeLabel = PURPOSE_OPTIONS.find((p) => p.id === purpose)?.label || "";
const specialLabels = specials.map((s) => SPECIAL_OPTIONS.find((o) => o.id === s)?.label).filter(Boolean);
const themeLabel = THEME_MAP[theme]?.label || "";
const data = MBTI_DATA[mbti] || {};
const compat = COMPAT[mbti] || {};

const prompt = `당신은 MBTI 심리분석 전문가입니다. 아래 정보를 바탕으로 맞춤형 분석 결과를 작성하세요.

MBTI 결과: ${mbti}
별명: ${data.nickname || ""}
테스트 목적: ${purposeLabel}
테마: ${themeLabel}
특별 요청사항: ${specialLabels.join(", ") || "없음"}
최고 궁합: ${compat.best || ""} / 최악 궁합: ${compat.worst || ""}

다음 형식으로 작성하세요 (마크다운 금지, 순수 텍스트만):

[성향 분석]
테스트 목적(${purposeLabel})에 맞춰 이 유형의 핵심 성격을 3~4문장으로 분석. ${specialLabels.includes("뼈 때리는 팩트 분석") ? "솔직하고 단호한 팩트폭력 말투로." : ""} ${specialLabels.includes("따뜻한 공감과 위로") ? "따뜻하고 공감 가는 말투로." : ""} ${specialLabels.includes("귀여운 이모티콘 듬뿍") ? "이모티콘을 적극 활용해서." : ""}

[궁합 분석]
최고의 궁합 ${compat.best}와의 케미, 최악의 궁합 ${compat.worst}와 주의할 점을 각 2문장씩.

${specialLabels.includes("찰떡궁합 유명인 매칭") ? "[유명인 매칭]\n이 유형과 같은 유명인/캐릭터 2~3명을 소개하고 공통점을 짧게 설명." : ""}

${specialLabels.includes("단점 극복 방법 포함") ? "[성장 포인트]\n이 유형의 약점 1~2가지와 구체적 극복 방법." : ""}

[한줄 조언]
이 유형을 위한 인생 꿀팁 한 줄.`;

try {
const response = await fetch("https://api.anthropic.com/v1/messages", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
model: "claude-sonnet-4-20250514",
max_tokens: 1000,
messages: [{ role: "user", content: prompt }],
}),
});
const json = await response.json();
const text = json.content?.map((c) => c.text || "").join("") || "분석을 불러올 수 없었습니다.";
setAiAnalysis(text);
} catch (e) {
setAiAnalysis("AI 분석 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.");
}
setLoading(false);
transition("result");
};

const restart = () => {
setPurpose(null);
setTheme(null);
setCount(null);
setSpecials([]);
setQIndex(0);
setAnswers([]);
setResult(null);
setAiAnalysis("");
transition("welcome");
};

const bg = theme && THEME_MAP[theme] ? THEME_MAP[theme].gradient : "linear-gradient(135deg, #0f0c29 0%, #1a1040 40%, #24243e 100%)";

const renderContent = () => {
switch (step) {
case "welcome":
return (

🔮

나만의 MBTI 심리분석

당신의 숨겨진 성향을 찾아드립니다

onClick={() => transition("purpose")}
style={{
width: "100%",
padding: "16px",
borderRadius: 16,
border: "none",
background: "linear-gradient(135deg, #a78bfa, #7c3aed)",
color: "white",
fontSize: 16,
fontWeight: 700,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
boxShadow: "0 4px 20px rgba(167,139,250,0.4)",
}}
>
테스트 시작하기

);

case "purpose":
return (

STEP 1 / 4

어떤 목적으로 테스트하시나요?

{PURPOSE_OPTIONS.map((opt) => (
setPurpose(opt.id)}>
{opt.emoji}
{opt.label}

))}

{purpose && (
onClick={() => transition("theme")}
style={{
width: "100%",
marginTop: 20,
padding: "14px",
borderRadius: 14,
border: "none",
background: "linear-gradient(135deg, #a78bfa, #7c3aed)",
color: "white",
fontSize: 15,
fontWeight: 700,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
}}
>
다음으로 →

)}

);

case "theme":
return (

STEP 2 / 4

어떤 세계관으로 진행할까요?

{THEME_OPTIONS.map((opt) => (
key={opt.id}
selected={theme === opt.id}
onClick={() => setTheme(opt.id)}
style={{ textAlign: "center", padding: "20px 14px" }}
>

{opt.emoji}

{opt.label}

))}

{theme && (
onClick={() => transition("count")}
style={{
width: "100%",
marginTop: 20,
padding: "14px",
borderRadius: 14,
border: "none",
background: "linear-gradient(135deg, #a78bfa, #7c3aed)",
color: "white",
fontSize: 15,
fontWeight: 700,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
}}
>
다음으로 →

)}

);

case "count":
return (

STEP 3 / 4

질문 수를 선택하세요

{COUNT_OPTIONS.map((opt) => (
setCount(opt.id)}>
{opt.emoji}
{opt.label}

))}

{count && (
onClick={() => transition("specials")}
style={{
width: "100%",
marginTop: 20,
padding: "14px",
borderRadius: 14,
border: "none",
background: "linear-gradient(135deg, #a78bfa, #7c3aed)",
color: "white",
fontSize: 15,
fontWeight: 700,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
}}
>
다음으로 →

)}

);

case "specials":
return (

STEP 4 / 4

결과에 반영할 옵션 선택

복수 선택 가능

{SPECIAL_OPTIONS.map((opt) => (
toggleSpecial(opt.id)}>
{opt.emoji}
{opt.label}

))}

onClick={() => {
setQIndex(0);
setAnswers([]);
transition("quiz");
}}
style={{
width: "100%",
marginTop: 20,
padding: "14px",
borderRadius: 14,
border: "none",
background: "linear-gradient(135deg, #a78bfa, #7c3aed)",
color: "white",
fontSize: 15,
fontWeight: 700,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
boxShadow: "0 4px 20px rgba(167,139,250,0.4)",
}}
>
테스트 시작! 🚀

);

case "quiz":
const q = questions[qIndex];
if (!q) return null;
return (

Q{qIndex + 1} / {questions.length}

{q.q}

handleAnswer("a")} style={{ padding: "18px" }}>
A
{q.a}

handleAnswer("b")} style={{ padding: "18px" }}>
B
{q.b}

);

case "analyzing":
return (

🔮

AI가 당신을 분석 중...

답변을 종합하여 맞춤형 결과를 생성하고 있습니다

);

case "result":
const mbti = result;
const data = MBTI_DATA[mbti] || {};
const compat = COMPAT[mbti] || {};
const bestData = MBTI_DATA[compat.best] || {};
const worstData = MBTI_DATA[compat.worst] || {};

const sections = aiAnalysis.split(/\[(.+?)\]/).filter(Boolean);
const parsed = [];
for (let i = 0; i < sections.length; i += 2) {
if (sections[i + 1]) {
parsed.push({ title: sections[i].trim(), body: sections[i + 1].trim() });
}
}

return (

YOUR MBTI

style={{
fontSize: 56,
fontWeight: 900,
background: `linear-gradient(135deg, ${data.color || "#a78bfa"}, #c084fc)`,
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
fontFamily: "'Noto Sans KR', sans-serif",
letterSpacing: 6,
}}
>
{mbti}

style={{
display: "inline-block",
marginTop: 12,
padding: "8px 20px",
borderRadius: 20,
background: `rgba(${parseInt((data.color || "#a78bfa").slice(1, 3), 16)},${parseInt((data.color || "#a78bfa").slice(3, 5), 16)},${parseInt((data.color || "#a78bfa").slice(5, 7), 16)},0.2)`,
color: data.color || "#a78bfa",
fontSize: 15,
fontWeight: 600,
fontFamily: "'Noto Sans KR', sans-serif",
}}
>
{data.nickname}

{parsed.map((sec, i) => (

{sec.title}

{sec.body}

))}

{!parsed.length && aiAnalysis && (

{aiAnalysis}

)}

궁합 매칭

💚 최고 궁합

{compat.best}

{bestData.nickname}

💔 주의 궁합

{compat.worst}

{worstData.nickname}

onClick={restart}
style={{
width: "100%",
maxWidth: 480,
margin: "0 auto",
padding: "16px",
borderRadius: 16,
border: "1px solid rgba(167,139,250,0.3)",
background: "rgba(167,139,250,0.1)",
color: "#a78bfa",
fontSize: 15,
fontWeight: 700,
cursor: "pointer",
fontFamily: "'Noto Sans KR', sans-serif",
}}
>
다시 테스트하기 🔄

);
}
};

return (
ref={containerRef}
style={{
minHeight: "100vh",
background: bg,
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "24px 16px",
fontFamily: "'Noto Sans KR', sans-serif",
transition: "background 0.8s ease",
}}
>

style={{
width: "100%",
opacity: fadeIn ? 1 : 0,
transform: fadeIn ? "translateY(0)" : "translateY(12px)",
transition: "opacity 0.3s ease, transform 0.3s ease",
}}
>
{renderContent()}

);
}

Result

https://claude.ai/public/artifacts/31a403bd-8c18-41b6-9e9b-256e8a1064ba

이 주소를 브라우저에 복붙하여 바로 실행