Merge pull request #21 from LikeLion-KNU/feature/#10

Feature/#10 맵 컴포넌트 구현

package.json

@@ -23,6 +23,7 @@
         "react-dom": "^18.2.0",
         "react-icons": "^5.2.0",
         "react-redux": "^9.1.2",
+        "react-zoom-pan-pinch": "^3.4.4",
         "react-router-dom": "^6.23.1",
         "styled-components": "^6.1.8",
         "vite-plugin-html": "^3.2.2",

src/App.tsx

@@ -4,13 +4,13 @@ import { Route, Routes } from "react-router-dom";
 
 import { MainLayout } from "@/components/layout/MainLayout";
 
+import BoothDetailPage from "@/pages/BoothDetailPage";
+import BoothListPage from "@/pages/BoothListPage";
+import ContributorPage from "@/pages/ContributorPage";
 import HomePage from "@/pages/HomePage";
+import SpecialGuestPage from "@/pages/SpecialGuestPage";
+import TimeTablePage from "@/pages/TimeTablePage";
 
-import BoothDetailPage from "./pages/BoothDetailPage";
-import BoothListPage from "./pages/BoothListPage";
-import ContributorPage from "./pages/ContributorPage";
-import SpecialGuestPage from "./pages/SpecialGuestPage";
-import TimeTablePage from "./pages/TimeTablePage";
 import { GlobalStyle } from "./styles/globals";
 import { store } from "@/store/store";
 

src/components/display/Booth.styled.ts

@@ -1,37 +1,44 @@
 import { motion } from "framer-motion";
 import styled from "styled-components";
 
-export const BoothList = styled(motion.li)`
-    height: 40px;
-    padding: 20px 25px;
+export const BoothListItem = styled(motion.li)`
+    height: 70px;
+    padding: 0px 25px;
     margin: 12px 0;
     border-radius: 25px;
     background-color: #e9e9fb;
-    align-content: center;
 `;
 
 export const BoothLink = styled.a`
-    position: relative;
-    text-decoration: none;
+    width: 100%;
+    height: 100%;
+
     display: flex;
+    justify-content: space-between;
     align-items: center;
 
+    text-decoration: none;
+
     span {
-        position: absolute;
-        left: 50px;
+        display: flex;
+        align-items: center;
+
+        width: 100%;
+
+        padding-left: 20px;
     }
 `;
 
 export const Index = styled.div`
-    position: absolute;
-    left: 0;
+    flex-shrink: 0;
+
     width: 30px;
     height: 30px;
     border-radius: 10px;
-    align-content: center;
-    text-align: center;
-    font-weight: bolder;
-    font-size: 20px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     color: #fff;
     background-color: #9874ff;

src/components/display/Booth.tsx

@@ -2,7 +2,7 @@ import { Variants } from "framer-motion";
 
 import { Text } from "@/components/typography/Text";
 
-import { BoothList, BoothLink, Index } from "./Booth.styled";
+import { BoothLink, Index, BoothListItem } from "./Booth.styled";
 import { Heart } from "./Heart";
 
 interface IBooth {
@@ -18,14 +18,14 @@ const itemVariants: Variants = {
 
 export const Booth: React.FC<IBooth> = ({ index, name, num, likable }) => {
     return (
-        <BoothList variants={itemVariants}>
+        <BoothListItem variants={itemVariants}>
             <BoothLink href={`booth/${index + 1}`}>
                 <Index>{index + 1}</Index>
                 <Text size="m" weight="bold" variant="#5D5A88">
                     {name}
                 </Text>
                 <Heart num={num} likable={likable} />
             </BoothLink>
-        </BoothList>
+        </BoothListItem>
     );
 };

src/components/display/Heart.styled.ts

@@ -4,8 +4,6 @@ interface IHeart {
     likable: boolean;
 }
 export const HeartWrapper = styled.div<IHeart>`
-    position: absolute;
-    right: 0;
     width: 40px;
     height: 40px;
     border-radius: 50%;