[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","692faacfe43081919613c0de8c523b8a","versionInt","title","Vibecoding Ai Mentalc Proto","type","code/react","content","import React, { useRef, useState, useEffect } from \"react\";\nimport { motion, useMotionValue, useTransform } from \"framer-motion\";\n\n// ===== 오행 컬러 팔레트 =====\nconst fiveElements = {\n wood: \"#4CAF50\",\n fire: \"#FF7043\",\n earth: \"#D4A373\",\n metal: \"#B0BEC5\",\n water: \"#42A5F5\",\n};\n\n// ===== 진단 문항 (요약형: 전문가용 40문항) =====\n// 각 문항은 1~5로 응답\nconst questions = [\n // 목 1-4\n { id: 1, text: \"새로운 아이디어가 떠오르면 바로 행동에 옮기고 싶다.\", axis: \"wood\" },\n { id: 2, text: \"막혀 있던 상황을 뚫고 나아가고 싶은 욕구가 강하다.\", axis: \"wood\" },\n { id: 3, text: \"빠르게 성장하거나 발전하지 않으면 불안하다.\", axis: \"wood\" },\n { id: 4, text: \"방향만 정해지면 지금 가진 것으로도 먼저 시작하려 한다.\", axis: \"wood\" },\n // 화 5-8\n { id: 5, text: \"감정이 얼굴 표정이나 말투로 쉽게 드러난다.\", axis: \"fire\" },\n { id: 6, text: \"흥미와 자극이 없으면 집중하기 어렵다.\", axis: \"fire\" },\n { id: 7, text: \"아이디어가 생기면 주변 사람들에게 바로 공유하고 싶다.\", axis: \"fire\" },\n { id: 8, text: \"분위기와 에너지의 흐름을 본능적으로 감지한다.\", axis: \"fire\" },\n // 토 9-12\n { id: 9, text: \"루틴과 반복적인 일정을 유지할 때 편안함을 느낀다.\", axis: \"earth\" },\n { id: 10, text: \"갑작스러운 변화보다 예측 가능한 환경을 선호한다.\", axis: \"earth\" },\n { id: 11, text: \"실용적이고 구체적인 결과를 중요하게 본다.\", axis: \"earth\" },\n { id: 12, text: \"주변의 감정이나 상황을 안정시키는 역할을 자주 맡는다.\", axis: \"earth\" },\n // 금 13-16\n { id: 13, text: \"정리정돈이 잘 되어 있을 때 마음이 정돈된다.\", axis: \"metal\" },\n { id: 14, text: \"불명확한 규칙이나 기준을 견디기 어렵다.\", axis: \"metal\" },\n { id: 15, text: \"어떤 일을 할 때 정확하고 실수 없이 하려 노력한다.\", axis: \"metal\" },\n { id: 16, text: \"비효율적인 방식이나 낭비를 보면 바로 고치고 싶다.\", axis: \"metal\" },\n // 수 17-20\n { id: 17, text: \"분위기와 관계 변화에 민감하게 반응한다.\", axis: \"water\" },\n { id: 18, text: \"한 가지 일에 몰입하다가도 여러 방향으로 생각이 흐른다.\", axis: \"water\" },\n { id: 19, text: \"사물이나 사건 속에서 숨은 의미나 패턴을 찾으려 한다.\", axis: \"water\" },\n { id: 20, text: \"상황에 따라 나의 행동 방식이 쉽게 달라진다.\", axis: \"water\" },\n // 오온 색 21-24\n { id: 21, text: \"몸의 상태가 마음 상태에 큰 영향을 준다.\", axis: \"color\" },\n { id: 22, text: \"움직이거나 걸을 때 생각이 더 잘 정리된다.\", axis: \"color\" },\n { id: 23, text: \"새로운 환경에 가면 감각적으로 먼저 반응한다.\", axis: \"color\" },\n { id: 24, text: \"손으로 만져보고 체험하는 방식으로 배우는 편이다.\", axis: \"color\" },\n // 수(受) 25-28\n { id: 25, text: \"타인의 감정 변화를 빠르게 눈치챈다.\", axis: \"rec\" },\n { id: 26, text: \"감정 자극이 있으면 하루 전체 기분이 달라지기도 한다.\", axis: \"rec\" },\n { id: 27, text: \"작은 말에도 감정적으로 크게 반응하는 편이다.\", axis: \"rec\" },\n { id: 28, text: \"기분이 좋을 때 생산성이 눈에 띄게 올라간다.\", axis: \"rec\" },\n // 상(想) 29-32\n { id: 29, text: \"머릿속으로 장면·이미지를 시각화하는 능력이 좋다.\", axis: \"imagine\" },\n { id: 30, text: \"상황을 판단하기 전에 여러 가능성을 상상해본다.\", axis: \"imagine\" },\n { id: 31, text: \"개념적 설명이나 비유를 통해 이해하는 편이다.\", axis: \"imagine\" },\n { id: 32, text: \"전체 그림과 의미를 먼저 보는 편이다.\", axis: \"imagine\" },\n // 행(行) 33-36\n { id: 33, text: \"계획보다 즉시 행동하는 편이다.\", axis: \"act\" },\n { id: 34, text: \"어떤 일을 시작하면 빠르게 속도를 내는 편이다.\", axis: \"act\" },\n { id: 35, text: \"행동을 하면서 생각을 정리하는 경우가 많다.\", axis: \"act\" },\n { id: 36, text: \"명확한 목표가 있으면 강한 추진력이 생긴다.\", axis: \"act\" },\n // 식(識) 37-40\n { id: 37, text: \"옳고 그름을 명확히 구분하는 편이다.\", axis: \"discern\" },\n { id: 38, text: \"일의 원리·구조·논리를 파고드는 것을 좋아한다.\", axis: \"discern\" },\n { id: 39, text: \"감정보다 사실과 논리를 우선하여 판단한다.\", axis: \"discern\" },\n { id: 40, text: \"가치·기준·원칙을 스스로 높게 세우려 한다.\", axis: \"discern\" },\n];\n\n// ===== 채점 함수 =====\nfunction computeScores(answers) {\n // answers: { [questionId]: 1..5 }\n const elementScores = { wood: 0, fire: 0, earth: 0, metal: 0, water: 0 };\n const oonScores = { color: 0, rec: 0, imagine: 0, act: 0, discern: 0 };\n\n questions.forEach((q) => {\n const val = answers[q.id] || 0;\n if ([1,2,3,4].includes(q.id) && q.axis === \"wood\") elementScores.wood += val;\n if ([5,6,7,8].includes(q.id) && q.axis === \"fire\") elementScores.fire += val;\n if ([9,10,11,12].includes(q.id) && q.axis === \"earth\") elementScores.earth += val;\n if ([13,14,15,16].includes(q.id) && q.axis === \"metal\") elementScores.metal += val;\n if ([17,18,19,20].includes(q.id) && q.axis === \"water\") elementScores.water += val;\n\n // 오온\n if (q.axis === \"color\") oonScores.color += val;\n if (q.axis === \"rec\") oonScores.rec += val;\n if (q.axis === \"imagine\") oonScores.imagine += val;\n if (q.axis === \"act\") oonScores.act += val;\n if (q.axis === \"discern\") oonScores.discern += val;\n });\n\n // Normalize (optional) — produce percentages\n const maxElement = 4 * 5; // 4 questions * max 5\n const elementPerc = {};\n Object.keys(elementScores).forEach((k) => {\n elementPerc[k] = Math.round((elementScores[k] / maxElement) * 100);\n });\n const maxOon = 4 * 5;\n const oonPerc = {};\n Object.keys(oonScores).forEach((k) => {\n oonPerc[k] = Math.round((oonScores[k] / maxOon) * 100);\n });\n\n // Determine top element & top oon\n const topElement = Object.entries(elementPerc).sort((a, b) => b[1] - a[1])[0][0];\n const topOon = Object.entries(oonPerc).sort((a, b) => b[1] - a[1])[0][0];\n\n return { elementScores, oonScores, elementPerc, oonPerc, topElement, topOon };\n}\n\n// ===== 25유형 매핑(간단 해석) =====\nconst typeInterpretation = {\n wood_color: { title: \"목색형 (신체지향 개척가)\", summary: \"신체 감각을 통해 방향을 찾고 행동하는 경향이 강합니다.\", advice: \"운동 기반 명상, 몸-마음 연계 루틴 권장\" },\n wood_rec: { title: \"목수형 (감정 반응 성장가)\", summary: \"감정이 행동의 원동력이 됩니다.\", advice: \"감정-행동 연결 훈련 권장\" },\n wood_imagine: { title: \"목상형 (직관 아이디어형)\", summary: \"비전 중심의 창의가 강합니다.\", advice: \"비전을 실천계획으로 분해하는 코칭 권장\" },\n wood_act: { title: \"목행형 (돌파형 행동가)\", summary: \"목표 발견 즉시 행동에 옮깁니다.\", advice: \"행동-휴식 균형 루틴 권장\" },\n wood_discern: { title: \"목식형 (성장 전략가)\", summary: \"개념·이론을 통해 방향을 찾습니다.\", advice: \"실행우선 훈련 권장\" },\n // (간단히 나머지 조합에 대한 기본 텍스트 설정)\n};\n\n// Helper to get interpretation\nfunction getInterpretation(element, oon) {\n const key = `${element}_${oon}`;\n if (typeInterpretation[key]) return typeInterpretation[key];\n\n // default generic\n return {\n title: `${element} + ${oon} 유형`,\n summary: \"해당 조합의 요약 해석입니다.\",\n advice: \"맞춤 웰니스 루틴을 권장합니다.\",\n };\n}\n\n// ===== 오라/스크럽 코드 포함된 컴포넌트 =====\nexport default function VibePrototypeWithDiag() {\n const [element, setElement] = useState(\"wood\");\n const [mood, setMood] = useState(50);\n\n // 스크럽 영역 ref\n const scrubRef = useRef(null);\n const isScrubbing = useRef(false);\n\n // 설문(진단) 상태\n const [answers, setAnswers] = useState({});\n const [showSurvey, setShowSurvey] = useState(false);\n const [result, setResult] = useState(null);\n\n useEffect(() => {\n function handlePointerMove(e) {\n if (!isScrubbing.current) return;\n syncPointer(e);\n }\n function handlePointerUp() {\n isScrubbing.current = false;\n }\n window.addEventListener(\"pointermove\", handlePointerMove);\n window.addEventListener(\"pointerup\", handlePointerUp);\n window.addEventListener(\"pointercancel\", handlePointerUp);\n return () => {\n window.removeEventListener(\"pointermove\", handlePointerMove);\n window.removeEventListener(\"pointerup\", handlePointerUp);\n window.removeEventListener(\"pointercancel\", handlePointerUp);\n };\n }, []);\n\n function getPointerInfo(center, clientX, clientY) {\n const dx = clientX - center.x;\n const dy = clientY - center.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n let angle = (Math.atan2(dy, dx) * 180) / Math.PI; // -180..180\n if (angle < 0) angle += 360; // 0..360\n return { angle, distance };\n }\n function angleToElement(angle) {\n if (angle >= 0 && angle < 72) return \"wood\";\n if (angle >= 72 && angle < 144) return \"fire\";\n if (angle >= 144 && angle < 216) return \"earth\";\n if (angle >= 216 && angle < 288) return \"metal\";\n return \"water\";\n }\n\n function syncPointer(e) {\n const el = scrubRef.current;\n if (!el) return;\n const rect = el.getBoundingClientRect();\n const center = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };\n const { angle, distance } = getPointerInfo(center, e.clientX, e.clientY);\n\n const maxR = Math.min(rect.width, rect.height) / 2;\n const clamped = Math.max(0, Math.min(distance, maxR));\n const newMood = Math.round((clamped / maxR) * 100);\n const newElement = angleToElement(angle);\n\n setMood(newMood);\n setElement(newElement);\n }\n\n function handlePointerDown(e) {\n e.preventDefault();\n isScrubbing.current = true;\n syncPointer(e);\n try { e.target.setPointerCapture && e.target.setPointerCapture(e.pointerId); } catch (err) {}\n }\n\n // motion value for smooth aura scaling\n const moodMotion = useMotionValue(mood);\n useEffect(() => moodMotion.set(mood), [mood]);\n const auraScale = useTransform(moodMotion, [0, 100], [0.8, 1.4]);\n\n // 설문 응답 변경\n function setAnswer(qid, val) {\n setAnswers((s) => ({ ...s, [qid]: val }));\n }\n\n function submitSurvey() {\n const res = computeScores(answers);\n setResult(res);\n setShowSurvey(false);\n }\n\n return (\n

오행·오온 Vibe Prototype — 진단 통합

\n\n

\n \n \n

\n\n {/* 오라 */}\n

\n \n \n \n

현재 오행: {element} · 감정 진동: {mood}

\n\n {/* 스크럽 */}\n

터치/드래그로 현재 감정을 입력하세요 — 원 밖으로 끌수록 강해집니다

\n \n\n { const elAngle = { wood: 36, fire: 108, earth: 180, metal: 252, water: 324 }[element]; const r = (mood / 100) * 40; const rad = (elAngle * Math.PI) / 180; const cx = 50 + r * Math.cos(rad); const tx = ((cx - 50) / 50) * (64 / 2); return tx; })(), y: (() => { const elAngle = { wood: 36, fire: 108, earth: 180, metal: 252, water: 324 }[element]; const r = (mood / 100) * 40; const rad = (elAngle * Math.PI) / 180; const cy = 50 + r * Math.sin(rad); const ty = ((cy - 50) / 50) * (64 / 2); return ty; })() }} transition={{ type: \"spring\", stiffness: 200, damping: 22 }} />\n\n

Mood Scrub

{mood}

\n\n

\n \n \n

\n\n {/* 설문(모달처럼) */}\n {showSurvey && (\n

오행·오온 진단 (40문항)

각 문항을 1(전혀 아님) ~ 5(매우 그렇다)로 응답하세요.

\n {questions.map((q) => (\n

{q.id}. {q.text}

\n {[1,2,3,4,5].map((n) => (\n \n ))}\n

\n ))}\n

\n \n \n

\n )}\n\n {/* 진단 결과 */}\n {result && (\n

진단 결과

요약: 주요 오행 = {result.topElement}, 주요 오온 = {result.topOon}

\n {Object.entries(result.elementPerc).map(([k,v]) => (\n

{k}

{v}%

\n ))}\n

해석

\n {(() => {\n const interp = getInterpretation(result.topElement, result.topOon);\n return (\n

{interp.title}

{interp.summary}

권장: {interp.advice}

\n );\n })()}\n

\n )}\n\n

참고: 이 진단은 연구·프로토타입용입니다. 실제 임상 진단은 전문가와 상담하세요.

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","4878030252541645674","traceTime",1777215090822]