Merge branch 'develop'

Author: emscb

src/api/session.ts

@@ -1,22 +1,22 @@
-import instance from "lib/axios"
-import { APIPretalxSessions } from "models/api/session"
+import instance from "lib/axios";
+import { APIPretalxSessions } from "models/api/session";
 
 export const listSessions = async () => {
-  const result = await instance.get('/2024/sessions/')
+  const result = await instance.get("/2024/sessions/");
   switch (result.status) {
     case 200:
-      return result.data as APIPretalxSessions
+      return result.data as APIPretalxSessions;
     default:
-      throw new Error('세션 목록을 불러오는데 실패했습니다,\n잠시 후 다시 시도해주세요.')
+      throw new Error("세션 목록을 불러오는데 실패했습니다,\n잠시 후 다시 시도해주세요.");
   }
-}
+};
 
-export const retriveSession = async (code: string) => {
-  const result = await instance.get(`/2024/sessions/${code}/`)
+export const retrieveSession = async (code: string) => {
+  const result = await instance.get(`/2024/sessions/${code}/`);
   switch (result.status) {
     case 200:
-      return result.data as APIPretalxSessions[0]
+      return result.data as APIPretalxSessions[0];
     default:
-      throw new Error('세션을 불러오는데 실패했습니다,\n잠시 후 다시 시도해주세요.')
+      throw new Error("세션을 불러오는데 실패했습니다,\n잠시 후 다시 시도해주세요.");
   }
-}
+};

src/components/common/FallbackImg/index.tsx

@@ -1,13 +1,17 @@
-import React from 'react'
+import React from "react";
 
 type FallbackImgProps = React.HTMLAttributes<HTMLImageElement> & {
-  src: string
-  alt: string
-  loading?: 'lazy' | 'eager'
-  errorFallback: React.ReactNode
-}
+  src: string;
+  alt: string;
+  loading?: "lazy" | "eager";
+  errorFallback: React.ReactNode;
+};
 
 export const FallbackImg: React.FC<FallbackImgProps> = (props) => {
-  const [isError, setIsError] = React.useState(false)
-  return isError ? props.errorFallback : <img src={props.src} alt={props.alt} onError={() => setIsError(true)} />
-}
+  const [isError, setIsError] = React.useState(!props.src ? true : false);
+  return isError ? (
+    props.errorFallback
+  ) : (
+    <img src={props.src} alt={props.alt} onError={() => setIsError(true)} />
+  );
+};

src/pages/Session/detail.tsx

@@ -1,47 +1,53 @@
-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 { useRetriveSessionQuery } from 'utils/hooks/useAPI'
-import useTranslation from "utils/hooks/useTranslation"
-
-const SessionSpeakerItem: React.FC<{ speaker: APIPretalxSessions[0]['speakers'][0] }> = ({ speaker }) => {
+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,
+}) => {
   return (
     <SessionSpeakerItemStyled>
       <SessionSpeakerImageContainerStyled>
-        <FallbackImg src={speaker.avatar ?? ''} alt={speaker.name} errorFallback={<SloganShort />} />
+        <FallbackImg
+          src={speaker.avatar ?? ""}
+          alt={speaker.name}
+          errorFallback={<SloganShort />}
+        />
       </SessionSpeakerImageContainerStyled>
       <div>
         <h3>{speaker.name}</h3>
         <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 = '한국어'
+    case "ko":
+      locale = "한국어";
       break;
-    case 'en':
-      locale = '영어'
+    case "en":
+      locale = "영어";
       break;
-    case 'ja':
-      locale = '일본어'
+    case "ja":
+      locale = "일본어";
       break;
     default:
-      locale = '알 수 없음'
+      locale = "알 수 없음";
   }
 
   return (
@@ -50,61 +56,75 @@ const SessionDetail: React.FC<{ session: APIPretalxSessions[0] }> = ({ session }
       <h4>{session.abstract}</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("발표 시간")} : {session.duration}
+          {t("분")}
+        </p>
+        <p>
+          {t("발표 장소")} :{" "}
+          {t(session.slot?.room[Object.keys(session.slot?.room ?? {})[0]] ?? "알 수 없음")}
+        </p>
         <p>
           <TagContainer>
-            <div style={{ margin: 0 }}>{t('태그')} :</div>
-            {session.tags.map(tag => <Tag key={tag}>{t(tag)}</Tag>)}
-            {session.do_not_record && <Tag>{t('녹화 불가')}</Tag>}
+            <div style={{ margin: 0 }}>{t("태그")} :</div>
+            {session.tags.map((tag) => (
+              <Tag key={tag}>{t(tag)}</Tag>
+            ))}
+            {session.do_not_record && <Tag>{t("녹화 불가")}</Tag>}
           </TagContainer>
         </p>
       </SessionInfoContainerStyled>
       <hr />
-      <h3>{t('설명')}</h3>
+      <h3>{t("설명")}</h3>
       <Markdown>{session.description}</Markdown>
       <hr />
-      <h3>{t('발표자 소개')}</h3>
-      {session.speakers.map(speaker => <SessionSpeakerItem speaker={speaker} key={speaker.code} />)}
+      <h3>{t("발표자 소개")}</h3>
+      {session.speakers.map((speaker) => (
+        <SessionSpeakerItem speaker={speaker} key={speaker.code} />
+      ))}
       <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 } = useRetriveSessionQuery(code)
-      return <SessionDetail session={data} />
-    })
+      const { data } = useRetrieveSessionQuery(code);
+      return <SessionDetail session={data} />;
+    });
 
   return (
     <Page>
-      <ReturnToSessionList onClick={() => navigate(-1)}>⬅️ {t('세션 목록으로 돌아가기')}</ReturnToSessionList>
+      <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 {
@@ -126,13 +146,13 @@ const SessionDetailStyled = styled.div`
       font-size: 1rem;
     }
   }
-`
+`;
 
 const SessionInfoContainerStyled = styled.div`
   * {
     margin: 0.5rem 0;
   }
-`
+`;
 
 const SessionSpeakerItemStyled = styled.div`
   display: flex;
@@ -145,7 +165,7 @@ const SessionSpeakerItemStyled = styled.div`
     margin-top: 0;
     color: #fff;
   }
-`
+`;
 
 const SessionSpeakerImageContainerStyled = styled.div`
   flex: 0 0 auto;
@@ -170,17 +190,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;
+`;