Merge pull request #24 from LikeLion-KNU/feature/#19

타임테이블 페이지 구현

src/components/display/DateSelector.styled.ts

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+export const Date = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 33px;
+`;

src/components/display/DateSelector.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { Date } from "@/components/display/DateSelector.styled";
+import { ShowDate } from "@/components/display/ShowDate";
+
+interface DateSelectorProps {
+    activeDate: string;
+    onDateClick: (date: string) => void;
+    dates: { date: string; day: string }[];
+}
+
+const DateSelector: React.FC<DateSelectorProps> = ({ activeDate, onDateClick, dates }) => {
+    return (
+        <Date>
+            {dates.map(({ date, day }) => (
+                <ShowDate
+                    key={date}
+                    date={date}
+                    day={day}
+                    active={activeDate === date}
+                    onClick={() => onDateClick(date)}
+                />
+            ))}
+        </Date>
+    );
+};
+
+export default DateSelector;

src/components/display/ShowDate.styled.ts

@@ -10,5 +10,6 @@ export const ShowDateLink = styled.a`
     p {
         margin: 0;
         line-height: 20px;
+        font-family: "Blinker SemiBold", sans-serif;
     }
 `;

src/components/display/TimeTableSection.styled.ts

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+
+import { Text } from "@/components/typography/Text";
+
+export const TimeTableSectionWrapper = styled.div`
+    margin: 20px 0;
+    padding: 20px;
+    width: 80%;
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    color: #333;
+`;
+
+export const LocationWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+`;
+
+export const EventWrapper = styled.div<{ isCurrent: boolean }>`
+    display: flex;
+    justify-content: flex-start;
+    gap: 20px;
+    padding: 20px 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    background-color: ${({ isCurrent }) => (isCurrent ? "#e8e6ff" : "transparent")};
+
+    &:last-child {
+        border-bottom: none;
+    }
+`;
+
+export const EventTime = styled(Text)`
+    font-weight: bold;
+    font-family: "DM Sans", sans-serif;
+`;
+
+export const EventText = styled(Text)`
+    display: flex;
+    align-items: center;
+`;

src/components/display/TimeTableSection.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { BiSolidMap } from "react-icons/bi";
+
+import { Paragraph } from "@/components/typography/Paragraph";
+
+import { Text } from "../typography/Text";
+import {
+    TimeTableSectionWrapper,
+    LocationWrapper,
+    EventWrapper,
+    EventTime,
+    EventText,
+} from "./TimeTableSection.styled";
+
+interface TimeTableSectionProps {
+    title: string;
+    data: { time: string; event: string }[];
+    locationRef: React.RefObject<HTMLDivElement>;
+    currentTime: Date;
+}
+
+export const TimeTableSection: React.FC<TimeTableSectionProps> = ({ title, data, locationRef, currentTime }) => {
+    const isCurrentEvent = (eventTime: string): boolean => {
+        const [startTime, endTime] = eventTime.split(" ~ ").map((time) => new Date(`2024-05-21T${time}:00`));
+        return currentTime >= startTime && currentTime <= endTime;
+    };
+
+    return (
+        <TimeTableSectionWrapper ref={locationRef}>
+            <Paragraph size="m" weight="bold" variant="darkpurple">
+                <LocationWrapper>
+                    <BiSolidMap size={18} color="#5d5a88" />
+                    <Text size="xs" weight="bold" variant="darkpurple">
+                        {title}
+                    </Text>
+                </LocationWrapper>
+            </Paragraph>
+            {data.map((entry, index) => (
+                <EventWrapper key={index} isCurrent={isCurrentEvent(entry.time)}>
+                    <EventTime size="s" weight="bold" variant="darkpurple">
+                        {entry.time}
+                    </EventTime>
+                    <EventText size="xs" weight="normal" variant="black">
+                        {entry.event}
+                    </EventText>
+                </EventWrapper>
+            ))}
+        </TimeTableSectionWrapper>
+    );
+};

src/components/layout/MainContent.ts

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const MainContent = styled.div<{ isHomePage: boolean }>`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: ${({ isHomePage }) => (isHomePage ? "0px" : "50px")};
+    position: relative;
+`;

src/components/layout/MainLayout.tsx

