{
: null}
- {options.map((option, i) => (
-
);
diff --git a/FE/src/components/QuizPreview.tsx b/FE/src/components/QuizPreview.tsx
index 24e0e63..12d366e 100644
--- a/FE/src/components/QuizPreview.tsx
+++ b/FE/src/components/QuizPreview.tsx
@@ -6,11 +6,6 @@ type Props = {
description: string;
};
-const mock = {
- title: '내가만든퀴즈',
- description: '아무거나 찍어주세요 행운을 테스트합니다.'
-};
-
export const QuizPreview = ({ title, description }: Props) => {
return (
(
+
+ ))}
-
- ))}
+ : 'none',
+ opacity: quizState === 'end' && option.order !== quizAnswer ? '0.3' : '1',
+ textShadow: '-1px 0 white, 0 1px white, 1px 0 white, 0 -1px white'
+ }}
+ >
+ {i + 1 + '. ' + option.content}
-
+ {i + 1 + '. ' + option.content}
+
+
@@ -18,8 +13,8 @@ export const QuizPreview = ({ title, description }: Props) => {
-
);
diff --git a/FE/src/components/QuizSetSearchList.tsx b/FE/src/components/QuizSetSearchList.tsx
new file mode 100644
index 0000000..d543250
--- /dev/null
+++ b/FE/src/components/QuizSetSearchList.tsx
@@ -0,0 +1,114 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { QuizPreview } from './QuizPreview';
+
+type Quiz = {
+ id: string;
+ quiz: string;
+ limitTime: number;
+ choiceList: {
+ content: string;
+ order: number;
+ }[];
+};
+
+type QuizSet = {
+ id: string;
+ title: string;
+ category: string;
+ quizList: Quiz[];
+};
+
+type Params = {
+ search: string;
+ onClick: (quizSet: QuizSet) => void;
+};
+
+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();
+ return {
+ data: data.quizSetList,
+ nextPage: pageParam + 1,
+ hasMore: data.quizSetList.length > 0
+ };
+ };
+
+ const [selectedQuizSet, setSelectedQuizSet] = useState{mock.title + title}
- {mock.description + description}
+ {title}
+ {description}
Loading...
; + if (isError) returnError fetching data.
; + + return ( + <> + {data?.pages.map((page) => + page?.data.map((e) => ( + {
+ setSelectedQuizSet(e);
+ onClick(e);
+ }}
+ key={e.id}
+ style={{
+ border: 'solid 2px ' + (selectedQuizSet?.id === e.id ? 'lightgreen' : 'white')
+ }}
+ >
+
+ ))
+ )}
+
+ {(isFetchingNextPage || hasNextPage) && (
+
+
+ );
+};
+
+export default QuizSetSearchList;
diff --git a/FE/src/components/QuizSettingModal.tsx b/FE/src/components/QuizSettingModal.tsx
index 0add157..8d50077 100644
--- a/FE/src/components/QuizSettingModal.tsx
+++ b/FE/src/components/QuizSettingModal.tsx
@@ -1,9 +1,23 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
import { QuizPreview } from './QuizPreview';
+import { socketService } from '@/api/socket';
+import QuizSetSearchList from './QuizSetSearchList';
type Quiz = {
+ id: string;
+ quiz: string;
+ limitTime: number;
+ choiceList: {
+ content: string;
+ order: number;
+ }[];
+};
+
+type QuizSet = {
+ id: string;
title: string;
category: string;
+ quizList: Quiz[];
};
type Props = {
@@ -11,25 +25,33 @@ type Props = {
onClose: () => void;
};
-const sampleQuizList = [
- { title: 'quiz1', category: 'category1' },
- { title: 'quiz1', category: 'category1' },
- { title: 'quiz1', category: 'category1' },
- { title: 'quiz1', category: 'category1' },
- { title: 'quiz1', category: 'category1' },
- { title: 'quiz1', category: 'category1' }
-];
-
export const QuizSettingModal = ({ isOpen, onClose }: Props) => {
- const [quizList, setQuizList] = useState
+
+
+ )}
+
+
-
- {quizList.map((_, i) => (
-
setSelectedQuizId(i)}
- key={i}
- style={{ border: 'solid 2px ' + (selectedQuizId === i ? 'lightgreen' : 'white') }}
- >
-
- ))}
+
+ {searchParam && (
+
- {selectedQuizId >= 0 ? (
+ {selectedQuizSet ? (
선택된 퀴즈
-
{`퀴즈 개수(${quizCount})`}
setQuizCount(Number(e.target.value))}
/>
-
+
-
-);
+async function enableMocking() {
+ if (process.env.NODE_ENV !== 'development') {
+ return;
+ }
+
+ const { worker } = await import('./mocks/browser');
+
+ return worker.start({
+ onUnhandledRequest: 'bypass'
+ });
+}
+
+enableMocking().finally(() => {
+ const queryClient = new QueryClient();
+ createRoot(document.getElementById('root')!).render(
+
+
+
+
+ );
+});
diff --git a/FE/src/mocks/browser.ts b/FE/src/mocks/browser.ts
new file mode 100644
index 0000000..0a56427
--- /dev/null
+++ b/FE/src/mocks/browser.ts
@@ -0,0 +1,4 @@
+import { setupWorker } from 'msw/browser';
+import { handlers } from './handlers';
+
+export const worker = setupWorker(...handlers);
diff --git a/FE/src/mocks/data.ts b/FE/src/mocks/data.ts
new file mode 100644
index 0000000..0cfad19
--- /dev/null
+++ b/FE/src/mocks/data.ts
@@ -0,0 +1,16 @@
+export const QuizSetList = Array(100)
+ .fill(null)
+ .map((_, i) => ({
+ id: i,
+ title: 'title ' + i,
+ category: 'category ' + i,
+ quizList: Array(i).fill({
+ id: '0',
+ quiz: '',
+ limitTime: 1000,
+ choiceList: {
+ content: 'content',
+ order: 1
+ }
+ })
+ }));
diff --git a/FE/src/mocks/handlers.ts b/FE/src/mocks/handlers.ts
new file mode 100644
index 0000000..7a2635d
--- /dev/null
+++ b/FE/src/mocks/handlers.ts
@@ -0,0 +1,17 @@
+import { http, HttpResponse } from 'msw';
+import { QuizSetList } from './data';
+
+export const handlers = [
+ http.get('/api/quizset', ({ request }) => {
+ const url = new URL(request.url);
+ const offset = Number(url.searchParams.get('offset'));
+ const size = Number(url.searchParams.get('size'));
+ const search = url.searchParams.get('search');
+
+ console.log(offset, size, search);
+ return HttpResponse.json({ quizSetList: QuizSetList.slice(offset, offset + size) });
+ }),
+ http.get('/api/time', () => {
+ return HttpResponse.json({ serverTime: Date.now() });
+ })
+];
퀴즈를 선택해주세요
)}
diff --git a/FE/src/hooks/useServerDate.ts b/FE/src/hooks/useServerDate.ts
new file mode 100644
index 0000000..b2def38
--- /dev/null
+++ b/FE/src/hooks/useServerDate.ts
@@ -0,0 +1,21 @@
+import { useCallback, useEffect, useState } from 'react';
+
+const API_PATH = '/api/time';
+
+const useServerDate = () => {
+ const [offset, setOffset] = useState(0);
+ useEffect(() => {
+ const startClientTime = Date.now();
+ fetch(API_PATH)
+ .then((res) => res.json())
+ .then((res) => {
+ const endClientTime = Date.now();
+ const clientTime = (startClientTime + endClientTime) / 2;
+ setOffset(clientTime - res.serverTime);
+ });
+ }, []);
+ const now = useCallback(() => Date.now() - offset, [offset]);
+ return now;
+};
+
+export default useServerDate;
diff --git a/FE/src/main.tsx b/FE/src/main.tsx
index ea9e363..d6b402b 100644
--- a/FE/src/main.tsx
+++ b/FE/src/main.tsx
@@ -1,10 +1,28 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App.tsx';
import './index.css';
-createRoot(document.getElementById('root')!).render(
-