Merge pull request #331 from BCSDLab/feat/#329

BCSDLab · May 10, 2024 · 07de92d · 07de92d
2 parents 23a9a2e + 4e67eb9
commit 07de92d
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 12 deletions.
diff --git a/src/page/Auth/Signup/view/OwnerDataPage/index.tsx b/src/page/Auth/Signup/view/OwnerDataPage/index.tsx
@@ -133,7 +133,7 @@ export default function OwnerData({ goNext }:ButtonClickEvent) {
             {ownerData.registerFiles ? (
               <div className={styles['file-box__files']}>
                 {ownerData.registerFiles.map((file:File, index:number) => (
-                  <button type="button" className={styles['file-box__file']} onClick={(e) => onClick(index, e)}>
+                  <button key={file.name} type="button" className={styles['file-box__file']} onClick={(e) => onClick(index, e)}>
                     <FileImage />
                     <span className={styles['file-box__file--name']}>{file.name}</span>
                   </button>

diff --git a/src/page/ShopRegistration/view/PC/ShopRegistrationPC.module.scss b/src/page/ShopRegistration/view/PC/ShopRegistrationPC.module.scss
@@ -99,6 +99,15 @@ input::-webkit-inner-spin-button {
     border: 1px solid #d2dae2;
     padding: 53px 80px 54px;
     cursor: pointer;
+
+    &--active {
+      display: flex;
+      flex-direction: column;
+      padding: 10px 20px;
+      width: 340px;
+      height: 180px;
+      justify-content: flex-start;
+    }
   }
 
   &__upload-file {
@@ -110,6 +119,21 @@ input::-webkit-inner-spin-button {
     max-height: 200px;
   }
 
+  &__main-item {
+    max-width: 370px;
+    display: flex;
+    z-index: 99;
+  }
+
+  &__main-text {
+    width: 90%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+    color: #858585;
+  }
+
   &__cutlery-cross {
     width: 64px;
     height: 64px;

diff --git a/src/page/ShopRegistration/view/PC/index.tsx b/src/page/ShopRegistration/view/PC/index.tsx
@@ -14,6 +14,7 @@ import ConfirmPopup from 'page/ShopRegistration/component/ConfirmPopup';
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import useBooleanState from 'utils/hooks/useBooleanState';
 import CustomModal from 'component/common/CustomModal';
+import cn from 'utils/ts/className';
 import useModalStore from 'store/modalStore';
 import { WEEK, DAY_OF_WEEK } from 'utils/constant/week';
 import { SubmitHandler, useForm } from 'react-hook-form';
@@ -26,6 +27,7 @@ import useShopRegistrationStore from 'store/shopRegistration';
 import ErrorMessage from 'page/Auth/Signup/component/ErrorMessage';
 import { ERRORMESSAGE } from 'page/ShopRegistration/constant/errorMessage';
 import { usePostData } from 'page/ShopRegistration/view/Mobile/ShopConfirmation/index';
+import { ReactComponent as FileImage } from 'assets/svg/auth/default-file.svg';
 import styles from './ShopRegistrationPC.module.scss';
 
 export default function ShopRegistrationPC() {
@@ -53,7 +55,7 @@ export default function ShopRegistrationPC() {
     setFalse: closeConfirmPopup,
   } = useBooleanState(false);
   const {
-    imageFile, imgRef, saveImgFile, uploadError,
+    imageFile, imgRef, saveImgFile, uploadError, setImageFile,
   } = useImagesUpload();
   const [isError, setIsError] = useState(false);
 
@@ -73,6 +75,7 @@ export default function ShopRegistrationPC() {
     setPhone,
     setDeliveryPrice,
     setDescription,
+    removeImageUrl,
   } = useShopRegistrationStore();
 
   const {
@@ -126,6 +129,12 @@ export default function ShopRegistrationPC() {
   const closeTimeArray = Object.values(closeTimeState);
   const shopClosedArray = Object.values(shopClosedState);
 
+  const onClickRemoveImageUrl = (e: React.MouseEvent<HTMLDivElement>, imageUrl: string) => {
+    e.preventDefault();
+    setImageFile(imageFile.filter((img) => img !== imageUrl));
+    removeImageUrl(imageUrl);
+  };
+
   useEffect(() => {
     if (imageFile.length > 0 || uploadError !== '') setImageUrls(imageFile);
     const openValue = DAY_OF_WEEK.map((day, index) => ({
@@ -183,7 +192,13 @@ export default function ShopRegistrationPC() {
             <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
               <div>
                 <span className={styles.form__title}>대표 이미지</span>
-                <label className={styles['form__image-upload']} htmlFor="mainMenuImage">
+                <label
+                  className={cn({
+                    [styles['form__image-upload']]: true,
+                    [styles['form__image-upload--active']]: imageUrls.length !== 0,
+                  })}
+                  htmlFor="mainMenuImage"
+                >
                   <input
                     type="file"
                     accept="image/*"
@@ -193,9 +208,20 @@ export default function ShopRegistrationPC() {
                     onChange={saveImgFile}
                     ref={imgRef}
                   />
-                  {imageUrls
-                    ? <img src={imageUrls[0]} className={styles['form__main-menu']} alt="메인 메뉴" />
-                    : (
+                  {imageUrls.length !== 0
+                    ? (
+                      imageUrls.map((imageUrl: string) => (
+                        <div
+                          key={imageUrl}
+                          className={styles['form__main-item']}
+                          onClick={(e) => onClickRemoveImageUrl(e, imageUrl)}
+                          aria-hidden
+                        >
+                          <FileImage />
+                          <div className={styles['form__main-text']}>{imageUrl}</div>
+                        </div>
+                      ))
+                    ) : (
                       <>
                         <Cutlery className={styles['form__cutlery-cross']} />
                         <span className={styles.form__text}>클릭하여 이미지를 등록해주세요.</span>

diff --git a/src/query/register.ts b/src/query/register.ts
@@ -1,8 +1,8 @@
+import { isKoinError } from '@bcsdlab/koin';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import {
   getEmailAuthCode, getEmailDuplicate, getFileUrls, registerUser, verificationAuthCode,
 } from 'api/register';
-import axios from 'axios';
 import parseRegisterData from 'page/Auth/Signup/utils/parseRegisterData';
 import useRegisterInfo from 'store/registerStore';
 import useShopRegistrationStore from 'store/shopRegistration';
@@ -85,8 +85,8 @@ export const useGetFileUrls = (goNext:()=>void) => {
         try {
           await register.mutateAsync(data.file_urls);
         } catch (e) {
-          if (axios.isAxiosError(e)) {
-            showToast('error', `${e.response?.data.message || e.message}`);
+          if (isKoinError(e)) {
+            showToast('error', `${e.message}`);
           }
         }
       } catch (e) {

diff --git a/src/store/shopRegistration.ts b/src/store/shopRegistration.ts
@@ -39,7 +39,7 @@ const useShopRegistrationStore = create<ShopRegistrationStore>((set) => ({
   deliveryPrice: 0,
   description: '',
   imageUrl: '',
-  imageUrls: [],
+  imageUrls: ['aa'],
   owner: '',
   name: '',
   phone: '',
@@ -56,8 +56,8 @@ const useShopRegistrationStore = create<ShopRegistrationStore>((set) => ({
   setImageUrls: (newImageUrls: string[]) => set({
     imageUrls: newImageUrls,
   }),
-  removeImageUrl: (imageUrlToRemove) => set((state) => ({
-    imageUrls: state.imageUrls.filter((img) => img !== imageUrlToRemove),
+  removeImageUrl: (imageUrl: string) => set((state) => ({
+    imageUrls: state.imageUrls.filter((img) => img !== imageUrl),
   })),
   setOwner: (owner: string) => set({ owner }),
   setName: (name: string) => set({ name }),