[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;
@@ -0,0 +1,180 @@
+import type { ColumnInfo } from "@rsone/components";
+
+/** H-B 탭 그리드 컬럼 설정 */
+export const hbArticleColumnInfo: ColumnInfo = {
+    columns: [
+        {
+            name: "no",
+            fieldName: "no",
+            header: { text: "순번" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "statsItmNm",
+            fieldName: "statsItmNm",
+            header: { text: "통계 항목" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "vrfcNm",
+            fieldName: "vrfcNm",
+            header: { text: "검증명" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "dataBlck",
+            fieldName: "dataBlck",
+            header: { text: "데이터블럭" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "colNm",
+            fieldName: "colNm",
+            header: { text: "컬럼명" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "cmpDataBlck",
+            fieldName: "cmpDataBlck",
+            header: { text: "비교 데이터블럭" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "cmpColNm",
+            fieldName: "cmpColNm",
+            header: { text: "비교 컬럼명" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "bscRul",
+            fieldName: "bscRul",
+            header: { text: "기본규칙" },
+            editable: false,
+            sortdisable: false,
+        },
+    ],
+    columnLayout: [
+        "no",
+        "statsItmNm",
+        "vrfcNm",
+        "dataBlck",
+        "colNm",
+        "cmpDataBlck",
+        "cmpColNm",
+        "bscRul",
+    ],
+};
+
+/** I-MR 탭 그리드 컬럼 설정 */
+export const imrArticleColumnInfo: ColumnInfo = {
+    columns: [
+        {
+            name: "no",
+            fieldName: "no",
+            header: { text: "순번" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "statsItmNm",
+            fieldName: "statsItmNm",
+            header: { text: "통계 항목" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "vrfcNm",
+            fieldName: "vrfcNm",
+            header: { text: "검증명" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "dataBlck",
+            fieldName: "dataBlck",
+            header: { text: "데이터블럭" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "colNm",
+            fieldName: "colNm",
+            header: { text: "컬럼명" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "cmpDataBlck",
+            fieldName: "cmpDataBlck",
+            header: { text: "비교 데이터블럭" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "cmpColNm",
+            fieldName: "cmpColNm",
+            header: { text: "비교 컬럼명" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "bscRul",
+            fieldName: "bscRul",
+            header: { text: "기본규칙" },
+            editable: false,
+            sortdisable: false,
+        },
+    ],
+    columnLayout: [
+        "no",
+        "statsItmNm",
+        "vrfcNm",
+        "dataBlck",
+        "colNm",
+        "cmpDataBlck",
+        "cmpColNm",
+        "bscRul",
+    ],
+};
+
+/** Validation 탭 그리드 컬럼 설정 */
+export const validationArticleColumnInfo: ColumnInfo = {
+    columns: [
+        {
+            name: "statsItmNm",
+            fieldName: "statsItmNm",
+            header: { text: "통계항목" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "vrfcNm",
+            fieldName: "vrfcNm",
+            header: { text: "검증명" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "dataBlck",
+            fieldName: "dataBlck",
+            header: { text: "데이터블럭" },
+            editable: false,
+            sortdisable: false,
+        },
+        {
+            name: "colNm",
+            fieldName: "colNm",
+            header: { text: "컬럼명" },
+            editable: false,
+            sortdisable: false,
+        },
+    ],
+    columnLayout: ["statsItmNm", "vrfcNm", "dataBlck", "colNm"],
+};
@@ -0,0 +1,51 @@
+/** H-B 탭 검증 항목 */
+export interface HBArticleItem {
+    /** 순번 */
+    no: string;
+    /** 통계 항목명 */
+    statsItmNm: string;
+    /** 검증명 */
+    vrfcNm: string;
+    /** 데이터블럭 */
+    dataBlck: string;
+    /** 컬럼명 */
+    colNm: string;
+    /** 비교 데이터블럭 */
+    cmpDataBlck: string;
+    /** 비교 컬럼명 */
+    cmpColNm: string;
+    /** 기본규칙 */
+    bscRul: string;
+}
+
+/** I-MR 탭 검증 항목 */
+export interface IMRArticleItem {
+    /** 순번 */
+    no: string;
+    /** 통계 항목명 */
+    statsItmNm: string;
+    /** 검증명 */
+    vrfcNm: string;
+    /** 데이터블럭 */
+    dataBlck: string;
+    /** 컬럼명 */
+    colNm: string;
+    /** 비교 데이터블럭 */
+    cmpDataBlck: string;
+    /** 비교 컬럼명 */
+    cmpColNm: string;
+    /** 기본규칙 */
+    bscRul: string;
+}
+
+/** Validation 탭 검증 항목 */
+export interface ValidationArticleItem {
+    /** 통계항목 */
+    statsItmNm: string;
+    /** 검증명 */
+    vrfcNm: string;
+    /** 데이터블럭 */
+    dataBlck: string;
+    /** 컬럼명 */
+    colNm: string;
+}
@@ -0,0 +1,100 @@
+import { fakerKO as faker } from "@faker-js/faker";
+import type {
+    HBArticleItem,
+    IMRArticleItem,
+    ValidationArticleItem,
+} from "./verification-article-interface";
+
+const HB_STATS_ITEMS = [
+    "하수도 보급률",
+    "하수관로",
+    "하수처리시설 및 방류량보고",
+    "펌프장",
+    "공공하수처리시설",
+    "분뇨처리시설",
+    "개인하수처리시설",
+    "하수도재정",
+    "물 재이용",
+];
+
+const IMR_STATS_ITEMS = [
+    "하수도 보급률",
+    "하수관로",
+    "하수처리시설 및 방류량보고",
+    "펌프장",
+    "공공하수처리시설",
+    "분뇨처리시설",
+    "개인하수처리시설",
+    "하수도재정",
+    "물 재이용",
+];
+
+const VALIDATION_STATS_ITEMS = [
+    "하수관로 유지관리",
+    "하수저류시설 및 빗물펌프장",
+    "공공하수처리시설",
+    "분뇨처리시설",
+    "개인하수처리시설",
+    "하수도재정",
+];
+
+const VERIFICATION_NAMES = [
+    "제정별 사업비",
+    "관로길이",
+    "공란검증",
+    "범위검증",
+    "논리검증",
+    "유지보수",
+];
+
+/** H-B 탭 목데이터 생성 */
+export function createHBArticleMock(count = 10): HBArticleItem[] {
+    faker.seed(100);
+    return Array.from({ length: count }, (_, index) => ({
+        no: `H-B`,
+        statsItmNm: faker.helpers.arrayElement(HB_STATS_ITEMS),
+        vrfcNm: faker.helpers.arrayElement(VERIFICATION_NAMES),
+        dataBlck: `2025-02-01`,
+        colNm: "",
+        cmpDataBlck: "",
+        cmpColNm: "",
+        bscRul: "",
+    }));
+}
+
+/** I-MR 탭 목데이터 생성 */
+export function createIMRArticleMock(count = 10): IMRArticleItem[] {
+    faker.seed(200);
+    return Array.from({ length: count }, (_, index) => ({
+        no: `I-MR`,
+        statsItmNm: faker.helpers.arrayElement(IMR_STATS_ITEMS),
+        vrfcNm: faker.helpers.arrayElement(VERIFICATION_NAMES),
+        dataBlck: `2025-02-01`,
+        colNm: "",
+        cmpDataBlck: "",
+        cmpColNm: "",
+        bscRul: "",
+    }));
+}
+
+/** Validation 탭 목데이터 생성 */
+export function createValidationArticleMock(
+    count = 4,
+): ValidationArticleItem[] {
+    faker.seed(300);
+    return Array.from({ length: count }, (_, index) => ({
+        statsItmNm: faker.helpers.arrayElement(VALIDATION_STATS_ITEMS),
+        vrfcNm: faker.helpers.arrayElement(VERIFICATION_NAMES),
+        dataBlck: "",
+        colNm: "",
+    }));
+}
+
+/** H-B 탭 기본 목데이터 */
+export const hbArticleMockData = createHBArticleMock(10);
+
+/** I-MR 탭 기본 목데이터 */
+export const imrArticleMockData = createIMRArticleMock(10);
+
+/** Validation 탭 기본 목데이터 */
+export const validationArticleMockData = createValidationArticleMock(4);