Merge pull request #153 from bsideproject/moon

[feat] react-images-uploading 추가 및 step3 수정
bsideproject · Sep 20, 2023 · 4e5b428 · 4e5b428
2 parents 4fab495 + fa09549
commit 4e5b428
Show file tree

Hide file tree

Showing 5 changed files with 3,408 additions and 4,404 deletions.
diff --git a/components/File/FileUpload.tsx b/components/File/FileUpload.tsx
@@ -0,0 +1,59 @@
+import React, { forwardRef, useEffect, useImperativeHandle } from "react";
+import ImageUploading, { ImageListType } from "react-images-uploading";
+import Rectangle from '@/public/icons/rectangle.svg';
+import RectangleCamera from '@/public/icons/rectangleCamera.svg';
+
+
+export default function FileUpload() {
+  const [images, setImages] = React.useState<ImageListType>([]);
+  const maxNumber = 5;
+
+  const onChange = (imageList: ImageListType, addUpdateIndex: number[] | undefined) => {
+    console.log(imageList, addUpdateIndex);
+    setImages(imageList);
+
+   };
+
+  return (
+    <div className="App">
+      { 
+        <ImageUploading
+            multiple
+            value={images}
+            onChange={onChange}
+            maxNumber={maxNumber}
+        >
+        {({
+          imageList,
+          onImageUpload,
+          onImageRemoveAll,
+          onImageUpdate,
+          onImageRemove,
+          isDragging,
+          dragProps
+        }) => (
+          // write your building UI
+          <div className="upload__image-wrapper">
+            <div className="relative w-[120px] h-[110px] mt-[8px]" style={isDragging ? { color: "red" } : undefined} {...dragProps}> 
+                <Rectangle className="z-0" />
+                <RectangleCamera className="absolute z-10 top-[45px] left-[55px] transform -translate-x-1/2 -translate-y-1/2 hover:cursor-pointer" onClick={onImageUpload}/>
+                <span className="absolute z-10 top-[67px] left-[55px] transform -translate-x-1/2 -translate-y-1/2 text-g4 semibold text-[12px]">3/5</span>
+            </div>
+            &nbsp;
+            {/* <button onClick={onImageRemoveAll}>Remove all images</button> */}
+            {imageList.map((image, index) => (
+              <div key={index} className="image-item">
+                <img src={image.dataURL} alt="" width="100" />
+                <div className="image-item__btn-wrapper">
+                  {/* <button onClick={() => onImageUpdate(index)}>Update</button> */}
+                  <button onClick={() => onImageRemove(index)}>Remove</button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </ImageUploading>
+    }
+    </div>
+  );
+}
diff --git a/components/index.tsx b/components/index.tsx
@@ -18,3 +18,4 @@ export { default as Typography } from '@/components/Typography/Typography.tsx';
 export { default as Space } from '@/components/Space.tsx';
 export { default as LoginLayout } from '@/components/layouts/LoginLayout.tsx';
 export { default as Toast } from '@/components/Toast/Toast.tsx';
+export { default as Upload } from '@/components/File/FileUpload.tsx';
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.44.3",
     "react-hot-toast": "^2.4.1",
+    "react-images-uploading": "^3.1.7",
     "react-select": "^5.7.4"
   },
   "devDependencies": {

diff --git a/pages/room/addRoom/step3.tsx b/pages/room/addRoom/step3.tsx
@@ -1,16 +1,14 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useTranslation } from 'next-i18next';
+import React, { useState, useRef } from 'react';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { GetStaticPropsContext } from 'next';
 import {
   Stepper,
   Textarea,
   Typography,
   Button,
+  Upload
 } from '@/components/index.tsx';
 import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
-import { Option } from '@/components/Select/Select';
-import { GuDong } from '../addRoom';
 import Rectangle from '@/public/icons/rectangle.svg';
 import RectangleCamera from '@/public/icons/rectangleCamera.svg';
 
@@ -21,52 +19,24 @@ export const getStaticProps = async ({ locale }: GetStaticPropsContext) => ({
 });
 
 export default function Step1() {
-  const filterTranslation = useTranslation('filter');
   const { register, handleSubmit, watch } = useForm({ mode: 'onChange' });
-  const [guValue, setGuValue] = useState<Option>({
-    value: '',
-    label: '',
-  });
-  // const modalSetter = React.useContext(ModalSetterContext);
-  const [dongValue, setDongValue] = useState<GuDong>({
-    gu: '',
-    guLabel: '',
-    value: '',
-    label: '',
-  });
-  const [selectedOptions, setSelectedOptions] = useState<string[]>([]);
+  const [showUpload, setShowUpload] = useState(false);
+  const uploadRef = useRef(null);
+
+
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
     // 여기
-
   };
 
-  // 옵션 선택 시 실행될 함수, 유효성 검증
-  const handleOptionSelect = useCallback(() => {
-    if (!dongValue.label) return;
+  const handleCameraClick = () => {
+    setShowUpload(true);
+  }
 
-    let resultOptions: string[];
-    const option = dongValue.label;
-    setSelectedOptions((prevSelectedOptions) => {
-      const isExist = prevSelectedOptions.some((item) => item.includes(option));
-      // Location이 5개 이상 선택 될 경우 Toast 노출
-      if (prevSelectedOptions.length >= 5) {
-
-        return [...prevSelectedOptions];
-      }
-
-      if (!isExist) {
-        resultOptions = [...prevSelectedOptions, guValue?.label.concat(`, ${option}`)];
-      } else {
-        // TODO translation 사용해서 여기 나중에 바꿔줘야함
-        resultOptions = prevSelectedOptions;
-      }
-      return [...resultOptions];
-    });
-  }, [dongValue.label, guValue?.label]);
-
-  useEffect(() => {
-    handleOptionSelect();
-  }, [dongValue.label, handleOptionSelect]);
+  // callback
+  // const handleFilesAdded = (newImages: File[]) => {
+  //   // TODO: 여기서 새로 추가된 이미지를 처리하십시오.
+  //   console.log(newImages);
+  // }
 
   return (
     <>
@@ -89,12 +59,7 @@ export default function Step1() {
             </Typography>
           </div>
           {/* 업로드 버튼으로 사용될 SVG */}
-          <div className="relative w-[120px] h-[110px] mt-[8px]"> 
-            <Rectangle className="z-0" />
-            <RectangleCamera className="absolute z-10 top-[45px] left-[55px] transform -translate-x-1/2 -translate-y-1/2" />
-            <span className="absolute z-10 top-[67px] left-[55px] transform -translate-x-1/2 -translate-y-1/2 text-g4 semibold text-[12px]">3/5</span>
-          </div>
-
+          <Upload />
           <div className="mt-[30px]">
             <Typography variant="body" customClassName="text-[16px] font-bold text-g7 mb-[12px]">
               About the house
@@ -107,11 +72,12 @@ export default function Step1() {
             <div className="w-full">
               <div className="mb-[13px]">
                 <Button size="lg" type="submit" disabled={false}>
-                  {filterTranslation.t('Next')}
+                  Next
                 </Button>
               </div>
             </div>
           </div>
+
         </form>
       </div>
     </>