import React from "https://esm.sh/react@19"; import ReactDOMClient from "https://esm.sh/react-dom@19/client"; function App() { const [step, setStep] = React.useState(0); const [mbtiResult, setMbtiResult] = React.useState(null); // MBTI 질문 데이터 (간소화) const questions = [ { id: 1, text: "새로운 사람들을 만나는 것을 즐기시나요?", options: [ { text: "네, 매우 즐깁니다.", type: "E" }, { text: "아니요, 익숙한 사람들과 있는 것이 좋습니다.", type: "I" }, ], }, { id: 2, text: "정보를 수집할 때 사실과 구체적인 정보에 집중하는 편인가요?", options: [ { text: "네, 정확한 사실에 집중합니다.", type: "S" }, { text: "아니요, 가능성과 의미를 탐색하는 것을 좋아합니다.", type: "N" }, ], }, { id: 3, text: "결정을 내릴 때 논리와 객관적인 기준을 우선시하시나요?", options: [ { text: "네, 논리적이고 객관적인 판단을 중시합니다.", type: "T" }, { text: "아니요, 사람들과의 관계와 조화를 고려합니다.", type: "F" }, ], }, { id: 4, text: "예상치 못한 변화에 유연하게 대처하는 편인가요?", options: [ { text: "네, 상황에 따라 계획을 바꾸는 것을 좋아합니다.", type: "P" }, { text: "아니요, 계획을 세우고 체계적으로 진행하는 것을 선호합니다.", type: "J" }, ], }, ]; const [answers, setAnswers] = React.useState({ E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, P: 0, J: 0 }); const handleAnswer = (type) => { setAnswers({ ...answers, [type]: answers[type] + 1 }); if (step < questions.length - 1) { setStep(step + 1); } else { calculateMbti(); } }; const calculateMbti = () => { let result = ""; result += answers.E >= answers.I ? "E" : "I"; result += answers.S >= answers.N ? "S" : "N"; result += answers.T >= answers.F ? "T" : "F"; result += answers.P >= answers.J ? "P" : "J"; setMbtiResult(result); }; const handleRestart = () => { setStep(0); setMbtiResult(null); setAnswers({ E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, P: 0, J: 0 }); }; return (

{!mbtiResult ? ( <>

MBTI Test

Let's find out your personality type!

{questions[step].text}

{questions[step].options.map((option, index) => ( ))}

Question {step + 1} of {questions.length}

) : (

Your Result: {mbtiResult}

This is your estimated MBTI type based on your answers.

{/* 여기에 MBTI 타입별 상세 설명 등을 추가할 수 있습니다. */}

)}

); } // CSS for fade-in animation (can be added to a CSS file or directly in the component if needed) const styles = ` @keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fade-in 0.7s ease-out forwards; } `; // Inject styles if using a single file component without a separate CSS import if (!document.getElementById('fade-in-styles')) { const styleSheet = document.createElement("style"); styleSheet.id = 'fade-in-styles'; styleSheet.type = "text/css"; styleSheet.innerText = styles; document.head.appendChild(styleSheet); } ReactDOMClient.createRoot(document.getElementById('root')).render();