이미지검색

src/components/dialog/search/search.jsx

@@ -99,6 +99,30 @@ export default function Search({ ...props }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.category, state.subCategory, state.shop]);
 
+  const fileInputRef = React.useRef(null);
+
+  // 이미지를 찾는 함수
+  const handleImageSearch = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click(); // 숨겨진 파일 입력을 트리거
+    }
+  };
+
+  // 파일 선택 시 호출되는 함수
+  const handleFileChange = (event) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      console.log('Selected File:', file);
+
+      // 예: 파일을 서버에 업로드하거나 처리
+      const reader = new FileReader();
+      reader.onload = () => {
+        console.log('Image Preview URL:', reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
   return (
     <>
       <TextField
@@ -143,6 +167,14 @@ export default function Search({ ...props }) {
           }
         }}
       />
+      <Button variant='contained' sx={{ width: '100%', borderRadius: 0 }} onClick={handleImageSearch}>이미지 검색</Button>
+      <input
+        type="file"
+        accept="image/*"
+        ref={fileInputRef}
+        onChange={handleFileChange}
+        style={{ display: 'none' }}
+      />
       <Stack gap={1} direction="row" p={1}>
         <FormControl fullWidth>
           <LabelStyle component={'label'} htmlFor="shops">