refactor: Improve inspection management page functionality and UI

- Enhanced the rendering of the manager column to display user labels instead of IDs for better clarity.
- Updated the default state for the defect form to set is_active to "사용" upon creation.
- Simplified the badge rendering logic for the is_active status to improve readability.
- Adjusted the select component for active status to remove unnecessary options and streamline user interaction.

These changes aim to enhance the user experience and data representation in the inspection management process across multiple companies.
This commit is contained in:
kjs
2026-04-10 17:32:33 +09:00
parent 7c97ec8ea3
commit 58faa1f759
7 changed files with 84 additions and 119 deletions
@@ -188,9 +188,12 @@ export default function InspectionManagementPage() {
if (["inspection_type", "inspection_method", "judgment_criteria", "unit", "apply_type"].includes(col.key)) {
base.render = (v: any, row: any) => getCatLabel(INSPECTION_TABLE, col.key, row[col.key]);
}
if (col.key === "manager") {
base.render = (v: any, row: any) => userOptions.find((u) => u.code === row.manager)?.label || row.manager || "-";
}
return base;
});
}, [ts.visibleColumns, catOptions]); // eslint-disable-line react-hooks/exhaustive-deps
}, [ts.visibleColumns, catOptions, userOptions]); // eslint-disable-line react-hooks/exhaustive-deps
/* ═══════════════════ 데이터 조회 ═══════════════════ */
// 다중값 컬럼 (쉼표 구분 저장) — 서버 equals 대신 contains 사용
@@ -385,7 +388,7 @@ export default function InspectionManagementPage() {
/* ═══════════════════ 불량관리 CRUD ═══════════════════ */
const openDefCreate = async () => {
setDefForm({});
setDefForm({ is_active: "사용" });
setDefEditMode(false);
setNumberingRuleId(null);
setPreviewCode(null);
@@ -867,20 +870,16 @@ export default function InspectionManagementPage() {
</TableCell>
<TableCell>
<Badge
variant={
getCatLabel(DEFECT_TABLE, "is_active", row.is_active) === "사용"
? "default"
: "secondary"
}
variant={row.is_active === "사용" || row.is_active === "true" ? "default" : "secondary"}
className="text-[10px]"
>
{getCatLabel(DEFECT_TABLE, "is_active", row.is_active) || "-"}
{row.is_active === "사용" || row.is_active === "true" ? "사용" : row.is_active || "미사용"}
</Badge>
</TableCell>
<TableCell className="text-muted-foreground">
{row.reg_date || (row.created_date ? row.created_date.slice(0, 10) : "-")}
</TableCell>
<TableCell>{row.manager_id || "-"}</TableCell>
<TableCell>{userOptions.find((u) => u.code === row.manager_id)?.label || row.manager_id || "-"}</TableCell>
<TableCell className="text-muted-foreground">{row.remarks || "-"}</TableCell>
</TableRow>
);
@@ -1442,19 +1441,15 @@ export default function InspectionManagementPage() {
<div className="space-y-1.5">
<Label className="text-xs font-semibold"></Label>
<Select
value={defForm.is_active || "__none__"}
onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v === "__none__" ? "" : v }))}
value={defForm.is_active || "사용"}
onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v }))}
>
<SelectTrigger className="h-9">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__"> </SelectItem>
{(catOptions[`${DEFECT_TABLE}.is_active`] || []).map((o) => (
<SelectItem key={o.code} value={o.code}>
{o.label}
</SelectItem>
))}
<SelectItem value="사용"></SelectItem>
<SelectItem value="미사용"></SelectItem>
</SelectContent>
</Select>
</div>
@@ -188,9 +188,12 @@ export default function InspectionManagementPage() {
if (["inspection_type", "inspection_method", "judgment_criteria", "unit", "apply_type"].includes(col.key)) {
base.render = (v: any, row: any) => getCatLabel(INSPECTION_TABLE, col.key, row[col.key]);
}
if (col.key === "manager") {
base.render = (v: any, row: any) => userOptions.find((u) => u.code === row.manager)?.label || row.manager || "-";
}
return base;
});
}, [ts.visibleColumns, catOptions]); // eslint-disable-line react-hooks/exhaustive-deps
}, [ts.visibleColumns, catOptions, userOptions]); // eslint-disable-line react-hooks/exhaustive-deps
/* ═══════════════════ 데이터 조회 ═══════════════════ */
// 다중값 컬럼 (쉼표 구분 저장) — 서버 equals 대신 contains 사용
@@ -385,7 +388,7 @@ export default function InspectionManagementPage() {
/* ═══════════════════ 불량관리 CRUD ═══════════════════ */
const openDefCreate = async () => {
setDefForm({});
setDefForm({ is_active: "사용" });
setDefEditMode(false);
setNumberingRuleId(null);
setPreviewCode(null);
@@ -867,20 +870,16 @@ export default function InspectionManagementPage() {
</TableCell>
<TableCell>
<Badge
variant={
getCatLabel(DEFECT_TABLE, "is_active", row.is_active) === "사용"
? "default"
: "secondary"
}
variant={row.is_active === "사용" || row.is_active === "true" ? "default" : "secondary"}
className="text-[10px]"
>
{getCatLabel(DEFECT_TABLE, "is_active", row.is_active) || "-"}
{row.is_active === "사용" || row.is_active === "true" ? "사용" : row.is_active || "미사용"}
</Badge>
</TableCell>
<TableCell className="text-muted-foreground">
{row.reg_date || (row.created_date ? row.created_date.slice(0, 10) : "-")}
</TableCell>
<TableCell>{row.manager_id || "-"}</TableCell>
<TableCell>{userOptions.find((u) => u.code === row.manager_id)?.label || row.manager_id || "-"}</TableCell>
<TableCell className="text-muted-foreground">{row.remarks || "-"}</TableCell>
</TableRow>
);
@@ -1442,19 +1441,15 @@ export default function InspectionManagementPage() {
<div className="space-y-1.5">
<Label className="text-xs font-semibold"></Label>
<Select
value={defForm.is_active || "__none__"}
onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v === "__none__" ? "" : v }))}
value={defForm.is_active || "사용"}
onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v }))}
>
<SelectTrigger className="h-9">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__"> </SelectItem>
{(catOptions[`${DEFECT_TABLE}.is_active`] || []).map((o) => (
<SelectItem key={o.code} value={o.code}>
{o.label}
</SelectItem>
))}
<SelectItem value="사용"></SelectItem>
<SelectItem value="미사용"></SelectItem>
</SelectContent>
</Select>
</div>
@@ -188,9 +188,12 @@ export default function InspectionManagementPage() {
if (["inspection_type", "inspection_method", "judgment_criteria", "unit", "apply_type"].includes(col.key)) {
base.render = (v: any, row: any) => getCatLabel(INSPECTION_TABLE, col.key, row[col.key]);
}
if (col.key === "manager") {
base.render = (v: any, row: any) => userOptions.find((u) => u.code === row.manager)?.label || row.manager || "-";
}
return base;
});
}, [ts.visibleColumns, catOptions]); // eslint-disable-line react-hooks/exhaustive-deps
}, [ts.visibleColumns, catOptions, userOptions]); // eslint-disable-line react-hooks/exhaustive-deps
/* ═══════════════════ 데이터 조회 ═══════════════════ */
// 다중값 컬럼 (쉼표 구분 저장) — 서버 equals 대신 contains 사용
@@ -385,7 +388,7 @@ export default function InspectionManagementPage() {
/* ═══════════════════ 불량관리 CRUD ═══════════════════ */
const openDefCreate = async () => {
setDefForm({});
setDefForm({ is_active: "사용" });
setDefEditMode(false);
setNumberingRuleId(null);
setPreviewCode(null);
@@ -867,20 +870,16 @@ export default function InspectionManagementPage() {
</TableCell>
<TableCell>
<Badge
variant={
getCatLabel(DEFECT_TABLE, "is_active", row.is_active) === "사용"
? "default"
: "secondary"
}
variant={row.is_active === "사용" || row.is_active === "true" ? "default" : "secondary"}
className="text-[10px]"
>
{getCatLabel(DEFECT_TABLE, "is_active", row.is_active) || "-"}
{row.is_active === "사용" || row.is_active === "true" ? "사용" : row.is_active || "미사용"}
</Badge>
</TableCell>
<TableCell className="text-muted-foreground">
{row.reg_date || (row.created_date ? row.created_date.slice(0, 10) : "-")}
</TableCell>
<TableCell>{row.manager_id || "-"}</TableCell>
<TableCell>{userOptions.find((u) => u.code === row.manager_id)?.label || row.manager_id || "-"}</TableCell>
<TableCell className="text-muted-foreground">{row.remarks || "-"}</TableCell>
</TableRow>
);
@@ -1442,19 +1441,15 @@ export default function InspectionManagementPage() {
<div className="space-y-1.5">
<Label className="text-xs font-semibold"></Label>
<Select
value={defForm.is_active || "__none__"}
onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v === "__none__" ? "" : v }))}
value={defForm.is_active || "사용"}
onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v }))}
>
<SelectTrigger className="h-9">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__"> </SelectItem>
{(catOptions[`${DEFECT_TABLE}.is_active`] || []).map((o) => (
<SelectItem key={o.code} value={o.code}>
{o.label}
</SelectItem>
))}
<SelectItem value="사용"></SelectItem>
<SelectItem value="미사용"></SelectItem>
</SelectContent>
</Select>
</div>
@@ -188,9 +188,12 @@ export default function InspectionManagementPage() {
if (["inspection_type", "inspection_method", "judgment_criteria", "unit", "apply_type"].includes(col.key)) {
base.render = (v: any, row: any) => getCatLabel(INSPECTION_TABLE, col.key, row[col.key]);
}
if (col.key === "manager") {
base.render = (v: any, row: any) => userOptions.find((u) => u.code === row.manager)?.label || row.manager || "-";
}
return base;
});
}, [ts.visibleColumns, catOptions]); // eslint-disable-line react-hooks/exhaustive-deps
}, [ts.visibleColumns, catOptions, userOptions]); // eslint-disable-line react-hooks/exhaustive-deps
/* ═══════════════════ 데이터 조회 ═══════════════════ */
// 다중값 컬럼 (쉼표 구분 저장) — 서버 equals 대신 contains 사용
@@ -385,7 +388,7 @@ export default function InspectionManagementPage() {
/* ═══════════════════ 불량관리 CRUD ═══════════════════ */
const openDefCreate = async () => {
setDefForm({});
setDefForm({ is_active: "사용" });
setDefEditMode(false);
setNumberingRuleId(null);
setPreviewCode(null);
@@ -867,20 +870,16 @@ export default function InspectionManagementPage() {
</TableCell>
<TableCell>
<Badge
variant={
getCatLabel(DEFECT_TABLE, "is_active", row.is_active) === "사용"
? "default"
: "secondary"
}
variant={row.is_active === "사용" || row.is_active === "true" ? "default" : "secondary"}
className="text-[10px]"
>
{getCatLabel(DEFECT_TABLE, "is_active", row.is_active) || "-"}
{row.is_active === "사용" || row.is_active === "true" ? "사용" : row.is_active || "미사용"}
</Badge>
</TableCell>
<TableCell className="text-muted-foreground">
{row.reg_date || (row.created_date ? row.created_date.slice(0, 10) : "-")}
</TableCell>
<TableCell>{row.manager_id || "-"}</TableCell>
<TableCell>{userOptions.find((u) => u.code === row.manager_id)?.label || row.manager_id || "-"}</TableCell>
<TableCell className="text-muted-foreground">{row.remarks || "-"}</TableCell>
</TableRow>
);
@@ -1442,19 +1441,15 @@ export default function InspectionManagementPage() {
<div className="space-y-1.5">
<Label className="text-xs font-semibold"></Label>
<Select
value={defForm.is_active || "__none__"}
onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v === "__none__" ? "" : v }))}
value={defForm.is_active || "사용"}
onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v }))}
>
<SelectTrigger className="h-9">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__"> </SelectItem>
{(catOptions[`${DEFECT_TABLE}.is_active`] || []).map((o) => (
<SelectItem key={o.code} value={o.code}>
{o.label}
</SelectItem>
))}
<SelectItem value="사용"></SelectItem>
<SelectItem value="미사용"></SelectItem>
</SelectContent>
</Select>
</div>
@@ -188,9 +188,12 @@ export default function InspectionManagementPage() {
if (["inspection_type", "inspection_method", "judgment_criteria", "unit", "apply_type"].includes(col.key)) {
base.render = (v: any, row: any) => getCatLabel(INSPECTION_TABLE, col.key, row[col.key]);
}
if (col.key === "manager") {
base.render = (v: any, row: any) => userOptions.find((u) => u.code === row.manager)?.label || row.manager || "-";
}
return base;
});
}, [ts.visibleColumns, catOptions]); // eslint-disable-line react-hooks/exhaustive-deps
}, [ts.visibleColumns, catOptions, userOptions]); // eslint-disable-line react-hooks/exhaustive-deps
/* ═══════════════════ 데이터 조회 ═══════════════════ */
// 다중값 컬럼 (쉼표 구분 저장) — 서버 equals 대신 contains 사용
@@ -385,7 +388,7 @@ export default function InspectionManagementPage() {
/* ═══════════════════ 불량관리 CRUD ═══════════════════ */
const openDefCreate = async () => {
setDefForm({});
setDefForm({ is_active: "사용" });
setDefEditMode(false);
setNumberingRuleId(null);
setPreviewCode(null);
@@ -867,20 +870,16 @@ export default function InspectionManagementPage() {
</TableCell>
<TableCell>
<Badge
variant={
getCatLabel(DEFECT_TABLE, "is_active", row.is_active) === "사용"
? "default"
: "secondary"
}
variant={row.is_active === "사용" || row.is_active === "true" ? "default" : "secondary"}
className="text-[10px]"
>
{getCatLabel(DEFECT_TABLE, "is_active", row.is_active) || "-"}
{row.is_active === "사용" || row.is_active === "true" ? "사용" : row.is_active || "미사용"}
</Badge>
</TableCell>
<TableCell className="text-muted-foreground">
{row.reg_date || (row.created_date ? row.created_date.slice(0, 10) : "-")}
</TableCell>
<TableCell>{row.manager_id || "-"}</TableCell>
<TableCell>{userOptions.find((u) => u.code === row.manager_id)?.label || row.manager_id || "-"}</TableCell>
<TableCell className="text-muted-foreground">{row.remarks || "-"}</TableCell>
</TableRow>
);
@@ -1442,19 +1441,15 @@ export default function InspectionManagementPage() {
<div className="space-y-1.5">
<Label className="text-xs font-semibold"></Label>
<Select
value={defForm.is_active || "__none__"}
onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v === "__none__" ? "" : v }))}
value={defForm.is_active || "사용"}
onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v }))}
>
<SelectTrigger className="h-9">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__"> </SelectItem>
{(catOptions[`${DEFECT_TABLE}.is_active`] || []).map((o) => (
<SelectItem key={o.code} value={o.code}>
{o.label}
</SelectItem>
))}
<SelectItem value="사용"></SelectItem>
<SelectItem value="미사용"></SelectItem>
</SelectContent>
</Select>
</div>
@@ -188,9 +188,12 @@ export default function InspectionManagementPage() {
if (["inspection_type", "inspection_method", "judgment_criteria", "unit", "apply_type"].includes(col.key)) {
base.render = (v: any, row: any) => getCatLabel(INSPECTION_TABLE, col.key, row[col.key]);
}
if (col.key === "manager") {
base.render = (v: any, row: any) => userOptions.find((u) => u.code === row.manager)?.label || row.manager || "-";
}
return base;
});
}, [ts.visibleColumns, catOptions]); // eslint-disable-line react-hooks/exhaustive-deps
}, [ts.visibleColumns, catOptions, userOptions]); // eslint-disable-line react-hooks/exhaustive-deps
/* ═══════════════════ 데이터 조회 ═══════════════════ */
// 다중값 컬럼 (쉼표 구분 저장) — 서버 equals 대신 contains 사용
@@ -385,7 +388,7 @@ export default function InspectionManagementPage() {
/* ═══════════════════ 불량관리 CRUD ═══════════════════ */
const openDefCreate = async () => {
setDefForm({});
setDefForm({ is_active: "사용" });
setDefEditMode(false);
setNumberingRuleId(null);
setPreviewCode(null);
@@ -867,20 +870,16 @@ export default function InspectionManagementPage() {
</TableCell>
<TableCell>
<Badge
variant={
getCatLabel(DEFECT_TABLE, "is_active", row.is_active) === "사용"
? "default"
: "secondary"
}
variant={row.is_active === "사용" || row.is_active === "true" ? "default" : "secondary"}
className="text-[10px]"
>
{getCatLabel(DEFECT_TABLE, "is_active", row.is_active) || "-"}
{row.is_active === "사용" || row.is_active === "true" ? "사용" : row.is_active || "미사용"}
</Badge>
</TableCell>
<TableCell className="text-muted-foreground">
{row.reg_date || (row.created_date ? row.created_date.slice(0, 10) : "-")}
</TableCell>
<TableCell>{row.manager_id || "-"}</TableCell>
<TableCell>{userOptions.find((u) => u.code === row.manager_id)?.label || row.manager_id || "-"}</TableCell>
<TableCell className="text-muted-foreground">{row.remarks || "-"}</TableCell>
</TableRow>
);
@@ -1442,19 +1441,15 @@ export default function InspectionManagementPage() {
<div className="space-y-1.5">
<Label className="text-xs font-semibold"></Label>
<Select
value={defForm.is_active || "__none__"}
onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v === "__none__" ? "" : v }))}
value={defForm.is_active || "사용"}
onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v }))}
>
<SelectTrigger className="h-9">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__"> </SelectItem>
{(catOptions[`${DEFECT_TABLE}.is_active`] || []).map((o) => (
<SelectItem key={o.code} value={o.code}>
{o.label}
</SelectItem>
))}
<SelectItem value="사용"></SelectItem>
<SelectItem value="미사용"></SelectItem>
</SelectContent>
</Select>
</div>
@@ -188,9 +188,12 @@ export default function InspectionManagementPage() {
if (["inspection_type", "inspection_method", "judgment_criteria", "unit", "apply_type"].includes(col.key)) {
base.render = (v: any, row: any) => getCatLabel(INSPECTION_TABLE, col.key, row[col.key]);
}
if (col.key === "manager") {
base.render = (v: any, row: any) => userOptions.find((u) => u.code === row.manager)?.label || row.manager || "-";
}
return base;
});
}, [ts.visibleColumns, catOptions]); // eslint-disable-line react-hooks/exhaustive-deps
}, [ts.visibleColumns, catOptions, userOptions]); // eslint-disable-line react-hooks/exhaustive-deps
/* ═══════════════════ 데이터 조회 ═══════════════════ */
// 다중값 컬럼 (쉼표 구분 저장) — 서버 equals 대신 contains 사용
@@ -385,7 +388,7 @@ export default function InspectionManagementPage() {
/* ═══════════════════ 불량관리 CRUD ═══════════════════ */
const openDefCreate = async () => {
setDefForm({});
setDefForm({ is_active: "사용" });
setDefEditMode(false);
setNumberingRuleId(null);
setPreviewCode(null);
@@ -867,20 +870,16 @@ export default function InspectionManagementPage() {
</TableCell>
<TableCell>
<Badge
variant={
getCatLabel(DEFECT_TABLE, "is_active", row.is_active) === "사용"
? "default"
: "secondary"
}
variant={row.is_active === "사용" || row.is_active === "true" ? "default" : "secondary"}
className="text-[10px]"
>
{getCatLabel(DEFECT_TABLE, "is_active", row.is_active) || "-"}
{row.is_active === "사용" || row.is_active === "true" ? "사용" : row.is_active || "미사용"}
</Badge>
</TableCell>
<TableCell className="text-muted-foreground">
{row.reg_date || (row.created_date ? row.created_date.slice(0, 10) : "-")}
</TableCell>
<TableCell>{row.manager_id || "-"}</TableCell>
<TableCell>{userOptions.find((u) => u.code === row.manager_id)?.label || row.manager_id || "-"}</TableCell>
<TableCell className="text-muted-foreground">{row.remarks || "-"}</TableCell>
</TableRow>
);
@@ -1442,19 +1441,15 @@ export default function InspectionManagementPage() {
<div className="space-y-1.5">
<Label className="text-xs font-semibold"></Label>
<Select
value={defForm.is_active || "__none__"}
onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v === "__none__" ? "" : v }))}
value={defForm.is_active || "사용"}
onValueChange={(v) => setDefForm((p) => ({ ...p, is_active: v }))}
>
<SelectTrigger className="h-9">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="__none__"> </SelectItem>
{(catOptions[`${DEFECT_TABLE}.is_active`] || []).map((o) => (
<SelectItem key={o.code} value={o.code}>
{o.label}
</SelectItem>
))}
<SelectItem value="사용"></SelectItem>
<SelectItem value="미사용"></SelectItem>
</SelectContent>
</Select>
</div>