발표 시간 길이가 잘못 나오던 이슈 수정

Author: MU-Software

src/locale/English/translation.ts

@@ -6,6 +6,7 @@ const EnglishTranslation = {
   "파이콘 한국": "PyCon Korea",
   준비위원회: "Organizing Team",
   "언어 변경": "Change language",
+  "언어": "Language",
   Language: "언어",
   프로그램: "Program",
   기여하기: "Contribution",
@@ -261,8 +262,10 @@ const EnglishTranslation = {
   "발표 목록은 발표자 사정에 따라 변동될 수 있습니다.":
     "The list of presentations may change depending on the circumstances of the presenters.",
   "세션 목록으로 돌아가기": "Back to session list",
+  "발표 시각": "Date & Time",
   "발표 시간": "Duration",
   분: "min.",
+  "ko-KR": "en-US",
   "발표 장소": "Room",
   태그: "Tags",
   "녹화 불가": "Not recordable",

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,44 +29,52 @@ 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]])
   }
 
   return (
     <SessionDetailStyled>
       <h1>{session.title}</h1>
-      <h4>{session.abstract}</h4>
+      <h4><Markdown>{session.abstract}</Markdown></h4>
       <hr />
       <SessionInfoContainerStyled>
-        <p>
-          {t("언어")} : {t(locale)}
-        </p>
-        <p>
-          {t("발표 시간")} : {session.duration}
-          {t("분")}
-        </p>
-        <p>
-          {t("발표 장소")} :{" "}
-          {t(session.slot?.room[Object.keys(session.slot?.room ?? {})[0]] ?? "알 수 없음")}
-        </p>
+        <p>{`${t("언어")} : ${t(locale)}`}</p>
+        <p>{`${t("발표 시각")} : ${datetime} (${duration}${t("분")})`}</p>
+        <p>{`${t("발표 장소")} : ${room}`}</p>
         <p>
           <TagContainer>
             <div style={{ margin: 0 }}>{t("태그")} :</div>
@@ -87,29 +95,29 @@ 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>
@@ -118,13 +126,13 @@ export const SessionDetailPage: React.FC = () => {
       </ReturnToSessionList>
       <SessionDetailWrapper />
     </Page>
-  );
-};
+  )
+}
 
 const ReturnToSessionList = styled.small`
   color: rgba(255, 255, 255, 0.4);
   cursor: pointer;
-`;
+`
 
 const SessionDetailStyled = styled.div`
   h1 {
@@ -146,13 +154,13 @@ const SessionDetailStyled = styled.div`
       font-size: 1rem;
     }
   }
-`;
+`
 
 const SessionInfoContainerStyled = styled.div`
   * {
     margin: 0.5rem 0;
   }
-`;
+`
 
 const SessionSpeakerItemStyled = styled.div`
   display: flex;
@@ -165,7 +173,7 @@ const SessionSpeakerItemStyled = styled.div`
     margin-top: 0;
     color: #fff;
   }
-`;
+`
 
 const SessionSpeakerImageContainerStyled = styled.div`
   flex: 0 0 auto;
@@ -190,18 +198,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;
-`;
+`