From 11aad8b1d783c0cf3920c835b08035ae38731172 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8C=E1=85=A5=E1=86=BC=E1=84=92=E1=85=A2=E1=84=89?= =?UTF-8?q?=E1=85=A5=E1=86=BC?= Date: Sun, 12 Jan 2025 00:10:55 +0900 Subject: [PATCH 01/46] =?UTF-8?q?feat:=20=EB=B6=84=EC=8B=A4=EB=AC=BC=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 3 ++ src/assets/svg/Notice/found.svg | 8 ++++ src/assets/svg/Notice/lost.svg | 18 ++++++++ src/assets/svg/Notice/pencil.svg | 8 ++++ .../LostItemPage/LostItemPage.module.scss | 0 src/pages/Notice/LostItemPage/index.tsx | 16 +++++++ .../Notice/NoticePage/NoticePage.module.scss | 37 ++++++++++++---- src/pages/Notice/NoticePage/index.tsx | 42 +++++++++++++++++-- src/static/routes.ts | 2 + 9 files changed, 124 insertions(+), 10 deletions(-) create mode 100644 src/assets/svg/Notice/found.svg create mode 100644 src/assets/svg/Notice/lost.svg create mode 100644 src/assets/svg/Notice/pencil.svg create mode 100644 src/pages/Notice/LostItemPage/LostItemPage.module.scss create mode 100644 src/pages/Notice/LostItemPage/index.tsx diff --git a/src/App.tsx b/src/App.tsx index 75bbc5999..66a50e447 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -35,6 +35,7 @@ import ModifyTimetablePage from 'pages/TimetablePage/ModifyTimetablePage'; import PageNotFound from 'pages/Error/PageNotFound'; import PolicyPage from 'pages/PolicyPage'; import ROUTES from 'static/routes'; +import LostItemPage from 'pages/Notice/LostItemPage'; interface HelmetWrapperProps { title: string; @@ -79,6 +80,8 @@ function App() { } /> } />} /> + } />} /> + } />} /> } />} /> } />} /> } />} /> diff --git a/src/assets/svg/Notice/found.svg b/src/assets/svg/Notice/found.svg new file mode 100644 index 000000000..653b2a2a8 --- /dev/null +++ b/src/assets/svg/Notice/found.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/svg/Notice/lost.svg b/src/assets/svg/Notice/lost.svg new file mode 100644 index 000000000..3d75144d0 --- /dev/null +++ b/src/assets/svg/Notice/lost.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svg/Notice/pencil.svg b/src/assets/svg/Notice/pencil.svg new file mode 100644 index 000000000..8f1953786 --- /dev/null +++ b/src/assets/svg/Notice/pencil.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/pages/Notice/LostItemPage/LostItemPage.module.scss b/src/pages/Notice/LostItemPage/LostItemPage.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/pages/Notice/LostItemPage/index.tsx b/src/pages/Notice/LostItemPage/index.tsx new file mode 100644 index 000000000..f81a94795 --- /dev/null +++ b/src/pages/Notice/LostItemPage/index.tsx @@ -0,0 +1,16 @@ +import { useLocation } from 'react-router-dom'; +import styles from './LostItemPage.module.scss'; + +type LostItemType = 'found' | 'lost'; + +export default function LostItemPage() { + const location = useLocation(); + const type: LostItemType = location.pathname.includes('/found') ? 'found' : 'lost'; + console.log(type); + + return ( +
+ s +
+ ); +} diff --git a/src/pages/Notice/NoticePage/NoticePage.module.scss b/src/pages/Notice/NoticePage/NoticePage.module.scss index 6f515d56c..8c98b1b9d 100644 --- a/src/pages/Notice/NoticePage/NoticePage.module.scss +++ b/src/pages/Notice/NoticePage/NoticePage.module.scss @@ -27,25 +27,48 @@ .header { width: 100%; - height: 40px; - margin-bottom: 20px; + margin-bottom: 8px; position: relative; + display: flex; + justify-content: space-between; + align-items: center; @include media.media-breakpoint(mobile) { display: none; } &__title { - float: left; - font-family: NanumSquare, serif; - font-size: 30px; - font-weight: 800; - letter-spacing: -1.5px; + font-family: Pretendard, sans-serif; + font-size: 48px; + font-weight: 500; color: #175c8e; margin: 0; } } +.links { + display: flex; + justify-content: flex-end; + gap: 20px; + + &__button { + height: 48px; + padding: 12px 16px; + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + gap: 4px; + border: 1px solid #e1e1e1; + border-radius: 24px; + background-color: #fafafa; + color: #4b4b4b; + font-family: Pretendard, sans-serif; + font-size: 20px; + font-weight: 500; + } +} + .aside { display: flex; flex-direction: column; diff --git a/src/pages/Notice/NoticePage/index.tsx b/src/pages/Notice/NoticePage/index.tsx index 4c9939326..f853b2a4f 100644 --- a/src/pages/Notice/NoticePage/index.tsx +++ b/src/pages/Notice/NoticePage/index.tsx @@ -1,18 +1,54 @@ -import { Suspense } from 'react'; -import { Outlet } from 'react-router-dom'; -import useScrollToTop from 'utils/hooks/ui/useScrollToTop'; import LoadingSpinner from 'components/common/LoadingSpinner'; import HotArticles from 'pages/Notice/components/HotArticle'; +import PencilIcon from 'assets/svg/Notice/pencil.svg'; +import FoundIcon from 'assets/svg/Notice/found.svg'; +import LostIcon from 'assets/svg/Notice/lost.svg'; +import { Suspense } from 'react'; +import { Link, Outlet } from 'react-router-dom'; +import ROUTES from 'static/routes'; +import useScrollToTop from 'utils/hooks/ui/useScrollToTop'; +import useBooleanState from 'utils/hooks/state/useBooleanState'; import styles from './NoticePage.module.scss'; export default function NoticePage() { + const [linksOpen, ,, toggleLinksOpen] = useBooleanState(false); useScrollToTop(); + // to={ROUTES.LostItemFound()} + return (

공지사항

+
+ {linksOpen && ( + <> + + + 주인을 찾아요 + + + + 잃어버렸어요 + + + )} + +
}> diff --git a/src/static/routes.ts b/src/static/routes.ts index d7ea1a84c..9be8e86e6 100644 --- a/src/static/routes.ts +++ b/src/static/routes.ts @@ -23,6 +23,8 @@ const ROUTES = { Cafeteria: () => '/cafeteria', BoardNotice: () => '/board/notice', BoardNoticeDetail: ({ id, isLink }: ROUTESParams<'id'>) => (isLink ? `/board/notice/${id}` : '/board/notice/:id'), + LostItemFound: () => '/lostitem/found', + LostItemLost: () => '/lostitem/lost', Room: () => '/room', RoomDetail: ({ id, isLink }: ROUTESParams<'id'>) => (isLink ? `/room/${id}` : '/room/:id'), CampusInfo: () => '/campusinfo', From cb4a3709bce9d5af2a369ac9b486a293d5836e2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8C=E1=85=A5=E1=86=BC=E1=84=92=E1=85=A2=E1=84=89?= =?UTF-8?q?=E1=85=A5=E1=86=BC?= Date: Sun, 12 Jan 2025 00:37:27 +0900 Subject: [PATCH 02/46] =?UTF-8?q?feat:=20=EA=B8=80=EC=93=B0=EA=B8=B0=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/Notice/add.svg | 8 ++ .../LostItemPage/LostItemPage.module.scss | 95 +++++++++++++++++++ src/pages/Notice/LostItemPage/index.tsx | 40 +++++++- src/pages/Notice/NoticePage/index.tsx | 2 - 4 files changed, 141 insertions(+), 4 deletions(-) create mode 100644 src/assets/svg/Notice/add.svg diff --git a/src/assets/svg/Notice/add.svg b/src/assets/svg/Notice/add.svg new file mode 100644 index 000000000..1bf151eea --- /dev/null +++ b/src/assets/svg/Notice/add.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/pages/Notice/LostItemPage/LostItemPage.module.scss b/src/pages/Notice/LostItemPage/LostItemPage.module.scss index e69de29bb..d2fc59a36 100644 --- a/src/pages/Notice/LostItemPage/LostItemPage.module.scss +++ b/src/pages/Notice/LostItemPage/LostItemPage.module.scss @@ -0,0 +1,95 @@ +@use "src/utils/scss/media" as media; + +.container { + padding-top: 64px; + min-height: calc(100vh - 60px); + display: flex; + flex-direction: column; + align-items: center; +} + +.wrapper { + width: 1136px; +} + +.header { + width: 100%; + display: flex; + flex-direction: column; + gap: 8px; + + &__title { + font-family: Pretendard, sans-serif; + font-size: 32px; + font-weight: 500; + color: #175c8e; + line-height: 1.2; + + @include media.media-breakpoint(mobile) { + font-size: 24px; + } + } + + &__subtitle { + font-family: Pretendard, sans-serif; + font-size: 18px; + line-height: 1.6; + color: #666; + + @include media.media-breakpoint(mobile) { + font-size: 14px; + } + } +} + +.add { + width: 100%; + margin-bottom: 20px; + display: flex; + justify-content: flex-end; + + &__button { + width: 127px; + height: 48px; + display: flex; + justify-content: center; + align-items: center; + gap: 4px; + border-radius: 8px; + background-color: #e4f2ff; + color: #10477a; + font-family: Pretendard, sans-serif; + font-size: 18px; + font-weight: 500; + line-height: 1.2; + + @include media.media-breakpoint(mobile) { + height: 40px; + font-size: 14px; + } + } +} + +.complete { + margin-top: auto; + display: flex; + justify-content: center; + + &__button { + width: 240px; + height: 53px; + border: none; + border-radius: 8px; + background-color: #175c8e; + color: white; + font-family: Pretendard, sans-serif; + font-size: 18px; + font-weight: 700; + line-height: 1.6; + + @include media.media-breakpoint(mobile) { + height: 44px; + font-size: 14px; + } + } +} diff --git a/src/pages/Notice/LostItemPage/index.tsx b/src/pages/Notice/LostItemPage/index.tsx index f81a94795..5149442a0 100644 --- a/src/pages/Notice/LostItemPage/index.tsx +++ b/src/pages/Notice/LostItemPage/index.tsx @@ -1,16 +1,52 @@ import { useLocation } from 'react-router-dom'; +import AddIcon from 'assets/svg/Notice/add.svg'; import styles from './LostItemPage.module.scss'; +const titles = { + found: { + title: '습득물 신고', + subtitle: '습득한 물건을 자세히 설명해주세요!', + }, + lost: { + title: '분실물 신고', + subtitle: '분실한 물건을 자세히 설명해주세요!', + }, +}; + type LostItemType = 'found' | 'lost'; export default function LostItemPage() { const location = useLocation(); const type: LostItemType = location.pathname.includes('/found') ? 'found' : 'lost'; - console.log(type); + const { title, subtitle } = titles[type]; return (
- s +
+
+ {title} + {subtitle} +
+
+ +
+
+ +
+
); } diff --git a/src/pages/Notice/NoticePage/index.tsx b/src/pages/Notice/NoticePage/index.tsx index f853b2a4f..7ddd376da 100644 --- a/src/pages/Notice/NoticePage/index.tsx +++ b/src/pages/Notice/NoticePage/index.tsx @@ -14,8 +14,6 @@ export default function NoticePage() { const [linksOpen, ,, toggleLinksOpen] = useBooleanState(false); useScrollToTop(); - // to={ROUTES.LostItemFound()} - return (
From c1ceb3533a5b5bce5dc39e72a15139a2e5cc98ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8C=E1=85=A5=E1=86=BC=E1=84=92=E1=85=A2=E1=84=89?= =?UTF-8?q?=E1=85=A5=E1=86=BC?= Date: Sun, 12 Jan 2025 15:12:14 +0900 Subject: [PATCH 03/46] =?UTF-8?q?refactor:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BusPage/BusLookUp/BusLookUp.module.scss | 181 ------------- src/pages/BusPage/BusLookUp/index.tsx | 123 --------- .../BusTimetable/BusTimetable.module.scss | 156 ------------ src/pages/BusPage/BusTimetable/Timetable.tsx | 239 ------------------ src/pages/BusPage/BusTimetable/index.tsx | 56 ---- src/pages/BusPage/hooks/useBusDirection.ts | 32 --- src/pages/BusPage/hooks/useBusLeftTime.ts | 43 ---- src/pages/BusPage/hooks/useBusTimetable.ts | 77 ------ .../BusPage/hooks/useIndexValueSelect.ts | 15 -- src/pages/BusPage/index.tsx | 15 -- src/pages/BusPage/ts/busModules.ts | 64 ----- 11 files changed, 1001 deletions(-) delete mode 100644 src/pages/BusPage/BusLookUp/BusLookUp.module.scss delete mode 100644 src/pages/BusPage/BusLookUp/index.tsx delete mode 100644 src/pages/BusPage/BusTimetable/BusTimetable.module.scss delete mode 100644 src/pages/BusPage/BusTimetable/Timetable.tsx delete mode 100644 src/pages/BusPage/BusTimetable/index.tsx delete mode 100644 src/pages/BusPage/hooks/useBusDirection.ts delete mode 100644 src/pages/BusPage/hooks/useBusLeftTime.ts delete mode 100644 src/pages/BusPage/hooks/useBusTimetable.ts delete mode 100644 src/pages/BusPage/hooks/useIndexValueSelect.ts delete mode 100644 src/pages/BusPage/index.tsx delete mode 100644 src/pages/BusPage/ts/busModules.ts diff --git a/src/pages/BusPage/BusLookUp/BusLookUp.module.scss b/src/pages/BusPage/BusLookUp/BusLookUp.module.scss deleted file mode 100644 index 308ae248c..000000000 --- a/src/pages/BusPage/BusLookUp/BusLookUp.module.scss +++ /dev/null @@ -1,181 +0,0 @@ -@use "src/utils/scss/media" as media; - -.lookup { - margin: 63px auto 0; - width: 1131px; - - @include media.media-breakpoint(mobile) { - width: 100%; - margin: 0; - padding: 26px 16px; - box-sizing: border-box; - } - - &__title { - font-family: NanumSquare, sans-serif; - letter-spacing: -1.5px; - font-size: 30px; - font-weight: 800; - color: #175c8e; - - @include media.media-breakpoint(mobile) { - font-size: 20px; - } - } - - &__description { - margin-top: 30px; - margin-bottom: 22px; - display: flex; - justify-content: space-between; - align-items: flex-end; - font-size: 24px; - - @include media.media-breakpoint(mobile) { - flex-direction: column; - align-items: flex-start; - gap: 20px; - margin-top: 15px; - font-size: 20px; - } - } - - &__subtitle { - font-family: NanumBarunGothic, sans-serif; - font-size: 24px; - letter-spacing: -1.2px; - font-weight: 300; - line-height: 28px; - - @include media.media-breakpoint(mobile) { - font-size: 18px; - } - } - - &__select { - cursor: pointer; - border: 0; - margin: 0 10px 0 4px; - font-size: 24px; - font-weight: bold; - - @include media.media-breakpoint(mobile) { - font-size: 20px; - } - } - - &__select-line { - @include media.media-breakpoint(mobile) { - align-self: flex-end; - } - } -} - -.cards { - display: grid; - grid-auto-flow: column; - grid-template-columns: repeat(3, 370px); - grid-template-rows: 162px 85px; - gap: 5px 9px; - color: white; - - @include media.media-breakpoint(mobile) { - grid-template-columns: 1fr; - grid-template-rows: repeat(3, 156px 85px); - } - - &__top-card { - padding: 26px 23px 0; - } - - &__bottom-card { - padding: 23px 23px 0; - } - - &__card { - &--shuttle { - background-color: rgb(247 148 30); - } - - &--express { - background-color: rgb(124 159 174); - } - - &--city { - background-color: rgb(77 178 151); - } - } - - &__content { - display: flex; - justify-content: space-between; - - &--description { - margin-top: 26px; - - @include media.media-breakpoint(mobile) { - margin-top: 20px; - } - } - } - - &__direction { - font-size: 24px; - letter-spacing: -1.2px; - display: flex; - align-items: center; - margin-bottom: 11px; - - @include media.media-breakpoint(mobile) { - font-size: 20px; - } - } - - &__badge { - width: 39px; - height: 19px; - border: 1px solid white; - border-radius: 14px; - font-size: 11px; - display: flex; - align-items: center; - justify-content: center; - padding-top: 1px; - margin-right: 13px; - } - - &__time { - font-size: 18px; - font-weight: 700; - letter-spacing: -0.9px; - } - - &__detail { - font-size: 12px; - font-weight: 400; - letter-spacing: -0.6px; - margin-left: 10px; - } - - &__bus-number { - font-size: 14px; - letter-spacing: -0.7px; - } - - &__bus-icon { - position: relative; - height: 15px; - width: auto; - right: 8px; - top: 2px; - } - - &__bus-type { - font-size: 14px; - } - - &__title--bottom { - height: 20px; - font-size: 12px; - } -} diff --git a/src/pages/BusPage/BusLookUp/index.tsx b/src/pages/BusPage/BusLookUp/index.tsx deleted file mode 100644 index 7240b1b99..000000000 --- a/src/pages/BusPage/BusLookUp/index.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import React from 'react'; -import { cn } from '@bcsdlab/utils'; -import useBusDirection from 'pages/BusPage/hooks/useBusDirection'; -import useBusLeftTime from 'pages/BusPage/hooks/useBusLeftTime'; -import { getBusName, getLeftTimeString, getStartTimeString } from 'pages/BusPage/ts/busModules'; -import { BUS_DIRECTIONS, BUS_TYPES } from 'static/bus'; -import useLogger from 'utils/hooks/analytics/useLogger'; -import styles from './BusLookUp.module.scss'; - -function BusLookUp() { - const { depart, arrival } = useBusDirection(BUS_DIRECTIONS); - const { data: busData } = useBusLeftTime({ - departList: [depart.value, depart.value, depart.value], - arrivalList: [arrival.value, arrival.value, arrival.value], - }); - const logger = useLogger(); - - return ( -
-

버스 / 교통 운행정보

-
-

- 어디를 가시나요? -
- 운행수단별로 간단히 비교해드립니다. -

-
- - 에서 - - 갑니다 -
-
-
- {BUS_TYPES.map(({ key: type }, idx) => ( - -
-
-
-
- - 출발 - - {depart.options[0]} -
-
- - 도착 - - {arrival.options[0]} -
-
- {busData[idx]?.now_bus?.bus_number && ( - {`${busData[idx]?.now_bus?.bus_number}번 버스`} - )} -
-
-
- - {getLeftTimeString(busData[idx]?.now_bus?.remain_time)} - - {typeof busData[idx]?.now_bus?.remain_time === 'number' && ( - - {`(${getStartTimeString(busData[idx]?.now_bus?.remain_time)} 출발)`} - - )} -
-
- - {getBusName(type)} -
-
-
-
-
- 다음버스 - {busData[idx]?.next_bus?.bus_number && ( - {`${busData[idx]?.next_bus?.bus_number}번 버스`} - )} -
-
-
- - {getLeftTimeString(busData[idx]?.next_bus?.remain_time)} - - {typeof busData[idx]?.next_bus?.remain_time === 'number' && ( - - {`(${getStartTimeString(busData[idx]?.next_bus?.remain_time)} 출발)`} - - )} -
-
- - {getBusName(type)} -
-
-
- - ))} -
-
- ); -} - -export default BusLookUp; diff --git a/src/pages/BusPage/BusTimetable/BusTimetable.module.scss b/src/pages/BusPage/BusTimetable/BusTimetable.module.scss deleted file mode 100644 index cde91493c..000000000 --- a/src/pages/BusPage/BusTimetable/BusTimetable.module.scss +++ /dev/null @@ -1,156 +0,0 @@ -@use "src/utils/scss/media" as media; - -.template { - width: 1131px; - margin: 65px auto 0; - min-height: 900px; - - @include media.media-breakpoint(mobile) { - min-height: 550px; - } - - @include media.media-breakpoint(mobile) { - width: 100%; - margin: 0; - padding: 10px 16px; - box-sizing: border-box; - } - - &__title { - font-size: 20px; - font-weight: bold; - letter-spacing: -1px; - color: #252525; - margin-bottom: 22px; - } - - &__loading-spinner { - margin: 250px auto; - background-color: white; - width: 100px; - height: 100px; - } -} - -.tabs { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - height: 60px; - list-style: none; - - @include media.media-breakpoint(mobile) { - height: 32px; - } - - &__tab { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - font-size: 16px; - letter-spacing: -0.8px; - font-weight: 500; - line-height: 1.5; - color: rgb(133 133 133); - background-color: white; - border: 1px solid rgb(133 133 133); - appearance: none; - cursor: pointer; - - @include media.media-breakpoint(mobile) { - font-size: 13px; - } - - &--selected { - color: rgb(23 92 142); - border-color: rgb(23 92 142); - border-bottom: 0; - } - } -} - -.timetable { - width: 100%; - text-align: center; - font-size: 15px; - table-layout: fixed; - - @include media.media-breakpoint(mobile) { - font-size: 13px; - } - - &__date { - float: left; - color: rgb(133 133 133); - letter-spacing: -0.6px; - font-size: 12px; - margin: 6px 0 24px; - line-height: 160%; - } - - &__dropdown-wrapper { - margin-top: 24px; - margin-bottom: 16px; - display: flex; - justify-content: space-between; - } - - &__citybus-blank { - height: 82px; - flex-shrink: 0; - } - - &__citybus-info { - float: right; - color: rgb(133 133 133); - letter-spacing: -0.6px; - font-size: 12px; - margin: 6px 0 24px; - } - - &__dropdown { - border: 1px solid rgb(210 218 226); - height: 42px; - padding: 0 10px 0 7px; - letter-spacing: -0.8px; - font-size: 15px; - } - - &__button { - border: 1px solid rgb(210 218 226); - height: 42px; - padding: 0 10px 0 7px; - letter-spacing: -0.8px; - font-size: 15px; - } - - &__head { - border-top: 2px solid rgb(23 92 142); - height: 46px; - color: rgb(23 92 142); - font-weight: bold; - } - - &__body { - border: solid rgb(23 92 142); - border-width: 1px 0; - } - - &__row { - height: 68px; - border-top: 1px rgb(0 0 0 / 10%) solid; - - @include media.media-breakpoint(mobile) { - height: 42px; - } - - &:hover { - font-weight: bold; - } - } - - &__cell { - vertical-align: middle; - } -} diff --git a/src/pages/BusPage/BusTimetable/Timetable.tsx b/src/pages/BusPage/BusTimetable/Timetable.tsx deleted file mode 100644 index f0a24757f..000000000 --- a/src/pages/BusPage/BusTimetable/Timetable.tsx +++ /dev/null @@ -1,239 +0,0 @@ -import { getCourseName } from 'pages/BusPage/ts/busModules'; -import useBusTimetable, { useCityBusTimetable } from 'pages/BusPage/hooks/useBusTimetable'; -import useIndexValueSelect from 'pages/BusPage/hooks/useIndexValueSelect'; -import { - BUS_TYPES, cityBusDirections, CITY_COURSES, - EXPRESS_COURSES, SHUTTLE_COURSES, TERMINAL_CITY_BUS, -} from 'static/bus'; -import useLogger from 'utils/hooks/analytics/useLogger'; -import { ChangeEvent, useState } from 'react'; -import dayjs from 'dayjs'; -import styles from './BusTimetable.module.scss'; - -function Template({ headers, arrivalList }: { headers: string[], arrivalList: string[][] }) { - return ( - - - - - - - - - - {arrivalList.map(([arrival, time], idx) => ( - // eslint-disable-next-line react/no-array-index-key - - - - - ))} - -
{headers[0]}{headers[1]}
{arrival}{time}
- ); -} - -function ShuttleTimetable() { - const [selectedCourseId, handleCourseChange] = useIndexValueSelect(); - const [selectedRoute, handleRouteChange, resetRoute] = useIndexValueSelect(); - const timetable = useBusTimetable(SHUTTLE_COURSES[selectedCourseId]); - const logger = useLogger(); - - return ( -
-
- - - -
- -