Merge branch 'dev' into feature/#7

src/components/display/ButtonList.styled.ts

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+export const ButtonListContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    padding: 1.5rem;
+
+    border: 1px solid #d4d2e3;
+    border-radius: 24px;
+
+    button {
+    }
+
+    button > div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+`;

src/components/display/ButtonList.tsx

@@ -0,0 +1,60 @@
+import { FaRegBell } from "react-icons/fa";
+import { GoPeople } from "react-icons/go";
+import { IoMapOutline } from "react-icons/io5";
+import { LuCalendarDays } from "react-icons/lu";
+import { PiMicrophoneStage } from "react-icons/pi";
+import { useNavigate } from "react-router-dom";
+
+import { Button } from "@/components/forms/Button";
+import { Text } from "@/components/typography/Text";
+
+import { ButtonListContainer } from "./ButtonList.styled";
+
+export const ButtonList = () => {
+    const navigate = useNavigate();
+
+    return (
+        <ButtonListContainer>
+            <Button width="auto" variant="purple" onClick={() => navigate("/booth")}>
+                <div>
+                    <IoMapOutline size={22} style={{ marginRight: "10px" }} />
+                    <Text size="m" weight="bold" variant="white">
+                        부스 별 지도
+                    </Text>
+                </div>
+            </Button>
+            <Button width="auto" variant="purple" onClick={() => navigate("/guests")}>
+                <div>
+                    <PiMicrophoneStage size={22} style={{ marginRight: "10px" }} />
+                    <Text size="m" weight="bold" variant="white">
+                        Special Guest
+                    </Text>
+                </div>
+            </Button>
+            <Button width="auto" variant="purple" onClick={() => navigate("/timetable")}>
+                <div>
+                    <LuCalendarDays size={22} style={{ marginRight: "10px" }} />
+                    <Text size="m" weight="bold" variant="white">
+                        이벤트 일정
+                    </Text>
+                </div>
+            </Button>
+            <Button width="auto" variant="purple" onClick={() => navigate("/contributors")}>
+                <div>
+                    <GoPeople size={22} style={{ marginRight: "10px" }} />
+                    <Text size="m" weight="bold" variant="white">
+                        만든이들
+                    </Text>
+                </div>
+            </Button>
+            <Button width="auto" variant="red" onClick={() => window.open("https://instagram.com/knu_ch", "_blank")}>
+                <div>
+                    <FaRegBell size={22} style={{ marginRight: "10px" }} />
+                    <Text size="m" weight="bold" variant="white">
+                        총학 Hotline
+                    </Text>
+                </div>
+            </Button>
+        </ButtonListContainer>
+    );
+};

src/components/display/Countdown.styled.ts

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const CountdownContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    font-family: "MesloLGS NF Bold", monospace;
+    font-size: 2rem;
+    color: #333;
+    text-align: center;
+    padding: 30px 60px;
+
+    span {
+        margin-bottom: 1rem;
+    }
+
+    border: 1px solid #d4d2e3;
+    border-radius: 24px;
+`;

src/components/display/Countdown.tsx

@@ -0,0 +1,40 @@
+import { Text } from "@/components/typography/Text";
+
+import { useCountdown } from "@/hooks/useCountdown";
+
+import { CountdownContainer } from "./Countdown.styled";
+
+interface ICountdown {
+    targetDate: Date;
+}
+
+export const Countdown: React.FC<ICountdown> = ({ targetDate }) => {
+    const displayTime = useCountdown(targetDate);
+
+    const dateOptions: Intl.DateTimeFormatOptions = {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+    };
+    const timeOptions: Intl.DateTimeFormatOptions = {
+        hour: "2-digit",
+        minute: "2-digit",
+
+        hour12: false,
+    };
+
+    return (
+        <CountdownContainer>
+            <Text size="l" weight="bold" variant="darkpurple">
+                축제까지 남은 시간
+            </Text>
+            <Text size="xl" weight="bold" variant="lightpurple">
+                {displayTime}
+            </Text>
+            <Text size="m" weight="normal" variant="darkpurple">
+                UTC+9 | {targetDate.toLocaleDateString("ko-KR", dateOptions)}{" "}
+                {targetDate.toLocaleTimeString("en-US", timeOptions)}
+            </Text>
+        </CountdownContainer>
+    );
+};

