Merge pull request #80 from pknu-wap/feature/73-feat-독도-퍼즐-연동-및-ui-마무리

Feature/73 feat 독도 퍼즐 연동 및 UI 마무리
pknu-wap · Nov 28, 2024 · f6f56db · f6f56db
2 parents 7be3a24 + 51432d6
commit f6f56db
Show file tree

Hide file tree

Showing 7 changed files with 298 additions and 133 deletions.
diff --git a/client/src/pages/Stage3Page.module.css b/client/src/pages/Stage3Page.module.css
@@ -188,6 +188,9 @@
 
 .ResultBanner {
   position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   top: 11vh;
   left: 50vw;
   transform: translateX(-50%);

diff --git a/client/src/pages/Stage4Room1.js b/client/src/pages/Stage4Room1.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styles from './Stage4Room1.module.css';
 import Inventory from '../components/Inventory.js';
@@ -14,6 +14,7 @@ import Table from 'assets/stage4/Table.png';
 function Stage4Room1() {
   const navigate = useNavigate();
   const { missionClear, getHearts, hearts } = useUser();
+  const [banner, setBanner] = useState('');
 
   useEffect(() => {
     getHearts(4);
@@ -56,22 +57,28 @@ function Stage4Room1() {
       }
     } catch (error) {
       console.log('드래그 앤 드랍 미션 오류', error);
+      setBanner('이미 클리어 된 스테이지입니다.');
+      setTimeout(() => setBanner(''), 1000);
     }
   };
 
   return (
     <div className={styles.Stage4Bg}>
-      <div className={styles.TopBar}>김춘삼을 죽일 수 있는 총을 선택하라</div>
-      <Inventory />
-
-      {/* 하트 표시 */}
-      {hearts > 0 && (
+      <div className={styles.TopBarBg}>
+        <div className={styles.TopBar}>김춘삼을 죽일 수 있는 총을 선택하라</div>
+        {/* 하트 표시 */}
         <div className={styles.Heart}>
-          {Array.from({ length: hearts }, (_, i) => (
-            <img key={i} src={Heart} alt="Heart" />
-          ))}
+          {hearts > 0 && (
+            <>
+              {Array.from({ length: hearts }, (_, i) => (
+                <img key={i} src={Heart} alt="Heart" />
+              ))}
+            </>
+          )}
         </div>
-      )}
+      </div>
+      <Inventory />
+      <div className={styles.Stage4Floor} />
 
       {/* 김춘삼 이미지 (드롭 영역) */}
       <div
@@ -81,14 +88,19 @@ function Stage4Room1() {
       >
         <img className={styles.KimChunsam} src={KimChunsam} alt="KimChunsam" />
       </div>
-
+      <img className={styles.Table} src={Table} alt="Table" />
       {/* 총 이미지들 (드래그 가능) */}
       <div className={styles.Guns}>
         <img draggable="true" onDragStart={handleDragStart('correctGun')} src={Gun_Black} alt="Gun_Black" />
         <img draggable="true" onDragStart={handleDragStart('wrongGun1')} src={Gun_Gray} alt="Gun_Gray" />
         <img draggable="true" onDragStart={handleDragStart('wrongGun2')} src={Gun_White} alt="Gun_White" />
       </div>
-      <img className={styles.Table} src={Table} alt="Table" />
+
+      {banner && (
+        <div className={styles.Banner}>
+          <p>{banner}</p>
+        </div>
+      )}
     </div>
   );
 }

diff --git a/client/src/pages/Stage4Room1.module.css b/client/src/pages/Stage4Room1.module.css
@@ -5,55 +5,74 @@
   background-color: #fee7d7;
 }
 
-.TopBar {
+.TopBarBg {
   position: fixed;
-  width: 60vw;
-  height: 10vh;
-  top: 3vh;
-  left: 2vw;
+  top: 0;
   background-color: #c1a693;
-  font-family: 'MapoAgape', sans-serif;
-  font-size: 4vh;
-  text-align: center;
-  border-radius: 1vw; /* 둥근 모서리 */
-  padding: 1.5vw;
-  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.1); /* 그림자 효과 */
-}
-
-.KimChunsamWrapper {
-  position: fixed;
-  top: 19vh;
-  left: 26vw;
-  z-index: -1;
+  height: fit-content;
+  width: 100vw;
+  padding: 3vh 2vw;
+  padding-bottom: 0;
+  z-index: 1000;
   display: flex;
-  pointer-events: auto;
+  gap: 4vw;
+  align-items: center;
 }
 
-.KimChunsam {
-  height: 63vh;
-  object-fit: contain; /* 이미지 비율 유지 */
+.TopBar {
+  width: 60vw;
+  height: 9vh;
+  display: flex;
+  align-items: center;
+  background-image: url('../assets/ToolBar2.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  font-family: 'Noto Sans';
+  font-size: 2vw;
+  font-weight: 600;
+  color: #fff;
+  padding: 1.5vw 3vw;
 }
 
 .Heart {
-  position: fixed;
-  height: 10vh;
-  top: 3vh;
-  left: 67vw;
+  width: 15vw;
+  height: 9vh;
   display: flex;
   gap: 1vw;
-  background-color: #c1a693;
-  border-radius: 1vw; /* 둥근 모서리 */
-  padding: 1vw;
+  background-image: url('../assets/ToolBar1.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  padding: 1.2vw 2.5vw 1vw 2vw;
   align-items: center; /* 세로 중앙 정렬 */
-  justify-content: center; /* 가로 중앙 정렬 */
-  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.1); /* 그림자 효과 */
 }
 
 .Heart img {
   height: 5vh;
   object-fit: contain; /* 이미지 비율 유지 */
 }
 
+.Stage4Floor {
+  position: fixed;
+  bottom: 0;
+  background-color: #846b66;
+  width: 100vw;
+  height: 13vh;
+}
+
+.KimChunsamWrapper {
+  position: fixed;
+  top: 19vh;
+  left: 26vw;
+  z-index: -1;
+  display: flex;
+  pointer-events: auto;
+}
+
+.KimChunsam {
+  height: 63vh;
+  object-fit: contain; /* 이미지 비율 유지 */
+}
+
 .Guns {
   position: fixed;
   top: 73vh;
@@ -78,5 +97,26 @@
   top: 80vh;
   left: 8vw;
   height: 28vh;
-  z-index: -1;
+}
+
+.Banner {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 30vh;
+  left: 50vw;
+  transform: translate(-50%, -50%);
+  background-color: #c1a693;
+  color: white;
+  font: Noto Sans KR;
+  font-size: 1.5vw;
+  font-weight: bold;
+  z-index: 100;
+  border-radius: 1vw;
+  text-align: center;
+  width: 30vw;
+  height: 9vh;
+  box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.2);
+  transition: border 0.3s ease;
 }
diff --git a/client/src/pages/Stage4Room2.js b/client/src/pages/Stage4Room2.js
@@ -17,6 +17,7 @@ import dokdoPuzzle4 from '../assets/dokdoPuzzle4.png';
 function Stage4Room2() {
   const { addItem } = useInventory2();
   const [items, setItems] = useState([]);
+  const [banner, setBanner] = useState('');
   const { user, fetchUser } = useUser();
   const navigate = useNavigate();
 
@@ -87,6 +88,8 @@ function Stage4Room2() {
       }
     } catch (error) {
       console.log('드래그 앤 드랍 미션 오류', error);
+      setBanner('이미 클리어 된 스테이지입니다.');
+      setTimeout(() => setBanner(''), 1000);
     }
   };
 
@@ -98,8 +101,21 @@ function Stage4Room2() {
 
   return (
     <div className={styles.Stage4Bg}>
-      <div className={styles.TopBar}>박환영을 죽일 수 있는 독이 든 음식을 선택하라</div>
+      <div className={styles.TopBarBg}>
+        <div className={styles.TopBar}>박환영을 죽일 수 있는 독이 든 음식을 선택하라</div>
+        {/* 하트 표시 */}
+        <div className={styles.Heart}>
+          {hearts > 0 && (
+            <>
+              {Array.from({ length: hearts }, (_, i) => (
+                <img key={i} src={Heart} alt="Heart" />
+              ))}
+            </>
+          )}
+        </div>
+      </div>
       <Inventory />
+      <div className={styles.Stage4Floor} />
 
       {/* 독도 퍼즐 조각 이미지 */}
       {isDokdoPuzzleVisible && (
@@ -111,13 +127,6 @@ function Stage4Room2() {
         />
       )}
 
-      {/* 하트 표시 */}
-      <div className={styles.Heart}>
-        {Array.from({ length: hearts }, (_, i) => (
-          <img key={i} src={Heart} alt="Heart" />
-        ))}
-      </div>
-
       {/* 박완영 이미지 (드롭 영역) */}
       <div
         className={styles.ParkHwanyoungWrapper}
@@ -131,14 +140,19 @@ function Stage4Room2() {
           onDragStart={(e) => e.preventDefault()}
         />
       </div>
-
+      <img className={styles.Table} src={Table} alt="Table" />
       {/* 음식 이미지들 (드래그 가능) */}
       <div className={styles.Food}>
         <img draggable="true" onDragStart={handleDragStart('correctfood')} src={Bibimbap} alt="Bibimbap" />
         <img draggable="true" onDragStart={handleDragStart('wrongfood1')} src={Hallabong} alt="Hallabong" />
         <img draggable="true" onDragStart={handleDragStart('wrongfood2')} src={Eomuk} alt="Eomuk" />
       </div>
-      <img className={styles.Table} src={Table} alt="Table" />
+
+      {banner && (
+        <div className={styles.Banner}>
+          <p>{banner}</p>
+        </div>
+      )}
     </div>
   );
 }