[가게 등록] 모바일 가게 등록 페이지 로직 및 API 구현

src/model/shopInfo/ownerShop.ts

@@ -4,7 +4,7 @@ import { Shop } from './allShopInfo';
 export const OwnerShop = Shop.omit({ id: true }).extend({
   address: z.string(),
   description: z.string(),
-  delivery_price: z.string(),
+  delivery_price: z.number(),
   image_urls: z.array(z.string()),
 });
 

src/page/ShopRegistration/component/InputBox/index.tsx

@@ -1,6 +1,7 @@
 import type { UseFormRegister } from 'react-hook-form';
 import { OwnerShop } from 'model/shopInfo/ownerShop';
-import { HTMLInputTypeAttribute, useState } from 'react';
+import { ChangeEvent, HTMLInputTypeAttribute } from 'react';
+import useShopRegistrationStore from 'store/shopRegistration';
 import styles from './InputBox.module.scss';
 
 interface InputBoxProps {
@@ -12,21 +13,36 @@ interface InputBoxProps {
 
 function formatPhoneNumber(inputNumber: string) {
   const phoneNumber = inputNumber.replace(/\D/g, '');
-
   const formattedPhoneNumber = phoneNumber.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3');
-
   return formattedPhoneNumber;
 }
 
 export default function InputBox({
   content, id, register, inputType,
 }: InputBoxProps) {
-  const [formattedPhoneNumber, setFormattedPhoneNumber] = useState('');
+  const {
+    setAddress, setPhone, setDeliveryPrice, setDescription,
+  } = useShopRegistrationStore();
+
+  const {
+    address, phone, deliveryPrice, description,
+  } = useShopRegistrationStore();
+
+  const handleValueChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+    if (id === 'address') setAddress(inputValue);
+    if (id === 'delivery_price') setDeliveryPrice(inputValue);
+    if (id === 'description') setDescription(inputValue);
+    if (id === 'phone') {
+      setPhone(formatPhoneNumber(inputValue));
+    }
+  };
 
-  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const inputNumber = e.target.value;
-    const formattedNumber = formatPhoneNumber(inputNumber);
-    setFormattedPhoneNumber(formattedNumber);
+  const getValue = () => {
+    if (id === 'address') return address;
+    if (id === 'delivery_price') return deliveryPrice;
+    if (id === 'description') return description;
+    return phone;
   };
   return (
     <label htmlFor={id} className={styles.form}>
@@ -36,8 +52,8 @@ export default function InputBox({
         id={id}
         className={styles.form__input}
         {...register(id)}
-        onChange={inputType === 'tel' ? handlePhoneChange : undefined}
-        value={inputType === 'tel' ? formattedPhoneNumber : undefined}
+        onChange={handleValueChange}
+        value={getValue()}
       />
     </label>
   );

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

@@ -1,34 +1,36 @@
 import useShopCategory from 'query/shopCategory';
-import { useState } from 'react';
 import cn from 'utils/ts/className';
-import useModalStore from 'store/modalStore';
 import { Category as CategoryProps } from 'model/category/storeCategory';
+import useShopRegistrationStore from 'store/shopRegistration';
 import styles from './Category.module.scss';
 
 export default function Category() {
-  const [selectedCategory, setSelectedCategory] = useState('');
   const { categoryList } = useShopCategory();
-  const { setCategoryState } = useModalStore();
+  const { category, setCategory, setCategoryId } = useShopRegistrationStore();
 
-  const handleCategoryClick = (category: CategoryProps) => {
-    setSelectedCategory(category.name);
-    setCategoryState([category.name, category.id]);
+  const handleCategoryClick = (categoryInfo: CategoryProps) => {
+    setCategory(categoryInfo.name);
+    setCategoryId(categoryInfo.id);
   };
 
   return (
     <div className={styles.category}>
-      {categoryList?.shop_categories.filter((_, index) => index > 0).map((category) => (
+      {categoryList?.shop_categories.filter((_, index) => index > 0).map((categoryInfo) => (
         <button
           className={cn({
             [styles.category__menu]: true,
-            [styles['category__menu--selected']]: category.name === selectedCategory,
+            [styles['category__menu--selected']]: categoryInfo.name === category,
           })}
           type="button"
-          onClick={() => { handleCategoryClick(category); }}
-          key={category.id}
+          onClick={() => { handleCategoryClick(categoryInfo); }}
+          key={categoryInfo.id}
         >
-          <img className={styles.category__image} src={category.image_url} alt="" />
-          <span className={styles.category__type}>{category.name}</span>
+          <img
+            className={styles.category__image}
+            src={categoryInfo.image_url}
+            alt={categoryInfo.name}
+          />
+          <span className={styles.category__type}>{categoryInfo.name}</span>
         </button>
       ))}
     </div>

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

@@ -1,4 +1,4 @@
-import useModalStore from 'store/modalStore';
+import useShopRegistrationStore from 'store/shopRegistration';
 import styles from './ConfirmShop.module.scss';
 
 interface ShopInfo {
@@ -14,7 +14,7 @@ interface ConfirmShopProps {
 }
 
 export default function ConfirmShop({ open, onCancel, selectedShop }: ConfirmShopProps) {
-  const { setSearchShopState: setSearchStoreState, setSelectedShopId } = useModalStore();
+  const { setName } = useShopRegistrationStore();
   if (!open) return null;
   return (
     <div className={styles.container}>
@@ -29,8 +29,7 @@ export default function ConfirmShop({ open, onCancel, selectedShop }: ConfirmSho
         type="button"
         className={styles['container__select-button']}
         onClick={() => {
-          setSearchStoreState(selectedShop.name);
-          setSelectedShopId(selectedShop.id);
+          setName(selectedShop.name);
           onCancel();
         }}
       >

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

@@ -39,6 +39,10 @@
   &__time-picker {
     display: flex;
     justify-content: center;
+
+    &--selected {
+      color: #c5c5c5;
+    }
   }
 
   &__checkbox {

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

@@ -4,6 +4,8 @@ import useStepStore from 'store/useStepStore';
 import TimePicker from 'page/ShopRegistration/component/TimePicker';
 import { WEEK } from 'utils/constant/week';
 import { createPortal } from 'react-dom';
+import useModalStore from 'store/modalStore';
+import cn from 'utils/ts/className';
 import styles from './OperateTimeMobile.module.scss';
 
 interface OperateTimeMobileProps {
@@ -13,6 +15,17 @@ interface OperateTimeMobileProps {
 
 export default function OperateTimeMobile({ isOpen, closeModal }: OperateTimeMobileProps) {
   const step = useStepStore((state) => state.step);
+  const { shopClosedState } = useModalStore();
+
+  const handleShopClosedChange = (day: string) => {
+    useModalStore.setState((prev) => ({
+      ...prev,
+      shopClosedState: {
+        ...prev.shopClosedState,
+        [day]: !prev.shopClosedState[day],
+      },
+    }));
+  };
 
   if (!isOpen) return null;
   return createPortal(
@@ -36,12 +49,23 @@ export default function OperateTimeMobile({ isOpen, closeModal }: OperateTimeMob
               {WEEK.map((day) => (
                 <tr className={styles.table__data} key={day}>
                   <td>{day}</td>
-                  <td className={styles['table__time-picker']}>
+                  <td className={cn({
+                    [styles['table__time-picker']]: true,
+                    [styles['table__time-picker--selected']]: shopClosedState[day],
+                  })}
+                  >
                     <TimePicker operatingDay={day} isOpenTimePicker />
                     {' ~ '}
                     <TimePicker operatingDay={day} isOpenTimePicker={false} />
                   </td>
-                  <td><input type="checkbox" className={styles.table__checkbox} /></td>
+                  <td>
+                    <input
+                      type="checkbox"
+                      onChange={() => handleShopClosedChange(day)}
+                      className={styles.table__checkbox}
+                      checked={shopClosedState[day]}
+                    />
+                  </td>
                 </tr>
               ))}
             </tbody>

src/page/ShopRegistration/hooks/useOperateTimeState.ts

@@ -18,7 +18,7 @@ export default function useOperateTimeState() {
   useEffect(() => {
     setOperateTimeState((prevOperateTimeState) => ({
       ...prevOperateTimeState,
-      holiday: `매주 ${WEEK.filter((day) => shopClosedState[day]).join('요일 ')}요일 정기 휴무`,
+      holiday: `매주 ${WEEK.filter((day) => shopClosedState[day]).join(' ')} 정기 휴무`,
       time: `${openTimeState[openDay]} ~ ${closeTimeState[openDay]}`,
     }));
   }, [openTimeState, closeTimeState, shopClosedState, openDay]);

src/page/ShopRegistration/view/Mobile/Main/Main.module.scss

@@ -19,6 +19,33 @@
     }
   }
 
+  &__image-upload {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    width: 295px;
+    height: 200px;
+    border: 1px solid #858585;
+    margin-bottom: 32px;
+  }
+
+  &__upload-file {
+    display: none;
+  }
+
+  &__main-menu {
+    max-width: 295px;
+    max-height: 200px;
+  }
+
+  &__text {
+    margin-top: 8px;
+    font-size: 14px;
+    color: #858585;
+  }
+
   &__label {
     display: flex;
     justify-content: space-between;

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

@@ -1,23 +1,60 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { ReactComponent as EmptyImgIcon } from 'assets/svg/shopRegistration/mobile-empty-img.svg';
 import useStepStore from 'store/useStepStore';
+import useImageUpload from 'utils/hooks/useImageUpload';
+import useShopRegistrationStore from 'store/shopRegistration';
+import { useEffect } from 'react';
 import styles from './Main.module.scss';
 
 export default function Main() {
   const { increaseStep } = useStepStore();
+  const { imageFile, imgRef, saveImgFile } = useImageUpload();
+  const {
+    name, setName, address, setAddress, imageUrl, setImageUrl,
+  } = useShopRegistrationStore();
 
+  useEffect(() => {
+    if (imageFile !== '') setImageUrl(imageFile);
+  }, [imageFile]);
   return (
     <div className={styles.form}>
-      <div className={styles.form__img}>
-        <EmptyImgIcon />
-        <div>등록된 이미지가 없습니다.</div>
-      </div>
+      <label className={styles['form__image-upload']} htmlFor="mainMenuImage">
+        <input
+          type="file"
+          accept="image/*"
+          id="mainMenuImage"
+          className={styles['form__upload-file']}
+          onChange={saveImgFile}
+          ref={imgRef}
+        />
+        {imageUrl
+          ? <img src={imageUrl} className={styles['form__main-menu']} alt="메인 메뉴" />
+          : (
+            <>
+              <EmptyImgIcon />
+              <span className={styles.form__text}>등록된 이미지가 없습니다.</span>
+            </>
+          )}
+      </label>
       <label htmlFor="name" className={styles.form__label}>
         가게명
-        <input type="text" id="name" className={styles.form__input} />
+        <input
+          type="text"
+          id="name"
+          onChange={(e) => setName(e.target.value)}
+          value={name}
+          className={styles.form__input}
+        />
       </label>
       <label htmlFor="address" className={styles.form__label}>
         주소정보
-        <input type="text" id="address" className={styles.form__input} />
+        <input
+          type="text"
+          id="address"
+          onChange={(e) => setAddress(e.target.value)}
+          value={address}
+          className={styles.form__input}
+        />
       </label>
       <div className={styles.form__button}>
         <button type="button" onClick={increaseStep}>다음</button>

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

@@ -1,32 +1,42 @@
-import { useState } from 'react';
 import useStepStore from 'store/useStepStore';
 import useShopCategory from 'query/shopCategory';
 import cn from 'utils/ts/className';
+import { Category as CategoryProps } from 'model/category/storeCategory';
+import useShopRegistrationStore from 'store/shopRegistration';
 import styles from './ShopCategory.module.scss';
 
-type Category = string;
-
 export default function ShopCategory() {
   const { categoryList } = useShopCategory();
   const { increaseStep } = useStepStore();
-  const [selectedCategory, setSelectedCategory] = useState<Category | null>(null);
+  const {
+    category, setCategory, setCategoryId,
+  } = useShopRegistrationStore();
+
+  const handleCategoryClick = (categoryInfo: CategoryProps) => {
+    setCategory(categoryInfo.name);
+    setCategoryId(categoryInfo.id);
+  };
 
   return (
     <div className={styles.category}>
       <div className={styles.category__title}>카테고리를 골라주세요.</div>
       <div className={styles.category__wrapper}>
-        {categoryList?.shop_categories.filter((_, index) => index > 0).map((category) => (
+        {categoryList?.shop_categories.filter((_, index) => index > 0).map((categoryInfo) => (
           <button
             className={cn({
               [styles.category__menu]: true,
-              [styles['category__menu--selected']]: category.name === selectedCategory,
+              [styles['category__menu--selected']]: categoryInfo.name === category,
             })}
             type="button"
-            onClick={() => setSelectedCategory(category.name)}
-            key={category.id}
+            onClick={() => handleCategoryClick(categoryInfo)}
+            key={categoryInfo.id}
           >
-            <img className={styles.category__image} src={category.image_url} alt="" />
-            <span className={styles.category__type}>{category.name}</span>
+            <img
+              className={styles.category__image}
+              src={categoryInfo.image_url}
+              alt={categoryInfo.name}
+            />
+            <span className={styles.category__type}>{categoryInfo.name}</span>
           </button>
         ))}
       </div>