Merge branch 'develop'

pythonkr · Oct 6, 2024 · b511527 · b511527
2 parents 34cafe6 + b9bf77d
commit b511527
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 112 deletions.
diff --git 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 (
- <Page>
+ <Page title="건강 관련 안내">
  <h1>{t("파이콘 한국 건강 관련 안내")}</h1>
  <p>{t("파이콘 한국에 참여해주신 모든 분들을 위해 안내 말씀드립니다.")}</p>
  <h2>코로나19 관련 안내</h2>

diff --git 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 (
- <Page>
+ <Page title="장소 안내">
  <div style={{ width: "100%", maxWidth: "1200px" }}>
  <h1>{t("장소 안내")}</h1>
  <h2>{t("수원컨벤션센터")}</h2>

diff --git a/src/pages/Contribution/cfp.tsx b/src/pages/Contribution/cfp.tsx
@@ -6,7 +6,7 @@ const Cfp = () => {
  const t = useTranslation();
 
  return (
- <Page>
+ <Page title="발표 제안">
  <h1>{t("발표 제안하기")}</h1>
  <ul>
  <li>2차 모집: 6/1~6/22</li>
@@ -16,8 +16,7 @@ const Cfp = () => {
  <a href="https://forms.gle/qF4enrUpHKrUeAgAA">https://forms.gle/qF4enrUpHKrUeAgAA</a>
  </li>
  <li>
- 문의:{" "}
- <a href="mailto:[email protected]">[email protected]</a>
+ 문의: <a href="mailto:[email protected]">[email protected]</a>
  </li>
  </ul>
  </Page>

diff --git 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
@@ -14,7 +14,7 @@ const PosterSession = () => {
  const registerFormUrl = "https://forms.gle/yjhuUZHR9tR3AR7d9";
 
  return (
- <Page>
+ <Page title="포스터 세션">
  <h1>{t("포스터 세션이란?")}</h1>
  <p>
  {t(

diff --git 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"][
  <Markdown>{speaker.biography}</Markdown>
  </div>
  </SessionSpeakerItemStyled>
- )
-}
+ );
+};
 
 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 (
  <SessionDetailStyled>
  <h1>{session.title}</h1>
- <h4><Markdown>{session.abstract}</Markdown></h4>
+ <h4>
+ <Markdown>{session.abstract}</Markdown>
+ </h4>
  <hr />
  <SessionInfoContainerStyled>
  <p>{`${t("언어")} : ${t(locale)}`}</p>
@@ -95,44 +102,44 @@ const SessionDetail: React.FC<{ session: APIPretalxSessions[0] }> = ({ session }
  ))}
  <hr />
  </SessionDetailStyled>
- )
-}
+ );
+};
 
 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
  .ErrorBoundary({ fallback: <h4>{t("세션 정보를 불러오는 중 에러가 발생했습니다.")}</h4> })
  .Suspense({ fallback: <h4>{t("세션 정보를 불러오는 중 입니다.")}</h4> })
  .on(() => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
- const { data } = useRetrieveSessionQuery(code)
- return <SessionDetail session={data} />
- })
+ const { data } = useRetrieveSessionQuery(code);
+ return <SessionDetail session={data} />;
+ });
 
  return (
- <Page>
+ <Page title="세션 상세">
  <ReturnToSessionList onClick={() => navigate(-1)}>
  ⬅️ {t("세션 목록으로 돌아가기")}
  </ReturnToSessionList>
  <SessionDetailWrapper />
  </Page>
- )
-}
+ );
+};
 
 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
@@ -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 (
  <SessionItemEl>
  <SessionItemImgContainer>
- <FallbackImg
- src={speakerImageSrc}
- alt={session.title}
- errorFallback={<SloganShort />}
- />
+ <FallbackImg src={speakerImageSrc} alt={session.title} errorFallback={<SloganShort />} />
  </SessionItemImgContainer>
  <SessionItemInfoContainer>
- <h4 onClick={() => navigate(`/session/${session.code}#${urlSafeTitle}`)}>{session.title}</h4>
+ <h4 onClick={() => navigate(`/session/${session.code}#${urlSafeTitle}`)}>
+ {session.title}
+ </h4>
  <p>{session.abstract}</p>
  <SessionSpeakerContainer>
  by{" "}
@@ -92,7 +92,7 @@ export const SessionListPage = () => {
  });
 
  return (
- <Page>
+ <Page title="세션 목록">
  <h1>{t("세션 목록")}</h1>
  <hr />
  <h6 style={{ paddingLeft: "1rem" }}>