fix: 수주등록 모달 및 품목 검색 UI 개선

- 품목 검색 모달에서 컬럼명 대신 라벨명 표시
  * ItemSelectionModal에 columnLabels prop 추가
  * ModalRepeaterTableComponent에서 columns 설정의 라벨 매핑 생성
  * 테이블 헤더에 한글 라벨 표시 (품번, 품명, 규격, 재질 등)

- 이미 추가된 품목은 검색 결과에서 완전 제외
  * filteredResults로 중복 항목 필터링
  * 회색 표시 대신 목록에서 아예 제거
  * 사용자 친화적인 안내 메시지 추가

- 수주등록 버튼 크기 및 렌더링 수정
  * 기본 크기를 200x40에서 120x40으로 변경 (다른 버튼과 통일)
  * h-full w-full 클래스 적용하여 컨테이너 크기에 맞게 렌더링
  * style prop의 width/height 제거하여 Tailwind 클래스 우선순위 문제 해결

- 수주등록 모달에 판매 유형 및 무역 정보 추가
  * 국내/해외 판매 선택 기능
  * 해외 판매 시 무역 정보 섹션 표시 (인코텀즈, 결제조건, 통화 등)
  * 거래처 정보 확장 (담당자, 납품처, 납품장소)

- 품목 반복 테이블 컬럼 조정
  * 품목번호를 품번으로 변경
  * 비고 컬럼 제거
  * 규격, 재질 컬럼 추가
  * 납품일을 납기일로 변경
This commit is contained in:
kjs
2025-11-14 16:19:27 +09:00
parent 64e6fd1920
commit e6949bdd67
7 changed files with 345 additions and 86 deletions

View File

@@ -28,6 +28,7 @@ export function ItemSelectionModal({
alreadySelected = [],
uniqueField,
onSelect,
columnLabels = {},
}: ItemSelectionModalProps) {
const [localSearchText, setLocalSearchText] = useState("");
const [selectedItems, setSelectedItems] = useState<any[]>([]);
@@ -92,6 +93,9 @@ export function ItemSelectionModal({
);
};
// 이미 추가된 항목 제외한 결과 필터링
const filteredResults = results.filter((item) => !isAlreadyAdded(item));
// 선택된 항목인지 확인
const isSelected = (item: any): boolean => {
return selectedItems.some((selected) =>
@@ -169,13 +173,13 @@ export function ItemSelectionModal({
key={col}
className="px-4 py-2 text-left font-medium text-muted-foreground"
>
{col}
{columnLabels[col] || col}
</th>
))}
</tr>
</thead>
<tbody>
{loading && results.length === 0 ? (
{loading && filteredResults.length === 0 ? (
<tr>
<td
colSpan={sourceColumns.length + (multiSelect ? 1 : 0)}
@@ -185,46 +189,36 @@ export function ItemSelectionModal({
<p className="mt-2 text-muted-foreground"> ...</p>
</td>
</tr>
) : results.length === 0 ? (
) : filteredResults.length === 0 ? (
<tr>
<td
colSpan={sourceColumns.length + (multiSelect ? 1 : 0)}
className="px-4 py-8 text-center text-muted-foreground"
>
{results.length > 0
? "모든 항목이 이미 추가되었습니다"
: "검색 결과가 없습니다"}
</td>
</tr>
) : (
results.map((item, index) => {
const alreadyAdded = isAlreadyAdded(item);
filteredResults.map((item, index) => {
const selected = isSelected(item);
return (
<tr
key={index}
className={`border-t transition-colors ${
alreadyAdded
? "bg-muted/50 opacity-50"
: selected
selected
? "bg-primary/10"
: "hover:bg-accent cursor-pointer"
}`}
onClick={() => {
if (!alreadyAdded) {
handleToggleItem(item);
}
}}
onClick={() => handleToggleItem(item)}
>
{multiSelect && (
<td className="px-4 py-2">
<Checkbox
checked={selected}
disabled={alreadyAdded}
onCheckedChange={() => {
if (!alreadyAdded) {
handleToggleItem(item);
}
}}
onCheckedChange={() => handleToggleItem(item)}
/>
</td>
)}