✨ feat: 이미지 게임 추가 (#10)

Author: dlsrks1021

package-lock.json

@@ -19,6 +19,7 @@
     "apexcharts": "^4.3.0",
     "axios": "^1.7.8",
     "bootstrap": "^5.3.3",
+    "browser-image-compression": "^2.0.2",
     "clsx": "^2.1.1",
     "column-resizer": "^1.4.0",
     "express": "^4.21.2",

package.json

@@ -15,6 +15,7 @@ import {
   stompSendMessageAtom,
   systemNoticeAtom,
   quizStartedAtom,
+  quizTypeAtom,
 } from '../../state/atoms';
 import useStompClient from '../../hooks/useStompClient';
 import { useCallback, useEffect, useRef, useLayoutEffect } from 'react';
@@ -51,6 +52,7 @@ const GameLayout = () => {
   const setSystemNotice = useSetRecoilState(systemNoticeAtom);
   const setSendMessage = useSetRecoilState(stompSendMessageAtom);
   const setLoginUser = useSetRecoilState(loginUserAtom);
+  const setQuizType = useSetRecoilState(quizTypeAtom);
   const navigate = useNavigate();
 
   const isQuizStarted = useRecoilValue(quizStartedAtom);
@@ -107,6 +109,7 @@ const GameLayout = () => {
           break;
         case 'GAME_START':
           setQuestions(payload.message.questions);
+          setQuizType(payload.message.quizType);
           navigate('play');
           break;
         case 'QUESTION_START':
@@ -151,6 +154,7 @@ const GameLayout = () => {
       setRankUpdate,
       setGameResult,
       navigate,
+      setQuizType,
     ],
   );
 

src/layout/game/GameLayout.js

@@ -1,5 +1,12 @@
 import {Clock, List, MessageCircleQuestion} from "lucide-react"
 
+// 상대 경로 앞에 슬래시를 보장해 Public 기준에서 로드되도록 보정
+const ensureLeadingSlash = (url) => {
+    if (!url) return url;
+    if (/^https?:\/\//i.test(url)) return url; // 절대 URL은 그대로 사용
+    return url.startsWith('/') ? url : `/${url}`;
+}
+
 function QuizInfoCard({ gameSetting }) {
   return (
     <div className="bg-white rounded-2xl shadow-lg p-8 mb-6">
@@ -15,7 +22,7 @@ function QuizInfoCard({ gameSetting }) {
         <div className="relative">
           <img
             className="w-full h-64 object-cover rounded-xl"
-            src={gameSetting?.quiz.thumbnailUrl}
+            src={ensureLeadingSlash(gameSetting?.quiz.thumbnailUrl)}
             alt="F1 race car on track with checkered flag"
           />
           <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-xl"></div>

src/layout/game/components/QuizInfoCard.js

@@ -1,12 +1,34 @@
 
-function QuizQuestion({ questionContent }) {
+// 상대 경로 앞에 슬래시를 보장해 Public 기준에서 로드되도록 보정
+const ensureLeadingSlash = (url) => {
+    if (!url) return url;
+    if (/^https?:\/\//i.test(url)) return url; // 절대 URL은 그대로 사용
+    return url.startsWith('/') ? url : `/${url}`;
+}
+
+function QuizQuestion({ questionContent, quizType }) {
+    if (quizType === 'IMAGE' && questionContent) {
+        return (
+            <div className="bg-white rounded-2xl shadow-lg p-8 mb-8 flex-1 flex items-center justify-center">
+                <div className="text-center">
+                    <img 
+                        src={ensureLeadingSlash(questionContent)} 
+                        alt="곧 퀴즈가 시작됩니다!" 
+                        className="max-w-full max-h-96 object-contain rounded-lg shadow-md"
+                        style={{ maxHeight: '400px' }}
+                    />
+                </div>
+            </div>
+        );
+    }
+    
     return (
-      <div className="bg-white rounded-2xl shadow-lg p-8 mb-8 flex-1 flex items-center justify-center">
-        <div className="text-center">
-          <h2 className="text-4xl font-bold text-gray-900">{questionContent ?? '곧 퀴즈가 시작됩니다!'}</h2>
+        <div className="bg-white rounded-2xl shadow-lg p-8 mb-8 flex-1 flex items-center justify-center">
+            <div className="text-center">
+                <h2 className="text-4xl font-bold text-gray-900">{questionContent ?? '곧 퀴즈가 시작됩니다!'}</h2>
+            </div>
         </div>
-      </div>
-    )
+    );
 }
 
 export default QuizQuestion

src/layout/game/components/QuizQuestion.js

@@ -11,6 +11,7 @@ import {
   questionsAtom,
   questionStartAtom,
   quizStartedAtom, // 새로 추가한 아톰
+  quizTypeAtom,
 } from '../../state/atoms';
 import WinnerModal from '../../layout/game/components/WinnerModal';
 
@@ -29,6 +30,7 @@ function GamePlay() {
   const [gameResult, setGameResult] = useRecoilState(gameResultAtom);
   const [visibleQuestion, setVisibleQuestion] = useState(false);
   const [showWinnerModal, setShowWinnerModal] = useState(false);
+  const [quizType] = useRecoilState(quizTypeAtom);
 
   // useSetRecoilState를 사용하여 quizStartedAtom을 업데이트하는 함수를 가져옵니다.
   const setQuizStartedState = useSetRecoilState(quizStartedAtom);
@@ -147,6 +149,7 @@ function GamePlay() {
                 questions &&
                 questions[currentQuestion.round - 1].question
               }
+              quizType={quizType}
             />
           )}
         </div>

src/pages/game/GamePlay.js

@@ -4,6 +4,13 @@ import { X, Search, ChevronLeft, ChevronRight, Clock, FileText, Loader2 } from "
 import {useApiQuery} from "../../hooks/useApiQuery";
 import axios from "axios";
 
+// 상대 경로 앞에 슬래시를 보장해 Public 기준에서 로드되도록 보정
+const ensureLeadingSlash = (url) => {
+    if (!url) return url;
+    if (/^https?:\/\//i.test(url)) return url; // 절대 URL은 그대로 사용
+    return url.startsWith('/') ? url : `/${url}`;
+}
+
 function QuizSelectModal({ isOpen, onClose, onSelect }) {
     const [searchTerm, setSearchTerm] = useState("")
     const [currentPage, setCurrentPage] = useState(1)
@@ -188,11 +195,11 @@ function QuizSelectModal({ isOpen, onClose, onSelect }) {
                                         >
                                             <div className="aspect-video bg-gray-200 relative">
                                                 <img
-                                                    src={quiz.thumbnailUrl || "/placeholder.svg?height=120&width=200&text=No+Image"}
+                                                    src={ensureLeadingSlash(quiz.thumbnailUrl) || "/placeholder.svg?height=120&width=200&text=No+Image"}
                                                     alt={quiz.title}
                                                     className="w-full h-full object-cover"
                                                     onError={(e) => {
-                                                        e.target.src = "/placeholder.svg?height=120&width=200&text=No+Image"
+                                                        e.target.src = ensureLeadingSlash("/placeholder.svg?height=120&width=200&text=No+Image")
                                                     }}
                                                 />
                                                 {selectedQuizId === quiz.quizId && (