모임상세, 모임 참여 API 연결 로직 구현

frontend/src/apis/apiconfig.ts

@@ -0,0 +1,16 @@
+export const defaultHeaders = {
+  'Content-Type': 'application/json',
+};
+
+export const defaultOptions = {
+  headers: defaultHeaders,
+};
+
+export const checkStatus = async (response: Response) => {
+  const statusHead = Math.floor(response.status / 100);
+  if (statusHead === 4 || statusHead === 5) {
+    const json = await response.json();
+    throw new Error(json.message);
+  }
+  return response;
+};

frontend/src/apis/gets.ts

@@ -1,24 +1,29 @@
 import ENDPOINTS from '@_apis/endPoints';
-import { GetMoim } from '@_apis/responseTypes';
+import { GetMoim, GetMoims } from '@_apis/responseTypes';
 import { MoimInfo } from '@_types/index';
+import { checkStatus, defaultOptions } from './apiconfig';
 
+const defaultGetOptions = {
+  method: 'GET',
+  ...defaultOptions,
+};
 export const getMoims = async (): Promise<MoimInfo[]> => {
   const url = ENDPOINTS.moims;
 
-  const options = {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  };
+  const response = await fetch(url, defaultGetOptions);
+
+  checkStatus(response);
+  const json = (await response.json()) as GetMoims;
+  return json.data.moims;
+};
+
+export const getMoim = async (moimId: number): Promise<MoimInfo> => {
+  const url = `${ENDPOINTS.moim}/${moimId}`;
 
-  const response = await fetch(url, options);
+  const response = await fetch(url, defaultGetOptions);
 
-  const statusHead = Math.floor(response.status / 100);
-  if (statusHead === 4 || statusHead === 5) {
-    throw new Error('모임을 받아오지 못했습니다.');
-  }
+  checkStatus(response);
 
   const json = (await response.json()) as GetMoim;
-  return json.data.moims;
+  return json.data;
 };

frontend/src/apis/posts.ts

@@ -1,24 +1,37 @@
 import ENDPOINTS from '@_apis/endPoints';
-import { MoimInfo } from '@_types/index';
+import { MoimInputInfo } from '@_types/index';
 import { PostMoim } from '@_apis/responseTypes';
+import { checkStatus, defaultOptions } from './apiconfig';
 
