[st] feat: 검증 항목 관리 페이지 작업
This commit is contained in:
+144
-141
@@ -6,180 +6,183 @@ import {
|
||||
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 { CodeSelect } from "@/entities/code/ui/code-select";
|
||||
import { verificationTargetManagementApi } from "@/entities/statistics/api/verification-target-management-service";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
import { ENDPOINT } from "@/shared/config";
|
||||
import type { VerificationTargetManagementSearchParams } from "@/entities/statistics/model/verification-target-management-interface";
|
||||
|
||||
const VerificationArticleManagement = () => {
|
||||
const [statsItm, setStatsItm] = useState("통계항목");
|
||||
const [vrfcNm, setVrfcNm] = useState("");
|
||||
const TAB_CONFIG = {
|
||||
HB: { value: "HB", label: "H-B", columnInfo: hbArticleColumnInfo },
|
||||
IMR: { value: "IMR", label: "I-MR", columnInfo: imrArticleColumnInfo },
|
||||
VV: {
|
||||
value: "VV",
|
||||
label: "Validation",
|
||||
columnInfo: validationArticleColumnInfo,
|
||||
},
|
||||
} as const;
|
||||
|
||||
// 각 탭별 데이터
|
||||
const [hbRowData, setHbRowData] = useState<
|
||||
Record<string, string | number>[]
|
||||
>(hbArticleMockData as unknown as Record<string, string | number>[]);
|
||||
type TabValue = keyof typeof TAB_CONFIG;
|
||||
|
||||
const [imrRowData, setImrRowData] = useState<
|
||||
Record<string, string | number>[]
|
||||
>(imrArticleMockData as unknown as Record<string, string | number>[]);
|
||||
function VerificationArticleManagement() {
|
||||
const [activeTab, setActiveTab] = useState<TabValue>("HB");
|
||||
const [statsCd, setStatsCd] = useState("");
|
||||
const [vrfcTrgtNm, setVrfcTrgtNm] = useState("");
|
||||
const [searchParams, setSearchParams] =
|
||||
useState<VerificationTargetManagementSearchParams>({
|
||||
vrfcMthdCd: activeTab,
|
||||
statsCd,
|
||||
vrfcTrgtNm,
|
||||
});
|
||||
|
||||
const [validationRowData, setValidationRowData] = useState<
|
||||
Record<string, string | number>[]
|
||||
>(
|
||||
validationArticleMockData as unknown as Record<
|
||||
string,
|
||||
string | number
|
||||
>[],
|
||||
);
|
||||
const { data: verificationData } = useQuery({
|
||||
queryKey: [ENDPOINT.STATVERIFY_SERVICE.VRFCTGT_MNG, searchParams],
|
||||
queryFn: async () => {
|
||||
const response =
|
||||
await verificationTargetManagementApi.getVerificationTargetManagementList(
|
||||
{
|
||||
vrfcMthdCd: searchParams.vrfcMthdCd,
|
||||
statsCd: searchParams.statsCd || undefined,
|
||||
vrfcTrgtNm: searchParams.vrfcTrgtNm || undefined,
|
||||
},
|
||||
);
|
||||
return response;
|
||||
},
|
||||
});
|
||||
|
||||
const handleSearch = () => {
|
||||
console.log("조회", { statsItm, vrfcNm });
|
||||
};
|
||||
const rowData = (verificationData?.content || []) as unknown as Record<
|
||||
string,
|
||||
string | number
|
||||
>[];
|
||||
const columnInfo = TAB_CONFIG[activeTab].columnInfo;
|
||||
|
||||
const handleReset = () => {
|
||||
setStatsItm("통계항목");
|
||||
setVrfcNm("");
|
||||
};
|
||||
function handleSearch() {
|
||||
setSearchParams({
|
||||
vrfcMthdCd: activeTab,
|
||||
statsCd,
|
||||
vrfcTrgtNm,
|
||||
});
|
||||
}
|
||||
|
||||
const handleInitialize = () => {
|
||||
console.log("초기화");
|
||||
};
|
||||
function handleInitialize() {
|
||||
setStatsCd("");
|
||||
setVrfcTrgtNm("");
|
||||
setSearchParams({
|
||||
vrfcMthdCd: activeTab,
|
||||
statsCd: "",
|
||||
vrfcTrgtNm: "",
|
||||
});
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
console.log("저장");
|
||||
};
|
||||
function handleTabChange(value: string) {
|
||||
const newTab = value as TabValue;
|
||||
setActiveTab(newTab);
|
||||
setSearchParams({
|
||||
vrfcMthdCd: newTab,
|
||||
statsCd,
|
||||
vrfcTrgtNm,
|
||||
});
|
||||
}
|
||||
|
||||
const handleDelete = () => {
|
||||
console.log("등록");
|
||||
};
|
||||
|
||||
// 행 클릭 이벤트 핸들러
|
||||
const handleRowClick = (rowData: Record<string, string | number>) => {
|
||||
function handleRowClick(rowData: Record<string, string | number>) {
|
||||
console.log("클릭한 행 데이터:", rowData);
|
||||
// 여기에 필요한 로직 추가 (예: 상세 정보 표시, 수정 모달 열기 등)
|
||||
};
|
||||
}
|
||||
|
||||
function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
handleSearch();
|
||||
}
|
||||
|
||||
return (
|
||||
<Tabs defaultValue="HB">
|
||||
{/* 탭 리스트 */}
|
||||
<Tabs
|
||||
defaultValue="HB"
|
||||
value={activeTab}
|
||||
onValueChange={handleTabChange}
|
||||
>
|
||||
<TabsList>
|
||||
<TabsTrigger
|
||||
value="HB"
|
||||
className="!px-[2rem] !py-[0.8rem] !text-[1.2rem]"
|
||||
>
|
||||
H-B
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="IMR"
|
||||
className="!px-[2rem] !py-[0.8rem] !text-[1.2rem]"
|
||||
>
|
||||
I-MR
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="VALIDATION"
|
||||
className="!px-[2rem] !py-[0.8rem] !text-[1.2rem]"
|
||||
>
|
||||
Validation
|
||||
</TabsTrigger>
|
||||
{Object.entries(TAB_CONFIG).map(([key, config]) => (
|
||||
<TabsTrigger
|
||||
key={key}
|
||||
value={config.value}
|
||||
className="!px-[2rem] !py-[0.8rem] !text-[1.2rem]"
|
||||
>
|
||||
{config.label}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
|
||||
<div className="card card-border !mx-0">
|
||||
<div className="flex items-center gap-4">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<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>
|
||||
<CodeSelect
|
||||
upCd="STITEM"
|
||||
value={statsCd}
|
||||
onValueChange={setStatsCd}
|
||||
placeholder="통계항목"
|
||||
className="w-[16rem]"
|
||||
/>
|
||||
</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="flex items-center gap-4">
|
||||
<Label className="whitespace-nowrap px-4 text-label">
|
||||
검증명
|
||||
</Label>
|
||||
<Input
|
||||
value={vrfcTrgtNm}
|
||||
onChange={(e) => setVrfcTrgtNm(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 className="ml-auto flex gap-2">
|
||||
<Button
|
||||
type="submit"
|
||||
color="green"
|
||||
className="h-[3.6rem] w-[80px]"
|
||||
>
|
||||
조회
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
color="gray"
|
||||
className="h-[3.6rem] w-[80px]"
|
||||
onClick={handleInitialize}
|
||||
>
|
||||
초기화
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* H-B 탭 콘텐츠 */}
|
||||
<TabsContent value="HB">
|
||||
<DataGrid
|
||||
columnInfo={hbArticleColumnInfo}
|
||||
rowData={hbRowData}
|
||||
setRowData={setHbRowData}
|
||||
onRowClick={handleRowClick}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
{/* I-MR 탭 콘텐츠 */}
|
||||
<TabsContent value="IMR">
|
||||
<DataGrid
|
||||
columnInfo={imrArticleColumnInfo}
|
||||
rowData={imrRowData}
|
||||
setRowData={setImrRowData}
|
||||
onRowClick={handleRowClick}
|
||||
/>
|
||||
</TabsContent>
|
||||
|
||||
{/* Validation 탭 콘텐츠 */}
|
||||
<TabsContent value="VALIDATION">
|
||||
<DataGrid
|
||||
columnInfo={validationArticleColumnInfo}
|
||||
rowData={validationRowData}
|
||||
setRowData={setValidationRowData}
|
||||
onRowClick={handleRowClick}
|
||||
/>
|
||||
</TabsContent>
|
||||
{Object.entries(TAB_CONFIG).map(([key, config]) => (
|
||||
<TabsContent key={key} value={config.value}>
|
||||
<DataGrid
|
||||
columnInfo={columnInfo}
|
||||
rowData={rowData}
|
||||
setRowData={() => {}}
|
||||
onRowClick={handleRowClick}
|
||||
isExcelImport={false}
|
||||
/>
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default VerificationArticleManagement;
|
||||
|
||||
Reference in New Issue
Block a user