From 70552ccde3a4d57fb067161f70c11aea807c745d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A4=80=EC=98=81?= <ff1451@gmail.com>
Date: Thu, 12 Mar 2026 14:46:30 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EA=B7=B8=EB=A6=BC=EC=9E=90=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

---
 src/components/layout/Header/components/NotificationBell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/layout/Header/components/NotificationBell.tsx b/src/components/layout/Header/components/NotificationBell.tsx
index c2e86f1..317254c 100644
--- a/src/components/layout/Header/components/NotificationBell.tsx
+++ b/src/components/layout/Header/components/NotificationBell.tsx
@@ -51,7 +51,7 @@ function NotificationBell({ showTooltip = false }: NotificationBellProps) {
         onClick={handleChatButtonClick}
         className={cn('relative inline-flex', shouldShowTooltip && 'chat-tooltip-anchor')}
       >
-        <ChatCatIcon />
+        <ChatCatIcon className="drop-shadow-[0_4px_4px_rgba(0,0,0,0.20)]" />
         {totalUnreadCount > 0 ? (
           <span className="absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-1 text-[10px] text-white">
             {totalUnreadCount > 99 ? '99+' : totalUnreadCount}

From 425e37f34c31c18e1cd44eb287a814326f3087f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A4=80=EC=98=81?= <ff1451@gmail.com>
Date: Thu, 12 Mar 2026 14:46:43 +0900
Subject: [PATCH 2/2] =?UTF-8?q?refactor:=20UI=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Schedule/components/ScheduleDetail.tsx    |  3 -
 src/pages/Schedule/index.tsx                  | 57 +++++++++++--------
 2 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/src/pages/Schedule/components/ScheduleDetail.tsx b/src/pages/Schedule/components/ScheduleDetail.tsx
index 8f0616b..c6cb7f2 100644
--- a/src/pages/Schedule/components/ScheduleDetail.tsx
+++ b/src/pages/Schedule/components/ScheduleDetail.tsx
@@ -47,9 +47,6 @@ function ScheduleDetail({ year, month, day, onItemClick }: scheduleDetailProps)
 
   return (
     <div ref={containerRef} className="flex flex-1 flex-col gap-2 overflow-y-auto bg-white px-6 pt-4 pb-6">
-      <span className="pb-1 text-[16px] leading-4 font-semibold">
-        {month}월 {day}일 일정
-      </span>
       {sortedSchedules.length ? (
         sortedSchedules.map(({ title, startedAt, endedAt, scheduleCategory }, index) => {
           const highlighted = isOnSelectedDay(startedAt, endedAt);
diff --git a/src/pages/Schedule/index.tsx b/src/pages/Schedule/index.tsx
index cc40f51..f1dc2f5 100644
--- a/src/pages/Schedule/index.tsx
+++ b/src/pages/Schedule/index.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import Portal from '@/components/common/Portal';
 import { SCHEDULE_DAYS } from '@/constants/schedule';
 import { dateUtils } from '@/utils/hooks/useSchedule';
 import CalendarWeekRow from './components/CalendarWeekRow';
@@ -15,7 +16,9 @@ const COLOR_LEGENDS = [
   { name: '기숙사', color: '#B9ADEF' },
 ];
 
+const HEADER_HEIGHT = 44;
 const PEEK_HEIGHT = 150;
+const SHEET_TOP_OFFSET = HEADER_HEIGHT + 200;
 
 function Schedule() {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -84,7 +87,7 @@ function Schedule() {
   });
 
   return (
-    <div className="relative flex h-[calc(100vh-44px)] flex-col overflow-hidden bg-white">
+    <div className="relative flex h-[calc(var(--viewport-height)-44px)] flex-col overflow-hidden bg-white">
       <div className="overflow-y-auto" style={{ maxHeight: `calc(100% - ${PEEK_HEIGHT}px)` }}>
         <main
           className="flex w-full shrink-0 touch-pan-y flex-col bg-white pt-[23px]"
@@ -124,30 +127,34 @@ function Schedule() {
         </ul>
       </div>
 
-      <div
-        className={`absolute inset-0 z-9 bg-black/40 transition-opacity duration-300 ${isSheetExpanded ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
-        onClick={() => setIsSheetExpanded(false)}
-      />
-
-      <section
-        className="absolute inset-x-0 bottom-0 z-10 flex flex-col rounded-t-3xl bg-white shadow-[0_-4px_12px_rgba(0,0,0,0.06)] transition-transform duration-300 ease-out"
-        style={{
-          height: `calc(100% - 200px)`,
-          transform: isSheetExpanded ? 'translateY(0)' : `translateY(calc(100% - ${PEEK_HEIGHT}px))`,
-        }}
-      >
-        <div
-          className="flex shrink-0 justify-center pt-3 pb-2"
-          onTouchStart={handleSheetTouchStart}
-          onTouchEnd={handleSheetTouchEnd}
-        >
-          <div className="h-1 w-8 rounded-full bg-[#D1D5DB]" />
-        </div>
-
-        <div className="flex flex-1 flex-col overflow-hidden">
-          <ScheduleDetail year={year} month={month} day={day} onItemClick={() => setIsSheetExpanded(true)} />
-        </div>
-      </section>
+      <Portal>
+        <>
+          <div
+            className={`fixed inset-0 z-[31] bg-black/40 transition-opacity duration-300 ${isSheetExpanded ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
+            onClick={() => setIsSheetExpanded(false)}
+          />
+
+          <section
+            className="fixed inset-x-0 bottom-0 z-[32] flex flex-col rounded-t-3xl bg-white shadow-[0_-4px_12px_rgba(0,0,0,0.06)] transition-transform duration-300 ease-out"
+            style={{
+              height: `calc(var(--viewport-height) - ${SHEET_TOP_OFFSET}px)`,
+              transform: isSheetExpanded ? 'translateY(0)' : `translateY(calc(100% - ${PEEK_HEIGHT}px))`,
+            }}
+          >
+            <div
+              className="flex shrink-0 justify-center pt-3 pb-2"
+              onTouchStart={handleSheetTouchStart}
+              onTouchEnd={handleSheetTouchEnd}
+            >
+              <div className="h-1 w-8 rounded-full bg-[#D1D5DB]" />
+            </div>
+
+            <div className="flex flex-1 flex-col overflow-hidden">
+              <ScheduleDetail year={year} month={month} day={day} onItemClick={() => setIsSheetExpanded(true)} />
+            </div>
+          </section>
+        </>
+      </Portal>
     </div>
   );
 }