+
+
내 캔버스 목록
+ {userInfo.canvases && userInfo.canvases.length > 3 && (
+
+ 총 {userInfo.canvases.length}개
+
+ )}
+
{userInfo.canvases && userInfo.canvases.length > 0 ? (
-
- {userInfo.canvases.map((canvas, index) => (
- -
-
-
{canvas.title}
-
- {canvas.size_x}x{canvas.size_y} - 생성일:{' '}
- {new Date(canvas.created_at).toLocaleDateString()}
-
-
- ))}
-
+
+
+ {userInfo.canvases.map((canvas, index) => (
+ -
+
+
+
+
+ 크기 : {canvas.size_x}x{canvas.size_y}
+
+ {canvas.canvasId !== 1 && (
+
+ 진행 기간 :{' '}
+ {new Date(canvas.created_at).toLocaleDateString()} ~{' '}
+ {new Date(canvas.ended_at).toLocaleDateString()}
+
+ )}
+ {canvas.canvasId !== 1 ? (
+
+ 시도 : {canvas.try_count} / 점유 : {
+ canvas.own_count !== null ?
+ canvas.own_count :
+
+ 집계중
+
+
+ }
+
+ ) : (
+
+ 시도 : {canvas.try_count}
+
+ )}
+
+ ))}
+
+
) : (
아직 생성된 캔버스가 없습니다.
diff --git a/src/components/modal/QuestionModal.tsx b/src/components/modal/QuestionModal.tsx
new file mode 100644
index 0000000..4f76485
--- /dev/null
+++ b/src/components/modal/QuestionModal.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+
+interface GameQuestion {
+ id: string;
+ question: string;
+ options: string[];
+ answer: number;
+}
+
+interface QuestionModalProps {
+ isOpen: boolean;
+ currentQuestion: GameQuestion | null;
+ questionTimeLeft: number;
+ lives: number;
+ selectedAnswer: number | null;
+ showResult: boolean;
+ isCorrect: boolean;
+ setSelectedAnswer: (index: number) => void;
+ submitAnswer: () => void;
+}
+
+const QuestionModal: React.FC = ({
+ isOpen,
+ currentQuestion,
+ questionTimeLeft,
+ lives,
+ selectedAnswer,
+ showResult,
+ isCorrect,
+ setSelectedAnswer,
+ submitAnswer,
+}) => {
+ if (!isOpen || !currentQuestion) return null;
+
+ return (
+
+
+
+
문제
+
+ {/* 생명 하트 표시 */}
+
+ {[...Array(2)].map((_, i) => (
+
+ {i < lives ? (
+
+ ) : (
+
+ )}
+
+ ))}
+
+
+ {questionTimeLeft}초
+
+
+
+
+ {showResult ? (
+
+
+ {isCorrect ? '✅ 정답입니다!' : '❌ 오답입니다!'}
+
+ {!isCorrect && (
+
생명이 1 감소합니다.
+ )}
+
+ ) : (
+ <>
+
+ {currentQuestion.question}
+
+
+
+ {currentQuestion.options.map((option, index) => (
+
+ ))}
+
+
+
+
+ )}
+
+
-
How to Play
+
Play