feat: 일정 봇 자동화 및 검색 기능 추가

- YouTube 일정 봇 서비스 추가 (youtube-bot.js, youtube-scheduler.js)
- 공개 일정 API 라우터 추가 (schedules.js)
- 관리자 일정 봇 관리 페이지 추가 (AdminScheduleBots.jsx)
- 백엔드 의존성 업데이트

.env

@@ -16,3 +16,6 @@ RUSTFS_PUBLIC_URL=https://s3.caadiq.co.kr
 RUSTFS_ACCESS_KEY=iOpbGJIn4VumvxXlSC6D
 RUSTFS_SECRET_KEY=tDTwLkcHN5UVuWnea2s8OECrmiv013qoSQIpYbBd
 RUSTFS_BUCKET=fromis-9
+
+# Kakao API
+KAKAO_REST_KEY=cf21156ae6cc8f6e95b3a3150926cdf8

backend/package-lock.json

@@ -14,6 +14,8 @@
                 "jsonwebtoken": "^9.0.3",
                 "multer": "^1.4.5-lts.1",
                 "mysql2": "^3.11.0",
+                "node-cron": "^4.2.1",
+                "rss-parser": "^3.13.0",
                 "sharp": "^0.33.5"
             }
         },
@@ -2339,6 +2341,15 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/entities": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+            "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+            "license": "BSD-2-Clause",
+            "funding": {
+                "url": "https://github.com/fb55/entities?sponsor=1"
+            }
+        },
         "node_modules/es-define-property": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -2933,6 +2944,15 @@
                 "node": "^18 || ^20 || >= 21"
             }
         },
+        "node_modules/node-cron": {
+            "version": "4.2.1",
+            "resolved": "https://registry.npmjs.org/node-cron/-/node-cron-4.2.1.tgz",
+            "integrity": "sha512-lgimEHPE/QDgFlywTd8yTR61ptugX3Qer29efeyWw2rv259HtGBNn1vZVmp8lB9uo9wC0t/AT4iGqXxia+CJFg==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=6.0.0"
+            }
+        },
         "node_modules/node-gyp-build": {
             "version": "4.8.4",
             "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
@@ -3071,6 +3091,16 @@
             "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
             "license": "MIT"
         },
+        "node_modules/rss-parser": {
+            "version": "3.13.0",
+            "resolved": "https://registry.npmjs.org/rss-parser/-/rss-parser-3.13.0.tgz",
+            "integrity": "sha512-7jWUBV5yGN3rqMMj7CZufl/291QAhvrrGpDNE4k/02ZchL0npisiYYqULF71jCEKoIiHvK/Q2e6IkDwPziT7+w==",
+            "license": "MIT",
+            "dependencies": {
+                "entities": "^2.0.3",
+                "xml2js": "^0.5.0"
+            }
+        },
         "node_modules/safe-buffer": {
             "version": "5.2.1",
             "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -3097,6 +3127,12 @@
             "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
             "license": "MIT"
         },
+        "node_modules/sax": {
+            "version": "1.4.3",
+            "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.3.tgz",
+            "integrity": "sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==",
+            "license": "BlueOak-1.0.0"
+        },
         "node_modules/semver": {
             "version": "7.7.3",
             "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
@@ -3405,6 +3441,28 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/xml2js": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.5.0.tgz",
+            "integrity": "sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==",
+            "license": "MIT",
+            "dependencies": {
+                "sax": ">=0.6.0",
+                "xmlbuilder": "~11.0.0"
+            },
+            "engines": {
+                "node": ">=4.0.0"
+            }
+        },
+        "node_modules/xmlbuilder": {
+            "version": "11.0.1",
+            "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+            "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=4.0"
+            }
+        },
         "node_modules/xtend": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

backend/package.json

@@ -13,6 +13,8 @@
         "jsonwebtoken": "^9.0.3",
         "multer": "^1.4.5-lts.1",
         "mysql2": "^3.11.0",
+        "node-cron": "^4.2.1",
+        "rss-parser": "^3.13.0",
         "sharp": "^0.33.5"
     }
-}
+}

backend/routes/albums.js

@@ -12,9 +12,9 @@ async function getAlbumDetails(album) {
   );
   album.tracks = tracks;
 
-  // 티저 이미지 조회 (3개 해상도 URL 포함)
+  // 티저 이미지/비디오 조회 (3개 해상도 URL + media_type 포함)
   const [teasers] = await pool.query(
-    "SELECT original_url, medium_url, thumb_url FROM album_teasers WHERE album_id = ? ORDER BY sort_order",
+    "SELECT original_url, medium_url, thumb_url, media_type FROM album_teasers WHERE album_id = ? ORDER BY sort_order",
     [album.id]
   );
   album.teasers = teasers;
