Merge pull request #233 from BCSDLab/feature/#223-make_event_add

[이벤트 추가] 이벤트 추가 페이지 구현

package.json

@@ -18,6 +18,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
+    "react-quill": "^2.0.0",
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^10.0.4",

src/App.tsx

@@ -19,6 +19,7 @@ import Toast from 'component/common/Toast';
 import { UserType } from 'model/auth';
 import Coop from 'page/Coop';
 import useUserTypeStore from 'store/userType';
+import AddingEvent from 'page/AddingEvent';
 
 interface ProtectedRouteProps {
   userTypeRequired: UserType;
@@ -59,6 +60,7 @@ function App() {
             <Route path="/owner/order-management" element={<PageNotFound />} />
             <Route path="/owner/sales-management" element={<PageNotFound />} />
             <Route path="/owner/shop-add" element={<PageNotFound />} />
+            <Route path="/owner/event-add/:id" element={<AddingEvent />} />
           </Route>
         </Route>
         <Route element={<ProtectedRoute userTypeRequired="COOP" />}>

src/api/shop/index.ts

@@ -4,6 +4,7 @@ import { ShopListRes } from 'model/shopInfo/allShopInfo';
 import { accessClient, client } from 'api';
 import { OwnerShop } from 'model/shopInfo/ownerShop';
 import { NewMenu } from 'model/shopInfo/newMenu';
+import { EventInfo } from 'model/shopInfo/event';
 
 export const getMyShopList = async () => {
   const { data } = await accessClient.get<MyShopListRes>('/owner/shops');
@@ -39,3 +40,5 @@ export const modifyMenu = (menuId:number, param:NewMenu) => accessClient.put(`/o
 export const putShop = (id: number, data: OwnerShop) => accessClient.put(`/owner/shops/${id}`, data);
 
 export const deleteMenu = (menuId:number) => accessClient.delete(`/owner/shops/menus/${menuId}`);
+
+export const addEvent = (id: string, eventInfo: EventInfo) => accessClient.post(`owner/shops/${id}/event`, eventInfo);

src/component/common/Header/index.tsx

@@ -49,8 +49,7 @@ function Header() {
       },
     });
   };
-
-  if ((pathname === '/owner/add-menu' || pathname.startsWith('/owner/modify-menu/')) && isMobile) {
+  if ((pathname === '/owner/add-menu' || pathname.startsWith('/owner/modify-menu/') || pathname.startsWith('/owner/event-add/')) && isMobile) {
     return (
       <header className={styles['add-menu-header']}>
         <button
@@ -60,7 +59,11 @@ function Header() {
         >
           <BackArrowIcon title="뒤로 가기 버튼" />
         </button>
-        <div className={styles['add-menu-header__caption']}>{pathname === '/owner/add-menu' ? '메뉴추가' : '메뉴수정'}</div>
+        <div className={styles['add-menu-header__caption']}>
+          {pathname === '/owner/add-menu' && '메뉴추가'}
+          {pathname.startsWith('/owner/event-add/') && '이벤트/공지 작성하기'}
+          {pathname.startsWith('/owner/modify-menu/') && '메뉴수정'}
+        </div>
       </header>
     );
   }

src/layout/OwnerLayout/index.tsx

@@ -27,12 +27,12 @@ export default function OwnerLayout() {
   return (
     <div>
       {user && (
-      <>
-        {location.pathname !== '/owner/shop-registration' && <Header />}
-        <ErrorBoundary message="에러가 발생했습니다.">
-          <Outlet />
-        </ErrorBoundary>
-      </>
+        <>
+          {location.pathname !== '/owner/shop-registration' && <Header />}
+          <ErrorBoundary message="에러가 발생했습니다.">
+            <Outlet />
+          </ErrorBoundary>
+        </>
       )}
     </div>
   );

src/model/shopInfo/event.ts

@@ -0,0 +1,11 @@
+import z from 'zod';
+
+export const EventInfo = z.object({
+  title: z.string(),
+  content: z.string(),
+  thumbnail_images: z.array(z.string()),
+  start_date: z.string(),
+  end_date: z.string(),
+});
+
+export type EventInfo = z.infer<typeof EventInfo>;