[st] feat: 검증 항목 관리 레이아웃 작업

2026-02-11 15:42:01 +09:00
parent 057175b65c
commit c439d3e58a
4 changed files with 504 additions and 0 deletions
@@ -0,0 +1,173 @@
+"use client";
+
+import DataGrid from "@/components/module/DataGrid";
+import {
+    hbArticleColumnInfo,
+    imrArticleColumnInfo,
+    validationArticleColumnInfo,
+} from "@/entities/statistics/model/verification-article-column";
+import {
+    hbArticleMockData,
+    imrArticleMockData,
+    validationArticleMockData,
+} from "@/entities/statistics/model/verification-article-mock";
+import {
+    Button,
+    Input,
+    Label,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    Tabs,
+    TabsContent,
+    TabsList,
+    TabsTrigger,
+} from "@common/components";
+import { useState } from "react";
+
+const VerificationArticleManagement = () => {
+    const [statsItm, setStatsItm] = useState("통계항목");
+    const [vrfcNm, setVrfcNm] = useState("");
+
+    // 각 탭별 데이터
+    const [hbRowData, setHbRowData] = useState<
+        Record<string, string | number>[]
+    >(hbArticleMockData as unknown as Record<string, string | number>[]);
+
+    const [imrRowData, setImrRowData] = useState<
+        Record<string, string | number>[]
+    >(imrArticleMockData as unknown as Record<string, string | number>[]);
+
+    const [validationRowData, setValidationRowData] = useState<
+        Record<string, string | number>[]
+    >(
+        validationArticleMockData as unknown as Record<
+            string,
+            string | number
+        >[],
+    );
+
+    const handleSearch = () => {
+        console.log("조회", { statsItm, vrfcNm });
+    };
+
+    const handleReset = () => {
+        setStatsItm("통계항목");
+        setVrfcNm("");
+    };
+
+    const handleInitialize = () => {
+        console.log("초기화");
+    };
+
+    const handleSave = () => {
+        console.log("저장");
+    };
+
+    const handleDelete = () => {
+        console.log("등록");
+    };
+
+    return (
+        <Tabs variant="underline" defaultValue="HB">
+            {/* 탭 리스트 */}
+            <TabsList>
+                <TabsTrigger value="HB">H-B</TabsTrigger>
+                <TabsTrigger value="IMR">I-MR</TabsTrigger>
+                <TabsTrigger value="VALIDATION">Validation</TabsTrigger>
+            </TabsList>
+
+            <div className="card card-border !mx-0">
+                <div className="flex items-end gap-4">
+                    <div className="flex items-center gap-4">
+                        <Label className="whitespace-nowrap px-4 text-label">
+                            통계항목
+                        </Label>
+                        <Select value={statsItm} onValueChange={setStatsItm}>
+                            <SelectTrigger className="w-[16rem]">
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="통계항목">
+                                    통계항목
+                                </SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </div>
+
+                    <div className="flex items-center gap-4">
+                        <Label className="whitespace-nowrap px-4 text-label">
+                            검증명
+                        </Label>
+                        <Input
+                            value={vrfcNm}
+                            onChange={(e) => setVrfcNm(e.target.value)}
+                            placeholder="검증명"
+                            className="w-[20rem]"
+                        />
+                    </div>
+
+                    <div className="ml-auto flex gap-2">
+                        <Button
+                            color="green"
+                            className="h-[3.6rem] w-[80px]"
+                            onClick={handleSearch}
+                        >
+                            조회
+                        </Button>
+                        <Button
+                            color="gray"
+                            className="h-[3.6rem] w-[80px]"
+                            onClick={handleInitialize}
+                        >
+                            초기화
+                        </Button>
+                    </div>
+                </div>
+            </div>
+
+            {/* H-B 탭 콘텐츠 */}
+            <TabsContent value="HB">
+                {/* 데이터 그리드 */}
+                <DataGrid
+                    columnInfo={hbArticleColumnInfo}
+                    rowData={hbRowData}
+                    setRowData={setHbRowData}
+                    isExcelImport={false}
+                    isExcelExport={false}
+                    showHeaderCheckbox={false}
+                />
+            </TabsContent>
+
+            {/* I-MR 탭 콘텐츠 */}
+            <TabsContent value="IMR">
+                {/* 데이터 그리드 */}
+                <DataGrid
+                    columnInfo={imrArticleColumnInfo}
+                    rowData={imrRowData}
+                    setRowData={setImrRowData}
+                    isExcelImport={false}
+                    isExcelExport={false}
+                    showHeaderCheckbox={false}
+                />
+            </TabsContent>
+
+            {/* Validation 탭 콘텐츠 */}
+            <TabsContent value="VALIDATION">
+                {/* 데이터 그리드 */}
+                <DataGrid
+                    columnInfo={validationArticleColumnInfo}
+                    rowData={validationRowData}
+                    setRowData={setValidationRowData}
+                    isExcelImport={false}
+                    isExcelExport={false}
+                    showHeaderCheckbox={false}
+                />
+            </TabsContent>
+        </Tabs>
+    );
+};
+
+export default VerificationArticleManagement;