feat: 게임 진행 시 문제 타이머 구현, 마이페이지 구현, 전체 랭킹 구현

tech-kms-jake · tech-kms-jake · commit 65e508baa233 · 2025-07-27T15:28:17.000+09:00
diff --git a/src/pages/game/GamePlay.js b/src/pages/game/GamePlay.js
@@ -104,7 +104,7 @@ function GamePlay() {
                             {questions && currentQuestion && `${currentQuestion.round} / ${questions.length}`}
                         </span>
                     </div>
-                    <QuizTimer duration={currentQuestion ? currentQuestion.timeLimit : 0} onTimeUp={handleTimeUp} />
+                    {visibleQuestion && <QuizTimer duration={currentQuestion.timeLimit} onTimeUp={handleTimeUp}/>}
                 </div>
 
                 {/* Question Content */}
diff --git a/src/pages/mypage/MyPage.js b/src/pages/mypage/MyPage.js
@@ -1,37 +1,69 @@
-import { useState } from 'react';
+import {useEffect, useState} from 'react';
 import useConfirm from '../../hooks/useConfirm';
-import { useNavigate } from 'react-router-dom';
-import { Trophy, BarChart3 } from 'lucide-react';
+import {useNavigate} from 'react-router-dom';
+import {BarChart3, Trophy} from 'lucide-react';
 import styles from './mypage.module.scss'
+import axios from "axios";
+import NicknameForm from "../login/NicknameForm";
+import {useApiQuery} from "../../hooks/useApiQuery";
+import {useApiMutation} from "../../hooks/useApiMutation";
 
-const userStats = {
-  nickname: '빵야빵야',
-  totalGames: 50,
-  wins: 30,
-  losses: 20,
-  score: 70,
-  currentRank: 3,
+const userRequest = async () => {
+  const response = await axios.get(`/user/me`);
+  return response.data;
+};
+
+const userDeleteRequest = async () => {
+  await axios.delete(`/user/me`);
+};
+
+const userEditRequest = async (nickname) => {
+  const params = {
+    nickname
+  };
+  await axios.put('/user/me', params);
 };
 
 const MyPage = () => {
   const [nickname, setNickname] = useState('빵야빵야');
+  const [error, setError] = useState({
+    nickname: "",
+  });
+  const [inputStatus, setInputStatus] = useState({
+    nickname: false,
+  });
   const { openConfirm } = useConfirm();
   const navigate = useNavigate();
+  const { data } = useApiQuery(
+      ['/user/me'],
+      () => userRequest()
+  );
+  const { mutate: userDeleteMutate } = useApiMutation(userDeleteRequest, {
+    onSuccess: () => {
+      // 회원가입 완료 후 방 목록으로 이동
+      navigate("/login");
+    },
+  });
 
-  const handleDuplicateCheck = () => {
-    openConfirm({
-      title: '중복 확인',
-      html: <div>사용 가능한 닉네임입니다.</div>,
-      confirmButtonText: '확인',
-    });
-  };
+  const { mutate: userEditMutate } = useApiMutation(userEditRequest, {
+    onSuccess: () => {
+      openConfirm({
+        title: '프로필 수정',
+        html: <div>저장되었습니다.</div>,
+        confirmButtonText: '확인',
+      });
+    },
+  });
 
-  const handleSaveClick = () => {
-    openConfirm({
-      title: '프로필 수정',
-      html: <div>저장되었습니다.</div>,
-      confirmButtonText: '확인',
-    });
+  useEffect(() => {
+      if (data) {
+          setNickname(data.nickname)
+      }
+  }, [data])
+
+  const handleSaveClick = (e) => {
+    e.preventDefault();
+    userEditMutate(nickname);
   };
 
   const handleExitClick = () => {
@@ -45,7 +77,7 @@ const MyPage = () => {
         </div>
       ),
       confirmButtonText: '탈퇴',
-      callback: () => navigate('/login'),
+      callback: () => userDeleteMutate(),
     });
   };
 
@@ -59,34 +91,14 @@ const MyPage = () => {
             <span className={styles.headerText}>프로필 정보</span>
           </div>
           <div className={styles.form}>
-            <form>
-              {/* 닉네임 섹션 */}
-              <div className={styles.inputRow}>
-                <label className={styles.label}>닉네임</label>
-                <input
-                  type='text'
-                  value={nickname}
-                  onChange={(e) => setNickname(e.target.value)}
-                  className={styles.input}
-                  onFocus={(e) => (e.target.style.borderColor = '#dc2626')}
-                  onBlur={(e) =>
-                    (e.target.style.borderColor = 'rgba(220, 38, 38, 0.5)')
-                  }
-                />
-                <button
-                  type='button'
-                  onClick={handleDuplicateCheck}
-                  className={styles.button}
-                  onMouseOver={(e) =>
-                    (e.target.style.backgroundColor = '#b91c1c')
-                  }
-                  onMouseOut={(e) =>
-                    (e.target.style.backgroundColor = '#dc2626')
-                  }
-                >
-                  중복 체크
-                </button>
-              </div>
+            <form className={styles.nicknameForm} onSubmit={handleSaveClick}>
+              <NicknameForm
+                  nickname={nickname}
+                  setNickname={setNickname}
+                  error={error}
+                  setError={setError}
+                  setInputStatus={setInputStatus}
+              />
 
               {/* 게임 통계 섹션 */}
               <div className={styles.statsCard}>
@@ -98,18 +110,18 @@ const MyPage = () => {
                   <div className={styles.statsRow}>
                     <label className={styles.label}>전적</label>
                     <span style={{ color: '#374151', fontWeight: '600' }}>
-                      {userStats.totalGames}전 {userStats.wins}승{' '}
-                      {userStats.losses}패
+                      {data?.totalGames}전 {data?.winningGames}승{' '}
+                      {data ? (data.totalGames - data.winningGames) : '' }패
                     </span>
                   </div>
                   <div className={styles.statsRow}>
                     <label className={styles.label}>점수</label>
-                    <span className={styles.score}>{userStats.score}점</span>
+                    <span className={styles.score}>{data?.score}점</span>
                   </div>
                   <div className={styles.statsRow}>
                     <label className={styles.label}>현재 랭킹</label>
                     <span className={styles.rankBadge}>
-                      {userStats.currentRank}위
+                      {data?.rank}위
                     </span>
                   </div>
                 </div>
@@ -118,17 +130,9 @@ const MyPage = () => {
               {/* 버튼 영역 */}
               <div className={styles.buttonGroup}>
                 <button
-                  type='button'
-                  onClick={handleSaveClick}
+                  type='submit'
                   className={styles.saveButton}
-                  onMouseOver={(e) => {
-                    e.target.style.backgroundColor = '#dc2626';
-                    e.target.style.color = 'white';
-                  }}
-                  onMouseOut={(e) => {
-                    e.target.style.backgroundColor = 'transparent';
-                    e.target.style.color = '#dc2626';
-                  }}
+                  disabled={!inputStatus.nickname}
                 >
                   변경사항 저장
                 </button>
diff --git a/src/pages/mypage/mypage.module.scss b/src/pages/mypage/mypage.module.scss
@@ -155,6 +155,17 @@
   border-radius: 0.25rem;
   cursor: pointer;
   transition: all 0.2s;
+  //&:hover:not(:disabled) {
+  //  background-color: #dc2626;
+  //  color: white;
+  //}
+
+  &:disabled {
+    background-color: #f1f1f1;
+    color: #aaa;
+    border-color: #ccc;
+    cursor: not-allowed;
+  }
 }
 
 .deleteButton {
@@ -182,4 +193,9 @@
   font-size: 1.25rem;
 }
 
+.nicknameForm {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
 
diff --git a/src/pages/rank/Rank.js b/src/pages/rank/Rank.js
@@ -1,10 +1,13 @@
 // Rank.jsx
-import { Button, Form, Stack } from "react-bootstrap";
-import { useState } from "react";
+import {Button, Form} from "react-bootstrap";
+import {useEffect, useState} from "react";
 import styles from './rank.module.scss';
 import TableBackGroundCard from "../../shared/TableBackGroundCard";
 import FlexibleTable from "../../shared/table/FlexibleTable";
 import PaginationNavigator from '../../layout/PaginationNavigator.js';
+import axios from "axios";
+import {useApiQuery} from "../../hooks/useApiQuery";
+import {useQueryParam} from "../../hooks/QueryParam";
 
 const initColumns = [
   { accessorKey: "rank", header: "순위" },
@@ -13,29 +16,43 @@ const initColumns = [
   { accessorKey: "score", header: "점수" },
 ];
 
-const sampleData = [
-  { rank: 1, nickname: "세희", winLoss: "50전 30승 20패", score: "4931점" },
-  { rank: 2, nickname: "경찬", winLoss: "48전 28승 20패", score: "4825점" },
-  { rank: 3, nickname: "강현", winLoss: "45전 27승 18패", score: "4720점" },
-  { rank: 4, nickname: "민수", winLoss: "42전 25승 17패", score: "4615점" },
-  { rank: 5, nickname: "지영", winLoss: "40전 24승 16패", score: "4510점" },
-  { rank: 6, nickname: "현우", winLoss: "38전 22승 16패", score: "4405점" },
-  { rank: 7, nickname: "수진", winLoss: "35전 20승 15패", score: "4300점" },
-  { rank: 8, nickname: "태현", winLoss: "33전 19승 14패", score: "4195점" },
-  { rank: 9, nickname: "은지", winLoss: "30전 17승 13패", score: "4090점" },
-  { rank: 10, nickname: "준호", winLoss: "28전 15승 13패", score: "3985점" },
-];
+const rankRequest = async (params) => {
+  const response = await axios.get(`/stats/rankings`, {params});
+  return response.data;
+};
 
 const Rank = () => {
   const [keyword, setKeyword] = useState("");
-  const [currentPage, setCurrentPage] = useState(1);
-  const itemsPerPage = 10;
-  const totalPages = Math.ceil(sampleData.length / itemsPerPage);
+  const [tableRows, setTableRows] = useState([]);
+  const [params, setParams] = useQueryParam();
+  const { data } = useApiQuery(
+      ['/stats/rankings', params], // queryKey에 params 포함
+      () => rankRequest(params)
+  );
+console.log(data);
+
+  useEffect(() => {
+    if (data) {
+      const processedRows = data.ranks.map((item) => {
+        return {
+          rank: item.rank,
+          nickname: item.nickname,
+          winLoss: `${item.totalGames}전 ${item.winningGames}승 ${item.totalGames - item.winningGames}패`,
+          score: `${item.score}점`
+        }
+      })
+      setTableRows(processedRows);
+    }
+  }, [data])
 
   const handleSearchClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
     console.log("🔍 검색 버튼 클릭됨");
+    setParams({
+      page: 1,
+      nickname: keyword.trim()
+    })
   };
 
   const handleKeyDown = (e) => {
@@ -45,17 +62,6 @@ const Rank = () => {
     }
   };
 
-  const handlePageChange = (page) => {
-    setCurrentPage(page);
-    console.log(`페이지 ${page}로 이동`);
-  };
-
-  // 현재 페이지 데이터
-  const currentData = sampleData.slice(
-    (currentPage - 1) * itemsPerPage,
-    currentPage * itemsPerPage
-  );
-
   return (
     <div className={styles.container}>
 
@@ -97,16 +103,15 @@ const Rank = () => {
         
         <div className={styles.tableContainer}>
           <TableBackGroundCard className={styles.rankingCard}>
-            <FlexibleTable initColumns={initColumns} data={currentData} />
+            <FlexibleTable initColumns={initColumns} data={tableRows} />
           </TableBackGroundCard>
           
           {/* Pagination */}
-
-                  <PaginationNavigator
-                currentPage={currentPage}
-                totalPages={5}
-                onPageChange={setCurrentPage}
-                />
+          <PaginationNavigator currentPage={data?.currentPage} totalPages={data?.totalPages}
+                               onPageChange={(page) => setParams({
+                                 ...params
+                                 ,page: page,
+                               })}/>
         </div>
       </div>
 
