Merge remote-tracking branch 'origin/develop'

Author: MU-Software

src/pages/Session/list.tsx

@@ -20,6 +20,7 @@ const SessionItem: React.FC<{ session: APIPretalxSessions[0] }> = ({ session })
     || R.isArray(session.speakers) && !R.isEmpty(session.speakers) && session.speakers[0].avatar
     || ""
   )
+  const urlSafeTitle = session.title.replace(/ /g, "-").replace(/(?![A-Za-zㄱ-ㅣ가-힣-])./g, "")
 
   return (
     <SessionItemEl>
@@ -31,7 +32,7 @@ const SessionItem: React.FC<{ session: APIPretalxSessions[0] }> = ({ session })
         />
       </SessionItemImgContainer>
       <SessionItemInfoContainer>
-        <h4 onClick={() => navigate(`/session/${session.code}`)}>{session.title}</h4>
+        <h4 onClick={() => navigate(`/session/${session.code}#${urlSafeTitle}`)}>{session.title}</h4>
         <p>{session.abstract}</p>
         <SessionSpeakerContainer>
           by{" "}

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,10 +110,11 @@ 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(/(?![A-Za-zㄱ-ㅣ가-힣-])./g, "")
   return (
     <td rowSpan={rowSpan} colSpan={colSpan}>
       <SessionBox
-        onClick={() => clickable && navigate(`/session/${session.code}`)}
+        onClick={() => clickable && navigate(`/session/${session.code}#${urlSafeTitle}`)}
         className={clickable ? "clickable" : ""}
         style={{ height: sessionBoxHeight }}
       >