feat(css): 배지 스타일 추가

SWF2023-HongikIngan · Aug 1, 2023 · fe12f03 · fe12f03
1 parent ae15934
commit fe12f03
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 19 deletions.
diff --git a/packages/nextjs/components/BadgeModal.tsx b/packages/nextjs/components/BadgeModal.tsx
@@ -1,7 +1,31 @@
 import { useState } from "react";
 import Image from "next/image";
+import { keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
 
+// keyframes를 사용해 회전 및 확대 애니메이션을 정의합니다.
+const appear = keyframes`
+  0% {
+    transform: scale(0) rotate(0deg);
+    opacity: 0;
+  }
+  70% {
+    transform: scale(1) rotate(1800deg);
+    opacity: 1;
+  }
+  75% {
+    transform: scale(1) rotate(1800deg);
+    opacity: 1;
+  }
+  90% {
+    transform: scale(1.2) rotate(1800deg);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1) rotate(1800deg);
+  }
+`;
+
 export default function BadgeModal({ clickedBadge, setClickedBadge }: any) {
   const [isLoading, setIsLoading] = useState(true);
 
@@ -20,7 +44,7 @@ export default function BadgeModal({ clickedBadge, setClickedBadge }: any) {
           }}
         />
         <BadgeTitle>
-          {["침수/홍부 제보자", "사실이에요", "첫 제보자", "접수된 제보", "라이프 세이버"][Number(clickedBadge) - 1]}
+          {["침수/홍수 제보자", "사실이에요", "첫 제보자", "접수된 제보", "라이프 세이버"][Number(clickedBadge) - 1]}
         </BadgeTitle>
       </ImageWrapper>
     </ModalWrapper>
@@ -52,7 +76,9 @@ const ImageWrapper = styled.div`
   border-radius: 30px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 
-  animation: float 2s ease-in-out infinite;
+  animation: ${appear} 1s ease-out forwards;
+
+  /* animation: float 2s ease-in-out infinite;
 
   @keyframes float {
     0%,
@@ -62,20 +88,6 @@ const ImageWrapper = styled.div`
     50% {
       transform: translateY(-30px);
     }
-  }
-
-  /* animation: flip 4s linear infinite;
-
-  @keyframes flip {
-    0% {
-      transform: rotateY(0);
-    }
-    50% {
-      transform: rotateY(180deg);
-    }
-    100% {
-      transform: rotateY(360deg);
-    }
   } */
 `;
 

diff --git a/packages/nextjs/components/Map.tsx b/packages/nextjs/components/Map.tsx
@@ -148,9 +148,7 @@ const Map: NextPage = () => {
       zoom: 11,
     });
 
-    console.log("1");
     map.current.on("load", () => {
-      console.log("2");
       map.current.addSource("information", {
         type: "geojson",
         data: {

diff --git a/packages/nextjs/pages/report/[id].tsx b/packages/nextjs/pages/report/[id].tsx
@@ -152,7 +152,7 @@ const DetailPage = () => {
                     />
                     <BadgeTitle>
                       {
-                        ["침수/홍부 제보자", "사실이에요", "첫 제보자", "접수된 제보", "라이프 세이버"][
+                        ["침수/홍수 제보자", "사실이에요", "첫 제보자", "접수된 제보", "라이프 세이버"][
                           Number(item) - 1
                         ]
                       }