1 files changed, 17 insertions, 5 deletions
diff --git a/components/signup/join-form.tsx b/components/signup/join-form.tsx
index 9eda1a7d..4ee05c9b 100644
--- a/components/signup/join-form.tsx
+++ b/components/signup/join-form.tsx
@@ -71,6 +71,8 @@ import koLocale from "i18n-iso-countries/langs/ko.json";
 import { getVendorTypes } from '@/lib/vendors/service';
 import ConsentStep from './conset-step';
 import { checkEmailExists } from '@/lib/vendor-users/service';
+import { MaterialSelector } from '@/components/common/material/material-selector';
+import { MaterialSearchItem } from '@/lib/material/material-group-service';
 
 i18nIsoCountries.registerLocale(enLocale);
 i18nIsoCountries.registerLocale(koLocale);
@@ -111,7 +113,7 @@ interface AccountData {
 interface VendorData {
   vendorName: string;
   vendorTypeId?: number;
-  items: string;
+  items: MaterialSearchItem[];
   taxId: string;
   address: string;
   addressDetail: string;
@@ -473,7 +475,7 @@ export default function JoinForm() {
   const [vendorData, setVendorData] = useState<VendorData>({
     vendorName: "",
     vendorTypeId: undefined,
-    items: "",
+    items: [],
     taxId: defaultTaxId,
     address: "",
     addressDetail: "",
@@ -944,6 +946,11 @@ function CompleteVendorForm({
     onChange(prev => ({ ...prev, [field]: value }));
   };
 
+  // 자재 변경 핸들러
+  const handleMaterialsChange = (materials: MaterialSearchItem[]) => {
+    handleInputChange('items', materials);
+  };
+
   // 파일 업로드 핸들러들
   const createFileUploadHandler = (setFiles: (files: File[]) => void, currentFiles: File[]) => ({
     onDropAccepted: (acceptedFiles: File[]) => {
@@ -1064,6 +1071,7 @@ function CompleteVendorForm({
         },
         vendor: {
           ...data,
+          items: JSON.stringify(data.items), // 자재 배열을 JSON 문자열로 변환
           phone: normalizedVendorPhone,
           representativePhone: normalizedRepresentativePhone,
           contacts: normalizedContacts,
@@ -1224,10 +1232,14 @@ function CompleteVendorForm({
             <label className="block text-sm font-medium mb-1">
               {t('supplyItems')} <span className="text-red-500">*</span>
             </label>
-            <Input
-              value={data.items}
-              onChange={(e) => handleInputChange('items', e.target.value)}
+            <MaterialSelector
+              selectedMaterials={data.items}
+              onMaterialsChange={handleMaterialsChange}
+              placeholder="type material name or code..."
+              noValuePlaceHolder="type material name or code..."
               disabled={isSubmitting}
+              singleSelect={false}
+              className="w-full"
             />
             <p className="text-xs text-gray-500 mt-1">
               {t('supplyItemsHint')}