일단 야드관리 3d 드래그앤 드랍까지

2025-10-17 15:26:21 +09:00
parent b41da3261c
commit 184d687f0f
23 changed files with 3401 additions and 96 deletions
--- a/frontend/components/admin/dashboard/widgets/yard-3d/YardLayoutCreateModal.tsx
+++ b/frontend/components/admin/dashboard/widgets/yard-3d/YardLayoutCreateModal.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Loader2 } from "lucide-react";
+
+interface YardLayoutCreateModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreate: (name: string, description: string) => Promise<void>;
+}
+
+export default function YardLayoutCreateModal({ isOpen, onClose, onCreate }: YardLayoutCreateModalProps) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [isCreating, setIsCreating] = useState(false);
+  const [error, setError] = useState("");
+
+  // 생성 실행
+  const handleCreate = async () => {
+    if (!name.trim()) {
+      setError("야드 이름을 입력하세요");
+      return;
+    }
+
+    setIsCreating(true);
+    setError("");
+
+    try {
+      await onCreate(name.trim(), description.trim());
+      setName("");
+      setDescription("");
+    } catch (error: any) {
+      console.error("야드 생성 실패:", error);
+      setError(error.message || "야드 생성에 실패했습니다");
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  // 모달 닫기
+  const handleClose = () => {
+    if (isCreating) return;
+    setName("");
+    setDescription("");
+    setError("");
+    onClose();
+  };
+
+  // Enter 키 처리
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleCreate();
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>새 야드 생성</DialogTitle>
+          <DialogDescription>야드의 이름과 설명을 입력하세요</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* 야드 이름 */}
+          <div className="space-y-2">
+            <Label htmlFor="yard-name">
+              야드 이름 <span className="text-red-500">*</span>
+            </Label>
+            <Input
+              id="yard-name"
+              value={name}
+              onChange={(e) => {
+                setName(e.target.value);
+                setError("");
+              }}
+              onKeyDown={handleKeyDown}
+              placeholder="예: A구역, 1번 야드"
+              disabled={isCreating}
+              autoFocus
+            />
+          </div>
+
+          {/* 설명 */}
+          <div className="space-y-2">
+            <Label htmlFor="yard-description">설명</Label>
+            <Textarea
+              id="yard-description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="야드에 대한 설명을 입력하세요 (선택사항)"
+              rows={3}
+              disabled={isCreating}
+            />
+          </div>
+
+          {/* 에러 메시지 */}
+          {error && <div className="rounded-md bg-red-50 p-3 text-sm text-red-600">{error}</div>}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose} disabled={isCreating}>
+            취소
+          </Button>
+          <Button onClick={handleCreate} disabled={!name.trim() || isCreating}>
+            {isCreating ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                생성 중...
+              </>
+            ) : (
+              "생성"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}