Merge pull request #30 from hufs-sports-live/HOTFIX/comments

HOTFIX: 댓글 무한 api 호출 수정
hufscheer · Nov 1, 2023 · 9cc77c9 · 9cc77c9
2 parents 5495a2f + f428c98
commit 9cc77c9
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 18 deletions.
diff --git a/src/api/game.ts b/src/api/game.ts
@@ -2,7 +2,7 @@ import * as Sentry from '@sentry/nextjs';
 import {
   AllGamesResponse,
   EachGameResponse,
-  GameCommentsResponse,
+  GameCommentResponse,
 } from '@/types/game';
 import instance from './instance';
 import { AxiosError, AxiosResponse } from 'axios';
@@ -47,7 +47,7 @@ export const getEachGame = async (gameID: number) => {
 
 export const getGameComments = async (gameID: number) => {
   try {
-    const response: AxiosResponse<GameCommentsResponse[]> = await instance.get(
+    const response: AxiosResponse<GameCommentResponse[]> = await instance.get(
       `/games/${gameID}/comments`,
     );
 

diff --git a/src/app/detail/[id]/page.tsx b/src/app/detail/[id]/page.tsx
@@ -13,41 +13,42 @@ export default function DetailPage({ params }: { params: { id: string } }) {
   const [gameData, setGameData] = useState<EachGameResponse>();
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
 
-  const gameID = params.id;
+  const gameId = params.id;
 
   useEffect(() => {
     const getGameData = async () => {
-      const res = await getEachGame(Number(gameID));
+      const res = await getEachGame(Number(gameId));
 
       if (typeof res === 'number') return notFound();
 
       setGameData(res);
     };
     getGameData();
     const token = localStorage.getItem('token');
-    token && setIsLoggedIn(true);
-  }, [gameID]);
+    if (!token) return;
+    setIsLoggedIn(true);
+  }, [gameId]);
 
   return (
     <div className="flex flex-col gap-8">
       {isLoggedIn && (
         <Link
-          href={`/detail/${gameID}/modify`}
-          className="p-2 rounded-lg border border-red-500 w-fit bg-red-400 text-white"
+          href={`/detail/${gameId}/modify`}
+          className="p-2 text-white bg-red-400 border border-red-500 rounded-lg w-fit"
         >
           수정
         </Link>
       )}
       {gameData && <GameInfo game={gameData} />}
       {isLoggedIn && (
-        <Link href={`/detail/${gameID}/status`} className="text-right">
+        <Link href={`/detail/${gameId}/status`} className="text-right">
           전/후반 변경하러 가기
         </Link>
       )}
       {gameData && (
         <GameTimeline records={gameData.records} status={gameData.gameStatus} />
       )}
-      {gameData && <GameComments gameID={gameData.id} />}
+      {gameData && <GameComments gameId={gameData.id} />}
     </div>
   );
 }
diff --git a/src/components/detail/GameComments.tsx b/src/components/detail/GameComments.tsx
@@ -5,23 +5,24 @@ import { GameCommentResponse } from '@/types/game';
 import { useEffect, useState } from 'react';
 import { Comment } from './Comment';
 
-export default function GameComments({ gameID }: { gameID: number }) {
+export default function GameComments({ gameId }: { gameId: number }) {
   const [comments, setComments] = useState<GameCommentResponse[]>();
   const [inputContent, setInputContent] = useState<string>('');
   const getData = async () => {
-    const res = await getGameComments(gameID);
+    const res = await getGameComments(gameId);
     typeof res !== 'number' && setComments(res);
   };
   useEffect(() => {
     getData();
-  }, [comments]);
+  }, [gameId]);
 
   const CommentSubmitHandler = async (
     event: React.FormEvent<HTMLFormElement>,
   ) => {
     event.preventDefault();
-    inputContent &&
-      (await postGameComment({ content: inputContent, gameId: gameID }));
+    if (!inputContent) return;
+
+    await postGameComment({ content: inputContent, gameId });
     getData();
     setInputContent('');
   };
@@ -36,17 +37,17 @@ export default function GameComments({ gameID }: { gameID: number }) {
           value={inputContent}
           onChange={e => setInputContent(e.target.value)}
           placeholder="댓글을 작성하세요"
-          className="p-4 border-2 border-slate-400 rounded-lg w-full"
+          className="w-full p-4 border-2 rounded-lg border-slate-400"
         />
-        <div className="flex justify-between items-center">
+        <div className="flex items-center justify-between">
           <span className="text-xs text-gray-400">
             욕설 및 스포츠와 무관한 내용을 포함한 댓글은
             <br />
             관리자에 의해 차단될 수 있습니다.
           </span>
           <button
             type="submit"
-            className="border border-slate-200 rounded-lg bg-green-600 text-white py-2 px-4  disabled:opacity-70 disabled:pointer-none float-right"
+            className="float-right px-4 py-2 text-white bg-green-600 border rounded-lg border-slate-200 disabled:opacity-70 disabled:pointer-none"
             disabled={inputContent.length == 0}
           >
             등록