(김준회) vendors.items --> vendorPossibleMaterials 테이블로 공급품목 관리 책임 변경

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>