diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 893c943..2c656f8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,8 +39,11 @@ dependencies: specifier: ^9.1.2 version: 9.1.2(@types/react@18.3.1)(react@18.3.1)(redux@5.0.1) react-router-dom: - specifier: ^6.23.0 - version: 6.23.0(react-dom@18.3.1)(react@18.3.1) + specifier: ^6.23.1 + version: 6.23.1(react-dom@18.3.1)(react@18.3.1) + react-zoom-pan-pinch: + specifier: ^3.4.4 + version: 3.4.4(react-dom@18.3.1)(react@18.3.1) styled-components: specifier: ^6.1.8 version: 6.1.8(react-dom@18.3.1)(react@18.3.1) @@ -550,8 +553,8 @@ packages: reselect: 5.1.0 dev: false - /@remix-run/router@1.16.0: - resolution: {integrity: sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==} + /@remix-run/router@1.16.1: + resolution: {integrity: sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==} engines: {node: '>=14.0.0'} dev: false @@ -2071,29 +2074,40 @@ packages: use-sync-external-store: 1.2.2(react@18.3.1) dev: false - /react-router-dom@6.23.0(react-dom@18.3.1)(react@18.3.1): - resolution: {integrity: sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==} + /react-router-dom@6.23.1(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' react-dom: '>=16.8' dependencies: - '@remix-run/router': 1.16.0 + '@remix-run/router': 1.16.1 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - react-router: 6.23.0(react@18.3.1) + react-router: 6.23.1(react@18.3.1) dev: false - /react-router@6.23.0(react@18.3.1): - resolution: {integrity: sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==} + /react-router@6.23.1(react@18.3.1): + resolution: {integrity: sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' dependencies: - '@remix-run/router': 1.16.0 + '@remix-run/router': 1.16.1 react: 18.3.1 dev: false + /react-zoom-pan-pinch@3.4.4(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-lGTu7D9lQpYEQ6sH+NSlLA7gicgKRW8j+D/4HO1AbSV2POvKRFzdWQ8eI0r3xmOsl4dYQcY+teV6MhULeg1xBw==} + engines: {node: '>=8', npm: '>=5'} + peerDependencies: + react: '*' + react-dom: '*' + dependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + /react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} diff --git a/src/assets/DMSans-Medium.ttf b/src/assets/DMSans-Medium.ttf new file mode 100644 index 0000000..1035811 Binary files /dev/null and b/src/assets/DMSans-Medium.ttf differ diff --git a/src/components/display/DateSelector.styled.ts b/src/components/display/DateSelector.styled.ts new file mode 100644 index 0000000..787691a --- /dev/null +++ b/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; +`; diff --git a/src/components/display/DateSelector.tsx b/src/components/display/DateSelector.tsx new file mode 100644 index 0000000..6b5664d --- /dev/null +++ b/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 = ({ activeDate, onDateClick, dates }) => { + return ( + + {dates.map(({ date, day }) => ( + onDateClick(date)} + /> + ))} + + ); +}; + +export default DateSelector; diff --git a/src/components/display/ShowDate.styled.ts b/src/components/display/ShowDate.styled.ts index 42ab1cb..e406080 100644 --- a/src/components/display/ShowDate.styled.ts +++ b/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; } `; diff --git a/src/components/display/ShowData.tsx b/src/components/display/ShowDate.tsx similarity index 100% rename from src/components/display/ShowData.tsx rename to src/components/display/ShowDate.tsx diff --git a/src/components/display/TimeTableSection.styled.ts b/src/components/display/TimeTableSection.styled.ts new file mode 100644 index 0000000..67b18dc --- /dev/null +++ b/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; +`; diff --git a/src/components/display/TimeTableSection.tsx b/src/components/display/TimeTableSection.tsx new file mode 100644 index 0000000..39cdab8 --- /dev/null +++ b/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; + currentTime: Date; +} + +export const TimeTableSection: React.FC = ({ 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 ( + + + + + + {title} + + + + {data.map((entry, index) => ( + + + {entry.time} + + + {entry.event} + + + ))} + + ); +}; diff --git a/src/components/layout/MainContent.ts b/src/components/layout/MainContent.ts new file mode 100644 index 0000000..4020122 --- /dev/null +++ b/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; +`; diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx index 62384f9..cef073c 100644 --- a/src/components/layout/MainLayout.tsx +++ b/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 = () => { <>
- + + +