feat(badge): 배지 상세 구현

packages/nextjs/components/BadgeModal.tsx

@@ -0,0 +1,75 @@
+import { useState } from "react";
+import Image from "next/image";
+import styled from "@emotion/styled";
+
+export default function BadgeModal({ clickedBadge, setClickedBadge }: any) {
+  const [isLoading, setIsLoading] = useState(true);
+
+  return (
+    <ModalWrapper onClick={() => setClickedBadge(-1)}>
+      <ImageWrapper>
+        <Image
+          src={`https://bafybeifymhdsrm624idcn3zafq7c4qdppc5mhes2o62ygzc2kzfy7mkgqm.ipfs.nftstorage.link/${Number(
+            clickedBadge,
+          )}.png`}
+          width={250}
+          height={250}
+          alt="badge"
+          onLoad={() => {
+            setIsLoading(false);
+          }}
+        />
+        <BadgeTitle>
+          {["침수/홍부 제보자", "사실이에요", "첫 제보자", "접수된 제보", "라이프 세이버"][Number(clickedBadge) - 1]}
+        </BadgeTitle>
+      </ImageWrapper>
+    </ModalWrapper>
+  );
+}
+
+const ModalWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  z-index: 9999;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  perspective: 500px;
+`;
+
+const ImageWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: white;
+  border-radius: 30px;
+
+  animation: flip 5s linear infinite;
+
+  @keyframes flip {
+    0% {
+      transform: rotateY(0);
+    }
+    50% {
+      transform: rotateY(180deg);
+    }
+    100% {
+      transform: rotateY(360deg);
+    }
+  }
+`;
+
+const BadgeTitle = styled.div`
+  text-align: center;
+  font-size: 16px;
+  font-weight: 500;
+  margin: 14px 0;
+`;

packages/nextjs/pages/report/[id].tsx

@@ -3,8 +3,9 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 import { css, keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
-import { CircularProgress, Skeleton } from "@mui/material";
+import { CircularProgress } from "@mui/material";
 import { Swiper, SwiperSlide } from "swiper/react";
+import BadgeModal from "~~/components/BadgeModal";
 import Writer from "~~/components/Writer";
 import { useScaffoldContractRead } from "~~/hooks/scaffold-eth";
 
@@ -13,6 +14,7 @@ const DetailPage = () => {
     query: { id },
   } = useRouter();
   const [isLoading, setIsLoading] = useState(true);
+  const [clickedBadge, setClickedBadge] = useState(-1);
 
   const [detailData, setDetailData] = useState({
     alertLevel: -1,
@@ -86,6 +88,7 @@ const DetailPage = () => {
   if (id === undefined) return null;
   return (
     <DetailWrapper>
+      {clickedBadge !== -1 && <BadgeModal clickedBadge={clickedBadge} setClickedBadge={setClickedBadge} />}
       {isLoading && (
         <SkeletonElement>
           <CircularProgress />
@@ -129,11 +132,16 @@ const DetailPage = () => {
       <BadgeWrapper>
         <Title>Earned Badges ✨</Title>
         <Swiper spaceBetween={10} slidesPerView={"auto"}>
-          {badges &&
+          {badges?.length > 0 ? (
             badges.map((item, index) => {
               return (
                 <SwiperSlide key={index} style={{ width: 108, padding: "20px 0 10px" }}>
-                  <Badge delay={index / 3}>
+                  <Badge
+                    delay={index / 3}
+                    onClick={() => {
+                      setClickedBadge(Number(item));
+                    }}
+                  >
                     <Image
                       src={`https://bafybeifymhdsrm624idcn3zafq7c4qdppc5mhes2o62ygzc2kzfy7mkgqm.ipfs.nftstorage.link/${Number(
                         item,
@@ -152,7 +160,10 @@ const DetailPage = () => {
                   </Badge>
                 </SwiperSlide>
               );
-            })}
+            })
+          ) : (
+            <NoBadge>Haven't earned any badges yet.</NoBadge>
+          )}
         </Swiper>
       </BadgeWrapper>
     </DetailWrapper>
@@ -333,3 +344,5 @@ const SkeletonElement = styled.div`
   align-items: center;
   justify-content: center;
 `;
+
+const NoBadge = styled.div``;