@@ -6,11 +6,12 @@ import { useScrollToTop } from "@/hooks/useScrollToTop";
 
 import Navigation from "../navigation/Navigation";
 import Footer from "./Footer";
+import { MainContent } from "./MainContent";
 
 export const Main = styled.main<{ isHomePage: boolean }>`
     width: min(100%, 700px);
     margin: 0px auto;
-    padding-top: ${({ isHomePage }) => (isHomePage ? "0px" : "81px")};
+    padding-top: ${({ isHomePage }) => (isHomePage ? "0px" : "66px")};
 `;
 
 export const MainLayout = () => {
@@ -23,7 +24,9 @@ export const MainLayout = () => {
         <>
             <Navigation />
             <Main isHomePage={isHomePage}>
-                <Outlet />
+                <MainContent isHomePage={isHomePage}>
+                    <Outlet />
+                </MainContent>
             </Main>
             <Footer />
         </>

src/components/navigation/Navigation.styled.ts

@@ -40,7 +40,7 @@ export const NavHeader = styled.div`
     justify-content: space-around;
     align-items: center;
     font-size: 18px;
-    height: 60px;
+    height: 45px;
     gap: 100px;
 `;
 

src/components/typography/Paragraph.tsx

@@ -1,15 +1,23 @@
+import styled from "styled-components";
+
 import { IText, Text } from "./Text";
 
 export interface IParagraph extends IText {
     children: React.ReactNode;
+    isTitle?: boolean;
 }
 
-export const Paragraph: React.FC<IParagraph> = ({ size, weight, variant, children }) => {
+const ParagraphStyled = styled.p<{ isTitle?: boolean }>`
+    text-shadow: ${({ isTitle }) => (isTitle ? "0px 4px 4px rgba(0, 0, 0, 0.1)" : "none")};
+    font-family: ${({ isTitle }) => (isTitle ? "Blinker SemiBold" : "Pretendard")};
+`;
+
+export const Paragraph: React.FC<IParagraph> = ({ size, weight, variant, children, isTitle }) => {
     return (
-        <p>
+        <ParagraphStyled isTitle={isTitle}>
             <Text size={size} weight={weight} variant={variant}>
                 {children}
             </Text>
-        </p>
+        </ParagraphStyled>
     );
 };

src/constants/contributors.json

@@ -6,7 +6,8 @@
         "photo": "daegun",
         "description": ["지도 페이지 개발", "기여한 부분 2", "기여한 부분 3"],
         "contact": {
-            "instagram": "toothless.kid"
+            "instagram": "toothless.kid",
+            "github": "toothlessdev"
         },
         "team": "Front-End"
     },
@@ -17,7 +18,8 @@
         "photo": "hyoeun",
         "description": ["웹 페이지 디자인", "기여한 부분 2", "기여한 부분 3"],
         "contact": {
-            "instagram": "hyon__er"
+            "instagram": "hyon__er",
+            "github": "Hyoeunkh"
         },
         "team": "Front-End"
     },
@@ -28,7 +30,8 @@
         "photo": "dongpil",
         "description": ["웹 페이지 디자인", "기여한 부분 2", "기여한 부분 3"],
         "contact": {
-            "instagram": "j0_dph"
+            "instagram": "j0_dph",
+            "github": "eastfilmm"
         },
         "team": "Front-End"
     },
@@ -52,7 +55,8 @@
         "photo": "donggun",
         "description": ["기여한 부분 1", "기여한 부분 2", "기여한 부분 3"],
         "contact": {
-            "instagram": "thismovinggun"
+            "instagram": "thismovinggun",
+            "github": "himodu"
         },
         "team": "Back-End"
     },
@@ -63,7 +67,8 @@
         "photo": "jiwoong",
         "description": ["기여한 부분 1", "기여한 부분 2", "기여한 부분 3"],
         "contact": {
-            "instagram": "dnd._.hihi"
+            "instagram": "dnd._.hihi",
+            "github": "wldnd2"
         },
         "team": "Back-End"
     },
@@ -74,7 +79,8 @@
         "photo": "jeongsik",
         "description": ["기여한 부분 1", "기여한 부분 2", "기여한 부분 3"],
         "contact": {
-            "instagram": "siksik__choi"
+            "instagram": "siksik__choi",
+            "github": "siksik-Choi"
         },
         "team": "Back-End"
     }