Merge pull request #33 from SWF2023-HongikIngan/feature/detail

Feature/detail
SWF2023-HongikIngan · Aug 1, 2023 · a0383a8 · a0383a8
2 parents 05c4533 + 853f96e
commit a0383a8
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 26 deletions.
diff --git a/packages/nextjs/next.config.js b/packages/nextjs/next.config.js
@@ -9,6 +9,14 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: process.env.NEXT_PUBLIC_IGNORE_BUILD_ERROR === "true",
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "bafybeifymhdsrm624idcn3zafq7c4qdppc5mhes2o62ygzc2kzfy7mkgqm.ipfs.nftstorage.link",
+      },
+    ],
+  },
 };
 
 module.exports = nextConfig;
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -36,6 +36,7 @@
     "react-dropzone": "^14.2.3",
     "react-fast-marquee": "^1.3.5",
     "react-hot-toast": "^2.4.0",
+    "swiper": "^10.1.0",
     "use-debounce": "^8.0.4",
     "usehooks-ts": "^2.7.2",
     "viem": "1.2.1",

diff --git a/packages/nextjs/pages/_app.tsx b/packages/nextjs/pages/_app.tsx
@@ -6,6 +6,7 @@ import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowki
 import "@rainbow-me/rainbowkit/styles.css";
 import "mapbox-gl/dist/mapbox-gl.css";
 import NextNProgress from "nextjs-progressbar";
+import "swiper/css";
 import { useDarkMode } from "usehooks-ts";
 import { WagmiConfig } from "wagmi";
 import Appbar from "~~/components/Appbar";

diff --git a/packages/nextjs/pages/report/[id].tsx b/packages/nextjs/pages/report/[id].tsx
@@ -1,8 +1,9 @@
 import { useEffect, useState } from "react";
+import Image from "next/image";
 import { useRouter } from "next/router";
-import { css } from "@emotion/react";
+import { css, keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Box, ImageList, ImageListItem } from "@mui/material";
+import { Swiper, SwiperSlide } from "swiper/react";
 import Writer from "~~/components/Writer";
 import { useScaffoldContractRead } from "~~/hooks/scaffold-eth";
 
@@ -113,29 +114,33 @@ const DetailPage = () => {
       </FactBox>
 
       <BadgeWrapper>
-        <BadgeTitle>받은 뱃지 ✨</BadgeTitle>
-        <Box
-          sx={{
-            width: "100%",
-            height: 250, // set an appropriate height as per your requirements
-            overflowY: "auto",
-            display: "flex",
-          }}
-        >
-          <ImageList variant="masonry" sx={{ width: 375 }}>
-            {badges &&
-              badges.map(item => (
-                <ImageListItem key={Number(item)}>
-                  <img
-                    src={`https://bafybeibvb4l7i4noyonbsgau6tohlcmgms35sv2jf5ypvdbwa723hea45e.ipfs.nftstorage.link/${Number(
-                      item,
-                    )}.png`}
-                    loading="lazy"
-                  />
-                </ImageListItem>
-              ))}
-          </ImageList>
-        </Box>
+        <Title>받은 뱃지 ✨</Title>
+        <Swiper spaceBetween={10} slidesPerView={"auto"}>
+          {badges &&
+            badges.map((item, index) => {
+              return (
+                <SwiperSlide key={index} style={{ width: 108, padding: "20px 0 10px" }}>
+                  <Badge delay={index / 3}>
+                    <Image
+                      src={`https://bafybeifymhdsrm624idcn3zafq7c4qdppc5mhes2o62ygzc2kzfy7mkgqm.ipfs.nftstorage.link/${Number(
+                        item,
+                      )}.png`}
+                      width={107}
+                      height={107}
+                      alt="badge"
+                    />
+                    <BadgeTitle>
+                      {
+                        ["침수/홍부 제보자", "사실이에요", "첫 제보자", "접수된 제보", "라이프 세이버"][
+                          Number(item) - 1
+                        ]
+                      }
+                    </BadgeTitle>
+                  </Badge>
+                </SwiperSlide>
+              );
+            })}
+        </Swiper>
       </BadgeWrapper>
     </DetailWrapper>
   );
@@ -276,7 +281,32 @@ const BadgeWrapper = styled.div`
   padding-top: 20px;
 `;
 
-const BadgeTitle = styled.div`
+const Title = styled.div`
   font-size: 16px;
   font-weight: 700;
+  margin-bottom: 15px;
+`;
+
+const BadgeTitle = styled.div`
+  text-align: center;
+  font-size: 12px;
+  font-weight: 400;
+  margin-top: 3px;
+`;
+
+const floatAnimation = keyframes`
+  0% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+  100% { transform: translateY(0); }
+`;
+
+const Badge = styled.div<{ delay: number }>`
+  width: 108px;
+  height: 138px;
+  border-radius: 10px;
+  border: 1px solid var(--light-action-focus-12-p, rgba(0, 0, 0, 0.12));
+  background: #fff;
+  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
+  animation: ${floatAnimation} 2s infinite ease-in-out;
+  animation-delay: ${props => props.delay}s;
 `;
diff --git a/yarn.lock b/yarn.lock
@@ -2397,6 +2397,7 @@ __metadata:
     react-dropzone: ^14.2.3
     react-fast-marquee: ^1.3.5
     react-hot-toast: ^2.4.0
+    swiper: ^10.1.0
     tailwindcss: ^3.1.8
     typescript: ^4.9.5
     use-debounce: ^8.0.4
@@ -14486,6 +14487,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"swiper@npm:^10.1.0":
+  version: 10.1.0
+  resolution: "swiper@npm:10.1.0"
+  checksum: cb825a513e029cb4daf5ddce4c4fa2df425a348f05e78529f574e8a0e74c6016ae567efabac3d219828cd81ceeaff1563c832633ae014100d8a0610b3e4b3790
+  languageName: node
+  linkType: hard
+
 "sync-request@npm:^6.0.0":
   version: 6.1.0
   resolution: "sync-request@npm:6.1.0"