From b9bf77d5d762d8513f19a9dbb65afbf9a6a27dd1 Mon Sep 17 00:00:00 2001 From: Hyeok Min Kwon Date: Sun, 6 Oct 2024 16:04:43 +0900 Subject: [PATCH] Add page titles --- src/pages/About/health.tsx | 2 +- src/pages/About/howToGetThere.tsx | 2 +- src/pages/Contribution/cfp.tsx | 5 +- src/pages/Home/index.tsx | 16 ++-- src/pages/PosterSession/index.tsx | 2 +- src/pages/Session/detail.tsx | 127 ++++++++++++++++-------------- src/pages/Session/list.tsx | 50 ++++++------ src/pages/Session/timetable.tsx | 25 +++--- src/pages/Sponsor/patron.tsx | 4 +- 9 files changed, 121 insertions(+), 112 deletions(-) diff --git a/src/pages/About/health.tsx b/src/pages/About/health.tsx index 8791acb..7194705 100644 --- a/src/pages/About/health.tsx +++ b/src/pages/About/health.tsx @@ -5,7 +5,7 @@ import useTranslation from "utils/hooks/useTranslation"; const Health = () => { const t = useTranslation(); return ( - +

{t("파이콘 한국 건강 관련 안내")}

{t("파이콘 한국에 참여해주신 모든 분들을 위해 안내 말씀드립니다.")}

코로나19 관련 안내

diff --git a/src/pages/About/howToGetThere.tsx b/src/pages/About/howToGetThere.tsx index 8e6f9d6..fd51639 100644 --- a/src/pages/About/howToGetThere.tsx +++ b/src/pages/About/howToGetThere.tsx @@ -42,7 +42,7 @@ export const HowToGetThere: React.FC = () => { const mapStyle: React.CSSProperties = { border: 0, width: "100%", height: "450px" }; return ( - +

{t("장소 안내")}

{t("수원컨벤션센터")}

diff --git a/src/pages/Contribution/cfp.tsx b/src/pages/Contribution/cfp.tsx index cd09f37..083d884 100644 --- a/src/pages/Contribution/cfp.tsx +++ b/src/pages/Contribution/cfp.tsx @@ -6,7 +6,7 @@ const Cfp = () => { const t = useTranslation(); return ( - +

{t("발표 제안하기")}

 diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index fc6286d..1915b2e 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -1,10 +1,10 @@ -import { mdiLinkVariant } from "@mdi/js" -import Icon from "@mdi/react" -import Page from "components/common/Page" -import React from "react" -import { useNavigate } from "react-router" -import styled from "styled-components" -import useTranslation from "utils/hooks/useTranslation" +import { mdiLinkVariant } from "@mdi/js"; +import Icon from "@mdi/react"; +import Page from "components/common/Page"; +import React from "react"; +import { useNavigate } from "react-router"; +import styled from "styled-components"; +import useTranslation from "utils/hooks/useTranslation"; const Home = () => { const t = useTranslation(); @@ -71,4 +71,4 @@ const LinkBtn = styled.button` &:hover { background-color: rgba(176, 168, 254, 0.2); } -` +`; diff --git a/src/pages/PosterSession/index.tsx b/src/pages/PosterSession/index.tsx index 45b0ce2..02aaff3 100644 --- a/src/pages/PosterSession/index.tsx +++ b/src/pages/PosterSession/index.tsx @@ -14,7 +14,7 @@ const PosterSession = () => { const registerFormUrl = "https://forms.gle/yjhuUZHR9tR3AR7d9"; return ( - +

{t("포스터 세션이란?")}

{t( diff --git a/src/pages/Session/detail.tsx b/src/pages/Session/detail.tsx index b64a55e..18cfe01 100644 --- a/src/pages/Session/detail.tsx +++ b/src/pages/Session/detail.tsx @@ -1,16 +1,16 @@ -import { wrap } from "@suspensive/react" -import React from "react" -import Markdown from "react-markdown" -import * as R from "remeda" - -import { SloganShort } from "assets/icons" -import { FallbackImg } from "components/common/FallbackImg" -import Page from "components/common/Page" -import { APIPretalxSessions } from "models/api/session" -import { useNavigate, useParams } from "react-router" -import styled from "styled-components" -import { useRetrieveSessionQuery } from "utils/hooks/useAPI" -import useTranslation from "utils/hooks/useTranslation" +import { wrap } from "@suspensive/react"; +import React from "react"; +import Markdown from "react-markdown"; +import * as R from "remeda"; + +import { SloganShort } from "assets/icons"; +import { FallbackImg } from "components/common/FallbackImg"; +import Page from "components/common/Page"; +import { APIPretalxSessions } from "models/api/session"; +import { useNavigate, useParams } from "react-router"; +import styled from "styled-components"; +import { useRetrieveSessionQuery } from "utils/hooks/useAPI"; +import useTranslation from "utils/hooks/useTranslation"; const SessionSpeakerItem: React.FC<{ speaker: APIPretalxSessions[0]["speakers"][0] }> = ({ speaker, @@ -29,47 +29,54 @@ const SessionSpeakerItem: React.FC<{ speaker: APIPretalxSessions[0]["speakers"][ {speaker.biography}

- ) -} + ); +}; const SessionDetail: React.FC<{ session: APIPretalxSessions[0] }> = ({ session }) => { - const t = useTranslation() + const t = useTranslation(); - let locale = "알 수 없음" + let locale = "알 수 없음"; switch (session.content_locale) { case "ko": - locale = "한국어" - break + locale = "한국어"; + break; case "en": - locale = "영어" - break + locale = "영어"; + break; case "ja": - locale = "일본어" - break + locale = "일본어"; + break; default: - locale = "알 수 없음" + locale = "알 수 없음"; } - let datetime = t("알 수 없음") - let duration = session.duration || 0 - let room = t("알 수 없음") - - if (R.isObjectType(session.slot) && R.isString(session.slot.start) && R.isString(session.slot.end)) { - const startTime = new Date(session.slot.start) - const endTime = new Date(session.slot.end) - const timeFormat = t("ko-KR") - const dateOptions = { day: "numeric" as const, month: "short" as const } - const timeOptions = { hour: "numeric" as const, minute: "numeric" as const } - - datetime = `${startTime.toLocaleString(timeFormat, {...dateOptions, ...timeOptions})} ~ ${endTime.toLocaleTimeString(timeFormat, timeOptions)}` - duration = (new Date(session.slot.end).getTime() - new Date(session.slot.start).getTime()) / 1000 / 60 - room = t(session.slot.room[Object.keys(session.slot.room)[0]]) + let datetime = t("알 수 없음"); + let duration = session.duration || 0; + let room = t("알 수 없음"); + + if ( + R.isObjectType(session.slot) && + R.isString(session.slot.start) && + R.isString(session.slot.end) + ) { + const startTime = new Date(session.slot.start); + const endTime = new Date(session.slot.end); + const timeFormat = t("ko-KR"); + const dateOptions = { day: "numeric" as const, month: "short" as const }; + const timeOptions = { hour: "numeric" as const, minute: "numeric" as const }; + + datetime = `${startTime.toLocaleString(timeFormat, { ...dateOptions, ...timeOptions })} ~ ${endTime.toLocaleTimeString(timeFormat, timeOptions)}`; + duration = + (new Date(session.slot.end).getTime() - new Date(session.slot.start).getTime()) / 1000 / 60; + room = t(session.slot.room[Object.keys(session.slot.room)[0]]); } return (

{session.title}

-

{session.abstract}

+

+ {session.abstract} +

{`${t("언어")} : ${t(locale)}`}

@@ -95,19 +102,19 @@ const SessionDetail: React.FC<{ session: APIPretalxSessions[0] }> = ({ session } ))}
- ) -} + ); +}; export const SessionDetailPage: React.FC = () => { - const t = useTranslation() - const { code } = useParams<{ code: string }>() - const navigate = useNavigate() + const t = useTranslation(); + const { code } = useParams<{ code: string }>(); + const navigate = useNavigate(); - React.useEffect(() => window.scrollTo(0, 0), []) + React.useEffect(() => window.scrollTo(0, 0), []); if (!(R.isString(code) && !R.isEmpty(code))) { - navigate("/session") - return null + navigate("/session"); + return null; } const SessionDetailWrapper = wrap @@ -115,24 +122,24 @@ export const SessionDetailPage: React.FC = () => { .Suspense({ fallback:

{t("세션 정보를 불러오는 중 입니다.")}

}) .on(() => { // eslint-disable-next-line react-hooks/rules-of-hooks - const { data } = useRetrieveSessionQuery(code) - return - }) + const { data } = useRetrieveSessionQuery(code); + return ; + }); return ( - + navigate(-1)}> ⬅️ {t("세션 목록으로 돌아가기")} - ) -} + ); +}; const ReturnToSessionList = styled.small` color: rgba(255, 255, 255, 0.4); cursor: pointer; -` +`; const SessionDetailStyled = styled.div` h1 { @@ -154,13 +161,13 @@ const SessionDetailStyled = styled.div` font-size: 1rem; } } -` +`; const SessionInfoContainerStyled = styled.div` * { margin: 0.5rem 0; } -` +`; const SessionSpeakerItemStyled = styled.div` display: flex; @@ -173,7 +180,7 @@ const SessionSpeakerItemStyled = styled.div` margin-top: 0; color: #fff; } -` +`; const SessionSpeakerImageContainerStyled = styled.div` flex: 0 0 auto; @@ -198,18 +205,18 @@ const SessionSpeakerImageContainerStyled = styled.div` border-radius: 50%; } -` +`; const TagContainer = styled.div` display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; -` +`; const Tag = styled.kbd` margin: 0; background-color: #b0a8fe; font-family: var(--pico-font-family); font-size: 0.6rem; -` +`; diff --git a/src/pages/Session/list.tsx b/src/pages/Session/list.tsx index 5d80f34..766504a 100644 --- a/src/pages/Session/list.tsx +++ b/src/pages/Session/list.tsx @@ -1,38 +1,38 @@ -import { wrap } from "@suspensive/react" -import React from "react" -import { useNavigate } from "react-router" -import * as R from "remeda" -import styled from "styled-components" - -import { SloganShort } from "assets/icons" -import { FallbackImg } from "components/common/FallbackImg" -import Page from "components/common/Page" -import { APIPretalxSessions } from "models/api/session" -import { useListSessionsQuery } from "utils/hooks/useAPI" -import useTranslation from "utils/hooks/useTranslation" +import { wrap } from "@suspensive/react"; +import React from "react"; +import { useNavigate } from "react-router"; +import * as R from "remeda"; +import styled from "styled-components"; + +import { SloganShort } from "assets/icons"; +import { FallbackImg } from "components/common/FallbackImg"; +import Page from "components/common/Page"; +import { APIPretalxSessions } from "models/api/session"; +import { useListSessionsQuery } from "utils/hooks/useAPI"; +import useTranslation from "utils/hooks/useTranslation"; const SessionItem: React.FC<{ session: APIPretalxSessions[0] }> = ({ session }) => { const t = useTranslation(); const navigate = useNavigate(); - const speakerImageSrc = ( - session.image - || R.isArray(session.speakers) && !R.isEmpty(session.speakers) && session.speakers[0].avatar - || "" - ) - const urlSafeTitle = session.title.replace(/ /g, "-").replace(/([.])/g, "_").replace(/(?![0-9A-Za-zㄱ-ㅣ가-힣-_])./g, "") + const speakerImageSrc = + session.image || + (R.isArray(session.speakers) && !R.isEmpty(session.speakers) && session.speakers[0].avatar) || + ""; + const urlSafeTitle = session.title + .replace(/ /g, "-") + .replace(/([.])/g, "_") + .replace(/(?![0-9A-Za-zㄱ-ㅣ가-힣-_])./g, ""); return ( - } - /> + } /> -

navigate(`/session/${session.code}#${urlSafeTitle}`)}>{session.title}

+

navigate(`/session/${session.code}#${urlSafeTitle}`)}> + {session.title} +

{session.abstract}

by{" "} @@ -92,7 +92,7 @@ export const SessionListPage = () => { }); return ( - +

{t("세션 목록")}

diff --git a/src/pages/Session/timetable.tsx b/src/pages/Session/timetable.tsx index 98c71b3..50dd7cc 100644 --- a/src/pages/Session/timetable.tsx +++ b/src/pages/Session/timetable.tsx @@ -1,13 +1,13 @@ -import { wrap } from "@suspensive/react" -import React from "react" -import * as R from "remeda" -import styled from "styled-components" +import { wrap } from "@suspensive/react"; +import React from "react"; +import * as R from "remeda"; +import styled from "styled-components"; -import Page from "components/common/Page" -import { APIPretalxSessions } from "models/api/session" -import { useNavigate } from "react-router" -import { useListSessionsQuery } from "utils/hooks/useAPI" -import useTranslation from "utils/hooks/useTranslation" +import Page from "components/common/Page"; +import { APIPretalxSessions } from "models/api/session"; +import { useNavigate } from "react-router"; +import { useListSessionsQuery } from "utils/hooks/useAPI"; +import useTranslation from "utils/hooks/useTranslation"; const TD_HEIGHT = 2.5; const TD_WIDTH = 12.5; @@ -110,7 +110,10 @@ const SessionColumn: React.FC<{ const clickable = R.isArray(session.speakers) && !R.isEmpty(session.speakers); // Firefox는 rowSpan된 td의 height를 계산할 때 rowSpan을 고려하지 않습니다. 따라서 직접 계산하여 height를 설정합니다. const sessionBoxHeight = `${TD_HEIGHT * rowSpan}rem`; - const urlSafeTitle = session.title.replace(/ /g, "-").replace(/([.])/g, "_").replace(/(?![.0-9A-Za-zㄱ-ㅣ가-힣-])./g, "") + const urlSafeTitle = session.title + .replace(/ /g, "-") + .replace(/([.])/g, "_") + .replace(/(?![.0-9A-Za-zㄱ-ㅣ가-힣-])./g, ""); return ( { }); return ( - +

{t("세션 시간표")}

diff --git a/src/pages/Sponsor/patron.tsx b/src/pages/Sponsor/patron.tsx index 0a99f1f..4b0e611 100644 --- a/src/pages/Sponsor/patron.tsx +++ b/src/pages/Sponsor/patron.tsx @@ -22,14 +22,14 @@ const PatronList = () => { if (isLoading) return ( - +

{t("개인 후원자")}

{t("불러오는 중입니다...")}

 ); return ( - +

{t("개인 후원자")}

{t("파이콘 한국 2024를 후원해주신 개인 후원자분들의 명단입니다.")}