게스트 모집 상세 페이지 api 연동

src/mocks/handlers/game.ts

@@ -92,6 +92,8 @@ const mockPostGameParticipate = http.post<
     addressDepth2: '강남구',
     positions: ['C', 'PF'],
   });
+
+  return HttpResponse.json();
 });
 
 const mockGetGameMembers = http.get<

src/pages/GamesDetailPage/GamesDetailPage.tsx

@@ -1,16 +1,21 @@
 import { useNavigate, useParams } from 'react-router-dom';
 
+import { useQueryClient } from '@tanstack/react-query';
+
 import { Avatar } from '@components/Avatar';
 import { Header } from '@components/Header';
 import { Button } from '@components/shared/Button';
 import { Flex } from '@components/shared/Flex';
 import { Image } from '@components/shared/Image';
 import { Text } from '@components/shared/Text';
 
-import { useMatchQuery } from '@hooks/queries/useMatchQuery';
+import { useGameParticipateCreateMutation } from '@hooks/mutations/useGameParticipateCreateMutation';
+import { useGameDetailQuery } from '@hooks/queries/useGameDetailQuery';
 
 import { theme } from '@styles/theme';
 
+import { Member } from '@type/models';
+
 import { PATH_NAME } from '@consts/pathName';
 import { WEEKDAY } from '@consts/weekday';
 
@@ -30,21 +35,39 @@ import {
   UserDataWrapper,
 } from './GamesDetailPage.styles';
 
+const getMyInfo = (): Member | null => {
+  const json = localStorage.getItem('USER_INFO');
+  if (!json) {
+    return null;
+  }
+  return JSON.parse(json);
+};
+
 export const GamesDetailPage = () => {
   const { id } = useParams();
   if (id === undefined) {
     throw new Error('"match id" is undefined');
   }
+  const gameId = Number(id);
 
-  const { data: match } = useMatchQuery(id);
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { data: match } = useGameDetailQuery(gameId);
+  const myInfo = getMyInfo();
+  const isMyMatch = match.host.id === myInfo?.id;
+
+  const { mutate: participateMutate } = useGameParticipateCreateMutation();
+  const onParticipateSuccess = () => {
+    queryClient.invalidateQueries({
+      queryKey: ['game-detail', gameId],
+    });
+  };
 
   const [year, month, day] = match.playDate.split('-');
   const [hour, min] = match.playStartTime.split(':');
   const date = new Date(Number(year), Number(month) - 1, Number(day));
   const weekday = WEEKDAY[date.getDay()];
 
-  const navigate = useNavigate();
-
   const handleClickMemberProfile = (id: number | string) =>
     navigate(PATH_NAME.GET_PROFILE_PATH(String(id)));
 
@@ -83,19 +106,20 @@ export const GamesDetailPage = () => {
               <Text size={16}>{match.host.nickname}</Text>
             </Flex>
           </Flex>
-          {/* TODO: 본인일 시 버튼 렌더링 안하게 */}
           {/* TODO: 버튼 클릭 핸들러 */}
-          <Button
-            fontWeight={500}
-            width="80px"
-            height="40px"
-            borderColor={theme.PALETTE.GRAY_400}
-            backgroundColor="white"
-            textColor={theme.PALETTE.GRAY_400}
-            onClick={() => {}}
-          >
-            대화하기
-          </Button>
+          {myInfo && !isMyMatch && (
+            <Button
+              fontWeight={500}
+              width="80px"
+              height="40px"
+              borderColor={theme.PALETTE.GRAY_400}
+              backgroundColor="white"
+              textColor={theme.PALETTE.GRAY_400}
+              onClick={() => {}}
+            >
+              대화하기
+            </Button>
+          )}
         </UserDataWrapper>
         <Text size={20} weight={700}>
           경기 정보
@@ -164,13 +188,34 @@ export const GamesDetailPage = () => {
             ))}
           </Guests>
         </GuestsContainer>
-        <Button
-          {...theme.BUTTON_PROPS.LARGE_RED_BUTTON_PROPS}
-          height="50px"
-          // TODO: 클릭 핸들러
-        >
-          참여 신청하기
-        </Button>
+        {myInfo && !isMyMatch && (
+          <Button
+            {...theme.BUTTON_PROPS.LARGE_RED_BUTTON_PROPS}
+            height="50px"
+            onClick={() =>
+              participateMutate(
+                {
+                  gameId,
+                  payload: { memberId: myInfo.id },
+                },
+                { onSuccess: onParticipateSuccess }
+              )
+            }
+          >
+            참여 신청하기
+          </Button>
+        )}
+        {myInfo && isMyMatch && (
+          <Button
+            {...theme.BUTTON_PROPS.LARGE_RED_BUTTON_PROPS}
+            height="50px"
+            onClick={() =>
+              navigate(PATH_NAME.GET_GAMES_MANAGE_PATH(String(gameId)))
+            }
+          >
+            매치 관리
+          </Button>
+        )}
       </PageContent>
     </PageLayout>
   );