From 119afcaf42fffc520bfea4c8ab7555b805e65ea4 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Tue, 25 Nov 2025 09:35:47 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B0=B0=EC=B9=98=EB=90=9C=20=EA=B0=9D?=
 =?UTF-8?q?=EC=B2=B4=20=EB=AA=A9=EB=A1=9D=20=EA=B3=84=EC=B8=B5=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EB=B0=8F=20=EC=95=84=EC=BD=94=EB=94=94=EC=96=B8=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../widgets/yard-3d/DigitalTwinEditor.tsx     | 134 +++++++++++++++---
 1 file changed, 112 insertions(+), 22 deletions(-)

diff --git a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx
index 47902b42..b08d4fc1 100644
--- a/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/DigitalTwinEditor.tsx
@@ -1575,33 +1575,123 @@ export default function DigitalTwinEditor({ layoutId, layoutName, onBack }: Digi
             )}
           </div>
 
-          {/* 배치된 객체 목록 */}
-          <div className="flex-1 overflow-y-auto p-4">
+          {/* 배치된 객체 목록 (계층 구조) */}
+          <div className="flex-1 overflow-y-auto border-t p-4">
             <h3 className="mb-3 text-sm font-semibold">배치된 객체 ({placedObjects.length})</h3>
 
             {placedObjects.length === 0 ? (
               <div className="text-muted-foreground text-center text-sm">상단 도구를 드래그하여 배치하세요</div>
             ) : (
-              <div className="space-y-2">
-                {placedObjects.map((obj) => (
-                  <div
-                    key={obj.id}
-                    onClick={() => handleObjectClick(obj.id)}
-                    className={`cursor-pointer rounded-lg border p-3 transition-all ${
-                      selectedObject?.id === obj.id ? "border-primary bg-primary/10" : "hover:border-primary/50"
-                    }`}
-                  >
-                    <div className="flex items-center justify-between">
-                      <span className="text-sm font-medium">{obj.name}</span>
-                      <div className="h-3 w-3 rounded-full" style={{ backgroundColor: obj.color }} />
-                    </div>
-                    <p className="text-muted-foreground mt-1 text-xs">
-                      위치: ({obj.position.x.toFixed(1)}, {obj.position.z.toFixed(1)})
-                    </p>
-                    {obj.areaKey && <p className="text-muted-foreground mt-1 text-xs">Area: {obj.areaKey}</p>}
-                  </div>
-                ))}
-              </div>
+              <Accordion type="multiple" className="w-full">
+                {/* Area별로 그룹핑 */}
+                {(() => {
+                  // Area 객체들
+                  const areaObjects = placedObjects.filter((obj) => obj.type === "area");
+
+                  // Area가 없으면 기존 방식으로 표시
+                  if (areaObjects.length === 0) {
+                    return (
+                      <div className="space-y-2">
+                        {placedObjects.map((obj) => (
+                          <div
+                            key={obj.id}
+                            onClick={() => handleObjectClick(obj.id)}
+                            className={`cursor-pointer rounded-lg border p-3 transition-all ${
+                              selectedObject?.id === obj.id
+                                ? "border-primary bg-primary/10"
+                                : "hover:border-primary/50"
+                            }`}
+                          >
+                            <div className="flex items-center justify-between">
+                              <span className="text-sm font-medium">{obj.name}</span>
+                              <div className="h-3 w-3 rounded-full" style={{ backgroundColor: obj.color }} />
+                            </div>
+                            <p className="text-muted-foreground mt-1 text-xs">
+                              위치: ({obj.position.x.toFixed(1)}, {obj.position.z.toFixed(1)})
+                            </p>
+                          </div>
+                        ))}
+                      </div>
+                    );
+                  }
+
+                  // Area별로 Location들을 그룹핑
+                  return areaObjects.map((areaObj) => {
+                    // 이 Area의 자식 Location들 찾기
+                    const childLocations = placedObjects.filter(
+                      (obj) =>
+                        obj.type !== "area" &&
+                        obj.areaKey === areaObj.areaKey &&
+                        (obj.parentId === areaObj.id || obj.externalKey === areaObj.externalKey),
+                    );
+
+                    return (
+                      <AccordionItem key={areaObj.id} value={`area-${areaObj.id}`} className="border-b">
+                        <AccordionTrigger className="px-2 py-3 hover:no-underline">
+                          <div
+                            className={`flex w-full items-center justify-between pr-2 ${
+                              selectedObject?.id === areaObj.id ? "text-primary font-semibold" : ""
+                            }`}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleObjectClick(areaObj.id);
+                            }}
+                          >
+                            <div className="flex items-center gap-2">
+                              <Grid3x3 className="h-4 w-4" />
+                              <span className="text-sm font-medium">{areaObj.name}</span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <span className="text-muted-foreground text-xs">({childLocations.length})</span>
+                              <div className="h-3 w-3 rounded-full" style={{ backgroundColor: areaObj.color }} />
+                            </div>
+                          </div>
+                        </AccordionTrigger>
+                        <AccordionContent className="px-2 pb-3">
+                          {childLocations.length === 0 ? (
+                            <p className="text-muted-foreground py-2 text-center text-xs">
+                              Location이 없습니다
+                            </p>
+                          ) : (
+                            <div className="space-y-2">
+                              {childLocations.map((locationObj) => (
+                                <div
+                                  key={locationObj.id}
+                                  onClick={() => handleObjectClick(locationObj.id)}
+                                  className={`cursor-pointer rounded-lg border p-2 transition-all ${
+                                    selectedObject?.id === locationObj.id
+                                      ? "border-primary bg-primary/10"
+                                      : "hover:border-primary/50"
+                                  }`}
+                                >
+                                  <div className="flex items-center justify-between">
+                                    <div className="flex items-center gap-2">
+                                      <Package className="h-3 w-3" />
+                                      <span className="text-xs font-medium">{locationObj.name}</span>
+                                    </div>
+                                    <div
+                                      className="h-2.5 w-2.5 rounded-full"
+                                      style={{ backgroundColor: locationObj.color }}
+                                    />
+                                  </div>
+                                  <p className="text-muted-foreground mt-1 text-[10px]">
+                                    위치: ({locationObj.position.x.toFixed(1)}, {locationObj.position.z.toFixed(1)})
+                                  </p>
+                                  {locationObj.locaKey && (
+                                    <p className="text-muted-foreground mt-0.5 text-[10px]">
+                                      Key: {locationObj.locaKey}
+                                    </p>
+                                  )}
+                                </div>
+                              ))}
+                            </div>
+                          )}
+                        </AccordionContent>
+                      </AccordionItem>
+                    );
+                  });
+                })()}
+              </Accordion>
             )}
           </div>
         </div>