Merge pull request #250 from boostcampwm-2024/dev-fe

Dev fe

FE/src/App.tsx

@@ -6,6 +6,7 @@ import { QuizSetupPage } from './pages/QuizSetupPage';
 import { GameLobbyPage } from './pages/GameLobbyPage';
 import { LoginPage } from './pages/LoginPage';
 import { MyPage } from './pages/MyPage';
+import { PinPage } from './pages/PinPage';
 
 function App() {
   return (
@@ -17,6 +18,7 @@ function App() {
         <Route path="/game/lobby" element={<GameLobbyPage />} />
         <Route path="/quiz/setup" element={<QuizSetupPage />} />
         <Route path="/login" element={<LoginPage />} />
+        <Route path="/pin" element={<PinPage />} />
         <Route path="/mypage" element={<MyPage />} />
         <Route path="*" element={<div>not found</div>} />
       </Routes>

FE/src/api/rest/authApi.ts

@@ -2,7 +2,7 @@ import axios from 'axios';
 import axiosInstance from './instance';
 
 type LoginResponse = {
-  result: string;
+  acess_token: string;
 };
 
 export async function login(email: string, password: string): Promise<LoginResponse | null> {
@@ -14,13 +14,7 @@ export async function login(email: string, password: string): Promise<LoginRespo
     console.log('Login Successful:', response.data);
     return response.data;
   } catch (error) {
-    if (axios.isAxiosError(error)) {
-      console.error('Login Error:', error.response?.data || error.message);
-    } else {
-      console.error('Unexpected Error:', error);
-    }
-
-    return null;
+    return handleAxiosError(error);
   }
 }
 
@@ -41,12 +35,15 @@ export async function signUp(data: SignupPayload): Promise<SignupResponse | null
 
     return response.data;
   } catch (error) {
-    if (axios.isAxiosError(error)) {
-      console.error('Signup Error:', error.response?.data || error.message);
-    } else {
-      console.error('Unexpected Error:', error);
-    }
-
-    return null;
+    return handleAxiosError(error);
   }
 }
+
+const handleAxiosError = (error: unknown): null => {
+  if (axios.isAxiosError(error)) {
+    console.error('Axios Error:', error.response?.data || error.message);
+  } else {
+    console.error('Unexpected Error:', error);
+  }
+  return null;
+};

FE/src/api/rest/quizTypes.ts

