공용 — 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:
@@ -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="품번">
|
||||
|
||||
Reference in New Issue
Block a user