diff options
Diffstat (limited to 'components/common')
| -rw-r--r-- | components/common/material/material-selector.tsx | 78 |
1 files changed, 56 insertions, 22 deletions
diff --git a/components/common/material/material-selector.tsx b/components/common/material/material-selector.tsx index aa68d2b5..b24a2f4f 100644 --- a/components/common/material/material-selector.tsx +++ b/components/common/material/material-selector.tsx @@ -32,6 +32,7 @@ interface MaterialSelectorProps { maxSelections?: number; className?: string; closeOnSelect?: boolean; + excludeMaterialCodes?: Set<string>; // 제외할 자재그룹코드들 } export function MaterialSelector({ @@ -43,7 +44,8 @@ export function MaterialSelector({ disabled = false, maxSelections, className, - closeOnSelect = true + closeOnSelect = true, + excludeMaterialCodes }: MaterialSelectorProps) { const [open, setOpen] = useState(false); @@ -203,19 +205,23 @@ export function MaterialSelector({ <Badge key={`${material.materialGroupCode}-${material.materialName}`} variant="secondary" - className="gap-1" + className="gap-1 pr-1" > <span className="max-w-[200px] truncate"> {material.displayText} </span> {!disabled && ( - <X - className="h-3 w-3 cursor-pointer hover:text-red-500" + <button + type="button" + className="ml-1 h-3 w-3 rounded-sm hover:bg-red-100 flex items-center justify-center" onClick={(e) => { + e.preventDefault(); e.stopPropagation(); handleRemoveMaterial(material); }} - /> + > + <X className="h-3 w-3 hover:text-red-500" /> + </button> )} </Badge> )) @@ -255,26 +261,54 @@ export function MaterialSelector({ <CommandEmpty>검색 결과가 없습니다.</CommandEmpty> ) : ( <CommandGroup> - {searchResults.map((material) => ( - <CommandItem - key={`${material.materialGroupCode}-${material.materialName}`} - onSelect={() => handleMaterialSelect(material)} - className="cursor-pointer" - > - <Check + {searchResults.map((material) => { + const isExcluded = excludeMaterialCodes?.has(material.materialGroupCode); + const isSelected = isMaterialSelected(material); + + return ( + <CommandItem + key={`${material.materialGroupCode}-${material.materialName}`} + onSelect={() => { + if (!isExcluded) { + handleMaterialSelect(material); + } + }} className={cn( - "mr-2 h-4 w-4", - isMaterialSelected(material) ? "opacity-100" : "opacity-0" + "cursor-pointer", + isExcluded && "opacity-50 cursor-not-allowed bg-muted" )} - /> - <div className="flex-1"> - <div className="font-medium">{material.materialName}</div> - <div className="text-xs text-muted-foreground"> - 코드: {material.materialGroupCode} + > + <div className="mr-2 h-4 w-4 flex items-center justify-center"> + {isExcluded ? ( + <span className="text-xs text-muted-foreground">✓</span> + ) : ( + <Check + className={cn( + "h-4 w-4", + isSelected ? "opacity-100" : "opacity-0" + )} + /> + )} + </div> + <div className="flex-1"> + <div className={cn( + "font-medium", + isExcluded && "text-muted-foreground" + )}> + {material.materialName} + {isExcluded && ( + <span className="ml-2 text-xs bg-red-100 text-red-600 px-2 py-1 rounded"> + 이미 등록됨 + </span> + )} + </div> + <div className="text-xs text-muted-foreground"> + 코드: {material.materialGroupCode} + </div> </div> - </div> - </CommandItem> - ))} + </CommandItem> + ); + })} </CommandGroup> )} </ScrollArea> |