-export const postMoim = async (moim: MoimInfo): Promise<number> => {
+const defaultPostOptions = {
+  method: 'POST',
+  ...defaultOptions,
+};
+export const postMoim = async (moim: MoimInputInfo): Promise<number> => {
   const url = ENDPOINTS.moim;
 
   const options = {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
+    ...defaultPostOptions,
     body: JSON.stringify(moim),
   };
 
   const response = await fetch(url, options);
 
-  const statusHead = Math.floor(response.status / 100);
-  if (statusHead === 4 || statusHead === 5)
-    throw new Error('모임을 업데이트하지 못했습니다.');
+  checkStatus(response);
 
   const json = (await response.json()) as PostMoim;
-  return json.id;
+  return json.data;
+};
+
+export const postJoinMoim = async (moimId: number) => {
+  const url = `${ENDPOINTS.moims}/join`;
+
+  const options = {
+    ...defaultPostOptions,
+    body: JSON.stringify({ moimId }),
+  };
+
+  const response = await fetch(url, options);
+
+  await checkStatus(response);
 };

frontend/src/apis/responseTypes.ts

@@ -1,9 +1,13 @@
 import { MoimInfo } from '../types';
 
-export interface GetMoim {
+export interface GetMoims {
   data: { moims: MoimInfo[] };
 }
 
+export interface GetMoim {
+  data: MoimInfo;
+}
+
 export interface PostMoim {
-  id: number;
+  data: number;
 }

frontend/src/components/Card/MoimCard.tsx

@@ -6,18 +6,20 @@ import {
 } from '../../utils/formatters';
 
 import { MoimInfo } from '../../types';
+import { HTMLProps } from 'react';
 
-interface MoimCardProps {
+interface MoimCardProps extends HTMLProps<HTMLDivElement> {
   moimInfo: MoimInfo;
 }
 
 export default function MoimCard(props: MoimCardProps) {
   const {
-    moimInfo: { title, date, time, place, maxPeople },
+    moimInfo: { title, date, time, place, maxPeople, currentPeople },
+    ...args
   } = props;
 
   return (
-    <div css={S.cardBox}>
+    <div css={S.cardBox} {...args}>
       <h2 css={S.cardTitle}>{title}</h2>
       <div css={S.subjectBox}>
         <span css={S.subjectTag}>날짜 및 시간</span>
@@ -30,8 +32,10 @@ export default function MoimCard(props: MoimCardProps) {
         <span css={S.subjectInfo}>{place}</span>
       </div>
       <div css={S.subjectBox}>
-        <span css={S.subjectTag}>최대인원수</span>
-        <span css={S.subjectInfo}>{maxPeople}명</span>
+        <span css={S.subjectTag}>인원수</span>
+        <span css={S.subjectInfo}>
+          최대{maxPeople}명 / 현재 {currentPeople}명
+        </span>
       </div>
     </div>
   );

frontend/src/components/MoimCardList/MoimCardList.tsx

@@ -2,18 +2,28 @@ import * as S from '@_components/MoimCardList/MoimCardList.style';
 
 import MoimCard from '@_components/Card/MoimCard';
 import { MoimInfo } from '@_types/index';
+import { useNavigate } from 'react-router-dom';
 
 interface MoimCardListProps {
   moimInfos: MoimInfo[];
 }
 
 export default function MoimCardList(props: MoimCardListProps) {
   const { moimInfos } = props;
+  const navigate = useNavigate();
+  const handleMoimCard = (moimId: number) => {
+    navigate(`/moim/${moimId}`);
+  };
+
   return (
     <div css={S.cardListSection}>
-      {moimInfos.map((moimInfo, index) => {
+      {moimInfos.map((moimInfo) => {
         return (
-          <MoimCard key={`${moimInfo.title}${index}`} moimInfo={moimInfo} />
+          <MoimCard
+            key={moimInfo.moimId}
+            moimInfo={moimInfo}
+            onClick={() => handleMoimCard(moimInfo.moimId)}
+          />
         );
       })}
     </div>

frontend/src/constants/queryKeys.ts

@@ -1,3 +1,3 @@
-const QUERY_KEYS = { moims: 'moims' };
+const QUERY_KEYS = { moims: 'moims', moim: 'moim' };
 
 export default QUERY_KEYS;

frontend/src/constants/routes.ts

@@ -1,6 +1,7 @@
 const ROUTES = {
   main: '/',
   addMoim: '/add-moim',
+  detail: '/moim/:moimId',
 };
 
 export default ROUTES;

frontend/src/hooks/mutaions/useAddMoim.ts

@@ -3,14 +3,15 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import QUERY_KEYS from '@_constants/queryKeys';
 import { postMoim } from '@_apis/posts';
 
-export default function useAddMoim(onSuccess: () => void) {
+export default function useAddMoim(onSuccess: (moimId: number) => void) {
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: postMoim,
-    onSuccess: () => {
+    onSuccess: (moimId: number) => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.moims] });
-      onSuccess();
+
+      onSuccess(moimId);
     },
   });
 }

frontend/src/hooks/mutaions/useJoinMoim.ts

@@ -0,0 +1,18 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import QUERY_KEYS from '@_constants/queryKeys';
+import { postJoinMoim } from '@_apis/posts';
+
+export default function useJoinMoim(onSuccess: () => void) {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: postJoinMoim,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.moim],
+      });
+      onSuccess();
+    },
+  });
+}

frontend/src/hooks/queries/useMoim.ts

@@ -0,0 +1,12 @@
+import QUERY_KEYS from '@_constants/queryKeys';
+import { getMoim } from '@_apis/gets';
+import { useQuery } from '@tanstack/react-query';
+
+export default function useMoim(moimId: number) {
+  const { data: moim, isLoading } = useQuery({
+    queryKey: [QUERY_KEYS.moim, moimId],
+    queryFn: () => getMoim(moimId),
+  });
+
+  return { moim, isLoading };
+}

frontend/src/pages/MoimCreationPage/MoimCreatePage.hook.ts

@@ -8,10 +8,10 @@ import {
   validateTitle,
 } from './MoimCreatePage.util';
 
