[{"_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","693e59d818208191816c351046516c48","versionInt","title","오행·오온 Vibe State Machine (type Script/react)","type","code/react","content","import React, { useReducer, useState, useEffect } from \"react\";\n\n// ================== 1. 타입 정의 ==================\n\nexport type FiveElements = {\n wood: number; // 목(木)\n fire: number; // 화(火)\n earth: number; // 토(土)\n metal: number; // 금(金)\n water: number; // 수(水)\n};\n\nexport type FiveAggregates = {\n form: number; // 색(色)\n feeling: number; // 수(受)\n perception: number; // 상(想)\n formation: number; // 행(行)\n consciousness: number; // 식(識)\n};\n\nexport type VibeState = {\n elements: FiveElements;\n aggregates: FiveAggregates;\n};\n\n// ================== 2. 초기 프리셋 ==================\n\nexport const fireDominantPreset: VibeState = {\n elements: { wood: 0.6, fire: 0.85, earth: 0.4, metal: 0.3, water: 0.35 },\n aggregates: { form: 0.5, feeling: 0.7, perception: 0.6, formation: 0.5, consciousness: 0.4 },\n};\n\n// ================== 3. Reducer ==================\n\nexport type VibeAction =\n | { type: \"INPUT\"; intensity: number }\n | { type: \"REGULATE\" }\n | { type: \"SET_ELEMENTS\"; elements: FiveElements }\n | { type: \"RESET\" };\n\nexport function vibeReducer(state: VibeState, action: VibeAction): VibeState {\n switch (action.type) {\n case \"SET_ELEMENTS\":\n return { ...state, elements: action.elements };\n\n case \"INPUT\": {\n const { elements, aggregates } = state;\n const form = action.intensity;\n return {\n elements,\n aggregates: {\n form,\n feeling: Math.min(1, aggregates.feeling + form * elements.fire),\n perception: Math.min(1, aggregates.perception + aggregates.feeling * elements.wood),\n formation: Math.min(1, aggregates.formation + aggregates.perception * (1 - elements.earth)),\n consciousness: Math.min(1, aggregates.consciousness + aggregates.formation * elements.metal),\n },\n };\n }\n\n case \"REGULATE\":\n return {\n elements: {\n wood: state.elements.wood * 0.98,\n fire: state.elements.fire * 0.95,\n earth: state.elements.earth * 1.02,\n metal: state.elements.metal * 1.01,\n water: state.elements.water * 1.03,\n },\n aggregates: {\n form: state.aggregates.form * 0.9,\n feeling: state.aggregates.feeling * 0.85,\n perception: state.aggregates.perception * 0.9,\n formation: state.aggregates.formation * 0.95,\n consciousness: state.aggregates.consciousness * 0.97,\n },\n };\n\n case \"RESET\":\n return fireDominantPreset;\n\n default:\n return state;\n }\n}\n\n// ================== 4. 유틸 ==================\n\n// 오온 민감도 계수 (식 > 수 > 행 > 상 > 색)\nconst AGGREGATE_SENSITIVITY: FiveAggregates = {\n consciousness: 1.0, // 식(識) – 가장 민감\n feeling: 0.8, // 수(受)\n formation: 0.6, // 행(行)\n perception: 0.45, // 상(想)\n form: 0.3, // 색(色) – 가장 둔감\n};\n\nfunction lerp(a: number, b: number, t: number) {\n return a + (b - a) * t;\n}\n\nfunction interpolateElements(from: FiveElements, to: FiveElements, t: number): FiveElements {\n return {\n wood: lerp(from.wood, to.wood, t),\n fire: lerp(from.fire, to.fire, t),\n earth: lerp(from.earth, to.earth, t),\n metal: lerp(from.metal, to.metal, t),\n water: lerp(from.water, to.water, t),\n };\n}\n\n// ================== 5. 세운 정의 ==================\n\ntype 세운 = {\n year: number;\n label: string;\n modifier: Partial;\n strength: number; // 0~1, 애니메이션 속도에 사용\n};\n\nexport const 세운타임라인: 세운[] = [\n { year: 2024, label: \"을사\", modifier: { fire: 0.05, wood: 0.03 }, strength: 0.4 },\n { year: 2025, label: \"병오\", modifier: { fire: 0.08, earth: -0.02 }, strength: 0.7 },\n { year: 2026, label: \"정미\", modifier: { earth: 0.06 }, strength: 0.5 },\n { year: 2027, label: \"무신\", modifier: { metal: 0.07 }, strength: 0.6 },\n];\n\nfunction apply운기(base: FiveElements, mod: Partial): FiveElements {\n const next = { ...base } as FiveElements;\n (Object.keys(mod) as (keyof FiveElements)[]).forEach((k) => {\n next[k] = Math.min(1, Math.max(0, next[k] + (mod[k] ?? 0)));\n });\n return next;\n}\n\n// ================== 6. Radar Chart ==================\n\nimport {\n RadarChart as ReRadarChart,\n PolarGrid,\n PolarAngleAxis,\n PolarRadiusAxis,\n Radar,\n ResponsiveContainer,\n} from \"recharts\";\n\ntype TenAxis = FiveElements & FiveAggregates;\n\nfunction RadarView({ title, data }: { title: string; data: TenAxis }) {\n const chartData = (Object.keys(data) as (keyof TenAxis)[]).map((k) => ({\n subject: k,\n value: Math.round(data[k] * 100),\n fullMark: 100,\n }));\n\n return (\n

{title}

\n \n \n \n \n \n \n \n \n

\n );\n}\n\n// ================== 7. 메인 컴포넌트 ==================\n\nexport default function VibeSimulator() {\n const [state, dispatch] = useReducer(vibeReducer, fireDominantPreset);\n const [세운Index, set세운Index] = useState(0);\n const [animT, setAnimT] = useState(1);\n const [fromElements, setFromElements] = useState(state.elements);\n\n const current세운 = 세운타임라인[세운Index];\n const targetElements = apply운기(fireDominantPreset.elements, current세운.modifier);\n\n useEffect(() => {\n setFromElements(state.elements);\n setAnimT(0);\n }, [세운Index]);\n\n useEffect(() => {\n if (animT >= 1) return;\n const speed = 0.02 + current세운.strength * 0.05;\n const id = requestAnimationFrame(() => setAnimT((t) => Math.min(1, t + speed)));\n dispatch({\n type: \"SET_ELEMENTS\",\n elements: interpolateElements(fromElements, targetElements, animT),\n });\n return () => cancelAnimationFrame(id);\n }, [animT, current세운]);\n\n const selfTenAxis: TenAxis = { ...state.elements, ...state.aggregates };\n\n return (\n

오행·오온 세운 애니메이션 시뮬레이터

\n\n {/* 세운 트랙 */}\n

세운 (1년)

\n {세운타임라인.map((s, i) => (\n set세운Index(i)}\n className={`px-3 py-1 rounded-full text-xs ${\n i === 세운Index ? \"bg-black text-white\" : \"bg-neutral-200\"\n }`}\n >\n {s.year} {s.label}\n \n ))}\n

\n\n \n\n

\n dispatch({ type: \"INPUT\", intensity: Math.random() })}\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","17899289796848009713","traceTime",1778008644701]