Merge pull request #200 from 2024-Summer-Bootcamp-team-C/Feat/#186

Fix#186. quiz 오류 수정 및 보완
2024-Summer-Bootcamp-team-C · Jul 29, 2024 · eac6420 · eac6420
2 parents 3e05024 + 3d2bd2d
commit eac6420
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 22 deletions.
diff --git a/src/components/CardFront.tsx b/src/components/CardFront.tsx
@@ -4,9 +4,10 @@ import CardFrontImage from '../assets/images/CardFrontImage.png';
 interface CardFrontProps {
   name: string;
   image: string;
+  overlayImages?: string[]; // 오버레이 이미지 배열로 변경
 }
 
-const CardFront: React.FC<CardFrontProps> = ({ name, image }) => {
+const CardFront: React.FC<CardFrontProps> = ({ name, image, overlayImages }) => {
   return (
     <div className="relative w-full h-full max-w-[200px] max-h-[300px]">
       <img className="object-contain w-full h-full" src={CardFrontImage} alt="Front Of Card" />
@@ -18,7 +19,22 @@ const CardFront: React.FC<CardFrontProps> = ({ name, image }) => {
         ))}
       </div>
       <div className="absolute inset-0 flex items-center justify-center top-2">
-        <img className="w-[130px] h-[170px] object-cover rounded-lg" src={image} alt="Great Card" />
+        <div className="relative w-[130px] h-[170px]">
+          <img className="object-cover w-full h-full rounded-lg" src={image} alt="Great Card" />
+          {overlayImages && overlayImages.map((overlayImage, index) => (
+            <img
+              key={index}
+              className={`absolute w-[65px] h-[85px] object-cover ${
+                index === 0 ? 'top-0 left-0' : // 첫 번째 오버레이 이미지 위치 조정
+                index === 1 ? 'top-0 right-0' : // 두 번째 오버레이 이미지 위치 조정
+                index === 2 ? 'bottom-0 left-0' : // 세 번째 오버레이 이미지 위치 조정
+                'bottom-0 right-0' // 네 번째 오버레이 이미지 위치 조정
+              }`}
+              src={overlayImage}
+              alt={`Overlay ${index}`}
+            />
+          ))}
+        </div>
       </div>
       <div className="absolute flex flex-col items-center text-black transform rotate-180 bottom-2 right-4">
         {name.split('').map((char, index) => (

diff --git a/src/components/PuzzleModal.tsx b/src/components/PuzzleModal.tsx
@@ -5,6 +5,11 @@ import BlueBtn from '../assets/images/PuzzleCardBlueBtn.png';
 import PuzzleModalImage from '../assets/images/PuzzleModalImage.png';
 import axios from 'axios';
 import { useUserIdStore, useGreatPersonStore, useQuizStore } from '../store';
+import lss1 from '../assets/images/Lss1.png';
+import lss2 from '../assets/images/Lss2.png';
+import lss3 from '../assets/images/Lss3.png';
+import lss4 from '../assets/images/Lss4.png';
+
 
 interface PuzzleModalProps {
   openModal: boolean;
@@ -15,7 +20,7 @@ interface PuzzleModalProps {
 }
 
 const PuzzleModal: React.FC<PuzzleModalProps> = ({ openModal, movePage, closeModal, resetQuiz, showGreatList }) => {
-  const { greatId, puzzle_cnt } = useGreatPersonStore();
+  const { greatId, puzzle_cnt, name } = useGreatPersonStore();
   const { userId } = useUserIdStore();
   // const quizzes = useQuizStore(state => state.quizzes);
   // const [isQuizCompleted, setIsQuizCompleted] = useState(false);
@@ -56,6 +61,25 @@ const PuzzleModal: React.FC<PuzzleModalProps> = ({ openModal, movePage, closeMod
     }, 500);
   };
 
+  const getImageSrc = () => {
+    if (name === "이순신") {
+      switch (puzzle_cnt) {
+        case 1:
+          return lss1;
+        case 2:
+          return lss2;
+        case 3:
+          return lss3;
+        case 4:
+          return lss4;
+        default:
+          return imageSrc;
+      }
+    }
+    return imageSrc;
+  };
+
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
       <div className="relative">
@@ -65,7 +89,7 @@ const PuzzleModal: React.FC<PuzzleModalProps> = ({ openModal, movePage, closeMod
             <>
               <h1 className="mb-6 mr-16 text-5xl">조각을 하사하노라</h1>
               <div className="relative flex justify-center mb-6">
-                <img src={imageSrc} alt="세종대왕" className="my-10 mr-14" />
+                <img src={getImageSrc()} alt="세종대왕" className="w-48 my-10 -rotate-12 mr-14" />
               </div>
               <div className="text-center">
                 {puzzle_cnt === 4 ? (

diff --git a/src/pages/GreatListPageLeft.tsx b/src/pages/GreatListPageLeft.tsx
@@ -93,29 +93,26 @@ const GreatListPageLeft: React.FC<CardProps> = ({ movePage }) => {
             <div className="card-container max-w-[200px] max-h-[300px]">
               <ReactCardFlip isFlipped={isFlipped[index]} flipDirection="horizontal">
                 <div className="card-size">
-                  {person.name === '이순신' ? (
-                    <>
-                      <CardFront key={`front-${person.greatId}-0`} name={person.name} image={LssBlack} />
-                      {puzzle_cnt >= 1 && (
-                        <CardFront key={`front-${person.greatId}-1`} name={person.name} image={Lss1} />
-                      )}
-                      {puzzle_cnt >= 2 && (
-                        <CardFront key={`front-${person.greatId}-2`} name={person.name} image={Lss2} />
-                      )}
-                      {puzzle_cnt >= 3 && (
-                        <CardFront key={`front-${person.greatId}-3`} name={person.name} image={Lss3} />
-                      )}
-                      {puzzle_cnt >= 4 && (
-                        <CardFront key={`front-${person.greatId}-4`} name={person.name} image={Lss4} />
-                      )}
-                    </>
+                  {person.name === "이순신" ? (
+                    <CardFront 
+                      key={`front${person.greatId}`} 
+                      name={person.name} 
+                      image={LssBlack} 
+                      overlayImages={
+                        puzzle_cnt === 1 ? [Lss1] : 
+                        puzzle_cnt === 2 ? [Lss1, Lss2] : 
+                        puzzle_cnt === 3 ? [Lss1, Lss2, Lss3] : 
+                        puzzle_cnt === 4 ? [Lss1, Lss2, Lss3, Lss4] : 
+                        []
+                      } 
+                    />
                   ) : (
-                    <CardFront key={`front-${person.greatId}`} name={person.name} image={person.front_url} />
+                    <CardFront key={`front${person.greatId}`} name={person.name} image={person.front_url} />
                   )}
                 </div>
                 <div className="card-size">
                   <CardBack
-                    key={`back-${person.greatId}`}
+                    key={`back${person.greatId}`}
                     name={person.name}
                     saying_url={person.saying_url}
                     category={`${person.nation}/${person.field}`}

diff --git a/src/pages/GreatPageRight.tsx b/src/pages/GreatPageRight.tsx
@@ -31,7 +31,9 @@ const GreatPageRight: React.FC<GreatPageRightProps> = ({ movePage }) => {
         const quizzes = response.data;
         useQuizStore.getState().setQuizzes(quizzes);
         console.log(quizzes);
+        console.log(movePage);
         movePage(11);
+        console.log(movePage);
       } catch (error) {
         console.error('Error fetching quiz data:', error);
       }