feat: 등록 페이지 API 연동

src/apis/activities.ts

@@ -46,6 +46,11 @@ const Activities = {
       params: { size: DEFAULT_PAGE_SIZE },
     }),
 
+  /**
+   * 체험 등록
+   * @param value
+   * @returns
+   */
   create: (value: ActivityCreateBody) => instance.post(ACTIVITIES_API, value),
 
   createReservation: (activityId: number, value: ReservationCreateBody) =>

src/components/createPage/CreatePageContent/index.tsx

@@ -1,30 +1,13 @@
-import { useRouter } from 'next/router';
-
-import { GAME_T0_CATEGORY } from '@/constants';
-import { formatLinkToGame, isValidGameName, redirectToPage } from '@/utils';
+import { CreatePageContentProps } from '@/pages/[game]/create';
 
 import PostForm from '@/components/createPage/PostForm';
 import Banner from '@/components/layout/Banner';
 
-import { Category, GameNameEN, LinkName } from '@/types';
-
-const CreatePageContent = () => {
-  const router = useRouter();
-  const { game } = router.query;
-
-  const isValid = isValidGameName(game as string);
-
-  if (!isValid) {
-    redirectToPage('/landing');
-    return null;
-  }
-
-  const gameName = formatLinkToGame(game as LinkName) as GameNameEN;
-
+const CreatePageContent = ({ gameName, category }: CreatePageContentProps) => {
   return (
     <>
       <Banner gameName={gameName} />
-      <PostForm type='등록' category={GAME_T0_CATEGORY[gameName] as Category} />
+      <PostForm type='등록' category={category} />
     </>
   );
 };

src/components/createPage/PostForm/index.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useMutation } from '@tanstack/react-query';
 import classNames from 'classnames/bind';
 import { useDaumPostcodePopup } from 'react-daum-postcode';
 import { FormProvider, useForm } from 'react-hook-form';
 
+import Activities from '@/apis/activities';
 import {
   ADDRESS_CUSTOM_THEME,
   ADDRESS_POPUP_SIZE,
@@ -21,6 +23,7 @@ import {
   formatCategoryToBannerImageURL,
   joinTitleByDelimiter,
   navigateBack,
+  normalizeEndTimes,
 } from '@/utils';
 
 import { BaseButton } from '@/components/commons/buttons';
@@ -30,16 +33,25 @@ import Schedule from '@/components/createPage/Schedule';
 import SelectedSchedule from '@/components/createPage/SelectedSchedule';
 import useToggleButton from '@/hooks/useToggleButton';
 
+import { ActivityCreateBody, Category } from '@/types';
+
 import styles from './PostForm.module.scss';
 
 const cx = classNames.bind(styles);
 
 type PostFormProps = {
   type: '등록' | '수정';
-  category: '스포츠' | '투어' | '관광' | '웰빙';
+  category: Category;
 };
 
 const PostForm = ({ type, category }: PostFormProps) => {
+  const { mutate } = useMutation({
+    mutationFn: (value: ActivityCreateBody) => Activities.create(value),
+    onSuccess: () => {
+      handleToggleClick();
+    },
+  });
+
   // 모집 유형 관련
   const [price, setPrice] = useState(0);
 
@@ -150,21 +162,20 @@ const PostForm = ({ type, category }: PostFormProps) => {
     const descriptionArray = [description, discord];
     const editedTitle = joinTitleByDelimiter(titleArray);
     const editedDescription = joinTitleByDelimiter(descriptionArray);
+    const editedScheduleArray = normalizeEndTimes(scheduleArray);
 
     const editedRequestBody = {
       title: editedTitle,
       category,
       description: editedDescription,
       address: newAddress,
       price: Number(price),
-      schedules: scheduleArray,
+      schedules: editedScheduleArray,
       bannerImageUrl: newBannerImageUrl,
       subImageUrls: imageArray.slice(1),
     };
 
-    // 추후 api 연결할 부분
-    console.log(editedRequestBody);
-    handleToggleClick();
+    mutate(editedRequestBody);
   };
 
   return (

src/pages/[game]/create/index.tsx

@@ -1,8 +1,44 @@
+import { GetServerSidePropsContext } from 'next';
+
+import { GAME_T0_CATEGORY, PAGE_PATHS } from '@/constants';
+import { formatLinkToGame, getAuthCookie, isValidGameName } from '@/utils';
+
 import CreatePageContent from '@/components/createPage/CreatePageContent';
 import Layout from '@/components/layout/Layout';
 
-const CreatePage = () => {
-  return <CreatePageContent />;
+import { Category, GameNameEN, LinkName } from '@/types';
+
+export function getServerSideProps(context: GetServerSidePropsContext) {
+  const { accessToken } = getAuthCookie(context);
+  const isLoggedIn = !!accessToken;
+
+  const game = context.params?.game;
+  const isValid = isValidGameName(game as string);
+
+  if (!isLoggedIn || !isValid) {
+    return {
+      redirect: {
+        destination: PAGE_PATHS.signin,
+        permanent: false,
+      },
+    };
+  }
+
+  const gameName = formatLinkToGame(game as LinkName) as GameNameEN;
+  const category = GAME_T0_CATEGORY[gameName];
+
+  return {
+    props: { gameName, category },
+  };
+}
+
+export type CreatePageContentProps = {
+  gameName: GameNameEN;
+  category: Category;
+};
+
+const CreatePage = ({ gameName, category }: CreatePageContentProps) => {
+  return <CreatePageContent gameName={gameName} category={category} />;
 };
 
 export default CreatePage;