Phase 1-4 완료

frontend/components/admin/dashboard/widgets/yard-3d/YardEditor.tsx

@@ -2,11 +2,12 @@
 
 import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { ArrowLeft, Save, Loader2, X } from "lucide-react";
-import { yardLayoutApi, materialApi } from "@/lib/api/yardLayoutApi";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+import { ArrowLeft, Save, Loader2, Plus, Settings, Trash2 } from "lucide-react";
+import { yardLayoutApi } from "@/lib/api/yardLayoutApi";
 import dynamic from "next/dynamic";
+import { YardLayout, YardPlacement } from "./types";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { AlertCircle } from "lucide-react";
 
 const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), {
   ssr: false,
@@ -17,41 +18,11 @@ const Yard3DCanvas = dynamic(() => import("./Yard3DCanvas"), {
   ),
 });
 
-interface TempMaterial {
-  id: number;
-  material_code: string;
-  material_name: string;
-  category: string;
-  unit: string;
-  default_color: string;
-  description: string;
-}
-
-interface YardLayout {
-  id: number;
-  name: string;
-  description: string;
-  placement_count?: number;
-  updated_at: string;
-}
-
-interface YardPlacement {
-  id: number;
-  yard_layout_id: number;
-  external_material_id: string;
-  material_code: string;
-  material_name: string;
-  quantity: number;
-  unit: string;
-  position_x: number;
-  position_y: number;
-  position_z: number;
-  size_x: number;
-  size_y: number;
-  size_z: number;
-  color: string;
-  memo?: string;
-}
+// 나중에 구현할 데이터 바인딩 패널
+const YardElementConfigPanel = dynamic(() => import("./YardElementConfigPanel"), {
+  ssr: false,
+  loading: () => <div>로딩 중...</div>,
+});
 
 interface YardEditorProps {
   layout: YardLayout;
@@ -60,90 +31,88 @@ interface YardEditorProps {
 
 export default function YardEditor({ layout, onBack }: YardEditorProps) {
   const [placements, setPlacements] = useState<YardPlacement[]>([]);
-  const [materials, setMaterials] = useState<TempMaterial[]>([]);
   const [selectedPlacement, setSelectedPlacement] = useState<YardPlacement | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [editValues, setEditValues] = useState({
-    size_x: 5,
-    size_y: 5,
-    size_z: 5,
-    color: "#3b82f6",
-  });
+  const [showConfigPanel, setShowConfigPanel] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
-  // 배치 목록 & 자재 목록 로드
+  // 배치 목록 로드
   useEffect(() => {
-    const loadData = async () => {
+    const loadPlacements = async () => {
       try {
         setIsLoading(true);
-        const [placementsRes, materialsRes] = await Promise.all([
-          yardLayoutApi.getPlacementsByLayoutId(layout.id),
-          materialApi.getTempMaterials({ limit: 100 }),
-        ]);
-
-        if (placementsRes.success) {
-          setPlacements(placementsRes.data as YardPlacement[]);
-        }
-        if (materialsRes.success) {
-          setMaterials(materialsRes.data as TempMaterial[]);
+        const response = await yardLayoutApi.getPlacementsByLayoutId(layout.id);
+        if (response.success) {
+          setPlacements(response.data as YardPlacement[]);
         }
       } catch (error) {
-        console.error("데이터 로드 실패:", error);
+        console.error("배치 목록 로드 실패:", error);
+        setError("배치 목록을 불러올 수 없습니다.");
       } finally {
         setIsLoading(false);
       }
     };
 
-    loadData();
+    loadPlacements();
   }, [layout.id]);
 
-  // selectedPlacement 변경 시 editValues 업데이트
-  useEffect(() => {
-    if (selectedPlacement) {
-      setEditValues({
-        size_x: selectedPlacement.size_x,
-        size_y: selectedPlacement.size_y,
-        size_z: selectedPlacement.size_z,
-        color: selectedPlacement.color,
-      });
-    }
-  }, [selectedPlacement]);
+  // 빈 요소 추가
+  const handleAddElement = async () => {
+    try {
+      const newPlacementData = {
+        position_x: 0,
+        position_y: 0,
+        position_z: 0,
+        size_x: 5,
+        size_y: 5,
+        size_z: 5,
+        color: "#9ca3af", // 회색 (미설정 상태)
+      };
 
-  // 자재 클릭 → 배치 추가
-  const handleMaterialClick = async (material: TempMaterial) => {
-    // 이미 배치되었는지 확인
-    const alreadyPlaced = placements.find((p) => p.material_code === material.material_code);
-    if (alreadyPlaced) {
-      alert("이미 배치된 자재입니다.");
+      const response = await yardLayoutApi.addMaterialPlacement(layout.id, newPlacementData);
+      if (response.success) {
+        const newPlacement = response.data as YardPlacement;
+        setPlacements((prev) => [...prev, newPlacement]);
+        setSelectedPlacement(newPlacement);
+        setShowConfigPanel(true); // 자동으로 설정 패널 표시
+      }
+    } catch (error) {
+      console.error("요소 추가 실패:", error);
+      setError("요소 추가에 실패했습니다.");
+    }
+  };
+
+  // 요소 선택 (3D 캔버스 또는 목록에서)
+  const handleSelectPlacement = (placement: YardPlacement) => {
+    setSelectedPlacement(placement);
+    setShowConfigPanel(false); // 선택 시에는 설정 패널 닫기
+  };
+
+  // 설정 버튼 클릭
+  const handleConfigClick = (placement: YardPlacement) => {
+    setSelectedPlacement(placement);
+    setShowConfigPanel(true);
+  };
+
+  // 요소 삭제
+  const handleDeletePlacement = async (placementId: number) => {
+    if (!confirm("이 요소를 삭제하시겠습니까?")) {
       return;
     }
 
-    // 기본 위치에 배치
-    const placementData = {
-      external_material_id: `TEMP-${material.id}`,
-      material_code: material.material_code,
-      material_name: material.material_name,
-      quantity: 1,
-      unit: material.unit,
-      position_x: 0,
-      position_y: 0,
-      position_z: 0,
-      size_x: 5,
-      size_y: 5,
-      size_z: 5,
-      color: material.default_color,
-    };
-
     try {
-      const response = await yardLayoutApi.addMaterialPlacement(layout.id, placementData);
+      const response = await yardLayoutApi.removePlacement(placementId);
       if (response.success) {
-        setPlacements((prev) => [...prev, response.data as YardPlacement]);
-        setSelectedPlacement(response.data as YardPlacement);
+        setPlacements((prev) => prev.filter((p) => p.id !== placementId));
+        if (selectedPlacement?.id === placementId) {
+          setSelectedPlacement(null);
+          setShowConfigPanel(false);
+        }
       }
     } catch (error) {
-      console.error("자재 배치 실패:", error);
-      alert("자재 배치에 실패했습니다.");
+      console.error("요소 삭제 실패:", error);
+      setError("요소 삭제에 실패했습니다.");
     }
   };
 
@@ -155,49 +124,13 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
       position_z: Math.round(position.z * 2) / 2,
     };
 
-    setPlacements((prev) =>
-      prev.map((p) =>
-        p.id === id
-          ? {
-              ...p,
-              ...updatedPosition,
-            }
-          : p,
-      ),
-    );
+    setPlacements((prev) => prev.map((p) => (p.id === id ? { ...p, ...updatedPosition } : p)));
 
-    // 선택된 자재도 업데이트
     if (selectedPlacement?.id === id) {
-      setSelectedPlacement((prev) =>
-        prev
-          ? {
-              ...prev,
-              ...updatedPosition,
-            }
-          : null,
-      );
+      setSelectedPlacement((prev) => (prev ? { ...prev, ...updatedPosition } : null));
     }
   };
 
-  // 자재 배치 해제
-  const handlePlacementRemove = async (id: number): Promise<void> => {
-    try {
-      const response = await yardLayoutApi.removePlacement(id);
-      if (response.success) {
-        setPlacements((prev) => prev.filter((p) => p.id !== id));
-        setSelectedPlacement(null);
-      }
-    } catch (error) {
-      console.error("배치 해제 실패:", error);
-      alert("배치 해제에 실패했습니다.");
-    }
-  };
-
-  // 위치/크기/색상 업데이트
-  const handlePlacementUpdate = (id: number, updates: Partial<YardPlacement>) => {
-    setPlacements((prev) => prev.map((p) => (p.id === id ? { ...p, ...updates } : p)));
-  };
-
   // 저장
   const handleSave = async () => {
     setIsSaving(true);
@@ -227,12 +160,28 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
     }
   };
 
-  // 필터링된 자재 목록
-  const filteredMaterials = materials.filter(
-    (m) =>
-      m.material_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      m.material_code.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
+  // 설정 패널에서 저장
+  const handleSaveConfig = async (updatedData: Partial<YardPlacement>) => {
+    if (!selectedPlacement) return;
+
+    try {
+      const response = await yardLayoutApi.updatePlacement(selectedPlacement.id, updatedData);
+      if (response.success) {
+        const updated = response.data as YardPlacement;
+        setPlacements((prev) => prev.map((p) => (p.id === updated.id ? updated : p)));
+        setSelectedPlacement(updated);
+        setShowConfigPanel(false);
+      }
+    } catch (error) {
+      console.error("설정 저장 실패:", error);
+      setError("설정 저장에 실패했습니다.");
+    }
+  };
+
+  // 요소가 설정되었는지 확인
+  const isConfigured = (placement: YardPlacement): boolean => {
+    return !!(placement.material_name && placement.quantity && placement.unit);
+  };
 
   return (
     <div className="flex h-full flex-col bg-white">
@@ -264,6 +213,14 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
         </Button>
       </div>
 
+      {/* 에러 메시지 */}
+      {error && (
+        <Alert variant="destructive" className="m-4">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
       {/* 메인 컨텐츠 영역 */}
       <div className="flex flex-1 overflow-hidden">
         {/* 좌측: 3D 캔버스 */}
@@ -276,152 +233,104 @@ export default function YardEditor({ layout, onBack }: YardEditorProps) {
             <Yard3DCanvas
               placements={placements}
               selectedPlacementId={selectedPlacement?.id || null}
-              onPlacementClick={(placement) => setSelectedPlacement(placement as YardPlacement)}
+              onPlacementClick={(placement) => handleSelectPlacement(placement as YardPlacement)}
               onPlacementDrag={handlePlacementDrag}
             />
           )}
         </div>
 
-        {/* 우측: 자재 목록 또는 편집 패널 */}
+        {/* 우측: 요소 목록 또는 설정 패널 */}
         <div className="w-80 border-l bg-white">
-          {selectedPlacement ? (
-            // 선택된 자재 편집 패널
-            <div className="flex h-full flex-col">
-              <div className="flex items-center justify-between border-b p-4">
-                <h3 className="text-sm font-semibold">자재 정보</h3>
-                <Button variant="ghost" size="sm" onClick={() => setSelectedPlacement(null)}>
-                  <X className="h-4 w-4" />
-                </Button>
-              </div>
-
-              <div className="flex-1 overflow-auto p-4">
-                <div className="space-y-4">
-                  {/* 읽기 전용 정보 */}
-                  <div>
-                    <Label className="text-xs text-gray-500">자재 코드</Label>
-                    <div className="mt-1 text-sm font-medium">{selectedPlacement.material_code}</div>
-                  </div>
-
-                  <div>
-                    <Label className="text-xs text-gray-500">자재명</Label>
-                    <div className="mt-1 text-sm font-medium">{selectedPlacement.material_name}</div>
-                  </div>
-
-                  <div>
-                    <Label className="text-xs text-gray-500">수량 (변경 불가)</Label>
-                    <div className="mt-1 text-sm">
-                      {selectedPlacement.quantity} {selectedPlacement.unit}
-                    </div>
-                  </div>
-
-                  {/* 편집 가능 정보 */}
-                  <div className="space-y-3 border-t pt-4">
-                    <Label className="text-sm font-semibold">배치 정보</Label>
-
-                    <div className="grid grid-cols-3 gap-2">
-                      <div>
-                        <Label className="text-xs">너비</Label>
-                        <Input
-                          type="number"
-                          step="1"
-                          value={editValues.size_x}
-                          onChange={(e) => {
-                            const newValue = parseFloat(e.target.value) || 1;
-                            setEditValues((prev) => ({ ...prev, size_x: newValue }));
-                            handlePlacementUpdate(selectedPlacement.id, { size_x: newValue });
-                          }}
-                        />
-                      </div>
-                      <div>
-                        <Label className="text-xs">높이</Label>
-                        <Input
-                          type="number"
-                          step="1"
-                          value={editValues.size_y}
-                          onChange={(e) => {
-                            const newValue = parseFloat(e.target.value) || 1;
-                            setEditValues((prev) => ({ ...prev, size_y: newValue }));
-                            handlePlacementUpdate(selectedPlacement.id, { size_y: newValue });
-                          }}
-                        />
-                      </div>
-                      <div>
-                        <Label className="text-xs">깊이</Label>
-                        <Input
-                          type="number"
-                          step="1"
-                          value={editValues.size_z}
-                          onChange={(e) => {
-                            const newValue = parseFloat(e.target.value) || 1;
-                            setEditValues((prev) => ({ ...prev, size_z: newValue }));
-                            handlePlacementUpdate(selectedPlacement.id, { size_z: newValue });
-                          }}
-                        />
-                      </div>
-                    </div>
-
-                    <div>
-                      <Label className="text-xs">색상</Label>
-                      <Input
-                        type="color"
-                        value={editValues.color}
-                        onChange={(e) => {
-                          setEditValues((prev) => ({ ...prev, color: e.target.value }));
-                          handlePlacementUpdate(selectedPlacement.id, { color: e.target.value });
-                        }}
-                      />
-                    </div>
-                  </div>
-
-                  <Button
-                    variant="destructive"
-                    size="sm"
-                    className="w-full"
-                    onClick={() => handlePlacementRemove(selectedPlacement.id)}
-                  >
-                    배치 해제
-                  </Button>
-                </div>
-              </div>
-            </div>
+          {showConfigPanel && selectedPlacement ? (
+            // 설정 패널
+            <YardElementConfigPanel
+              placement={selectedPlacement}
+              onSave={handleSaveConfig}
+              onCancel={() => setShowConfigPanel(false)}
+            />
           ) : (
-            // 자재 목록
+            // 요소 목록
             <div className="flex h-full flex-col">
               <div className="border-b p-4">
-                <h3 className="mb-2 text-sm font-semibold">자재 목록</h3>
-                <Input
-                  placeholder="자재 검색..."
-                  value={searchTerm}
-                  onChange={(e) => setSearchTerm(e.target.value)}
-                  className="text-sm"
-                />
+                <div className="mb-3 flex items-center justify-between">
+                  <h3 className="text-sm font-semibold">요소 목록</h3>
+                  <Button size="sm" onClick={handleAddElement}>
+                    <Plus className="mr-1 h-4 w-4" />
+                    요소 추가
+                  </Button>
+                </div>
+                <p className="text-xs text-gray-500">총 {placements.length}개</p>
               </div>
 
-              <div className="flex-1 overflow-auto">
-                {filteredMaterials.length === 0 ? (
+              <div className="flex-1 overflow-auto p-2">
+                {placements.length === 0 ? (
                   <div className="flex h-full items-center justify-center p-4 text-center text-sm text-gray-500">
-                    검색 결과가 없습니다
+                    요소가 없습니다.
+                    <br />
+                    위의 "요소 추가" 버튼을 클릭하세요.
                   </div>
                 ) : (
-                  <div className="p-2">
-                    {filteredMaterials.map((material) => {
-                      const isPlaced = placements.some((p) => p.material_code === material.material_code);
+                  <div className="space-y-2">
+                    {placements.map((placement) => {
+                      const configured = isConfigured(placement);
+                      const isSelected = selectedPlacement?.id === placement.id;
+
                       return (
-                        <button
-                          key={material.id}
-                          onClick={() => !isPlaced && handleMaterialClick(material)}
-                          disabled={isPlaced}
-                          className={`mb-2 w-full rounded-lg border p-3 text-left transition-all ${
-                            isPlaced
-                              ? "cursor-not-allowed border-gray-200 bg-gray-50 opacity-50"
-                              : "cursor-pointer border-gray-200 bg-white hover:border-blue-500 hover:shadow-sm"
+                        <div
+                          key={placement.id}
+                          className={`rounded-lg border p-3 transition-all ${
+                            isSelected
+                              ? "border-blue-500 bg-blue-50"
+                              : configured
+                                ? "border-gray-200 bg-white hover:border-gray-300"
+                                : "border-orange-200 bg-orange-50"
                           }`}
+                          onClick={() => handleSelectPlacement(placement)}
                         >
-                          <div className="mb-1 text-sm font-medium text-gray-900">{material.material_name}</div>
-                          <div className="text-xs text-gray-500">{material.material_code}</div>
-                          <div className="mt-1 text-xs text-gray-400">{material.category}</div>
-                          {isPlaced && <div className="mt-1 text-xs text-blue-600">배치됨</div>}
-                        </button>
+                          <div className="flex items-start justify-between">
+                            <div className="flex-1">
+                              {configured ? (
+                                <>
+                                  <div className="text-sm font-medium text-gray-900">{placement.material_name}</div>
+                                  <div className="mt-1 text-xs text-gray-500">
+                                    수량: {placement.quantity} {placement.unit}
+                                  </div>
+                                </>
+                              ) : (
+                                <>
+                                  <div className="text-sm font-medium text-orange-700">요소 #{placement.id}</div>
+                                  <div className="mt-1 text-xs text-orange-600">데이터 바인딩 설정 필요</div>
+                                </>
+                              )}
+                            </div>
+                          </div>
+
+                          <div className="mt-2 flex gap-1">
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="flex-1"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleConfigClick(placement);
+                              }}
+                            >
+                              <Settings className="mr-1 h-3 w-3" />
+                              {configured ? "편집" : "설정"}
+                            </Button>
+                            <Button
+                              variant="outline"
+                              size="sm"
+                              className="text-red-600 hover:bg-red-50"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleDeletePlacement(placement.id);
+                              }}
+                            >
+                              <Trash2 className="h-3 w-3" />
+                            </Button>
+                          </div>
+                        </div>
                       );
                     })}
                   </div>

frontend/components/admin/dashboard/widgets/yard-3d/types.ts

@@ -0,0 +1,86 @@
+// 야드 관리 3D - 타입 정의
+
+import { ChartDataSource } from "../../types";
+
+// 야드 레이아웃
+export interface YardLayout {
+  id: number;
+  name: string;
+  description?: string;
+  placement_count?: number;
+  created_by?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+// 데이터 소스 설정
+export interface YardDataSourceConfig {
+  type: "database" | "external_db" | "rest_api";
+
+  // type === 'database' (현재 DB)
+  query?: string;
+
+  // type === 'external_db' (외부 DB)
+  connectionId?: number;
+
+  // type === 'rest_api'
+  url?: string;
+  method?: "GET" | "POST";
+  headers?: Record<string, string>;
+  queryParams?: Record<string, string>;
+  body?: string;
+  dataPath?: string; // 응답에서 데이터 배열 경로
+}
+
+// 데이터 바인딩 설정
+export interface YardDataBinding {
+  // 데이터 소스의 특정 행 선택
+  selectedRowIndex?: number;
+
+  // 필드 매핑 (데이터 소스에서 선택)
+  materialNameField?: string; // 자재명이 들어있는 컬럼명
+  quantityField?: string; // 수량이 들어있는 컬럼명
+
+  // 단위는 사용자가 직접 입력
+  unit: string; // 예: "EA", "BOX", "KG", "M" 등
+}
+
+// 자재 배치 정보
+export interface YardPlacement {
+  id: number;
+  yard_layout_id: number;
+  material_code?: string | null;
+  material_name?: string | null;
+  quantity?: number | null;
+  unit?: string | null;
+  position_x: number;
+  position_y: number;
+  position_z: number;
+  size_x: number;
+  size_y: number;
+  size_z: number;
+  color: string;
+  data_source_type?: string | null;
+  data_source_config?: YardDataSourceConfig | null;
+  data_binding?: YardDataBinding | null;
+  memo?: string | null;
+  created_at?: string;
+  updated_at?: string;
+}
+
+// 쿼리 결과 (데이터 바인딩용)
+export interface QueryResult {
+  columns: string[];
+  rows: Record<string, any>[];
+  totalRows: number;
+}
+
+// 요소 설정 단계
+export type ConfigStep = "data-source" | "field-mapping" | "placement-settings";
+
+// 설정 모달 props
+export interface YardElementConfigPanelProps {
+  placement: YardPlacement;
+  onSave: (updatedPlacement: Partial<YardPlacement>) => Promise<void>;
+  onCancel: () => void;
+}