@@ -62,7 +62,7 @@ async function getAlbumDetails(album) {
 router.get("/", async (req, res) => {
   try {
     const [albums] = await pool.query(
-      "SELECT id, title, album_type, album_type_short, release_date, cover_url FROM albums ORDER BY release_date DESC"
+      "SELECT id, title, album_type, album_type_short, release_date, cover_original_url, cover_medium_url, cover_thumb_url FROM albums ORDER BY release_date DESC"
     );
 
     // 각 앨범에 트랙 정보 추가

backend/routes/schedules.js

@@ -0,0 +1,78 @@
+import express from "express";
+import pool from "../lib/db.js";
+
+const router = express.Router();
+
+// 공개 일정 목록 조회
+router.get("/", async (req, res) => {
+  try {
+    const [schedules] = await pool.query(`
+      SELECT 
+        s.id,
+        s.title,
+        s.description,
+        s.date,
+        s.time,
+        s.category_id,
+        s.source_url,
+        s.location_name,
+        c.name as category_name,
+        c.color as category_color
+      FROM schedules s
+      LEFT JOIN schedule_categories c ON s.category_id = c.id
+      ORDER BY s.date DESC, s.time DESC
+    `);
+
+    res.json(schedules);
+  } catch (error) {
+    console.error("일정 목록 조회 오류:", error);
+    res.status(500).json({ error: "일정 목록 조회 중 오류가 발생했습니다." });
+  }
+});
+
+// 카테고리 목록 조회
+router.get("/categories", async (req, res) => {
+  try {
+    const [categories] = await pool.query(`
+      SELECT id, name, color, sort_order
+      FROM schedule_categories
+      ORDER BY sort_order ASC
+    `);
+
+    res.json(categories);
+  } catch (error) {
+    console.error("카테고리 조회 오류:", error);
+    res.status(500).json({ error: "카테고리 조회 중 오류가 발생했습니다." });
+  }
+});
+
+// 개별 일정 조회
+router.get("/:id", async (req, res) => {
+  try {
+    const { id } = req.params;
+
+    const [schedules] = await pool.query(
+      `
+      SELECT 
+        s.*,
+        c.name as category_name,
+        c.color as category_color
+      FROM schedules s
+      LEFT JOIN schedule_categories c ON s.category_id = c.id
+      WHERE s.id = ?
+    `,
+      [id]
+    );
+
+    if (schedules.length === 0) {
+      return res.status(404).json({ error: "일정을 찾을 수 없습니다." });
+    }
+
+    res.json(schedules[0]);
+  } catch (error) {
+    console.error("일정 조회 오류:", error);
+    res.status(500).json({ error: "일정 조회 중 오류가 발생했습니다." });
+  }
+});
+
+export default router;

backend/server.js

@@ -5,6 +5,7 @@ import membersRouter from "./routes/members.js";
 import albumsRouter from "./routes/albums.js";
 import statsRouter from "./routes/stats.js";
 import adminRouter from "./routes/admin.js";
+import schedulesRouter from "./routes/schedules.js";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -27,6 +28,12 @@ app.use("/api/members", membersRouter);
 app.use("/api/albums", albumsRouter);
 app.use("/api/stats", statsRouter);
 app.use("/api/admin", adminRouter);
+app.use("/api/schedules", schedulesRouter);
+app.use("/api/schedule-categories", (req, res, next) => {
+  // /api/schedule-categories -> /api/schedules/categories로 리다이렉트
+  req.url = "/categories";
+  schedulesRouter(req, res, next);
+});
 
 // SPA 폴백 - 모든 요청을 index.html로
 app.get("*", (req, res) => {

backend/services/youtube-bot.js

@@ -0,0 +1,368 @@
+import Parser from "rss-parser";
+import pool from "../lib/db.js";
+
+// YouTube API 키
+const YOUTUBE_API_KEY =
+  process.env.YOUTUBE_API_KEY || "AIzaSyBmn79egY0M_z5iUkqq9Ny0zVFP6PoYCzM";
+
+// RSS 파서 설정
+const rssParser = new Parser({
+  customFields: {
+    item: [
+      ["yt:videoId", "videoId"],
+      ["yt:channelId", "channelId"],
+    ],
+  },
+});
+
+/**
+ * UTC → KST 변환
+ */
+export function toKST(utcDate) {
+  const date = new Date(utcDate);
+  return new Date(date.getTime() + 9 * 60 * 60 * 1000);
+}
+
+/**
+ * 날짜를 YYYY-MM-DD 형식으로 변환
+ */
+export function formatDate(date) {
+  return date.toISOString().split("T")[0];
+}
+
+/**
+ * 시간을 HH:MM:SS 형식으로 변환
+ */
+export function formatTime(date) {
+  return date.toTimeString().split(" ")[0];
+}
+
+/**
+ * '유튜브' 카테고리 ID 조회 (없으면 생성)
+ */
+export async function getYoutubeCategory() {
+  const [rows] = await pool.query(
+    "SELECT id FROM schedule_categories WHERE name = '유튜브'"
+  );
+
+  if (rows.length > 0) {
+    return rows[0].id;
+  }
+
+  // 없으면 생성
+  const [result] = await pool.query(
+    "INSERT INTO schedule_categories (name, color, sort_order) VALUES ('유튜브', '#ff0033', 99)"
+  );
+  return result.insertId;
+}
+
+/**
+ * 영상 URL에서 유형 판별 (video/shorts)
+ */
+export function getVideoType(url) {
+  if (url.includes("/shorts/")) {
+    return "shorts";
+  }
+  return "video";
+}
+
+/**
+ * 영상 URL 생성
+ */
+export function getVideoUrl(videoId, videoType) {
+  if (videoType === "shorts") {
+    return `https://www.youtube.com/shorts/${videoId}`;
+  }
+  return `https://www.youtube.com/watch?v=${videoId}`;
+}
+
+/**
+ * RSS 피드 파싱하여 영상 목록 반환
+ */
+export async function parseRSSFeed(rssUrl) {
+  try {
+    const feed = await rssParser.parseURL(rssUrl);
+
+    return feed.items.map((item) => {
+      const videoId = item.videoId;
+      const link = item.link || "";
+      const videoType = getVideoType(link);
+      const publishedAt = toKST(new Date(item.pubDate));
+
+      return {
+        videoId,
+        title: item.title,
+        publishedAt,
+        date: formatDate(publishedAt),
+        time: formatTime(publishedAt),
+        videoUrl: link || getVideoUrl(videoId, videoType),
+        videoType,
+      };
+    });
+  } catch (error) {
+    console.error("RSS 파싱 오류:", error);
+    throw error;
+  }
+}
+
+/**
+ * ISO 8601 duration (PT1M30S) → 초 변환
+ */
+function parseDuration(duration) {
+  const match = duration.match(/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/);
+  if (!match) return 0;
+
+  const hours = parseInt(match[1] || 0);
+  const minutes = parseInt(match[2] || 0);
+  const seconds = parseInt(match[3] || 0);
+
+  return hours * 3600 + minutes * 60 + seconds;
+}
+
+/**
+ * YouTube API로 전체 영상 수집 (초기 동기화용)
+ * Shorts 판별: duration이 60초 이하이면 Shorts
+ */
+export async function fetchAllVideosFromAPI(channelId) {
+  const videos = [];
+  let pageToken = "";
+
+  try {
+    // 채널의 업로드 플레이리스트 ID 조회
+    const channelResponse = await fetch(
+      `https://www.googleapis.com/youtube/v3/channels?part=contentDetails&id=${channelId}&key=${YOUTUBE_API_KEY}`
+    );
+    const channelData = await channelResponse.json();
+
+    if (!channelData.items || channelData.items.length === 0) {
+      throw new Error("채널을 찾을 수 없습니다.");
+    }
+
+    const uploadsPlaylistId =
+      channelData.items[0].contentDetails.relatedPlaylists.uploads;
+
+    // 플레이리스트 아이템 조회 (페이징)
+    do {
+      const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${uploadsPlaylistId}&maxResults=50&key=${YOUTUBE_API_KEY}${
+        pageToken ? `&pageToken=${pageToken}` : ""
+      }`;
+
+      const response = await fetch(url);
+      const data = await response.json();
+
+      if (data.error) {
+        throw new Error(data.error.message);
+      }
+
+      // 영상 ID 목록 추출
+      const videoIds = data.items.map(
+        (item) => item.snippet.resourceId.videoId
+      );
+
+      // videos API로 duration 조회 (50개씩 배치)
+      const videosResponse = await fetch(
+        `https://www.googleapis.com/youtube/v3/videos?part=contentDetails&id=${videoIds.join(
+          ","
+        )}&key=${YOUTUBE_API_KEY}`
+      );
+      const videosData = await videosResponse.json();
+
+      // duration으로 Shorts 판별 맵 생성
+      const durationMap = {};
+      if (videosData.items) {
+        for (const v of videosData.items) {
+          const duration = v.contentDetails.duration;
+          const seconds = parseDuration(duration);
+          durationMap[v.id] = seconds <= 60 ? "shorts" : "video";
+        }
+      }
+
+      for (const item of data.items) {
+        const snippet = item.snippet;
+        const videoId = snippet.resourceId.videoId;
+        const publishedAt = toKST(new Date(snippet.publishedAt));
+        const videoType = durationMap[videoId] || "video";
+
+        videos.push({
+          videoId,
+          title: snippet.title,
+          publishedAt,
+          date: formatDate(publishedAt),
+          time: formatTime(publishedAt),
+          videoUrl: getVideoUrl(videoId, videoType),
+          videoType,
+        });
+      }
+
+      pageToken = data.nextPageToken || "";
+    } while (pageToken);
+
+    // 과거순 정렬 (오래된 영상부터 추가)
+    videos.sort((a, b) => new Date(a.publishedAt) - new Date(b.publishedAt));
+
+    return videos;
+  } catch (error) {
+    console.error("YouTube API 오류:", error);
+    throw error;
+  }
+}
+
+/**
+ * 영상을 일정으로 추가 (source_url로 중복 체크)
+ */
+export async function createScheduleFromVideo(video, categoryId) {
+  try {
+    // source_url로 중복 체크
+    const [existing] = await pool.query(
+      "SELECT id FROM schedules WHERE source_url = ?",
+      [video.videoUrl]
+    );
+
+    if (existing.length > 0) {
+      return null; // 이미 존재
+    }
+
+    // 일정 생성
+    const [result] = await pool.query(
+      `INSERT INTO schedules (title, date, time, category_id, source_url)
+       VALUES (?, ?, ?, ?, ?)`,
+      [video.title, video.date, video.time, categoryId, video.videoUrl]
+    );
+
+    return result.insertId;
+  } catch (error) {
+    console.error("일정 생성 오류:", error);
+    throw error;
+  }
+}
+
+/**
+ * 봇의 새 영상 동기화 (RSS 기반)
+ */
+export async function syncNewVideos(botId) {
+  try {
+    // 봇 정보 조회
+    const [bots] = await pool.query(
+      `SELECT b.*, c.channel_id, c.rss_url, c.include_shorts 
+       FROM bots b 
+       JOIN bot_youtube_config c ON b.id = c.bot_id 
+       WHERE b.id = ?`,
+      [botId]
+    );
+
+    if (bots.length === 0) {
+      throw new Error("봇을 찾을 수 없습니다.");
+    }
+
+    const bot = bots[0];
+    const categoryId = await getYoutubeCategory();
+
+    // RSS 피드 파싱
+    const videos = await parseRSSFeed(bot.rss_url);
+    let addedCount = 0;
+
+    for (const video of videos) {
+      // Shorts 필터링
+      if (!bot.include_shorts && video.videoType === "shorts") {
+        continue;
+      }
+
+      const scheduleId = await createScheduleFromVideo(video, categoryId);
+      if (scheduleId) {
+        addedCount++;
+      }
+    }
+
+    // 봇 상태 업데이트
+    await pool.query(
+      `UPDATE bots SET 
+        last_check_at = DATE_ADD(NOW(), INTERVAL 9 HOUR),
+        schedules_added = schedules_added + ?,
+        error_message = NULL
+       WHERE id = ?`,
+      [addedCount, botId]
+    );
+
+    return { addedCount, total: videos.length };
+  } catch (error) {
+    // 오류 상태 업데이트
+    await pool.query(
+      `UPDATE bots SET 
+        last_check_at = DATE_ADD(NOW(), INTERVAL 9 HOUR),
+        status = 'error',
+        error_message = ?
+       WHERE id = ?`,
+      [error.message, botId]
+    );
+    throw error;
+  }
+}
+
+/**
+ * 전체 영상 동기화 (API 기반, 초기화용)
+ */
+export async function syncAllVideos(botId) {
+  try {
+    // 봇 정보 조회
+    const [bots] = await pool.query(
+      `SELECT b.*, c.channel_id, c.include_shorts 
+       FROM bots b 
+       JOIN bot_youtube_config c ON b.id = c.bot_id 
+       WHERE b.id = ?`,
+      [botId]
+    );
+
+    if (bots.length === 0) {
+      throw new Error("봇을 찾을 수 없습니다.");
+    }
+
+    const bot = bots[0];
+    const categoryId = await getYoutubeCategory();
+
+    // API로 전체 영상 수집
+    const videos = await fetchAllVideosFromAPI(bot.channel_id);
+    let addedCount = 0;
+
+    for (const video of videos) {
+      // Shorts 필터링
+      if (!bot.include_shorts && video.videoType === "shorts") {
+        continue;
+      }
+
+      const scheduleId = await createScheduleFromVideo(video, categoryId);
+      if (scheduleId) {
+        addedCount++;
+      }
+    }
+
+    // 봇 상태 업데이트
+    await pool.query(
+      `UPDATE bots SET 
+        last_check_at = DATE_ADD(NOW(), INTERVAL 9 HOUR),
+        schedules_added = schedules_added + ?,
+        error_message = NULL
+       WHERE id = ?`,
+      [addedCount, botId]
+    );
+
+    return { addedCount, total: videos.length };
+  } catch (error) {
+    await pool.query(
+      `UPDATE bots SET 
+        status = 'error',
+        error_message = ?
+       WHERE id = ?`,
+      [error.message, botId]
+    );
+    throw error;
+  }
+}
+
+export default {
+  parseRSSFeed,
+  fetchAllVideosFromAPI,
+  syncNewVideos,
+  syncAllVideos,
+  getYoutubeCategory,
+  toKST,
+};

backend/services/youtube-scheduler.js

@@ -0,0 +1,107 @@
+import cron from "node-cron";
+import pool from "../lib/db.js";
+import { syncNewVideos } from "./youtube-bot.js";
+
+// 봇별 스케줄러 인스턴스 저장
+const schedulers = new Map();
+
+/**
+ * 개별 봇 스케줄 등록
+ */
+export function registerBot(botId, intervalMinutes = 2) {
+  // 기존 스케줄이 있으면 제거
+  unregisterBot(botId);
+
+  // cron 표현식 생성 (1분 시작, X분 간격: 1,3,5,7...)
+  const cronExpression = `1-59/${intervalMinutes} * * * *`;
+
+  const task = cron.schedule(cronExpression, async () => {
+    console.log(`[Bot ${botId}] 동기화 시작...`);
+    try {
+      const result = await syncNewVideos(botId);
+      console.log(`[Bot ${botId}] 동기화 완료: ${result.addedCount}개 추가`);
+    } catch (error) {
+      console.error(`[Bot ${botId}] 동기화 오류:`, error.message);
+    }
+  });
+
+  schedulers.set(botId, task);
+  console.log(
+    `[Bot ${botId}] 스케줄 등록됨 (${intervalMinutes}분 간격, 1분 오프셋)`
+  );
+}
+
+/**
+ * 개별 봇 스케줄 해제
+ */
+export function unregisterBot(botId) {
+  if (schedulers.has(botId)) {
+    schedulers.get(botId).stop();
+    schedulers.delete(botId);
+    console.log(`[Bot ${botId}] 스케줄 해제됨`);
+  }
+}
+
+/**
+ * 서버 시작 시 실행 중인 봇들 스케줄 등록
+ */
+export async function initScheduler() {
+  try {
+    const [bots] = await pool.query(
+      "SELECT id, check_interval FROM bots WHERE status = 'running'"
+    );
+
+    for (const bot of bots) {
+      registerBot(bot.id, bot.check_interval);
+    }
+
+    console.log(`[Scheduler] ${bots.length}개 봇 스케줄 등록됨`);
+  } catch (error) {
+    console.error("[Scheduler] 초기화 오류:", error);
+  }
+}
+
+/**
+ * 봇 시작
+ */
+export async function startBot(botId) {
+  const [bots] = await pool.query("SELECT * FROM bots WHERE id = ?", [botId]);
+  if (bots.length === 0) {
+    throw new Error("봇을 찾을 수 없습니다.");
+  }
+
+  const bot = bots[0];
+
+  // 스케줄 등록
+  registerBot(botId, bot.check_interval);
+
+  // 상태 업데이트
+  await pool.query(
+    "UPDATE bots SET status = 'running', error_message = NULL WHERE id = ?",
+    [botId]
+  );
+
+  // 즉시 1회 실행
+  try {
+    await syncNewVideos(botId);
+  } catch (error) {
+    console.error(`[Bot ${botId}] 초기 동기화 오류:`, error.message);
+  }
+}
+
+/**
+ * 봇 정지
+ */
+export async function stopBot(botId) {
+  unregisterBot(botId);
+
+  await pool.query("UPDATE bots SET status = 'stopped' WHERE id = ?", [botId]);
+}
+
+export default {
+  initScheduler,
+  registerBot,
+  unregisterBot,
+  startBot,
+  stopBot,
+};

frontend/.env

@@ -0,0 +1,2 @@
+VITE_KAKAO_JS_KEY=5a626e19fbafb33b1eea26f162038ccb
+VITE_KAKAO_REST_KEY=cf21156ae6cc8f6e95b3a3150926cdf8

frontend/package-lock.json

@@ -11,8 +11,10 @@
                 "framer-motion": "^11.0.8",
                 "lucide-react": "^0.344.0",
                 "react": "^18.2.0",
+                "react-colorful": "^5.6.1",
                 "react-device-detect": "^2.2.3",
                 "react-dom": "^18.2.0",
+                "react-ios-time-picker": "^0.2.2",
                 "react-photo-album": "^3.4.0",
                 "react-router-dom": "^6.22.3",
                 "react-window": "^2.2.3"
@@ -1963,7 +1965,6 @@
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
             "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
@@ -2189,6 +2190,17 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/prop-types": {
+            "version": "15.8.1",
+            "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+            "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+            "license": "MIT",
+            "dependencies": {
+                "loose-envify": "^1.4.0",
+                "object-assign": "^4.1.1",
+                "react-is": "^16.13.1"
+            }
+        },
         "node_modules/queue-microtask": {
             "version": "1.2.3",
             "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2222,6 +2234,16 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/react-colorful": {
+            "version": "5.6.1",
+            "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
+            "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
         "node_modules/react-device-detect": {
             "version": "2.2.3",
             "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz",
@@ -2248,6 +2270,25 @@
                 "react": "^18.3.1"
             }
         },
+        "node_modules/react-ios-time-picker": {
+            "version": "0.2.2",
+            "resolved": "https://registry.npmjs.org/react-ios-time-picker/-/react-ios-time-picker-0.2.2.tgz",
+            "integrity": "sha512-bi+K23lK6Pf2xDXmhAlz+RJuy9/onWYi7Ye+ODVhIkis9AVFECOza2ckkZl/4vUypj2+TdTsHn+VZrTNdGIwDQ==",
+            "license": "MIT",
+            "dependencies": {
+                "react-portal": "^4.2.2"
+            },
+            "peerDependencies": {
+                "react": "^18.2.0",
+                "react-dom": "^18.2.0"
+            }
+        },
+        "node_modules/react-is": {
+            "version": "16.13.1",
+            "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+            "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+            "license": "MIT"
+        },
         "node_modules/react-photo-album": {
             "version": "3.4.0",
             "resolved": "https://registry.npmjs.org/react-photo-album/-/react-photo-album-3.4.0.tgz",
@@ -2269,6 +2310,19 @@
                 }
             }
         },
+        "node_modules/react-portal": {
+            "version": "4.3.0",
+            "resolved": "https://registry.npmjs.org/react-portal/-/react-portal-4.3.0.tgz",
+            "integrity": "sha512-qs/2uKq1ifB3J1+K8ExfgUvCDZqlqCkfOEhqTELEDTfosloKiuzOzc7hl7IQ/7nohiFZD41BUYU0boAsIsGYHw==",
+            "license": "MIT",
+            "dependencies": {
+                "prop-types": "^15.5.8"
+            },
+            "peerDependencies": {
+                "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0",
+                "react-dom": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0"
+            }
+        },
         "node_modules/react-refresh": {
             "version": "0.17.0",
             "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

frontend/package.json

@@ -12,8 +12,10 @@
         "framer-motion": "^11.0.8",
         "lucide-react": "^0.344.0",
         "react": "^18.2.0",
+        "react-colorful": "^5.6.1",
         "react-device-detect": "^2.2.3",
         "react-dom": "^18.2.0",
+        "react-ios-time-picker": "^0.2.2",
         "react-photo-album": "^3.4.0",
         "react-router-dom": "^6.22.3",
         "react-window": "^2.2.3"

frontend/src/App.jsx

@@ -4,7 +4,7 @@ import { BrowserView, MobileView } from 'react-device-detect';
 // PC 페이지
 import PCHome from './pages/pc/Home';
 import PCMembers from './pages/pc/Members';
-import PCDiscography from './pages/pc/Discography';
+import PCAlbum from './pages/pc/Album';
 import PCAlbumDetail from './pages/pc/AlbumDetail';
 import PCAlbumGallery from './pages/pc/AlbumGallery';
 import PCSchedule from './pages/pc/Schedule';
@@ -12,9 +12,15 @@ import PCSchedule from './pages/pc/Schedule';
 // 관리자 페이지
 import AdminLogin from './pages/pc/admin/AdminLogin';
 import AdminDashboard from './pages/pc/admin/AdminDashboard';
+import AdminMembers from './pages/pc/admin/AdminMembers';
+import AdminMemberEdit from './pages/pc/admin/AdminMemberEdit';
 import AdminAlbums from './pages/pc/admin/AdminAlbums';
 import AdminAlbumForm from './pages/pc/admin/AdminAlbumForm';
 import AdminAlbumPhotos from './pages/pc/admin/AdminAlbumPhotos';
+import AdminSchedule from './pages/pc/admin/AdminSchedule';
+import AdminScheduleForm from './pages/pc/admin/AdminScheduleForm';
+import AdminScheduleCategory from './pages/pc/admin/AdminScheduleCategory';
+import AdminScheduleBots from './pages/pc/admin/AdminScheduleBots';
 
 // PC 레이아웃
 import PCLayout from './components/pc/Layout';
@@ -27,10 +33,17 @@ function App() {
                     {/* 관리자 페이지 (레이아웃 없음) */}
                     <Route path="/admin" element={<AdminLogin />} />
                     <Route path="/admin/dashboard" element={<AdminDashboard />} />
+                    <Route path="/admin/members" element={<AdminMembers />} />
+                    <Route path="/admin/members/:name/edit" element={<AdminMemberEdit />} />
                     <Route path="/admin/albums" element={<AdminAlbums />} />
                     <Route path="/admin/albums/new" element={<AdminAlbumForm />} />
                     <Route path="/admin/albums/:id/edit" element={<AdminAlbumForm />} />
                     <Route path="/admin/albums/:albumId/photos" element={<AdminAlbumPhotos />} />
+                    <Route path="/admin/schedule" element={<AdminSchedule />} />
+                    <Route path="/admin/schedule/new" element={<AdminScheduleForm />} />
+                    <Route path="/admin/schedule/:id/edit" element={<AdminScheduleForm />} />
+                    <Route path="/admin/schedule/categories" element={<AdminScheduleCategory />} />
+                    <Route path="/admin/schedule/bots" element={<AdminScheduleBots />} />
 
                     {/* 일반 페이지 (레이아웃 포함) */}
                     <Route path="/*" element={
@@ -38,7 +51,7 @@ function App() {
                             <Routes>
                                 <Route path="/" element={<PCHome />} />
                                 <Route path="/members" element={<PCMembers />} />
-                                <Route path="/album" element={<PCDiscography />} />
+                                <Route path="/album" element={<PCAlbum />} />
                                 <Route path="/album/:name" element={<PCAlbumDetail />} />
                                 <Route path="/album/:name/gallery" element={<PCAlbumGallery />} />
                                 <Route path="/schedule" element={<PCSchedule />} />

frontend/src/components/Toast.jsx

@@ -6,8 +6,6 @@ import { motion, AnimatePresence } from 'framer-motion';
  * - type: 'success' | 'error' | 'warning'
  */
 function Toast({ toast, onClose }) {
-    if (!toast) return null;
-
     return (
         <AnimatePresence>
             {toast && (

frontend/src/components/Tooltip.jsx

@@ -6,16 +6,16 @@ import { motion, AnimatePresence } from 'framer-motion';
  * 커스텀 툴팁 컴포넌트
  * 마우스 커서를 따라다니는 방식
  * @param {React.ReactNode} children - 툴팁을 표시할 요소
- * @param {string} text - 툴팁에 표시할 텍스트 (content prop과 호환)
+ * @param {string|React.ReactNode} text - 툴팁에 표시할 내용 (content prop과 호환)
- * @param {string} content - 툴팁에 표시할 텍스트 (text prop과 호환)
+ * @param {string|React.ReactNode} content - 툴팁에 표시할 내용 (text prop과 호환)
  */
 const Tooltip = ({ children, text, content, className = "" }) => {
     const [isVisible, setIsVisible] = useState(false);
     const [position, setPosition] = useState({ bottom: 0, left: 0 });
     const triggerRef = useRef(null);
 
-    // text 또는 content prop 사용
+    // text 또는 content prop 사용 (문자열 또는 React 노드)
-    const tooltipText = text || content;
+    const tooltipContent = text || content;
 
     const handleMouseEnter = (e) => {
         // 마우스 커서 위치를 기준으로 툴팁 위치 설정 (커서 위로)
@@ -45,7 +45,7 @@ const Tooltip = ({ children, text, content, className = "" }) => {
             >
                 {children}
             </div>
-            {isVisible && tooltipText && ReactDOM.createPortal(
+            {isVisible && tooltipContent && ReactDOM.createPortal(
                 <AnimatePresence>
                     <motion.div
                         initial={{ opacity: 0, y: 5, scale: 0.95 }}
@@ -56,9 +56,9 @@ const Tooltip = ({ children, text, content, className = "" }) => {
                             bottom: position.bottom, 
                             left: position.left,
                         }}
-                        className="fixed z-[9999] -translate-x-1/2 px-2.5 py-1.5 bg-gray-800 text-white text-xs font-medium rounded-lg shadow-xl pointer-events-none whitespace-nowrap"
+                        className="fixed z-[9999] -translate-x-1/2 px-3 py-2 bg-gray-800 text-white text-xs font-medium rounded-lg shadow-xl pointer-events-none"
                     >
-                        {tooltipText}
+                        {tooltipContent}
                     </motion.div>
                 </AnimatePresence>,
                 document.body

frontend/src/components/common/Lightbox.jsx

@@ -0,0 +1,196 @@
+import { useState, useEffect, useCallback, memo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, ChevronLeft, ChevronRight } from 'lucide-react';
+
+// 인디케이터 컴포넌트 - CSS transition 사용으로 GPU 가속
+const LightboxIndicator = memo(function LightboxIndicator({ count, currentIndex, goToIndex }) {
+    const translateX = -(currentIndex * 18) + 100 - 6;
+    
+    return (
+        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 overflow-hidden" style={{ width: '200px' }}>
+            {/* 양옆 페이드 그라데이션 */}
+            <div className="absolute inset-0 pointer-events-none z-10" style={{
+                background: 'linear-gradient(to right, rgba(0,0,0,1) 0%, transparent 20%, transparent 80%, rgba(0,0,0,1) 100%)'
+            }} />
+            {/* 슬라이딩 컨테이너 */}
+            <div 
+                className="flex items-center gap-2 justify-center"
+                style={{ 
+                    width: `${count * 18}px`,
+                    transform: `translateX(${translateX}px)`,
+                    transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+                }}
+            >
+                {Array.from({ length: count }).map((_, i) => (
+                    <button
+                        key={i}
+                        className={`rounded-full flex-shrink-0 transition-all duration-300 ${
+                            i === currentIndex 
+                                ? 'w-3 h-3 bg-white' 
+                                : 'w-2.5 h-2.5 bg-white/40 hover:bg-white/60'
+                        }`}
+                        onClick={() => goToIndex(i)}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+});
+
+// 라이트박스 공통 컴포넌트
+function Lightbox({ images, currentIndex, isOpen, onClose, onIndexChange }) {
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const [slideDirection, setSlideDirection] = useState(0);
+    
+    // 이전/다음 네비게이션
+    const goToPrev = useCallback(() => {
+        if (images.length <= 1) return;
+        setImageLoaded(false);
+        setSlideDirection(-1);
+        onIndexChange((currentIndex - 1 + images.length) % images.length);
+    }, [images.length, currentIndex, onIndexChange]);
+
+    const goToNext = useCallback(() => {
+        if (images.length <= 1) return;
+        setImageLoaded(false);
+        setSlideDirection(1);
+        onIndexChange((currentIndex + 1) % images.length);
+    }, [images.length, currentIndex, onIndexChange]);
+
+    const goToIndex = useCallback((index) => {
+        if (index === currentIndex) return;
+        setImageLoaded(false);
+        setSlideDirection(index > currentIndex ? 1 : -1);
+        onIndexChange(index);
+    }, [currentIndex, onIndexChange]);
+
+    // 라이트박스 열릴 때 body 스크롤 숨기기
+    useEffect(() => {
+        if (isOpen) {
+            document.documentElement.style.overflow = 'hidden';
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.documentElement.style.overflow = '';
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.documentElement.style.overflow = '';
+            document.body.style.overflow = '';
+        };
+    }, [isOpen]);
+
+    // 키보드 이벤트 핸들러
+    useEffect(() => {
+        if (!isOpen) return;
+
+        const handleKeyDown = (e) => {
+            switch (e.key) {
+                case 'ArrowLeft':
+                    goToPrev();
+                    break;
+                case 'ArrowRight':
+                    goToNext();
+                    break;
+                case 'Escape':
+                    onClose();
+                    break;
+                default:
+                    break;
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, goToPrev, goToNext, onClose]);
+
+    // 이미지가 바뀔 때 로딩 상태 리셋
+    useEffect(() => {
+        setImageLoaded(false);
+    }, [currentIndex]);
+
+    return (
+        <AnimatePresence>
+            {isOpen && images.length > 0 && (
+                <motion.div 
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{ duration: 0.2 }}
+                    className="fixed inset-0 bg-black/95 z-50 overflow-scroll"
+                    style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+                    onClick={onClose}
+                >
+                    {/* 내부 컨테이너 */}
+                    <div className="min-w-[800px] min-h-[600px] w-full h-full relative flex items-center justify-center">
+                        {/* 닫기 버튼 */}
+                        <button 
+                            className="absolute top-6 right-6 text-white/70 hover:text-white transition-colors z-10"
+                            onClick={onClose}
+                        >
+                            <X size={32} />
+                        </button>
+
+                        {/* 이전 버튼 */}
+                        {images.length > 1 && (
+                            <button 
+                                className="absolute left-6 p-2 text-white/70 hover:text-white transition-colors z-10"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    goToPrev();
+                                }}
+                            >
+                                <ChevronLeft size={48} />
+                            </button>
+                        )}
+
+                        {/* 로딩 스피너 */}
+                        {!imageLoaded && (
+                            <div className="absolute inset-0 flex items-center justify-center">
+                                <div className="animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent"></div>
+                            </div>
+                        )}
+
+                        {/* 이미지 */}
+                        <div className="flex flex-col items-center mx-24">
+                            <motion.img 
+                                key={currentIndex}
+                                src={images[currentIndex]}
+                                alt={`이미지 ${currentIndex + 1}`}
+                                className={`max-w-[90vw] max-h-[85vh] object-contain transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
+                                onClick={(e) => e.stopPropagation()}
+                                onLoad={() => setImageLoaded(true)}
+                                initial={{ x: slideDirection * 100 }}
+                                animate={{ x: 0 }}
+                                transition={{ duration: 0.25, ease: 'easeOut' }}
+                            />
+                        </div>
+
+                        {/* 다음 버튼 */}
+                        {images.length > 1 && (
+                            <button 
+                                className="absolute right-6 p-2 text-white/70 hover:text-white transition-colors z-10"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    goToNext();
+                                }}
+                            >
+                                <ChevronRight size={48} />
+                            </button>
+                        )}
+
+                        {/* 인디케이터 */}
+                        {images.length > 1 && (
+                            <LightboxIndicator
+                                count={images.length}
+                                currentIndex={currentIndex}
+                                goToIndex={goToIndex}
+                            />
+                        )}
+                    </div>
+                </motion.div>
+            )}
+        </AnimatePresence>
+    );
+}
+
+export default Lightbox;

frontend/src/components/pc/Header.jsx

@@ -19,7 +19,7 @@ function Header() {
 
     return (
         <header className="bg-white shadow-sm sticky top-0 z-50">
-            <div className="max-w-7xl mx-auto px-6">
+            <div className="px-24">
                 <div className="flex items-center justify-between h-16">
                     {/* 로고 */}
                     <NavLink to="/" className="flex items-center gap-2">

frontend/src/index.css

@@ -14,7 +14,7 @@ body {
 
 /* 최소 너비 설정 - 화면 축소시 깨짐 방지 */
 #root {
-  min-width: 1200px;
+  min-width: 1440px;
 }
 
 /* 스크롤바 스타일 */
@@ -73,3 +73,17 @@ body {
     opacity: 1;
   }
 }
+
+/* 라이트박스 스크롤바 숨기기 */
+.lightbox-no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* 스크롤바 숨기기 유틸리티 */
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}

frontend/src/pages/pc/Album.jsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { Calendar, Music } from 'lucide-react';
 
-function Discography() {
+function Album() {
     const navigate = useNavigate();
     const [albums, setAlbums] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -121,7 +121,7 @@ function Discography() {
                                 style={{ viewTransitionName: `album-cover-${album.id}` }}
                             >
                                 <img
-                                    src={album.cover_url}
+                                    src={album.cover_medium_url || album.cover_original_url}
                                     alt={album.title}
                                     loading="lazy"
                                     className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 will-change-transform"
@@ -160,4 +160,4 @@ function Discography() {
     );
 }
 
-export default Discography;
+export default Album;

frontend/src/pages/pc/AlbumDetail.jsx

@@ -1,8 +1,42 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, memo } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Calendar, Music2, Clock, X, ChevronLeft, ChevronRight, Download, MoreVertical, FileText } from 'lucide-react';
 
+// 인디케이터 컴포넌트 - CSS transition 사용으로 JS 블로킹에 영향받지 않음
+const LightboxIndicator = memo(function LightboxIndicator({ count, currentIndex, setLightbox }) {
+    const translateX = -(currentIndex * 18) + 100 - 6;
+    
+    return (
+        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 overflow-hidden" style={{ width: '200px' }}>
+            {/* 양옆 페이드 그라데이션 */}
+            <div className="absolute inset-0 pointer-events-none z-10" style={{
+                background: 'linear-gradient(to right, rgba(0,0,0,1) 0%, transparent 20%, transparent 80%, rgba(0,0,0,1) 100%)'
+            }} />
+            {/* 슬라이딩 컨테이너 - CSS transition으로 GPU 가속 */}
+            <div 
+                className="flex items-center gap-2 justify-center"
+                style={{ 
+                    width: `${count * 18}px`,
+                    transform: `translateX(${translateX}px)`,
+                    transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+                }}
+            >
+                {Array.from({ length: count }).map((_, i) => (
+                    <button
+                        key={i}
+                        className={`rounded-full flex-shrink-0 transition-all duration-300 ${
+                            i === currentIndex 
+                                ? 'w-3 h-3 bg-white' 
+                                : 'w-2.5 h-2.5 bg-white/40 hover:bg-white/60'
+                        }`}
+                        onClick={() => setLightbox(prev => ({ ...prev, index: i }))}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+});
 function AlbumDetail() {
     const { name } = useParams();
     const navigate = useNavigate();
@@ -11,6 +45,7 @@ function AlbumDetail() {
     const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0 });
     const [slideDirection, setSlideDirection] = useState(0);
     const [imageLoaded, setImageLoaded] = useState(false);
+    const [preloadedImages] = useState(() => new Set()); // 프리로드된 이미지 URL 추적
     const [showDescriptionModal, setShowDescriptionModal] = useState(false);
     const [showMenu, setShowMenu] = useState(false);
 
@@ -99,20 +134,27 @@ function AlbumDetail() {
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [lightbox.open, goToPrev, goToNext, closeLightbox]);
 
-    // 이미지 프리로딩 (이전/다음 이미지)
+    // 이미지 프리로딩 (이전/다음 2개씩) - 백그라운드에서 프리로드만
     useEffect(() => {
         if (!lightbox.open || lightbox.images.length <= 1) return;
         
-        const preloadImages = [];
+        // 양옆 이미지 프리로드
-        const prevIdx = (lightbox.index - 1 + lightbox.images.length) % lightbox.images.length;
+        const indicesToPreload = [];
-        const nextIdx = (lightbox.index + 1) % lightbox.images.length;
+        for (let offset = -2; offset <= 2; offset++) {
+            if (offset === 0) continue;
+            const idx = (lightbox.index + offset + lightbox.images.length) % lightbox.images.length;
+            indicesToPreload.push(idx);
+        }
         
-        [prevIdx, nextIdx].forEach(idx => {
+        indicesToPreload.forEach(idx => {
+            const url = lightbox.images[idx];
+            if (preloadedImages.has(url)) return;
+            
             const img = new Image();
-            img.src = lightbox.images[idx];
+            img.onload = () => preloadedImages.add(url);
-            preloadImages.push(img);
+            img.src = url;
         });
-    }, [lightbox.open, lightbox.index, lightbox.images]);
+    }, [lightbox.open, lightbox.index, lightbox.images, preloadedImages]);
 
     useEffect(() => {
         fetch(`/api/albums/by-name/${name}`)
@@ -199,17 +241,22 @@ function AlbumDetail() {
 
                 {/* 앨범 정보 헤더 */}
                 <div className="flex gap-8 mb-10">
-                    {/* 앨범 커버 - 크기 증가 */}
+                    {/* 앨범 커버 - 클릭하면 라이트박스 */}
                     <motion.div
                         initial={{ opacity: 0, scale: 0.9 }}
                         animate={{ opacity: 1, scale: 1 }}
                         transition={{ duration: 0.4 }}
-                        className="w-80 h-80 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg"
+                        className="w-80 h-80 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg cursor-pointer group"
+                        onClick={() => setLightbox({ 
+                            open: true, 
+                            images: [album.cover_original_url || album.cover_medium_url], 
+                            index: 0 
+                        })}
                     >
                         <img
-                            src={album.cover_url}
+                            src={album.cover_medium_url || album.cover_original_url}
                             alt={album.title}
-                            className="w-full h-full object-cover"
+                            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                         />
                     </motion.div>
 
@@ -287,22 +334,43 @@ function AlbumDetail() {
                             </p>
                         </div>
 
-                        {/* 앨범 티저 이미지 */}
+                        {/* 앨범 티저 이미지/영상 */}
                         {album.teasers && album.teasers.length > 0 && (
                             <div className="mt-auto">
-                                <p className="text-xs text-gray-400 mb-2">Official Teaser</p>
+                                <p className="text-xs text-gray-400 mb-2">티저 포토</p>
                                 <div className="flex gap-2">
                                     {album.teasers.map((teaser, index) => (
                                         <div 
                                             key={index}
-                                        onClick={() => setLightbox({ open: true, images: album.teasers.map(t => t.original_url), index })}
+                                            onClick={() => setLightbox({ 
-                                            className="w-24 h-24 bg-gray-200 rounded-lg overflow-hidden cursor-pointer transition-all duration-300 ease-out hover:scale-105 hover:shadow-xl hover:z-10"
+                                                open: true, 
+                                                images: album.teasers.map(t => t.original_url), 
+                                                index,
+                                                teasers: album.teasers // media_type 정보 전달
+                                            })}
+                                            className="w-24 h-24 bg-gray-200 rounded-lg overflow-hidden cursor-pointer transition-all duration-300 ease-out hover:scale-105 hover:shadow-xl hover:z-10 relative"
                                         >
-                                            <img 
+                                            {teaser.media_type === 'video' ? (
-                                                src={teaser.thumb_url}
+                                                <>
-                                                alt={`Teaser ${index + 1}`}
+                                                    <video 
-                                                className="w-full h-full object-cover"
+                                                        src={teaser.original_url}
-                                            />
+                                                        className="w-full h-full object-cover"
+                                                        muted
+                                                    />
+                                                    {/* 비디오 아이콘 오버레이 */}
+                                                    <div className="absolute inset-0 flex items-center justify-center bg-black/30">
+                                                        <div className="w-8 h-8 bg-white/90 rounded-full flex items-center justify-center">
+                                                            <div className="w-0 h-0 border-l-[10px] border-l-gray-800 border-y-[6px] border-y-transparent ml-1" />
+                                                        </div>
+                                                    </div>
+                                                </>
+                                            ) : (
+                                                <img 
+                                                    src={teaser.thumb_url}
+                                                    alt={`Teaser ${index + 1}`}
+                                                    className="w-full h-full object-cover"
+                                                />
+                                            )}
                                         </div>
                                     ))}
                                 </div>
@@ -411,10 +479,11 @@ function AlbumDetail() {
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
                 transition={{ duration: 0.2 }}
-                className="fixed inset-0 bg-black/95 z-50 overflow-auto"
+                className="fixed inset-0 bg-black/95 z-50 overflow-scroll lightbox-no-scrollbar"
+                style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
             >
                 {/* 내부 컨테이너 - min-width, min-height 적용 */}
-                <div className="min-w-[1200px] min-h-[800px] w-full h-full relative flex items-center justify-center">
+                <div className="min-w-[1400px] min-h-[1200px] w-full h-full relative flex items-center justify-center">
                     {/* 상단 버튼들 */}
                     <div className="absolute top-6 right-6 flex gap-3 z-10">
                         {/* 다운로드 버튼 */}
@@ -456,19 +525,34 @@ function AlbumDetail() {
                         </div>
                     )}
 
-                    {/* 이미지 */}
+                    {/* 이미지 또는 비디오 */}
                     <div className="flex flex-col items-center mx-24">
-                        <motion.img 
+                        {lightbox.teasers?.[lightbox.index]?.media_type === 'video' ? (
-                            key={lightbox.index}
+                            <motion.video
-                            src={lightbox.images[lightbox.index]}
+                                key={lightbox.index}
-                            alt="확대 이미지"
+                                src={lightbox.images[lightbox.index]}
-                            className={`max-w-[1100px] max-h-[75vh] object-contain rounded-lg transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
+                                className={`max-w-[1100px] max-h-[900px] object-contain transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
-                            onClick={(e) => e.stopPropagation()}
+                                onClick={(e) => e.stopPropagation()}
-                            onLoad={() => setImageLoaded(true)}
+                                onCanPlay={() => setImageLoaded(true)}
-                            initial={{ x: slideDirection * 100 }}
+                                initial={{ x: slideDirection * 100 }}
-                            animate={{ x: 0 }}
+                                animate={{ x: 0 }}
-                            transition={{ duration: 0.25, ease: 'easeOut' }}
+                                transition={{ duration: 0.25, ease: 'easeOut' }}
-                        />
+                                controls
+                                autoPlay
+                            />
+                        ) : (
+                            <motion.img 
+                                key={lightbox.index}
+                                src={lightbox.images[lightbox.index]}
+                                alt="확대 이미지"
+                                className={`max-w-[1100px] max-h-[900px] object-contain transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
+                                onClick={(e) => e.stopPropagation()}
+                                onLoad={() => setImageLoaded(true)}
+                                initial={{ x: slideDirection * 100 }}
+                                animate={{ x: 0 }}
+                                transition={{ duration: 0.25, ease: 'easeOut' }}
+                            />
+                        )}
                     </div>
 
                     {/* 다음 버튼 */}
@@ -484,21 +568,13 @@ function AlbumDetail() {
                         </button>
                     )}
 
-                    {/* 인디케이터 */}
+                    {/* 인디케이터 - memo 컴포넌트로 분리 */}
                     {lightbox.images.length > 1 && (
-                        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-1.5 overflow-x-auto scrollbar-hide" style={{ maxWidth: '1000px' }}>
+                        <LightboxIndicator
-                            {lightbox.images.map((_, i) => (
+                            count={lightbox.images.length}
-                                <button
+                            currentIndex={lightbox.index}
-                                    key={i}
+                            setLightbox={setLightbox}
-                                    className={`w-2 h-2 rounded-full transition-colors flex-shrink-0 ${i === lightbox.index ? 'bg-white' : 'bg-white/40'}`}
+                        />
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        setImageLoaded(false);
-                                        setLightbox({ ...lightbox, index: i });
-                                    }}
-                                />
-                            ))}
-                        </div>
                     )}
                 </div>
             </motion.div>

frontend/src/pages/pc/AlbumGallery.jsx

@@ -1,10 +1,45 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, memo } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
 import { X, ChevronLeft, ChevronRight, Download } from 'lucide-react';
 import { RowsPhotoAlbum } from 'react-photo-album';
 import 'react-photo-album/rows.css';
 
+// 인디케이터 컴포넌트 - CSS transition 사용으로 JS 블로킹에 영향받지 않음
+const LightboxIndicator = memo(function LightboxIndicator({ count, currentIndex, setLightbox }) {
+    const translateX = -(currentIndex * 18) + 100 - 6;
+    
+    return (
+        <div className="absolute bottom-6 left-1/2 -translate-x-1/2 overflow-hidden" style={{ width: '200px' }}>
+            {/* 양옆 페이드 그라데이션 */}
+            <div className="absolute inset-0 pointer-events-none z-10" style={{
+                background: 'linear-gradient(to right, rgba(0,0,0,1) 0%, transparent 20%, transparent 80%, rgba(0,0,0,1) 100%)'
+            }} />
+            {/* 슬라이딩 컨테이너 - CSS transition으로 GPU 가속 */}
+            <div 
+                className="flex items-center gap-2 justify-center"
+                style={{ 
+                    width: `${count * 18}px`,
+                    transform: `translateX(${translateX}px)`,
+                    transition: 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+                }}
+            >
+                {Array.from({ length: count }).map((_, i) => (
+                    <button
+                        key={i}
+                        className={`rounded-full flex-shrink-0 transition-all duration-300 ${
+                            i === currentIndex 
+                                ? 'w-3 h-3 bg-white' 
+                                : 'w-2.5 h-2.5 bg-white/40 hover:bg-white/60'
+                        }`}
+                        onClick={() => setLightbox(prev => ({ ...prev, index: i }))}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+});
+
 // CSS로 호버 효과 추가 + overflow 문제 수정 + 로드 애니메이션
 const galleryStyles = `
 @keyframes fadeInUp {
@@ -27,25 +62,12 @@ const galleryStyles = `
     transition: transform 0.3s ease, filter 0.3s ease !important;
     cursor: pointer;
     overflow: visible !important;
-    animation: fadeInUp 0.4s ease-out backwards;
 }
 .react-photo-album--photo:hover {
     transform: scale(1.05);
     filter: brightness(0.9);
     z-index: 10;
 }
-/* 순차적 로드 애니메이션 */
-.react-photo-album--photo:nth-child(1) { animation-delay: 0.02s; }
-.react-photo-album--photo:nth-child(2) { animation-delay: 0.04s; }
-.react-photo-album--photo:nth-child(3) { animation-delay: 0.06s; }
-.react-photo-album--photo:nth-child(4) { animation-delay: 0.08s; }
-.react-photo-album--photo:nth-child(5) { animation-delay: 0.1s; }
-.react-photo-album--photo:nth-child(6) { animation-delay: 0.12s; }
-.react-photo-album--photo:nth-child(7) { animation-delay: 0.14s; }
-.react-photo-album--photo:nth-child(8) { animation-delay: 0.16s; }
-.react-photo-album--photo:nth-child(9) { animation-delay: 0.18s; }
-.react-photo-album--photo:nth-child(10) { animation-delay: 0.2s; }
-.react-photo-album--photo:nth-child(n+11) { animation-delay: 0.22s; }
 `;
 
 function AlbumGallery() {
@@ -57,6 +79,7 @@ function AlbumGallery() {
     const [lightbox, setLightbox] = useState({ open: false, index: 0 });
     const [imageLoaded, setImageLoaded] = useState(false);
     const [slideDirection, setSlideDirection] = useState(0);
+    const [preloadedImages] = useState(() => new Set()); // 프리로드된 이미지 URL 추적
 
     useEffect(() => {
         fetch(`/api/albums/by-name/${name}`)
@@ -173,18 +196,27 @@ function AlbumGallery() {
         return () => window.removeEventListener('keydown', handleKeyDown);
     }, [lightbox.open, goToPrev, goToNext, closeLightbox]);
 
-    // 프리로딩
+    // 프리로딩 (이전/다음 2개씩) - 백그라운드에서 프리로드만
     useEffect(() => {
         if (!lightbox.open || photos.length <= 1) return;
         
-        const prevIdx = (lightbox.index - 1 + photos.length) % photos.length;
+        // 양옆 이미지 프리로드
-        const nextIdx = (lightbox.index + 1) % photos.length;
+        const indicesToPreload = [];
+        for (let offset = -2; offset <= 2; offset++) {
+            if (offset === 0) continue;
+            const idx = (lightbox.index + offset + photos.length) % photos.length;
+            indicesToPreload.push(idx);
+        }
         
-        [prevIdx, nextIdx].forEach(idx => {
+        indicesToPreload.forEach(idx => {
+            const url = photos[idx].originalUrl;
+            if (preloadedImages.has(url)) return;
+            
             const img = new Image();
-            img.src = photos[idx].originalUrl;
+            img.onload = () => preloadedImages.add(url);
+            img.src = url;
         });
-    }, [lightbox.open, lightbox.index, photos]);
+    }, [lightbox.open, lightbox.index, photos, preloadedImages]);
 
     if (loading) {
         return (
@@ -206,7 +238,7 @@ function AlbumGallery() {
             transition={{ duration: 0.3 }}
             className="py-16"
         >
-            <div className="container mx-auto px-4">
+            <div className="px-24">
                 {/* 브레드크럼 스타일 헤더 */}
                 <div className="mb-8">
                     <div className="flex items-center gap-2 text-sm text-gray-500 mb-2">
@@ -263,10 +295,11 @@ function AlbumGallery() {
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
                 transition={{ duration: 0.2 }}
-                className="fixed inset-0 bg-black/95 z-50 overflow-auto"
+                className="fixed inset-0 bg-black/95 z-50 overflow-scroll lightbox-no-scrollbar"
+                style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
             >
                 {/* 내부 컨테이너 - min-width, min-height 적용 (화면 줄여도 크기 유지, 스크롤) */}
-                <div className="min-w-[1200px] min-h-[800px] w-full h-full relative flex items-center justify-center">
+                <div className="min-w-[1400px] min-h-[1200px] w-full h-full relative flex items-center justify-center">
                     {/* 상단 버튼들 */}
                     <div className="absolute top-6 right-6 flex gap-3 z-10">
                         <button 
@@ -305,19 +338,19 @@ function AlbumGallery() {
                         </div>
                     )}
 
-                    {/* 이미지 + 컨셉 정보 - 양옆 margin으로 화살표와 간격 */}
+                    {/* 이미지 + 컨셉 정보 */}
                     <div className="flex flex-col items-center mx-24">
                         <motion.img 
                             key={lightbox.index}
                             src={photos[lightbox.index]?.originalUrl}
                             alt="확대 이미지"
-                            className={`max-w-[1100px] max-h-[75vh] object-contain rounded-lg transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
+                            className={`max-w-[1100px] max-h-[900px] object-contain transition-opacity duration-200 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
                             onLoad={() => setImageLoaded(true)}
                             initial={{ x: slideDirection * 100 }}
                             animate={{ x: 0 }}
                             transition={{ duration: 0.25, ease: 'easeOut' }}
                         />
-                        {/* 컨셉 정보 + 멤버 - 하나라도 있으면 표시 */}
+                        {/* 컨셉 정보 + 멤버 */}
                         {imageLoaded && (
                             (() => {
                                 const title = photos[lightbox.index]?.title;
@@ -329,13 +362,11 @@ function AlbumGallery() {
                                 
                                 return (
                                     <div className="mt-6 flex flex-col items-center gap-2">
-                                        {/* 컨셉명 - 있고 유효할 때만 */}
                                         {hasValidTitle && (
                                             <span className="px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white font-medium text-base">
                                                 {title}
                                             </span>
                                         )}
-                                        {/* 멤버 - 있으면 항상 표시 */}
                                         {hasMembers && (
                                             <div className="flex items-center gap-2">
                                                 {String(members).split(',').map((member, idx) => (
@@ -361,19 +392,12 @@ function AlbumGallery() {
                         </button>
                     )}
 
-                    {/* 하단 점 인디케이터 - 한 줄 고정, 스크롤바 숨김 */}
+                    {/* 하단 점 인디케이터 - memo 컴포넌트로 분리 */}
-                    <div className="absolute bottom-6 left-1/2 -translate-x-1/2 flex gap-1.5 overflow-x-auto scrollbar-hide" style={{ maxWidth: '1000px' }}>
+                    <LightboxIndicator
-                        {photos.map((_, i) => (
+                        count={photos.length}
-                            <button
+                        currentIndex={lightbox.index}
-                                key={i}
+                        setLightbox={setLightbox}
-                                className={`w-2 h-2 rounded-full transition-colors flex-shrink-0 ${i === lightbox.index ? 'bg-white' : 'bg-white/40'}`}
+                    />
-                                onClick={() => {
-                                    setImageLoaded(false);
-                                    setLightbox({ ...lightbox, index: i });
-                                }}
-                            />
-                        ))}
-                    </div>
                 </div>
             </motion.div>
         )}

frontend/src/pages/pc/Members.jsx

@@ -56,7 +56,7 @@ function Members() {
                         transition={{ delay: 0.2 }}
                         className="text-gray-500"
                     >
-                        프로미스나인의 {stats.memberCount}명의 멤버를 소개합니다
+                        프로미스나인의 멤버를 소개합니다
                     </motion.p>
                 </div>
 
@@ -127,7 +127,7 @@ function Members() {
                                     initial={{ opacity: 0, x: -10 }}
                                     animate={{ opacity: 1, x: 0 }}
                                     transition={{ delay: 0.6 + index * 0.05 }}
-                                    className="group flex items-center gap-3 bg-gray-50 rounded-full pr-4 hover:bg-gray-100 transition-colors"
+                                    className="group flex items-center gap-3 bg-gray-100 rounded-full pr-4 hover:bg-gray-200 transition-colors"
                                 >
                                     {/* 작은 원형 이미지 */}
                                     <div className="w-12 h-12 rounded-full bg-gray-200 overflow-hidden flex-shrink-0">
@@ -137,11 +137,8 @@ function Members() {
                                             className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300"
                                         />
                                     </div>
-                                    {/* 이름과 포지션 */}
+                                    {/* 이름 */}
-                                    <div>
+                                    <p className="font-medium text-gray-600 text-sm">{member.name}</p>
-                                        <p className="font-medium text-gray-600 text-sm">{member.name}</p>
-                                        <p className="text-xs text-gray-400">{member.position || ''}</p>
-                                    </div>
                                 </motion.div>
                             ))}
                         </div>

frontend/src/pages/pc/Schedule.jsx

@@ -1,30 +1,101 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Clock, MapPin, Users, ChevronLeft, ChevronRight, ChevronDown } from 'lucide-react';
+import { Clock, ChevronLeft, ChevronRight, ChevronDown, Tag, Search, ArrowLeft } from 'lucide-react';
-import { schedules } from '../../data/dummy';
 
 function Schedule() {
+    const navigate = useNavigate();
     const [currentDate, setCurrentDate] = useState(new Date());
-    const [selectedDate, setSelectedDate] = useState(null);
+    const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]); // 오늘 기본값
     const [showYearMonthPicker, setShowYearMonthPicker] = useState(false);
+    const [viewMode, setViewMode] = useState('yearMonth');
+    const [slideDirection, setSlideDirection] = useState(0);
     const pickerRef = useRef(null);
 
+    // 데이터 상태
+    const [schedules, setSchedules] = useState([]);
+    const [categories, setCategories] = useState([]);
+    const [selectedCategories, setSelectedCategories] = useState([]);
+    const [loading, setLoading] = useState(true);
+
+    // 카테고리 필터 툴팁
+    const [showCategoryTooltip, setShowCategoryTooltip] = useState(false);
+    const categoryRef = useRef(null);
+    
+    // 검색 상태
+    const [isSearchMode, setIsSearchMode] = useState(false);
+    const [searchInput, setSearchInput] = useState('');
+    const [searchTerm, setSearchTerm] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+    const [searchLoading, setSearchLoading] = useState(false);
+
+    // 데이터 로드
+    useEffect(() => {
+        fetchSchedules();
+        fetchCategories();
+    }, []);
+
+    const fetchSchedules = async () => {
+        try {
+            const response = await fetch('/api/schedules');
+            if (response.ok) {
+                const data = await response.json();
+                setSchedules(data);
+            }
+        } catch (error) {
+            console.error('일정 로드 오류:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const fetchCategories = async () => {
+        try {
+            const response = await fetch('/api/schedule-categories');
+            if (response.ok) {
+                const data = await response.json();
+                setCategories(data);
+            }
+        } catch (error) {
+            console.error('카테고리 로드 오류:', error);
+        }
+    };
+    
+    // 검색 함수 (API 호출)
+    const searchSchedules = async (term) => {
+        if (!term.trim()) {
+            setSearchResults([]);
+            return;
+        }
+        setSearchLoading(true);
+        try {
+            const response = await fetch(`/api/admin/schedules?search=${encodeURIComponent(term)}`);
+            if (response.ok) {
+                const data = await response.json();
+                setSearchResults(data);
+            }
+        } catch (error) {
+            console.error('검색 오류:', error);
+        } finally {
+            setSearchLoading(false);
+        }
+    };
+
     // 외부 클릭시 팝업 닫기
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (pickerRef.current && !pickerRef.current.contains(event.target)) {
                 setShowYearMonthPicker(false);
+                setViewMode('yearMonth');
+            }
+            if (categoryRef.current && !categoryRef.current.contains(event.target)) {
+                setShowCategoryTooltip(false);
             }
         };
 
-        if (showYearMonthPicker) {
+        document.addEventListener('mousedown', handleClickOutside);
-            document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
-        }
+    }, []);
-
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [showYearMonthPicker]);
 
     // 달력 관련 함수
     const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
@@ -37,8 +108,17 @@ function Schedule() {
 
     const days = ['일', '월', '화', '수', '목', '금', '토'];
 
-    // 스케줄이 있는 날짜 목록
+    // 스케줄이 있는 날짜 목록 (ISO 형식에서 YYYY-MM-DD 추출)
-    const scheduleDates = schedules.map(s => s.date);
+    const scheduleDates = schedules.map(s => s.date ? s.date.split('T')[0] : '');
+
+    // 해당 날짜의 첫 번째 일정 카테고리 색상
+    const getScheduleColor = (day) => {
+        const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+        const schedule = schedules.find(s => (s.date ? s.date.split('T')[0] : '') === dateStr);
+        if (!schedule) return null;
+        const cat = categories.find(c => c.id === schedule.category_id);
+        return cat?.color || '#4A7C59';
+    };
 
     const hasSchedule = (day) => {
         const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
@@ -46,29 +126,79 @@ function Schedule() {
     };
 
     const prevMonth = () => {
+        setSlideDirection(-1);
         setCurrentDate(new Date(year, month - 1, 1));
+        setSelectedDate(null); // 월 변경 시 초기화
     };
 
     const nextMonth = () => {
+        setSlideDirection(1);
         setCurrentDate(new Date(year, month + 1, 1));
+        setSelectedDate(null); // 월 변경 시 초기화
     };
 
     const selectDate = (day) => {
         const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
-        if (hasSchedule(day)) {
+        setSelectedDate(selectedDate === dateStr ? null : dateStr);
-            setSelectedDate(selectedDate === dateStr ? null : dateStr);
-        }
     };
 
-    const selectYearMonth = (newYear, newMonth) => {
+    const selectYear = (newYear) => {
-        setCurrentDate(new Date(newYear, newMonth, 1));
+        setCurrentDate(new Date(newYear, month, 1));
+        setViewMode('months');
+    };
+
+    const selectMonth = (newMonth) => {
+        setCurrentDate(new Date(year, newMonth, 1));
         setShowYearMonthPicker(false);
+        setViewMode('yearMonth');
     };
 
-    // 필터링된 스케줄
+    // 카테고리 토글
-    const filteredSchedules = selectedDate
+    const toggleCategory = (categoryId) => {
-        ? schedules.filter(s => s.date === selectedDate)
+        setSelectedCategories(prev => 
-        : schedules;
+            prev.includes(categoryId)
+                ? prev.filter(id => id !== categoryId)
+                : [...prev, categoryId]
+        );
+    };
+
+    // 필터링된 스케줄 (useMemo로 성능 최적화, 시간순 정렬)
+    const currentYearMonth = `${year}-${String(month + 1).padStart(2, '0')}`;
+    
+    const filteredSchedules = useMemo(() => {
+        // 검색 모드일 때
+        if (isSearchMode) {
+            // 검색 전엔 빈 목록, 검색 후엔 API 결과
+            if (!searchTerm) return [];
+            return searchResults.sort((a, b) => {
+                const dateA = a.date ? a.date.split('T')[0] : '';
+                const dateB = b.date ? b.date.split('T')[0] : '';
+                if (dateA !== dateB) return dateA.localeCompare(dateB);
+                const timeA = a.time || '00:00:00';
+                const timeB = b.time || '00:00:00';
+                return timeA.localeCompare(timeB);
+            });
+        }
+        
+        // 일반 모드: 기존 필터링
+        return schedules
+            .filter(s => {
+                const scheduleDate = s.date ? s.date.split('T')[0] : '';
+                const matchesDate = selectedDate 
+                    ? scheduleDate === selectedDate
+                    : scheduleDate.startsWith(currentYearMonth);
+                const matchesCategory = selectedCategories.length === 0 || selectedCategories.includes(s.category_id);
+                return matchesDate && matchesCategory;
+            })
+            .sort((a, b) => {
+                const dateA = a.date ? a.date.split('T')[0] : '';
+                const dateB = b.date ? b.date.split('T')[0] : '';
+                if (dateA !== dateB) return dateA.localeCompare(dateB);
+                const timeA = a.time || '00:00:00';
+                const timeB = b.time || '00:00:00';
+                return timeA.localeCompare(timeB);
+            });
+    }, [schedules, selectedDate, currentYearMonth, selectedCategories, isSearchMode, searchTerm, searchResults]);
 
     const formatDate = (dateStr) => {
         const date = new Date(dateStr);
@@ -80,9 +210,53 @@ function Schedule() {
         };
     };
 
-    // 년도 범위 (현재 년도 기준 ±5년)
+    // 일정 클릭 핸들러
-    const currentYear = new Date().getFullYear();
+    const handleScheduleClick = (schedule) => {
-    const yearRange = Array.from({ length: 11 }, (_, i) => currentYear - 5 + i);
+        // 설명이 없고 URL만 있으면 바로 링크 열기
+        if (!schedule.description && schedule.source_url) {
+            window.open(schedule.source_url, '_blank');
+        } else {
+            // 상세 페이지로 이동 (추후 구현)
+            navigate(`/schedule/${schedule.id}`);
+        }
+    };
+
+    // 년도 범위
+    const startYear = Math.floor(year / 10) * 10 - 1;
+    const yearRange = Array.from({ length: 12 }, (_, i) => startYear + i);
+    
+    const isCurrentYear = (y) => new Date().getFullYear() === y;
+    const isCurrentMonth = (m) => {
+        const today = new Date();
+        return today.getFullYear() === year && today.getMonth() === m;
+    };
+    
+    const monthNames = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
+    
+    const prevYearRange = () => setCurrentDate(new Date(year - 10, month, 1));
+    const nextYearRange = () => setCurrentDate(new Date(year + 10, month, 1));
+
+    // 선택된 카테고리 이름
+    const getSelectedCategoryNames = () => {
+        if (selectedCategories.length === 0) return '전체';
+        const names = selectedCategories.map(id => {
+            const cat = categories.find(c => c.id === id);
+            return cat?.name || '';
+        }).filter(Boolean);
+        if (names.length <= 2) return names.join(', ');
+        return `${names.slice(0, 2).join(', ')} 외 ${names.length - 2}개`;
+    };
+
+    // 카테고리 색상 가져오기
+    const getCategoryColor = (categoryId) => {
+        const cat = categories.find(c => c.id === categoryId);
+        return cat?.color || '#808080';
+    };
+
+    const getCategoryName = (categoryId) => {
+        const cat = categories.find(c => c.id === categoryId);
+        return cat?.name || '';
+    };
 
     return (
         <div className="py-16">
@@ -107,13 +281,16 @@ function Schedule() {
                 </div>
 
                 <div className="flex gap-8">
-                    {/* 달력 - 더 큰 사이즈 */}
+                    {/* 왼쪽: 달력 + 카테고리 */}
-                    <motion.div
+                    <div className="w-[400px] flex-shrink-0">
-                        initial={{ opacity: 0, x: -20 }}
+                        {/* 달력 */}
-                        animate={{ opacity: 1, x: 0 }}
+                        <motion.div
-                        className="w-[400px] flex-shrink-0"
+                            initial={{ opacity: 0, x: -20 }}
-                    >
+                            animate={{ opacity: isSearchMode ? 0.4 : 1, x: 0 }}
-                        <div className="bg-white rounded-2xl shadow-sm p-8 relative">
+                            transition={{ duration: 0.2 }}
+                            className={`${isSearchMode ? 'pointer-events-none' : ''}`}
+                        >
+                            <div className="bg-white rounded-2xl shadow-sm pt-8 px-8 pb-6 relative transition-all duration-200" ref={pickerRef}>
                             {/* 달력 헤더 */}
                             <div className="flex items-center justify-between mb-8">
                                 <button
@@ -122,66 +299,13 @@ function Schedule() {
                                 >
                                     <ChevronLeft size={24} />
                                 </button>
-                                <div ref={pickerRef} className="relative">
+                                <button
-                                    <button
+                                    onClick={() => setShowYearMonthPicker(!showYearMonthPicker)}
-                                        onClick={() => setShowYearMonthPicker(!showYearMonthPicker)}
+                                    className="flex items-center gap-1 text-xl font-bold hover:text-primary transition-colors"
-                                        className="flex items-center gap-1 text-xl font-bold hover:text-primary transition-colors"
+                                >
-                                    >
+                                    <span>{year}년 {month + 1}월</span>
-                                        <span>{year}년 {month + 1}월</span>
+                                    <ChevronDown size={20} className={`transition-transform ${showYearMonthPicker ? 'rotate-180' : ''}`} />
-                                        <ChevronDown size={20} className={`transition-transform ${showYearMonthPicker ? 'rotate-180' : ''}`} />
+                                </button>
-                                    </button>
-
-                                    {/* 년/월 선택 팝업 */}
-                                    <AnimatePresence>
-                                        {showYearMonthPicker && (
-                                            <motion.div
-                                                initial={{ opacity: 0, y: -10 }}
-                                                animate={{ opacity: 1, y: 0 }}
-                                                exit={{ opacity: 0, y: -10 }}
-                                                className="absolute top-12 -left-[76px] w-72 bg-white rounded-xl shadow-lg border border-gray-100 p-4 z-10"
-                                            >
-                                        {/* 년도 선택 */}
-                                        <div className="mb-4 text-center">
-                                            <p className="text-sm font-medium text-gray-500 mb-3">년도</p>
-                                            <div className="grid grid-cols-4 gap-2">
-                                                {yearRange.map((y) => (
-                                                    <button
-                                                        key={y}
-                                                        onClick={() => selectYearMonth(y, month)}
-                                                        className={`py-2 text-sm rounded-lg transition-colors ${
-                                                            y === year
-                                                                ? 'bg-primary text-white'
-                                                                : 'hover:bg-gray-100'
-                                                        }`}
-                                                    >
-                                                        {y}
-                                                    </button>
-                                                ))}
-                                            </div>
-                                        </div>
-                                        {/* 월 선택 */}
-                                        <div className="text-center">
-                                            <p className="text-sm font-medium text-gray-500 mb-3">월</p>
-                                            <div className="grid grid-cols-4 gap-2">
-                                                {Array.from({ length: 12 }, (_, i) => i).map((m) => (
-                                                    <button
-                                                        key={m}
-                                                        onClick={() => selectYearMonth(year, m)}
-                                                        className={`py-2 text-sm rounded-lg transition-colors ${
-                                                            m === month
-                                                                ? 'bg-primary text-white'
-                                                                : 'hover:bg-gray-100'
-                                                        }`}
-                                                    >
-                                                        {m + 1}월
-                                                    </button>
-                                                ))}
-                                            </div>
-                                        </div>
-                                    </motion.div>
-                                )}
-                            </AnimatePresence>
-                                </div>
                                 <button
                                     onClick={nextMonth}
                                     className="p-2 hover:bg-gray-100 rounded-full transition-colors"
@@ -190,68 +314,179 @@ function Schedule() {
                                 </button>
                             </div>
 
-                            {/* 요일 헤더 */}
+                            {/* 년/월 선택 팝업 */}
-                            <div className="grid grid-cols-7 mb-4">
+                            <AnimatePresence>
-                                {days.map((day, i) => (
+                                {showYearMonthPicker && (
-                                    <div
+                                    <motion.div
-                                        key={day}
+                                        initial={{ opacity: 0, y: -10 }}
-                                        className={`text-center text-sm font-medium py-2 ${
+                                        animate={{ opacity: 1, y: 0 }}
-                                            i === 0 ? 'text-red-500' : i === 6 ? 'text-blue-500' : 'text-gray-500'
+                                        exit={{ opacity: 0, y: -10 }}
-                                        }`}
+                                        className="absolute top-20 left-8 right-8 mx-auto w-80 bg-white rounded-xl shadow-lg border border-gray-200 p-4 z-10"
                                     >
-                                        {day}
+                                        <div className="flex items-center justify-between mb-4">
-                                    </div>
+                                            <button onClick={prevYearRange} className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
-                                ))}
+                                                <ChevronLeft size={20} className="text-gray-600" />
-                            </div>
+                                            </button>
+                                            <span className="font-medium text-gray-900">
+                                                {viewMode === 'yearMonth' ? `${yearRange[0]} - ${yearRange[yearRange.length - 1]}` : `${year}년`}
+                                            </span>
+                                            <button onClick={nextYearRange} className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors">
+                                                <ChevronRight size={20} className="text-gray-600" />
+                                            </button>
+                                        </div>
 
-                            {/* 날짜 그리드 */}
+                                        <AnimatePresence mode="wait">
-                            <div className="grid grid-cols-7 gap-1">
+                                            {viewMode === 'yearMonth' && (
-                                {/* 빈 칸 */}
+                                                <motion.div key="yearMonth" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
-                                {Array.from({ length: firstDay }).map((_, i) => (
+                                                    <div className="text-center text-sm text-gray-500 mb-3">년도</div>
-                                    <div key={`empty-${i}`} className="aspect-square" />
+                                                    <div className="grid grid-cols-4 gap-2 mb-4">
-                                ))}
+                                                        {yearRange.map((y) => (
-
+                                                            <button
-                                {/* 날짜 */}
+                                                                key={y}
-                                {Array.from({ length: daysInMonth }).map((_, i) => {
+                                                                onClick={() => selectYear(y)}
-                                    const day = i + 1;
+                                                                className={`py-2 text-sm rounded-lg transition-colors ${
-                                    const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+                                                                    year === y ? 'bg-primary text-white' :
-                                    const isSelected = selectedDate === dateStr;
+                                                                    isCurrentYear(y) && year !== y ? 'border border-primary text-primary hover:bg-primary/10' :
-                                    const hasEvent = hasSchedule(day);
+                                                                    'hover:bg-gray-100 text-gray-700'
-                                    const dayOfWeek = (firstDay + i) % 7;
+                                                                }`}
-                                    const isToday = new Date().toDateString() === new Date(year, month, day).toDateString();
+                                                            >
-
+                                                                {y}
-                                    return (
+                                                            </button>
-                                        <button
+                                                        ))}
-                                            key={day}
+                                                    </div>
-                                            onClick={() => selectDate(day)}
+                                                    <div className="text-center text-sm text-gray-500 mb-3">월</div>
-                                            disabled={!hasEvent}
+                                                    <div className="grid grid-cols-4 gap-2">
-                                            className={`aspect-square flex flex-col items-center justify-center rounded-xl text-base font-medium transition-all
+                                                        {monthNames.map((m, i) => (
-                                                ${isSelected ? 'bg-primary text-white shadow-md' : ''}
+                                                            <button
-                                                ${isToday && !isSelected ? 'ring-2 ring-primary' : ''}
+                                                                key={m}
-                                                ${hasEvent && !isSelected ? 'hover:bg-primary/10 cursor-pointer' : ''}
+                                                                onClick={() => selectMonth(i)}
-                                                ${!hasEvent ? 'cursor-default opacity-60' : ''}
+                                                                className={`py-2 text-sm rounded-lg transition-colors ${
-                                                ${dayOfWeek === 0 && !isSelected ? 'text-red-500' : ''}
+                                                                    month === i ? 'bg-primary text-white' :
-                                                ${dayOfWeek === 6 && !isSelected ? 'text-blue-500' : ''}
+                                                                    isCurrentMonth(i) && month !== i ? 'border border-primary text-primary hover:bg-primary/10' :
-                                            `}
+                                                                    'hover:bg-gray-100 text-gray-700'
-                                        >
+                                                                }`}
-                                            <span>{day}</span>
+                                                            >
-                                            {hasEvent && (
+                                                                {m}
-                                                <span className={`w-1.5 h-1.5 rounded-full mt-1 ${isSelected ? 'bg-white' : 'bg-primary'}`} />
+                                                            </button>
+                                                        ))}
+                                                    </div>
+                                                </motion.div>
                                             )}
-                                        </button>
+                                            {viewMode === 'months' && (
-                                    );
+                                                <motion.div key="months" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15 }}>
-                                })}
+                                                    <div className="text-center text-sm text-gray-500 mb-3">월 선택</div>
-                            </div>
+                                                    <div className="grid grid-cols-4 gap-2">
+                                                        {monthNames.map((m, i) => (
+                                                            <button
+                                                                key={m}
+                                                                onClick={() => selectMonth(i)}
+                                                                className={`py-2.5 text-sm rounded-lg transition-colors ${
+                                                                    month === i ? 'bg-primary text-white' :
+                                                                    isCurrentMonth(i) && month !== i ? 'border border-primary text-primary hover:bg-primary/10' :
+                                                                    'hover:bg-gray-100 text-gray-700'
+                                                                }`}
+                                                            >
+                                                                {m}
+                                                            </button>
+                                                        ))}
+                                                    </div>
+                                                </motion.div>
+                                            )}
+                                        </AnimatePresence>
+                                    </motion.div>
+                                )}
+                            </AnimatePresence>
+
+                            {/* 요일 헤더 + 날짜 그리드 */}
+                            <AnimatePresence mode="wait" initial={false}>
+                                <motion.div
+                                    key={`${year}-${month}`}
+                                    initial={{ opacity: 0, x: slideDirection * 20 }}
+                                    animate={{ opacity: 1, x: 0 }}
+                                    exit={{ opacity: 0, x: slideDirection * -20 }}
+                                    transition={{ duration: 0.08 }}
+                                    layout
+                                >
+                                    <div className="grid grid-cols-7 mb-4">
+                                        {days.map((day, i) => (
+                                            <div
+                                                key={day}
+                                                className={`text-center text-sm font-medium py-2 ${
+                                                    i === 0 ? 'text-red-500' : i === 6 ? 'text-blue-500' : 'text-gray-500'
+                                                }`}
+                                            >
+                                                {day}
+                                            </div>
+                                        ))}
+                                    </div>
+
+                                    <div className="grid grid-cols-7 gap-1">
+                                        {/* 전달 날짜 */}
+                                        {Array.from({ length: firstDay }).map((_, i) => {
+                                            const prevMonthDays = getDaysInMonth(year, month - 1);
+                                            const day = prevMonthDays - firstDay + i + 1;
+                                            return (
+                                                <div key={`prev-${i}`} className="aspect-square flex items-center justify-center text-gray-300 text-base">
+                                                    {day}
+                                                </div>
+                                            );
+                                        })}
+
+                                        {/* 현재 달 날짜 */}
+                                        {Array.from({ length: daysInMonth }).map((_, i) => {
+                                            const day = i + 1;
+                                            const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+                                            const isSelected = selectedDate === dateStr;
+                                            const hasEvent = hasSchedule(day);
+                                            const eventColor = getScheduleColor(day);
+                                            const dayOfWeek = (firstDay + i) % 7;
+                                            const isToday = new Date().toDateString() === new Date(year, month, day).toDateString();
+
+                                            return (
+                                                <button
+                                                    key={day}
+                                                    onClick={() => selectDate(day)}
+                                                    className={`aspect-square flex flex-col items-center justify-center rounded-full text-base font-medium transition-all relative hover:bg-gray-100
+                                                        ${isSelected ? 'bg-primary text-white shadow-lg hover:bg-primary' : ''}
+                                                        ${isToday && !isSelected ? 'bg-primary/10 text-primary font-bold hover:bg-primary/20' : ''}
+                                                        ${dayOfWeek === 0 && !isSelected && !isToday ? 'text-red-500' : ''}
+                                                        ${dayOfWeek === 6 && !isSelected && !isToday ? 'text-blue-500' : ''}
+                                                    `}
+                                                >
+                                                    <span>{day}</span>
+                                                    {/* 점: absolute로 위치 고정하여 글씨 위치에 영향 없음 */}
+                                                    <span 
+                                                        className={`absolute bottom-1 w-1.5 h-1.5 rounded-full ${hasEvent ? '' : 'opacity-0'}`}
+                                                        style={{ backgroundColor: isSelected ? 'white' : (eventColor || 'transparent') }}
+                                                    />
+                                                </button>
+                                            );
+                                        })}
+
+                                        {/* 다음달 날짜 */}
+                                        {(() => {
+                                            const totalCells = firstDay + daysInMonth;
+                                            const remainder = totalCells % 7;
+                                            const nextDays = remainder === 0 ? 0 : 7 - remainder;
+                                            return Array.from({ length: nextDays }).map((_, i) => (
+                                                <div key={`next-${i}`} className="aspect-square flex items-center justify-center text-gray-300 text-base">
+                                                    {i + 1}
+                                                </div>
+                                            ));
+                                        })()}
+                                    </div>
+                                </motion.div>
+                            </AnimatePresence>
 
                             {/* 범례 및 전체보기 */}
                             <div className="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between text-sm">
-                                <div className="flex items-center gap-1 text-gray-500">
+                                <div className="flex items-center gap-1.5 text-gray-500">
-                                    <span className="w-2 h-2 rounded-full bg-primary" />
+                                    <span className="w-2 h-2 rounded-full bg-primary flex-shrink-0" />
-                                    <span>일정 있음</span>
+                                    <span className="leading-none">일정 있음</span>
                                 </div>
                                 <button
                                     onClick={() => setSelectedDate(null)}
-                                    className={`px-4 py-1.5 rounded-lg transition-colors ${
+                                    className={`px-4 py-2 rounded-lg transition-colors ${
                                         selectedDate 
                                             ? 'bg-primary text-white hover:bg-primary-dark' 
                                             : 'bg-gray-100 text-gray-400 cursor-default'
@@ -264,53 +499,260 @@ function Schedule() {
                         </div>
                     </motion.div>
 
-                    {/* 스케줄 리스트 */}
+                        {/* 카테고리 필터 */}
-                    <div className="flex-1 space-y-4">
+                        <motion.div 
-                        {filteredSchedules.length > 0 ? (
+                            animate={{ opacity: isSearchMode && searchResults.length === 0 ? 0.4 : 1 }}
-                            filteredSchedules.map((schedule, index) => {
+                            transition={{ duration: 0.2 }}
-                                const formatted = formatDate(schedule.date);
+                            className={`bg-white rounded-2xl shadow-sm p-6 mt-4 ${isSearchMode && searchResults.length === 0 ? 'pointer-events-none' : ''}`}
-                                return (
+                        >
-                                    <motion.div
+                            <h3 className="font-bold text-gray-900 mb-4">카테고리</h3>
-                                        key={schedule.id}
+                            <div className="space-y-1">
-                                        initial={{ opacity: 0, y: 20 }}
+                                {/* 전체 */}
-                                        animate={{ opacity: 1, y: 0 }}
+                                <button
-                                        transition={{ delay: index * 0.1 }}
+                                    onClick={() => setSelectedCategories([])}
-                                        className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"
+                                    className={`w-full flex items-center justify-between px-3 py-3 rounded-lg transition-colors ${
-                                    >
+                                        selectedCategories.length === 0 ? 'bg-primary/10 text-primary' : 'hover:bg-gray-50'
-                                        {/* 날짜 영역 */}
+                                    }`}
-                                        <div className="w-24 bg-primary flex flex-col items-center justify-center text-white py-6">
+                                >
-                                            <span className="text-sm font-medium opacity-80">{formatted.month}월</span>
+                                    <div className="flex items-center gap-2">
-                                            <span className="text-3xl font-bold">{formatted.day}</span>
+                                        <span className="w-3 h-3 rounded-full bg-gray-400" />
-                                            <span className="text-sm font-medium opacity-80">{formatted.weekday}</span>
+                                        <span>전체</span>
-                                        </div>
+                                    </div>
+                                    <span className="text-sm text-gray-400">
+                                        {isSearchMode && searchTerm 
+                                            ? searchResults.length
+                                            : schedules.filter(s => {
+                                                const scheduleDate = s.date ? s.date.split('T')[0] : '';
+                                                return scheduleDate.startsWith(currentYearMonth);
+                                            }).length
+                                        }
+                                    </span>
+                                </button>
 
-                                        {/* 스케줄 내용 */}
+                                {/* 개별 카테고리 */}
-                                        <div className="flex-1 p-6 flex flex-col justify-center">
+                                {categories.map(category => {
-                                            <h3 className="font-bold text-lg mb-3">{schedule.title}</h3>
+                                    // 검색 모드에서는 검색 결과 기준, 일반 모드에서는 해당 월 기준
-                                            
+                                    const count = isSearchMode && searchTerm
-                                            <div className="flex flex-wrap gap-4 text-sm text-gray-500">
+                                        ? searchResults.filter(s => s.category_id === category.id).length
-                                                <div className="flex items-center gap-1">
+                                        : schedules.filter(s => {
-                                                    <Clock size={14} className="text-primary" />
+                                            const scheduleDate = s.date ? s.date.split('T')[0] : '';
-                                                    <span>{schedule.time}</span>
+                                            return scheduleDate.startsWith(currentYearMonth) && s.category_id === category.id;
-                                                </div>
+                                        }).length;
-                                                <div className="flex items-center gap-1">
+                                    const isSelected = selectedCategories.includes(category.id);
-                                                    <MapPin size={14} className="text-primary" />
+                                    return (
-                                                    <span>{schedule.platform}</span>
+                                        <button
-                                                </div>
+                                            key={category.id}
-                                                <div className="flex items-center gap-1">
+                                            onClick={() => toggleCategory(category.id)}
-                                                    <Users size={14} className="text-primary" />
+                                            className={`w-full flex items-center justify-between px-3 py-3 rounded-lg transition-colors ${
-                                                    <span>{schedule.members.join(', ')}</span>
+                                                isSelected ? 'bg-primary/10 text-primary' : 'hover:bg-gray-50'
+                                            }`}
+                                        >
+                                            <div className="flex items-center gap-2">
+                                                <span 
+                                                    className="w-3 h-3 rounded-full" 
+                                                    style={{ backgroundColor: category.color }}
+                                                />
+                                                <span>{category.name}</span>
+                                            </div>
+                                            <span className="text-sm text-gray-400">{count}</span>
+                                        </button>
+                                    );
+                                })}
+                            </div>
+                        </motion.div>
+                    </div>
+
+                    {/* 스케줄 리스트 */}
+                    <div className="flex-1">
+                        {/* 헤더 */}
+                        <div className="flex items-center justify-between mb-4">
+                            <AnimatePresence mode="wait">
+                                {isSearchMode ? (
+                                    /* 검색 모드 - 밑줄 스타일 */
+                                    <motion.div 
+                                        key="search-mode"
+                                        initial={{ opacity: 0, x: -10 }}
+                                        animate={{ opacity: 1, x: 0 }}
+                                        exit={{ opacity: 0, x: -10 }}
+                                        transition={{ duration: 0.15 }}
+                                        className="flex items-center gap-3 flex-1"
+                                    >
+                                        <button
+                                            onClick={() => {
+                                                setIsSearchMode(false);
+                                                setSearchInput('');
+                                                setSearchTerm('');
+                                                setSearchResults([]);
+                                            }}
+                                            className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+                                        >
+                                            <ArrowLeft size={20} className="text-gray-500" />
+                                        </button>
+                                        <div className="flex-1 flex items-center gap-3 border-b border-gray-300 pb-1">
+                                            <input
+                                                type="text"
+                                                placeholder="일정 검색..."
+                                                value={searchInput}
+                                                autoFocus
+                                                onChange={(e) => setSearchInput(e.target.value)}
+                                                onKeyDown={(e) => {
+                                                    if (e.key === 'Enter') {
+                                                        setSearchTerm(searchInput);
+                                                        searchSchedules(searchInput);
+                                                    } else if (e.key === 'Escape') {
+                                                        setIsSearchMode(false);
+                                                        setSearchInput('');
+                                                        setSearchTerm('');
+                                                        setSearchResults([]);
+                                                    }
+                                                }}
+                                                className="flex-1 bg-transparent focus:outline-none text-gray-700 placeholder-gray-400"
+                                            />
+                                        </div>
+                                        <button
+                                            onClick={() => {
+                                                setSearchTerm(searchInput);
+                                                searchSchedules(searchInput);
+                                            }}
+                                            disabled={searchLoading}
+                                            className="px-4 py-1.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"
+                                        >
+                                            {searchLoading ? '...' : '검색'}
+                                        </button>
+                                    </motion.div>
+                                ) : (
+                                    /* 일반 모드 */
+                                    <motion.div 
+                                        key="normal-mode"
+                                        initial={{ opacity: 0, x: 10 }}
+                                        animate={{ opacity: 1, x: 0 }}
+                                        exit={{ opacity: 0, x: 10 }}
+                                        transition={{ duration: 0.15 }}
+                                        className="flex items-center gap-3"
+                                    >
+                                        <button
+                                            onClick={() => setIsSearchMode(true)}
+                                            className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+                                            title="일정 검색"
+                                        >
+                                            <Search size={20} className="text-gray-500" />
+                                        </button>
+                                        <h2 className="text-lg font-bold text-gray-900">
+                                            {selectedDate 
+                                                ? (() => {
+                                                    const d = new Date(selectedDate);
+                                                    const dayNames = ['일', '월', '화', '수', '목', '금', '토'];
+                                                    return `${d.getMonth() + 1}월 ${d.getDate()}일 ${dayNames[d.getDay()]}요일`;
+                                                })()
+                                                : `${month + 1}월 전체 일정`
+                                            }
+                                        </h2>
+                                        {selectedCategories.length > 0 && (
+                                            <div className="relative" ref={categoryRef}>
+                                                <button
+                                                    onClick={() => setShowCategoryTooltip(!showCategoryTooltip)}
+                                                    className="flex items-center gap-1 px-2 py-1 bg-gray-100 rounded-md text-sm text-gray-600 hover:bg-gray-200 transition-colors"
+                                                >
+                                                    <Tag size={14} />
+                                                    <span>{selectedCategories.length}개 카테고리</span>
+                                                </button>
+                                                <AnimatePresence>
+                                                    {showCategoryTooltip && (
+                                                        <motion.div 
+                                                            initial={{ opacity: 0, y: -5 }}
+                                                            animate={{ opacity: 1, y: 0 }}
+                                                            exit={{ opacity: 0, y: -5 }}
+                                                            transition={{ duration: 0.15 }}
+                                                            className="absolute top-full left-0 mt-1 bg-white rounded-lg shadow-lg border border-gray-200 p-3 z-10 min-w-[150px]"
+                                                        >
+                                                            {selectedCategories.map(id => {
+                                                                const cat = categories.find(c => c.id === id);
+                                                                if (!cat) return null;
+                                                                return (
+                                                                    <div key={id} className="flex items-center gap-2 py-1">
+                                                                        <span className="w-2 h-2 rounded-full" style={{ backgroundColor: cat.color }} />
+                                                                        <span className="text-sm">{cat.name}</span>
+                                                                    </div>
+                                                                );
+                                                            })}
+                                                        </motion.div>
+                                                    )}
+                                                </AnimatePresence>
+                                            </div>
+                                        )}
+                                    </motion.div>
+                                )}
+                            </AnimatePresence>
+                            {/* 검색 모드가 아닐 때만 개수 표시 */}
+                            {!isSearchMode && (
+                                <span className="text-sm text-gray-500">{filteredSchedules.length}개 일정</span>
+                            )}
+                        </div>
+
+                        <div className="space-y-4">
+                            {loading ? (
+                                <div className="text-center py-20 text-gray-500">로딩 중...</div>
+                            ) : filteredSchedules.length > 0 ? (
+                                filteredSchedules.map((schedule, index) => {
+                                    const formatted = formatDate(schedule.date);
+                                    const categoryColor = getCategoryColor(schedule.category_id);
+                                    const categoryName = getCategoryName(schedule.category_id);
+                                    
+                                    return (
+                                        <motion.div
+                                            key={schedule.id}
+                                            initial={{ opacity: 0, y: 20 }}
+                                            animate={{ opacity: 1, y: 0 }}
+                                            transition={{ delay: Math.min(index, 10) * 0.03 }}
+                                            onClick={() => handleScheduleClick(schedule)}
+                                            className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
+                                        >
+                                            {/* 날짜 영역 */}
+                                            <div 
+                                                className="w-24 flex flex-col items-center justify-center text-white py-6"
+                                                style={{ backgroundColor: categoryColor }}
+                                            >
+                                                {/* 검색 모드일 때 년.월 표시, 일반 모드에서는 월 표시 안함 */}
+                                                {isSearchMode && searchTerm && (
+                                                    <span className="text-xs font-medium opacity-60">
+                                                        {new Date(schedule.date).getFullYear()}.{new Date(schedule.date).getMonth() + 1}
+                                                    </span>
+                                                )}
+                                                <span className="text-3xl font-bold">{formatted.day}</span>
+                                                <span className="text-sm font-medium opacity-80">{formatted.weekday}</span>
+                                            </div>
+
+                                            {/* 스케줄 내용 */}
+                                            <div className="flex-1 p-6 flex flex-col justify-center">
+                                                <h3 className="font-bold text-lg mb-2">{schedule.title}</h3>
+                                                
+                                                <div className="flex flex-wrap gap-3 text-sm text-gray-500">
+                                                    {schedule.time && (
+                                                        <div className="flex items-center gap-1">
+                                                            <Clock size={14} style={{ color: categoryColor }} />
+                                                            <span>{schedule.time.slice(0, 5)}</span>
+                                                        </div>
+                                                    )}
+                                                    {categoryName && (
+                                                        <div className="flex items-center gap-1">
+                                                            <span 
+                                                                className="w-2 h-2 rounded-full" 
+                                                                style={{ backgroundColor: categoryColor }}
+                                                            />
+                                                            <span>{categoryName}</span>
+                                                        </div>
+                                                    )}
                                                 </div>
                                             </div>
-                                        </div>
+                                        </motion.div>
-                                    </motion.div>
+                                    );
-                                );
+                                })
-                            })
+                            ) : (
-                        ) : (
+                                <div className="text-center py-20 text-gray-500">
-                            <div className="text-center py-20 text-gray-500">
+                                    {selectedDate ? '선택한 날짜에 일정이 없습니다.' : '예정된 일정이 없습니다.'}
-                                {selectedDate ? '선택한 날짜에 일정이 없습니다.' : '예정된 일정이 없습니다.'}
+                                </div>
-                            </div>
+                            )}
-                        )}
+                        </div>
                     </div>
                 </div>
             </div>

frontend/src/pages/pc/admin/AdminAlbumForm.jsx

@@ -371,7 +371,9 @@ function AdminAlbumForm() {
         album_type: '',
         album_type_short: '',
         release_date: '',
-        cover_url: '',
+        cover_original_url: '',
+        cover_medium_url: '',
+        cover_thumb_url: '',
         folder_name: '',
         description: '',
     });
@@ -399,12 +401,14 @@ function AdminAlbumForm() {
                         album_type: data.album_type || '',
                         album_type_short: data.album_type_short || '',
                         release_date: data.release_date ? data.release_date.split('T')[0] : '',
-                        cover_url: data.cover_url || '',
+                        cover_original_url: data.cover_original_url || '',
+                        cover_medium_url: data.cover_medium_url || '',
+                        cover_thumb_url: data.cover_thumb_url || '',
                         folder_name: data.folder_name || '',
                         description: data.description || '',
                     });
-                    if (data.cover_url) {
+                    if (data.cover_medium_url || data.cover_original_url) {
-                        setCoverPreview(data.cover_url);
+                        setCoverPreview(data.cover_medium_url || data.cover_original_url);
                     }
                     setTracks(data.tracks || []);
                     setLoading(false);
@@ -562,7 +566,7 @@ function AdminAlbumForm() {
             <header className="bg-white shadow-sm border-b border-gray-100">
                 <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
                     <div className="flex items-center gap-4">
-                        <Link to="/" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
+                        <Link to="/admin/dashboard" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
                             fromis_9
                         </Link>
                         <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">

frontend/src/pages/pc/admin/AdminAlbumPhotos.jsx

@@ -178,8 +178,9 @@ function AdminAlbumPhotos() {
             const photosRes = await fetch(`/api/admin/albums/${albumId}/photos`, {
                 headers: { 'Authorization': `Bearer ${token}` }
             });
+            let photosData = [];
             if (photosRes.ok) {
-                const photosData = await photosRes.json();
+                photosData = await photosRes.json();
                 setPhotos(photosData);
             }
 
@@ -187,10 +188,23 @@ function AdminAlbumPhotos() {
             const teasersRes = await fetch(`/api/admin/albums/${albumId}/teasers`, {
                 headers: { 'Authorization': `Bearer ${token}` }
             });
+            let teasersData = [];
             if (teasersRes.ok) {
-                const teasersData = await teasersRes.json();
+                teasersData = await teasersRes.json();
                 setTeasers(teasersData);
             }
+
+            // 시작 번호 자동 설정 (현재 선택된 타입의 마지막 + 1)
+            // 컨셉 포토는 컨셉 포토끼리, 티저는 티저끼리 번호 계산
+            const maxPhotoOrder = photosData.length > 0 
+                ? Math.max(...photosData.map(p => p.sort_order || 0)) 
+                : 0;
+            const maxTeaserOrder = teasersData.length > 0 
+                ? Math.max(...teasersData.map(t => t.sort_order || 0)) 
+                : 0;
+            
+            // 기본값은 컨셉 포토 기준
+            setStartNumber(maxPhotoOrder + 1);
             
             setLoading(false);
         } catch (error) {
@@ -200,6 +214,21 @@ function AdminAlbumPhotos() {
         }
     };
 
+    // 타입 변경 시 시작 번호 자동 업데이트
+    useEffect(() => {
+        if (photoType === 'concept') {
+            const maxOrder = photos.length > 0 
+                ? Math.max(...photos.map(p => p.sort_order || 0)) 
+                : 0;
+            setStartNumber(maxOrder + 1);
+        } else if (photoType === 'teaser') {
+            const maxOrder = teasers.length > 0 
+                ? Math.max(...teasers.map(t => t.sort_order || 0)) 
+                : 0;
+            setStartNumber(maxOrder + 1);
+        }
+    }, [photoType, photos, teasers]);
+
     const handleLogout = () => {
         localStorage.removeItem('adminToken');
         localStorage.removeItem('adminUser');
@@ -281,6 +310,7 @@ function AdminAlbumPhotos() {
             file,
             preview: URL.createObjectURL(file),
             filename: file.name,
+            isVideo: file.type === 'video/mp4', // 비디오 여부
             groupType: 'group', // 'group' | 'solo' | 'unit'
             members: [], // 태깅된 멤버들 (단체일 경우 빈 배열)
             conceptName: '', // 개별 컨셉명
@@ -293,13 +323,15 @@ function AdminAlbumPhotos() {
         setPendingFiles(newOrder);
     };
 
-    // 직접 순서 변경 (입력으로)
+    // 직접 순서 변경 (입력으로) - 입력값은 startNumber 기준
     const moveToPosition = (fileId, newPosition) => {
         const pos = parseInt(newPosition, 10);
-        if (isNaN(pos) || pos < 1) return;
+        // 시작 번호보다 작거나 유효하지 않으면 무시
+        if (isNaN(pos) || pos < startNumber) return;
         
         setPendingFiles(prev => {
-            const targetIndex = Math.min(pos - 1, prev.length - 1);
+            // 입력값에서 startNumber를 빼서 배열 인덱스 계산
+            const targetIndex = Math.min(pos - startNumber, prev.length - 1);
             const currentIndex = prev.findIndex(f => f.id === fileId);
             if (currentIndex === -1 || currentIndex === targetIndex) return prev;
             
@@ -448,13 +480,13 @@ function AdminAlbumPhotos() {
 
             if (result) {
                 setToast({ message: result.message, type: 'success' });
+                // 시작 번호는 fetchAlbumData 후 useEffect에서 자동 업데이트됨
             }
             
             // 미리보기 URL 해제
             pendingFiles.forEach(f => URL.revokeObjectURL(f.preview));
             setPendingFiles([]);
             setConceptName('');
-            setStartNumber(1); // 초기화
             
             // 사진 목록 다시 로드
             fetchAlbumData();
@@ -609,15 +641,28 @@ function AdminAlbumPhotos() {
                         >
                             <X size={24} />
                         </button>
-                        <motion.img
+                        {previewPhoto.isVideo ? (
-                            initial={{ scale: 0.9 }}
+                            <motion.video
-                            animate={{ scale: 1 }}
+                                initial={{ scale: 0.9 }}
-                            exit={{ scale: 0.9 }}
+                                animate={{ scale: 1 }}
-                            src={previewPhoto.preview || previewPhoto.url}
+                                exit={{ scale: 0.9 }}
-                            alt={previewPhoto.filename}
+                                src={previewPhoto.preview || previewPhoto.url}
-                            className="max-w-[90vw] max-h-[90vh] object-contain"
+                                className="max-w-[90vw] max-h-[90vh] object-contain"
-                            onClick={(e) => e.stopPropagation()}
+                                onClick={(e) => e.stopPropagation()}
-                        />
+                                controls
+                                autoPlay
+                            />
+                        ) : (
+                            <motion.img
+                                initial={{ scale: 0.9 }}
+                                animate={{ scale: 1 }}
+                                exit={{ scale: 0.9 }}
+                                src={previewPhoto.preview || previewPhoto.url}
+                                alt={previewPhoto.filename}
+                                className="max-w-[90vw] max-h-[90vh] object-contain"
+                                onClick={(e) => e.stopPropagation()}
+                            />
+                        )}
                     </motion.div>
                 )}
             </AnimatePresence>
@@ -626,7 +671,7 @@ function AdminAlbumPhotos() {
             <header className="bg-white shadow-sm border-b border-gray-100">
                 <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
                     <div className="flex items-center gap-4">
-                        <Link to="/" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
+                        <Link to="/admin/dashboard" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
                             fromis_9
                         </Link>
                         <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
@@ -675,7 +720,7 @@ function AdminAlbumPhotos() {
                 >
                     <div className="flex items-center gap-4">
                         <img 
-                            src={album?.cover_url} 
+                            src={album?.cover_thumb_url || album?.cover_original_url} 
                             alt={album?.title}
                             className="w-14 h-14 rounded-xl object-cover"
                         />
@@ -898,7 +943,9 @@ function AdminAlbumPhotos() {
                         <div className="py-20 text-center">
                             <Image size={48} className="mx-auto text-gray-300 mb-4" />
                             <p className="text-gray-500 mb-2">사진을 드래그하여 업로드하세요</p>
-                            <p className="text-gray-400 text-sm mb-4">JPG, PNG, WebP 지원</p>
+                            <p className="text-gray-400 text-sm mb-4">
+                                {photoType === 'teaser' ? 'JPG, PNG, WebP, MP4 지원' : 'JPG, PNG, WebP 지원'}
+                            </p>
                             <button
                                 onClick={() => fileInputRef.current?.click()}
                                 className="inline-flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors"
@@ -947,10 +994,18 @@ function AdminAlbumPhotos() {
                                                         const val = e.target.value.trim();
                                                         // 스크롤 위치 저장
                                                         const scrollY = window.scrollY;
-                                                        if (val && !isNaN(val)) {
+                                                        const currentIndex = pendingFiles.findIndex(f => f.id === file.id);
+                                                        const currentOrder = startNumber + currentIndex;
+                                                        
+                                                        // 값이 변경된 경우에만 이동
+                                                        if (val && !isNaN(val) && parseInt(val) !== currentOrder) {
                                                             moveToPosition(file.id, val);
                                                         }
-                                                        e.target.value = String(pendingFiles.findIndex(f => f.id === file.id) + 1).padStart(2, '0');
+                                                        
+                                                        // 현재 위치 기준으로 값 복원
+                                                        const newIndex = pendingFiles.findIndex(f => f.id === file.id);
+                                                        e.target.value = String(startNumber + newIndex).padStart(2, '0');
+                                                        
                                                         // 스크롤 위치 복원
                                                         requestAnimationFrame(() => {
                                                             window.scrollTo(0, scrollY);
@@ -966,14 +1021,34 @@ function AdminAlbumPhotos() {
                                             </div>
 
                                             {/* 썸네일 (180px로 확대) */}
-                                            <img
+                                            {file.isVideo ? (
-                                                src={file.preview}
+                                                <div className="relative w-[180px] h-[180px] flex-shrink-0">
-                                                alt={file.filename}
+                                                    <video
-                                                draggable="false"
+                                                        src={file.preview}
-                                                loading="lazy"
+                                                        className="w-full h-full rounded-lg object-cover cursor-pointer hover:opacity-80 transition-opacity select-none"
-                                                className="w-[180px] h-[180px] rounded-lg object-cover cursor-pointer hover:opacity-80 transition-opacity flex-shrink-0 select-none"
+                                                        onClick={() => setPreviewPhoto(file)}
-                                                onClick={() => setPreviewPhoto(file)}
+                                                        muted
-                                            />
+                                                    />
+                                                    {/* 재생 버튼 오버레이 */}
+                                                    <div 
+                                                        className="absolute inset-0 flex items-center justify-center bg-black/30 rounded-lg cursor-pointer"
+                                                        onClick={() => setPreviewPhoto(file)}
+                                                    >
+                                                        <div className="w-12 h-12 bg-white/90 rounded-full flex items-center justify-center">
+                                                            <div className="w-0 h-0 border-l-[14px] border-l-gray-800 border-y-[8px] border-y-transparent ml-1" />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            ) : (
+                                                <img
+                                                    src={file.preview}
+                                                    alt={file.filename}
+                                                    draggable="false"
+                                                    loading="lazy"
+                                                    className="w-[180px] h-[180px] rounded-lg object-cover cursor-pointer hover:opacity-80 transition-opacity flex-shrink-0 select-none"
+                                                    onClick={() => setPreviewPhoto(file)}
+                                                />
+                                            )}
 
                                             {/* 메타 정보 - 고정 높이 */}
                                             <div className="flex-1 space-y-3 h-[200px] overflow-hidden">
@@ -1023,7 +1098,7 @@ function AdminAlbumPhotos() {
                                                                                 onClick={() => toggleMember(file.id, member.id)}
                                                                                 className={`px-3 py-1 rounded-full text-sm transition-colors ${
                                                                                     file.members.includes(member.id)
-                                                                                        ? 'bg-primary text-white'
+                                                                                        ? 'bg-primary text-white border border-primary'
                                                                                         : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200'
                                                                                 }`}
                                                                             >
@@ -1044,7 +1119,7 @@ function AdminAlbumPhotos() {
                                                                             onClick={() => toggleMember(file.id, member.id)}
                                                                             className={`px-3 py-1 rounded-full text-sm transition-colors ${
                                                                                 file.members.includes(member.id)
-                                                                                    ? 'bg-gray-500 text-white'
+                                                                                    ? 'bg-gray-500 text-white border border-gray-500'
                                                                                     : 'bg-gray-100 text-gray-400 hover:bg-gray-200 border border-gray-200'
                                                                             }`}
                                                                         >
@@ -1161,8 +1236,8 @@ function AdminAlbumPhotos() {
                                                 }}
                                                 className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
                                                     bulkEdit.members.includes(member.id)
-                                                        ? 'bg-primary text-white'
+                                                        ? 'bg-primary text-white border border-primary'
-                                                        : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                                                        : 'bg-gray-100 text-gray-600 hover:bg-gray-200 border border-gray-100'
                                                 }`}
                                             >
                                                 {member.name}
@@ -1188,8 +1263,8 @@ function AdminAlbumPhotos() {
                                                 }}
                                                 className={`px-2.5 py-1 rounded-full text-xs font-medium transition-colors ${
                                                     bulkEdit.members.includes(member.id)
-                                                        ? 'bg-gray-500 text-white'
+                                                        ? 'bg-gray-500 text-white border border-gray-500'
-                                                        : 'bg-gray-100 text-gray-400 hover:bg-gray-200'
+                                                        : 'bg-gray-100 text-gray-400 hover:bg-gray-200 border border-gray-100'
                                                 }`}
                                             >
                                                 {member.name}
@@ -1412,12 +1487,23 @@ function AdminAlbumPhotos() {
                                                     );
                                                 }}
                                             >
-                                                <img
+                                                {teaser.media_type === 'video' ? (
-                                                    src={teaser.thumb_url || teaser.medium_url}
+                                                    <video
-                                                    alt={`티저 ${teaser.sort_order}`}
+                                                        src={teaser.original_url}
-                                                    loading="lazy"
+                                                        className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105"
-                                                    className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105"
+                                                        muted
-                                                />
+                                                        loop
+                                                        onMouseEnter={e => e.target.play()}
+                                                        onMouseLeave={e => { e.target.pause(); e.target.currentTime = 0; }}
+                                                    />
+                                                ) : (
+                                                    <img
+                                                        src={teaser.thumb_url || teaser.medium_url}
+                                                        alt={`티저 ${teaser.sort_order}`}
+                                                        loading="lazy"
+                                                        className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105"
+                                                    />
+                                                )}
                                                 {/* 호버 시 반투명 오버레이 */}
                                                 <div className="absolute inset-0 bg-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none" />
                                                 
@@ -1555,7 +1641,7 @@ function AdminAlbumPhotos() {
                     ref={fileInputRef}
                     type="file"
                     multiple
-                    accept="image/*"
+                    accept={photoType === 'teaser' ? 'image/*,video/mp4' : 'image/*'}
                     onChange={handleFileSelect}
                     className="hidden"
                 />

frontend/src/pages/pc/admin/AdminAlbums.jsx

@@ -169,7 +169,7 @@ function AdminAlbums() {
             <header className="bg-white shadow-sm border-b border-gray-100">
                 <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
                     <div className="flex items-center gap-4">
-                        <Link to="/" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
+                        <Link to="/admin/dashboard" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
                             fromis_9
                         </Link>
                         <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
@@ -260,7 +260,7 @@ function AdminAlbums() {
                                         <td className="px-6 py-4">
                                             <div className="flex items-center gap-4">
                                                 <img
-                                                    src={album.cover_url}
+                                                    src={album.cover_thumb_url || album.cover_original_url}
                                                     alt={album.title}
                                                     className="w-12 h-12 rounded-lg object-cover"
                                                 />

frontend/src/pages/pc/admin/AdminDashboard.jsx

@@ -6,9 +6,46 @@ import {
     Home, ChevronRight
 } from 'lucide-react';
 
+// 슬롯머신 스타일 롤링 숫자 컴포넌트 (아래에서 위로)
+function AnimatedNumber({ value }) {
+    const digits = String(value).split('');
+    
+    return (
+        <span className="inline-flex overflow-hidden">
+            {digits.map((digit, i) => (
+                <span key={i} className="relative h-[1.2em] overflow-hidden">
+                    <motion.span
+                        className="flex flex-col"
+                        initial={{ y: '100%' }}
+                        animate={{ y: `-${parseInt(digit) * 10}%` }}
+                        transition={{ 
+                            type: 'tween', 
+                            ease: 'easeOut',
+                            duration: 0.8,
+                            delay: i * 0.2
+                        }}
+                    >
+                        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(n => (
+                            <span key={n} className="h-[1.2em] flex items-center justify-center">
+                                {n}
+                            </span>
+                        ))}
+                    </motion.span>
+                </span>
+            ))}
+        </span>
+    );
+}
+
 function AdminDashboard() {
     const navigate = useNavigate();
     const [user, setUser] = useState(null);
+    const [stats, setStats] = useState({
+        albums: 0,
+        photos: 0,
+        schedules: 0,
+        members: 0
+    });
 
     useEffect(() => {
         // 로그인 상태 확인
@@ -35,8 +72,58 @@ function AdminDashboard() {
                 localStorage.removeItem('adminUser');
                 navigate('/admin');
             });
+
+        // 통계 데이터 가져오기
+        fetchStats();
     }, [navigate]);
 
+    const fetchStats = async () => {
+        // 각 통계를 개별적으로 가져와서 하나가 실패해도 다른 것은 표시
+        try {
+            const membersRes = await fetch('/api/members');
+            if (membersRes.ok) {
+                const members = await membersRes.json();
+                setStats(prev => ({ ...prev, members: members.filter(m => !m.is_former).length }));
+            }
+        } catch (e) { console.error('멤버 통계 오류:', e); }
+
+        try {
+            const albumsRes = await fetch('/api/albums');
+            if (albumsRes.ok) {
+                const albums = await albumsRes.json();
+                setStats(prev => ({ ...prev, albums: albums.length }));
+                
+                // 사진 수 계산
+                let totalPhotos = 0;
+                for (const album of albums) {
+                    try {
+                        const detailRes = await fetch(`/api/albums/${album.id}`);
+                        if (detailRes.ok) {
+                            const detail = await detailRes.json();
+                            if (detail.conceptPhotos) {
+                                Object.values(detail.conceptPhotos).forEach(photos => {
+                                    totalPhotos += photos.length;
+                                });
+                            }
+                            if (detail.teasers) {
+                                totalPhotos += detail.teasers.length;
+                            }
+                        }
+                    } catch (e) { /* 개별 앨범 오류 무시 */ }
+                }
+                setStats(prev => ({ ...prev, photos: totalPhotos }));
+            }
+        } catch (e) { console.error('앨범 통계 오류:', e); }
+
+        try {
+            const schedulesRes = await fetch('/api/schedules');
+            if (schedulesRes.ok) {
+                const schedules = await schedulesRes.json();
+                setStats(prev => ({ ...prev, schedules: Array.isArray(schedules) ? schedules.length : 0 }));
+            }
+        } catch (e) { console.error('일정 통계 오류:', e); }
+    };
+
     const handleLogout = () => {
         localStorage.removeItem('adminToken');
         localStorage.removeItem('adminUser');
@@ -74,7 +161,7 @@ function AdminDashboard() {
             <header className="bg-white shadow-sm border-b border-gray-100">
                 <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
                     <div className="flex items-center gap-4">
-                        <Link to="/" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
+                        <Link to="/admin/dashboard" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
                             fromis_9
                         </Link>
                         <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
@@ -139,21 +226,21 @@ function AdminDashboard() {
                     <h2 className="text-xl font-bold text-gray-900 mb-6">빠른 통계</h2>
                     <div className="grid grid-cols-4 gap-6">
                         <div className="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
-                            <p className="text-3xl font-bold text-primary mb-1">-</p>
+                            <p className="text-3xl font-bold text-primary mb-1"><AnimatedNumber value={stats.members} /></p>
+                            <p className="text-gray-500 text-sm">멤버</p>
+                        </div>
+                        <div className="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
+                            <p className="text-3xl font-bold text-primary mb-1"><AnimatedNumber value={stats.albums} /></p>
                             <p className="text-gray-500 text-sm">총 앨범</p>
                         </div>
                         <div className="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
-                            <p className="text-3xl font-bold text-primary mb-1">-</p>
+                            <p className="text-3xl font-bold text-primary mb-1"><AnimatedNumber value={stats.photos} /></p>
                             <p className="text-gray-500 text-sm">총 사진</p>
                         </div>
                         <div className="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
-                            <p className="text-3xl font-bold text-primary mb-1">-</p>
+                            <p className="text-3xl font-bold text-primary mb-1"><AnimatedNumber value={stats.schedules} /></p>
                             <p className="text-gray-500 text-sm">총 일정</p>
                         </div>
-                        <div className="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
-                            <p className="text-3xl font-bold text-primary mb-1">5</p>
-                            <p className="text-gray-500 text-sm">멤버</p>
-                        </div>
                     </div>
                 </div>
             </main>

frontend/src/pages/pc/admin/AdminLogin.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { Lock, User, AlertCircle, Eye, EyeOff } from 'lucide-react';
@@ -10,6 +10,29 @@ function AdminLogin() {
     const [error, setError] = useState('');
     const [loading, setLoading] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
+    const [checkingAuth, setCheckingAuth] = useState(true);
+
+    // 이미 로그인되어 있으면 대시보드로 리다이렉트
+    useEffect(() => {
+        const token = localStorage.getItem('adminToken');
+        if (token) {
+            // 토큰 유효성 검증
+            fetch('/api/admin/verify', {
+                headers: { 'Authorization': `Bearer ${token}` }
+            })
+            .then(res => res.json())
+            .then(data => {
+                if (data.valid) {
+                    navigate('/admin/dashboard');
+                } else {
+                    setCheckingAuth(false);
+                }
+            })
+            .catch(() => setCheckingAuth(false));
+        } else {
+            setCheckingAuth(false);
+        }
+    }, [navigate]);
 
     const handleSubmit = async (e) => {
         e.preventDefault();
@@ -42,6 +65,15 @@ function AdminLogin() {
         }
     };
 
+    // 인증 확인 중 로딩 화면
+    if (checkingAuth) {
+        return (
+            <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+                <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
+            </div>
+        );
+    }
+
     return (
         <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
             <motion.div

frontend/src/pages/pc/admin/AdminMemberEdit.jsx

@@ -0,0 +1,595 @@
+import { useState, useEffect, useRef } from 'react';
+import { useNavigate, useParams, Link } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+    Save, Upload, LogOut,
+    Home, ChevronRight, ChevronLeft, ChevronDown, User, Instagram, Calendar, Briefcase
+} from 'lucide-react';
+import Toast from '../../../components/Toast';
+
+// 커스텀 데이트픽커 컴포넌트
+function CustomDatePicker({ value, onChange }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [viewMode, setViewMode] = useState('days');
+    const [viewDate, setViewDate] = useState(() => {
+        if (value) return new Date(value);
+        return new Date();
+    });
+    const ref = useRef(null);
+
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (ref.current && !ref.current.contains(e.target)) {
+                setIsOpen(false);
+                setViewMode('days');
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    const year = viewDate.getFullYear();
+    const month = viewDate.getMonth();
+    
+    const firstDay = new Date(year, month, 1).getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    
+    const days = [];
+    for (let i = 0; i < firstDay; i++) {
+        days.push(null);
+    }
+    for (let i = 1; i <= daysInMonth; i++) {
+        days.push(i);
+    }
+
+    const startYear = Math.floor(year / 10) * 10 - 1;
+    const years = Array.from({ length: 12 }, (_, i) => startYear + i);
+
+    const prevMonth = () => setViewDate(new Date(year, month - 1, 1));
+    const nextMonth = () => setViewDate(new Date(year, month + 1, 1));
+    const prevYearRange = () => setViewDate(new Date(year - 10, month, 1));
+    const nextYearRange = () => setViewDate(new Date(year + 10, month, 1));
+
+    const selectDate = (day) => {
+        const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+        onChange(dateStr);
+        setIsOpen(false);
+        setViewMode('days');
+    };
+
+    const selectYear = (y) => {
+        setViewDate(new Date(y, month, 1));
+        setViewMode('months');
+    };
+
+    const selectMonth = (m) => {
+        setViewDate(new Date(year, m, 1));
+        setViewMode('days');
+    };
+
+    const formatDisplayDate = (dateStr) => {
+        if (!dateStr) return '';
+        const [y, m, d] = dateStr.split('-');
+        return `${y}년 ${parseInt(m)}월 ${parseInt(d)}일`;
+    };
+
+    const isSelected = (day) => {
+        if (!value || !day) return false;
+        const [y, m, d] = value.split('-');
+        return parseInt(y) === year && parseInt(m) === month + 1 && parseInt(d) === day;
+    };
+
+    const isToday = (day) => {
+        if (!day) return false;
+        const today = new Date();
+        return today.getFullYear() === year && today.getMonth() === month && today.getDate() === day;
+    };
+
+    const isCurrentYear = (y) => new Date().getFullYear() === y;
+    const isCurrentMonth = (m) => {
+        const today = new Date();
+        return today.getFullYear() === year && today.getMonth() === m;
+    };
+
+    const months = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
+
+    return (
+        <div ref={ref} className="relative">
+            <button
+                type="button"
+                onClick={() => setIsOpen(!isOpen)}
+                className="w-full px-4 py-3 border border-gray-200 rounded-xl bg-white flex items-center justify-between hover:border-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+            >
+                <span className={value ? 'text-gray-900' : 'text-gray-400'}>
+                    {value ? formatDisplayDate(value) : '날짜 선택'}
+                </span>
+                <Calendar size={18} className="text-gray-400" />
+            </button>
+
+            <AnimatePresence>
+                {isOpen && (
+                    <motion.div
+                        initial={{ opacity: 0, y: -10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: -10 }}
+                        transition={{ duration: 0.15 }}
+                        className="absolute z-50 mt-2 bg-white border border-gray-200 rounded-xl shadow-lg p-4 w-80"
+                    >
+                        <div className="flex items-center justify-between mb-4">
+                            <button
+                                type="button"
+                                onClick={viewMode === 'years' ? prevYearRange : prevMonth}
+                                className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+                            >
+                                <ChevronLeft size={20} className="text-gray-600" />
+                            </button>
+                            <button
+                                type="button"
+                                onClick={() => setViewMode(viewMode === 'days' ? 'years' : 'days')}
+                                className="font-medium text-gray-900 hover:text-primary transition-colors flex items-center gap-1"
+                            >
+                                {viewMode === 'years' ? `${years[0]} - ${years[years.length - 1]}` : `${year}년 ${month + 1}월`}
+                                <ChevronDown size={16} className={`transition-transform ${viewMode !== 'days' ? 'rotate-180' : ''}`} />
+                            </button>
+                            <button
+                                type="button"
+                                onClick={viewMode === 'years' ? nextYearRange : nextMonth}
+                                className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+                            >
+                                <ChevronRight size={20} className="text-gray-600" />
+                            </button>
+                        </div>
+
+                        <AnimatePresence mode="wait">
+                            {viewMode === 'years' && (
+                                <motion.div
+                                    key="years"
+                                    initial={{ opacity: 0 }}
+                                    animate={{ opacity: 1 }}
+                                    exit={{ opacity: 0 }}
+                                    transition={{ duration: 0.15 }}
+                                >
+                                    <div className="text-center text-sm text-gray-500 mb-3">년도</div>
+                                    <div className="grid grid-cols-4 gap-2 mb-4">
+                                        {years.map((y) => (
+                                            <button
+                                                key={y}
+                                                type="button"
+                                                onClick={() => selectYear(y)}
+                                                className={`py-2 rounded-lg text-sm transition-colors ${year === y ? 'bg-primary text-white' : 'hover:bg-gray-100 text-gray-700'} ${isCurrentYear(y) && year !== y ? 'border border-primary text-primary' : ''}`}
+                                            >
+                                                {y}
+                                            </button>
+                                        ))}
+                                    </div>
+                                    <div className="text-center text-sm text-gray-500 mb-3">월</div>
+                                    <div className="grid grid-cols-4 gap-2">
+                                        {months.map((m, i) => (
+                                            <button
+                                                key={m}
+                                                type="button"
+                                                onClick={() => selectMonth(i)}
+                                                className={`py-2 rounded-lg text-sm transition-colors ${month === i ? 'bg-primary text-white' : 'hover:bg-gray-100 text-gray-700'} ${isCurrentMonth(i) && month !== i ? 'border border-primary text-primary' : ''}`}
+                                            >
+                                                {m}
+                                            </button>
+                                        ))}
+                                    </div>
+                                </motion.div>
+                            )}
+
+                            {viewMode === 'months' && (
+                                <motion.div
+                                    key="months"
+                                    initial={{ opacity: 0 }}
+                                    animate={{ opacity: 1 }}
+                                    exit={{ opacity: 0 }}
+                                    transition={{ duration: 0.15 }}
+                                >
+                                    <div className="text-center text-sm text-gray-500 mb-3">월 선택</div>
+                                    <div className="grid grid-cols-4 gap-2">
+                                        {months.map((m, i) => (
+                                            <button
+                                                key={m}
+                                                type="button"
+                                                onClick={() => selectMonth(i)}
+                                                className={`py-2.5 rounded-lg text-sm transition-colors ${month === i ? 'bg-primary text-white' : 'hover:bg-gray-100 text-gray-700'} ${isCurrentMonth(i) && month !== i ? 'border border-primary text-primary' : ''}`}
+                                            >
+                                                {m}
+                                            </button>
+                                        ))}
+                                    </div>
+                                </motion.div>
+                            )}
+
+                            {viewMode === 'days' && (
+                                <motion.div
+                                    key="days"
+                                    initial={{ opacity: 0 }}
+                                    animate={{ opacity: 1 }}
+                                    exit={{ opacity: 0 }}
+                                    transition={{ duration: 0.15 }}
+                                >
+                                    <div className="grid grid-cols-7 gap-1 mb-2">
+                                        {['일', '월', '화', '수', '목', '금', '토'].map((d, i) => (
+                                            <div 
+                                                key={d} 
+                                                className={`text-center text-xs font-medium py-1 ${i === 0 ? 'text-red-400' : i === 6 ? 'text-blue-400' : 'text-gray-400'}`}
+                                            >
+                                                {d}
+                                            </div>
+                                        ))}
+                                    </div>
+                                    <div className="grid grid-cols-7 gap-1">
+                                        {days.map((day, i) => (
+                                            <button
+                                                key={i}
+                                                type="button"
+                                                disabled={!day}
+                                                onClick={() => day && selectDate(day)}
+                                                className={`aspect-square rounded-lg text-sm flex items-center justify-center transition-colors ${!day ? '' : 'hover:bg-gray-100'} ${isSelected(day) ? 'bg-primary text-white hover:bg-primary-dark' : ''} ${isToday(day) && !isSelected(day) ? 'border border-primary text-primary' : ''} ${day && !isSelected(day) && !isToday(day) ? 'text-gray-700' : ''}`}
+                                            >
+                                                {day}
+                                            </button>
+                                        ))}
+                                    </div>
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}
+
+
+function AdminMemberEdit() {
+    const navigate = useNavigate();
+    const { name } = useParams();
+    const [user, setUser] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [toast, setToast] = useState(null);
+    const [imagePreview, setImagePreview] = useState(null);
+    const [imageFile, setImageFile] = useState(null);
+    
+    const [formData, setFormData] = useState({
+        name: '',
+        birth_date: '',
+        position: '',
+        instagram: '',
+        is_former: false
+    });
+
+    // Toast 자동 숨김
+    useEffect(() => {
+        if (toast) {
+            const timer = setTimeout(() => setToast(null), 3000);
+            return () => clearTimeout(timer);
+        }
+    }, [toast]);
+
+    useEffect(() => {
+        // 로그인 확인
+        const token = localStorage.getItem('adminToken');
+        const userData = localStorage.getItem('adminUser');
+
+        if (!token || !userData) {
+            navigate('/admin');
+            return;
+        }
+
+        setUser(JSON.parse(userData));
+        fetchMember();
+    }, [navigate, name]);
+
+    const fetchMember = async () => {
+        try {
+            const token = localStorage.getItem('adminToken');
+            const res = await fetch(`/api/admin/members/${encodeURIComponent(name)}`, {
+                headers: { Authorization: `Bearer ${token}` }
+            });
+
+            if (!res.ok) throw new Error('멤버 조회 실패');
+
+            const data = await res.json();
+            setFormData({
+                name: data.name || '',
+                birth_date: data.birth_date ? data.birth_date.split('T')[0] : '',
+                position: data.position || '',
+                instagram: data.instagram || '',
+                is_former: !!data.is_former
+            });
+            setImagePreview(data.image_url);
+            setLoading(false);
+        } catch (error) {
+            console.error('멤버 로드 오류:', error);
+            setToast({ message: '멤버 정보를 불러올 수 없습니다.', type: 'error' });
+            setLoading(false);
+        }
+    };
+
+    const handleLogout = () => {
+        localStorage.removeItem('adminToken');
+        localStorage.removeItem('adminUser');
+        navigate('/admin');
+    };
+
+    const handleImageChange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+            setImageFile(file);
+            const reader = new FileReader();
+            reader.onloadend = () => setImagePreview(reader.result);
+            reader.readAsDataURL(file);
+        }
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setSaving(true);
+
+        try {
+            const token = localStorage.getItem('adminToken');
+            const formDataToSend = new FormData();
+            
+            formDataToSend.append('name', formData.name);
+            formDataToSend.append('birth_date', formData.birth_date);
+            formDataToSend.append('position', formData.position);
+            formDataToSend.append('instagram', formData.instagram);
+            formDataToSend.append('is_former', formData.is_former);
+            
+            if (imageFile) {
+                formDataToSend.append('image', imageFile);
+            }
+
+            const res = await fetch(`/api/admin/members/${encodeURIComponent(name)}`, {
+                method: 'PUT',
+                headers: { Authorization: `Bearer ${token}` },
+                body: formDataToSend
+            });
+
+            if (!res.ok) throw new Error('수정 실패');
+
+            setToast({ message: '멤버 정보가 수정되었습니다.', type: 'success' });
+            setTimeout(() => navigate('/admin/members'), 1000);
+        } catch (error) {
+            console.error('수정 오류:', error);
+            setToast({ message: '수정 중 오류가 발생했습니다.', type: 'error' });
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <div className="min-h-screen bg-gray-50">
+            {/* Toast */}
+            <Toast toast={toast} onClose={() => setToast(null)} />
+
+            {/* 헤더 */}
+            <header className="bg-white shadow-sm border-b border-gray-100">
+                <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                        <Link to="/admin/dashboard" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
+                            fromis_9
+                        </Link>
+                        <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
+                            Admin
+                        </span>
+                    </div>
+                    <div className="flex items-center gap-4">
+                        <span className="text-gray-500 text-sm">
+                            안녕하세요, <span className="text-gray-900 font-medium">{user?.username}</span>님
+                        </span>
+                        <button
+                            onClick={handleLogout}
+                            className="flex items-center gap-2 px-4 py-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+                        >
+                            <LogOut size={18} />
+                            <span>로그아웃</span>
+                        </button>
+                    </div>
+                </div>
+            </header>
+
+            {/* 메인 콘텐츠 */}
+            <main className="max-w-4xl mx-auto px-6 py-8">
+                {/* 브레드크럼 */}
+                <div className="flex items-center gap-2 text-sm text-gray-400 mb-8">
+                    <Link to="/admin/dashboard" className="hover:text-primary transition-colors">
+                        <Home size={16} />
+                    </Link>
+                    <ChevronRight size={14} />
+                    <Link to="/admin/members" className="hover:text-primary transition-colors">
+                        멤버 관리
+                    </Link>
+                    <ChevronRight size={14} />
+                    <span className="text-gray-700">멤버 수정</span>
+                </div>
+
+                {/* 타이틀 */}
+                <div className="mb-8">
+                    <h1 className="text-3xl font-bold text-gray-900 mb-2">멤버 수정</h1>
+                    <p className="text-gray-500">멤버 정보를 수정합니다</p>
+                </div>
+
+                {loading ? (
+                    <div className="flex justify-center items-center py-20">
+                        <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
+                    </div>
+                ) : (
+                    <motion.form
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        onSubmit={handleSubmit}
+                        className="bg-white rounded-2xl p-8 border border-gray-100 shadow-sm"
+                    >
+                        <div className="grid grid-cols-3 gap-8">
+                            {/* 이미지 업로드 영역 */}
+                            <div className="col-span-1">
+                                <label className="block text-sm font-medium text-gray-700 mb-3">
+                                    프로필 사진
+                                </label>
+                                <div 
+                                    className="aspect-[3/4] rounded-2xl border-2 border-dashed border-gray-200 overflow-hidden relative group cursor-pointer hover:border-primary transition-colors"
+                                    onClick={() => document.getElementById('imageInput').click()}
+                                >
+                                    {imagePreview ? (
+                                        <>
+                                            <img 
+                                                src={imagePreview} 
+                                                alt="프로필 미리보기" 
+                                                className="w-full h-full object-cover"
+                                            />
+                                            <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+                                                <div className="text-white text-center">
+                                                    <Upload size={32} className="mx-auto mb-2" />
+                                                    <span className="text-sm">변경</span>
+                                                </div>
+                                            </div>
+                                        </>
+                                    ) : (
+                                        <div className="w-full h-full flex flex-col items-center justify-center text-gray-400">
+                                            <User size={48} className="mb-2" />
+                                            <span className="text-sm">클릭하여 업로드</span>
+                                        </div>
+                                    )}
+                                </div>
+                                <input
+                                    id="imageInput"
+                                    type="file"
+                                    accept="image/*"
+                                    onChange={handleImageChange}
+                                    className="hidden"
+                                />
+                            </div>
+
+                            {/* 입력 폼 영역 */}
+                            <div className="col-span-2 space-y-6">
+                                {/* 이름 */}
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                                        <User size={16} className="inline mr-1" />
+                                        이름 *
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={formData.name}
+                                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                                        required
+                                        className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+                                        placeholder="멤버 이름"
+                                    />
+                                </div>
+
+                                {/* 생년월일 */}
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                                        <Calendar size={16} className="inline mr-1" />
+                                        생년월일
+                                    </label>
+                                    <CustomDatePicker
+                                        value={formData.birth_date}
+                                        onChange={(date) => setFormData({ ...formData, birth_date: date })}
+                                    />
+                                </div>
+
+                                {/* 포지션 */}
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                                        <Briefcase size={16} className="inline mr-1" />
+                                        포지션
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={formData.position}
+                                        onChange={(e) => setFormData({ ...formData, position: e.target.value })}
+                                        className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+                                        placeholder="메인보컬, 리드댄서 등"
+                                    />
+                                </div>
+
+                                {/* 인스타그램 */}
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                                        <Instagram size={16} className="inline mr-1" />
+                                        인스타그램
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={formData.instagram}
+                                        onChange={(e) => setFormData({ ...formData, instagram: e.target.value })}
+                                        className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+                                        placeholder="@username"
+                                    />
+                                </div>
+
+                                {/* 활동 상태 */}
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                                        활동 상태
+                                    </label>
+                                    <div className="flex items-center gap-3">
+                                        <button
+                                            type="button"
+                                            onClick={() => setFormData({ ...formData, is_former: false })}
+                                            className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                                                !formData.is_former 
+                                                    ? 'bg-primary text-white' 
+                                                    : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
+                                            }`}
+                                        >
+                                            활동 중
+                                        </button>
+                                        <button
+                                            type="button"
+                                            onClick={() => setFormData({ ...formData, is_former: true })}
+                                            className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                                                formData.is_former 
+                                                    ? 'bg-gray-600 text-white' 
+                                                    : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
+                                            }`}
+                                        >
+                                            탈퇴
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* 버튼 영역 */}
+                        <div className="flex justify-end gap-3 mt-8 pt-6 border-t border-gray-100">
+                            <button
+                                type="button"
+                                onClick={() => navigate('/admin/members')}
+                                className="px-6 py-3 text-gray-600 hover:bg-gray-100 rounded-xl transition-colors"
+                            >
+                                취소
+                            </button>
+                            <button
+                                type="submit"
+                                disabled={saving}
+                                className="flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-xl hover:bg-primary-dark transition-colors disabled:opacity-50"
+                            >
+                                {saving ? (
+                                    <>
+                                        <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                                        저장 중...
+                                    </>
+                                ) : (
+                                    <>
+                                        <Save size={18} />
+                                        저장
+                                    </>
+                                )}
+                            </button>
+                        </div>
+                    </motion.form>
+                )}
+            </main>
+        </div>
+    );
+}
+
+export default AdminMemberEdit;

frontend/src/pages/pc/admin/AdminMembers.jsx

@@ -0,0 +1,212 @@
+import { useState, useEffect } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { 
+    Edit2, LogOut,
+    Home, ChevronRight, Users, User
+} from 'lucide-react';
+import Toast from '../../../components/Toast';
+
+function AdminMembers() {
+    const navigate = useNavigate();
+    const [members, setMembers] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [user, setUser] = useState(null);
+    const [toast, setToast] = useState(null);
+
+    // Toast 자동 숨김
+    useEffect(() => {
+        if (toast) {
+            const timer = setTimeout(() => setToast(null), 3000);
+            return () => clearTimeout(timer);
+        }
+    }, [toast]);
+
+    useEffect(() => {
+        // 로그인 확인
+        const token = localStorage.getItem('adminToken');
+        const userData = localStorage.getItem('adminUser');
+
+        if (!token || !userData) {
+            navigate('/admin');
+            return;
+        }
+
+        setUser(JSON.parse(userData));
+        fetchMembers();
+    }, [navigate]);
+
+    const fetchMembers = () => {
+        fetch('/api/members')
+            .then(res => res.json())
+            .then(data => {
+                setMembers(data);
+                setLoading(false);
+            })
+            .catch(error => {
+                console.error('멤버 로드 오류:', error);
+                setLoading(false);
+            });
+    };
+
+    const handleLogout = () => {
+        localStorage.removeItem('adminToken');
+        localStorage.removeItem('adminUser');
+        navigate('/admin');
+    };
+
+    // 활동/탈퇴 멤버 분리 (is_former: 0=활동, 1=탈퇴)
+    const activeMembers = members.filter(m => !m.is_former);
+    const formerMembers = members.filter(m => m.is_former);
+
+    // 멤버 카드 컴포넌트
+    const MemberCard = ({ member, index, isFormer = false }) => (
+        <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ 
+                type: 'tween',
+                ease: 'easeOut',
+                duration: 0.35,
+                delay: index * 0.06
+            }}
+            className={`relative rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition-all group cursor-pointer ${isFormer ? 'opacity-60' : ''}`}
+            onClick={() => navigate(`/admin/members/${encodeURIComponent(member.name)}/edit`)}
+        >
+            {/* 프로필 이미지 */}
+            <div className={`aspect-[3/4] bg-gray-100 relative overflow-hidden ${isFormer ? 'grayscale' : ''}`}>
+                {member.image_url ? (
+                    <img 
+                        src={member.image_url} 
+                        alt={member.name}
+                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+                    />
+                ) : (
+                    <div className="w-full h-full flex items-center justify-center bg-gradient-to-b from-gray-100 to-gray-200">
+                        <User size={48} className="text-gray-300" />
+                    </div>
+                )}
+                
+                {/* 이름 오버레이 - 하단 그라데이션 */}
+                <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
+                <div className="absolute bottom-0 left-0 right-0 p-4">
+                    <h3 className="text-lg font-bold text-white drop-shadow-lg">{member.name}</h3>
+                </div>
+                
+                {/* 수정 버튼 오버레이 */}
+                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
+                    <div className="px-4 py-2 bg-white/90 backdrop-blur-sm text-gray-900 rounded-lg font-medium flex items-center gap-2 shadow-lg">
+                        <Edit2 size={16} />
+                        수정
+                    </div>
+                </div>
+            </div>
+        </motion.div>
+    );
+
+    return (
+        <div className="min-h-screen bg-gray-50">
+            {/* Toast */}
+            <Toast toast={toast} onClose={() => setToast(null)} />
+
+            {/* 헤더 */}
+            <header className="bg-white shadow-sm border-b border-gray-100">
+                <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                        <Link to="/admin/dashboard" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
+                            fromis_9
+                        </Link>
+                        <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
+                            Admin
+                        </span>
+                    </div>
+                    <div className="flex items-center gap-4">
+                        <span className="text-gray-500 text-sm">
+                            안녕하세요, <span className="text-gray-900 font-medium">{user?.username}</span>님
+                        </span>
+                        <button
+                            onClick={handleLogout}
+                            className="flex items-center gap-2 px-4 py-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+                        >
+                            <LogOut size={18} />
+                            <span>로그아웃</span>
+                        </button>
+                    </div>
+                </div>
+            </header>
+
+            {/* 메인 콘텐츠 */}
+            <main className="max-w-7xl mx-auto px-6 py-8">
+                {/* 브레드크럼 */}
+                <div className="flex items-center gap-2 text-sm text-gray-400 mb-8">
+                    <Link to="/admin/dashboard" className="hover:text-primary transition-colors">
+                        <Home size={16} />
+                    </Link>
+                    <ChevronRight size={14} />
+                    <span className="text-gray-700">멤버 관리</span>
+                </div>
+
+                {/* 타이틀 */}
+                <div className="mb-8">
+                    <h1 className="text-3xl font-bold text-gray-900 mb-2">멤버 관리</h1>
+                    <p className="text-gray-500">멤버 정보 및 프로필을 관리합니다</p>
+                </div>
+
+                {/* 멤버 목록 */}
+                {loading ? (
+                    <div className="flex justify-center items-center py-20">
+                        <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
+                    </div>
+                ) : (
+                    <div className="space-y-12">
+                        {/* 활동 멤버 */}
+                        <div>
+                            <div className="flex items-center gap-2 mb-6">
+                                <Users size={20} className="text-primary" />
+                                <h2 className="text-xl font-bold text-gray-900">현재 멤버</h2>
+                                <span className="px-2 py-0.5 bg-primary/10 text-primary text-sm font-medium rounded-full">
+                                    {activeMembers.length}
+                                </span>
+                            </div>
+                            
+                            {/* 5열 그리드 */}
+                            <div className="grid grid-cols-5 gap-5">
+                                {activeMembers.map((member, index) => (
+                                    <MemberCard key={member.id} member={member} index={index} />
+                                ))}
+                            </div>
+                        </div>
+
+                        {/* 탈퇴 멤버 */}
+                        {formerMembers.length > 0 && (
+                            <div>
+                                <div className="flex items-center gap-2 mb-6">
+                                    <User size={20} className="text-gray-400" />
+                                    <h2 className="text-xl font-bold text-gray-500">이전 멤버</h2>
+                                    <span className="px-2 py-0.5 bg-gray-100 text-gray-500 text-sm font-medium rounded-full">
+                                        {formerMembers.length}
+                                    </span>
+                                </div>
+                                
+                                {/* 5열 그리드 (탈퇴 멤버용 - 4명이면 4개만 표시) */}
+                                <div className="grid grid-cols-5 gap-5">
+                                    {formerMembers.map((member, index) => (
+                                        <MemberCard key={member.id} member={member} index={index} isFormer />
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+
+                        {members.length === 0 && (
+                            <div className="text-center py-12 text-gray-500">
+                                등록된 멤버가 없습니다.
+                            </div>
+                        )}
+                    </div>
+                )}
+            </main>
+        </div>
+    );
+}
+
+export default AdminMembers;

frontend/src/pages/pc/admin/AdminSchedule.jsx

@@ -0,0 +1,989 @@
+import { useState, useEffect, useRef } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+    LogOut, Home, ChevronRight, Calendar, Plus, Edit2, Trash2,
+    ChevronLeft, Search, ChevronDown, AlertTriangle, Bot, Tag, ArrowLeft
+} from 'lucide-react';
+import Toast from '../../../components/Toast';
+import Tooltip from '../../../components/Tooltip';
+
+function AdminSchedule() {
+    const navigate = useNavigate();
+    const [loading, setLoading] = useState(false);
+    const [user, setUser] = useState(null);
+    const [toast, setToast] = useState(null);
+    const [searchInput, setSearchInput] = useState(''); // 입력 상태
+    const [searchTerm, setSearchTerm] = useState(''); // 실제 검색어 (엔터 시 적용)
+    const [isSearchMode, setIsSearchMode] = useState(false); // 검색 모드 활성화
+    const [searchResults, setSearchResults] = useState([]); // 검색 결과 (API 응답)
+    const [searchLoading, setSearchLoading] = useState(false); // 검색 로딩
+    const [selectedCategories, setSelectedCategories] = useState([]); // 빈 배열 = 전체
+    const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]);
+    const [currentDate, setCurrentDate] = useState(new Date());
+    const [slideDirection, setSlideDirection] = useState(0);
+    
+    // 년월 선택 관련 (Schedule.jsx와 동일한 패턴)
+    const [showYearMonthPicker, setShowYearMonthPicker] = useState(false);
+    const [showCategoryTooltip, setShowCategoryTooltip] = useState(false);
+    const [viewMode, setViewMode] = useState('yearMonth'); // 'yearMonth' | 'months'
+    const pickerRef = useRef(null);
+    const categoryTooltipRef = useRef(null);
+
+    // 달력 관련
+    const year = currentDate.getFullYear();
+    const month = currentDate.getMonth();
+    const firstDay = new Date(year, month, 1).getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const days = ['일', '월', '화', '수', '목', '금', '토'];
+    const monthNames = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
+    
+    // 년도 범위 (현재 년도 기준 10년 단위 - Schedule.jsx와 동일)
+    const startYear = Math.floor(year / 10) * 10 - 1;
+    const yearRange = Array.from({ length: 12 }, (_, i) => startYear + i);
+    
+    // 현재 년도/월 확인 함수
+    const isCurrentYear = (y) => new Date().getFullYear() === y;
+    const isCurrentMonth = (m) => {
+        const today = new Date();
+        return today.getFullYear() === year && today.getMonth() === m;
+    };
+    
+    const getDaysInMonth = (y, m) => new Date(y, m + 1, 0).getDate();
+
+    // 카테고리 목록 (API에서 로드)
+    const [categories, setCategories] = useState([
+        { id: 'all', name: '전체', color: 'gray' }
+    ]);
+    
+    // 일정 목록 (API에서 로드)
+    const [schedules, setSchedules] = useState([]);
+
+    // 카테고리 색상 맵핑
+    const colorMap = {
+        blue: 'bg-blue-500',
+        green: 'bg-green-500',
+        purple: 'bg-purple-500',
+        red: 'bg-red-500',
+        pink: 'bg-pink-500',
+        yellow: 'bg-yellow-500',
+        orange: 'bg-orange-500',
+        gray: 'bg-gray-500',
+    };
+
+    // 색상 스타일 (기본 색상 또는 커스텀 HEX)
+    const getColorStyle = (color) => {
+        if (!color) return { className: 'bg-gray-500' };
+        if (color.startsWith('#')) {
+            return { style: { backgroundColor: color } };
+        }
+        return { className: colorMap[color] || 'bg-gray-500' };
+    };
+
+    // 카테고리별 색상 (배지용)
+    const getCategoryColor = (color) => {
+        const colors = {
+            blue: 'bg-blue-100 text-blue-700',
+            green: 'bg-green-100 text-green-700',
+            purple: 'bg-purple-100 text-purple-700',
+            red: 'bg-red-100 text-red-700',
+            pink: 'bg-pink-100 text-pink-700',
+            yellow: 'bg-yellow-100 text-yellow-700',
+            orange: 'bg-orange-100 text-orange-700',
+            gray: 'bg-gray-100 text-gray-700',
+        };
+        if (color?.startsWith('#')) {
+            return 'bg-gray-100 text-gray-700';
+        }
+        return colors[color] || 'bg-gray-100 text-gray-700';
+    };
+
+    // 해당 날짜에 일정이 있는지 확인
+    const hasSchedule = (day) => {
+        const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+        return schedules.some(s => {
+            const scheduleDate = new Date(s.date).toISOString().split('T')[0];
+            return scheduleDate === dateStr;
+        });
+    };
+
+    // 해당 날짜의 첫 번째 일정 카테고리 색상
+    const getScheduleColor = (day) => {
+        const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+        const schedule = schedules.find(s => {
+            const scheduleDate = new Date(s.date).toISOString().split('T')[0];
+            return scheduleDate === dateStr;
+        });
+        if (!schedule) return null;
+        const cat = categories.find(c => c.id === schedule.category_id);
+        return cat?.color || '#4A7C59';
+    };
+
+    // Toast 자동 숨김
+    useEffect(() => {
+        if (toast) {
+            const timer = setTimeout(() => setToast(null), 3000);
+            return () => clearTimeout(timer);
+        }
+    }, [toast]);
+
+    useEffect(() => {
+        const token = localStorage.getItem('adminToken');
+        const userData = localStorage.getItem('adminUser');
+
+        if (!token || !userData) {
+            navigate('/admin');
+            return;
+        }
+
+        setUser(JSON.parse(userData));
+        
+        // 카테고리 로드
+        fetchCategories();
+    }, [navigate]);
+    
+    // 월이 변경될 때마다 일정 로드
+    useEffect(() => {
+        fetchSchedules();
+    }, [year, month]);
+    
+    // 카테고리 로드 함수
+    const fetchCategories = async () => {
+        try {
+            const res = await fetch('/api/admin/schedule-categories');
+            const data = await res.json();
+            setCategories([
+                { id: 'all', name: '전체', color: 'gray' },
+                ...data
+            ]);
+        } catch (error) {
+            console.error('카테고리 로드 오류:', error);
+        }
+    };
+    
+    // 일정 로드 함수
+    const fetchSchedules = async () => {
+        setLoading(true);
+        try {
+            const res = await fetch(`/api/admin/schedules?year=${year}&month=${month + 1}`);
+            const data = await res.json();
+            setSchedules(data);
+        } catch (error) {
+            console.error('일정 로드 오류:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+    
+    // 검색 함수 (API 호출)
+    const searchSchedules = async (term) => {
+        if (!term.trim()) {
+            setSearchResults([]);
+            return;
+        }
+        setSearchLoading(true);
+        try {
+            const res = await fetch(`/api/admin/schedules?search=${encodeURIComponent(term)}`);
+            const data = await res.json();
+            setSearchResults(data);
+        } catch (error) {
+            console.error('검색 오류:', error);
+        } finally {
+            setSearchLoading(false);
+        }
+    };
+
+    // 외부 클릭 시 피커 닫기
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (pickerRef.current && !pickerRef.current.contains(event.target)) {
+                setShowYearMonthPicker(false);
+                setViewMode('yearMonth');
+            }
+            if (categoryTooltipRef.current && !categoryTooltipRef.current.contains(event.target)) {
+                setShowCategoryTooltip(false);
+            }
+        };
+        
+        if (showYearMonthPicker || showCategoryTooltip) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [showYearMonthPicker, showCategoryTooltip]);
+
+    const handleLogout = () => {
+        localStorage.removeItem('adminToken');
+        localStorage.removeItem('adminUser');
+        navigate('/admin');
+    };
+
+    // 월 이동
+    const prevMonth = () => {
+        setSlideDirection(-1);
+        setCurrentDate(new Date(year, month - 1, 1));
+        setSelectedDate(null);
+        setSchedules([]); // 이전 달 데이터 즉시 초기화
+    };
+
+    const nextMonth = () => {
+        setSlideDirection(1);
+        setCurrentDate(new Date(year, month + 1, 1));
+        setSelectedDate(null);
+        setSchedules([]); // 이전 달 데이터 즉시 초기화
+    };
+
+    // 년도 범위 이동
+    const prevYearRange = () => setCurrentDate(new Date(year - 10, month, 1));
+    const nextYearRange = () => setCurrentDate(new Date(year + 10, month, 1));
+
+    // 년도 선택 시 월 선택 모드로 전환
+    const selectYear = (newYear) => {
+        setCurrentDate(new Date(newYear, month, 1));
+        setViewMode('months');
+    };
+
+    // 월 선택 시 적용 후 닫기
+    const selectMonth = (newMonth) => {
+        setCurrentDate(new Date(year, newMonth, 1));
+        setShowYearMonthPicker(false);
+        setViewMode('yearMonth');
+    };
+
+    // 날짜 선택
+    const selectDate = (day) => {
+        const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+        setSelectedDate(selectedDate === dateStr ? null : dateStr);
+    };
+    
+    // 전체보기
+    const showAll = () => {
+        setSelectedDate(null);
+    };
+
+    // 삭제 관련 상태
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [scheduleToDelete, setScheduleToDelete] = useState(null);
+    const [deleting, setDeleting] = useState(false);
+
+    // 삭제 확인 다이얼로그 열기
+    const openDeleteDialog = (schedule) => {
+        setScheduleToDelete(schedule);
+        setDeleteDialogOpen(true);
+    };
+
+    // 일정 삭제
+    const handleDelete = async () => {
+        if (!scheduleToDelete) return;
+        
+        setDeleting(true);
+        try {
+            const token = localStorage.getItem('adminToken');
+            const response = await fetch(`/api/admin/schedules/${scheduleToDelete.id}`, {
+                method: 'DELETE',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                },
+            });
+            
+            if (response.ok) {
+                setToast({ type: 'success', message: '일정이 삭제되었습니다.' });
+                fetchSchedules(); // 일정 목록 새로고침
+            } else {
+                const data = await response.json();
+                setToast({ type: 'error', message: data.error || '삭제 실패' });
+            }
+        } catch (error) {
+            console.error('삭제 오류:', error);
+            setToast({ type: 'error', message: '삭제 중 오류가 발생했습니다.' });
+        } finally {
+            setDeleting(false);
+            setDeleteDialogOpen(false);
+            setScheduleToDelete(null);
+        }
+    };
+
+    // 검색어 정규화 (대소문자, 띄어쓰기, 특수문자 무시)
+    const normalizeForSearch = (str) => {
+        return (str || '').toLowerCase().replace(/[\s\-_.,!?#@]/g, '');
+    };
+    
+    // 일정 목록 (검색 모드일 때 searchResults, 일반 모드일 때 로컬 필터링)
+    const filteredSchedules = isSearchMode
+        ? (searchTerm ? searchResults : [])  // 검색 모드: 검색 전엔 빈 목록, 검색 후엔 API 결과
+        : schedules.filter(schedule => {  // 일반 모드: 로컬 필터링
+            const matchesCategory = selectedCategories.length === 0 || selectedCategories.includes(schedule.category_id);
+            const scheduleDate = new Date(schedule.date).toISOString().split('T')[0];
+            const matchesDate = !selectedDate || scheduleDate === selectedDate;
+            return matchesCategory && matchesDate;
+        });
+    
+    // 검색 모드일 때 카테고리별 검색 결과 카운트 계산
+    const getSearchCategoryCount = (categoryId) => {
+        if (!isSearchMode || !searchTerm) {
+            return schedules.filter(s => s.category_id === categoryId).length;
+        }
+        return searchResults.filter(s => s.category_id === categoryId).length;
+    };
+    
+    // 검색 모드일 때 전체 일정 수
+    const getTotalCount = () => {
+        if (!isSearchMode || !searchTerm) {
+            return schedules.length;
+        }
+        return searchResults.length;
+    };
+
+    return (
+        <div className="min-h-screen bg-gray-50">
+            <Toast toast={toast} onClose={() => setToast(null)} />
+
+            {/* 삭제 확인 다이얼로그 */}
+            <AnimatePresence>
+                {deleteDialogOpen && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+                        onClick={() => !deleting && setDeleteDialogOpen(false)}
+                    >
+                        <motion.div
+                            initial={{ scale: 0.9, opacity: 0 }}
+                            animate={{ scale: 1, opacity: 1 }}
+                            exit={{ scale: 0.9, opacity: 0 }}
+                            className="bg-white rounded-2xl p-6 max-w-md w-full mx-4 shadow-xl"
+                            onClick={(e) => e.stopPropagation()}
+                        >
+                            <div className="flex items-center gap-3 mb-4">
+                                <div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
+                                    <AlertTriangle className="text-red-500" size={20} />
+                                </div>
+                                <h3 className="text-lg font-bold text-gray-900">일정 삭제</h3>
+                            </div>
+                            
+                            <p className="text-gray-600 mb-2">
+                                다음 일정을 삭제하시겠습니까?
+                            </p>
+                            <p className="text-gray-900 font-medium mb-4 p-3 bg-gray-50 rounded-lg">
+                                {scheduleToDelete?.title}
+                            </p>
+                            <p className="text-sm text-red-500 mb-6">
+                                이 작업은 되돌릴 수 없습니다.
+                            </p>
+                            
+                            <div className="flex justify-end gap-3">
+                                <button
+                                    type="button"
+                                    onClick={() => setDeleteDialogOpen(false)}
+                                    disabled={deleting}
+                                    className="px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50"
+                                >
+                                    취소
+                                </button>
+                                <button
+                                    type="button"
+                                    onClick={handleDelete}
+                                    disabled={deleting}
+                                    className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors flex items-center gap-2 disabled:opacity-50"
+                                >
+                                    {deleting ? (
+                                        <>
+                                            <motion.div
+                                                animate={{ rotate: 360 }}
+                                                transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                                                className="w-4 h-4 border-2 border-white border-t-transparent rounded-full"
+                                            />
+                                            삭제 중...
+                                        </>
+                                    ) : (
+                                        <>
+                                            <Trash2 size={16} />
+                                            삭제
+                                        </>
+                                    )}
+                                </button>
+                            </div>
+                        </motion.div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            {/* 헤더 */}
+            <header className="bg-white shadow-sm border-b border-gray-100">
+                <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                        <Link to="/admin/dashboard" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
+                            fromis_9
+                        </Link>
+                        <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
+                            Admin
+                        </span>
+                    </div>
+                    <div className="flex items-center gap-4">
+                        <span className="text-gray-500 text-sm">
+                            안녕하세요, <span className="text-gray-900 font-medium">{user?.username}</span>님
+                        </span>
+                        <button
+                            onClick={handleLogout}
+                            className="flex items-center gap-2 px-4 py-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+                        >
+                            <LogOut size={18} />
+                            <span>로그아웃</span>
+                        </button>
+                    </div>
+                </div>
+            </header>
+
+            {/* 메인 콘텐츠 */}
+            <main className="max-w-7xl mx-auto px-6 py-8">
+                {/* 브레드크럼 */}
+                <div className="flex items-center gap-2 text-sm text-gray-400 mb-8">
+                    <Link to="/admin/dashboard" className="hover:text-primary transition-colors">
+                        <Home size={16} />
+                    </Link>
+                    <ChevronRight size={14} />
+                    <span className="text-gray-700">일정 관리</span>
+                </div>
+
+                {/* 타이틀 + 추가 버튼 */}
+                <div className="flex items-center justify-between mb-8">
+                    <div>
+                        <h1 className="text-3xl font-bold text-gray-900 mb-2">일정 관리</h1>
+                        <p className="text-gray-500">fromis_9의 일정을 관리합니다</p>
+                    </div>
+                    <div className="flex items-center gap-3">
+                        <button
+                            onClick={() => navigate('/admin/schedule/bots')}
+                            className="flex items-center gap-2 px-5 py-3 bg-gray-100 text-gray-700 rounded-xl hover:bg-gray-200 transition-colors font-medium"
+                        >
+                            <Bot size={20} />
+                            봇 관리
+                        </button>
+                        <button
+                            onClick={() => navigate('/admin/schedule/new')}
+                            className="flex items-center gap-2 px-5 py-3 bg-primary text-white rounded-xl hover:bg-primary-dark transition-colors font-medium shadow-sm"
+                        >
+                            <Plus size={20} />
+                            일정 추가
+                        </button>
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-3 gap-8">
+                    {/* 왼쪽: 달력 + 카테고리 필터 */}
+                    <div className="space-y-6">
+                        {/* 달력 (Schedule.jsx와 동일한 패턴) */}
+                        <motion.div 
+                            ref={pickerRef} 
+                            animate={{ opacity: isSearchMode ? 0.4 : 1 }}
+                            transition={{ duration: 0.2 }}
+                            className={`bg-white rounded-2xl shadow-sm pt-8 px-8 pb-6 relative ${isSearchMode ? 'pointer-events-none' : ''}`}
+                        >
+                            {/* 달력 헤더 */}
+                            <div className={`flex items-center justify-between mb-8 ${isSearchMode ? 'opacity-50' : ''}`}>
+                                <button
+                                    onClick={prevMonth}
+                                    disabled={isSearchMode}
+                                    className={`p-2 rounded-full transition-colors ${isSearchMode ? 'cursor-not-allowed' : 'hover:bg-gray-100'}`}
+                                >
+                                    <ChevronLeft size={24} />
+                                </button>
+                                <button
+                                    onClick={() => !isSearchMode && setShowYearMonthPicker(!showYearMonthPicker)}
+                                    disabled={isSearchMode}
+                                    className={`flex items-center gap-1 text-xl font-bold transition-colors ${isSearchMode ? 'cursor-not-allowed' : 'hover:text-primary'}`}
+                                >
+                                    <span>{year}년 {month + 1}월</span>
+                                    <ChevronDown size={20} className={`transition-transform ${showYearMonthPicker ? 'rotate-180' : ''}`} />
+                                </button>
+                                <button
+                                    onClick={nextMonth}
+                                    disabled={isSearchMode}
+                                    className={`p-2 rounded-full transition-colors ${isSearchMode ? 'cursor-not-allowed' : 'hover:bg-gray-100'}`}
+                                >
+                                    <ChevronRight size={24} />
+                                </button>
+                            </div>
+
+                            {/* 년/월 선택 팝업 (Schedule.jsx와 동일한 스타일) */}
+                            <AnimatePresence>
+                                {showYearMonthPicker && (
+                                    <motion.div
+                                        initial={{ opacity: 0, y: -10 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        exit={{ opacity: 0, y: -10 }}
+                                        className="absolute top-16 left-6 right-6 bg-white rounded-xl shadow-lg border border-gray-200 p-4 z-10"
+                                    >
+                                        {/* 헤더 - 년도 범위 이동 */}
+                                        <div className="flex items-center justify-between mb-4">
+                                            <button
+                                                onClick={prevYearRange}
+                                                className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+                                            >
+                                                <ChevronLeft size={20} className="text-gray-600" />
+                                            </button>
+                                            <span className="font-medium text-gray-900">
+                                                {viewMode === 'yearMonth' ? `${yearRange[0]} - ${yearRange[yearRange.length - 1]}` : `${year}년`}
+                                            </span>
+                                            <button
+                                                onClick={nextYearRange}
+                                                className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+                                            >
+                                                <ChevronRight size={20} className="text-gray-600" />
+                                            </button>
+                                        </div>
+
+                                        <AnimatePresence mode="wait">
+                                            {viewMode === 'yearMonth' && (
+                                                <motion.div
+                                                    key="yearMonth"
+                                                    initial={{ opacity: 0 }}
+                                                    animate={{ opacity: 1 }}
+                                                    exit={{ opacity: 0 }}
+                                                    transition={{ duration: 0.15 }}
+                                                >
+                                                    {/* 년도 선택 */}
+                                                    <div className="text-center text-sm text-gray-500 mb-3">년도</div>
+                                                    <div className="grid grid-cols-4 gap-2 mb-4">
+                                                        {yearRange.map((y) => (
+                                                            <button
+                                                                key={y}
+                                                                onClick={() => selectYear(y)}
+                                                                className={`py-2 text-sm rounded-lg transition-colors ${
+                                                                    year === y
+                                                                        ? 'bg-primary text-white'
+                                                                        : isCurrentYear(y) && year !== y
+                                                                            ? 'border border-primary text-primary hover:bg-primary/10'
+                                                                            : 'hover:bg-gray-100 text-gray-700'
+                                                                }`}
+                                                            >
+                                                                {y}
+                                                            </button>
+                                                        ))}
+                                                    </div>
+
+                                                    {/* 월 선택 */}
+                                                    <div className="text-center text-sm text-gray-500 mb-3">월</div>
+                                                    <div className="grid grid-cols-4 gap-2">
+                                                        {monthNames.map((m, i) => (
+                                                            <button
+                                                                key={m}
+                                                                onClick={() => selectMonth(i)}
+                                                                className={`py-2 text-sm rounded-lg transition-colors ${
+                                                                    month === i
+                                                                        ? 'bg-primary text-white'
+                                                                        : isCurrentMonth(i) && month !== i
+                                                                            ? 'border border-primary text-primary hover:bg-primary/10'
+                                                                            : 'hover:bg-gray-100 text-gray-700'
+                                                                }`}
+                                                            >
+                                                                {m}
+                                                            </button>
+                                                        ))}
+                                                    </div>
+                                                </motion.div>
+                                            )}
+
+                                            {viewMode === 'months' && (
+                                                <motion.div
+                                                    key="months"
+                                                    initial={{ opacity: 0 }}
+                                                    animate={{ opacity: 1 }}
+                                                    exit={{ opacity: 0 }}
+                                                    transition={{ duration: 0.15 }}
+                                                >
+                                                    {/* 월 선택 */}
+                                                    <div className="text-center text-sm text-gray-500 mb-3">월 선택</div>
+                                                    <div className="grid grid-cols-4 gap-2">
+                                                        {monthNames.map((m, i) => (
+                                                            <button
+                                                                key={m}
+                                                                onClick={() => selectMonth(i)}
+                                                                className={`py-2.5 text-sm rounded-lg transition-colors ${
+                                                                    month === i
+                                                                        ? 'bg-primary text-white'
+                                                                        : isCurrentMonth(i) && month !== i
+                                                                            ? 'border border-primary text-primary hover:bg-primary/10'
+                                                                            : 'hover:bg-gray-100 text-gray-700'
+                                                                }`}
+                                                            >
+                                                                {m}
+                                                            </button>
+                                                        ))}
+                                                    </div>
+                                                </motion.div>
+                                            )}
+                                        </AnimatePresence>
+                                    </motion.div>
+                                )}
+                            </AnimatePresence>
+
+                            {/* 요일 헤더 + 날짜 그리드 */}
+                            <AnimatePresence mode="wait" initial={false}>
+                                <motion.div
+                                    key={`${year}-${month}`}
+                                    initial={{ opacity: 0, x: slideDirection * 20 }}
+                                    animate={{ opacity: 1, x: 0 }}
+                                    exit={{ opacity: 0, x: slideDirection * -20 }}
+                                    transition={{ duration: 0.08 }}
+                                >
+                                    {/* 요일 헤더 */}
+                                    <div className="grid grid-cols-7 mb-4">
+                                        {days.map((day, i) => (
+                                            <div
+                                                key={day}
+                                                className={`text-center text-sm font-medium py-2 ${
+                                                    i === 0 ? 'text-red-500' : i === 6 ? 'text-blue-500' : 'text-gray-500'
+                                                }`}
+                                            >
+                                                {day}
+                                            </div>
+                                        ))}
+                                    </div>
+
+                                    {/* 날짜 그리드 */}
+                                    <div className="grid grid-cols-7 gap-1">
+                                        {/* 전달 날짜 */}
+                                        {Array.from({ length: firstDay }).map((_, i) => {
+                                            const prevMonthDays = getDaysInMonth(year, month - 1);
+                                            const day = prevMonthDays - firstDay + i + 1;
+                                            return (
+                                                <div key={`prev-${i}`} className="aspect-square flex items-center justify-center text-gray-300 text-base">
+                                                    {day}
+                                                </div>
+                                            );
+                                        })}
+
+                                        {/* 현재 달 날짜 */}
+                                        {Array.from({ length: daysInMonth }).map((_, i) => {
+                                            const day = i + 1;
+                                            const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+                                            const isSelected = selectedDate === dateStr;
+                                            const hasEvent = hasSchedule(day);
+                                            const eventColor = getScheduleColor(day);
+                                            const dayOfWeek = (firstDay + i) % 7;
+                                            const isToday = new Date().toDateString() === new Date(year, month, day).toDateString();
+
+                                            return (
+                                                <button
+                                                    key={day}
+                                                    onClick={() => !isSearchMode && selectDate(day)}
+                                                    disabled={isSearchMode}
+                                                    className={`aspect-square flex flex-col items-center justify-center rounded-full text-base font-medium transition-all relative 
+                                                        ${isSearchMode ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-100'}
+                                                        ${isSelected && !isSearchMode ? 'bg-primary text-white shadow-lg hover:bg-primary' : ''}
+                                                        ${isToday && !isSelected ? 'bg-primary/10 text-primary font-bold hover:bg-primary/20' : ''}
+                                                        ${dayOfWeek === 0 && !isSelected && !isToday ? 'text-red-500' : ''}
+                                                        ${dayOfWeek === 6 && !isSelected && !isToday ? 'text-blue-500' : ''}
+                                                    `}
+                                                >
+                                                    <span>{day}</span>
+                                                    {/* 점: absolute로 위치 고정하여 글씨 위치에 영향 없음 */}
+                                                    <span 
+                                                        className={`absolute bottom-1 w-1.5 h-1.5 rounded-full ${hasEvent ? '' : 'opacity-0'}`}
+                                                        style={{ backgroundColor: isSelected ? 'white' : (eventColor || 'transparent') }}
+                                                    />
+                                                </button>
+                                            );
+                                        })}
+
+                                        {/* 다음달 날짜 */}
+                                        {(() => {
+                                            const totalCells = firstDay + daysInMonth;
+                                            const remainder = totalCells % 7;
+                                            const nextDays = remainder === 0 ? 0 : 7 - remainder;
+                                            return Array.from({ length: nextDays }).map((_, i) => (
+                                                <div key={`next-${i}`} className="aspect-square flex items-center justify-center text-gray-300 text-base">
+                                                    {i + 1}
+                                                </div>
+                                            ));
+                                        })()}
+                                    </div>
+                                </motion.div>
+                            </AnimatePresence>
+                            {/* 범례 및 전체보기 */}
+                            <div className="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between text-sm">
+                                <div className="flex items-center gap-1.5 text-gray-500">
+                                    <span className="w-2 h-2 rounded-full bg-primary flex-shrink-0" />
+                                    <span className="leading-none">일정 있음</span>
+                                </div>
+                                <button
+                                    onClick={showAll}
+                                    className={`px-4 py-2 rounded-lg transition-colors ${
+                                        isSearchMode
+                                            ? 'bg-gray-100 text-gray-400 cursor-not-allowed opacity-50'
+                                            : selectedDate 
+                                                ? 'bg-primary text-white hover:bg-primary-dark' 
+                                                : 'bg-gray-100 text-gray-400 cursor-default'
+                                    }`}
+                                    disabled={!selectedDate || isSearchMode}
+                                >
+                                    전체 보기
+                                </button>
+                            </div>
+                        </motion.div>
+
+                        {/* 카테고리 필터 */}
+                        <motion.div 
+                            animate={{ opacity: isSearchMode && !searchTerm ? 0.4 : 1 }}
+                            transition={{ duration: 0.2 }}
+                            className={`bg-white rounded-2xl shadow-sm p-6 ${isSearchMode && !searchTerm ? 'pointer-events-none' : ''}`}
+                        >
+                            <h3 className="font-bold text-gray-900 mb-4">카테고리</h3>
+                            <div className="space-y-2">
+                                {categories.map(category => {
+                                    const isSelected = category.id === 'all' 
+                                        ? selectedCategories.length === 0 
+                                        : selectedCategories.includes(category.id);
+                                    
+                                    const handleClick = () => {
+                                        if (category.id === 'all') {
+                                            // 전체 클릭 시 모든 선택 해제
+                                            setSelectedCategories([]);
+                                        } else {
+                                            // 개별 카테고리 클릭 시 토글
+                                            if (selectedCategories.includes(category.id)) {
+                                                setSelectedCategories(selectedCategories.filter(id => id !== category.id));
+                                            } else {
+                                                setSelectedCategories([...selectedCategories, category.id]);
+                                            }
+                                        }
+                                    };
+                                    
+                                    return (
+                                        <button
+                                            key={category.id}
+                                            onClick={handleClick}
+                                            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left transition-colors ${
+                                                isSelected
+                                                    ? 'bg-primary/10 text-primary'
+                                                    : 'hover:bg-gray-50 text-gray-700'
+                                            }`}
+                                        >
+                                            <span 
+                                                className={`w-3 h-3 rounded-full ${category.id === 'all' ? 'bg-gray-400' : (getColorStyle(category.color).className || '')}`}
+                                                style={category.id !== 'all' ? getColorStyle(category.color).style : undefined}
+                                            />
+                                            <span className="font-medium">{category.name}</span>
+                                            <span className="ml-auto text-sm text-gray-400">
+                                                {category.id === 'all' 
+                                                    ? getTotalCount() 
+                                                    : getSearchCategoryCount(category.id)
+                                                }
+                                            </span>
+                                        </button>
+                                    );
+                                })}
+                            </div>
+                        </motion.div>
+                    </div>
+
+                    {/* 오른쪽: 일정 목록 */}
+                    <div className="col-span-2">
+                        {/* 일정 목록 */}
+                        <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
+                            <div className="p-5 border-b border-gray-100">
+                                <div className="flex items-center gap-3">
+                                    <AnimatePresence mode="wait">
+                                        {isSearchMode ? (
+                                            /* 검색 모드 */
+                                            <motion.div 
+                                                key="search-mode"
+                                                initial={{ opacity: 0, x: -10 }}
+                                                animate={{ opacity: 1, x: 0 }}
+                                                exit={{ opacity: 0, x: -10 }}
+                                                transition={{ duration: 0.15 }}
+                                                className="flex items-center gap-3 flex-1"
+                                            >
+                                                <button
+                                                    onClick={() => {
+                                                        setIsSearchMode(false);
+                                                        setSearchInput('');
+                                                        setSearchTerm('');
+                                                    }}
+                                                    className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+                                                >
+                                                    <ArrowLeft size={20} className="text-gray-500" />
+                                                </button>
+                                                <input
+                                                    type="text"
+                                                    placeholder="일정 검색..."
+                                                    value={searchInput}
+                                                    autoFocus
+                                                    onChange={(e) => setSearchInput(e.target.value)}
+                                                    onKeyDown={(e) => {
+                                                        if (e.key === 'Enter') {
+                                                            setSearchTerm(searchInput);
+                                                            searchSchedules(searchInput);
+                                                        } else if (e.key === 'Escape') {
+                                                            setIsSearchMode(false);
+                                                            setSearchInput('');
+                                                            setSearchTerm('');
+                                                            setSearchResults([]);
+                                                        }
+                                                    }}
+                                                    className="flex-1 bg-transparent focus:outline-none text-gray-700 placeholder-gray-400"
+                                                />
+                                                <button
+                                                    onClick={() => {
+                                                        setSearchTerm(searchInput);
+                                                        searchSchedules(searchInput);
+                                                    }}
+                                                    disabled={searchLoading}
+                                                    className="px-4 py-1.5 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"
+                                                >
+                                                    {searchLoading ? '...' : '검색'}
+                                                </button>
+                                            </motion.div>
+                                        ) : (
+                                            /* 일반 모드 */
+                                            <motion.div 
+                                                key="normal-mode"
+                                                initial={{ opacity: 0, x: 10 }}
+                                                animate={{ opacity: 1, x: 0 }}
+                                                exit={{ opacity: 0, x: 10 }}
+                                                transition={{ duration: 0.15 }}
+                                                className="flex items-center gap-3 flex-1"
+                                            >
+                                                <button
+                                                    onClick={() => setIsSearchMode(true)}
+                                                    className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
+                                                >
+                                                    <Search size={20} className="text-gray-500" />
+                                                </button>
+                                                <span className="font-medium text-gray-900">
+                                                    {selectedDate 
+                                                        ? (() => {
+                                                            const d = new Date(selectedDate);
+                                                            const dayNames = ['일', '월', '화', '수', '목', '금', '토'];
+                                                            return `${d.getMonth() + 1}월 ${d.getDate()}일 ${dayNames[d.getDay()]}요일`;
+                                                        })()
+                                                        : `${month + 1}월 전체 일정`
+                                                    }
+                                                </span>
+                                                <div className="flex-1" />
+                                                {/* 카테고리 필터 */}
+                                                {selectedCategories.length > 0 && (
+                                                    <div className="relative" ref={categoryTooltipRef}>
+                                                        <button
+                                                            onClick={() => setShowCategoryTooltip(!showCategoryTooltip)}
+                                                            className="flex items-center gap-1 px-2 py-1 bg-gray-100 rounded-md text-sm text-gray-600 hover:bg-gray-200 transition-colors"
+                                                        >
+                                                            <Tag size={14} />
+                                                            <span>{selectedCategories.length}개</span>
+                                                        </button>
+                                                        <AnimatePresence>
+                                                            {showCategoryTooltip && (
+                                                                <motion.div 
+                                                                    initial={{ opacity: 0, y: -5 }}
+                                                                    animate={{ opacity: 1, y: 0 }}
+                                                                    exit={{ opacity: 0, y: -5 }}
+                                                                    transition={{ duration: 0.15 }}
+                                                                    className="absolute top-full right-0 mt-1 bg-white rounded-lg shadow-lg border border-gray-200 p-3 z-10 min-w-[120px]"
+                                                                >
+                                                                    {selectedCategories.map(id => {
+                                                                        const cat = categories.find(c => c.id === id);
+                                                                        if (!cat) return null;
+                                                                        return (
+                                                                            <div key={id} className="flex items-center gap-2 py-1">
+                                                                                <span 
+                                                                                    className="w-2 h-2 rounded-full" 
+                                                                                    style={{ backgroundColor: cat.color?.startsWith('#') ? cat.color : undefined }}
+                                                                                />
+                                                                                <span className="text-sm">{cat.name}</span>
+                                                                            </div>
+                                                                        );
+                                                                    })}
+                                                                </motion.div>
+                                                            )}
+                                                        </AnimatePresence>
+                                                    </div>
+                                                )}
+                                                <span className="text-sm text-gray-400">{filteredSchedules.length}개</span>
+                                            </motion.div>
+                                        )}
+                                    </AnimatePresence>
+                                </div>
+                            </div>
+
+                            {loading ? (
+                                <div className="flex justify-center items-center py-20">
+                                    <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
+                                </div>
+                            ) : filteredSchedules.length === 0 ? (
+                                <div className="text-center py-16 text-gray-500">
+                                    <Calendar size={48} className="mx-auto mb-4 text-gray-300" />
+                                    <p>등록된 일정이 없습니다</p>
+                                </div>
+                            ) : (
+                                <div className="divide-y divide-gray-100">
+                                    {filteredSchedules.map((schedule, index) => (
+                                        <motion.div
+                                            key={schedule.id}
+                                            initial={{ opacity: 0, y: 10 }}
+                                            animate={{ opacity: 1, y: 0 }}
+                                            transition={{ delay: Math.min(index, 10) * 0.03 }}
+                                            className="p-6 hover:bg-gray-50 transition-colors group"
+                                        >
+                                            <div className="flex items-start gap-4">
+                                                {/* 날짜 */}
+                                                <div className="w-20 text-center flex-shrink-0">
+                                                    {/* 검색 모드일 때 년/월 표시 */}
+                                                    {isSearchMode && searchTerm && (
+                                                        <div className="text-xs text-gray-400 mb-0.5">
+                                                            {new Date(schedule.date).getFullYear()}.{new Date(schedule.date).getMonth() + 1}
+                                                        </div>
+                                                    )}
+                                                    <div className="text-2xl font-bold text-gray-900">
+                                                        {new Date(schedule.date).getDate()}
+                                                    </div>
+                                                    <div className="text-sm text-gray-500">
+                                                        {new Date(schedule.date).toLocaleDateString('ko-KR', { weekday: 'short' })}
+                                                    </div>
+                                                </div>
+
+                                                {/* 내용 */}
+                                                <div className="flex-1 min-w-0">
+                                                    <div className="flex items-center gap-2 mb-1">
+                                                        <span 
+                                                            className="px-2 py-0.5 text-xs font-medium rounded-full text-white"
+                                                            style={{ backgroundColor: schedule.category_color || '#808080' }}
+                                                        >
+                                                            {schedule.category_name || '미지정'}
+                                                        </span>
+                                                        <span className="text-sm text-gray-400">{schedule.time?.slice(0, 5)}</span>
+                                                    </div>
+                                                    <h4 className="font-medium text-gray-900 mb-1">{schedule.title}</h4>
+                                                    <p className="text-sm text-gray-500">{schedule.description}</p>
+                                                </div>
+
+                                                {/* 액션 버튼 */}
+                                                <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                                                    <button 
+                                                        onClick={() => navigate(`/admin/schedule/${schedule.id}/edit`)}
+                                                        className="p-2 hover:bg-gray-200 rounded-lg transition-colors text-gray-500"
+                                                    >
+                                                        <Edit2 size={18} />
+                                                    </button>
+                                                    <button 
+                                                        onClick={() => openDeleteDialog(schedule)}
+                                                        className="p-2 hover:bg-red-100 rounded-lg transition-colors text-red-500"
+                                                    >
+                                                        <Trash2 size={18} />
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </motion.div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+}
+
+export default AdminSchedule;

frontend/src/pages/pc/admin/AdminScheduleBots.jsx

@@ -0,0 +1,376 @@
+import { useState, useEffect } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+    LogOut, Home, ChevronRight, Bot, Play, Square,
+    Youtube, Calendar, Clock, CheckCircle, XCircle, RefreshCw, Download
+} from 'lucide-react';
+import Toast from '../../../components/Toast';
+
+function AdminScheduleBots() {
+    const navigate = useNavigate();
+    const [user, setUser] = useState(null);
+    const [toast, setToast] = useState(null);
+    const [bots, setBots] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [syncing, setSyncing] = useState(null); // 동기화 중인 봇 ID
+
+    // Toast 자동 숨김
+    useEffect(() => {
+        if (toast) {
+            const timer = setTimeout(() => setToast(null), 3000);
+            return () => clearTimeout(timer);
+        }
+    }, [toast]);
+
+    useEffect(() => {
+        const token = localStorage.getItem('adminToken');
+        const userData = localStorage.getItem('adminUser');
+
+        if (!token || !userData) {
+            navigate('/admin');
+            return;
+        }
+
+        setUser(JSON.parse(userData));
+        fetchBots();
+    }, [navigate]);
+
+    // 봇 목록 조회
+    const fetchBots = async () => {
+        try {
+            const token = localStorage.getItem('adminToken');
+            const response = await fetch('/api/admin/bots', {
+                headers: { Authorization: `Bearer ${token}` }
+            });
+            
+            if (response.ok) {
+                const data = await response.json();
+                setBots(data);
+            }
+        } catch (error) {
+            console.error('봇 목록 조회 오류:', error);
+            setToast({ type: 'error', message: '봇 목록을 불러올 수 없습니다.' });
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleLogout = () => {
+        localStorage.removeItem('adminToken');
+        localStorage.removeItem('adminUser');
+        navigate('/admin');
+    };
+
+    // 봇 시작/정지 토글
+    const toggleBot = async (botId, currentStatus) => {
+        try {
+            const token = localStorage.getItem('adminToken');
+            const action = currentStatus === 'running' ? 'stop' : 'start';
+            
+            const response = await fetch(`/api/admin/bots/${botId}/${action}`, {
+                method: 'POST',
+                headers: { Authorization: `Bearer ${token}` }
+            });
+            
+            if (response.ok) {
+                setToast({ 
+                    type: 'success', 
+                    message: action === 'start' ? '봇이 시작되었습니다.' : '봇이 정지되었습니다.'
+                });
+                fetchBots(); // 목록 새로고침
+            } else {
+                const data = await response.json();
+                setToast({ type: 'error', message: data.error || '작업 실패' });
+            }
+        } catch (error) {
+            console.error('봇 토글 오류:', error);
+            setToast({ type: 'error', message: '작업 중 오류가 발생했습니다.' });
+        }
+    };
+
+    // 전체 동기화
+    const syncAllVideos = async (botId) => {
+        setSyncing(botId);
+        try {
+            const token = localStorage.getItem('adminToken');
+            const response = await fetch(`/api/admin/bots/${botId}/sync-all`, {
+                method: 'POST',
+                headers: { Authorization: `Bearer ${token}` }
+            });
+            
+            if (response.ok) {
+                const data = await response.json();
+                setToast({ 
+                    type: 'success', 
+                    message: `${data.addedCount}개 일정이 추가되었습니다. (전체 ${data.total}개)`
+                });
+                fetchBots();
+            } else {
+                const data = await response.json();
+                setToast({ type: 'error', message: data.error || '동기화 실패' });
+            }
+        } catch (error) {
+            console.error('전체 동기화 오류:', error);
+            setToast({ type: 'error', message: '동기화 중 오류가 발생했습니다.' });
+        } finally {
+            setSyncing(null);
+        }
+    };
+
+
+    // 상태 아이콘 및 색상
+    const getStatusInfo = (status) => {
+        switch (status) {
+            case 'running':
+                return { 
+                    icon: <CheckCircle size={16} />, 
+                    text: '실행 중', 
+                    color: 'text-green-500',
+                    bg: 'bg-green-50',
+                    dot: 'bg-green-500',
+                };
+            case 'stopped':
+                return { 
+                    icon: <XCircle size={16} />, 
+                    text: '정지됨', 
+                    color: 'text-gray-400',
+                    bg: 'bg-gray-50',
+                    dot: 'bg-gray-400',
+                };
+            case 'error':
+                return { 
+                    icon: <XCircle size={16} />, 
+                    text: '오류', 
+                    color: 'text-red-500',
+                    bg: 'bg-red-50',
+                    dot: 'bg-red-500',
+                };
+            default:
+                return { 
+                    icon: null, 
+                    text: '알 수 없음', 
+                    color: 'text-gray-400',
+                    bg: 'bg-gray-50',
+                    dot: 'bg-gray-400',
+                };
+        }
+    };
+
+    // 시간 포맷 (DB에 KST로 저장되어 있으므로 그대로 표시)
+    const formatTime = (dateString) => {
+        if (!dateString) return '-';
+        // DB의 KST 시간을 UTC로 재해석하지 않도록 Z 접미사 제거
+        const cleanDateString = dateString.replace('Z', '').replace('T', ' ');
+        const date = new Date(cleanDateString);
+        return date.toLocaleString('ko-KR', { 
+            month: 'short', 
+            day: 'numeric', 
+            hour: '2-digit', 
+            minute: '2-digit' 
+        });
+    };
+
+    return (
+        <div className="min-h-screen bg-gray-50">
+            <Toast toast={toast} onClose={() => setToast(null)} />
+
+            {/* 헤더 */}
+            <header className="bg-white shadow-sm border-b border-gray-100">
+                <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                        <Link to="/admin/dashboard" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
+                            fromis_9
+                        </Link>
+                        <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
+                            Admin
+                        </span>
+                    </div>
+                    <div className="flex items-center gap-4">
+                        <span className="text-gray-500 text-sm">
+                            안녕하세요, <span className="text-gray-900 font-medium">{user?.username}</span>님
+                        </span>
+                        <button
+                            onClick={handleLogout}
+                            className="flex items-center gap-2 px-4 py-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+                        >
+                            <LogOut size={18} />
+                            <span>로그아웃</span>
+                        </button>
+                    </div>
+                </div>
+            </header>
+
+            {/* 메인 콘텐츠 */}
+            <main className="max-w-7xl mx-auto px-6 py-8">
+                {/* 브레드크럼 */}
+                <div className="flex items-center gap-2 text-sm text-gray-400 mb-8">
+                    <Link to="/admin/dashboard" className="hover:text-primary transition-colors">
+                        <Home size={16} />
+                    </Link>
+                    <ChevronRight size={14} />
+                    <Link to="/admin/schedule" className="hover:text-primary transition-colors">
+                        일정 관리
+                    </Link>
+                    <ChevronRight size={14} />
+                    <span className="text-gray-700">봇 관리</span>
+                </div>
+
+                {/* 타이틀 */}
+                <div className="mb-8">
+                    <h1 className="text-3xl font-bold text-gray-900 mb-2">봇 관리</h1>
+                    <p className="text-gray-500">일정 자동화 봇을 관리합니다</p>
+                </div>
+
+                {/* 봇 통계 */}
+                <div className="grid grid-cols-4 gap-4 mb-8">
+                    <div className="bg-white rounded-xl p-5 border border-gray-100">
+                        <div className="text-sm text-gray-500 mb-1">전체 봇</div>
+                        <div className="text-2xl font-bold text-gray-900">{bots.length}</div>
+                    </div>
+                    <div className="bg-white rounded-xl p-5 border border-gray-100">
+                        <div className="text-sm text-gray-500 mb-1">실행 중</div>
+                        <div className="text-2xl font-bold text-green-500">
+                            {bots.filter(b => b.status === 'running').length}
+                        </div>
+                    </div>
+                    <div className="bg-white rounded-xl p-5 border border-gray-100">
+                        <div className="text-sm text-gray-500 mb-1">정지됨</div>
+                        <div className="text-2xl font-bold text-gray-400">
+                            {bots.filter(b => b.status === 'stopped').length}
+                        </div>
+                    </div>
+                    <div className="bg-white rounded-xl p-5 border border-gray-100">
+                        <div className="text-sm text-gray-500 mb-1">오류</div>
+                        <div className="text-2xl font-bold text-red-500">
+                            {bots.filter(b => b.status === 'error').length}
+                        </div>
+                    </div>
+                </div>
+
+                {/* 봇 목록 */}
+                <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+                    <div className="px-6 py-4 border-b border-gray-100">
+                        <h2 className="font-bold text-gray-900">봇 목록</h2>
+                    </div>
+                    
+                    {loading ? (
+                        <div className="flex justify-center items-center py-20">
+                            <div className="animate-spin rounded-full h-10 w-10 border-4 border-primary border-t-transparent"></div>
+                        </div>
+                    ) : bots.length === 0 ? (
+                        <div className="text-center py-20 text-gray-400">
+                            <Bot size={48} className="mx-auto mb-4 opacity-30" />
+                            <p>등록된 봇이 없습니다</p>
+                            <p className="text-sm mt-1">위의 버튼을 클릭하여 봇을 추가하세요</p>
+                        </div>
+                    ) : (
+                        <div className="divide-y divide-gray-100">
+                            {bots.map((bot, index) => {
+                                const statusInfo = getStatusInfo(bot.status);
+                                
+                                return (
+                                    <motion.div
+                                        key={bot.id}
+                                        initial={{ opacity: 0, y: 10 }}
+                                        animate={{ opacity: 1, y: 0 }}
+                                        transition={{ delay: index * 0.05 }}
+                                        className="p-6 hover:bg-gray-50 transition-colors"
+                                    >
+                                        <div className="flex items-start gap-4">
+                                            {/* 아이콘 */}
+                                            <div className={`w-12 h-12 rounded-xl ${statusInfo.bg} flex items-center justify-center flex-shrink-0`}>
+                                                <Youtube size={24} className="text-red-500" />
+                                            </div>
+                                            
+                                            {/* 정보 */}
+                                            <div className="flex-1 min-w-0">
+                                                <div className="flex items-center gap-3 mb-1">
+                                                    <h3 className="font-bold text-gray-900">{bot.name}</h3>
+                                                    <span className={`flex items-center gap-1 text-xs font-medium ${statusInfo.color}`}>
+                                                        <span className={`w-1.5 h-1.5 rounded-full ${statusInfo.dot} ${bot.status === 'running' ? 'animate-pulse' : ''}`}></span>
+                                                        {statusInfo.text}
+                                                    </span>
+                                                    <span className="px-2 py-0.5 text-xs font-medium bg-red-50 text-red-600 rounded-full">
+                                                        YouTube
+                                                    </span>
+                                                </div>
+                                                <p className="text-sm text-gray-500 mb-3">
+                                                    채널: {bot.channel_name || bot.channel_id} | 
+                                                    {bot.include_shorts ? ' Shorts 포함' : ' Shorts 제외'} | 
+                                                    {bot.check_interval}분 간격
+                                                </p>
+                                                
+                                                {/* 메타 정보 */}
+                                                <div className="flex items-center gap-6 text-xs text-gray-400">
+                                                    <span className="flex items-center gap-1">
+                                                        <Clock size={12} />
+                                                        마지막 체크: {formatTime(bot.last_check_at)}
+                                                    </span>
+                                                    <span className="flex items-center gap-1">
+                                                        <Calendar size={12} />
+                                                        추가된 일정: {bot.schedules_added}개
+                                                    </span>
+                                                </div>
+                                                
+                                                {/* 오류 메시지 */}
+                                                {bot.status === 'error' && bot.error_message && (
+                                                    <div className="mt-3 px-3 py-2 bg-red-50 text-red-600 text-xs rounded-lg">
+                                                        ⚠️ {bot.error_message}
+                                                    </div>
+                                                )}
+                                            </div>
+                                            
+                                            {/* 액션 버튼 */}
+                                            <div className="flex items-center gap-2 flex-shrink-0">
+                                                <button
+                                                    onClick={() => syncAllVideos(bot.id)}
+                                                    disabled={syncing === bot.id}
+                                                    className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg font-medium transition-colors hover:bg-blue-600 disabled:opacity-50"
+                                                >
+                                                    {syncing === bot.id ? (
+                                                        <>
+                                                            <RefreshCw size={16} className="animate-spin" />
+                                                            동기화 중...
+                                                        </>
+                                                    ) : (
+                                                        <>
+                                                            <Download size={16} />
+                                                            전체 동기화
+                                                        </>
+                                                    )}
+                                                </button>
+                                                <button
+                                                    onClick={() => toggleBot(bot.id, bot.status)}
+                                                    className={`flex items-center gap-2 px-4 py-2 rounded-lg font-medium transition-colors ${
+                                                        bot.status === 'running'
+                                                            ? 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                                                            : 'bg-green-500 text-white hover:bg-green-600'
+                                                    }`}
+                                                >
+                                                    {bot.status === 'running' ? (
+                                                        <>
+                                                            <Square size={16} />
+                                                            정지
+                                                        </>
+                                                    ) : (
+                                                        <>
+                                                            <Play size={16} />
+                                                            시작
+                                                        </>
+                                                    )}
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </motion.div>
+                                );
+                            })}
+                        </div>
+                    )}
+                </div>
+            </main>
+        </div>
+    );
+}
+
+export default AdminScheduleBots;

frontend/src/pages/pc/admin/AdminScheduleCategory.jsx

@@ -0,0 +1,572 @@
+import { useState, useEffect } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { motion, AnimatePresence, Reorder } from 'framer-motion';
+import { LogOut, Home, ChevronRight, Plus, Edit3, Trash2, GripVertical, X, AlertTriangle } from 'lucide-react';
+import { HexColorPicker } from 'react-colorful';
+import Toast from '../../../components/Toast';
+
+// 기본 색상 (8개)
+const colorOptions = [
+    { id: 'blue', name: '파란색', bg: 'bg-blue-500', hex: '#3b82f6' },
+    { id: 'green', name: '초록색', bg: 'bg-green-500', hex: '#22c55e' },
+    { id: 'purple', name: '보라색', bg: 'bg-purple-500', hex: '#a855f7' },
+    { id: 'red', name: '빨간색', bg: 'bg-red-500', hex: '#ef4444' },
+    { id: 'pink', name: '분홍색', bg: 'bg-pink-500', hex: '#ec4899' },
+    { id: 'yellow', name: '노란색', bg: 'bg-yellow-500', hex: '#eab308' },
+    { id: 'orange', name: '주황색', bg: 'bg-orange-500', hex: '#f97316' },
+    { id: 'gray', name: '회색', bg: 'bg-gray-500', hex: '#6b7280' },
+];
+
+// 색상 헬퍼 (커스텀 HEX 지원)
+const getColorStyle = (colorValue) => {
+    // 기본 색상인지 확인
+    const preset = colorOptions.find(c => c.id === colorValue);
+    if (preset) {
+        return { className: preset.bg };
+    }
+    // HEX 색상인 경우
+    if (colorValue?.startsWith('#')) {
+        return { style: { backgroundColor: colorValue } };
+    }
+    return { className: 'bg-gray-500' };
+};
+
+function AdminScheduleCategory() {
+    const navigate = useNavigate();
+    const [user, setUser] = useState(null);
+    const [categories, setCategories] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [toast, setToast] = useState(null);
+    
+    // 토스트 표시 (3초 후 자동 닫힘)
+    const showToast = (type, message) => {
+        setToast({ type, message });
+        setTimeout(() => setToast(null), 3000);
+    };
+    
+    // 모달 상태
+    const [modalOpen, setModalOpen] = useState(false);
+    const [editingCategory, setEditingCategory] = useState(null);
+    const [formData, setFormData] = useState({ name: '', color: 'blue' });
+    
+    // 삭제 다이얼로그
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [deleteTarget, setDeleteTarget] = useState(null);
+    
+    // 카스텀 컴러 피커 팝업
+    const [colorPickerOpen, setColorPickerOpen] = useState(false);
+
+    // 사용자 인증 확인
+    useEffect(() => {
+        const token = localStorage.getItem('adminToken');
+        if (!token) {
+            navigate('/admin');
+            return;
+        }
+        
+        fetch('/api/admin/verify', {
+            headers: { 'Authorization': `Bearer ${token}` }
+        })
+        .then(res => res.json())
+        .then(data => {
+            if (data.valid) {
+                setUser(data.user);
+                fetchCategories();
+            } else {
+                navigate('/admin');
+            }
+        })
+        .catch(() => navigate('/admin'));
+    }, [navigate]);
+
+    // 카테고리 목록 조회
+    const fetchCategories = async () => {
+        try {
+            const res = await fetch('/api/admin/schedule-categories');
+            const data = await res.json();
+            setCategories(data);
+        } catch (error) {
+            console.error('카테고리 조회 오류:', error);
+            showToast('error', '카테고리를 불러오는데 실패했습니다.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // 로그아웃
+    const handleLogout = () => {
+        localStorage.removeItem('adminToken');
+        localStorage.removeItem('adminUser');
+        navigate('/admin');
+    };
+
+    // 모달 열기 (추가/수정)
+    const openModal = (category = null) => {
+        if (category) {
+            setEditingCategory(category);
+            setFormData({ name: category.name, color: category.color });
+        } else {
+            setEditingCategory(null);
+            setFormData({ name: '', color: 'blue' });
+        }
+        setColorPickerOpen(false); // 컬러 피커는 닫힌 상태로
+        setModalOpen(true);
+    };
+
+    // 카테고리 저장
+    const handleSave = async () => {
+        if (!formData.name.trim()) {
+            showToast('error', '카테고리 이름을 입력해주세요.');
+            return;
+        }
+
+        // 중복 체크 (수정시 자기 자신 제외)
+        const isDuplicate = categories.some(
+            cat => cat.name.toLowerCase() === formData.name.trim().toLowerCase() 
+                && cat.id !== editingCategory?.id
+        );
+        if (isDuplicate) {
+            showToast('error', '이미 존재하는 카테고리입니다.');
+            return;
+        }
+
+        const token = localStorage.getItem('adminToken');
+        
+        try {
+            const url = editingCategory 
+                ? `/api/admin/schedule-categories/${editingCategory.id}`
+                : '/api/admin/schedule-categories';
+            
+            const res = await fetch(url, {
+                method: editingCategory ? 'PUT' : 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify(formData)
+            });
+
+            if (res.ok) {
+                showToast('success', editingCategory ? '카테고리가 수정되었습니다.' : '카테고리가 추가되었습니다.');
+                setModalOpen(false);
+                fetchCategories();
+            } else {
+                const error = await res.json();
+                showToast('error', error.error || '저장에 실패했습니다.');
+            }
+        } catch (error) {
+            console.error('저장 오류:', error);
+            showToast('error', '저장 중 오류가 발생했습니다.');
+        }
+    };
+
+    // 삭제 다이얼로그 열기
+    const openDeleteDialog = (category) => {
+        setDeleteTarget(category);
+        setDeleteDialogOpen(true);
+    };
+
+    // 카테고리 삭제
+    const handleDelete = async () => {
+        if (!deleteTarget) return;
+        
+        const token = localStorage.getItem('adminToken');
+        
+        try {
+            const res = await fetch(`/api/admin/schedule-categories/${deleteTarget.id}`, {
+                method: 'DELETE',
+                headers: { 'Authorization': `Bearer ${token}` }
+            });
+
+            if (res.ok) {
+                showToast('success', '카테고리가 삭제되었습니다.');
+                setDeleteDialogOpen(false);
+                setDeleteTarget(null);
+                fetchCategories();
+            } else {
+                const error = await res.json();
+                showToast('error', error.error || '삭제에 실패했습니다.');
+            }
+        } catch (error) {
+            console.error('삭제 오류:', error);
+            showToast('error', '삭제 중 오류가 발생했습니다.');
+        }
+    };
+
+    // Reorder 핸들러 (부드러운 애니메이션)
+    const handleReorder = async (newOrder) => {
+        setCategories(newOrder);
+        
+        // 순서 업데이트 API 호출
+        const orders = newOrder.map((cat, idx) => ({
+            id: cat.id,
+            sort_order: idx + 1
+        }));
+
+        const token = localStorage.getItem('adminToken');
+        try {
+            await fetch('/api/admin/schedule-categories-order', {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`
+                },
+                body: JSON.stringify({ orders })
+            });
+        } catch (error) {
+            console.error('순서 업데이트 오류:', error);
+            fetchCategories(); // 실패시 원래 데이터 다시 불러오기
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+                <div className="animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent"></div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen bg-gray-50">
+            <Toast toast={toast} onClose={() => setToast(null)} />
+
+            {/* 헤더 */}
+            <header className="bg-white shadow-sm border-b border-gray-100">
+                <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                        <Link to="/admin/dashboard" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
+                            fromis_9
+                        </Link>
+                        <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
+                            Admin
+                        </span>
+                    </div>
+                    <div className="flex items-center gap-4">
+                        <span className="text-gray-500 text-sm">
+                            안녕하세요, <span className="text-gray-900 font-medium">{user?.username}</span>님
+                        </span>
+                        <button
+                            onClick={handleLogout}
+                            className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+                        >
+                            <LogOut size={18} />
+                            로그아웃
+                        </button>
+                    </div>
+                </div>
+            </header>
+
+            {/* 메인 콘텐츠 */}
+            <main className="max-w-4xl mx-auto px-6 py-8">
+                {/* 브레드크럼 */}
+                <div className="flex items-center gap-2 text-sm text-gray-500 mb-6">
+                    <Link to="/admin/dashboard" className="hover:text-primary flex items-center gap-1">
+                        <Home size={14} />
+                        대시보드
+                    </Link>
+                    <ChevronRight size={14} />
+                    <Link to="/admin/schedule" className="hover:text-primary">일정 관리</Link>
+                    <ChevronRight size={14} />
+                    <span className="text-gray-900">카테고리 관리</span>
+                </div>
+
+                {/* 타이틀 */}
+                <div className="flex items-center justify-between mb-8">
+                    <div>
+                        <h1 className="text-2xl font-bold text-gray-900">카테고리 관리</h1>
+                        <p className="text-gray-500 mt-1">일정 카테고리를 추가, 수정, 삭제할 수 있습니다.</p>
+                    </div>
+                    <button
+                        onClick={() => openModal()}
+                        className="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-xl hover:bg-primary-dark transition-colors"
+                    >
+                        <Plus size={18} />
+                        카테고리 추가
+                    </button>
+                </div>
+
+                {/* 카테고리 목록 */}
+                <div className="bg-white rounded-2xl shadow-sm overflow-hidden">
+                    {categories.length === 0 ? (
+                        <div className="p-12 text-center text-gray-500">
+                            등록된 카테고리가 없습니다.
+                        </div>
+                    ) : (
+                        <Reorder.Group 
+                            axis="y" 
+                            values={categories} 
+                            onReorder={handleReorder}
+                            className="divide-y divide-gray-100"
+                        >
+                            {categories.map((category) => (
+                                <Reorder.Item
+                                    key={category.id}
+                                    value={category}
+                                    className="flex items-center gap-4 p-4 bg-white cursor-grab active:cursor-grabbing"
+                                    whileDrag={{ 
+                                        scale: 1.02, 
+                                        boxShadow: "0 10px 30px rgba(0,0,0,0.15)",
+                                        zIndex: 50
+                                    }}
+                                >
+                                    {/* 드래그 핸들 */}
+                                    <div className="text-gray-400 hover:text-gray-600">
+                                        <GripVertical size={20} />
+                                    </div>
+                                    
+                                    {/* 색상 표시 */}
+                                    {(() => {
+                                        const colorStyle = getColorStyle(category.color);
+                                        return (
+                                            <div 
+                                                className={`w-4 h-4 rounded-full ${colorStyle.className || ''}`}
+                                                style={colorStyle.style}
+                                            />
+                                        );
+                                    })()}
+                                    
+                                    {/* 이름 */}
+                                    <span className="flex-1 font-medium text-gray-900">{category.name}</span>
+                                    
+                                    {/* 액션 버튼 */}
+                                    <div className="flex items-center gap-2">
+                                        <button
+                                            onClick={(e) => { e.stopPropagation(); openModal(category); }}
+                                            className="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-colors"
+                                        >
+                                            <Edit3 size={18} />
+                                        </button>
+                                        <button
+                                            onClick={(e) => { e.stopPropagation(); openDeleteDialog(category); }}
+                                            className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                                        >
+                                            <Trash2 size={18} />
+                                        </button>
+                                    </div>
+                                </Reorder.Item>
+                            ))}
+                        </Reorder.Group>
+                    )}
+                </div>
+            </main>
+
+            {/* 추가/수정 모달 */}
+            <AnimatePresence>
+                {modalOpen && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+                        onClick={() => setModalOpen(false)}
+                    >
+                        <motion.div
+                            initial={{ scale: 0.9, opacity: 0 }}
+                            animate={{ scale: 1, opacity: 1 }}
+                            exit={{ scale: 0.9, opacity: 0 }}
+                            className="bg-white rounded-2xl p-6 w-full mx-4 shadow-xl"
+                            style={{ maxWidth: '452px', minWidth: '452px' }}
+                            onClick={(e) => e.stopPropagation()}
+                        >
+                            <h3 className="text-xl font-bold text-gray-900 mb-6">
+                                {editingCategory ? '카테고리 수정' : '카테고리 추가'}
+                            </h3>
+                            
+                            {/* 카테고리 이름 */}
+                            <div className="mb-6">
+                                <label className="block text-sm font-medium text-gray-700 mb-2">
+                                    카테고리 이름 *
+                                </label>
+                                <input
+                                    type="text"
+                                    value={formData.name}
+                                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                                    placeholder="예: 방송, 이벤트"
+                                    className="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+                                />
+                            </div>
+                            
+                            {/* 색상 선택 */}
+                            <div className="mb-8">
+                                <label className="block text-sm font-medium text-gray-700 mb-3">
+                                    색상 선택 *
+                                </label>
+                                <div className="flex flex-wrap gap-3">
+                                    {colorOptions.map((color) => (
+                                        <button
+                                            key={color.id}
+                                            type="button"
+                                            onClick={() => setFormData({ ...formData, color: color.id })}
+                                            className={`w-10 h-10 rounded-full ${color.bg} transition-all ${
+                                                formData.color === color.id
+                                                    ? 'ring-2 ring-offset-2 ring-gray-400 scale-110'
+                                                    : 'hover:scale-105'
+                                            }`}
+                                            title={color.name}
+                                        />
+                                    ))}
+                                    {/* 커스텀 색상 - 무지개 그라디언트 버튼 */}
+                                    <div className="relative">
+                                        <button
+                                            type="button"
+                                            onClick={(e) => {
+                                                e.stopPropagation();
+                                                setColorPickerOpen(!colorPickerOpen);
+                                            }}
+                                            className={`w-10 h-10 rounded-full transition-all ${
+                                                formData.color?.startsWith('#')
+                                                    ? 'ring-2 ring-offset-2 ring-gray-400 scale-110'
+                                                    : 'hover:scale-105'
+                                            }`}
+                                            style={{
+                                                background: formData.color?.startsWith('#') 
+                                                    ? formData.color 
+                                                    : 'conic-gradient(from 0deg, #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0000ff, #8000ff, #ff0080, #ff0000)'
+                                            }}
+                                            title="커스텀 색상"
+                                        />
+                                        {/* 색상 선택 팝업 */}
+                                        <AnimatePresence>
+                                            {colorPickerOpen && (
+                                                <>
+                                                    {/* 바깥 영역 클릭시 컬러피커만 닫기 */}
+                                                    <div 
+                                                        className="fixed inset-0 z-40" 
+                                                        onClick={(e) => {
+                                                            e.stopPropagation();
+                                                            setColorPickerOpen(false);
+                                                        }}
+                                                    />
+                                                    <motion.div
+                                                        initial={{ opacity: 0, scale: 0.9, y: -10 }}
+                                                        animate={{ opacity: 1, scale: 1, y: 0 }}
+                                                        exit={{ opacity: 0, scale: 0.9, y: -10 }}
+                                                        className="absolute top-12 left-0 z-50 p-4 bg-white rounded-2xl shadow-xl border border-gray-100"
+                                                        style={{ width: '240px' }}
+                                                        onClick={(e) => e.stopPropagation()}
+                                                    >
+                                                        <HexColorPicker 
+                                                            color={formData.color?.startsWith('#') ? formData.color : '#6b7280'}
+                                                            onChange={(color) => setFormData({ ...formData, color })}
+                                                            style={{ width: '100%', height: '180px' }}
+                                                        />
+                                                        <div className="mt-4 flex items-center">
+                                                            <span className="px-3 py-2 text-sm bg-gray-100 border border-r-0 border-gray-200 rounded-l-lg text-gray-500">#</span>
+                                                            <input
+                                                                type="text"
+                                                                value={formData.color?.startsWith('#') ? formData.color.slice(1) : ''}
+                                                                onChange={(e) => {
+                                                                    const val = e.target.value.replace(/[^0-9A-Fa-f]/g, '').slice(0, 6);
+                                                                    if (val) {
+                                                                        setFormData({ ...formData, color: '#' + val });
+                                                                    }
+                                                                }}
+                                                                placeholder="FFFFFF"
+                                                                className="w-full px-3 py-2 text-sm border border-gray-200 rounded-r-lg focus:outline-none focus:ring-2 focus:ring-primary"
+                                                                style={{ minWidth: 0 }}
+                                                            />
+                                                        </div>
+                                                        <div className="mt-3 flex justify-end gap-2">
+                                                            <button
+                                                                type="button"
+                                                                onClick={() => {
+                                                                    setFormData({ ...formData, color: 'blue' });
+                                                                    setColorPickerOpen(false);
+                                                                }}
+                                                                className="px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+                                                            >
+                                                                취소
+                                                            </button>
+                                                            <button
+                                                                type="button"
+                                                                onClick={() => setColorPickerOpen(false)}
+                                                                className="px-3 py-1.5 text-sm bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors"
+                                                            >
+                                                                확인
+                                                            </button>
+                                                        </div>
+                                                    </motion.div>
+                                                </>
+                                            )}
+                                        </AnimatePresence>
+                                    </div>
+                                </div>
+                            </div>
+                            
+                            {/* 버튼 */}
+                            <div className="flex justify-end gap-3">
+                                <button
+                                    type="button"
+                                    onClick={() => setModalOpen(false)}
+                                    className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+                                >
+                                    취소
+                                </button>
+                                <button
+                                    type="button"
+                                    onClick={handleSave}
+                                    className="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors"
+                                >
+                                    {editingCategory ? '수정' : '추가'}
+                                </button>
+                            </div>
+                        </motion.div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            {/* 삭제 확인 다이얼로그 */}
+            <AnimatePresence>
+                {deleteDialogOpen && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+                        onClick={() => setDeleteDialogOpen(false)}
+                    >
+                        <motion.div
+                            initial={{ scale: 0.9, opacity: 0 }}
+                            animate={{ scale: 1, opacity: 1 }}
+                            exit={{ scale: 0.9, opacity: 0 }}
+                            className="bg-white rounded-2xl p-6 max-w-md w-full mx-4 shadow-xl"
+                            onClick={(e) => e.stopPropagation()}
+                        >
+                            <div className="flex items-center gap-3 mb-4">
+                                <div className="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
+                                    <AlertTriangle className="text-red-500" size={20} />
+                                </div>
+                                <h3 className="text-lg font-bold text-gray-900">카테고리 삭제</h3>
+                            </div>
+                            
+                            <p className="text-gray-600 mb-6">
+                                <span className="font-medium text-gray-900">"{deleteTarget?.name}"</span> 카테고리를 삭제하시겠습니까?
+                                <br />
+                                <span className="text-sm text-red-500">이 작업은 되돌릴 수 없습니다.</span>
+                            </p>
+                            
+                            <div className="flex justify-end gap-3">
+                                <button
+                                    onClick={() => setDeleteDialogOpen(false)}
+                                    className="px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+                                >
+                                    취소
+                                </button>
+                                <button
+                                    onClick={handleDelete}
+                                    className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors flex items-center gap-2"
+                                >
+                                    <Trash2 size={16} />
+                                    삭제
+                                </button>
+                            </div>
+                        </motion.div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}
+
+export default AdminScheduleCategory;

frontend/vite.config.js

@@ -6,7 +6,7 @@ export default defineConfig({
   server: {
     host: true,
     port: 5173,
-    allowedHosts: ["fromis9.caadiq.co.kr"],
+    allowedHosts: true,
     proxy: {
       "/api": {
         target: "http://fromis9-backend:3000",