src/components/forms/Button.tsx

@@ -13,6 +13,7 @@ export const Button = styled.button<IButton>`
 
     border: none;
     border-radius: 40px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 
     color: #fff;
     background-color: ${(props) => {

src/components/layout/Footer.styled.ts

@@ -1,13 +1,30 @@
 import styled from "styled-components";
 
 export const FooterContainer = styled.footer`
-    background-color: #b0b0b0;
-    color: white;
     text-align: center;
-    width: 100%;
-    padding: 0;
-    font-size: 0.75rem;
-    border-radius: 10px 10px 0 0;
+    padding: 20px 0;
 
-    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+    bottom: 0;
+`;
+
+export const TopBorder = styled.div`
+    height: 1px;
+    background-color: #d0d0d0;
+    width: 70%;
+    margin: 0 auto 20px;
+`;
+
+export const Logo = styled.img`
+    width: 100px;
+    height: auto;
+`;
+
+export const EventName = styled.h3`
+    margin: 30px 0;
+`;
+
+export const LegalLinks = styled.div``;
+
+export const LegalText = styled.p`
+    margin: 0 0 10px 0;
 `;

src/components/layout/Footer.tsx

@@ -1,11 +1,44 @@
 import React from "react";
 
-import { FooterContainer } from "@/components/layout/Footer.styled";
+import { FooterContainer, Logo, EventName, LegalLinks, TopBorder, LegalText } from "@/components/layout/Footer.styled";
+import { Text } from "@/components/typography/Text";
+
+import logo from "@/assets/hapuruna.png";
 
 const Footer: React.FC = () => {
     return (
         <FooterContainer>
-            <p>© 2024 LikeLion KNU. All rights reserved.</p>
+            <TopBorder />
+            <Logo src={logo} alt="Event Logo" />
+            <EventName>
+                <Text size="l" weight="normal" variant="purple">
+                    2024 경북대학교 대동제
+                </Text>
+            </EventName>
+            <LegalLinks>
+                <LegalText>
+                    <Text size="s" weight="normal" variant="lightpurple">
+                        © 2024 LikeLion
+                    </Text>
+                    <Text size="xs" weight="normal" variant="purple">
+                        &nbsp;|&nbsp;
+                    </Text>
+                    <Text size="s" weight="normal" variant="lightpurple">
+                        All Rights Reserved
+                    </Text>
+                </LegalText>
+                <LegalText>
+                    <Text size="xs" weight="normal" variant="lightpurple">
+                        Terms and Conditions
+                    </Text>
+                    <Text size="xs" weight="normal" variant="purple">
+                        &nbsp;|&nbsp;
+                    </Text>
+                    <Text size="xs" weight="normal" variant="lightpurple">
+                        Privacy Policy
+                    </Text>
+                </LegalText>
+            </LegalLinks>
         </FooterContainer>
     );
 };

src/components/navigation/Navigation.tsx

@@ -44,13 +44,13 @@ const Navigation: React.FC = () => {
             </NavHeader>
             <motion.ul initial="closed" animate={show ? "open" : "closed"} variants={listVariants}>
                 <NavItem variants={itemVariants}>
-                    <NavLink href="#">공지사항</NavLink>
+                    <NavLink href="#">부스 별 지도</NavLink>
                 </NavItem>
                 <NavItem variants={itemVariants}>
-                    <NavLink href="#">공연 타임테이블</NavLink>
+                    <NavLink href="#">Special Guest</NavLink>
                 </NavItem>
                 <NavItem variants={itemVariants}>
-                    <NavLink href="#">부스 정보</NavLink>
+                    <NavLink href="#">이벤트 일정</NavLink>
                 </NavItem>
                 <NavItem variants={itemVariants}>
                     <NavLink href="#">만든이들</NavLink>

src/hooks/useCountdown.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect } from "react";
+
+const formatTime = (time: number): string => {
+    return time < 10 ? `0${time}` : time.toString();
+};
+
+const calculateTimeLeft = (targetDate: Date) => {
+    const difference = +targetDate - +new Date();
+    let timeLeft: Record<string, number> = {};
+
+    if (difference > 0) {
+        timeLeft = {
+            days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+            hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+            minutes: Math.floor((difference / 1000 / 60) % 60),
+            seconds: Math.floor((difference / 1000) % 60),
+        };
+    }
+
+    return timeLeft;
+};
+
+export const useCountdown = (targetDate: Date) => {
+    const [timeLeft, setTimeLeft] = useState<Record<string, number>>(calculateTimeLeft(targetDate));
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setTimeLeft(calculateTimeLeft(targetDate));
+        }, 1000);
+
+        return () => clearTimeout(timer);
+    });
+
+    const formattedTime = `${formatTime(timeLeft.days * 24 + timeLeft.hours)}:${formatTime(timeLeft.minutes)}:${formatTime(timeLeft.seconds)}`;
+    return formattedTime;
+};

src/pages/HomePage.styled.ts

@@ -2,7 +2,6 @@ import styled from "styled-components";
 
 export const PageContainer = styled.div`
     width: 100%;