-import { MoimInfo } from '../../types';
+import { MoimInputInfo } from '../../types';
 
 const useMoimInfoInput = () => {
-  const [inputData, setInputData] = useState<MoimInfo>({
+  const [inputData, setInputData] = useState<MoimInputInfo>({
     title: '',
     date: '',
     time: '',

frontend/src/pages/MoimCreationPage/MoimCreationPage.tsx

@@ -2,15 +2,16 @@ import Button from '@_components/Button/Button';
 import FormLayout from '@_layouts/FormLayout/FormLayout';
 import LabeledInput from '@_components/Input/MoimInput';
 import MOIM_INPUT_INFOS from './MoimCreationPage.constant';
-import ROUTES from '@_constants/routes';
 import useAddMoim from '@_hooks/mutaions/useAddMoim';
 import useMoimInfoInput from './MoimCreatePage.hook';
 import { useNavigate } from 'react-router-dom';
 import { useState } from 'react';
 
 export default function MoimCreationPage() {
   const navigate = useNavigate();
-  const { mutate } = useAddMoim(() => navigate(ROUTES.main));
+  const { mutate } = useAddMoim((moimId: number) => {
+    navigate(`/${moimId}`);
+  });
   const [isSubmitted, setIsSubmitted] = useState(false);
 
   const { inputData, handleChange, isValidMoimInfoInput } = useMoimInfoInput();
@@ -26,7 +27,7 @@ export default function MoimCreationPage() {
 
   return (
     <FormLayout>
-      <FormLayout.Header onBackArrowClick={() => navigate(ROUTES.main)}>
+      <FormLayout.Header onBackArrowClick={() => navigate(-1)}>
         모임등록하기
       </FormLayout.Header>
 

frontend/src/pages/TempDetail/TempDetailPage.tsx

@@ -0,0 +1,36 @@
+import useJoinMoim from '@_hooks/mutaions/useJoinMoim';
+import useMoim from '@_hooks/queries/useMoim';
+import { useParams } from 'react-router-dom';
+
+export default function TempDetailPage() {
+  const params = useParams();
+  const moimId = Number(params.moimId);
+
+  const { moim, isLoading } = useMoim(moimId);
+  const { mutate } = useJoinMoim(() => {
+    alert('참여했습니다.');
+  });
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+  if (!moim) {
+    return <div>No data found</div>;
+  }
+
+  // moim 데이터를 출력합니다.
+  return (
+    <div>
+      <h1>{moim.title}</h1>
+      <p>{moim.description}</p>
+      <p>Place: {moim.place}</p>
+      <p>Date: {moim.date}</p>
+      <p>Time: {moim.time}</p>
+      <p>Max People: {moim.maxPeople}</p>
+      <p>currentPeople: {moim.currentPeople}</p>
+      <p>Author: {moim.authorNickname}</p>
+
+      <button onClick={() => mutate(moimId)}>참여하기</button>
+    </div>
+  );
+}

frontend/src/queryClient.ts

@@ -6,10 +6,14 @@ const createQueryClient = () => {
       queries: {
         networkMode: 'always',
       },
+      mutations: {
+        onError: (error) => alert(error.message),
+        networkMode: 'always',
+      },
     },
     queryCache: new QueryCache({
       onError: (error) => {
-        alert(error);
+        alert(error instanceof Error ? error.message : 'An error occurred');
       },
     }),
   });

frontend/src/router.tsx

@@ -2,6 +2,7 @@ import MainPage from '@_pages/MainPage/MainPage';
 import MoimCreationPage from '@_pages/MoimCreationPage/MoimCreationPage';
 import ROUTES from '@_constants/routes';
 import { createBrowserRouter } from 'react-router-dom';
+import TempDetailPage from '@_pages/TempDetail/TempDetailPage';
 
 const router = createBrowserRouter([
   {
@@ -12,6 +13,10 @@ const router = createBrowserRouter([
     path: ROUTES.addMoim,
     element: <MoimCreationPage />,
   },
+  {
+    path: ROUTES.detail,
+    element: <TempDetailPage />,
+  },
 ]);
 
 export default router;

frontend/src/types/index.d.ts

@@ -1,9 +1,13 @@
 export interface MoimInfo {
+  moimId: number;
   title: string;
   date: string;
   time: string;
   place: string;
   maxPeople: number;
+  currentPeople: number;
   authorNickname: string;
   description?: string;
 }
+
+export type MoimInputInfo = Omit<MoimInfo, 'moimId' | 'currentPeople'>;