바코드 기능 커밋밋

frontend/app/(main)/admin/screenMng/barcodeList/designer/[labelId]/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { BarcodeDesignerToolbar } from "@/components/barcode/designer/BarcodeDesignerToolbar";
+import { BarcodeDesignerLeftPanel } from "@/components/barcode/designer/BarcodeDesignerLeftPanel";
+import { BarcodeDesignerCanvas } from "@/components/barcode/designer/BarcodeDesignerCanvas";
+import { BarcodeDesignerRightPanel } from "@/components/barcode/designer/BarcodeDesignerRightPanel";
+import { BarcodeDesignerProvider } from "@/contexts/BarcodeDesignerContext";
+
+export default function BarcodeLabelDesignerPage() {
+  const params = useParams();
+  const labelId = (params.labelId as string) || "new";
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <BarcodeDesignerProvider labelId={labelId}>
+        <div className="flex h-screen flex-col overflow-hidden bg-gray-50">
+          <BarcodeDesignerToolbar />
+          <div className="flex flex-1 overflow-hidden">
+            <BarcodeDesignerLeftPanel />
+            <BarcodeDesignerCanvas />
+            <BarcodeDesignerRightPanel />
+          </div>
+        </div>
+      </BarcodeDesignerProvider>
+    </DndProvider>
+  );
+}

frontend/app/(main)/admin/screenMng/barcodeList/page.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { BarcodeListTable } from "@/components/barcode/BarcodeListTable";
+import { Plus, Search, RotateCcw } from "lucide-react";
+import { useBarcodeList } from "@/hooks/useBarcodeList";
+
+export default function BarcodeLabelManagementPage() {
+  const router = useRouter();
+  const [searchText, setSearchText] = useState("");
+
+  const { labels, total, page, limit, isLoading, refetch, setPage, handleSearch } = useBarcodeList();
+
+  const handleSearchClick = () => {
+    handleSearch(searchText);
+  };
+
+  const handleReset = () => {
+    setSearchText("");
+    handleSearch("");
+  };
+
+  const handleCreateNew = () => {
+    router.push("/admin/screenMng/barcodeList/designer/new");
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="w-full max-w-none space-y-8 px-4 py-8">
+        <div className="flex items-center justify-between rounded-lg border bg-white p-6 shadow-sm">
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">바코드 라벨 관리</h1>
+            <p className="mt-2 text-gray-600">ZD421 등 바코드 프린터용 라벨을 작성하고 출력합니다</p>
+          </div>
+          <Button onClick={handleCreateNew} className="gap-2">
+            <Plus className="h-4 w-4" />
+            새 라벨
+          </Button>
+        </div>
+
+        <Card className="shadow-sm">
+          <CardHeader className="bg-gray-50/50">
+            <CardTitle className="flex items-center gap-2">
+              <Search className="h-5 w-5" />
+              검색
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="pt-6">
+            <div className="flex gap-2">
+              <Input
+                placeholder="라벨명으로 검색..."
+                value={searchText}
+                onChange={(e) => setSearchText(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    handleSearchClick();
+                  }
+                }}
+                className="flex-1"
+              />
+              <Button onClick={handleSearchClick} className="gap-2">
+                <Search className="h-4 w-4" />
+                검색
+              </Button>
+              <Button onClick={handleReset} variant="outline" className="gap-2">
+                <RotateCcw className="h-4 w-4" />
+                초기화
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="shadow-sm">
+          <CardHeader className="bg-gray-50/50">
+            <CardTitle className="flex items-center justify-between">
+              <span className="flex items-center gap-2">
+                바코드 라벨 목록
+                <span className="text-muted-foreground text-sm font-normal">(총 {total}건)</span>
+              </span>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="p-0">
+            <BarcodeListTable
+              labels={labels}
+              total={total}
+              page={page}
+              limit={limit}
+              isLoading={isLoading}
+              onPageChange={setPage}
+              onRefresh={refetch}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}