From 9e9c392eebc6937410c348f3b7ea0e302348847a Mon Sep 17 00:00:00 2001
From: chlgusdn0203 <dudrjsdud@naver.com>
Date: Wed, 1 Jul 2026 15:07:54 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20web-11=20=EC=BA=98=EB=A6=B0?=
 =?UTF-8?q?=EB=8D=94=20=EC=9D=BC=EC=A0=95=20=EC=A1=B0=ED=9A=8C=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                   |   2 +
 .../images/Date_today_duotone_line1.svg       |   5 +
 .../images/Date_today_duotone_line2.svg       |   5 +
 src/assets/images/User1.svg                   |   4 +
 src/assets/images/User2.svg                   |   4 +
 src/components/layout/Header.jsx              |  65 +++-
 src/components/schedule/AllScheduleView.jsx   | 156 ++++++++++
 src/components/schedule/ScheduleCheckbox.jsx  |  23 ++
 src/components/schedule/ScheduleDropdown.jsx  |  81 +++++
 src/components/schedule/ScheduleTabs.jsx      |  26 ++
 src/constants/routes.js                       |   2 +
 src/constants/schedule.js                     |  10 +
 src/pages/admin/AdminCalendarView.jsx         | 279 ++++++++++++++++++
 src/pages/admin/AdminSchedulePage.jsx         | 270 +++++++++++++++++
 src/styles/ScheduleStyles.jsx                 |   9 +
 src/utils/schedule.js                         | 115 ++++++++
 tailwind.config.js                            |   4 +
 17 files changed, 1052 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/images/Date_today_duotone_line1.svg
 create mode 100644 src/assets/images/Date_today_duotone_line2.svg
 create mode 100644 src/assets/images/User1.svg
 create mode 100644 src/assets/images/User2.svg
 create mode 100644 src/components/schedule/AllScheduleView.jsx
 create mode 100644 src/components/schedule/ScheduleCheckbox.jsx
 create mode 100644 src/components/schedule/ScheduleDropdown.jsx
 create mode 100644 src/components/schedule/ScheduleTabs.jsx
 create mode 100644 src/constants/schedule.js
 create mode 100644 src/pages/admin/AdminCalendarView.jsx
 create mode 100644 src/pages/admin/AdminSchedulePage.jsx
 create mode 100644 src/styles/ScheduleStyles.jsx
 create mode 100644 src/utils/schedule.js

diff --git a/src/App.jsx b/src/App.jsx
index 95f3ff5..489b5cd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,6 +12,7 @@ import MemberPage from '@/pages/admin/MemberPage';
 import MemberRegisterPage from '@/pages/admin/MemberRegisterPage';
 import MemberEditPage from '@/pages/admin/MemberEditPage';
 import NotFoundPage from '@/pages/visitor/NotFoundPage';
