Merge pull request #134 from Donggrina/refactor/image-upload

Refactor: 이미지 업로드 로직 수정(모달 수정하고 머지하겠습니다)
Donggrina · Jun 19, 2024 · 258a12d · 258a12d
2 parents bf6a407 + d53ec85
commit 258a12d
Show file tree

Hide file tree

Showing 9 changed files with 131 additions and 33 deletions.
diff --git a/components/common/modal/modal.module.scss b/components/common/modal/modal.module.scss
@@ -21,7 +21,7 @@
   font-size: 16px;
   background-color: var(--white);
   border-radius: 10px;
-  box-shadow: 0px 4px 6px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.25);
 }
 
 .message {

diff --git a/...ents/mypage/family/family-util-buttons/family-rename-button/rename-modal/rename-modal.tsx b/...ents/mypage/family/family-util-buttons/family-rename-button/rename-modal/rename-modal.tsx
@@ -18,8 +18,8 @@ export default function RenameModal({ Modal, handleModal, name }: RenameModalTyp
     },
     mode: 'onBlur',
   });
-  const { handleSubmit, formState } = methods;
-  const buttonClassCondition = formState.isSubmitting ? 'disabled' : 'primary';
+  const { handleSubmit, watch } = methods;
+  const buttonClassCondition = !watch('name') ? 'disabled' : 'primary';
   const { mutate } = useFamilyModifyQuery();
   const onSubmit: SubmitHandler<FieldValues> = (data) => {
     mutate({ data: { name: data.name } });
@@ -31,7 +31,7 @@ export default function RenameModal({ Modal, handleModal, name }: RenameModalTyp
         <Form onSubmit={handleSubmit(onSubmit)} methods={methods}>
           <div className={styles.inputBox}>
             <Form.Label htmlFor="name">가족이름 변경하기</Form.Label>
-            <Form.MainInput name="name" placeholder="gg" />
+            <Form.MainInput name="name" />
           </div>
           <div className={styles.buttonBox}>
             <Button type="submit" className={buttonClassCondition} leftRound rightRound>

diff --git a/components/start-pet/file-image/file-image.tsx b/components/start-pet/file-image/file-image.tsx
@@ -20,7 +20,7 @@ export default function FileImage({ imageValue, imageUrl, watchType }: ImageValu
         setImageSrc(URL.createObjectURL(file));
         return () => URL.revokeObjectURL(imageSrc); // 메모리 누수 방지
       }
-    } else if (!imageUrl) {
+    } else if (!imageUrl || !imageValue) {
       setImageSrc(defaultImageUrl);
     }
   }, [imageValue, imageUrl, watchType, defaultImageUrl]);

diff --git a/components/start-pet/file-input/file-input.tsx b/components/start-pet/file-input/file-input.tsx
@@ -2,6 +2,8 @@ import { Controller, FieldValues, UseFormReturn } from 'react-hook-form';
 import FileButtonSVG from '@/public/images/start-pet/fileButton.svg';
 import styles from './file-input.module.scss';
 import { useRef } from 'react';
+import useModal from '@/hooks/use-modal';
+import ImageModal from '../image-modal/image-modal';
 
 interface FileInputType {
   id: string;
@@ -11,32 +13,39 @@ interface FileInputType {
 
 export default function FileInput({ id, name, control }: FileInputType) {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [Modal, handleModal] = useModal();
 
   const handleButtonClick = () => {
-    if (fileInputRef.current) {
-      fileInputRef.current.click();
-    }
+    handleModal(true);
   };
   return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field }) => (
-        <button className={styles.fileButton} type="button" onClick={handleButtonClick} title="프로필 이미지 변경">
-          <input
-            className={styles.fileInput}
-            type="file"
-            accept="image/*"
-            id={id}
-            onChange={(e) => field.onChange(e.target.files)}
-            ref={(e) => {
-              field.ref(e);
-              fileInputRef.current = e;
-            }}
-          />
-          <FileButtonSVG />
-        </button>
-      )}
-    />
+    <>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field }) => (
+          <>
+            <button className={styles.fileButton} type="button" onClick={handleButtonClick} title="프로필 이미지 변경">
+              <input
+                className={styles.fileInput}
+                type="file"
+                accept="image/*"
+                id={id}
+                onChange={(e) => {
+                  field.onChange(e.target.files);
+                  handleModal(false);
+                }}
+                ref={(e) => {
+                  field.ref(e);
+                  fileInputRef.current = e;
+                }}
+              />
+              <FileButtonSVG />
+            </button>
+            <ImageModal Modal={Modal} handleModal={handleModal} fileInputRef={fileInputRef} field={field} />
+          </>
+        )}
+      />
+    </>
   );
 }
