[refactor] Arena 페이지 및 관전 CSS 리팩토링

front-end/src/App.jsx

@@ -10,7 +10,7 @@ function App() {
 
   useEffect(()=> {
     const path = location.pathname
-    console.log(path);
+    // console.log(path);
     if (path.includes('game-list') && !(path === '/game-list/competition' || path === '/game-list/group')  ) {
       setIsArena(true)
     } else {

front-end/src/app/store.js

@@ -1,4 +1,4 @@
-import { configureStore } from '@reduxjs/toolkit';
+import { configureStore, getDefaultMiddleware  } from '@reduxjs/toolkit';
 import { combineReducers } from 'redux';
 import { persistReducer, persistStore } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
@@ -28,7 +28,9 @@ const persistedReducer = persistReducer(persistConfig, rootReducer);
 
 export const store = configureStore({
   reducer: persistedReducer,
-
+  middleware: getDefaultMiddleware({
+    serializableCheck: false, // 비직렬화 가능한 값 경고 비활성화
+  }),
 });
 
 export const persistor = persistStore(store);

front-end/src/components/arena/HotMatch.jsx

@@ -1,40 +1,25 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-// npm install styled-components 애니메이트 기능 구현 설치 라이브러리
 import styled, { keyframes } from 'styled-components';
 import axios from 'axios';
-// import Oh from '../../images/arena/HotMatch/oh.png'
-// import Gwi from '../../images/arena/HotMatch/gwi.png'
-// import Hae from '../../images/arena/HotMatch/hae.png'
-// import Kim from '../../images/arena/HotMatch/kim.png'
 import View from '../../images/arena/HotMatch/View.png'
 import VS from '../../images/arena/HotMatch/VS.png'
 import Fighting from '../../images/arena/HotMatch/Fighting.gif'
 
+const fadeIn = keyframes`from {opacity: 0; transform: translateX(-50px);} to {opacity: 1;}`;
+const AnimatedHeader = styled.h1`animation: ${fadeIn} 0.5s ease-in-out forwards;`;
 
 export default function HotMatch() {
-  // Hot Match 애니메이트
-  const fadeIn = keyframes`from {opacity: 0; transform: translateX(-50px);} to {opacity: 1;}`;
-  const AnimatedHeader = styled.h1`animation: ${fadeIn} 0.5s ease-in-out forwards;`;
-
   const [hotMatchs, setHotMatchs] = useState([])
 
   useEffect(()=> {
     axios.get('https://codearena.shop/game/chat/hotmatch')
     .then((res)=> {
       setHotMatchs(res.data)
-      console.log("Hot Match 확인 :", res.data);
+      // console.log("Hot Match 확인 :", res.data);
     })
   },[])
 
-
-
-
-
-
-
-
-
   return (
     <div className='flex flex-col mt-5 relative'>
       <br />

front-end/src/components/arena/Match/Competition/CompTopInfo.jsx

@@ -34,22 +34,23 @@ export default function CompTopInfo({ gameExitId, problemId, game}) {
   return (
     <div className="flex">
       {/* 왼쪽 상단 (유저 정보) */}
-      <div className="match-header rounded-xl shadow-lg ml-2 mt-2 mr-5"
-      style={{
-        width: `${panelWidths.left}%`,
-        height: 'auto',
-        backgroundColor: '#F5EBDB',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-start' }}
-      >
-        <div className="flex justify-center items-center w-full">
+      <div
+        className="match-header rounded-xl shadow-lg ml-2 my-2 mr-5 p-1"
+        style={{
+          width: `${panelWidths.left}%`,
+          height: 'auto',
+          backgroundColor: '#F5EBDB',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-start' }}
+        >
+        <div className="flex justify-center items-center w-full p-1">
           <div className="flex flex-col mr-20">
             <div style={{ width: "125px", height: "125px"}} >
               <img
                 src={game?.userRedSsumnail}
                 alt="플레이어1 이미지"
-                className="rounded-full shadow-lg"
+                className="rounded-full shadow-lg object-cover object-center"
                 style={{width: "100%", height: "100%"}}
               />
             </div>
@@ -107,7 +108,6 @@ export default function CompTopInfo({ gameExitId, problemId, game}) {
           </div>
         </dialog>
 
-
         {/* 나가기 버튼 */}
         <button
           className="rounded-lg ml-3 mr-3 shadow-lg px-4 py-2 focus:outline-none text-2xl font-bold hover:scale-105"