공용 — native <select> 금지 + CompactFilterBar 신설 + M-BOM 시범 마이그레이션

영업관리에 이미 적용된 SmartSelect/CustomerSelect 패턴을 다른 메뉴(생산/개발/프로젝트)
의 native <select> 7개 자리에 일괄 적용. customer-cs/cs 메뉴의 컴팩트 검색바 패턴을
공용 컴포넌트로 추출하고 M-BOM 페이지에 시범 마이그레이션.

신설:
  - components/common/CompactFilterBar.tsx — CompactFilterBar + CompactFilterField + CompactDateRange
    · rounded-md border bg-muted/20 p-2 + flex-wrap (자동 줄바꿈)
    · 자식 input/combobox 자동 h-7 + text-xs 컴팩트화
    · onSearch / onReset / totalText 슬롯

native <select> → SmartSelect 일괄 교체:
  - production/mbom/page.tsx          5건 (주문유형/제품구분/국내해외/고객사/유무상)
  - development/change-list/page.tsx  1건 (년도)
  - development/ebom-regist/page.tsx  1건 (상태)
  - development/ebom-search/page.tsx  1건 (표시레벨)
  - project/progress/page.tsx         3건 (년도/국내해외/유무상)
  - components/development/PartFormDialog.tsx — BasicSelect 가 내부적으로 SmartSelect 위임
  - components/development/BomReportExcelImportDialog.tsx — E-BOM 복사 옵션

M-BOM 시범 마이그레이션:
  - 기존: 2행 grid 6×2 검색 폼 (h-9 큰 입력)
  - 변경: <CompactFilterBar> 안에 <CompactFilterField> 10개 (h-7 컴팩트)

원칙:
  - 향후 모든 신규/수정 페이지는 CompactFilterBar + SmartSelect/CustomerSelect 사용 필수
  - native <select> + 자체 grid 검색폼 작성 금지
  - 메모리: feedback_compact_search_pattern.md

타입체크 0건 에러 (변경 파일 기준).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
hjjeong
2026-05-13 16:44:26 +09:00
parent dd88dc6e8c
commit 364d4707fe
8 changed files with 321 additions and 234 deletions
@@ -15,6 +15,7 @@ import {
import { toast } from "sonner";
import { DataGrid, DataGridColumn } from "@/components/common/DataGrid";
import { CommCodeSelect } from "@/components/common/CommCodeSelect";
import { SmartSelect, SmartSelectOption } from "@/components/common/SmartSelect";
import { devBomApi, BomReportListFilter, BomReportRow } from "@/lib/api/devBom";
import { BomReportStatusDialog } from "@/components/development/BomReportStatusDialog";
import { DevPartSelect } from "@/components/development/DevPartSelect";
@@ -23,7 +24,7 @@ import { BomReportTreeDialog } from "@/components/development/BomReportTreeDialo
const PRODUCT_GROUP = "0000001"; // 제품구분 (vexplor 공용)
const STATUS_OPTIONS = [
const STATUS_OPTIONS: SmartSelectOption[] = [
{ code: "create", label: "등록중" },
{ code: "changeDesign", label: "설계변경미배포" },
{ code: "deploy", label: "배포완료" },
@@ -126,15 +127,12 @@ export default function EbomRegistPage() {
/>
</Field>
<Field label="상태">
<select
className="h-9 w-full rounded-md border bg-background px-2 text-sm"
<SmartSelect
options={STATUS_OPTIONS}
value={filter.status ?? ""}
onChange={(e) => setFilter({ ...filter, status: e.target.value })}
>
<option value=""></option>
{STATUS_OPTIONS.map((o) =>
<option key={o.code} value={o.code}>{o.label}</option>)}
</select>
onValueChange={(v) => setFilter({ ...filter, status: v })}
placeholder="전체"
/>
</Field>
{/* wace structureList.jsp 1:1 — select2-part 자동완성 (양방향 동기) */}
<Field label="품번">