+import AdminSchedulePage from '@/pages/admin/AdminSchedulePage';
 
 function App() {
   return (
@@ -29,6 +30,7 @@ function App() {
       <Route path={ROUTES.ADMIN_MEMBER} element={<MemberPage />} />
       <Route path={ROUTES.ADMIN_MEMBER_REGISTER} element={<MemberRegisterPage />} />
       <Route path={ROUTES.ADMIN_MEMBER_EDIT} element={<MemberEditPage />} />
+      <Route path={ROUTES.ADMIN_SCHEDULE} element={<AdminSchedulePage />} />
     </Routes>
   );
 }
diff --git a/src/assets/images/Date_today_duotone_line1.svg b/src/assets/images/Date_today_duotone_line1.svg
new file mode 100644
index 0000000..5916303
--- /dev/null
+++ b/src/assets/images/Date_today_duotone_line1.svg
@@ -0,0 +1,5 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="5.25" y="10.5" width="31.5" height="26.25" rx="2" stroke="#222222" stroke-width="1.2"/>
+<path d="M12.25 5.25L12.25 14" stroke="#222222" stroke-width="1.2" stroke-linecap="round"/>
+<path d="M29.75 5.25L29.75 14" stroke="#222222" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/images/Date_today_duotone_line2.svg b/src/assets/images/Date_today_duotone_line2.svg
new file mode 100644
index 0000000..4206f9d
--- /dev/null
+++ b/src/assets/images/Date_today_duotone_line2.svg
@@ -0,0 +1,5 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="5.25" y="10.5" width="31.5" height="26.25" rx="2" stroke="#FF6B00" stroke-width="1.2"/>
+<path d="M12.25 5.25L12.25 14" stroke="#FF6B00" stroke-width="1.2" stroke-linecap="round"/>
+<path d="M29.75 5.25L29.75 14" stroke="#FF6B00" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/images/User1.svg b/src/assets/images/User1.svg
new file mode 100644
index 0000000..93a38b8
--- /dev/null
+++ b/src/assets/images/User1.svg
@@ -0,0 +1,4 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.523 35.7824C33.7253 33.5498 31.9677 31.5769 29.5227 30.1698C27.0776 28.7627 24.0819 28 21 28C17.9181 28 14.9224 28.7627 12.4773 30.1698C10.0323 31.5769 8.27469 33.5497 7.47704 35.7824" stroke="#33363F" stroke-width="2" stroke-linecap="round"/>
+<circle cx="21" cy="14" r="7" stroke="#33363F" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/images/User2.svg b/src/assets/images/User2.svg
new file mode 100644
index 0000000..7af5623
--- /dev/null
+++ b/src/assets/images/User2.svg
@@ -0,0 +1,4 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.523 35.7824C33.7253 33.5498 31.9677 31.5769 29.5227 30.1698C27.0776 28.7627 24.0819 28 21 28C17.9181 28 14.9224 28.7627 12.4773 30.1698C10.0323 31.5769 8.27469 33.5497 7.47704 35.7824" stroke="#FF6B00" stroke-width="2" stroke-linecap="round"/>
+<circle cx="21" cy="14" r="7" stroke="#FF6B00" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
index 81e2918..5991fa5 100644
--- a/src/components/layout/Header.jsx
+++ b/src/components/layout/Header.jsx
@@ -1,17 +1,66 @@
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
+
 import { ROUTES } from '@/constants/routes';
+import calendarBlackIcon from '@/assets/images/Date_today_duotone_line1.svg';    //검정 아이콘
+import calendarOrangeIcon from '@/assets/images/Date_today_duotone_line2.svg';  //주황 아이콘
+
+import userBlackIcon from '@/assets/images/User1.svg';  //검정 아이콘
+import userOrangeIcon from '@/assets/images/User2.svg'; //주황 아이콘
 
 function Header() {
   return (
-    <header>
-      <nav>
-        <Link to={ROUTES.HOME}>ONE</Link>
-        <Link to={ROUTES.ABOUT}>동아리 소개</Link>
-        <Link to={ROUTES.SCHEDULE}>연간 계획</Link>
-        <Link to={ROUTES.RECRUIT}>모집 신청</Link>
+<header className="relative z-10 w-full bg-white shadow-header">
+        <nav className="flex items-center justify-center gap-20 px-6 py-6">
+        <NavLink to={ROUTES.SCHEDULE}>
+  {({ isActive }) => (
+    <div className="flex items-center gap-3">
+      <img
+        src={
+          isActive
+            ? calendarOrangeIcon
+            : calendarBlackIcon
+        }
+        alt=""
+        className="h-10 w-10 object-contain"
+      />
+
+    <span
+      className={`text-xl font-medium ${
+        isActive ? 'text-brand' : 'text-ink'
+      }`}
+    >
+        연간 계획
+      </span>
+    </div>
+  )}
+</NavLink>
+
+        <NavLink to={ROUTES.RECRUIT}>
+  {({ isActive }) => (
+    <div className="flex items-center gap-3">
+      <img
+        src={
+          isActive
+            ? userOrangeIcon
+            : userBlackIcon
+        }
+        alt=""
+        className="h-10 w-10 object-contain"
+      />
+
+      <span
+        className={`text-xl font-medium ${
+          isActive ? 'text-brand' : 'text-ink'
+        }`}
+      >
+        신입 부원 모집
+      </span>
+    </div>
+  )}
+</NavLink>
       </nav>
     </header>
   );
 }
 
-export default Header;
+export default Header;
\ No newline at end of file
diff --git a/src/components/schedule/AllScheduleView.jsx b/src/components/schedule/AllScheduleView.jsx
new file mode 100644
index 0000000..da9189a
--- /dev/null
+++ b/src/components/schedule/AllScheduleView.jsx
@@ -0,0 +1,156 @@
+import { useState } from 'react';
+import ScheduleCheckbox from '@/components/schedule/ScheduleCheckbox';
+import ScheduleDropdown from '@/components/schedule/ScheduleDropdown';
+import ScheduleTabs from '@/components/schedule/ScheduleTabs';
+import { formatScheduleDate } from '@/utils/schedule';
+
+const ACCENT_COLORS = ['#FFBA88', '#D95D03', '#F96B03', '#953E00', '#6C3E1E'];
+
+function getScheduleKey(schedule) {
+  return `${schedule.startDate}-${schedule.endDate}-${schedule.title}`;
+}
+
+function AllScheduleView({
+  yearDropdown,
+  view,
+  scheduleMonthEntries,
+  scheduleScroll,
+  onDeleteSchedule,
+}) {
+  const { year, yearOptions, isOpen: isYearDropdownOpen, handlers, scrollRefs } = yearDropdown;
+  const { viewMode, onViewModeChange } = view;
+  const { listRef, trackRef, thumbRef, onScroll } = scheduleScroll;
+
+  const [selectedKeys, setSelectedKeys] = useState(new Set());
+
+  const handleToggleSelect = (key) => {
+    setSelectedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+
+  const handleAddClick = () => {
+    onViewModeChange('calendar');
+  };
+
+  const handleDeleteClick = () => {
+    const toDelete = scheduleMonthEntries
+      .flatMap(([, monthSchedules]) => monthSchedules)
+      .filter((schedule) => selectedKeys.has(getScheduleKey(schedule)));
+    onDeleteSchedule?.(toDelete);
+    setSelectedKeys(new Set());
+  };
+
+  return (
+    <div className="flex h-full flex-col px-[18px] py-11 sm:px-11 xl:px-[60px] xl:py-0 xl:pt-[52px]">
+      <div className="mb-[14px] flex w-full items-center gap-4">
+        <ScheduleDropdown
+          config={{
+            label: '연도 선택',
+            options: yearOptions.slice().reverse(),
+            itemLabel: (option) => option,
+          }}
+          state={{ value: year, isOpen: isYearDropdownOpen }}
+          handlers={handlers}
+          scrollRefs={scrollRefs}
+          classNames={{
+            buttonWidthClass: 'w-[70px]',
+            itemHeightClass: 'h-[73px]',
+            itemTextClass: 'text-[20px]',
+            panelWidthClass: 'w-[455px]',
+            scrollTrackRightClass: 'right-[22px]',
+          }}
+        />
+        <ScheduleTabs viewMode={viewMode} onChange={onViewModeChange} className="ml-6" />
+        <div className="ml-auto flex items-center gap-2">
+          <button
+            type="button"
+            onClick={handleAddClick}
+            className="rounded-full bg-brand px-4 py-[7px] text-[13px] text-white transition-opacity hover:opacity-80"
+          >
+            일정 추가
+          </button>
+          <button
+            type="button"
+            onClick={handleDeleteClick}
+            className="rounded-full bg-brand px-4 py-[7px] text-[13px] text-white transition-opacity hover:opacity-80"
+          >
+            일정 삭제
+          </button>
+        </div>
+      </div>
+
+      <div className="relative min-h-0 flex-1">
+        <ol
+          ref={listRef}
+          onScroll={onScroll}
+          className="schedule-scroll h-full list-none overflow-y-auto p-0 pr-16"
+          style={{ scrollbarWidth: 'none' }}
+          aria-label="연간 일정 목록"
+        >
+          {scheduleMonthEntries.length === 0 && (
+            <li className="pt-10 text-center text-[16px] text-ink-sub">등록된 일정이 없습니다.</li>
+          )}
+          {scheduleMonthEntries.map(([monthKey, monthSchedules]) => {
+            const month = Number(monthKey.split('-')[1]);
+            return (
+              <li key={monthKey} className="mb-8">
+                <h3 className="mb-3 text-[30px] font-bold text-brand">{month}월</h3>
+                <div className="flex items-end gap-4">
+                  <ol className="min-w-0 flex-1 list-none p-0">
+                    {monthSchedules.map((schedule, index) => {
+                      const key = getScheduleKey(schedule);
+                      const isSelected = selectedKeys.has(key);
+                      const isRange = schedule.startDate !== schedule.endDate;
+                      return (
+                        <li
+                          key={key}
+                          className="flex min-w-0 items-center gap-3 border-b border-[#F1F3F7] py-3 text-[15px] leading-[1.3] last:border-b-0"
+                        >
+                          <ScheduleCheckbox
+                            checked={isSelected}
+                            onClick={() => handleToggleSelect(key)}
+                            label={`${schedule.title} 선택`}
+                          />
+                          <span
+                            className="h-[9px] w-[3px] shrink-0 rounded-[0.5px]"
+                            style={{ backgroundColor: ACCENT_COLORS[index % ACCENT_COLORS.length] }}
+                          />
+                          <time className="shrink-0 font-bold text-ink">
+                            {formatScheduleDate(schedule.startDate)}
+                            {isRange && ` ~ ${formatScheduleDate(schedule.endDate)}`}
+                          </time>
+                          <span className="min-w-0 flex-1 truncate text-right font-bold text-ink">
+                            {schedule.title}
+                          </span>
+                        </li>
+                      );
+                    })}
+                  </ol>
+                  <button
+                    type="button"
+                    onClick={() => setSelectedKeys(new Set())}
+                    className="mb-3 h-[32px] shrink-0 rounded-[6px] border border-brand bg-brand-soft px-[16px] text-[13px] text-brand transition-opacity hover:opacity-80"
+                  >
+                    완료
+                  </button>
+                </div>
+              </li>
+            );
+          })}
+        </ol>
+        <div
+          ref={trackRef}
+          className="pointer-events-none absolute right-2 top-0 h-full w-[12px] rounded-full bg-[#E4E4E4]"
+        >
+          <div ref={thumbRef} className="absolute hidden w-[12px] rounded-full bg-[#8A8A8A]" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AllScheduleView;
diff --git a/src/components/schedule/ScheduleCheckbox.jsx b/src/components/schedule/ScheduleCheckbox.jsx
new file mode 100644
index 0000000..0bf3b53
--- /dev/null
+++ b/src/components/schedule/ScheduleCheckbox.jsx
@@ -0,0 +1,23 @@
+function ScheduleCheckbox({ checked, onClick, label }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`flex h-[17px] w-[17px] shrink-0 items-center justify-center rounded-[3.5px] border transition-colors ${checked ? 'border-brand bg-brand' : 'border-line bg-white'}`}
+      aria-label={label}
+      aria-pressed={checked}
+    >
+      <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
+        <path
+          d="M1 4L3.5 6.5L9 1"
+          stroke={checked ? '#FFFFFF' : '#C4C4C4'}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </button>
+  );
+}
+
+export default ScheduleCheckbox;
diff --git a/src/components/schedule/ScheduleDropdown.jsx b/src/components/schedule/ScheduleDropdown.jsx
new file mode 100644
index 0000000..646d090
--- /dev/null
+++ b/src/components/schedule/ScheduleDropdown.jsx
@@ -0,0 +1,81 @@
+function ScheduleDropdown({ config, state, handlers, scrollRefs, classNames }) {
+  const { label, options, itemLabel } = config;
+  const { value, isOpen } = state;
+  const { onToggle, onSelect, onScroll } = handlers;
+  const { listRef, trackRef, thumbRef } = scrollRefs;
+  const {
+    buttonWidthClass,
+    itemHeightClass,
+    itemTextClass,
+    panelWidthClass,
+    scrollTrackRightClass,
+  } = classNames;
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        aria-label={label}
+        aria-expanded={isOpen}
+        onClick={onToggle}
+        className={`${buttonWidthClass} flex h-[33px] items-center justify-between rounded-[6px] border border-line bg-white px-2 text-[18px] text-ink`}
+      >
+        <span>{value}</span>
+        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" aria-hidden="true">
+          <path
+            d={isOpen ? 'M1 5L5 1L9 5' : 'M1 1L5 5L9 1'}
+            stroke="#1A1A1A"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div
+          className={`${panelWidthClass} absolute left-0 top-full z-20 mt-1 h-[404px] overflow-hidden rounded-[20px] border border-[#F1F3F7] bg-white shadow-[0px_13px_12.5px_0px_rgba(132,140,166,0.13)]`}
+        >
+          <div className="relative h-full p-[23px]">
+            <ul
+              ref={listRef}
+              onScroll={onScroll}
+              className="h-full w-[376px] divide-y divide-[#F1F3F7] overflow-y-auto"
+              style={{ scrollbarWidth: 'none' }}
+              role="listbox"
+              aria-label={label}
+            >
+              {options.map((option) => {
+                const isSelected = itemLabel(option) === value;
+                return (
+                  <li key={option} role="option" aria-selected={isSelected}>
+                    <button
+                      type="button"
+                      onClick={() => onSelect(option)}
+                      className={[
+                        itemHeightClass,
+                        itemTextClass,
+                        'flex w-full items-center px-[12px] text-left transition-colors',
+                        isSelected ? 'bg-brand text-white' : 'text-ink-sub hover:bg-brand-soft',
+                      ].join(' ')}
+                    >
+                      {itemLabel(option)}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+            <div
+              ref={trackRef}
+              className={`${scrollTrackRightClass} pointer-events-none absolute top-[23px] bottom-[23px] w-[12px] rounded-full bg-[#E4E4E4]`}
+            >
+              <div ref={thumbRef} className="absolute hidden w-[12px] rounded-full bg-[#8A8A8A]" />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ScheduleDropdown;
diff --git a/src/components/schedule/ScheduleTabs.jsx b/src/components/schedule/ScheduleTabs.jsx
new file mode 100644
index 0000000..a98a188
--- /dev/null
+++ b/src/components/schedule/ScheduleTabs.jsx
@@ -0,0 +1,26 @@
+const TABS = [
+  { value: 'calendar', label: '캘린더' },
+  { value: 'all', label: '전체일정' },
+];
+
+function ScheduleTabs({ viewMode, onChange, className }) {
+  return (
+    <div className={`flex gap-[14px] ${className ?? ''}`}>
+      {TABS.map((tab) => (
+        <button
+          key={tab.value}
+          type="button"
+          onClick={() => onChange(tab.value)}
+          className={[
+            'whitespace-nowrap rounded-[6px] border border-brand px-4 py-2 text-[13px] transition-colors',
+            viewMode === tab.value ? 'bg-brand text-white' : 'bg-section text-ink',
+          ].join(' ')}
+        >
+          {tab.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export default ScheduleTabs;
diff --git a/src/constants/routes.js b/src/constants/routes.js
index 194b0e8..83c4896 100644
--- a/src/constants/routes.js
+++ b/src/constants/routes.js
@@ -10,6 +10,8 @@ export const ROUTES = {
   ADMIN: '/admin',
   // 관리자 로그인: URL 직접 입력으로만 접근. 방문자 내비에 링크하지 않는다.
   ADMIN_LOGIN: '/admin/login',
+  // 관리자 캘린더: 연간 일정 관리 페이지
+  ADMIN_SCHEDULE: '/admin/schedule',
   // 명부 관리: 외부에 노출하지 않는 admin 히든 경로 하위에 둔다. 방문자 내비에 링크하지 않는다.
   ADMIN_MEMBER: '/admin/members',
   // 부원 등록: 명부 관리에서 '부원 등록' 클릭 시 이동하는 폼 화면.
diff --git a/src/constants/schedule.js b/src/constants/schedule.js
new file mode 100644
index 0000000..bc012a9
--- /dev/null
+++ b/src/constants/schedule.js
@@ -0,0 +1,10 @@
+export const WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+
+export const MONTH_OPTIONS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+export const DROPDOWN_TYPE = {
+  MONTH: 'month',
+  YEAR: 'year',
+};
+
+export const SCHEDULES = [];
diff --git a/src/pages/admin/AdminCalendarView.jsx b/src/pages/admin/AdminCalendarView.jsx
new file mode 100644
index 0000000..8b1747c
--- /dev/null
+++ b/src/pages/admin/AdminCalendarView.jsx
@@ -0,0 +1,279 @@
+import { useState } from 'react';
+import { MONTH_OPTIONS, WEEKDAYS } from '@/constants/schedule';
+import { formatAdminDate } from '@/utils/schedule';
+import ScheduleCheckbox from '@/components/schedule/ScheduleCheckbox';
+import ScheduleDropdown from '@/components/schedule/ScheduleDropdown';
+import ScheduleTabs from '@/components/schedule/ScheduleTabs';
+
+function AdminCalendarView({
+  calendar,
+  view,
+  schedules,
+  monthDropdown,
+  yearDropdown,
+  onAddSchedule,
+  onDeleteSchedule,
+  onSaveEdits,
+}) {
+  const { year, month, yearOptions, calendarDates, todayKey } = calendar;
+  const weeksCount = calendarDates.length / 7;
+  const { viewMode, onViewModeChange } = view;
+  const { scheduleDateKeys, visibleSchedules } = schedules;
+
+  const [selectedDateKey, setSelectedDateKey] = useState(todayKey);
+  const [isAddingSchedule, setIsAddingSchedule] = useState(false);
+  const [newScheduleTitle, setNewScheduleTitle] = useState('');
+  const [selectedIndexes, setSelectedIndexes] = useState(new Set());
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [editedSchedules, setEditedSchedules] = useState([]);
+
+  const handleDateClick = (dateKey) => {
+    setSelectedDateKey(dateKey);
+  };
+
+  const handleAddClick = () => {
+    setIsEditMode(false);
+    setEditedSchedules([]);
+    setIsAddingSchedule(true);
+    setNewScheduleTitle('');
+  };
+
+  const handleConfirm = () => {
+    if (isAddingSchedule) {
+      if (newScheduleTitle.trim()) {
+        onAddSchedule?.({ dateKey: selectedDateKey, title: newScheduleTitle });
+      }
+      setIsAddingSchedule(false);
+      setNewScheduleTitle('');
+    } else if (isEditMode) {
+      onSaveEdits?.(editedSchedules);
+      setIsEditMode(false);
+      setEditedSchedules([]);
+    } else {
+      setEditedSchedules([...visibleSchedules]);
+      setIsEditMode(true);
+    }
+  };
+
+  const handleToggleSelect = (index) => {
+    setSelectedIndexes((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) next.delete(index);
+      else next.add(index);
+      return next;
+    });
+  };
+
+  const handleDeleteClick = () => {
+    const toDelete = visibleSchedules.filter((_, i) => selectedIndexes.has(i));
+    onDeleteSchedule?.(toDelete);
+    setSelectedIndexes(new Set());
+  };
+
+  const handleEditTitle = (index, value) => {
+    setEditedSchedules((prev) => {
+      const next = [...prev];
+      next[index] = { ...next[index], title: value };
+      return next;
+    });
+  };
+
+  const displayList = isEditMode ? editedSchedules : visibleSchedules;
+
+  return (
+    /* h-full + flex-col: 카드 전체 높이를 채워 수정 버튼을 하단에 고정 */
+    <div className="flex h-full flex-col px-[18px] py-11 sm:px-11 sm:py-[72px] xl:px-[60px] xl:pb-[60px] xl:pt-[52px]">
+
+      {/* 콘텐츠 그리드: flex-1 로 남은 높이 전부 차지 */}
+      <div className="grid min-h-0 flex-1 grid-cols-1 gap-y-8 xl:grid-cols-[505px_24px_1fr] xl:items-stretch xl:gap-y-0">
+
+        {/* 왼쪽: 드롭다운 + 탭 + 캘린더 */}
+        <div className="h-auto w-full max-w-[505px] xl:self-start">
+          <div className="mb-[14px] flex w-full items-center gap-2" aria-label="달력 기간 선택">
+            <ScheduleDropdown
+              config={{
+                label: '월 선택',
+                options: MONTH_OPTIONS,
+                itemLabel: (monthOption) => `${monthOption + 1}월`,
+              }}
+              state={{ value: `${month + 1}월`, isOpen: monthDropdown.isOpen }}
+              handlers={monthDropdown.handlers}
+              scrollRefs={monthDropdown.scrollRefs}
+              classNames={{
+                buttonWidthClass: 'w-[58px]',
+                itemHeightClass: 'h-[40px]',
+                itemTextClass: 'text-[20px]',
+                panelWidthClass: 'w-[424px]',
+                scrollTrackRightClass: 'right-[6px]',
+              }}
+            />
+            <ScheduleDropdown
+              config={{
+                label: '연도 선택',
+                options: yearOptions.slice().reverse(),
+                itemLabel: (yearOption) => yearOption,
+              }}
+              state={{ value: year, isOpen: yearDropdown.isOpen }}
+              handlers={yearDropdown.handlers}
+              scrollRefs={yearDropdown.scrollRefs}
+              classNames={{
+                buttonWidthClass: 'w-[70px]',
+                itemHeightClass: 'h-[73px]',
+                itemTextClass: 'text-[20px]',
+                panelWidthClass: 'w-[455px]',
+                scrollTrackRightClass: 'right-[22px]',
+              }}
+            />
+            <ScheduleTabs viewMode={viewMode} onChange={onViewModeChange} className="ml-auto" />
+          </div>
+
+          <div
+            className={[
+              'grid h-auto grid-cols-7 items-center justify-items-center gap-y-[22px] sm:gap-y-[26px] xl:h-[340px] xl:gap-y-0',
+              weeksCount === 4 && 'xl:grid-rows-[52px_repeat(4,minmax(0,1fr))]',
+              weeksCount === 5 && 'xl:grid-rows-[52px_repeat(5,minmax(0,1fr))]',
+              weeksCount === 6 && 'xl:grid-rows-[52px_repeat(6,minmax(0,1fr))]',
+            ]
+              .filter(Boolean)
+              .join(' ')}
+            aria-label={`${year}년 ${month + 1}월 달력`}
+          >
+            {WEEKDAYS.map((weekday) => (
+              <div
+                key={weekday}
+                className="h-6 w-[34px] text-center text-[18px] font-semibold leading-6 text-ink-sub sm:w-10 xl:h-[30px] xl:w-[52px] xl:self-start xl:leading-[30px]"
+              >
+                {weekday}
+              </div>
+            ))}
+
+            {calendarDates.map((date) => {
+              const isSelected = date.key === selectedDateKey;
+              const hasSchedule = date.isCurrentMonth && scheduleDateKeys.has(date.key);
+
+              return (
+                <button
+                  key={date.key}
+                  type="button"
+                  onClick={() => date.isCurrentMonth && handleDateClick(date.key)}
+                  className={[
+                    'relative grid h-[31px] w-[34px] place-items-center text-[18px] font-normal leading-none sm:w-10 xl:h-[40px] xl:w-[40px]',
+                    isSelected
+                      ? 'h-10 w-10 rounded-[11px] bg-brand font-bold text-white shadow-schedule-day xl:h-10 xl:w-10'
+                      : '',
+                    hasSchedule && !isSelected
+                      ? 'after:absolute after:left-1/2 after:-top-3 after:h-2.5 after:w-2.5 after:-translate-x-1/2 after:rounded-full after:bg-brand after:content-[""]'
+                      : '',
+                    !isSelected && !date.isCurrentMonth ? 'text-schedule-inactive' : '',
+                    !isSelected && date.isCurrentMonth ? 'text-ink' : '',
+                  ]
+                    .filter(Boolean)
+                    .join(' ')}
+                >
+                  <span>{date.day}</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div />
+
+        {/* 오른쪽: 일정 목록 + 수정 버튼 */}
+        {/* h-full + flex-col: 그리드 셀 전체 높이를 채워 수정 버튼을 하단에 고정 */}
+        <div className="flex h-full min-w-0 flex-col xl:pt-[12px]">
+
+          {/* 추가 / 삭제 버튼 */}
+          <div className="mb-4 flex shrink-0 justify-end gap-2">
+            <button
+              type="button"
+              onClick={handleAddClick}
+              className="rounded-full bg-brand px-4 py-[7px] text-[13px] text-white transition-opacity hover:opacity-80"
+            >
+              일정 추가
+            </button>
+            <button
+              type="button"
+              onClick={handleDeleteClick}
+              className="rounded-full bg-brand px-4 py-[7px] text-[13px] text-white transition-opacity hover:opacity-80"
+            >
+              일정 삭제
+            </button>
+          </div>
+
+          {/* 일정 목록: flex-1 로 남은 공간 채우고 넘치면 스크롤 */}
+          <ol className="min-h-0 flex-1 list-none overflow-y-auto p-0" aria-label="주요 일정">
+            <div className="flex flex-col gap-[26px]">
+              {displayList.map((schedule, index) => {
+                const isChecked = selectedIndexes.has(index);
+                return (
+                  <li
+                    key={`${schedule.startDate}-${schedule.endDate}-${schedule.title}-${index}`}
+                    className="flex min-w-0 items-center gap-4 text-[16px] leading-[1.3]"
+                  >
+                    {/* 편집 모드일 때 체크박스 숨김 */}
+                    {!isEditMode && (
+                      <ScheduleCheckbox
+                        checked={isChecked}
+                        onClick={() => handleToggleSelect(index)}
+                        label={`${schedule.title} 선택`}
+                      />
+                    )}
+                    <time className="w-[190px] shrink-0 font-bold text-ink">
+                      {formatAdminDate(schedule.startDate)} ~ {formatAdminDate(schedule.endDate)}
+                    </time>
+                    {isEditMode ? (
+                      <input
+                        type="text"
+                        value={editedSchedules[index]?.title ?? schedule.title}
+                        onChange={(e) => handleEditTitle(index, e.target.value)}
+                        className="min-w-0 flex-1 border-b border-brand bg-transparent text-[16px] text-ink outline-none"
+                      />
+                    ) : (
+                      <span className="min-w-0 truncate font-normal text-ink-sub">{schedule.title}</span>
+                    )}
+                  </li>
+                );
+              })}
+
+              {isAddingSchedule && (
+                <li className="flex min-w-0 items-center gap-4 text-[16px] leading-[1.3]">
+                  <div className="flex h-[17px] w-[17px] shrink-0 items-center justify-center rounded-full border border-brand bg-white">
+                    <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
+                      <path d="M4.5 1V8M1 4.5H8" stroke="#FF6B00" strokeWidth="1.5" strokeLinecap="round" />
+                    </svg>
+                  </div>
+                  <time className="w-[190px] shrink-0 font-bold text-ink">
+                    {formatAdminDate(selectedDateKey)} ~
+                  </time>
+                  <input
+                    type="text"
+                    autoFocus
+                    value={newScheduleTitle}
+                    onChange={(e) => setNewScheduleTitle(e.target.value)}
+                    onKeyDown={(e) => e.key === 'Enter' && handleConfirm()}
+                    placeholder="새로운 일정을 작성하세요"
+                    className="min-w-0 flex-1 border-b border-brand bg-transparent text-[16px] text-ink outline-none placeholder:text-[#9f9f9f]"
+                  />
+                </li>
+              )}
+            </div>
+          </ol>
+
+          {/* 수정/완료 버튼: shrink-0 으로 항상 하단 고정 */}
+          <div className="flex shrink-0 justify-end pt-8">
+            <button
+              type="button"
+              onClick={handleConfirm}
+              className="h-[32px] w-[96px] rounded-[6px] bg-brand px-[14px] py-[6px] text-[14px] text-white transition-opacity hover:opacity-80"
+            >
+              {isEditMode || isAddingSchedule ? '완료' : '수정'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AdminCalendarView;
diff --git a/src/pages/admin/AdminSchedulePage.jsx b/src/pages/admin/AdminSchedulePage.jsx
new file mode 100644
index 0000000..1ba7c3b
--- /dev/null
+++ b/src/pages/admin/AdminSchedulePage.jsx
@@ -0,0 +1,270 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import Header from '@/components/layout/Header';
+import AllScheduleView from '@/components/schedule/AllScheduleView';
+import AdminCalendarView from '@/pages/admin/AdminCalendarView';
+import ScheduleStyles from '@/styles/ScheduleStyles';
+import { DROPDOWN_TYPE, SCHEDULES } from '@/constants/schedule';
+import {
+  formatAdminDate,
+  formatDateKey,
+  getCalendarDates,
+  getScheduleDateKeys,
+  groupSchedulesByMonth,
+  isScheduleInMonth,
+  parseLocalDate,
+  sortByStartDate,
+  updateScrollThumb,
+} from '@/utils/schedule';
+
+function AdminSchedulePage() {
+  const monthListRef = useRef(null);
+  const monthTrackRef = useRef(null);
+  const monthThumbRef = useRef(null);
+  const yearListRef = useRef(null);
+  const yearTrackRef = useRef(null);
+  const yearThumbRef = useRef(null);
+  const allScheduleListRef = useRef(null);
+  const allScheduleTrackRef = useRef(null);
+  const allScheduleThumbRef = useRef(null);
+
+  const today = useMemo(() => new Date(), []);
+  const todayKey = useMemo(() => formatDateKey(today), [today]);
+  const currentYear = today.getFullYear();
+  const yearOptions = useMemo(
+    () => Array.from({ length: currentYear - 2022 + 1 }, (_, index) => 2022 + index),
+    [currentYear]
+  );
+
+  const [year, setYear] = useState(currentYear);
+  const [month, setMonth] = useState(today.getMonth());
+  const [openedDropdown, setOpenedDropdown] = useState(null);
+  const [viewMode, setViewMode] = useState('calendar');
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [schedulesToDelete, setSchedulesToDelete] = useState([]);
+  const [localSchedules, setLocalSchedules] = useState([]);
+
+  const allSchedules = useMemo(() => [...SCHEDULES, ...localSchedules], [localSchedules]);
+
+  const calendarDates = useMemo(() => getCalendarDates(year, month), [year, month]);
+  const scheduleDateKeys = useMemo(() => getScheduleDateKeys(allSchedules), [allSchedules]);
+  const visibleSchedules = useMemo(() => {
+    const filteredSchedules =
+      viewMode === 'all'
+        ? allSchedules.filter((schedule) => parseLocalDate(schedule.startDate).getFullYear() === year)
+        : allSchedules.filter((schedule) => isScheduleInMonth(schedule, year, month));
+    return [...filteredSchedules].sort(sortByStartDate);
+  }, [allSchedules, month, viewMode, year]);
+  const scheduleMonthEntries = useMemo(
+    () => Object.entries(groupSchedulesByMonth(visibleSchedules)),
+    [visibleSchedules]
+  );
+
+  const isMonthDropdownOpen = openedDropdown === DROPDOWN_TYPE.MONTH;
+  const isYearDropdownOpen = openedDropdown === DROPDOWN_TYPE.YEAR;
+
+  const handleMonthScroll = () => {
+    updateScrollThumb(monthListRef.current, monthTrackRef.current, monthThumbRef.current);
+  };
+  const handleYearScroll = () => {
+    updateScrollThumb(yearListRef.current, yearTrackRef.current, yearThumbRef.current);
+  };
+  const handleAllScheduleScroll = () => {
+    updateScrollThumb(
+      allScheduleListRef.current,
+      allScheduleTrackRef.current,
+      allScheduleThumbRef.current
+    );
+  };
+  const handleViewModeChange = (nextViewMode) => {
+    setViewMode(nextViewMode);
+    setOpenedDropdown(null);
+  };
+
+  const handleAddSchedule = ({ dateKey, title }) => {
+    setLocalSchedules((prev) => [
+      ...prev,
+      { id: `local-${Date.now()}`, startDate: dateKey, endDate: dateKey, title },
+    ]);
+  };
+
+  const handleSaveEdits = (updatedSchedules) => {
+    setLocalSchedules((prev) =>
+      prev.map((s) => {
+        const edited = updatedSchedules.find((u) => u.id === s.id);
+        return edited ? { ...s, title: edited.title } : s;
+      })
+    );
+  };
+  const handleDeleteSchedule = (toDelete) => {
+    if (!toDelete || toDelete.length === 0) return;
+    setSchedulesToDelete(toDelete);
+    setIsDeleteModalOpen(true);
+  };
+  const handleDeleteConfirm = () => {
+    setLocalSchedules((prev) =>
+      prev.filter(
+        (s) =>
+          !schedulesToDelete.some(
+            (d) => d.startDate === s.startDate && d.endDate === s.endDate && d.title === s.title
+          )
+      )
+    );
+    setIsDeleteModalOpen(false);
+    setSchedulesToDelete([]);
+  };
+  const handleDeleteCancel = () => {
+    setIsDeleteModalOpen(false);
+  };
+
+  useEffect(() => {
+    const rafIds = [];
+    if (isMonthDropdownOpen) rafIds.push(requestAnimationFrame(() => handleMonthScroll()));
+    if (isYearDropdownOpen) rafIds.push(requestAnimationFrame(() => handleYearScroll()));
+    if (viewMode === 'all') rafIds.push(requestAnimationFrame(() => handleAllScheduleScroll()));
+    return () => {
+      rafIds.forEach(cancelAnimationFrame);
+    };
+  }, [isMonthDropdownOpen, isYearDropdownOpen, viewMode, scheduleMonthEntries]);
+
+  return (
+    <>
+      <Header />
+      <section
+        className={[
+          'min-h-screen bg-brand-soft px-4 py-7 lg:px-6 lg:py-12 xl:min-h-[1024px] xl:py-[77px]',
+          viewMode === 'all'
+            ? 'xl:px-[max(24px,calc((100vw-1253px)/2))]'
+            : 'xl:px-[max(24px,calc((100vw-1068px)/2))]',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        aria-labelledby="admin-schedule-title"
+      >
+        <ScheduleStyles />
+        <h2 id="admin-schedule-title" className="sr-only">
+          연간 계획 (관리자)
+        </h2>
+
+      <div
+        className="relative mx-auto"
+        style={{ width: viewMode === 'all' ? '1253px' : '1068px', maxWidth: '100%' }}
+      >
+
+        <div className="h-auto min-h-[683px] w-full rounded-[50px] bg-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] xl:h-[683px]">
+          {viewMode === 'all' ? (
+            <AllScheduleView
+              yearDropdown={{
+                year,
+                yearOptions,
+                isOpen: isYearDropdownOpen,
+                handlers: {
+                  onToggle: () =>
+                    setOpenedDropdown(isYearDropdownOpen ? null : DROPDOWN_TYPE.YEAR),
+                  onSelect: (yearOption) => {
+                    setYear(yearOption);
+                    setOpenedDropdown(null);
+                  },
+                  onScroll: handleYearScroll,
+                },
+                scrollRefs: {
+                  listRef: yearListRef,
+                  trackRef: yearTrackRef,
+                  thumbRef: yearThumbRef,
+                },
+              }}
+              view={{ viewMode, onViewModeChange: handleViewModeChange }}
+              scheduleMonthEntries={scheduleMonthEntries}
+              scheduleScroll={{
+                listRef: allScheduleListRef,
+                trackRef: allScheduleTrackRef,
+                thumbRef: allScheduleThumbRef,
+                onScroll: handleAllScheduleScroll,
+              }}
+              onDeleteSchedule={handleDeleteSchedule}
+            />
+          ) : (
+        <AdminCalendarView
+        calendar={{ year, month, yearOptions, calendarDates, todayKey }}
+        view={{ viewMode, onViewModeChange: handleViewModeChange }}
+        schedules={{ scheduleDateKeys, visibleSchedules }}
+        monthDropdown={{
+            isOpen: isMonthDropdownOpen,
+            handlers: {
+            onToggle: () => setOpenedDropdown(isMonthDropdownOpen ? null : DROPDOWN_TYPE.MONTH),
+            onSelect: (monthOption) => { setMonth(monthOption); setOpenedDropdown(null); },
+            onScroll: handleMonthScroll,
+            },
+            scrollRefs: { listRef: monthListRef, trackRef: monthTrackRef, thumbRef: monthThumbRef },
+        }}
+        yearDropdown={{
+            isOpen: isYearDropdownOpen,
+            handlers: {
+            onToggle: () => setOpenedDropdown(isYearDropdownOpen ? null : DROPDOWN_TYPE.YEAR),
+            onSelect: (yearOption) => { setYear(yearOption); setOpenedDropdown(null); },
+            onScroll: handleYearScroll,
+            },
+            scrollRefs: { listRef: yearListRef, trackRef: yearTrackRef, thumbRef: yearThumbRef },
+        }}
+        onAddSchedule={handleAddSchedule}
+        onDeleteSchedule={handleDeleteSchedule}
+        onSaveEdits={handleSaveEdits}
+        />
+          )}
+        </div>
+      </div>
+
+      {/* 일정 삭제 확인 모달 */}
+      {isDeleteModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+          <div className="w-[305px] overflow-hidden rounded-[10px] bg-white shadow-[1px_1px_40px_0px_rgba(0,0,0,0.35)]">
+            {/* 헤더 */}
+            <div className="flex items-center justify-between border-b border-[#ccc] px-[22px] py-[14px]">
+              <span className="text-[14px] font-medium text-ink">
+                {schedulesToDelete.length > 0
+                  ? `${formatAdminDate(schedulesToDelete[0].startDate)} ~ ${formatAdminDate(schedulesToDelete[0].endDate)}`
+                  : `${month + 1}월 일정`}
+              </span>
+              <button
+                type="button"
+                onClick={handleDeleteCancel}
+                className="flex h-[22px] w-[22px] items-center justify-center text-ink"
+                aria-label="닫기"
+              >
+                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                  <path d="M11 3L3 11M3 3L11 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+                </svg>
+              </button>
+            </div>
+
+            {/* 본문 */}
+            <div className="px-[22px] py-[24px]">
+              <p className="text-[14px] text-ink">일정을 삭제하시겠습니까?</p>
+            </div>
+
+            {/* 푸터 버튼 */}
+            <div className="flex items-center justify-end gap-[6px] bg-brand-soft px-[12px] py-[13px]">
+              <button
+                type="button"
+                onClick={handleDeleteCancel}
+                className="h-[34px] rounded-[6px] border border-brand bg-white px-[16px] text-[14px] text-ink"
+              >
+                취소
+              </button>
+              <button
+                type="button"
+                onClick={handleDeleteConfirm}
+                className="h-[34px] rounded-[6px] bg-brand px-[16px] text-[14px] text-white"
+              >
+                확인
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+      </section>
+    </>
+  );
+}
+
+export default AdminSchedulePage;
\ No newline at end of file
diff --git a/src/styles/ScheduleStyles.jsx b/src/styles/ScheduleStyles.jsx
new file mode 100644
index 0000000..2201168
--- /dev/null
+++ b/src/styles/ScheduleStyles.jsx
@@ -0,0 +1,9 @@
+const STYLES = `
+  .schedule-scroll::-webkit-scrollbar { display: none; }
+`;
+
+function ScheduleStyles() {
+  return <style>{STYLES}</style>;
+}
+
+export default ScheduleStyles;
diff --git a/src/utils/schedule.js b/src/utils/schedule.js
new file mode 100644
index 0000000..0333fc5
--- /dev/null
+++ b/src/utils/schedule.js
@@ -0,0 +1,115 @@
+export function formatDateKey(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+export function parseLocalDate(dateString) {
+  const [year, month, day] = dateString.split('-').map(Number);
+  return new Date(year, month - 1, day);
+}
+
+const KO_DAYS = ['일', '월', '화', '수', '목', '금', '토'];
+
+export function formatAdminDate(dateString) {
+  const [year, month, day] = dateString.split('-').map(Number);
+  const date = new Date(year, month - 1, day);
+  const mm = String(month).padStart(2, '0');
+  const dd = String(day).padStart(2, '0');
+  return `${mm}.${dd} (${KO_DAYS[date.getDay()]})`;
+}
+
+export function formatScheduleDate(dateString) {
+  const [, month, day] = dateString.split('-').map(Number);
+  return `${month}월 ${day}일`;
+}
+
+export function getCalendarDates(year, month) {
+  const firstDayOfWeek = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const prevMonthDays = new Date(year, month, 0).getDate();
+  const dates = [];
+
+  const prevDaysCount = (firstDayOfWeek + 6) % 7;
+  for (let i = prevDaysCount - 1; i >= 0; i--) {
+    const day = prevMonthDays - i;
+    const prevMonth = month === 0 ? 11 : month - 1;
+    const prevYear = month === 0 ? year - 1 : year;
+    dates.push({
+      day,
+      key: `${prevYear}-${String(prevMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
+      isCurrentMonth: false,
+    });
+  }
+
+  for (let day = 1; day <= daysInMonth; day++) {
+    dates.push({
+      day,
+      key: `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
+      isCurrentMonth: true,
+    });
+  }
+
+  const remaining = (7 - (dates.length % 7)) % 7;
+  const nextMonth = month === 11 ? 0 : month + 1;
+  const nextYear = month === 11 ? year + 1 : year;
+  for (let day = 1; day <= remaining; day++) {
+    dates.push({
+      day,
+      key: `${nextYear}-${String(nextMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`,
+      isCurrentMonth: false,
+    });
+  }
+
+  return dates;
+}
+
+export function getScheduleDateKeys(schedules) {
+  const keys = new Set();
+  schedules.forEach(({ startDate, endDate }) => {
+    const start = parseLocalDate(startDate);
+    const end = parseLocalDate(endDate);
+    for (const current = new Date(start); current <= end; current.setDate(current.getDate() + 1)) {
+      keys.add(formatDateKey(new Date(current)));
+    }
+  });
+  return keys;
+}
+
+export function isScheduleInMonth(schedule, year, month) {
+  const start = parseLocalDate(schedule.startDate);
+  const end = parseLocalDate(schedule.endDate);
+  const monthStart = new Date(year, month, 1);
+  const monthEnd = new Date(year, month + 1, 0);
+  return start <= monthEnd && end >= monthStart;
+}
+
+export function groupSchedulesByMonth(schedules) {
+  return schedules.reduce((groups, schedule) => {
+    const monthKey = schedule.startDate.slice(0, 7);
+    if (!groups[monthKey]) groups[monthKey] = [];
+    groups[monthKey].push(schedule);
+    return groups;
+  }, {});
+}
+
+export function sortByStartDate(a, b) {
+  return a.startDate.localeCompare(b.startDate);
+}
+
+export function updateScrollThumb(listElement, trackElement, thumbElement) {
+  if (!listElement || !trackElement || !thumbElement) return;
+  const { scrollHeight, clientHeight, scrollTop } = listElement;
+  if (scrollHeight <= clientHeight) {
+    thumbElement.style.display = 'none';
+    return;
+  }
+  thumbElement.style.display = 'block';
+  const ratio = clientHeight / scrollHeight;
+  const thumbHeight = Math.max(20, ratio * trackElement.clientHeight);
+  const thumbTop =
+    (scrollTop / (scrollHeight - clientHeight)) * (trackElement.clientHeight - thumbHeight);
+  thumbElement.style.height = `${thumbHeight}px`;
+  thumbElement.style.top = `${thumbTop}px`;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 789caf4..4afa0cc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,7 @@ export default {
         line: '#EEEEEE', // 구분선
         'field-border': '#CCCCCC', // 입력칸 테두리
         error: '#F94700', // 필수 표시(*)·오류 메시지(brand보다 붉은 톤)
+        'schedule-inactive': '#9F9F9F', // 달력 비활성 날짜
       },
       // 명부 관리/부원 등록 화면 모서리 토큰(시안 실측).
       borderRadius: {
@@ -32,6 +33,9 @@ export default {
         'app-xl': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
         'recruit-card': '0 3px 0 rgb(0 0 0 / 0.18)',
         'recruit-modal': '0 16px 40px rgb(0 0 0 / 0.25)',
+        schedule: '0 4px 40px rgb(0 0 0 / 0.08)',
+        'schedule-day': '0 2px 8px rgb(255 107 0 / 0.4)',
+        header: '0 4px 24px rgba(0,0,0,0.35)',
       },
       // 부원 상태 배지 너비(시안 실측 150px).
       minWidth: {

From b15b08878ca158080b2d3705978998b3e49aff24 Mon Sep 17 00:00:00 2001
From: chlgusdn0203 <dudrjsdud@naver.com>
Date: Wed, 1 Jul 2026 16:02:46 +0900
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/schedule/AllScheduleView.jsx  |  2 +-
 src/components/schedule/ScheduleDropdown.jsx |  2 +-
 src/pages/admin/AdminCalendarView.jsx        | 20 ++++++++++++++++++--
 src/pages/admin/AdminSchedulePage.jsx        |  3 ++-
 src/utils/schedule.js                        |  2 +-
 5 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/components/schedule/AllScheduleView.jsx b/src/components/schedule/AllScheduleView.jsx
index da9189a..4da80e6 100644
--- a/src/components/schedule/AllScheduleView.jsx
+++ b/src/components/schedule/AllScheduleView.jsx
@@ -7,7 +7,7 @@ import { formatScheduleDate } from '@/utils/schedule';
 const ACCENT_COLORS = ['#FFBA88', '#D95D03', '#F96B03', '#953E00', '#6C3E1E'];
 
 function getScheduleKey(schedule) {
-  return `${schedule.startDate}-${schedule.endDate}-${schedule.title}`;
+  return schedule.id ?? `${schedule.startDate}-${schedule.endDate}-${schedule.title}`;
 }
 
 function AllScheduleView({
diff --git a/src/components/schedule/ScheduleDropdown.jsx b/src/components/schedule/ScheduleDropdown.jsx
index 646d090..87e10fa 100644
--- a/src/components/schedule/ScheduleDropdown.jsx
+++ b/src/components/schedule/ScheduleDropdown.jsx
@@ -40,7 +40,7 @@ function ScheduleDropdown({ config, state, handlers, scrollRefs, classNames }) {
             <ul
               ref={listRef}
               onScroll={onScroll}
-              className="h-full w-[376px] divide-y divide-[#F1F3F7] overflow-y-auto"
+              className="h-full w-full divide-y divide-[#F1F3F7] overflow-y-auto"
               style={{ scrollbarWidth: 'none' }}
               role="listbox"
               aria-label={label}
diff --git a/src/pages/admin/AdminCalendarView.jsx b/src/pages/admin/AdminCalendarView.jsx
index 8b1747c..ab6caf3 100644
--- a/src/pages/admin/AdminCalendarView.jsx
+++ b/src/pages/admin/AdminCalendarView.jsx
@@ -70,6 +70,13 @@ function AdminCalendarView({
     setSelectedIndexes(new Set());
   };
 
+  const handleCancel = () => {
+    setIsAddingSchedule(false);
+    setNewScheduleTitle('');
+    setIsEditMode(false);
+    setEditedSchedules([]);
+  };
+
   const handleEditTitle = (index, value) => {
     setEditedSchedules((prev) => {
       const next = [...prev];
@@ -260,8 +267,17 @@ function AdminCalendarView({
             </div>
           </ol>
 
-          {/* 수정/완료 버튼: shrink-0 으로 항상 하단 고정 */}
-          <div className="flex shrink-0 justify-end pt-8">
+          {/* 취소/수정/완료 버튼: shrink-0 으로 항상 하단 고정 */}
+          <div className="flex shrink-0 justify-end gap-2 pt-8">
+            {(isEditMode || isAddingSchedule) && (
+              <button
+                type="button"
+                onClick={handleCancel}
+                className="h-[32px] w-[96px] rounded-[6px] border border-brand bg-white px-[14px] py-[6px] text-[14px] text-brand transition-opacity hover:opacity-80"
+              >
+                취소
+              </button>
+            )}
             <button
               type="button"
               onClick={handleConfirm}
diff --git a/src/pages/admin/AdminSchedulePage.jsx b/src/pages/admin/AdminSchedulePage.jsx
index 1ba7c3b..af2758c 100644
--- a/src/pages/admin/AdminSchedulePage.jsx
+++ b/src/pages/admin/AdminSchedulePage.jsx
@@ -32,7 +32,7 @@ function AdminSchedulePage() {
   const todayKey = useMemo(() => formatDateKey(today), [today]);
   const currentYear = today.getFullYear();
   const yearOptions = useMemo(
-    () => Array.from({ length: currentYear - 2022 + 1 }, (_, index) => 2022 + index),
+    () => Array.from({ length: currentYear - 2022 + 2 }, (_, index) => 2022 + index),
     [currentYear]
   );
 
@@ -185,6 +185,7 @@ function AdminSchedulePage() {
             />
           ) : (
         <AdminCalendarView
+        key={`${year}-${month}`}
         calendar={{ year, month, yearOptions, calendarDates, todayKey }}
         view={{ viewMode, onViewModeChange: handleViewModeChange }}
         schedules={{ scheduleDateKeys, visibleSchedules }}
diff --git a/src/utils/schedule.js b/src/utils/schedule.js
index 0333fc5..dcb7253 100644
--- a/src/utils/schedule.js
+++ b/src/utils/schedule.js
@@ -71,7 +71,7 @@ export function getScheduleDateKeys(schedules) {
     const start = parseLocalDate(startDate);
     const end = parseLocalDate(endDate);
     for (const current = new Date(start); current <= end; current.setDate(current.getDate() + 1)) {
-      keys.add(formatDateKey(new Date(current)));
+      keys.add(formatDateKey(current));
     }
   });
   return keys;

From d82bf63e92e3899d846d07a609ee077e9978e735 Mon Sep 17 00:00:00 2001
From: chlgusdn0203 <dudrjsdud@naver.com>
Date: Mon, 6 Jul 2026 02:23:21 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../schedule}/AdminCalendarView.jsx           |  60 +++-
 src/components/schedule/AllScheduleView.jsx   |   3 +-
 src/pages/admin/AdminSchedulePage.jsx         | 269 ++++++++++--------
 3 files changed, 200 insertions(+), 132 deletions(-)
 rename src/{pages/admin => components/schedule}/AdminCalendarView.jsx (85%)

diff --git a/src/pages/admin/AdminCalendarView.jsx b/src/components/schedule/AdminCalendarView.jsx
similarity index 85%
rename from src/pages/admin/AdminCalendarView.jsx
rename to src/components/schedule/AdminCalendarView.jsx
index ab6caf3..68bcf6f 100644
--- a/src/pages/admin/AdminCalendarView.jsx
+++ b/src/components/schedule/AdminCalendarView.jsx
@@ -21,6 +21,8 @@ function AdminCalendarView({
   const { scheduleDateKeys, visibleSchedules } = schedules;
 
   const [selectedDateKey, setSelectedDateKey] = useState(todayKey);
+  const [selectedEndDateKey, setSelectedEndDateKey] = useState(todayKey);
+  const [activeDateField, setActiveDateField] = useState('start');
   const [isAddingSchedule, setIsAddingSchedule] = useState(false);
   const [newScheduleTitle, setNewScheduleTitle] = useState('');
   const [selectedIndexes, setSelectedIndexes] = useState(new Set());
@@ -28,7 +30,24 @@ function AdminCalendarView({
   const [editedSchedules, setEditedSchedules] = useState([]);
 
   const handleDateClick = (dateKey) => {
-    setSelectedDateKey(dateKey);
+    if (!isAddingSchedule) {
+      setSelectedDateKey(dateKey);
+      return;
+    }
+
+    if (activeDateField === 'end') {
+      if (dateKey < selectedDateKey) {
+        setSelectedDateKey(dateKey);
+        setSelectedEndDateKey(selectedDateKey);
+      } else {
+        setSelectedEndDateKey(dateKey);
+      }
+      setActiveDateField('start');
+    } else {
+      setSelectedDateKey(dateKey);
+      setSelectedEndDateKey(dateKey);
+      setActiveDateField('end');
+    }
   };
 
   const handleAddClick = () => {
@@ -36,12 +55,18 @@ function AdminCalendarView({
     setEditedSchedules([]);
     setIsAddingSchedule(true);
     setNewScheduleTitle('');
+    setSelectedEndDateKey(selectedDateKey);
+    setActiveDateField('start');
   };
 
   const handleConfirm = () => {
     if (isAddingSchedule) {
       if (newScheduleTitle.trim()) {
-        onAddSchedule?.({ dateKey: selectedDateKey, title: newScheduleTitle });
+        onAddSchedule?.({
+          dateKey: selectedDateKey,
+          endDateKey: selectedEndDateKey,
+          title: newScheduleTitle,
+        });
       }
       setIsAddingSchedule(false);
       setNewScheduleTitle('');
@@ -75,6 +100,7 @@ function AdminCalendarView({
     setNewScheduleTitle('');
     setIsEditMode(false);
     setEditedSchedules([]);
+    setActiveDateField('start');
   };
 
   const handleEditTitle = (index, value) => {
@@ -90,10 +116,8 @@ function AdminCalendarView({
   return (
     /* h-full + flex-col: 카드 전체 높이를 채워 수정 버튼을 하단에 고정 */
     <div className="flex h-full flex-col px-[18px] py-11 sm:px-11 sm:py-[72px] xl:px-[60px] xl:pb-[60px] xl:pt-[52px]">
-
       {/* 콘텐츠 그리드: flex-1 로 남은 높이 전부 차지 */}
       <div className="grid min-h-0 flex-1 grid-cols-1 gap-y-8 xl:grid-cols-[505px_24px_1fr] xl:items-stretch xl:gap-y-0">
-
         {/* 왼쪽: 드롭다운 + 탭 + 캘린더 */}
         <div className="h-auto w-full max-w-[505px] xl:self-start">
           <div className="mb-[14px] flex w-full items-center gap-2" aria-label="달력 기간 선택">
@@ -155,7 +179,16 @@ function AdminCalendarView({
             ))}
 
             {calendarDates.map((date) => {
-              const isSelected = date.key === selectedDateKey;
+              const isRangeStart = isAddingSchedule && date.key === selectedDateKey;
+              const isRangeEnd =
+                isAddingSchedule &&
+                date.key === selectedEndDateKey &&
+                selectedEndDateKey !== selectedDateKey;
+              const isInRange =
+                isAddingSchedule && date.key > selectedDateKey && date.key < selectedEndDateKey;
+              const isSelected = isAddingSchedule
+                ? isRangeStart || isRangeEnd
+                : date.key === selectedDateKey;
               const hasSchedule = date.isCurrentMonth && scheduleDateKeys.has(date.key);
 
               return (
@@ -168,6 +201,7 @@ function AdminCalendarView({
                     isSelected
                       ? 'h-10 w-10 rounded-[11px] bg-brand font-bold text-white shadow-schedule-day xl:h-10 xl:w-10'
                       : '',
+                    isInRange && !isSelected ? 'rounded-[11px] bg-brand/20' : '',
                     hasSchedule && !isSelected
                       ? 'after:absolute after:left-1/2 after:-top-3 after:h-2.5 after:w-2.5 after:-translate-x-1/2 after:rounded-full after:bg-brand after:content-[""]'
                       : '',
@@ -188,8 +222,7 @@ function AdminCalendarView({
 
         {/* 오른쪽: 일정 목록 + 수정 버튼 */}
         {/* h-full + flex-col: 그리드 셀 전체 높이를 채워 수정 버튼을 하단에 고정 */}
-        <div className="flex h-full min-w-0 flex-col xl:pt-[12px]">
-
+        <div className="flex h-full min-h-0 min-w-0 flex-col xl:pt-[12px]">
           {/* 추가 / 삭제 버튼 */}
           <div className="mb-4 flex shrink-0 justify-end gap-2">
             <button
@@ -237,7 +270,9 @@ function AdminCalendarView({
                         className="min-w-0 flex-1 border-b border-brand bg-transparent text-[16px] text-ink outline-none"
                       />
                     ) : (
-                      <span className="min-w-0 truncate font-normal text-ink-sub">{schedule.title}</span>
+                      <span className="min-w-0 truncate font-normal text-ink-sub">
+                        {schedule.title}
+                      </span>
                     )}
                   </li>
                 );
@@ -247,11 +282,16 @@ function AdminCalendarView({
                 <li className="flex min-w-0 items-center gap-4 text-[16px] leading-[1.3]">
                   <div className="flex h-[17px] w-[17px] shrink-0 items-center justify-center rounded-full border border-brand bg-white">
                     <svg width="9" height="9" viewBox="0 0 9 9" fill="none">
-                      <path d="M4.5 1V8M1 4.5H8" stroke="#FF6B00" strokeWidth="1.5" strokeLinecap="round" />
+                      <path
+                        d="M4.5 1V8M1 4.5H8"
+                        stroke="#FF6B00"
+                        strokeWidth="1.5"
+                        strokeLinecap="round"
+                      />
                     </svg>
                   </div>
                   <time className="w-[190px] shrink-0 font-bold text-ink">
-                    {formatAdminDate(selectedDateKey)} ~
+                    {formatAdminDate(selectedDateKey)} ~ {formatAdminDate(selectedEndDateKey)}
                   </time>
                   <input
                     type="text"
diff --git a/src/components/schedule/AllScheduleView.jsx b/src/components/schedule/AllScheduleView.jsx
index 4da80e6..c4e8d23 100644
--- a/src/components/schedule/AllScheduleView.jsx
+++ b/src/components/schedule/AllScheduleView.jsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import ScheduleCheckbox from '@/components/schedule/ScheduleCheckbox';
 import ScheduleDropdown from '@/components/schedule/ScheduleDropdown';
 import ScheduleTabs from '@/components/schedule/ScheduleTabs';
+import { VIEW_MODE } from '@/constants/schedule';
 import { formatScheduleDate } from '@/utils/schedule';
 
 const ACCENT_COLORS = ['#FFBA88', '#D95D03', '#F96B03', '#953E00', '#6C3E1E'];
@@ -33,7 +34,7 @@ function AllScheduleView({
   };
 
   const handleAddClick = () => {
-    onViewModeChange('calendar');
+    onViewModeChange(VIEW_MODE.CALENDAR);
   };
 
   const handleDeleteClick = () => {
diff --git a/src/pages/admin/AdminSchedulePage.jsx b/src/pages/admin/AdminSchedulePage.jsx
index af2758c..6679bf4 100644
--- a/src/pages/admin/AdminSchedulePage.jsx
+++ b/src/pages/admin/AdminSchedulePage.jsx
@@ -1,10 +1,10 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 import Header from '@/components/layout/Header';
+import AdminCalendarView from '@/components/schedule/AdminCalendarView';
 import AllScheduleView from '@/components/schedule/AllScheduleView';
-import AdminCalendarView from '@/pages/admin/AdminCalendarView';
 import ScheduleStyles from '@/styles/ScheduleStyles';
-import { DROPDOWN_TYPE, SCHEDULES } from '@/constants/schedule';
+import { CLUB_START_YEAR, DROPDOWN_TYPE, SCHEDULES, VIEW_MODE } from '@/constants/schedule';
 import {
   formatAdminDate,
   formatDateKey,
@@ -32,14 +32,18 @@ function AdminSchedulePage() {
   const todayKey = useMemo(() => formatDateKey(today), [today]);
   const currentYear = today.getFullYear();
   const yearOptions = useMemo(
-    () => Array.from({ length: currentYear - 2022 + 2 }, (_, index) => 2022 + index),
+    () =>
+      Array.from(
+        { length: currentYear - CLUB_START_YEAR + 2 },
+        (_, index) => CLUB_START_YEAR + index
+      ),
     [currentYear]
   );
 
   const [year, setYear] = useState(currentYear);
   const [month, setMonth] = useState(today.getMonth());
   const [openedDropdown, setOpenedDropdown] = useState(null);
-  const [viewMode, setViewMode] = useState('calendar');
+  const [viewMode, setViewMode] = useState(VIEW_MODE.CALENDAR);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [schedulesToDelete, setSchedulesToDelete] = useState([]);
   const [localSchedules, setLocalSchedules] = useState([]);
@@ -50,8 +54,10 @@ function AdminSchedulePage() {
   const scheduleDateKeys = useMemo(() => getScheduleDateKeys(allSchedules), [allSchedules]);
   const visibleSchedules = useMemo(() => {
     const filteredSchedules =
-      viewMode === 'all'
-        ? allSchedules.filter((schedule) => parseLocalDate(schedule.startDate).getFullYear() === year)
+      viewMode === VIEW_MODE.ALL
+        ? allSchedules.filter(
+            (schedule) => parseLocalDate(schedule.startDate).getFullYear() === year
+          )
         : allSchedules.filter((schedule) => isScheduleInMonth(schedule, year, month));
     return [...filteredSchedules].sort(sortByStartDate);
   }, [allSchedules, month, viewMode, year]);
@@ -81,10 +87,10 @@ function AdminSchedulePage() {
     setOpenedDropdown(null);
   };
 
-  const handleAddSchedule = ({ dateKey, title }) => {
+  const handleAddSchedule = ({ dateKey, endDateKey, title }) => {
     setLocalSchedules((prev) => [
       ...prev,
-      { id: `local-${Date.now()}`, startDate: dateKey, endDate: dateKey, title },
+      { id: `local-${Date.now()}`, startDate: dateKey, endDate: endDateKey ?? dateKey, title },
     ]);
   };
 
@@ -121,7 +127,8 @@ function AdminSchedulePage() {
     const rafIds = [];
     if (isMonthDropdownOpen) rafIds.push(requestAnimationFrame(() => handleMonthScroll()));
     if (isYearDropdownOpen) rafIds.push(requestAnimationFrame(() => handleYearScroll()));
-    if (viewMode === 'all') rafIds.push(requestAnimationFrame(() => handleAllScheduleScroll()));
+    if (viewMode === VIEW_MODE.ALL)
+      rafIds.push(requestAnimationFrame(() => handleAllScheduleScroll()));
     return () => {
       rafIds.forEach(cancelAnimationFrame);
     };
@@ -133,7 +140,7 @@ function AdminSchedulePage() {
       <section
         className={[
           'min-h-screen bg-brand-soft px-4 py-7 lg:px-6 lg:py-12 xl:min-h-[1024px] xl:py-[77px]',
-          viewMode === 'all'
+          viewMode === VIEW_MODE.ALL
             ? 'xl:px-[max(24px,calc((100vw-1253px)/2))]'
             : 'xl:px-[max(24px,calc((100vw-1068px)/2))]',
         ]
@@ -146,126 +153,146 @@ function AdminSchedulePage() {
           연간 계획 (관리자)
         </h2>
 
-      <div
-        className="relative mx-auto"
-        style={{ width: viewMode === 'all' ? '1253px' : '1068px', maxWidth: '100%' }}
-      >
-
-        <div className="h-auto min-h-[683px] w-full rounded-[50px] bg-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] xl:h-[683px]">
-          {viewMode === 'all' ? (
-            <AllScheduleView
-              yearDropdown={{
-                year,
-                yearOptions,
-                isOpen: isYearDropdownOpen,
-                handlers: {
-                  onToggle: () =>
-                    setOpenedDropdown(isYearDropdownOpen ? null : DROPDOWN_TYPE.YEAR),
-                  onSelect: (yearOption) => {
-                    setYear(yearOption);
-                    setOpenedDropdown(null);
+        <div
+          className="relative mx-auto"
+          style={{ width: viewMode === VIEW_MODE.ALL ? '1253px' : '1068px', maxWidth: '100%' }}
+        >
+          <div className="h-auto min-h-[683px] w-full rounded-[50px] bg-white shadow-[0px_4px_4px_0px_rgba(0,0,0,0.25)] xl:h-[683px]">
+            {viewMode === VIEW_MODE.ALL ? (
+              <AllScheduleView
+                yearDropdown={{
+                  year,
+                  yearOptions,
+                  isOpen: isYearDropdownOpen,
+                  handlers: {
+                    onToggle: () =>
+                      setOpenedDropdown(isYearDropdownOpen ? null : DROPDOWN_TYPE.YEAR),
+                    onSelect: (yearOption) => {
+                      setYear(yearOption);
+                      setOpenedDropdown(null);
+                    },
+                    onScroll: handleYearScroll,
+                  },
+                  scrollRefs: {
+                    listRef: yearListRef,
+                    trackRef: yearTrackRef,
+                    thumbRef: yearThumbRef,
+                  },
+                }}
+                view={{ viewMode, onViewModeChange: handleViewModeChange }}
+                scheduleMonthEntries={scheduleMonthEntries}
+                scheduleScroll={{
+                  listRef: allScheduleListRef,
+                  trackRef: allScheduleTrackRef,
+                  thumbRef: allScheduleThumbRef,
+                  onScroll: handleAllScheduleScroll,
+                }}
+                onDeleteSchedule={handleDeleteSchedule}
+              />
+            ) : (
+              <AdminCalendarView
+                key={`${year}-${month}`}
+                calendar={{ year, month, yearOptions, calendarDates, todayKey }}
+                view={{ viewMode, onViewModeChange: handleViewModeChange }}
+                schedules={{ scheduleDateKeys, visibleSchedules }}
+                monthDropdown={{
+                  isOpen: isMonthDropdownOpen,
+                  handlers: {
+                    onToggle: () =>
+                      setOpenedDropdown(isMonthDropdownOpen ? null : DROPDOWN_TYPE.MONTH),
+                    onSelect: (monthOption) => {
+                      setMonth(monthOption);
+                      setOpenedDropdown(null);
+                    },
+                    onScroll: handleMonthScroll,
+                  },
+                  scrollRefs: {
+                    listRef: monthListRef,
+                    trackRef: monthTrackRef,
+                    thumbRef: monthThumbRef,
                   },
-                  onScroll: handleYearScroll,
-                },
-                scrollRefs: {
-                  listRef: yearListRef,
-                  trackRef: yearTrackRef,
-                  thumbRef: yearThumbRef,
-                },
-              }}
-              view={{ viewMode, onViewModeChange: handleViewModeChange }}
-              scheduleMonthEntries={scheduleMonthEntries}
-              scheduleScroll={{
-                listRef: allScheduleListRef,
-                trackRef: allScheduleTrackRef,
-                thumbRef: allScheduleThumbRef,
-                onScroll: handleAllScheduleScroll,
-              }}
-              onDeleteSchedule={handleDeleteSchedule}
-            />
-          ) : (
-        <AdminCalendarView
-        key={`${year}-${month}`}
-        calendar={{ year, month, yearOptions, calendarDates, todayKey }}
-        view={{ viewMode, onViewModeChange: handleViewModeChange }}
-        schedules={{ scheduleDateKeys, visibleSchedules }}
-        monthDropdown={{
-            isOpen: isMonthDropdownOpen,
-            handlers: {
-            onToggle: () => setOpenedDropdown(isMonthDropdownOpen ? null : DROPDOWN_TYPE.MONTH),
-            onSelect: (monthOption) => { setMonth(monthOption); setOpenedDropdown(null); },
-            onScroll: handleMonthScroll,
-            },
-            scrollRefs: { listRef: monthListRef, trackRef: monthTrackRef, thumbRef: monthThumbRef },
-        }}
-        yearDropdown={{
-            isOpen: isYearDropdownOpen,
-            handlers: {
-            onToggle: () => setOpenedDropdown(isYearDropdownOpen ? null : DROPDOWN_TYPE.YEAR),
-            onSelect: (yearOption) => { setYear(yearOption); setOpenedDropdown(null); },
-            onScroll: handleYearScroll,
-            },
-            scrollRefs: { listRef: yearListRef, trackRef: yearTrackRef, thumbRef: yearThumbRef },
-        }}
-        onAddSchedule={handleAddSchedule}
-        onDeleteSchedule={handleDeleteSchedule}
-        onSaveEdits={handleSaveEdits}
-        />
-          )}
+                }}
+                yearDropdown={{
+                  isOpen: isYearDropdownOpen,
+                  handlers: {
+                    onToggle: () =>
+                      setOpenedDropdown(isYearDropdownOpen ? null : DROPDOWN_TYPE.YEAR),
+                    onSelect: (yearOption) => {
+                      setYear(yearOption);
+                      setOpenedDropdown(null);
+                    },
+                    onScroll: handleYearScroll,
+                  },
+                  scrollRefs: {
+                    listRef: yearListRef,
+                    trackRef: yearTrackRef,
+                    thumbRef: yearThumbRef,
+                  },
+                }}
+                onAddSchedule={handleAddSchedule}
+                onDeleteSchedule={handleDeleteSchedule}
+                onSaveEdits={handleSaveEdits}
+              />
+            )}
+          </div>
         </div>
-      </div>
 
-      {/* 일정 삭제 확인 모달 */}
-      {isDeleteModalOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-          <div className="w-[305px] overflow-hidden rounded-[10px] bg-white shadow-[1px_1px_40px_0px_rgba(0,0,0,0.35)]">
-            {/* 헤더 */}
-            <div className="flex items-center justify-between border-b border-[#ccc] px-[22px] py-[14px]">
-              <span className="text-[14px] font-medium text-ink">
-                {schedulesToDelete.length > 0
-                  ? `${formatAdminDate(schedulesToDelete[0].startDate)} ~ ${formatAdminDate(schedulesToDelete[0].endDate)}`
-                  : `${month + 1}월 일정`}
-              </span>
-              <button
-                type="button"
-                onClick={handleDeleteCancel}
-                className="flex h-[22px] w-[22px] items-center justify-center text-ink"
-                aria-label="닫기"
-              >
-                <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-                  <path d="M11 3L3 11M3 3L11 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-                </svg>
-              </button>
-            </div>
+        {/* 일정 삭제 확인 모달 */}
+        {isDeleteModalOpen && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+            <div className="w-[305px] overflow-hidden rounded-[10px] bg-white shadow-[1px_1px_40px_0px_rgba(0,0,0,0.35)]">
+              {/* 헤더 */}
+              <div className="flex items-center justify-between border-b border-[#ccc] px-[22px] py-[14px]">
+                <span className="text-[14px] font-medium text-ink">
+                  {schedulesToDelete.length > 0
+                    ? `${formatAdminDate(schedulesToDelete[0].startDate)} ~ ${formatAdminDate(schedulesToDelete[0].endDate)}`
+                    : `${month + 1}월 일정`}
+                </span>
+                <button
+                  type="button"
+                  onClick={handleDeleteCancel}
+                  className="flex h-[22px] w-[22px] items-center justify-center text-ink"
+                  aria-label="닫기"
+                >
+                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                    <path
+                      d="M11 3L3 11M3 3L11 11"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                    />
+                  </svg>
+                </button>
+              </div>
 
-            {/* 본문 */}
-            <div className="px-[22px] py-[24px]">
-              <p className="text-[14px] text-ink">일정을 삭제하시겠습니까?</p>
-            </div>
+              {/* 본문 */}
+              <div className="px-[22px] py-[24px]">
+                <p className="text-[14px] text-ink">일정을 삭제하시겠습니까?</p>
+              </div>
 
-            {/* 푸터 버튼 */}
-            <div className="flex items-center justify-end gap-[6px] bg-brand-soft px-[12px] py-[13px]">
-              <button
-                type="button"
-                onClick={handleDeleteCancel}
-                className="h-[34px] rounded-[6px] border border-brand bg-white px-[16px] text-[14px] text-ink"
-              >
-                취소
-              </button>
-              <button
-                type="button"
-                onClick={handleDeleteConfirm}
-                className="h-[34px] rounded-[6px] bg-brand px-[16px] text-[14px] text-white"
-              >
-                확인
-              </button>
+              {/* 푸터 버튼 */}
+              <div className="flex items-center justify-end gap-[6px] bg-brand-soft px-[12px] py-[13px]">
+                <button
+                  type="button"
+                  onClick={handleDeleteCancel}
+                  className="h-[34px] rounded-[6px] border border-brand bg-white px-[16px] text-[14px] text-ink"
+                >
+                  취소
+                </button>
+                <button
+                  type="button"
+                  onClick={handleDeleteConfirm}
+                  className="h-[34px] rounded-[6px] bg-brand px-[16px] text-[14px] text-white"
+                >
+                  확인
+                </button>
+              </div>
             </div>
           </div>
-        </div>
-      )}
+        )}
       </section>
     </>
   );
 }
 
-export default AdminSchedulePage;
\ No newline at end of file
+export default AdminSchedulePage;