import React, { useState, useRef } from "react"; import { HexColorPicker } from "react-colorful"; import html2canvas from "html2canvas"; import { Users, RefreshCcw, Camera } from 'lucide-react'; // MBTI 타입 배열 (영문 대문자 16개) const MBTITypes = [ "ISTJ", "ISFJ", "INFJ", "INTJ", "ISTP", "ISFP", "INFP", "INTP", "ESTP", "ESFP", "ENFP", "ENTP", "ESTJ", "ESFJ", "ENFJ", "ENTJ" ]; // 심플 궁합 설명 샘플 (더 다양화 가능) const typeMatches = { perfect: [ ["INFP", "ENFJ"], ["ENFP", "INFJ"], ["ENTP", "INFJ"], ["ISFP", "ENFJ"], ["ESFP", "ISTJ"], ["ESTJ", "ISFJ"], ["INTJ", "ENFP"], ["INTP", "ENTJ"] ], good: [ ["ISTJ", "ESFJ"],["ISFP", "ESTJ"],["ENFP", "INTJ"],["ENTP", "INTJ"], ["INFP", "ENFJ"],["ESFP", "ISFJ"],["ISFJ", "ESFP"],["INFJ", "ENFP"] ] }; const matchResult = (mbtiA, mbtiB) => { if (!mbtiA || !mbtiB) return null; const A = mbtiA.toUpperCase(); const B = mbtiB.toUpperCase(); const isPerfect = typeMatches.perfect.some(([x, y]) => (x === A && y === B) || (x === B && y === A) ); if (isPerfect) { return { level: "완벽한 궁합", description: "둘만의 특별한 시너지가 폭발하는 조합! 서로의 욕구를 깊이 이해하고, 대화도 술술 풀려요.\n서로의 단점을 보완하며 함께 성장할 수 있는 이상적인 관계입니다.", colorFrom: "#77e0c6", colorTo: "#59bbe9", emoji: "💖" }; } const isGood = typeMatches.good.some(([x, y]) => (x === A && y === B) || (x === B && y === A) ); if (isGood) { return { level: "좋은 궁합", description: "대화도 잘 통하고 서로에게 긍정적인 영향을 끼치며,\n취미나 가치관에서 비슷한 지점을 많이 찾을 수 있어요.", colorFrom: "#ffd678", colorTo: "#fea88c", emoji: "✨" }; } if (A[0] === B[0]) { return { level: "비슷한 궁합", description: "두 사람 모두 비슷한 성향을 가지고 있어, 공감대는 빠르게 쌓일 수 있지만\n갈등 상황에서는 양보가 쉽지 않을 수 있어요.", colorFrom: "#b2a8ff", colorTo: "#f8b5ed", emoji: "🤝" }; } return { level: "보통 궁합", description: "성향이 차이가 있어 신선함을 느낄 수 있지만,\n초반에는 서로를 이해하는 데 시간이 필요해요.\n서로의 다름을 존중한다면 특별한 관계로 발전할 수 있습니다.", colorFrom: "#ece9ed", colorTo: "#b5c1cc", emoji: "🌈" }; }; function MBTIInput({ label, value, onChange, otherValue }) { // 이미 선택된 값이 중복 선택되지 않도록 return (

{label}

); } export default function App() { const [mbtiA, setMbtiA] = useState(""); const [mbtiB, setMbtiB] = useState(""); const [cardBg, setCardBg] = useState({ from: "#77e0c6", to: "#59bbe9" }); const [showPicker, setShowPicker] = useState(false); const cardRef = useRef(null); const [downloading, setDownloading] = useState(false); const result = matchResult(mbtiA, mbtiB); // 카드 배경 추천 적용 React.useEffect(() => { if (result) setCardBg({ from: result.colorFrom, to: result.colorTo }); }, [mbtiA, mbtiB]); // 카드 스크린샷 저장 const handleDownload = async () => { if (!cardRef.current) return; setDownloading(true); try { const canvas = await html2canvas(cardRef.current, { backgroundColor: null, scale: 2 }); const url = canvas.toDataURL("image/png"); const a = document.createElement("a"); a.href = url; a.download = `${mbtiA}_${mbtiB}_궁합.png`; a.click(); } catch (e) { alert("이미지 저장 중 오류가 발생했습니다."); } finally { setDownloading(false); } }; return (

{/* 결과 카드 */}

{mbtiA || "-"} × {mbtiB || "-"}

{result?.emoji || "🌈"} {result ? result.level : "MBTI 궁합 결과"}

{result ? result.description : "상대방의 MBTI를 선택하면 궁합 결과가 바로 보여집니다!"}

#{mbtiA || "MBTI"}

#{mbtiB || "MBTI"}

{/* 카드 이미지 다운로드 버튼 */}

{/* (선택) 배경색 조절 기능 */}

{showPicker && (

좌측 색상 setCardBg(bg => ({ ...bg, from: c }))} />

우측 색상 setCardBg(bg => ({ ...bg, to: c }))} />

)} {/* 안내 */}

MBTI 궁합 결과 카드를 길게 눌러 공유하거나, [카드 이미지로 저장]을 이용해 사진으로 다운하세요!

); }

MBTI 궁합 테스트

MBTI 궁합 테스트

reviews