@@ -24,7 +24,7 @@ export type QuizChoiceInput = {
 export type QuizInput = {
   quiz: string;
   limitTime: number;
-  choiceList: QuizChoiceInput[];
+  choices: QuizChoiceInput[];
 };
 
 export type CreateQuizSetPayload = {

FE/src/api/socket/socket.ts

@@ -32,6 +32,9 @@ class SocketService {
   private socket: SocketInterface;
   private url: string;
   private handlers: (() => void)[];
+  private handlerMap: Partial<
+    Record<SocketEvent, ((data: SocketDataMap[SocketEvent]['response']) => void)[]>
+  > = {};
 
   constructor(url: string) {
     this.socket = io() as SocketInterface;
@@ -46,17 +49,21 @@ class SocketService {
       this.socket.on('connect', () => resolve());
       this.socket.on('error', () => reject());
     });
-    this.handlers.forEach((h) => h());
-    this.socket.onAny((eventName, ...args) => {
-      console.log(`SOCKET[${eventName}]`, ...args);
-    });
+    this.initHandler();
     return;
   }
 
   async connectMock(gameId: keyof typeof mockMap) {
     if (this.isActive()) return;
     this.socket = new mockMap[gameId]() as SocketInterface;
+    this.initHandler();
+  }
+
+  initHandler() {
     this.handlers.forEach((h) => h());
+    Object.entries(this.handlerMap).forEach(([event, handlers]) =>
+      handlers.forEach((h) => this.socket.on(event, h))
+    );
     this.socket.onAny((eventName, ...args) => {
       console.log(`SOCKET[${eventName}]`, ...args);
     });
@@ -74,6 +81,7 @@ class SocketService {
     return this.socket.id;
   }
 
+  // deprecated
   onPermanently<T extends SocketEvent>(
     event: T,
     callback: (data: SocketDataMap[T]['response']) => void
@@ -85,10 +93,14 @@ class SocketService {
 
   on<T extends SocketEvent>(event: T, callback: (data: SocketDataMap[T]['response']) => void) {
     if (this.isActive()) this.socket.on(event, callback);
+    if (!this.handlerMap[event]) this.handlerMap[event] = [];
+    this.handlerMap[event].push(callback);
   }
 
   off<T extends SocketEvent>(event: T, callback: (data: SocketDataMap[T]['response']) => void) {
+    if (!this.handlerMap[event]) return;
     if (this.isActive()) this.socket.off(event, callback);
+    this.handlerMap[event] = this.handlerMap[event].filter((e) => e !== callback);
   }
 
   emit<T extends SocketEvent>(event: T, data: SocketDataMap[T]['request']) {

FE/src/components/QuizOptionBoard.tsx

@@ -33,8 +33,8 @@ export const QuizOptionBoard = () => {
   const handleClick: React.MouseEventHandler<HTMLDivElement> = (e) => {
     const { pageX, pageY } = e;
     const { width, height, top, left } = e.currentTarget.getBoundingClientRect();
-    const x = (pageX - left) / width;
-    const y = (pageY - top) / height;
+    const x = (pageX - left - window.scrollX) / width;
+    const y = (pageY - top - window.scrollY) / height;
     if (x > 1 || y > 1) return;
     socketService.emit('updatePosition', { gameId, newPosition: [y, x] });
     const option = Math.round(x) + Math.floor(y * Math.ceil(choiceList.length / 2)) * 2;

FE/src/components/QuizSetSearchList.tsx

@@ -1,6 +1,7 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { QuizPreview } from './QuizPreview';
+import { getQuizSetList } from '@/api/rest/quizApi';
 
 // type Quiz = {
 //   id: string;
@@ -27,20 +28,16 @@ type Params = {
 const SEARCH_COUNT = 10;
 
 const QuizSetSearchList = ({ onClick, search }: Params) => {
-  const fetchPosts = async ({ pageParam = 1 }) => {
-    const res = await fetch(
-      '/api/quizset?' +
-        new URLSearchParams([
-          ['search', search],
-          ['offset', String(pageParam * SEARCH_COUNT)],
-          ['size', String(SEARCH_COUNT)]
-        ])
-    );
-    const data: { quizSetList: QuizSet[] } = await res.json();
+  // api로 수정시
+  const fetchPosts = async ({ pageParam = '' }) => {
+    const data = await getQuizSetList('', pageParam, SEARCH_COUNT, search);
+    if (!data) {
+      throw new Error('Failed to fetch quiz set list');
+    }
     return {
       data: data.quizSetList,
-      nextPage: pageParam + 1,
-      hasMore: data.quizSetList.length > 0
+      nextPage: data.paging.nextCursor || '',
+      hasMore: data.paging.hasNextPage
     };
   };
 
@@ -49,7 +46,7 @@ const QuizSetSearchList = ({ onClick, search }: Params) => {
     useInfiniteQuery({
       queryKey: [search],
       queryFn: fetchPosts,
-      initialPageParam: 0,
+      initialPageParam: '',
       getNextPageParam: (lastPage) => (lastPage.hasMore ? lastPage.nextPage : undefined)
     });
 

FE/src/components/TextInput.tsx

@@ -0,0 +1,45 @@
+import { TextField } from '@mui/material';
+import { ReactNode, useEffect, useRef } from 'react';
+
+type InputProps = {
+  type?: string;
+  label: string;
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  error?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export const TextInput = (props: InputProps) => {
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (props.error && inputRef.current) {
+      inputRef.current.querySelector('input')?.focus();
+    }
+  }, [props.error, inputRef]);
+
+  return (
+    <div className={'w-full ' + props.className}>
+      <div className="flex items-center">
+        <TextField
+          ref={inputRef}
+          label={props.label}
+          type={props.type || 'text'}
+          variant="outlined"
+          value={props.value}
+          onChange={props.onChange}
+          className="w-full flex-grow"
+          slotProps={{
+            inputLabel: {
+              style: { color: props.error ? 'red' : 'inherit', borderColor: 'red' }
+            }
+          }}
+        />
+        {props.children}
+      </div>
+      <p className={'text-red-600 text-sm'}>{props.error}</p>
+    </div>
+  );
+};