Merge branch 'main' into fix/관리자페이지-인원추가시-escape문자-처리#1179

42organization · Dec 21, 2023 · c34276f · c34276f
2 parents 8b7a3f8 + e35f25b
commit c34276f
Show file tree

Hide file tree

Showing 19 changed files with 109 additions and 62 deletions.
diff --git a/components/admin/tournament/TournamentEdit.tsx b/components/admin/tournament/TournamentEdit.tsx
@@ -12,6 +12,7 @@ import {
 import { ITournamentEditInfo } from 'types/admin/adminTournamentTypes';
 import { QUILL_EDIT_MODULES, QUILL_FORMATS } from 'types/quillTypes';
 import { instanceInManage } from 'utils/axios';
+import { dateToKRIOSString, dateToKRLocaleTimeString } from 'utils/handleTime';
 import { toastState } from 'utils/recoil/toast';
 import styles from 'styles/admin/tournament/TournamentEdit.module.scss';
 import 'react-quill/dist/quill.snow.css';
@@ -71,8 +72,8 @@ export default function TournamentEdit({
       const req = {
         title: tournamentEditInfo.title,
         contents: tournamentEditInfo.contents,
-        startTime: tournamentEditInfo.startTime,
-        endTime: tournamentEditInfo.endTime,
+        startTime: dateToKRIOSString(new Date(tournamentEditInfo.startTime)),
+        endTime: dateToKRIOSString(new Date(tournamentEditInfo.endTime)),
         type: tournamentEditInfo.type,
       };
       await instanceInManage.patch(
@@ -97,11 +98,15 @@ export default function TournamentEdit({
 
   const postHandler = async () => {
     try {
+      console.log('startTime : ', tournamentEditInfo.startTime);
+      console.log('endTime : ', tournamentEditInfo.endTime);
+      console.log('startTime Date : ', new Date(tournamentEditInfo.startTime));
+      console.log('endTime Date : ', new Date(tournamentEditInfo.endTime));
       await instanceInManage.post(`/tournaments`, {
         title: tournamentEditInfo.title,
         contents: tournamentEditInfo.contents,
-        startTime: tournamentEditInfo.startTime,
-        endTime: tournamentEditInfo.endTime,
+        startTime: dateToKRIOSString(new Date(tournamentEditInfo.startTime)),
+        endTime: dateToKRIOSString(new Date(tournamentEditInfo.endTime)),
         type: tournamentEditInfo.type,
       });
       setSnackbar({
@@ -145,25 +150,17 @@ export default function TournamentEdit({
                   <input
                     type='datetime-local'
                     name='startTime'
-                    value={
-                      tournamentEditInfo.startTime
-                        ? tournamentEditInfo.startTime
-                            .toISOString()
-                            .slice(0, 16)
-                        : ''
-                    }
+                    value={tournamentEditInfo.startTime}
+                    step='60'
                     onChange={inputChangeHandler}
                   />
                 </TableCell>
                 <TableCell className={styles.tableBodyItem}>
                   <input
                     type='datetime-local'
                     name='endTime'
-                    value={
-                      tournamentEditInfo.endTime
-                        ? tournamentEditInfo.endTime.toISOString().slice(0, 16)
-                        : ''
-                    }
+                    value={tournamentEditInfo.endTime}
+                    step='60'
                     onChange={inputChangeHandler}
                   />
                 </TableCell>

diff --git a/components/admin/tournament/TournamentEditMatch.tsx b/components/admin/tournament/TournamentEditMatch.tsx
@@ -1,3 +1,4 @@
+import Image from 'next/legacy/image';
 import {
   Match,
   MatchComponentProps,
@@ -27,10 +28,9 @@ function TournamentMatchParty({
       className={styles.tournamentPartyWrapper}
       onMouseEnter={() => onMouseEnter(party.id)}
     >
-      <PlayerImage
+      <img
+        className={styles.playerImage}
         src={party.picture ?? '/image/match_qustion.png'}
-        styleName={`tournament`}
-        size={1}
       />
 
       <div className={styles.partyName}>{party.name || teamNameFallback}</div>
@@ -87,10 +87,9 @@ function TournamentEditMatchParty({
 
   return (
     <div className={styles.tournamentPartyWrapper}>
-      <PlayerImage
+      <img
+        className={styles.playerImage}
         src={party.picture ?? '/image/match_qustion.png'}
-        styleName={`tournament`}
-        size={1}
       />
 
       <div className={styles.partyName}>{party.name}</div>

diff --git a/components/admin/tournament/TournamentList.tsx b/components/admin/tournament/TournamentList.tsx
@@ -20,7 +20,7 @@ import {
   ITournamentTable,
 } from 'types/admin/adminTournamentTypes';
 import { instance, instanceInManage } from 'utils/axios';
-import { dateToString } from 'utils/handleTime';
+import { dateToDateTimeLocalString, dateToStringShort } from 'utils/handleTime';
 import { modalState } from 'utils/recoil/modal';
 import { toastState } from 'utils/recoil/toast';
 import { tableFormat } from 'constants/admin/table';
@@ -133,7 +133,7 @@ export default function TournamentList({
                           >
                             {columnName === 'startTime' ||
                             columnName === 'endTime' ? (
-                              dateToString(
+                              dateToStringShort(
                                 new Date(
                                   tournament[
                                     columnName as keyof ITournament
@@ -153,10 +153,12 @@ export default function TournamentList({
                                           title: tournament.title,
                                           contents: tournament.contents,
                                           type: tournament.type,
-                                          startTime: new Date(
+                                          startTime: dateToDateTimeLocalString(
                                             tournament.startTime
                                           ),
-                                          endTime: new Date(tournament.endTime),
+                                          endTime: dateToDateTimeLocalString(
+                                            tournament.endTime
+                                          ),
                                         });
                                         scrollToEditor();
                                       }}

diff --git a/components/admin/tournament/TournamentModalPreview.tsx b/components/admin/tournament/TournamentModalPreview.tsx
@@ -28,9 +28,7 @@ export default function TournamentModalPreview({
       </div>
       <div className={styles.title}>{tournamentEditInfo.title}</div>
       <div className={styles.tournamentInfo}>
-        <div className={styles.startTime}>
-          {dateToString(tournamentEditInfo.startTime)}
-        </div>
+        <div className={styles.startTime}>{tournamentEditInfo.startTime}</div>
         <div className={styles.participants}>
           <MdPeopleAlt />
           <div className={styles.player}>0 / 8</div>

diff --git a/components/modal/statChange/StatChangeModal.tsx b/components/modal/statChange/StatChangeModal.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import { useSetRecoilState } from 'recoil';
-import { CoinResult } from 'types/coinTypes';
 import { GameResult } from 'types/gameTypes';
 import { Exp } from 'types/modalTypes';
 import { errorState } from 'utils/recoil/error';
@@ -17,15 +16,15 @@ export default function StatChangeModal({ gameId, mode }: Exp) {
   const setError = useSetRecoilState(errorState);
   const [stat, setStat] = useState<GameResult | undefined>();
 
-  const getExpHandler = useAxiosGet({
-    url: `/pingpong/games/${gameId}/result/${mode?.toLowerCase()}`,
+  const fetchStat = useAxiosGet({
+    url: `/pingpong/games/${gameId}/pchange/result?mode=${mode}`,
     setState: setStat,
     err: 'KP03',
     type: 'setError',
   });
 
   useEffect(() => {
-    getExpHandler();
+    fetchStat();
   }, []);
 
   const closeModal = () => {
@@ -34,9 +33,11 @@ export default function StatChangeModal({ gameId, mode }: Exp) {
     openCoin();
   };
 
-  const openCoin = async () => {
+  const openCoin = () => {
     try {
-      if (!stat) return null;
+      if (!stat) {
+        return null;
+      }
       setModal({
         modalName: 'COIN-ANIMATION',
         CoinResult: {
@@ -52,17 +53,21 @@ export default function StatChangeModal({ gameId, mode }: Exp) {
   };
 
   return (
-    <div>
+    <>
       <div
         className={`${styles.fixedContainer} ${styles.front}`}
         onClick={closeModal}
       />
       <div className={styles.container}>
         <div className={styles.emoji}>🏓</div>
-        {mode === 'RANK' && stat && <PppStat stat={stat} />}
-        {stat && <ExpStat stat={stat} />}
+        {stat && (
+          <>
+            {mode === 'RANK' && <PppStat stat={stat} />}
+            <ExpStat stat={stat} />
+          </>
+        )}
         <div className={styles.guide}>화면을 클릭해주세요!</div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/components/tournament/TournamentMatch.tsx b/components/tournament/TournamentMatch.tsx
@@ -2,10 +2,8 @@ import {
   MatchComponentProps,
   Participant,
 } from '@g-loot/react-tournament-brackets/dist/src/types';
-import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 import { clickedTournamentState } from 'utils/recoil/tournament';
-import PlayerImage from 'components/PlayerImage';
 import styles from 'styles/tournament/TournamentMatch.module.scss';
 interface TournamentMatchPartyProps {
   party: Participant;
@@ -38,12 +36,12 @@ function TournamentMatchParty({
         onPartyClick(party, false);
       }}
     >
-      <PlayerImage
-        src={party.picture ?? '/image/match_qustion.png'}
-        styleName={`tournament`}
-        size={1}
-      />
-
+      {/* next/image의 Image 컴포넌트로 objectFit, layout 속성 적용하려면 부모 컨테이너에
+      position: relative 혹은 absolute 가 적용되어있어야 하는데, 그럴 경우 브라켓에서 이미지가 벗어나는
+      문제가 있으므로 임시 방편으로 img 태그를 사용합니다. */}
+      <div className={styles.imageWrap}>
+        <img src={party.picture} className={styles.playerImage} alt='player' />
+      </div>
       <div className={styles.partyName}>{party.name || teamNameFallback}</div>
       <div className={styles.score}>
         {party.resultText ?? resultFallback(party)}

diff --git a/hooks/tournament/useTournamentEditInfo.ts b/hooks/tournament/useTournamentEditInfo.ts
@@ -6,8 +6,8 @@ const emptyTournamentEditInfo: ITournamentEditInfo = {
   title: '',
   contents: '',
   type: 'CUSTOM',
-  startTime: new Date(),
-  endTime: new Date(),
+  startTime: '',
+  endTime: '',
 };
 
 function useTournamentEditInfo() {
@@ -17,9 +17,12 @@ function useTournamentEditInfo() {
   // change
   const inputChangeHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
-    if (name === 'startTime' || name === 'endTime')
-      setTournamentEditInfo((prev) => ({ ...prev, [name]: new Date(value) }));
-    else setTournamentEditInfo((prev) => ({ ...prev, [name]: value }));
+    if (name === 'startTime' || name === 'endTime') {
+      setTournamentEditInfo((prev) => ({
+        ...prev,
+        [name]: value.slice(0, -2) + '00',
+      }));
+    } else setTournamentEditInfo((prev) => ({ ...prev, [name]: value }));
   };
 
   const selectChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {

diff --git a/...ournamentId]/games/dummyTournamentGame.ts → ...ournamentId]/games/dummyTournamentGame.ts b/...ournamentId]/games/dummyTournamentGame.ts → ...ournamentId]/games/dummyTournamentGame.ts
diff --git a/...amentId]/games/generateTournamentGames.ts → ...amentId]/games/generateTournamentGames.ts b/...amentId]/games/generateTournamentGames.ts → ...amentId]/games/generateTournamentGames.ts
diff --git a/.../tournament/[tournamentId]/games/index.ts → ...tournaments/[tournamentId]/games/index.ts b/.../tournament/[tournamentId]/games/index.ts → ...tournaments/[tournamentId]/games/index.ts
diff --git a/...rnament/[tournamentId]/users/dummyData.ts → ...naments/[tournamentId]/users/dummyData.ts b/...rnament/[tournamentId]/users/dummyData.ts → ...naments/[tournamentId]/users/dummyData.ts
diff --git a/.../tournament/[tournamentId]/users/index.ts → ...tournaments/[tournamentId]/users/index.ts b/.../tournament/[tournamentId]/users/index.ts → ...tournaments/[tournamentId]/users/index.ts
diff --git a/...ingpong/tournament/dummyTournamentData.ts → ...ngpong/tournaments/dummyTournamentData.ts b/...ingpong/tournament/dummyTournamentData.ts → ...ngpong/tournaments/dummyTournamentData.ts
diff --git a/pages/api/pingpong/tournament/index.ts → pages/api/pingpong/tournaments/index.ts b/pages/api/pingpong/tournament/index.ts → pages/api/pingpong/tournaments/index.ts
diff --git a/styles/admin/tournament/TournamentEditMatch.module.scss b/styles/admin/tournament/TournamentEditMatch.module.scss
@@ -10,6 +10,13 @@
   border-radius: 0.6rem;
   justify-content: space-between;
   align-items: center;
+
+  .playerImage {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 100%;
+  }
+
   .partyName {
     margin-left: 1rem;
   }
@@ -67,13 +74,9 @@
 }
 
 .buttonsContainer {
-  // z-index: 1;
-  // margin-top: 10px;
-  // position: absolute;
   bottom: 0;
   display: flex;
   width: 100%;
-  // padding: 10px; /* 선택적인 여백 추가 */
-  background-color: rgba(255, 255, 255, 0.7); /* 반투명한 배경색 */
-  justify-content: space-around; /* 가로 정렬 */
+  background-color: rgba(255, 255, 255, 0.7);
+  justify-content: space-around;
 }
diff --git a/styles/tournament/TournamentMatch.module.scss b/styles/tournament/TournamentMatch.module.scss
@@ -10,6 +10,13 @@
   border-radius: 0.6rem;
   justify-content: space-between;
   align-items: center;
+
+  .playerImage {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 100%;
+  }
+
   .partyName {
     margin-left: 1rem;
   }
@@ -32,3 +39,15 @@
   color: #000000;
   justify-content: space-around;
 }
+
+.imageWrap {
+  width: 2.6rem;
+  height: 2.6rem;
+  overflow: hidden;
+  border-radius: 50%;
+  .playerImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
diff --git a/types/admin/adminTournamentTypes.ts b/types/admin/adminTournamentTypes.ts
@@ -29,6 +29,6 @@ export interface ITournamentEditInfo {
   title: string;
   contents: string;
   type: 'CUSTOM' | 'MASTER' | 'ROOKIE' | null;
-  startTime: Date;
-  endTime: Date;
+  startTime: string;
+  endTime: string;
 }
diff --git a/utils/handleTime.ts b/utils/handleTime.ts
@@ -126,6 +126,25 @@ export const getFormattedDateToString = (
   return { year, month, date, hour, min };
 };
 
+export const dateToDateTimeLocalString = (d: Date) => {
+  if (!(d instanceof Date)) {
+    d = new Date(d);
+  }
+
+  const offset = d.getTimezoneOffset() * 60000;
+  const dateOffset = new Date(d.getTime() - offset);
+
+  const dateString = dateOffset.toISOString().slice(0, 16);
+  return dateString;
+};
+
+export const dateToKRIOSString = (d: Date) => {
+  const offset = d.getTimezoneOffset() * 60000;
+  const dateOffset = new Date(d.getTime() - offset);
+
+  return dateOffset.toISOString();
+};
+
 /**
  * 시간 문자열에서 hour와 min을 분리하여 반환하는
  * @return : number 타입과 string 타입 둘 다 반환

diff --git a/utils/handleTournamentGame.ts b/utils/handleTournamentGame.ts
@@ -11,7 +11,11 @@ import { TournamentGame } from 'types/tournamentTypes';
 export const setModifiabilityFlag = (matches: Match[]) => {
   matches.forEach((match) => {
     match.isModifiable = false;
-    if (match.state === 'WAIT' || match.state === 'END') {
+    if (
+      match.state === 'LIVE' ||
+      match.state === 'WAIT' ||
+      match.state === 'END'
+    ) {
       const nextMatch = matches.find(
         (nextMatch) => match.nextMatchId === nextMatch.id
       );
@@ -42,7 +46,7 @@ export const addExpectedMatchParticipants = (matches: Match[]) => {
         if (winner) {
           const modifiedWinner = {
             ...winner,
-            isWinner: true,
+            isWinner: false,
             resultText: null,
           };
           matches[i].participants.push(modifiedWinner);