[공통] 비즈니스팀 2차 QA 이슈 해결

src/component/common/Auth/Complete/index.tsx

@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom';
 import { ReactComponent as Check } from 'assets/svg/auth/check.svg';
 import useStepStore from 'store/useStepStore';
+import useShopRegistrationStore from 'store/shopRegistration';
 import styles from './Complete.module.scss';
 
 interface CompleteProps {
@@ -14,9 +15,33 @@ export default function Complete({
   title, topText, bottomText, link, linkText,
 }: CompleteProps) {
   const { setStep } = useStepStore();
+  const {
+    setCategory,
+    setCategoryId,
+    setImageUrls,
+    setName,
+    setAddress,
+    setPhone,
+    setDeliveryPrice,
+    setDescription,
+    setDelivery,
+    setPayBank,
+    setPayCard,
+  } = useShopRegistrationStore();
 
   const initialize = () => {
     setStep(0);
+    setCategory([]);
+    setCategoryId([]);
+    setDelivery(false);
+    setDeliveryPrice(0);
+    setDescription('');
+    setImageUrls([]);
+    setName('');
+    setPayBank(false);
+    setPayCard(false);
+    setPhone('');
+    setAddress(''); // 전역 상태 초기화
   };
   return (
     <div className={styles.content}>

src/page/Auth/Signup/component/ErrorMessage/ErrorMessage.module.scss

@@ -2,8 +2,8 @@
   display: flex;
   align-items: center;
   gap: 7px;
-  height: 11px;
-  margin: 8px 0 0;
+  height: 32px;
+  margin-top: 10px;
 
   &--phrase {
     display: block;

src/page/Auth/Signup/component/ErrorMessage/index.tsx

@@ -5,18 +5,7 @@ interface ErrorMessageProps {
   message: string | (string | undefined | null)[]
 }
 
-export default function ErrorMessage({ message }:ErrorMessageProps) {
-  if (typeof message === 'string') {
-    return (
-      <div className={styles.warn}>
-        <Warn />
-        <span className={styles['warn--phrase']}>
-          {message}
-        </span>
-      </div>
-    );
-  }
-
+export default function ErrorMessage({ message }: ErrorMessageProps) {
   if (message.length > 0) {
     return (
       <div className={styles.warn}>

src/page/Auth/Signup/component/UserEmail/index.tsx

@@ -54,7 +54,7 @@ export default function UserEmail() {
           </div>
           {isOpen ? (
             <>
-              {verificateError ? <ErrorMessage message={[verificateError]} />
+              {verificateError ? <ErrorMessage message={verificateError} />
                 : <span className={styles['email-check__alert']}>{`* 제한시간 ${getTime()}`}</span>}
               <div className={styles.button}>
                 <CustomButton
@@ -88,7 +88,7 @@ export default function UserEmail() {
             <div className={styles['email-check__input']}>
               <input className={styles.input} type="password" pattern="\d*" maxLength={6} placeholder="인증번호 입력" ref={codeInput} />
             </div>
-            {errorMessage && <ErrorMessage message={errorMessage} />}
+            {verificateError && <ErrorMessage message={verificateError} />}
             <span className={styles['email-check__alert']}>{`* 제한시간 ${getTime()}`}</span>
           </div>
           <div className={styles.buttons}>

src/page/Auth/Signup/component/UserPassword/index.tsx

@@ -17,7 +17,7 @@ export default function UserPassword() {
   const {
     passwordRegister, passwordConfirmRegister, errors: formErrors, handleSubmit,
   } = usePasswordConfirm();
-  const onSubmit:SubmitHandler<User> = (data) => {
+  const onSubmit: SubmitHandler<User> = (data) => {
     setPassword({ ...userData, password: data.password });
   };
   return (
@@ -32,22 +32,22 @@ export default function UserPassword() {
           autoComplete="off"
         />
         {!isMobile && (
-        <button className={styles['form__visible--button']} type="button" onClick={changeIsBlind}>
-          {isBlind ? <BlindIcon /> : <ShowIcon />}
-        </button>
+          <button className={styles['form__visible--button']} type="button" onClick={changeIsBlind}>
+            {isBlind ? <BlindIcon /> : <ShowIcon />}
+          </button>
         )}
         {formErrors.password ? (<ErrorMessage message={[formErrors.password.message]} />
         ) : <span className={styles.form__alert}>* 특수문자 포함 영어와 숫자 조합 6~18 자리</span>}
       </div>
       <div className={styles.form__input} onChange={handleSubmit(onSubmit)}>
-        <input className={styles.input} placeholder={isMobile ? '비밀번호' : '비밀번호 입력 (필수)'} type={isBlind ? 'password' : 'text'} {...passwordConfirmRegister} autoComplete="off" />
+        <input className={styles.input} placeholder={isMobile ? '비밀번호 확인' : '비밀번호 입력 (필수)'} type={isBlind ? 'password' : 'text'} {...passwordConfirmRegister} autoComplete="off" />
         {!isMobile && (
-        <button className={styles['form__visible--button']} type="button" onClick={changeIsBlind}>
-          {isBlind ? <BlindIcon /> : <ShowIcon />}
-        </button>
+          <button className={styles['form__visible--button']} type="button" onClick={changeIsBlind}>
+            {isBlind ? <BlindIcon /> : <ShowIcon />}
+          </button>
         )}
         {formErrors.passwordConfirm
-        && <ErrorMessage message={[formErrors.passwordConfirm.message]} />}
+          && <ErrorMessage message={[formErrors.passwordConfirm.message]} />}
       </div>
     </div>
   );

src/page/Auth/Signup/hooks/useVerification.ts

@@ -1,3 +1,4 @@
+import { isKoinError } from '@bcsdlab/koin';
 import { useVerificationAuthCode } from 'query/register';
 import { useEffect, useRef, useState } from 'react';
 import useRegisterInfo from 'store/registerStore';
@@ -7,7 +8,7 @@ export default function useVerification(
   eamil:string,
 ) {
   const [code, setCode] = useState('');
-  const [errorMessage, setMessage] = useState();
+  const [errorMessage, setMessage] = useState<string>('');
   const codeInput = useRef<HTMLInputElement>(null);
   const { userInfo: userData, setUserInfo: setAuthenticate } = useRegisterInfo();
   const {
@@ -29,10 +30,16 @@ export default function useVerification(
   useEffect(() => {
     if (status === 'success' && !userData.isAuthentication && data) {
       setAuthenticate({ ...userData, isAuthentication: true });
-      setMessage(undefined);
+      setMessage('');
       setUploadToken(data.token);
-    } else if (isError) {
-      setMessage(Object(error).response.data.violations[0]);
+    }
+    if (isError) {
+      if (isKoinError(error)) {
+        setMessage(error.message);
+      }
+    }
+    if (!isError) {
+      setMessage('');
     }
   }, [status, userData, setAuthenticate, error, isError, data, setUploadToken]);
   return {

src/page/MyShopPage/components/EditShopInfoModal/index.tsx

@@ -23,6 +23,8 @@ import useMediaQuery from 'utils/hooks/useMediaQuery';
 import OperateTimeMobile from 'page/ShopRegistration/component/Modal/OperateTimeMobile';
 import { TOTAL_CATEGORY } from 'utils/constant/category';
 import useImagesUpload from 'utils/hooks/useImagesUpload';
+import { isKoinError, sendClientError } from '@bcsdlab/koin';
+import showToast from 'utils/ts/showToast';
 import styles from './EditShopInfoModal.module.scss';
 
 interface EditShopInfoModalProps {
@@ -31,8 +33,11 @@ interface EditShopInfoModalProps {
   setIsSuccess: Dispatch<SetStateAction<boolean>>;
 }
 
-export default function EditShopInfoModal({ shopInfo, closeModal, setIsSuccess }:
-EditShopInfoModalProps) {
+export default function EditShopInfoModal({
+  shopInfo,
+  closeModal,
+  setIsSuccess,
+}: EditShopInfoModalProps) {
   const { isMobile } = useMediaQuery();
   const {
     setTrue: openOperateTimeModal,
@@ -72,7 +77,7 @@ EditShopInfoModalProps) {
   } = CheckSameTime();
 
   const handleCategoryIdChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setCategoryId(Number(e.target.value));
+    setCategoryId([Number(e.target.value)]);
   };
 
   const {
@@ -81,14 +86,26 @@ EditShopInfoModalProps) {
     resolver: zodResolver(OwnerShop),
   });
 
+  useEffect(() => {
+    if (imageFile && !uploadError) { // 초기에 이 값이 true기 때문에 imageUrls가 빈 배열로 초기화되고 있었음
+      setImageUrls(imageFile);
+    }
+  }, [imageFile, setImageUrls]);
+
   const mutation = useMutation({
     mutationFn: (form: OwnerShop) => putShop(shopInfo.id, form),
     onSuccess: () => {
       closeModal();
       setIsSuccess(true);
     },
+    onError: (e) => {
+      if (isKoinError(e)) {
+        showToast('error', e.message);
+        return;
+      }
+      sendClientError(e);
+    },
   });
-
   useEffect(() => {
     setImageUrls(shopInfo.image_urls);
     setName(shopInfo.name);
@@ -99,7 +116,9 @@ EditShopInfoModalProps) {
     setDelivery(shopInfo.delivery);
     setPayBank(shopInfo.pay_bank);
     setPayCard(shopInfo.pay_card);
-    setCategoryId(shopInfo.shop_categories[1] ? shopInfo.shop_categories[1].id : TOTAL_CATEGORY);
+    setCategoryId(shopInfo.shop_categories[1]
+      ? [shopInfo.shop_categories[1].id]
+      : [TOTAL_CATEGORY]);
     shopInfo.open.forEach((day, index) => {
       useModalStore.setState((prev) => ({
         ...prev,
@@ -123,12 +142,6 @@ EditShopInfoModalProps) {
     ? `매주 ${WEEK.filter((day) => shopClosedState[day]).join('요일, ')}요일`
     : '휴무일 없음';
 
-  useEffect(() => {
-    if (imageFile && !uploadError) {
-      setImageUrls(imageFile);
-    }
-  }, [imageFile, setImageUrls]);
-
   useEffect(() => {
     if (imageUrls.length > 0) {
       setValue('image_urls', imageUrls);
@@ -140,8 +153,8 @@ EditShopInfoModalProps) {
       open_time: openTimeArray[index],
     }));
     // shop_categories[0]은 전체보기이므로 따로 처리
-    const categoryIds = categoryId === TOTAL_CATEGORY
-      ? [TOTAL_CATEGORY] : [TOTAL_CATEGORY, categoryId];
+    const categoryIds = categoryId.filter((item) => item !== TOTAL_CATEGORY).length === 0
+      ? [TOTAL_CATEGORY] : [TOTAL_CATEGORY, ...categoryId];
     setValue('category_ids', categoryIds);
     setValue('open', openValue);
     setValue('delivery_price', Number(deliveryPrice));
@@ -214,7 +227,7 @@ EditShopInfoModalProps) {
             </label>
             <label htmlFor="category" className={styles['mobile-main-info__label']}>
               <span className={styles['mobile-main-info__header']}>카테고리</span>
-              <select value={categoryId} name="category" className={styles['mobile-main-info__select']} onChange={handleCategoryIdChange}>
+              <select name="category" className={styles['mobile-main-info__select']} onChange={handleCategoryIdChange}>
                 {categoryList?.shop_categories.map((category) => (
                   <option key={category.id} value={category.id}>
                     {category.name}
@@ -395,7 +408,6 @@ EditShopInfoModalProps) {
             <label htmlFor="category" className={styles['main-info__label']}>
               <span className={styles['main-info__header']}>카테고리</span>
               <select
-                value={categoryId}
                 name="category"
                 className={styles['main-info__select']}
                 onChange={handleCategoryIdChange}

src/page/ShopRegistration/component/Modal/Category/index.tsx

@@ -6,11 +6,23 @@ import styles from './Category.module.scss';
 
 export default function Category() {
   const { categoryList } = useMyShop();
-  const { category, setCategory, setCategoryId } = useShopRegistrationStore();
+  const {
+    category, categoryId, setCategory, setCategoryId,
+  } = useShopRegistrationStore();
 
   const handleCategoryClick = (categoryInfo: CategoryProps) => {
-    setCategory(categoryInfo.name);
-    setCategoryId(categoryInfo.id);
+    const findPrevCategory = categoryId.find((id) => id === categoryInfo.id);
+    if (findPrevCategory) {
+      const deleteCategoryId = categoryId.filter(
+        (item) => item !== findPrevCategory,
+      ); // 삭제 후 카테고리 id
+      const deleteCategory = category.filter((item) => item !== categoryInfo.name); // 삭제 후 카테고리 이름
+      setCategoryId(deleteCategoryId);
+      setCategory(deleteCategory);
+    } else {
+      setCategoryId([...categoryId, categoryInfo.id]); // 추가 후 카테고리 id
+      setCategory([...category, categoryInfo.name]); // 추가 후 카테고리 이름
+    }
   };
 
   return (
@@ -19,7 +31,7 @@ export default function Category() {
         <button
           className={cn({
             [styles.category__menu]: true,
-            [styles['category__menu--selected']]: categoryInfo.name === category,
+            [styles['category__menu--selected']]: !!category.find((item) => item === categoryInfo.name),
           })}
           type="button"
           onClick={() => { handleCategoryClick(categoryInfo); }}

src/page/ShopRegistration/component/Modal/SearchShop/SearchShop.module.scss

@@ -71,6 +71,7 @@
 
   &__delivery {
     font-size: 12px;
+    color: #d2dae2;
 
     &--selected {
       color: #f7941e;
@@ -79,6 +80,7 @@
 
   &__pay-card {
     font-size: 12px;
+    color: #d2dae2;
 
     &--selected {
       color: #f7941e;
@@ -87,6 +89,7 @@
 
   &__pay-bank {
     font-size: 12px;
+    color: #d2dae2;
 
     &--selected {
       color: #f7941e;

src/page/ShopRegistration/view/Mobile/ShopCategory/index.tsx

@@ -13,16 +13,26 @@ export default function ShopCategory() {
   const { categoryList } = useMyShop();
   const { increaseStep } = useStepStore();
   const {
-    category, setCategory, setCategoryId,
+    category, categoryId, setCategory, setCategoryId,
   } = useShopRegistrationStore();
 
   const handleCategoryClick = (categoryInfo: CategoryProps) => {
-    setCategory(categoryInfo.name);
-    setCategoryId(categoryInfo.id);
+    const findPrevCategory = categoryId.find((id) => id === categoryInfo.id);
+    if (findPrevCategory) {
+      const deleteCategoryId = categoryId.filter(
+        (item) => item !== findPrevCategory,
+      ); // 삭제 후 카테고리 id
+      const deleteCategory = category.filter((item) => item !== categoryInfo.name); // 삭제 후 카테고리 이름
+      setCategoryId(deleteCategoryId);
+      setCategory(deleteCategory);
+    } else {
+      setCategoryId([...categoryId, categoryInfo.id]); // 추가 후 카테고리 id
+      setCategory([...category, categoryInfo.name]); // 추가 후 카테고리 이름
+    }
   };
 
   const handleNextClick = () => {
-    if (category === '') {
+    if (category.length === 0) {
       setIsError(true);
     } else {
       setIsError(false);
@@ -38,7 +48,7 @@ export default function ShopCategory() {
           <button
             className={cn({
               [styles.category__menu]: true,
-              [styles['category__menu--selected']]: categoryInfo.name === category,
+              [styles['category__menu--selected']]: !!category.find((item) => item === categoryInfo.name),
             })}
             type="button"
             onClick={() => handleCategoryClick(categoryInfo)}
@@ -53,10 +63,10 @@ export default function ShopCategory() {
           </button>
         ))}
       </div>
-      {category === '' && isError && <ErrorMessage message={ERRORMESSAGE.category} />}
+      {category.length === 0 && isError && <ErrorMessage message={ERRORMESSAGE.category} />}
       <div className={cn({
         [styles.category__button]: true,
-        [styles['category__button--error']]: category === '' && isError,
+        [styles['category__button--error']]: category.length === 0 && isError,
       })}
       >
         <button type="button" onClick={handleNextClick}>다음</button>

src/page/ShopRegistration/view/Mobile/ShopConfirmation/index.tsx

@@ -75,7 +75,7 @@ export default function ShopConfirmation() {
       open_time: openTimeArray[index],
     }));
     setValue('image_urls', imageUrls);
-    setValue('category_ids', [categoryId]);
+    setValue('category_ids', categoryId);
     setValue('name', name);
     setValue('address', address);
     setValue('phone', phone);