-    min-height: 100vh;
     background-color: white;
     display: flex;
     flex-direction: column;
@@ -19,8 +18,29 @@ export const MainContent = styled.div`
     position: relative;
 `;
 
-export const StyledImage = styled.img`
+export const StyledImage = styled.div`
+    position: relative;
     width: 100%;
-    height: 100%;
-    object-fit: cover;
+    height: auto;
+
+    img {
+        width: 100%;
+        height: auto;
+    }
+
+    button {
+        position: absolute;
+        top: 85%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+`;
+
+export const ElementContainer = styled.div`
+    width: 450px;
+    margin: 2rem;
+
+    div {
+        margin: 1rem 0;
+    }
 `;

src/pages/HomePage.tsx

@@ -1,19 +1,49 @@
-import React from "react";
+import React, { useRef } from "react";
 
-import { Pagination } from "@/components/navigation/Pagination";
+import { ButtonList } from "@/components/display/ButtonList";
+import { Countdown } from "@/components/display/Countdown";
+import { Button } from "@/components/forms/Button";
+import { Text } from "@/components/typography/Text";
 
-import { PageContainer, MainContent, StyledImage } from "@/pages/HomePage.styled";
+import { PageContainer, MainContent, StyledImage, ElementContainer } from "@/pages/HomePage.styled";
 
 import mainPageImage from "@/assets/main_page.jpg";
 
 const HomePage: React.FC = () => {
+    const quickAccessRef = useRef<HTMLDivElement>(null);
+
+    const scrollToQuickAccess = () => {
+        quickAccessRef.current?.scrollIntoView({ behavior: "smooth" });
+    };
+
     return (
         <PageContainer>
             <MainContent>
-                <StyledImage src={mainPageImage} alt="Main Page" />
-            </MainContent>
+                <StyledImage>
+                    <img src={mainPageImage} alt="Main Page" />
+                    <Button width="200px" variant="navy" onClick={scrollToQuickAccess}>
+                        <Text size="m" weight="bold" variant="white">
+                            시작하기
+                        </Text>
+                    </Button>
+                </StyledImage>
 
-            <Pagination />
+                {/* 카운트다운 */}
+                <ElementContainer>
+                    <Text size="l" weight="bold" variant="darkpurple">
+                        대동제가 곧 시작됩니다
+                    </Text>
+                    <Countdown targetDate={new Date("2024-05-21T00:00:00")} />
+                </ElementContainer>
+
+                {/* 빠른 시작 */}
+                <ElementContainer ref={quickAccessRef}>
+                    <Text size="l" weight="bold" variant="darkpurple">
+                        축제 바로가기
+                    </Text>
+                    <ButtonList />
+                </ElementContainer>
+            </MainContent>
         </PageContainer>
     );
 };

src/styles/globals.ts

@@ -1,6 +1,11 @@
 import { createGlobalStyle } from "styled-components";
 
 export const GlobalStyle = createGlobalStyle`
+  @font-face {
+    font-family: "MesloLGS NF Bold";
+    src: url("./assets/MesloLGS-NF-Bold.ttf") format("truetype");
+  }
+
   body {
     margin: 0;
     padding: 0;