feature/complete: complete 화면

dust를 모두 잡았을 때 컴플리트 창 띄우기 #15
Soongsil-University-MakeUs-Challenge · Sep 28, 2022 · 45732fd · 45732fd
1 parent 567935d
commit 45732fd
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 2 deletions.
diff --git a/pages/map/index.js b/pages/map/index.js
@@ -9,16 +9,32 @@ export default function Map() {
   const router = useRouter();
   const [dusts, setDusts] = useState([]);
 
-  //API호출 (getDustAPI)
+  const [isCatchSuccess, setIsCatchSuccess] = useState(false);
+
+  let count = 0;
+  const onCatchChange = () => {
+    setIsCatchSuccess((prev) => !prev);
+  };
+
   const getDustsAPI = async () => {
     const response = await getDusts("SSU");
-    console.log(response);
 
     if (response.status == 200) {
       if (response.data.code == 200) {
         setDusts(response.data.result.dustInfo);
       }
     }
+
+    console.log(response);
+    for (let i = 0; i < 5; i++) {
+      if (response.data.result.dustInfo[i].caught == true) {
+        count++;
+      }
+    }
+    if (count == 5) {
+      onCatchChange();
+      console.log(count);
+    }
   };
 
   const startTimerAPI = async () => {
@@ -49,6 +65,13 @@ export default function Map() {
 
   return (
     <>
+      {isCatchSuccess && (
+        <div className={styles.complete}>
+          미션
+          <br />
+          컴플릿뜨
+        </div>
+      )}
       <KakaoAPIMap dusts={dusts} />
 
       <div className={styles.stardust_container}>

diff --git a/styles/Map.module.css b/styles/Map.module.css
@@ -1,3 +1,20 @@
+.complete {
+  font-family: "NeoDunggeunmo";
+  font-size: 30px;
+  z-index: 3;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  color: #ffffff;
+  background: rgba(45, 45, 45, 0.3);
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .map {
   min-height: 100vh;
   max-width: 100vh;