Merge pull request #12 from LikeLion-KNU/feature/#7

Feature/#7

src/components/display/Booth.styled.ts

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

src/components/display/Booth.tsx

@@ -0,0 +1,34 @@
+import { TiHeartFullOutline } from "react-icons/ti";
+
+import { Variants } from "framer-motion";
+
+import { Text } from "@/components/typography/Text";
+
+import { BoothList, BoothLink, Index, Heart } from "./Booth.styled";
+
+interface IBooth {
+    index: number;
+    name: string;
+    heart: number;
+}
+const itemVariants: Variants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: { opacity: 1, y: 0 },
+};
+
+export const Booth: React.FC<IBooth> = ({ index, name, heart }) => {
+    return (
+        <BoothList variants={itemVariants}>
+            <BoothLink href="#">
+                <Index>{index + 1}</Index>
+                <Text size="m" weight="bold" variant="#5D5A88">
+                    {name}
+                </Text>
+                <Heart>
+                    <TiHeartFullOutline size={24} />
+                    {heart}
+                </Heart>
+            </BoothLink>
+        </BoothList>
+    );
+};

src/components/typography/Text.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 export interface IText {
     size: "xs" | "s" | "m" | "l" | "xl" | string;
     weight: "bold" | "normal";
-    variant?: "darkpurple" | "purple" | "white" | "lightpurple";
+    variant?: "darkpurple" | "purple" | "white" | "lightpurple" | string;
 }
 
 export const Text = styled.span<IText>`
@@ -36,6 +36,8 @@ export const Text = styled.span<IText>`
                 return "#adabc3";
             case "white":
                 return "#ffffff";
+            default:
+                return props.variant;
         }
     }};
 `;

src/pages/BoothListPage.styled.tsx

@@ -0,0 +1,30 @@
+import { motion } from "framer-motion";
+import styled from "styled-components";
+
+export const PageContainer = styled.div`
+    width: 100%;
+    min-height: 100vh;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+`;
+
+export const MainContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    width: 100%;
+    position: relative;
+`;
+
+export const VisibleList = styled(motion.ul)`
+    padding: 40px;
+    width: 90%;
+    list-style: none;
+
+    motion.IBooth {
+    }
+`;

src/pages/BoothListPage.tsx

@@ -1,3 +1,43 @@
-export default function BoothListPage() {
-    return <></>;
-}
+import React from "react";
+
+import { Variants } from "framer-motion";
+
+import { Booth } from "@/components/display/Booth";
+import Navigation from "@/components/navigation/Navigation";
+
+// import Map from "./Map";
+import { PageContainer, MainContent, VisibleList } from "./BoothListPage.styled";
+
+const listVariants: Variants = {
+    hidden: {
+        opacity: 0,
+    },
+    visible: {
+        opacity: 1,
+        transition: {
+            when: "beforeChildren",
+            staggerChildren: 0.1,
+        },
+    },
+};
+
+const BoothListPage: React.FC = () => {
+    const lists = ["컴퓨터학부 주점이름", "전자 주점이름", "토목 주점이름", "기계 주점이름", "식품공학부 주점이름"];
+    const heart = 356;
+    //list랑 index, heart는 받아온 값으로 수정
+
+    return (
+        <PageContainer>
+            <Navigation />
+            <MainContent>
+                {/*<Map />*/}
+                <VisibleList variants={listVariants} initial="hidden" animate="visible">
+                    {lists.map((name, index) => {
+                        return <Booth index={index} name={name} heart={heart} />;
+                    })}
+                </VisibleList>
+            </MainContent>
+        </PageContainer>
+    );
+};
+export default BoothListPage;