Merge pull request #167 from bsideproject/moon

[feat] EditProfile Image Upload 부분 수정
bsideproject · Sep 26, 2023 · 2416cf7 · 2416cf7
2 parents 70cd54e + f2bf7c0
commit 2416cf7
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 38 deletions.
diff --git a/components/File/FileUpload.module.scss b/components/File/FileUpload.module.scss
@@ -0,0 +1,6 @@
+.center {
+    @apply flex items-center justify-center w-full overflow-hidden
+}
+.default {
+    @apply flex items-center w-[600px] overflow-x-auto
+}
diff --git a/components/File/FileUpload.tsx b/components/File/FileUpload.tsx
@@ -1,18 +1,28 @@
-import React, { forwardRef, useEffect, useImperativeHandle } from "react";
+import React, { ReactElement, ComponentType } from "react";
 import ImageUploading, { ImageListType } from "react-images-uploading";
 import Rectangle from '@/public/icons/rectangle.svg';
 import RectangleCamera from '@/public/icons/rectangleCamera.svg';
+import styles from '@/components/File/FileUpload.module.scss';
+
+interface ImageComponentClickProps {
+  imageSrc : string;
+  onClick : () => void;
+}
 
 interface FileUploadProps {
+  multiImage: boolean;
   callbackImageFn?: (imageList: ImageListType) => void;
+  InitImageComponent: React.ComponentType<ImageComponentClickProps> | null;
+  style ?: 'center' | 'left' | 'default';
 };
 
-export default function FileUpload({ callbackImageFn }: FileUploadProps) {
+export default function FileUpload({ callbackImageFn, InitImageComponent, multiImage, style }: FileUploadProps) {
   const [images, setImages] = React.useState<ImageListType>([]);
   const maxNumber = 5;
 
-  const onChange = (imageList: ImageListType, addUpdateIndex: number[] | undefined) => {
-    setImages(imageList);
+  const onChange = (imageList: ImageListType) => {
+    const lastImage = imageList.slice(-1);
+    multiImage ? setImages(imageList) : setImages(lastImage);
     callbackImageFn?.(imageList);
   };
 
@@ -34,27 +44,33 @@ export default function FileUpload({ callbackImageFn }: FileUploadProps) {
           dragProps
         }) => (
           // write your building UI
-          <div className="upload__image-wrapper flex items-center w-[600px] overflow-x-auto">
-            <div className={`relative w-[108px] h-[110px] mt-[8px]`} {...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 ${isDragging ? "bg-r1": ""}`} 
-                  onClick={() => { (imageList || []).length < 5 && onImageUpload()}}
-                />
-                <span className={`absolute z-10 top-[67px] left-[55px] transform -translate-x-1/2 -translate-y-1/2 text-g4 semibold text-[12px] ${isDragging ? "text-r1": ""}`}>{(imageList || []).length}/{maxNumber}</span>
-            </div>
+          <div className={`upload__image-wrapper ${styles[`${style || 'default'}`] }`}>
+            {
+              InitImageComponent === null ?
+              <div className={`relative w-[108px] h-[110px] mt-[8px]`} {...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 ${isDragging ? "bg-r1": ""}`} 
+                    onClick={() => { (imageList || []).length < 5 && onImageUpload()}}
+                  />
+                  <span className={`absolute z-10 top-[67px] left-[55px] transform -translate-x-1/2 -translate-y-1/2 text-g4 semibold text-[12px] ${isDragging ? "text-r1": ""}`}>{(imageList || []).length}/{maxNumber}</span>
+              </div>
+              : <InitImageComponent imageSrc={(imageList || []).length > 0 ? imageList[0].dataURL || '': ''} onClick={onImageUpload}/>
+            }
             &nbsp;
             {/* <button onClick={onImageRemoveAll}>Remove all images</button> */}
-            {imageList.map((image, index) => (
-              <div key={index} className="image-item relative w-[108px] h-[108px] mt-[8px]">
-                <img src={image.dataURL} alt="" className="top-0 left-0 w-full h-full object-cover" />
-                <button 
-                  className="absolute top-0 right-0 bg-g5 text-g1 w-5 h-5 -translate-y-[0.5%] cursor-pointer leading-[4px]" 
-                  onClick={() => onImageRemove(index)}
-                > x
-                </button>
-              </div>
-            ))}
+            { multiImage &&      
+              imageList.map((image, index) => (
+                <div key={index} className="image-item relative w-[108px] h-[108px] mt-[8px]">
+                  <img src={image.dataURL} alt="" className="top-0 left-0 w-full h-full object-cover" />
+                  <button 
+                    className="absolute top-0 right-0 bg-g5 text-g1 w-5 h-5 -translate-y-[0.5%] cursor-pointer leading-[4px]" 
+                    onClick={() => onImageRemove(index)}
+                  > x
+                  </button>
+                </div>
+              ))
+            }
           </div>
         )}
       </ImageUploading>

