From 45732fd190da8d2286f66cf6b1ea4921554d6019 Mon Sep 17 00:00:00 2001
From: hongSso <soyunsarang@naver.com>
Date: Wed, 28 Sep 2022 13:44:26 +0900
Subject: [PATCH] =?UTF-8?q?feature/complete:=20complete=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20dust=EB=A5=BC=20=EB=AA=A8=EB=91=90=20=EC=9E=A1?=
 =?UTF-8?q?=EC=95=98=EC=9D=84=20=EB=95=8C=20=EC=BB=B4=ED=94=8C=EB=A6=AC?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B0=BD=20=EB=9D=84=EC=9A=B0=EA=B8=B0=20#15?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/map/index.js    | 27 +++++++++++++++++++++++++--
 styles/Map.module.css | 17 +++++++++++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/pages/map/index.js b/pages/map/index.js
index 87a6349..b15c84a 100644
--- 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
index 03f15d5..b6dcd3b 100644
--- 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;