diff --git a/src/page/MyShopPage/components/EditShopInfoModal/EditShopInfoModal.module.scss b/src/page/MyShopPage/components/EditShopInfoModal/EditShopInfoModal.module.scss index 73681394..b45a9ecd 100644 --- 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 index 041bfa06..4972b157 100644 --- 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) => { + setCategoryId(Number(e.target.value)); + }; + const { handleSubmit, setValue, } = useForm({ @@ -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 = (data) => { mutation.mutate(data); @@ -197,6 +202,16 @@ EditShopInfoModalProps) { className={styles['mobile-main-info--input']} /> + +