From ea84f178917148e0ddf328a7e5f4a57da7c5cc17 Mon Sep 17 00:00:00 2001
From: y00eunji <aine0227@naver.com>
Date: Tue, 14 Jul 2026 13:43:38 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=84=B8=EC=85=98=20=EC=B0=9C=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=EC=99=80=20=EB=82=B4=20=EC=8B=9C=EA=B0=84=ED=91=9C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layout/UserMenuButton/index.tsx           |   9 +-
 .../src/components/pages/my-timetable.tsx     |  76 ++++
 .../pyconkr-2026/src/consts/mdx_components.ts |  13 +-
 .../features/schedule/my_timetable_grid.tsx   | 413 ++++++++++++++++++
 .../schedule/toggle_schedule_button.tsx       | 107 +++++
 .../src/features/schedule/use_my_schedule.ts  |  58 +++
 apps/pyconkr-2026/src/router.tsx              |   2 +
 .../mdx_components/session_list.tsx           |  23 +-
 .../mdx_components/session_timetable.tsx      |   2 +-
 9 files changed, 695 insertions(+), 8 deletions(-)
 create mode 100644 apps/pyconkr-2026/src/components/pages/my-timetable.tsx
 create mode 100644 apps/pyconkr-2026/src/features/schedule/my_timetable_grid.tsx
 create mode 100644 apps/pyconkr-2026/src/features/schedule/toggle_schedule_button.tsx
 create mode 100644 apps/pyconkr-2026/src/features/schedule/use_my_schedule.ts

diff --git a/apps/pyconkr-2026/src/components/layout/UserMenuButton/index.tsx b/apps/pyconkr-2026/src/components/layout/UserMenuButton/index.tsx
index b05099e7..81862665 100644
--- a/apps/pyconkr-2026/src/components/layout/UserMenuButton/index.tsx
+++ b/apps/pyconkr-2026/src/components/layout/UserMenuButton/index.tsx
@@ -2,7 +2,7 @@ import { useCommonContext } from "@frontend/common/hooks/useCommonContext";
 import { UserSignInAccount, UserSignInMethod } from "@frontend/shop/components/common";
 import { useShopClient, useSignOutMutation, useUserStatus } from "@frontend/shop/hooks";
 import { UserSignedInStatus } from "@frontend/shop/schemas";