diff --git a/components/start-pet/image-modal/image-modal.module.scss b/components/start-pet/image-modal/image-modal.module.scss
@@ -0,0 +1,28 @@
+.modalContainer {
+  position: relative;
+  width: 100%;
+  p {
+    padding: 61px 47px 47px;
+    text-align: center;
+  }
+  .buttonBox {
+    display: flex;
+    height: 64px;
+    border-top: 1px solid var(--main-color);
+    width: 100%;
+  }
+  .modalCloseButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: var(--main-color);
+    bottom: -68px;
+    left: 50%;
+    transform: translateX(-50%);
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
+  }
+}
diff --git a/components/start-pet/image-modal/image-modal.tsx b/components/start-pet/image-modal/image-modal.tsx
@@ -0,0 +1,45 @@
+import { PropsWithChildren, ReactNode, RefObject } from 'react';
+import styles from './image-modal.module.scss';
+import Button from '@/components/common/button/button';
+import CloseSVG from '@/public/images/pets/plus-circle.svg';
+import { ControllerRenderProps, FieldValues } from 'react-hook-form';
+
+interface ImageModalType {
+  Modal: ({ children }: PropsWithChildren) => ReactNode;
+  handleModal: (isOpen: boolean) => void;
+  fileInputRef: RefObject<HTMLInputElement>;
+  field: ControllerRenderProps<FieldValues, string>;
+}
+
+export default function ImageModal({ Modal, handleModal, fileInputRef, field }: ImageModalType) {
+  const handleClose = () => {
+    handleModal(false);
+  };
+  const handleButtonClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+  const handleInitialization = () => {
+    field.onChange(null);
+    handleModal(false);
+  };
+  return (
+    <Modal>
+      <div className={styles.modalContainer}>
+        <p>프로필 사진을 변경하시겠습니까?</p>
+        <div className={styles.buttonBox}>
+          <Button type="button" className="default" onClick={handleInitialization} leftRound>
+            이미지 초기화 하기
+          </Button>
+          <Button type="button" className="primary" onClick={handleButtonClick} rightRound>
+            이미지 변경하기
+          </Button>
+        </div>
+        <button className={styles.modalCloseButton} onClick={handleClose} type="button" title="모달 닫기">
+          <CloseSVG />
+        </button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/pages/start-pet/[id]/index.tsx b/pages/start-pet/[id]/index.tsx
@@ -21,9 +21,9 @@ export default function PetEntryModify() {
       const response = await imageUpload(submitData);
       data.imageId = response.data.data[0];
     }
-    if (data.petProfileImageId && data.imageId === null) {
-      data.imageId = data.petProfileImageId;
-    }
+    // if (data.petProfileImageId && data.imageId === null) {
+    //   data.imageId = data.petProfileImageId;
+    // }
     if (id) {
       mutate({
         data: {
@@ -42,10 +42,14 @@ export default function PetEntryModify() {
     }
   };
   if (isLoading) return null;
+  const defaultValue = {
+    ...data.data,
+    imageId: data.data.petProfileImageId,
+  };
   return (
     <section className={styles.section}>
       <Title>반려동물 수정</Title>
-      <EntryForm onSubmit={handleSubmit} defaultData={data.data}>
+      <EntryForm onSubmit={handleSubmit} defaultData={defaultValue}>
         <Button type="submit" className="primary" round>
           반려동물 수정하기
         </Button>

diff --git a/public/images/pets/plus-circle.svg b/public/images/pets/plus-circle.svg
diff --git a/types/my-page/pet/detsils.ts b/types/my-page/pet/detsils.ts
@@ -3,7 +3,7 @@ export interface PetDetails {
 }
 
 export interface PetDetailsData {
-  url: string;
+  url?: string;
   name: string;
   sex: string;
   birthDate: Date;