From bb834f291f10c315137412c654a146c16a7e8d53 Mon Sep 17 00:00:00 2001
From: pr-citrate <pr.citrate@gmail.com>
Date: Wed, 13 Aug 2025 21:27:41 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=84=B8=EC=85=98=20=ED=83=80=EC=9E=84?=
 =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=EC=97=90=EC=84=9C=20Ctrl+=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=EC=9C=BC=EB=A1=9C=20=EC=83=88=20=ED=83=AD=20=EC=97=B4?=
 =?UTF-8?q?=EA=B8=B0=20=EC=A7=80=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mdx_components/session_timetable.tsx      | 41 ++++++++++++-------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/packages/common/src/components/mdx_components/session_timetable.tsx b/packages/common/src/components/mdx_components/session_timetable.tsx
index 1023c55..9f02cf5 100644
--- a/packages/common/src/components/mdx_components/session_timetable.tsx
+++ b/packages/common/src/components/mdx_components/session_timetable.tsx
@@ -2,7 +2,7 @@ import { Button, Chip, CircularProgress, Stack, styled, Table, TableBody, TableC
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { DateTime } from "luxon";
 import * as React from "react";
-import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 import * as R from "remeda";
 
 import Hooks from "../../hooks";
@@ -108,7 +108,6 @@ const SessionColumn: React.FC<{
   colSpan?: number;
   session: BackendAPISchemas.SessionSchema;
 }> = ({ rowSpan, colSpan, session }) => {
-  const navigate = useNavigate();
   const clickable = R.isArray(session.speakers) && !R.isEmpty(session.speakers);
   // Firefox는 rowSpan된 td의 height를 계산할 때 rowSpan을 고려하지 않습니다. 따라서 직접 계산하여 height를 설정합니다.
   const sessionBoxHeight = `${TD_HEIGHT * rowSpan}rem`;
@@ -118,18 +117,32 @@ const SessionColumn: React.FC<{
     .replace(/(?![.0-9A-Za-zㄱ-ㅣ가-힣-])./g, "");
   return (
     <SessionTableCell rowSpan={rowSpan} colSpan={colSpan}>
-      <SessionBox
-        onClick={() => clickable && navigate(`/presentations/${session.id}#${urlSafeTitle}`)}
-        className={clickable ? "clickable" : ""}
-        sx={{ height: sessionBoxHeight, gap: 0.75, padding: "0.5rem" }}
-      >
-        <SessionTitle children={session.title.replace("\\n", "\n")} align="center" />
-        <Stack direction="row" alignItems="center" justifyContent="center" sx={{ width: "100%", flexWrap: "wrap", gap: 0.5 }}>
-          {session.speakers.map((speaker) => (
-            <Chip key={speaker.id} size="small" label={speaker.nickname} />
-          ))}
-        </Stack>
-      </SessionBox>
+      {clickable ? (
+        <Link to={`/presentations/${session.id}#${urlSafeTitle}`} style={{ textDecoration: 'none', display: 'block' }}>
+          <SessionBox
+            className="clickable"
+            sx={{ height: sessionBoxHeight, gap: 0.75, padding: "0.5rem" }}
+          >
+            <SessionTitle children={session.title.replace("\\n", "\n")} align="center" />
+            <Stack direction="row" alignItems="center" justifyContent="center" sx={{ width: "100%", flexWrap: "wrap", gap: 0.5 }}>
+              {session.speakers.map((speaker) => (
+                <Chip key={speaker.id} size="small" label={speaker.nickname} />
+              ))}
+            </Stack>
+          </SessionBox>
+        </Link>
+      ) : (
+        <SessionBox
+          sx={{ height: sessionBoxHeight, gap: 0.75, padding: "0.5rem" }}
+        >
+          <SessionTitle children={session.title.replace("\\n", "\n")} align="center" />
+          <Stack direction="row" alignItems="center" justifyContent="center" sx={{ width: "100%", flexWrap: "wrap", gap: 0.5 }}>
+            {session.speakers.map((speaker) => (
+              <Chip key={speaker.id} size="small" label={speaker.nickname} />
+            ))}
+          </Stack>
+        </SessionBox>
+      )}
     </SessionTableCell>
   );
 };