Merge branch 'main' into fix/모바일-환경에서-이미지-배치가-자리에서-벗어나는-문제#1162

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>

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>

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();
                                       }}

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>

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>) => {

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;
 }

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;
   }

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;
 }

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 타입 둘 다 반환

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);