-import { AccountCircle, Login, Logout, ManageAccounts, Receipt } from "@mui/icons-material";
+import { AccountCircle, CalendarMonth, Login, Logout, ManageAccounts, Receipt } from "@mui/icons-material";
 import { Button, Divider, IconButton, ListItemIcon, ListItemText, Menu, MenuItem, styled, Typography } from "@mui/material";
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { FC, MouseEvent, useState } from "react";
@@ -52,6 +52,7 @@ const InnerUserMenuButton: FC<InnerUserMenuButtonPropType> = ({ loading, user, o
   const handleMenuClose = () => setAnchorEl(null);
 
   const signInLabel = language === "ko" ? "로그인" : "Sign In";
+  const myTimetableLabel = language === "ko" ? "나의 세션 시간표 보기" : "View My Session Schedule";
   const orderHistoryLabel = language === "ko" ? "결제 내역" : "Order History";
   const manageAccountLabel = language === "ko" ? "계정 관리" : "Manage Account";
   const signOutLabel = language === "ko" ? "로그아웃" : "Sign Out";
@@ -109,6 +110,12 @@ const InnerUserMenuButton: FC<InnerUserMenuButtonPropType> = ({ loading, user, o
               </Typography>
             </UserNameItem>,
             <Divider key="divider" sx={{ my: 0.5 }} />,
+            <MenuItem key="my-timetable" component={RouterLink} to="/my-timetable" onClick={closeAll}>
+              <ListItemIcon>
+                <CalendarMonth fontSize="small" />
+              </ListItemIcon>
+              <ListItemText>{myTimetableLabel}</ListItemText>
+            </MenuItem>,
             <MenuItem key="orders" component={RouterLink} to="/store/order-histories" onClick={closeAll}>
               <ListItemIcon>
                 <Receipt fontSize="small" />
diff --git a/apps/pyconkr-2026/src/components/pages/my-timetable.tsx b/apps/pyconkr-2026/src/components/pages/my-timetable.tsx
new file mode 100644
index 00000000..3c16a043
--- /dev/null
+++ b/apps/pyconkr-2026/src/components/pages/my-timetable.tsx
@@ -0,0 +1,76 @@
+import { useBackendClient, useSessionsQuery } from "@frontend/common/hooks/useAPI";
+import { getSessionDetailUrl } from "@frontend/common/utils";
+import { useShopClient, useUserStatus } from "@frontend/shop/hooks";
+import { Button, CircularProgress, Stack, Typography } from "@mui/material";
+import { FC, useEffect, useMemo } from "react";
+import { Link as RouterLink } from "react-router-dom";
+
+import { PageLayout } from "@apps/pyconkr-2026/components/layout/PageLayout";
+import { EVENT_NAME } from "@apps/pyconkr-2026/consts";
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
+import { MyTimetableGrid, TimetablePlacement, TRACKS } from "@apps/pyconkr-2026/features/schedule/my_timetable_grid";
+import { useMyScheduleQuery } from "@apps/pyconkr-2026/features/schedule/use_my_schedule";
+
+export const MyTimetablePage: FC = () => {
+  const { language, setAppContext } = useAppContext();
+  const isKo = language === "ko";
+  const backendClient = useBackendClient();
+  const { data: user } = useUserStatus(useShopClient());
+  const isAuthenticated = user?.meta.is_authenticated === true;
+  const { data: sessions } = useSessionsQuery(backendClient, { event: EVENT_NAME, types: "세션" });
+  const eventId = sessions[0]?.presentation_type.event.id;
+  const { data: bookmarks, isLoading } = useMyScheduleQuery(backendClient, eventId, isAuthenticated);
+  const placements = useMemo(() => {
+    const selectedIds = new Set(bookmarks?.presentation_ids ?? []);
+    return sessions.flatMap((session) =>
+      selectedIds.has(session.id)
+        ? (session.room_schedules.length === TRACKS.length ? session.room_schedules.slice(0, 1) : session.room_schedules).flatMap(
+            (schedule): TimetablePlacement[] => {
+              const track = TRACKS.find(({ roomOrder }) => roomOrder === schedule.room_order);
+              const startMs = Date.parse(schedule.start_at);
+              const endMs = Date.parse(schedule.end_at);
+              if (!track || !Number.isFinite(startMs) || !Number.isFinite(endMs) || startMs >= endMs) return [];
+              return [
+                {
+                  key: `${session.id}:${schedule.id}`,
+                  trackKey: track.key,
+                  startMs,
+                  endMs,
+                  title: session.title,
+                  speakers: session.speakers.map(({ nickname }) => nickname).join(", ") || undefined,
+                  href: getSessionDetailUrl(session),
+                  trackSpan: session.room_schedules.length === TRACKS.length ? TRACKS.length : undefined,
+                },
+              ];
+            }
+          )
+        : []
+    );
+  }, [bookmarks, sessions]);
+
+  useEffect(() => {
+    setAppContext((prev) => ({
+      ...prev,
+      title: isKo ? "내 시간표" : "My Schedule",
+      shouldShowTitleBanner: true,
+      shouldShowSponsorBanner: false,
+    }));
+  }, [isKo, setAppContext]);
+
+  if (!isAuthenticated) {
+    return (
+      <PageLayout>
+        <Stack alignItems="center" spacing={2} sx={{ py: 6, textAlign: "center" }}>
+          <Typography variant="h5" fontWeight={800} children={isKo ? "로그인이 필요해요" : "Sign in required"} />
+          <Typography
+            color="text.secondary"
+            children={isKo ? "나의 세션 시간표를 보려면 로그인해 주세요." : "Sign in to view your session schedule."}
+          />
+          <Button component={RouterLink} to="/account/sign-in" variant="contained" children={isKo ? "로그인하기" : "Sign in"} />
+        </Stack>
+      </PageLayout>
+    );
+  }
+
+  return <PageLayout>{isLoading ? <CircularProgress /> : <MyTimetableGrid placements={placements} />}</PageLayout>;
+};
diff --git a/apps/pyconkr-2026/src/consts/mdx_components.ts b/apps/pyconkr-2026/src/consts/mdx_components.ts
index 74ab0aa5..2b222c80 100644
--- a/apps/pyconkr-2026/src/consts/mdx_components.ts
+++ b/apps/pyconkr-2026/src/consts/mdx_components.ts
@@ -18,6 +18,7 @@ import {
   SessionTimeTableTransposed,
   StyledFullWidthButton,
 } from "@frontend/common/components/mdx_components";
+import type { SessionSchema } from "@frontend/common/schemas/backendAPI";
 import { PriceDisplay, ShopContextProvider, SignInGuard, UserSignInAccount, UserSignInMethod } from "@frontend/shop/components/common";
 import { CartStatus, OrderList, PatronList, ProductImageCardList, ProductList, UserInfo } from "@frontend/shop/components/features";
 import {
@@ -146,7 +147,9 @@ import {
   Zoom,
 } from "@mui/material";
 import type { MDXComponents } from "mdx/types.js";
-import { FC, createElement } from "react";
+import { ComponentProps, FC, createElement } from "react";
+
+import { SessionScheduleToggleButton } from "@apps/pyconkr-2026/features/schedule/toggle_schedule_button";
 const MUIMDXComponents: MDXComponents = {
   Mui__material__Accordion: Accordion,
   Mui__material__AccordionActions: AccordionActions,
@@ -288,6 +291,12 @@ const PyConKR2025MobileCover: FC<object> = () =>
     coverTitleSrc: PyCon2025MobileLogoTitle,
   });
 
+const PyConKR2026SessionList: FC<ComponentProps<typeof SessionList>> = (props) =>
+  createElement(SessionList, {
+    ...props,
+    renderAction: (session: SessionSchema) => createElement(SessionScheduleToggleButton, { session }),
+  });
+
 const PyConKRCommonMDXComponents: MDXComponents = {
   Common__Components__Lottie: LottiePlayer,
   Common__Components__NetworkLottie: NetworkLottiePlayer,
@@ -297,7 +306,7 @@ const PyConKRCommonMDXComponents: MDXComponents = {
   Common__Components__MDX__Map: MDXMap,
   Common__Components__MDX__FAQAccordion: FAQAccordion,
   Common__Components__MDX__FullWidthStyledButton: StyledFullWidthButton,
-  Common__Components__Session__List: SessionList,
+  Common__Components__Session__List: PyConKR2026SessionList,
   Common__Components__Session__TimeTable: SessionTimeTable,
   Common__Components__Session__TimeTableTransposed: SessionTimeTableTransposed,
   Common__Components__MDX__MobileAccordion: PyConKR2025MobileAccordion,
diff --git a/apps/pyconkr-2026/src/features/schedule/my_timetable_grid.tsx b/apps/pyconkr-2026/src/features/schedule/my_timetable_grid.tsx
new file mode 100644
index 00000000..09868035
--- /dev/null
+++ b/apps/pyconkr-2026/src/features/schedule/my_timetable_grid.tsx
@@ -0,0 +1,413 @@
+import NorthEastRoundedIcon from "@mui/icons-material/NorthEastRounded";
+import { Box, Button, Stack, Typography } from "@mui/material";
+import { DateTime } from "luxon";
+import { FC, Fragment, useMemo } from "react";
+import { Link as RouterLink, useSearchParams } from "react-router-dom";
+
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
+
+const DAYS = ["2026-08-15", "2026-08-16"] as const;
+
+export const TRACKS = [
+  { key: "track1", label: "Track 1", location: "4층", rooms: "4142호, 4147호", roomOrder: 0, color: "#22b8cf" },
+  { key: "track2", label: "Track 2", location: "6층", rooms: "6141호, 6144호", roomOrder: 10, color: "#82c91e" },
+  { key: "track3", label: "Track 3", location: "원흥관", rooms: "E347, E350", roomOrder: 20, color: "#5c7cfa" },
+  { key: "dongguk", label: "동국대 세션", location: "5143호", rooms: "", roomOrder: 30, color: "#20c997" },
+] as const;
+
+const AFTERNOON_START_HOUR = 13;
+const AFTERNOON_START_MINUTE = 30;
+const SLOT_MINUTES = 10;
+const SLOT_MS = SLOT_MINUTES * 60_000;
+const ROW_HEIGHT = 30;
+
+type FixedProgram = {
+  start: string;
+  end: string;
+  label?: string;
+  speaker?: string;
+  title?: string;
+  height: number;
+  tone: "plain" | "keynote" | "break" | "lunch";
+};
+
+const FIXED_MORNING: Record<(typeof DAYS)[number], FixedProgram[]> = {
+  "2026-08-15": [
+    { start: "09:00", end: "09:20", label: "시작", height: 44, tone: "plain" },
+    { start: "09:20", end: "09:50", label: "오프닝", height: 48, tone: "plain" },
+    { start: "09:50", end: "10:20", speaker: "Deb Nicholson", title: "Python의 미래를 함께 만들어갑시다!", height: 68, tone: "keynote" },
+    { start: "10:20", end: "10:50", label: "쉬는 시간", height: 40, tone: "break" },
+    { start: "10:50", end: "11:20", speaker: "변성윤", title: "나는 그냥 행복하고 싶었다", height: 68, tone: "keynote" },
+    { start: "11:20", end: "13:30", label: "점심시간", height: 42, tone: "lunch" },
+  ],
+  "2026-08-16": [
+    { start: "09:00", end: "09:20", label: "시작", height: 44, tone: "plain" },
+    { start: "09:40", end: "09:50", label: "오프닝", height: 34, tone: "plain" },
+    {
+      start: "09:50",
+      end: "10:20",
+      speaker: "Cheuk",
+      title: "Python makes us hap.py — 내가 속할 수 있는 커뮤니티를 찾는 기쁨",
+      height: 68,
+      tone: "keynote",
+    },
+    { start: "10:20", end: "10:50", label: "쉬는 시간", height: 40, tone: "break" },
+    { start: "10:50", end: "11:20", speaker: "Hugo", title: "Python 릴리스 매니저가 되는 법", height: 68, tone: "keynote" },
+    { start: "11:20", end: "13:30", label: "점심시간", height: 42, tone: "lunch" },
+  ],
+};
+
+const FIXED_AFTERNOON = {
+  "2026-08-15": [{ start: "17:20", end: "18:00", label: "라이트닝 토크 ⚡", tone: "lightning" }],
+  "2026-08-16": [
+    { start: "17:20", end: "18:00", label: "라이트닝 토크 ⚡", tone: "lightning" },
+    { start: "18:00", end: "18:30", label: "클로징", tone: "closing" },
+  ],
+} as const;
+
+export type TimetablePlacement = {
+  key: string;
+  trackKey: string;
+  startMs: number;
+  endMs: number;
+  title: string;
+  speakers?: string;
+  href: string;
+  trackSpan?: number;
+};
+
+const SessionCard: FC<{ placement: TimetablePlacement; color: string }> = ({ placement, color }) => {
+  const compact = placement.endMs - placement.startMs <= 20 * 60_000;
+  return (
+    <Box
+      component={RouterLink}
+      to={placement.href}
+      sx={{
+        display: "flex",
+        height: "100%",
+        minWidth: 0,
+        flexDirection: "column",
+        overflow: "hidden",
+        border: `1px solid ${color}`,
+        borderRadius: "0.4rem",
+        background: `color-mix(in srgb, ${color} 24%, #1e1230)`,
+        color: "text.primary",
+        p: compact ? { xs: 0.3, sm: 0.45 } : { xs: 0.55, sm: 0.8 },
+        transition: "filter 0.15s ease",
+        "&:hover": { filter: "brightness(1.18)" },
+      }}
+    >
+      <Typography
+        sx={{
+          color: "text.secondary",
+          fontSize: compact ? { xs: "0.48rem", sm: "0.56rem" } : { xs: "0.55rem", sm: "0.66rem" },
+          lineHeight: 1,
+          whiteSpace: "nowrap",
+        }}
+      >
+        {DateTime.fromMillis(placement.startMs).toFormat("HH:mm")}–{DateTime.fromMillis(placement.endMs).toFormat("HH:mm")}
+      </Typography>
+      <Typography
+        title={placement.title}
+        sx={{
+          display: compact ? "block" : "-webkit-box",
+          overflow: "hidden",
+          WebkitBoxOrient: compact ? undefined : "vertical",
+          WebkitLineClamp: compact ? undefined : 2,
+          fontSize: compact ? { xs: "0.56rem", sm: "0.64rem" } : { xs: "0.64rem", sm: "0.78rem" },
+          fontWeight: 700,
+          lineHeight: compact ? 1 : 1.25,
+          textOverflow: "ellipsis",
+          whiteSpace: compact ? "nowrap" : undefined,
+          my: compact ? 0.2 : 0.35,
+        }}
+        children={placement.title}
+      />
+      {placement.speakers && (
+        <Typography
+          title={placement.speakers}
+          sx={{
+            mt: "auto",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            fontSize: compact ? { xs: "0.5rem", sm: "0.58rem" } : { xs: "0.56rem", sm: "0.66rem" },
+            lineHeight: 1,
+          }}
+          children={placement.speakers}
+        />
+      )}
+    </Box>
+  );
+};
+
+export const MyTimetableGrid: FC<{ placements: TimetablePlacement[] }> = ({ placements }) => {
+  const { language } = useAppContext();
+  const isKo = language === "ko";
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const placementsByDay = useMemo(() => {
+    const grouped = new Map<string, TimetablePlacement[]>();
+    placements.forEach((placement) => {
+      const day = DateTime.fromMillis(placement.startMs).toISODate() ?? "";
+      grouped.set(day, [...(grouped.get(day) ?? []), placement]);
+    });
+    return grouped;
+  }, [placements]);
+
+  const requestedDay = searchParams.get("day");
+  const firstSavedDay = DAYS.find((day) => placementsByDay.has(day));
+  const activeDay = DAYS.includes(requestedDay as (typeof DAYS)[number]) ? (requestedDay as (typeof DAYS)[number]) : (firstSavedDay ?? DAYS[0]);
+  const dayPlacements = placementsByDay.get(activeDay) ?? [];
+  const morningPrograms = FIXED_MORNING[activeDay];
+  const afternoonPrograms = FIXED_AFTERNOON[activeDay];
+  const dayStartMs = DateTime.fromISO(activeDay)
+    .set({ hour: AFTERNOON_START_HOUR, minute: AFTERNOON_START_MINUTE, second: 0, millisecond: 0 })
+    .toMillis();
+  const dayEndMs = DateTime.fromISO(`${activeDay}T${afternoonPrograms.at(-1)?.end}:00`).toMillis();
+  const timeSlots = Array.from({ length: (dayEndMs - dayStartMs) / SLOT_MS }, (_, index) => dayStartMs + index * SLOT_MS);
+
+  const selectDay = (day: string) =>
+    setSearchParams(
+      (previous) => {
+        const next = new URLSearchParams(previous);
+        next.set("day", day);
+        return next;
+      },
+      { replace: true }
+    );
+
+  return (
+    <Stack spacing={1.5} sx={{ width: "100%", minWidth: 0 }}>
+      <Button
+        component={RouterLink}
+        to="/session"
+        variant="text"
+        color="inherit"
+        endIcon={<NorthEastRoundedIcon />}
+        sx={{ alignSelf: "flex-end", fontWeight: 700, whiteSpace: "nowrap" }}
+        children={isKo ? "발표 추가" : "Add session"}
+      />
+
+      <Box sx={{ width: "100%", minWidth: 0, overflow: "hidden", border: "1px solid", borderColor: "divider", borderRadius: "0.75rem" }}>
+        <Stack direction="row" spacing={0} sx={{ borderBottom: "1px solid", borderColor: "divider" }}>
+          {DAYS.map((day, index) => (
+            <Button
+              key={day}
+              variant="text"
+              onClick={() => selectDay(day)}
+              sx={{
+                flex: 1,
+                minWidth: 0,
+                height: { xs: 52, sm: 58 },
+                p: 0,
+                borderRadius: 0,
+                borderRight: index === 0 ? "1px solid" : 0,
+                borderColor: "divider",
+                backgroundColor: day === activeDay ? "primary.main" : "transparent",
+                color: day === activeDay ? "primary.contrastText" : "primary.main",
+                fontSize: { xs: "0.82rem", sm: "1rem" },
+                fontWeight: 800,
+                lineHeight: 1,
+                whiteSpace: "nowrap",
+                "&:hover": { backgroundColor: day === activeDay ? "primary.main" : "action.hover" },
+              }}
+              children={`Day ${index + 1} · ${DateTime.fromISO(day).toFormat("M.d")}`}
+            />
+          ))}
+        </Stack>
+        <Box
+          sx={{
+            display: "grid",
+            width: "100%",
+            gridTemplateColumns: "clamp(48px, 9vw, 76px) repeat(4, minmax(0, 1fr))",
+            gridTemplateRows: `minmax(86px, auto) ${morningPrograms.map(({ height }) => `${height}px`).join(" ")} repeat(${timeSlots.length}, ${ROW_HEIGHT}px)`,
+          }}
+        >
+          <Box sx={{ borderRight: "1px solid", borderColor: "divider" }} />
+          {TRACKS.map((track) => (
+            <Stack
+              key={track.key}
+              alignItems="center"
+              justifyContent="center"
+              sx={{ minWidth: 0, px: { xs: 0.25, sm: 1 }, py: 1, borderRight: "1px solid", borderColor: "divider", textAlign: "center" }}
+            >
+              <Typography sx={{ fontSize: { xs: "0.65rem", sm: "0.85rem" }, fontWeight: 800, lineHeight: 1.2 }} children={track.label} />
+              <Typography sx={{ mt: 0.35, color: "text.secondary", fontSize: { xs: "0.55rem", sm: "0.68rem" }, lineHeight: 1.25 }}>
+                {track.location}
+                {track.rooms && (
+                  <>
+                    <br />
+                    {track.rooms}
+                  </>
+                )}
+              </Typography>
+            </Stack>
+          ))}
+
+          {morningPrograms.map((program, index) => (
+            <Fragment key={`${program.start}-${program.end}`}>
+              <Stack
+                justifyContent="center"
+                sx={{
+                  gridColumn: 1,
+                  gridRow: index + 2,
+                  minWidth: 0,
+                  px: { xs: 0.35, sm: 1 },
+                  borderTop: "1px solid",
+                  borderRight: "1px solid",
+                  borderColor: "divider",
+                  backgroundColor: "background.default",
+                }}
+              >
+                <Typography sx={{ fontSize: { xs: "0.58rem", sm: "0.74rem" }, fontWeight: 800, lineHeight: 1.15 }} children={program.start} />
+                <Typography
+                  sx={{ mt: 0.35, color: "text.secondary", fontSize: { xs: "0.52rem", sm: "0.64rem" }, lineHeight: 1.15 }}
+                  children={program.end}
+                />
+              </Stack>
+              <Stack
+                alignItems="center"
+                justifyContent="center"
+                sx={{
+                  gridColumn: "2 / -1",
+                  gridRow: index + 2,
+                  minWidth: 0,
+                  px: 1,
+                  borderTop: "1px solid",
+                  borderRight: "1px solid",
+                  borderColor: program.tone === "keynote" ? "rgba(245, 199, 61, 0.35)" : "divider",
+                  backgroundColor:
+                    program.tone === "keynote"
+                      ? "rgba(245, 199, 61, 0.1)"
+                      : program.tone === "lunch"
+                        ? "rgba(255, 255, 255, 0.025)"
+                        : "rgba(255, 255, 255, 0.012)",
+                  color: program.tone === "lunch" || program.tone === "break" ? "text.secondary" : "text.primary",
+                  textAlign: "center",
+                }}
+              >
+                {program.label ? (
+                  <Typography sx={{ fontSize: { xs: "0.64rem", sm: "0.78rem" }, fontWeight: program.tone === "plain" ? 700 : 500 }}>
+                    {program.label}
+                  </Typography>
+                ) : (
+                  <>
+                    <Typography
+                      sx={{ color: "text.secondary", fontSize: { xs: "0.54rem", sm: "0.64rem" }, lineHeight: 1.15 }}
+                      children={program.speaker}
+                    />
+                    <Typography
+                      title={program.title}
+                      sx={{
+                        maxWidth: "100%",
+                        mt: 0.35,
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap",
+                        fontSize: { xs: "0.62rem", sm: "0.78rem" },
+                        fontWeight: 700,
+                      }}
+                      children={program.title}
+                    />
+                  </>
+                )}
+              </Stack>
+            </Fragment>
+          ))}
+
+          {timeSlots.map((time, index) => (
+            <Stack
+              key={time}
+              justifyContent="center"
+              sx={{
+                gridColumn: 1,
+                gridRow: index + morningPrograms.length + 2,
+                minWidth: 0,
+                px: { xs: 0.35, sm: 1 },
+                borderTop: "1px solid",
+                borderRight: "1px solid",
+                borderColor: "divider",
+              }}
+            >
+              <Typography sx={{ color: "text.secondary", fontSize: { xs: "0.55rem", sm: "0.68rem" }, fontWeight: 700, lineHeight: 1 }}>
+                {DateTime.fromMillis(time).toFormat("H:mm")}
+              </Typography>
+            </Stack>
+          ))}
+
+          {TRACKS.map((track, trackIndex) => (
+            <Box
+              key={`${track.key}-timeline`}
+              sx={{
+                gridColumn: trackIndex + 2,
+                gridRow: `${morningPrograms.length + 2} / ${morningPrograms.length + timeSlots.length + 2}`,
+                minWidth: 0,
+                borderTop: "1px solid",
+                borderRight: "1px solid",
+                borderColor: "divider",
+                backgroundColor: "rgba(255, 255, 255, 0.018)",
+                backgroundImage: `repeating-linear-gradient(to bottom, transparent 0, transparent ${ROW_HEIGHT - 1}px, rgba(255, 255, 255, 0.08) ${ROW_HEIGHT - 1}px, rgba(255, 255, 255, 0.08) ${ROW_HEIGHT}px)`,
+              }}
+            />
+          ))}
+
+          {afternoonPrograms.map((program) => {
+            const startSlot = Math.round((DateTime.fromISO(`${activeDay}T${program.start}:00`).toMillis() - dayStartMs) / SLOT_MS);
+            const endSlot = Math.round((DateTime.fromISO(`${activeDay}T${program.end}:00`).toMillis() - dayStartMs) / SLOT_MS);
+            return (
+              <Stack
+                key={`${program.start}-${program.end}`}
+                alignItems="center"
+                justifyContent="center"
+                sx={{
+                  gridColumn: "2 / -1",
+                  gridRow: `${startSlot + morningPrograms.length + 2} / ${endSlot + morningPrograms.length + 2}`,
+                  minWidth: 0,
+                  borderTop: "1px solid",
+                  borderRight: "1px solid",
+                  borderColor: program.tone === "lightning" ? "rgba(245, 199, 61, 0.4)" : "divider",
+                  backgroundColor: program.tone === "lightning" ? "#3A321F" : "#282237",
+                  textAlign: "center",
+                  zIndex: 1,
+                }}
+              >
+                <Typography sx={{ color: "rgba(255, 255, 255, 0.72)", fontSize: { xs: "0.52rem", sm: "0.62rem" } }}>
+                  {program.start}–{program.end}
+                </Typography>
+                <Typography sx={{ mt: 0.25, fontSize: { xs: "0.66rem", sm: "0.8rem" }, fontWeight: 700 }} children={program.label} />
+              </Stack>
+            );
+          })}
+
+          {dayPlacements.map((placement) => {
+            const trackIndex = TRACKS.findIndex(({ key }) => key === placement.trackKey);
+            if (trackIndex < 0 || placement.endMs <= dayStartMs || placement.startMs >= dayEndMs) return null;
+            const startSlot = Math.max(0, Math.round((placement.startMs - dayStartMs) / SLOT_MS));
+            const endSlot = Math.min(timeSlots.length, Math.round((placement.endMs - dayStartMs) / SLOT_MS));
+            return (
+              <Box
+                key={placement.key}
+                sx={{
+                  gridColumn: `${trackIndex + 2} / span ${placement.trackSpan ?? 1}`,
+                  gridRow: `${startSlot + morningPrograms.length + 2} / ${Math.max(startSlot + 1, endSlot) + morningPrograms.length + 2}`,
+                  minWidth: 0,
+                  p: { xs: "3px", sm: "5px" },
+                  zIndex: 1,
+                }}
+              >
+                <SessionCard placement={placement} color={TRACKS[trackIndex].color} />
+              </Box>
+            );
+          })}
+        </Box>
+      </Box>
+
+      {dayPlacements.length === 0 && (
+        <Typography color="text.secondary" sx={{ textAlign: "center", fontSize: "0.82rem" }}>
+          {isKo ? "이 날 담은 발표가 없어요." : "No sessions saved for this day."}
+        </Typography>
+      )}
+    </Stack>
+  );
+};
diff --git a/apps/pyconkr-2026/src/features/schedule/toggle_schedule_button.tsx b/apps/pyconkr-2026/src/features/schedule/toggle_schedule_button.tsx
new file mode 100644
index 00000000..481769ef
--- /dev/null
+++ b/apps/pyconkr-2026/src/features/schedule/toggle_schedule_button.tsx
@@ -0,0 +1,107 @@
+import { useBackendClient } from "@frontend/common/hooks/useAPI";
+import { SessionSchema } from "@frontend/common/schemas/backendAPI";
+import { useShopClient, useUserStatus } from "@frontend/shop/hooks";
+import EventAvailableRoundedIcon from "@mui/icons-material/EventAvailableRounded";
+import EventBusyRoundedIcon from "@mui/icons-material/EventBusyRounded";
+import { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from "@mui/material";
+import { enqueueSnackbar } from "notistack";
+import { FC, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { useAppContext } from "@apps/pyconkr-2026/contexts/app_context";
+import { useMyScheduleQuery, useToggleMyScheduleMutation } from "@apps/pyconkr-2026/features/schedule/use_my_schedule";
+
+export type ToggleScheduleState = { kind: "add" } | { kind: "remove" } | { kind: "pending"; was: "add" | "remove" };
+
+const VIEW = {
+  add: { variant: "contained", label: { ko: "추가", en: "Add" }, Icon: EventAvailableRoundedIcon },
+  remove: { variant: "outlined", label: { ko: "빼기", en: "Remove" }, Icon: EventBusyRoundedIcon },
+} as const;
+
+export const ToggleScheduleButton: FC<{ state: ToggleScheduleState; onClick?: () => void }> = ({ state, onClick }) => {
+  const { language } = useAppContext();
+  const isKo = language === "ko";
+  const pending = state.kind === "pending";
+  const view = VIEW[pending ? state.was : state.kind];
+
+  return (
+    <Button
+      size="small"
+      variant={view.variant}
+      onClick={onClick}
+      disabled={pending}
+      startIcon={pending ? <CircularProgress size={16} color="inherit" /> : <view.Icon fontSize="small" />}
+      sx={{ minWidth: "4.5rem", fontWeight: 700, whiteSpace: "nowrap", flexShrink: 0 }}
+      children={isKo ? view.label.ko : view.label.en}
+    />
+  );
+};
+
+export const SessionScheduleToggleButton: FC<{ session: SessionSchema }> = ({ session }) => {
+  const { language } = useAppContext();
+  const navigate = useNavigate();
+  const [loginDialogOpen, setLoginDialogOpen] = useState(false);
+  const backendClient = useBackendClient();
+  const { data: user } = useUserStatus(useShopClient());
+  const eventId = session.presentation_type.event.id;
+  const isAuthenticated = user?.meta.is_authenticated === true;
+  const { data } = useMyScheduleQuery(backendClient, eventId, isAuthenticated);
+  const mutation = useToggleMyScheduleMutation(backendClient, eventId);
+  const isSaved = data?.presentation_ids.includes(session.id) ?? false;
+  const action = isSaved ? "remove" : "add";
+  const state: ToggleScheduleState = mutation.isPending ? { kind: "pending", was: mutation.variables?.action ?? action } : { kind: action };
+  const isKo = language === "ko";
+
+  const handleClick = () => {
+    if (!isAuthenticated) {
+      setLoginDialogOpen(true);
+      return;
+    }
+
+    mutation.mutate(
+      { presentationId: session.id, action },
+      {
+        onSuccess: () =>
+          enqueueSnackbar(
+            action === "add"
+              ? isKo
+                ? "내 시간표에 담았어요"
+                : "Added to your schedule"
+              : isKo
+                ? "내 시간표에서 삭제되었습니다"
+                : "Removed from your schedule",
+            { variant: action === "add" ? "success" : "info" }
+          ),
+        onError: () =>
+          enqueueSnackbar(isKo ? "문제가 발생했어요. 잠시 후 다시 시도해 주세요." : "Something went wrong. Please try again.", {
+            variant: "error",
+          }),
+      }
+    );
+  };
+
+  return (
+    <>
+      <ToggleScheduleButton state={state} onClick={handleClick} />
+      <Dialog open={loginDialogOpen} onClose={() => setLoginDialogOpen(false)} maxWidth="xs" fullWidth>
+        <DialogTitle children={isKo ? "로그인이 필요해요" : "Sign in required"} />
+        <DialogContent>
+          <DialogContentText
+            children={isKo ? "세션을 내 시간표에 담으려면 로그인이 필요합니다." : "You need to sign in to add sessions to your schedule."}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button color="inherit" onClick={() => setLoginDialogOpen(false)} children={isKo ? "취소" : "Cancel"} />
+          <Button
+            variant="contained"
+            onClick={() => {
+              setLoginDialogOpen(false);
+              navigate("/account/sign-in");
+            }}
+            children={isKo ? "로그인하러 가기" : "Go to sign in"}
+          />
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};
diff --git a/apps/pyconkr-2026/src/features/schedule/use_my_schedule.ts b/apps/pyconkr-2026/src/features/schedule/use_my_schedule.ts
new file mode 100644
index 00000000..8c6f92d5
--- /dev/null
+++ b/apps/pyconkr-2026/src/features/schedule/use_my_schedule.ts
@@ -0,0 +1,58 @@
+import { BackendAPIClient } from "@frontend/common/apis/client";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+export type PresentationBookmarkList = {
+  presentation_ids: string[];
+};
+
+export const myScheduleQueryKey = (eventId?: string) => ["query", "presentation-bookmarks", eventId] as const;
+
+export const useMyScheduleQuery = (client: BackendAPIClient, eventId?: string, enabled = true) =>
+  useQuery({
+    queryKey: myScheduleQueryKey(eventId),
+    queryFn: () => client.get<PresentationBookmarkList>(`v1/events/${eventId}/presentation-bookmarks/`),
+    enabled: Boolean(eventId) && enabled,
+    refetchOnMount: "always",
+    throwOnError: true,
+  });
+
+type ToggleScheduleVariables = {
+  presentationId: string;
+  action: "add" | "remove";
+};
+
+export const useToggleMyScheduleMutation = (client: BackendAPIClient, eventId: string) => {
+  const queryClient = useQueryClient();
+  const queryKey = myScheduleQueryKey(eventId);
+
+  return useMutation({
+    mutationKey: ["mutation", "presentation-bookmarks", eventId],
+    meta: { invalidates: [] },
+    mutationFn: async ({ presentationId, action }: ToggleScheduleVariables) => {
+      if (action === "add") {
+        await client.post<{ presentation_id: string }, { presentation: string }>(`v1/events/${eventId}/presentation-bookmarks/`, {
+          presentation: presentationId,
+        });
+        return;
+      }
+      await client.delete<void>(`v1/events/${eventId}/presentation-bookmarks/${presentationId}/`);
+    },
+    onMutate: ({ presentationId, action }) => {
+      queryClient.setQueryData<PresentationBookmarkList>(queryKey, (current = { presentation_ids: [] }) => ({
+        presentation_ids:
+          action === "add"
+            ? [...new Set([...current.presentation_ids, presentationId])]
+            : current.presentation_ids.filter((id) => id !== presentationId),
+      }));
+    },
+    onError: (_error, { presentationId, action }) => {
+      queryClient.setQueryData<PresentationBookmarkList>(queryKey, (current = { presentation_ids: [] }) => ({
+        presentation_ids:
+          action === "add"
+            ? current.presentation_ids.filter((id) => id !== presentationId)
+            : [...new Set([...current.presentation_ids, presentationId])],
+      }));
+    },
+    onSettled: () => queryClient.invalidateQueries({ queryKey }),
+  });
+};
diff --git a/apps/pyconkr-2026/src/router.tsx b/apps/pyconkr-2026/src/router.tsx
index 2f45d0b9..bba2253c 100644
--- a/apps/pyconkr-2026/src/router.tsx
+++ b/apps/pyconkr-2026/src/router.tsx
@@ -4,6 +4,7 @@ import { App } from "./App.tsx";
 import MainLayout from "./components/layout/index.tsx";
 import { PageIdParamRenderer, RouteRenderer } from "./components/pages/dynamic_route.tsx";
 import { MDXPreviewPage } from "./components/pages/mdx_preview.tsx";
+import { MyTimetablePage } from "./components/pages/my-timetable.tsx";
 import { PresentationDetailPage } from "./components/pages/presentation_detail.tsx";
 import { ShopSignInPage } from "./components/pages/sign_in.tsx";
 import { SponsorDetailPage } from "./components/pages/sponsor_detail.tsx";
@@ -20,6 +21,7 @@ export const router = createBrowserRouter([
         children: [
           { path: "/preview", element: <MDXPreviewPage /> },
           { path: "/account/sign-in", element: <ShopSignInPage /> },
+          { path: "/my-timetable", element: <MyTimetablePage /> },
           { path: "/store/cart", element: <StoreCartPage /> },
           { path: "/store/order-histories", element: <StoreOrderHistoriesPage /> },
           { path: "/store/thank-you-for-your-purchase", element: <StoreThankYouPage /> },
diff --git a/packages/common/src/components/mdx_components/session_list.tsx b/packages/common/src/components/mdx_components/session_list.tsx
index 3a6fcc27..6cc12a66 100644
--- a/packages/common/src/components/mdx_components/session_list.tsx
+++ b/packages/common/src/components/mdx_components/session_list.tsx
@@ -19,7 +19,8 @@ const SessionItem: FC<{
   session: SessionSchema;
   enableLink?: boolean;
   linkable?: boolean;
-}> = Suspense.with({ fallback: <CircularProgress /> }, ({ session, enableLink, linkable }) => {
+  renderAction?: (session: SessionSchema) => ReactNode;
+}> = Suspense.with({ fallback: <CircularProgress /> }, ({ session, enableLink, linkable, renderAction }) => {
   const sessionTitle = session.title.replace("\\n", "\n");
 
   let speakerImgSrc = session.image || "";
@@ -66,9 +67,22 @@ const SessionItem: FC<{
       </Stack>
     </SessionItemContainer>
   );
+  const linkedResult =
+    enableLink && sessionDetailedUrl ? (
+      <Link to={sessionDetailedUrl} style={{ textDecoration: "none", flexGrow: 1, minWidth: 0 }} children={result} />
+    ) : (
+      result
+    );
   return (
     <>
-      {enableLink && sessionDetailedUrl ? <Link to={sessionDetailedUrl} style={{ textDecoration: "none" }} children={result} /> : result}
+      {renderAction ? (
+        <Stack direction="row" sx={{ alignItems: "center", gap: 1 }}>
+          <Box sx={{ flexGrow: 1, minWidth: 0 }} children={linkedResult} />
+          <Box sx={{ pr: { xs: 1, md: 2 }, flexShrink: 0 }} children={renderAction(session)} />
+        </Stack>
+      ) : (
+        linkedResult
+      )}
       <StyledDivider />
     </>
   );
@@ -81,6 +95,7 @@ type SessionListPropType = {
   types?: string | string[];
   /** `true`면 각 세션을 상세 페이지 링크로 감싼다. */
   enableLink?: boolean;
+  renderAction?: (session: SessionSchema) => ReactNode;
 };
 
 /**
@@ -90,7 +105,7 @@ type SessionListPropType = {
  */
 export const SessionList: FC<SessionListPropType> = ErrorBoundary.with(
   { fallback: ErrorFallback },
-  Suspense.with({ fallback: <CircularProgress /> }, ({ event, types, enableLink }) => {
+  Suspense.with({ fallback: <CircularProgress /> }, ({ event, types, enableLink, renderAction }) => {
     const { language, appType } = Common.useCommonContext();
     const linkable = appType === "main";
     const backendAPIClient = BackendAPI.useBackendClient();
@@ -142,7 +157,7 @@ export const SessionList: FC<SessionListPropType> = ErrorBoundary.with(
           )}
         </Box>
         {filteredSessions.map((s) => (
-          <SessionItem key={s.id} session={s} enableLink={enableLink} linkable={linkable} />
+          <SessionItem key={s.id} session={s} enableLink={enableLink} linkable={linkable} renderAction={renderAction} />
         ))}
       </Box>
     );
diff --git a/packages/common/src/components/mdx_components/session_timetable.tsx b/packages/common/src/components/mdx_components/session_timetable.tsx
index 0079d249..1f0d65cd 100644
--- a/packages/common/src/components/mdx_components/session_timetable.tsx
+++ b/packages/common/src/components/mdx_components/session_timetable.tsx
@@ -106,7 +106,7 @@ export const SessionTimeTable: FC<SessionTimeTablePropType> = ErrorBoundary.with
     const sortedRoomList = Object.keys(rooms).sort((a, b) => roomOrders[a] - roomOrders[b] || a.localeCompare(b));
 
     const [selectedDate, setSelectedDate] = useState<string>(location.state?.selectedDate ?? (confDate || dates[0]));
-    const selectedTableData = timeTableData[selectedDate];
+    const selectedTableData = timeTableData[selectedDate] ?? {};
 
     let breakCount = 0;