From 36b7117173fa4fc5f007a0216e71000b1b9c08cf Mon Sep 17 00:00:00 2001
From: wass08 <wass08@gmail.com>
Date: Thu, 22 Jan 2026 11:44:04 +0900
Subject: [PATCH] zone rendering

---
 .../hooks/scene-registry/scene-registry.ts    | 23 ++++++++-------
 .../renderers/level/level-renderer.tsx        | 29 ++++++++++++++-----
 .../components/renderers/scene-renderer.tsx   | 14 +++++----
 .../renderers/zone/zone-renderer.tsx          | 17 +++++++++++
 4 files changed, 58 insertions(+), 25 deletions(-)
 create mode 100644 packages/viewer/src/components/renderers/zone/zone-renderer.tsx

diff --git a/packages/core/src/hooks/scene-registry/scene-registry.ts b/packages/core/src/hooks/scene-registry/scene-registry.ts
index 0ccc6e08..14d137bb 100644
--- a/packages/core/src/hooks/scene-registry/scene-registry.ts
+++ b/packages/core/src/hooks/scene-registry/scene-registry.ts
@@ -1,5 +1,5 @@
-import { useLayoutEffect } from 'react'
-import type * as THREE from 'three'
+import { useLayoutEffect } from "react";
+import type * as THREE from "three";
 
 export const sceneRegistry = {
   // Master lookup: ID -> Object3D
@@ -13,8 +13,9 @@ export const sceneRegistry = {
     wall: new Set<string>(),
     item: new Set<string>(),
     slab: new Set<string>(),
+    zone: new Set<string>(),
   },
-}
+};
 
 export function useRegistry(
   id: string,
@@ -22,19 +23,19 @@ export function useRegistry(
   ref: React.RefObject<THREE.Object3D>,
 ) {
   useLayoutEffect(() => {
-    const obj = ref.current
-    if (!obj) return
+    const obj = ref.current;
+    if (!obj) return;
 
     // 1. Add to master map
-    sceneRegistry.nodes.set(id, obj)
+    sceneRegistry.nodes.set(id, obj);
 
     // 2. Add to type-specific set
-    sceneRegistry.byType[type].add(id)
+    sceneRegistry.byType[type].add(id);
 
     // 4. Cleanup when component unmounts
     return () => {
-      sceneRegistry.nodes.delete(id)
-      sceneRegistry.byType[type].delete(id)
-    }
-  }, [id, type, ref])
+      sceneRegistry.nodes.delete(id);
+      sceneRegistry.byType[type].delete(id);
+    };
+  }, [id, type, ref]);
 }
diff --git a/packages/viewer/src/components/renderers/level/level-renderer.tsx b/packages/viewer/src/components/renderers/level/level-renderer.tsx
index 0ee20ed9..4aa43643 100644
--- a/packages/viewer/src/components/renderers/level/level-renderer.tsx
+++ b/packages/viewer/src/components/renderers/level/level-renderer.tsx
@@ -1,12 +1,14 @@
-import { type LevelNode, useRegistry } from '@pascal-app/core'
-import { useRef } from 'react'
-import type { Group } from 'three'
-import { NodeRenderer } from '../node-renderer'
+import { type LevelNode, useRegistry, useScene } from "@pascal-app/core";
+import { useRef } from "react";
+import type { Group } from "three";
+import { useShallow } from "zustand/shallow";
+import { NodeRenderer } from "../node-renderer";
+import { ZoneRenderer } from "../zone/zone-renderer";
 
 export const LevelRenderer = ({ node }: { node: LevelNode }) => {
-  const ref = useRef<Group>(null!)
+  const ref = useRef<Group>(null!);
 
-  useRegistry(node.id, node.type, ref)
+  useRegistry(node.id, node.type, ref);
 
   return (
     <group ref={ref}>
@@ -17,6 +19,17 @@ export const LevelRenderer = ({ node }: { node: LevelNode }) => {
       {node.children.map((childId) => (
         <NodeRenderer key={childId} nodeId={childId} />
       ))}
+      <LevelZones levelId={node.id} />
     </group>
-  )
-}
+  );
+};
+
+const LevelZones = ({ levelId }: { levelId: LevelNode["id"] }) => {
+  const zoneIds = useScene(
+    useShallow((s) =>
+      s.zoneIds.filter((id) => s.zones[id]?.levelId === levelId),
+    ),
+  );
+
+  return zoneIds.map((zoneId) => <ZoneRenderer key={zoneId} zoneId={zoneId} />);
+};
diff --git a/packages/viewer/src/components/renderers/scene-renderer.tsx b/packages/viewer/src/components/renderers/scene-renderer.tsx
index abbc9570..569d0a4e 100644
--- a/packages/viewer/src/components/renderers/scene-renderer.tsx
+++ b/packages/viewer/src/components/renderers/scene-renderer.tsx
@@ -1,10 +1,12 @@
-'use client'
+"use client";
 
-import { useScene } from '@pascal-app/core'
-import { NodeRenderer } from './node-renderer'
+import { useScene } from "@pascal-app/core";
+import { NodeRenderer } from "./node-renderer";
 
 export const SceneRenderer = () => {
-  const rootNodes = useScene((state) => state.rootNodeIds)
+  const rootNodes = useScene((state) => state.rootNodeIds);
 
-  return rootNodes.map((nodeId) => <NodeRenderer key={nodeId} nodeId={nodeId} />)
-}
+  return rootNodes.map((nodeId) => (
+    <NodeRenderer key={nodeId} nodeId={nodeId} />
+  ));
+};
diff --git a/packages/viewer/src/components/renderers/zone/zone-renderer.tsx b/packages/viewer/src/components/renderers/zone/zone-renderer.tsx
new file mode 100644
index 00000000..0495e1cd
--- /dev/null
+++ b/packages/viewer/src/components/renderers/zone/zone-renderer.tsx
@@ -0,0 +1,17 @@
+import { useRegistry, type Zone } from "@pascal-app/core";
+
+import { useRef } from "react";
+import type { Group } from "three";
+
+export const ZoneRenderer = ({ zoneId }: { zoneId: Zone["id"] }) => {
+  const ref = useRef<Group>(null!);
+  useRegistry(zoneId, "zone", ref);
+
+  return (
+    <mesh ref={ref}>
+      {/* <shapeGeometry /> */}
+      <boxGeometry args={[1, 1, 1]} />
+      <meshBasicNodeMaterial color="pink" />
+    </mesh>
+  );
+};