diff --git a/components/ProfileCard/index.tsx b/components/ProfileCard/index.tsx
@@ -42,7 +42,7 @@ export default function ProfileCard({ name, age, gender, imageSrc }: ProfileCard
               custom: true,
               customHeader: true,
             },
-            children: <EditProfile imageSrc={`${imageSrc}`}/>,
+            children: <EditProfile _imageSrc={`${imageSrc}`} />,
           });
     }
 
@@ -81,7 +81,7 @@ export default function ProfileCard({ name, age, gender, imageSrc }: ProfileCard
 
     return (
         <>
-            <div className="w-full h-auto border border-gray-300 flex flex-col bg-r1 text-g0 mt-[30px]">
+            <div className="w-full h-auto border border-gray-300 flex flex-col bg-r1 text-g0 mt-[50px]">
                 <div className="flex w-full">
                     <div className="ml-[20px] w-[52px] h-[72px] flex items-center justify-center mt-[20px]">
                         <img src={imageSrc} alt={`${name}'s profile`} />

diff --git a/pages/profile/editProfile.tsx b/pages/profile/editProfile.tsx
@@ -5,6 +5,7 @@ import { isValidEmail } from '@/utils/validCheck.ts';
 import {
   Textarea,
   Button,
+  Upload,
   Input,
 } from '@/components/index.tsx';
 import { FieldValues, SubmitHandler } from 'react-hook-form';
@@ -16,11 +17,17 @@ interface ProfileProps {
     name?: string;
     age?: number;
     gender?: 'Male' | 'Female';
-    imageSrc : string;
+    _imageSrc : string;
 };
 
-export default function EditProfile({ imageSrc }: ProfileProps) {
+interface ImageComponentClickProps {
+    imageSrc: string;
+    onClick ?: () => void;
+}
+
+export default function EditProfile({ _imageSrc }: ProfileProps) {
   const { openModal, closeModal } = useModal();
+  const [imageSrc, setImageSrc] = useState(_imageSrc);
   const subHeader = 'font-pretendard font-semibold text-[16px]';
   const {
     register,
@@ -65,20 +72,34 @@ export default function EditProfile({ imageSrc }: ProfileProps) {
     { label: 'Others'}
   ];
 
+  const ProfileImage = ({ imageSrc, onClick }: ImageComponentClickProps) => {
+    return (
+        <div className="flex justify-center items-center h-[90px] mt-[20px] mb-[36px]" onClick={onClick}>
+            <div style={{ position: 'relative', width: 90, height: 90 }} className="flex items-center justify-center">
+                <div style={{ borderRadius: '50%', overflow: 'hidden', width: '100%', height: '100%' }} className="flex items-center justify-center">
+                    <img src={imageSrc || _imageSrc} alt={`${name}'s profile`} className="object-cover" />
+                </div>
+                <div className="absolute border-g2 border-[1px] bottom-0 right-0 bg-g0 flex items-center justify-center" style={{ width: '32px', height: '32px', borderRadius: '50%', overflow: "" }}>
+                    <ProfileCamera className="w-[20px] h-[20px]" />
+                </div>
+            </div>
+        </div>
+    )
+  }
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
         <div className="h-screen overflow-y-scroll font-pretendard">
-            <div className="flex justify-center items-center h-[90px] mt-[20px] mb-[36px]">
-                <div style={{ position: 'relative', width: 90, height: 90 }} className="flex items-center justify-center">
-                    <div style={{ borderRadius: '50%', overflow: 'hidden', width: '100%', height: '100%' }} className="flex items-center justify-center">
-                        <img src={imageSrc} alt={`${name}'s profile`} className="object-cover" />
-                    </div>
-                    <div className="absolute border-g2 border-[1px] bottom-0 right-0 bg-g0 flex items-center justify-center" style={{ width: '32px', height: '32px', borderRadius: '50%', overflow: "" }}>
-                        <ProfileCamera className="w-[20px] h-[20px]" />
-                    </div>
-                </div>
-            </div>
-
+            <Upload 
+                InitImageComponent={ProfileImage}
+                multiImage={false}
+                callbackImageFn={(imageList) => {
+                    if (imageList && imageList[0] && imageList[0].dataURL) {
+                        setImageSrc(imageList[0].dataURL);
+                    }
+                }}
+                style={'center'}
+            />
             <div className="mb-[12px]">
                 <div className={subHeader}>Email</div>
             </div>

diff --git a/pages/room/addRoom/step3.tsx b/pages/room/addRoom/step3.tsx
@@ -62,6 +62,8 @@ export default function Step3({ step1Data, step2Data }: Step2Props) {
           {/* 업로드 버튼으로 사용될 SVG */}
           <Upload 
             callbackImageFn={callbackImageList}
+            InitImageComponent={null}
+            multiImage={true}
           />
 
           <hr className="mt-[32px]"/>