import React, { useState, useRef, useCallback } from "react"; import { User, Heart, ArrowRight, Share2, RefreshCw } from "lucide-react"; const MBTI_TYPES = [ "ISTJ","ISFJ","INFJ","INTJ", "ISTP","ISFP","INFP","INTP", "ESTP","ESFP","ENFP","ENTP", "ESTJ","ESFJ","ENFJ","ENTJ" ]; function compatibility(type1, type2) { if (!MBTI_TYPES.includes(type1) || !MBTI_TYPES.includes(type2)) return null; if (type1 === type2) return { emoji: "\u{1F49E}", label: "\uC18C\uC6B8\uBA54\uC774\uD2B8", description: "\uC11C\uB85C\uC758 \uC131\uD5A5\uC744 \uC644\uBCBD\uD558\uAC8C \uC774\uD574\uD574\uC8FC\uB294 \uCD5C\uACE0\uC758 \uAD81\uD569! \uBE44\uC2B7\uD55C \uAC00\uCE58\uAD00\uACFC \uD589\uB3D9 \uD328\uD134\uC73C\uB85C \uB9C8\uC74C\uC774 \uC798 \uB9DE\uC544\uC694." }; let score = 0; if (type1[0] !== type2[0]) score++; if (type1[1] !== type2[1]) score++; if (type1[2] !== type2[2]) score++; if (type1[3] !== type2[3]) score++; if (score === 4) return { emoji: "\u{1F498}", label: "\uCC30\uB5A1\uAD81\uD569", description: "\uC11C\uB85C \uB2E4\uB978 \uC131\uD5A5\uC774 \uC644\uBCBD\uD558\uAC8C \uBCF4\uC644\uB418\uC5B4 \uC131\uC7A5\uACFC \uC790\uADF9\uC744 \uC8FC\uACE0\uBC1B\uB294 \uD658\uC0C1\uC801\uC778 \uC870\uD569\uC785\uB2C8\uB2E4!" }; if (score === 3) return { emoji: "\u2764\uFE0F", label: "\uC774\uC0C1\uD615 \uAD81\uD569", description: "\uB9CE\uC740 \uBD80\uBD84\uC774 \uB2EC\uB77C\uC11C \uC11C\uB85C\uC5D0\uAC8C \uC0C8\uB85C\uC6B4 \uAD00\uC810\uC744 \uC120\uBB3C\uD574\uC8FC\uB294 \uB9E4\uB825\uC801\uC778 \uAD81\uD569\uC774\uC5D0\uC694." }; if (score === 2) return { emoji: "\U0001F9E1", label: "\uCC30\uB5A1\uBC18", description: "\uBE44\uC2B7\uD568\uACFC \uB2E4\uB984\uC774 \uC801\uC808\uD574 \uC548\uC815\uAC10\uACFC \uC790\uADF9\uC744 \uB3D9\uC2DC\uC5D0 \uB290\uB07C\uB294 \uCF00\uBBF8!" }; if (score === 1) return { emoji: "\U0001F49B", label: "\uD3C9\uBC94\uD55C \uAD81\uD569", description: "\uAE30\uBCF8\uC801\uC73C\uB85C \uD3B8\uC548\uD558\uC9C0\uB9CC, \uC57D\uAC04\uC758 \uB178\uB825\uB9CC \uCD94\uAC00\uD558\uBA74 \uB354\uC6B1 \uD2B9\uBCC4\uD55C \uAD00\uACC4\uB85C \uBC1C\uC804\uD574\uC694." }; return { emoji: "\U0001F90D", label: "\uBB34\uB09C\uD55C \uAD81\uD569", description: "\uC11C\uB85C \uBE44\uC2B7\uD55C \uBD80\uBD84\uC774 \uB9CE\uC544 \uC548\uC815\uC801\uC778 \uAD00\uACC4\uB97C \uB9CC\uB4E4 \uC218 \uC788\uC5B4\uC694." }; } function MbtiSelect({ value, onChange, label }) { return (

{label}

); } export default function App() { const [mbti1, setMbti1] = useState(""); const [mbti2, setMbti2] = useState(""); const [ready, setReady] = useState(false); const [showFlash, setShowFlash] = useState(false); const [saving, setSaving] = useState(false); const cardRef = useRef(null); const download = useDownload(); const result = compatibility(mbti1, mbti2); const handleTest = () => { if (mbti1 && mbti2) setReady(true); }; const handleReset = () => { setReady(false); setMbti1(""); setMbti2(""); }; const handleShare = useCallback(async () => { if (!cardRef.current || saving) return; setSaving(true); setShowFlash(true); setTimeout(() => setShowFlash(false), 1200); try { if (typeof html2canvas !== "undefined") { const canvas = await html2canvas(cardRef.current, { scale: 2, backgroundColor: null, useCORS: true }); const dataUrl = canvas.toDataURL("image/png"); const byteString = atob(dataUrl.split(",")[1]); const ab = new ArrayBuffer(byteString.length); const ia = new Uint8Array(ab); for (let i = 0; i < byteString.length; i++) ia[i] = byteString.charCodeAt(i); const blob = new Blob([ab], { type: "image/png" }); const file = new File([blob], "MBTI-" + mbti1 + "-" + mbti2 + ".png", { type: "image/png" }); if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) { await navigator.share({ files: [file], title: "MBTI Compatibility", text: mbti1 + " + " + mbti2 }); } else { download("MBTI-" + mbti1 + "-" + mbti2 + ".png", dataUrl, "image/png"); } } } catch (e) { // silent fallback } finally { setSaving(false); } }, [mbti1, mbti2, saving, result, download]); return (

{!ready && ( <>

MBTI \uAD81\uD569 \uD14C\uC2A4\uD2B8

)} {ready && result && ( <>

{mbti1} {mbti2}

{result.emoji}

{result.label}

{result.description}

#MBTI\uAD81\uD569 #\uC2EC\uB9AC\uD14C\uC2A4\uD2B8

)}

); }