Merge pull request #46 from BCSDLab/fix/create-store

상점 및 추가, 수정 api 구조 변경 대응

src/model/store.model.ts

@@ -82,3 +82,23 @@ export interface StoreParams {
   page: number;
   is_deleted: boolean;
 }
+
+export interface CreateStoreParams {
+  address: string;
+  category_ids: number[];
+  delivery: true;
+  delivery_price: number;
+  description: string;
+  image_urls: string[];
+  name: string;
+  open: StoreOpen[];
+  pay_bank: boolean;
+  pay_card: boolean;
+  phone: string;
+}
+
+export interface ModifyStoreParams extends CreateStoreParams {
+  phone: string;
+  bank: string;
+  account_number: string;
+}

src/pages/Services/Store/StoreDetail.tsx

@@ -4,7 +4,7 @@ import { DeleteOutlined, ReloadOutlined, UploadOutlined } from '@ant-design/icon
 import { Divider } from 'antd';
 import DetailHeading from 'components/common/DetailHeading';
 import { useGetStoreQuery } from 'store/api/store';
-import { StoreResponse } from 'model/store.model';
+import { ModifyStoreParams } from 'model/store.model';
 import useStoreMutation from './components/useStoreMutation';
 import * as S from './StoreDetail.style';
 import StoreDetailForm from './components/StoreDetailForm';
@@ -14,9 +14,9 @@ export default function StoreDetail() {
   const { id } = useParams();
   const { data: storeData } = useGetStoreQuery(Number(id));
   const { updateStore, deleteStore, undeleteStore } = useStoreMutation(Number(id));
-  const [storeForm] = CustomForm.useForm();
+  const [storeForm] = CustomForm.useForm<Partial<ModifyStoreParams>>();
 
-  const onFinish = (values : StoreResponse) => {
+  const onFinish = (values : Partial<ModifyStoreParams>) => {
     const updatedValues = { ...values };
     // open만 업데이트 되지않아 재할당함
     updatedValues.open = storeForm.getFieldValue('open');

src/pages/Services/Store/components/AddMenuForm.tsx

@@ -1,7 +1,7 @@
 import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
 import { Card, message } from 'antd';
 import CustomForm from 'components/common/CustomForm';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import useBooleanState from 'utils/hooks/useBoolean';
 import MenuDetailForm from './MenuDetailForm';
@@ -19,13 +19,17 @@ export default function AddMenuForm() {
       onSuccess: () => {
         message.success('정보 추가가 완료되었습니다.');
         form.resetFields();
+        form.setFieldValue('image_urls', []);
       },
       onError: (error) => {
         if (error?.violations) message.error(error.violations[0]);
         else message.error(error.message);
       },
     });
   };
+  useEffect(() => {
+    form.setFieldValue('image_urls', []);
+  }, [form]);
   return (
     <>
       <S.MenuAddButton onClick={() => chagneIsVisible()} type="dashed" icon={<PlusOutlined />}>메뉴 추가</S.MenuAddButton>

src/pages/Services/Store/components/AddStoreModal.tsx

@@ -5,7 +5,7 @@ import CustomForm from 'components/common/CustomForm';
 
 import { message } from 'antd';
 import * as S from 'styles/List.style';
-import { DAY, StoreResponse } from 'model/store.model';
+import { CreateStoreParams, DAY } from 'model/store.model';
 import STORE_OPTION from 'constant/store';
 import { useEffect } from 'react';
 import useStoreMutation from './useStoreMutation';
@@ -14,15 +14,9 @@ import StoreDetailForm from './StoreDetailForm';
 const DAYS = ['월', '화', '수', '목', '금', '토', '일'];
 
 export default function AddStoreModal({ closeModal }: { closeModal: () => void }) {
-  const [form] = CustomForm.useForm();
+  const [form] = CustomForm.useForm<CreateStoreParams>();
   const { addStore } = useStoreMutation(1);
 
-  useEffect(() => {
-    STORE_OPTION.map((optionData) => (
-      form.setFieldValue(optionData.data, false)
-    ));
-  }, [form]);
-
   const defaultTimeInfo = DAYS.map((day, index) => {
     return (
       {
@@ -33,9 +27,16 @@ export default function AddStoreModal({ closeModal }: { closeModal: () => void }
       });
   });
 
-  const createStore = (values: Partial<StoreResponse>) => {
-    const data = form.getFieldsValue(true);
-    addStore(data, {
+  useEffect(() => {
+    STORE_OPTION.map((optionData) => (
+      form.setFieldValue(optionData.data, false)
+    ));
+    form.setFieldValue('image_urls', []);
+  }, [form]);
+
+  const createStore = (values: Partial<CreateStoreParams>) => {
+    const openField = form.getFieldValue('open');
+    addStore({ ...values, open: openField }, {
       onSuccess: () => {
         message.success('정보 추가가 완료되었습니다.');
         closeModal();
@@ -45,6 +46,7 @@ export default function AddStoreModal({ closeModal }: { closeModal: () => void }
         message.error(errorMessage);
       },
     });
+
     // .then(() => {
     //   closeModal();
     //   form.resetFields();
@@ -56,7 +58,9 @@ export default function AddStoreModal({ closeModal }: { closeModal: () => void }
     <CustomForm
       onFinish={createStore}
       form={form}
-      initialValues={{ open: defaultTimeInfo }}
+      initialValues={{
+        open: defaultTimeInfo,
+      }}
     >
       <S.DetailFormWrap>
         <StoreDetailForm form={form} />

src/pages/Services/Store/components/MenuDetailForm.tsx

@@ -28,6 +28,11 @@ export default function MenuDetailForm({ form, storeMenu }: {
   }));
   form.setFieldValue('is_single', isSingleMenu);
 
+  const setSingleMenu = () => {
+    isSingleMenuChange();
+    form.setFieldValue('option_prices', null);
+  };
+
   return (
     <CustomForm
       form={form}
@@ -43,7 +48,7 @@ export default function MenuDetailForm({ form, storeMenu }: {
       <Form.Item name="is_single">
         <Checkbox
           checked={isSingleMenu}
-          onChange={() => isSingleMenuChange()}
+          onChange={() => setSingleMenu()}
         >
           단일 메뉴
         </Checkbox>