Feature/#8

src/components/display/Guest.styled.ts

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+export const Card = styled.div`
+    width: 290px;
+    height: 100%;
+    border-radius: 25px;
+    box-shadow: 4px 4px 5px rgba(0, 0, 0, 25%);
+    position: relative;
+    overflow: hidden;
+    scroll-snap-align: center;
+    flex-shrink: 0;
+    span {
+        position: absolute;
+        bottom: 10px;
+        left: 20px;
+        z-index: 9;
+    }
+`;
+
+export const Picture = styled.img`
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: 50% 50%;
+`;

src/components/display/Guest.tsx

@@ -0,0 +1,19 @@
+import { Text } from "@/components/typography/Text";
+
+import { Card, Picture } from "./Guest.styled";
+
+export interface IGuest {
+    pic: string;
+    name: string;
+}
+
+export const Guest: React.FC<IGuest> = ({ name, pic }) => {
+    return (
+        <Card>
+            <Picture src={pic} alt={name} />
+            <Text size="36px" weight="bold" variant="white">
+                {name}
+            </Text>
+        </Card>
+    );
+};

src/components/display/ShowData.tsx

@@ -0,0 +1,24 @@
+import { Paragraph } from "../typography/Paragraph";
+import { ShowDateContainer, ShowDateLink } from "./ShowDate.styled";
+
+interface IShowDate {
+    date: string;
+    day: string;
+    active: boolean;
+    onClick: () => void;
+}
+export const ShowDate: React.FC<IShowDate> = ({ date, day, active, onClick }) => {
+    const variant = active ? "#5D5A88" : "#adabc3";
+    return (
+        <ShowDateContainer>
+            <ShowDateLink href="#" onClick={onClick}>
+                <Paragraph size="40px" weight="bold" variant={variant}>
+                    {date}
+                </Paragraph>
+                <Paragraph size="20px" weight="bold" variant={variant}>
+                    {day}
+                </Paragraph>
+            </ShowDateLink>
+        </ShowDateContainer>
+    );
+};

src/components/display/ShowDate.styled.ts

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const ShowDateContainer = styled.div`
+    justify-content: space-between;
+`;
+
+export const ShowDateLink = styled.a`
+    text-decoration: none;
+    text-align: center;
+    p {
+        margin: 0;
+        line-height: 22px;
+    }
+`;

src/components/layout/MainLayout.tsx

@@ -8,6 +8,7 @@ import Footer from "./Footer";
 export const Main = styled.main`
     width: min(100%, 700px);
     margin: 0px auto;
+    padding-top: 81px;
 `;
 
 export const MainLayout = () => {

src/components/typography/Paragraph.tsx

@@ -4,10 +4,10 @@ export interface IParagraph extends IText {
     children: React.ReactNode;
 }
 
-export const Paragraph: React.FC<IParagraph> = ({ size, weight, children }) => {
+export const Paragraph: React.FC<IParagraph> = ({ size, weight, variant, children }) => {
     return (
         <p>
-            <Text size={size} weight={weight}>
+            <Text size={size} weight={weight} variant={variant}>
                 {children}
             </Text>
         </p>

src/pages/BoothListPage.styled.tsx

@@ -24,7 +24,4 @@ export const VisibleList = styled(motion.ul)`
     padding: 40px;
     width: 90%;
     list-style: none;
-
-    motion.IBooth {
-    }
 `;

src/pages/SpecialGuestPage.styled.tsx

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+export const MainContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+    p {
+        text-shadow: 0px 4px 4px rgba(0, 0, 0, 25%);
+    }
+`;
+export const GuestContainer = styled.div`
+    width: 100%;
+    margin-top: 50px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    p {
+        text-shadow: none;
+    }
+`;
+export const Date = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 33px;
+`;
+
+export const GuestCard = styled.div`
+    height: 360px;
+    display: flex;
+    flex-direction: row;
+    gap: 25px;
+    padding: 0 50px;
+    margin-top: 10px;
+    overflow: hidden;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+`;

src/pages/SpecialGuestPage.tsx

@@ -1,3 +1,79 @@
-export default function SpecialGuestPage() {
-    return <></>;
-}
+import React, { useState } from "react";
+import { BiSolidMap } from "react-icons/bi";
+
+import { Guest } from "@/components/display/Guest";
+import { ShowDate } from "@/components/display/ShowData";
+import { Paragraph } from "@/components/typography/Paragraph";
+import { Text } from "@/components/typography/Text";
+
+import { MainContent, GuestCard, GuestContainer, Date } from "./SpecialGuestPage.styled";
+
+const SpecialGuestPage: React.FC = () => {
+    const [activeDate, setActiveDate] = useState<string>("5.22");
+
+    const handleDateClick = (date: string) => {
+        setActiveDate(date);
+    };
+    interface GuestData {
+        [key: string]: { pic: string; name: string }[];
+    }
+
+    const guestData: GuestData = {
+        "5.21": [
+            { pic: "./src/assets/jannavi.jpg", name: "잔나비" },
+            { pic: "./src/assets/norazo.jpg", name: "노라조" },
+            { pic: "./src/assets/soranband.webp", name: "소란밴드" },
+        ],
+        "5.22": [
+            { pic: "./src/assets/qwer.webp", name: "QWER" },
+            { pic: "./src/assets/10cm.jpg", name: "10CM" },
+            { pic: "./src/assets/haha.webp", name: "하하" },
+        ],
+        "5.23": [
+            { pic: "./src/assets/paulblanco.avif", name: "Paul Balnco" },
+            { pic: "./src/assets/loykim.webp", name: "로이킴" },
+            { pic: "./src/assets/bigmama.webp", name: "빅마마" },
+        ],
+    };
+    const renderGuests = () => {
+        return guestData[activeDate].map((guest) => <Guest pic={guest.pic} name={guest.name} />);
+    };
+
+    return (
+        <MainContent>
+            <Paragraph size="44px" weight="bold" variant="darkpurple">
+                SPECIAL GUEST
+            </Paragraph>
+            <GuestContainer>
+                <Date>
+                    <ShowDate
+                        date="5.21"
+                        day="TUE"
+                        active={activeDate === "5.21"}
+                        onClick={() => handleDateClick("5.21")}
+                    />
+                    <ShowDate
+                        date="5.22"
+                        day="WED"
+                        active={activeDate === "5.22"}
+                        onClick={() => handleDateClick("5.22")}
+                    />
+                    <ShowDate
+                        date="5.23"
+                        day="THU"
+                        active={activeDate === "5.23"}
+                        onClick={() => handleDateClick("5.23")}
+                    />
+                </Date>
+                <div>
+                    <BiSolidMap size={18} color="#5d5a88" />
+                    <Text size="m" weight="bold" variant="darkpurple">
+                        1주차장
+                    </Text>
+                </div>
+                <GuestCard>{renderGuests()}</GuestCard>
+            </GuestContainer>
+        </MainContent>
+    );
+};
+export default SpecialGuestPage;