fix: 가게 정보 수정 모달에서 카테고리 추가

BCSDLab · Apr 5, 2024 · 3c975b8 · 3c975b8
1 parent 8e6354a
commit 3c975b8
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 9 deletions.
diff --git a/src/page/MyShopPage/components/EditShopInfoModal/EditShopInfoModal.module.scss b/src/page/MyShopPage/components/EditShopInfoModal/EditShopInfoModal.module.scss
@@ -151,6 +151,12 @@
     padding: 8px 0 8px 12px;
   }
 
+  &__select {
+    width: 345px;
+    height: 40px;
+    padding-left: 12px;
+  }
+
   &__operate-time {
     display: flex;
 
@@ -171,6 +177,7 @@
   &__checkboxes {
     display: grid;
     grid-template-columns: 1fr 1fr;
+    gap: 16px;
   }
 
   &__checkbox {
@@ -295,6 +302,12 @@
     border: 1px solid #898a8d;
   }
 
+  &--select {
+    width: 262px;
+    height: 37px;
+    padding: 0 8px;
+  }
+
   &__checkboxes {
     display: flex;
     justify-content: space-between;

diff --git a/src/page/MyShopPage/components/EditShopInfoModal/index.tsx b/src/page/MyShopPage/components/EditShopInfoModal/index.tsx
@@ -13,6 +13,7 @@ import { OwnerShop } from 'model/shopInfo/ownerShop';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useMutation } from '@tanstack/react-query';
 import { putShop } from 'api/shop';
+import useShopCategory from 'query/shopCategory';
 import useBooleanState from 'utils/hooks/useBooleanState';
 import CustomModal from 'component/common/CustomModal';
 import OperateTimePC from 'page/ShopRegistration/component/Modal/OperateTimePC';
@@ -41,12 +42,14 @@ EditShopInfoModalProps) {
   const { imageFile, saveImgFile, imgRef } = useImageUpload();
   const {
     setName, setAddress, setPhone, setDeliveryPrice, setDescription, setDelivery, setPayBank,
-    setPayCard,
+    setPayCard, setCategoryId,
   } = useShopRegistrationStore();
   const {
-    name, address, phone, deliveryPrice, description, delivery, payBank, payCard,
+    name, address, phone, deliveryPrice, description, delivery, payBank, payCard, categoryId,
   } = useShopRegistrationStore();
 
+  const { categoryList } = useShopCategory();
+
   const {
     openTimeState,
     closeTimeState,
@@ -64,6 +67,10 @@ EditShopInfoModalProps) {
     isAllClosed,
   } = CheckSameTime();
 
+  const handleCategoryIdChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setCategoryId(Number(e.target.value));
+  };
+
   const {
     handleSubmit, setValue,
   } = useForm<OwnerShop>({
@@ -91,6 +98,7 @@ EditShopInfoModalProps) {
     setDelivery(shopInfo.delivery);
     setPayBank(shopInfo.pay_bank);
     setPayCard(shopInfo.pay_card);
+    setCategoryId(shopInfo.shop_categories[1].id);
     shopInfo.open.forEach((day, index) => {
       useModalStore.setState((prev) => ({
         ...prev,
@@ -133,12 +141,9 @@ EditShopInfoModalProps) {
       open_time: openTimeArray[index],
     }));
     // shop_categories[0]은 전체보기이므로 따로 처리
-    if (shopInfo.shop_categories.length === 1) {
-      setValue('category_ids', [shopInfo.shop_categories[0].id]);
-    } else {
-      const categoryIds = shopInfo.shop_categories.map((category) => category.id);
-      setValue('category_ids', categoryIds);
-    }
+    const totalCategory = 1;
+    const categoryIds = categoryId === 0 ? [totalCategory] : [totalCategory, categoryId];
+    setValue('category_ids', categoryIds);
     setValue('open', openValue);
     setValue('delivery_price', Number(deliveryPrice));
     setValue('description', description);
@@ -149,7 +154,7 @@ EditShopInfoModalProps) {
     setValue('phone', phone);
     setValue('address', address);
   }, [imageUrlList, openTimeState, closeTimeState, shopClosedState, deliveryPrice,
-    description, delivery, payBank, payCard, name, phone, address]);
+    description, delivery, payBank, payCard, name, phone, address, categoryId]);
 
   const onSubmit: SubmitHandler<OwnerShop> = (data) => {
     mutation.mutate(data);
@@ -197,6 +202,16 @@ EditShopInfoModalProps) {
                 className={styles['mobile-main-info--input']}
               />
             </label>
+            <label htmlFor="category" className={styles['mobile-main-info']}>
+              <span className={styles['mobile-main-info--header']}>카테고리</span>
+              <select value={categoryId} name="category" className={styles['mobile-main-info--select']} onChange={handleCategoryIdChange}>
+                {categoryList?.shop_categories.map((category) => (
+                  <option key={category.id} value={category.id}>
+                    {category.name}
+                  </option>
+                ))}
+              </select>
+            </label>
             <label htmlFor="phone" className={styles['mobile-main-info']}>
               <span className={styles['mobile-main-info--header']}>전화번호</span>
               <input
@@ -366,6 +381,16 @@ EditShopInfoModalProps) {
                 className={styles['main-info__input']}
               />
             </label>
+            <label htmlFor="category" className={styles['main-info']}>
+              <span className={styles['main-info__header']}>카테고리</span>
+              <select value={categoryId} name="category" className={styles['main-info__select']} onChange={handleCategoryIdChange}>
+                {categoryList?.shop_categories.map((category) => (
+                  <option key={category.id} value={category.id}>
+                    {category.name}
+                  </option>
+                ))}
+              </select>
+            </label>
             <label htmlFor="shopAddress" className={styles['main-info']}>
               <span className={styles['main-info__header']}>주소정보</span>
               <input