[#113] 소켓 로직 변경 적용

frontend/src/components/Main/CompetitionList.tsx

@@ -125,6 +125,9 @@ export default function CompetitionList() {
               <td>
                 <ViewDashboardButton id={competition.id} />
               </td>
+              <td>
+                <Link to={`/contest/${competition.id}`}>대회 참여</Link>
+              </td>
             </tr>
           ))}
         </tbody>

frontend/src/components/Submission/SubmissionResult.tsx

@@ -48,13 +48,12 @@ export function SubmissionResult({ socket }: Props) {
   };
 
   const handleMessage = (rawData: string) => {
-    const { message } = JSON.parse(rawData) as Message;
-    const totalSubmissionResult = 10;
+    const { message, testcaseNum } = JSON.parse(rawData) as Message;
 
     setSubmissionMessage(message);
     setScoreResults(
-      range(0, totalSubmissionResult).map((_, index) => ({
-        testcaseId: index,
+      range(0, testcaseNum).map((_, index) => ({
+        testcaseId: index + 1,
         submitState: SUBMIT_STATE.loading,
       })),
     );

frontend/src/components/Submission/types.ts

@@ -19,6 +19,7 @@ export interface SubmitResult {
 
 export type Message = {
   message: string;
+  testcaseNum: number;
 };
 
 export type ScoreResult = {

frontend/src/hooks/competition/useCompetition.ts

@@ -7,6 +7,7 @@ import { createSocketInstance } from '@/utils/socket';
 import { isNil } from '@/utils/type';
 
 export type SubmissionForm = {
+  competitionId: number;
   problemId: ProblemId;
   code: string;
 };
@@ -24,10 +25,14 @@ const notFoundCompetition: CompetitionInfo = {
 
 export const useCompetition = (competitionId: number) => {
   const [competition, setCompetition] = useState<CompetitionInfo>(notFoundCompetition);
+
   const socket = useRef(
     createSocketInstance('/competitions', {
       transports: ['websocket'],
-      query: { competitionId: 3 },
+      query: { competitionId },
+      auth: {
+        token: `${localStorage.getItem('accessToken')}`,
+      },
     }),
   );
 
@@ -49,7 +54,9 @@ export const useCompetition = (competitionId: number) => {
   }, []);
 
   function submitSolution(form: SubmissionForm) {
-    socket.current.emit('submissions', form);
+    socket.current.emit('submissions', {
+      ...form,
+    });
   }
 
   async function updateCompetition(competitionId: number) {

frontend/src/pages/ContestPage.tsx

@@ -83,7 +83,9 @@ export default function ContestPage() {
     const form = {
       problemId: currentProblem.id,
       code,
+      competitionId,
     } satisfies SubmissionForm;
+
     submitSolution(form);
   }
 

frontend/src/router.tsx

@@ -8,35 +8,30 @@ import ProblemPage from '@/pages/ProblemPage';
 
 import App from './App';
 
-const router = createBrowserRouter(
-  [
-    {
-      path: '/',
-      element: <App />,
-      children: [
-        {
-          index: true,
-          element: <MainPage />,
-        },
-        {
-          path: '/contest/:id',
-          element: <ContestPage />,
-        },
-        {
-          path: '/problem/:id',
-          element: <ProblemPage />,
-        },
-        {
-          path: '/contest/create',
-          element: <CreateCompetitionPage />,
-        },
-        { path: '/login', element: <LoginPage /> },
-      ],
-    },
-  ],
+const router = createBrowserRouter([
   {
-    basename: process.env.NODE_ENV === 'production' ? '/web12-Algo-With-Me' : '',
+    path: '/',
+    element: <App />,
+    children: [
+      {
+        index: true,
+        element: <MainPage />,
+      },
+      {
+        path: '/contest/:id',
+        element: <ContestPage />,
+      },
+      {
+        path: '/problem/:id',
+        element: <ProblemPage />,
+      },
+      {
+        path: '/contest/create',
+        element: <CreateCompetitionPage />,
+      },
+      { path: '/login', element: <LoginPage /> },
+    ],
   },
-);
+]);
 
 export default router;

frontend/vite.config.ts

@@ -3,7 +3,6 @@ import path from 'path';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  base: './',
   resolve: {
     alias: [
       {