caadiq/fromis_9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: caadiq:1b011820288eead7506ba0aa0e761fa0456566dd
Branches Tags
caadiq:main
..
compare: caadiq:035cdf038303f0acc7987114d8461da5ed5a99e1
Branches Tags
caadiq:main

No commits in common. "1b011820288eead7506ba0aa0e761fa0456566dd" and "035cdf038303f0acc7987114d8461da5ed5a99e1" have entirely different histories.
1b01182028 ... 035cdf0383

35 changed files with 463 additions and 7401 deletions
Show stats Expand all files Collapse all files

3
.env
View file

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

58
backend/package-lock.json generated
View file

@ -14,8 +14,6 @@
"jsonwebtoken": "^9.0.3", "jsonwebtoken": "^9.0.3",
"multer": "^1.4.5-lts.1", "multer": "^1.4.5-lts.1",
"mysql2": "^3.11.0", "mysql2": "^3.11.0",
"node-cron": "^4.2.1",
"rss-parser": "^3.13.0",
"sharp": "^0.33.5" "sharp": "^0.33.5"
} }
}, },
@ -2341,15 +2339,6 @@
"node": ">= 0.8" "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": { "node_modules/es-define-property": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@ -2944,15 +2933,6 @@
"node": "^18 || ^20 || >= 21" "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": { "node_modules/node-gyp-build": {
"version": "4.8.4", "version": "4.8.4",
"resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz", "resolved": "https://registry.npmjs.org/node-gyp-build/-/node-gyp-build-4.8.4.tgz",
@ -3091,16 +3071,6 @@
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
"license": "MIT" "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": { "node_modules/safe-buffer": {
"version": "5.2.1", "version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@ -3127,12 +3097,6 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"license": "MIT" "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": { "node_modules/semver": {
"version": "7.7.3", "version": "7.7.3",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
@ -3441,28 +3405,6 @@
"node": ">= 0.8" "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": { "node_modules/xtend": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

2
backend/package.json
View file

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

1115
backend/routes/admin.js
View file

File diff suppressed because it is too large Load diff

6
backend/routes/albums.js
View file

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

78
backend/routes/schedules.js
View file

@ -1,78 +0,0 @@
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;

7
backend/server.js
View file

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

368
backend/services/youtube-bot.js
View file

@ -1,368 +0,0 @@
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,
};

107
backend/services/youtube-scheduler.js
View file

@ -1,107 +0,0 @@
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,
};

2
frontend/.env
View file

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

56
frontend/package-lock.json generated
View file

@ -11,10 +11,8 @@
"framer-motion": "^11.0.8", "framer-motion": "^11.0.8",
"lucide-react": "^0.344.0", "lucide-react": "^0.344.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-colorful": "^5.6.1",
"react-device-detect": "^2.2.3", "react-device-detect": "^2.2.3",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-ios-time-picker": "^0.2.2",
"react-photo-album": "^3.4.0", "react-photo-album": "^3.4.0",
"react-router-dom": "^6.22.3", "react-router-dom": "^6.22.3",
"react-window": "^2.2.3" "react-window": "^2.2.3"
@ -1965,6 +1963,7 @@
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
@ -2190,17 +2189,6 @@
"dev": true, "dev": true,
"license": "MIT" "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": { "node_modules/queue-microtask": {
"version": "1.2.3", "version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@ -2234,16 +2222,6 @@
"node": ">=0.10.0" "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": { "node_modules/react-device-detect": {
"version": "2.2.3", "version": "2.2.3",
"resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz", "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz",
@ -2270,25 +2248,6 @@
"react": "^18.3.1" "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": { "node_modules/react-photo-album": {
"version": "3.4.0", "version": "3.4.0",
"resolved": "https://registry.npmjs.org/react-photo-album/-/react-photo-album-3.4.0.tgz", "resolved": "https://registry.npmjs.org/react-photo-album/-/react-photo-album-3.4.0.tgz",
@ -2310,19 +2269,6 @@
} }
} }
}, },
"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": { "node_modules/react-refresh": {
"version": "0.17.0", "version": "0.17.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

2
frontend/package.json
View file

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

17
frontend/src/App.jsx
View file

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

2
frontend/src/components/Toast.jsx
View file

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

14
frontend/src/components/Tooltip.jsx
View file

@ -6,16 +6,16 @@ import { motion, AnimatePresence } from 'framer-motion';
* 커스텀 툴팁 컴포넌트 * 커스텀 툴팁 컴포넌트
* 마우스 커서를 따라다니는 방식 * 마우스 커서를 따라다니는 방식
* @param {React.ReactNode} children - 툴팁을 표시할 요소 * @param {React.ReactNode} children - 툴팁을 표시할 요소
* @param {string|React.ReactNode} text - 툴팁에 표시할 내용 (content prop과 호환) * @param {string} text - 툴팁에 표시할 텍스트 (content prop과 호환)
* @param {string|React.ReactNode} content - 툴팁에 표시할 내용 (text prop과 호환) * @param {string} content - 툴팁에 표시할 텍스트 (text prop과 호환)
*/ */
const Tooltip = ({ children, text, content, className = "" }) => { const Tooltip = ({ children, text, content, className = "" }) => {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const [position, setPosition] = useState({ bottom: 0, left: 0 }); const [position, setPosition] = useState({ bottom: 0, left: 0 });
const triggerRef = useRef(null); const triggerRef = useRef(null);
// text 또는 content prop 사용 (문자열 또는 React 노드) // text 또는 content prop 사용
const tooltipContent = text || content; const tooltipText = text || content;
const handleMouseEnter = (e) => { const handleMouseEnter = (e) => {
// 마우스 커서 위치를 기준으로 툴팁 위치 설정 (커서 위로) // 마우스 커서 위치를 기준으로 툴팁 위치 설정 (커서 위로)
@ -45,7 +45,7 @@ const Tooltip = ({ children, text, content, className = "" }) => {
> >
{children} {children}
</div> </div>
{isVisible && tooltipContent && ReactDOM.createPortal( {isVisible && tooltipText && ReactDOM.createPortal(
<AnimatePresence> <AnimatePresence>
<motion.div <motion.div
initial={{ opacity: 0, y: 5, scale: 0.95 }} initial={{ opacity: 0, y: 5, scale: 0.95 }}
@ -56,9 +56,9 @@ const Tooltip = ({ children, text, content, className = "" }) => {
bottom: position.bottom, bottom: position.bottom,
left: position.left, left: position.left,
}} }}
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" 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"
> >
{tooltipContent} {tooltipText}
</motion.div> </motion.div>
</AnimatePresence>, </AnimatePresence>,
document.body document.body

196
frontend/src/components/common/Lightbox.jsx
View file

@ -1,196 +0,0 @@
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;

2
frontend/src/components/pc/Header.jsx
View file

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

16
frontend/src/index.css
View file

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

176
frontend/src/pages/pc/AlbumDetail.jsx
View file

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

106
frontend/src/pages/pc/AlbumGallery.jsx
View file

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

6
frontend/src/pages/pc/Album.jsx → frontend/src/pages/pc/Discography.jsx
View file

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

11
frontend/src/pages/pc/Members.jsx
View file

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

814
frontend/src/pages/pc/Schedule.jsx
View file

@ -1,101 +1,30 @@
import { useState, useEffect, useRef, useMemo } from 'react'; import { useState, useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { Clock, ChevronLeft, ChevronRight, ChevronDown, Tag, Search, ArrowLeft } from 'lucide-react'; import { Clock, MapPin, Users, ChevronLeft, ChevronRight, ChevronDown } from 'lucide-react';
import { schedules } from '../../data/dummy';
function Schedule() { function Schedule() {
const navigate = useNavigate();
const [currentDate, setCurrentDate] = useState(new Date()); const [currentDate, setCurrentDate] = useState(new Date());
const [selectedDate, setSelectedDate] = useState(new Date().toISOString().split('T')[0]); // 오늘 기본값 const [selectedDate, setSelectedDate] = useState(null);
const [showYearMonthPicker, setShowYearMonthPicker] = useState(false); const [showYearMonthPicker, setShowYearMonthPicker] = useState(false);
const [viewMode, setViewMode] = useState('yearMonth');
const [slideDirection, setSlideDirection] = useState(0);
const pickerRef = useRef(null); 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(() => { useEffect(() => {
const handleClickOutside = (event) => { const handleClickOutside = (event) => {
if (pickerRef.current && !pickerRef.current.contains(event.target)) { if (pickerRef.current && !pickerRef.current.contains(event.target)) {
setShowYearMonthPicker(false); setShowYearMonthPicker(false);
setViewMode('yearMonth');
}
if (categoryRef.current && !categoryRef.current.contains(event.target)) {
setShowCategoryTooltip(false);
} }
}; };
document.addEventListener('mousedown', handleClickOutside); if (showYearMonthPicker) {
return () => document.removeEventListener('mousedown', handleClickOutside); document.addEventListener('mousedown', handleClickOutside);
}, []); }
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [showYearMonthPicker]);
// 달력 관련 함수 // 달력 관련 함수
const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate(); const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
@ -108,17 +37,8 @@ function Schedule() {
const days = ['일', '월', '화', '수', '목', '금', '토']; const days = ['일', '월', '화', '수', '목', '금', '토'];
// 스케줄이 있는 날짜 목록 (ISO 형식에서 YYYY-MM-DD 추출) // 스케줄이 있는 날짜 목록
const scheduleDates = schedules.map(s => s.date ? s.date.split('T')[0] : ''); const scheduleDates = schedules.map(s => s.date);
// 해당 날짜의 첫 번째 일정 카테고리 색상
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 hasSchedule = (day) => {
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
@ -126,79 +46,29 @@ function Schedule() {
}; };
const prevMonth = () => { const prevMonth = () => {
setSlideDirection(-1);
setCurrentDate(new Date(year, month - 1, 1)); setCurrentDate(new Date(year, month - 1, 1));
setSelectedDate(null); // 월 변경 시 초기화
}; };
const nextMonth = () => { const nextMonth = () => {
setSlideDirection(1);
setCurrentDate(new Date(year, month + 1, 1)); setCurrentDate(new Date(year, month + 1, 1));
setSelectedDate(null); // 월 변경 시 초기화
}; };
const selectDate = (day) => { const selectDate = (day) => {
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
setSelectedDate(selectedDate === dateStr ? null : dateStr); if (hasSchedule(day)) {
}; setSelectedDate(selectedDate === dateStr ? null : dateStr);
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 toggleCategory = (categoryId) => {
setSelectedCategories(prev =>
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);
});
} }
};
// 일반 모드: 기존 필터링 const selectYearMonth = (newYear, newMonth) => {
return schedules setCurrentDate(new Date(newYear, newMonth, 1));
.filter(s => { setShowYearMonthPicker(false);
const scheduleDate = s.date ? s.date.split('T')[0] : ''; };
const matchesDate = selectedDate
? scheduleDate === selectedDate // 필터링된 스케줄
: scheduleDate.startsWith(currentYearMonth); const filteredSchedules = selectedDate
const matchesCategory = selectedCategories.length === 0 || selectedCategories.includes(s.category_id); ? schedules.filter(s => s.date === selectedDate)
return matchesDate && matchesCategory; : schedules;
})
.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 formatDate = (dateStr) => {
const date = new Date(dateStr); const date = new Date(dateStr);
@ -210,53 +80,9 @@ function Schedule() {
}; };
}; };
// 일정 클릭 핸들러 // 년도 범위 (현재 년도 기준 ±5년)
const handleScheduleClick = (schedule) => { const currentYear = new Date().getFullYear();
// 설명이 없고 URL만 있으면 바로 링크 열기 const yearRange = Array.from({ length: 11 }, (_, i) => currentYear - 5 + i);
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 ( return (
<div className="py-16"> <div className="py-16">
@ -281,16 +107,13 @@ function Schedule() {
</div> </div>
<div className="flex gap-8"> <div className="flex gap-8">
{/* 왼쪽: 달력 + 카테고리 */} {/* 달력 - 더 큰 사이즈 */}
<div className="w-[400px] flex-shrink-0"> <motion.div
{/* 달력 */} initial={{ opacity: 0, x: -20 }}
<motion.div animate={{ opacity: 1, x: 0 }}
initial={{ opacity: 0, x: -20 }} className="w-[400px] flex-shrink-0"
animate={{ opacity: isSearchMode ? 0.4 : 1, x: 0 }} >
transition={{ duration: 0.2 }} <div className="bg-white rounded-2xl shadow-sm p-8 relative">
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"> <div className="flex items-center justify-between mb-8">
<button <button
@ -299,13 +122,66 @@ function Schedule() {
> >
<ChevronLeft size={24} /> <ChevronLeft size={24} />
</button> </button>
<button <div ref={pickerRef} className="relative">
onClick={() => setShowYearMonthPicker(!showYearMonthPicker)} <button
className="flex items-center gap-1 text-xl font-bold hover:text-primary transition-colors" onClick={() => setShowYearMonthPicker(!showYearMonthPicker)}
> className="flex items-center gap-1 text-xl font-bold hover:text-primary transition-colors"
<span>{year}년 {month + 1}월</span> >
<ChevronDown size={20} className={`transition-transform ${showYearMonthPicker ? 'rotate-180' : ''}`} /> <span>{year}년 {month + 1}월</span>
</button> <ChevronDown size={20} className={`transition-transform ${showYearMonthPicker ? 'rotate-180' : ''}`} />
</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 <button
onClick={nextMonth} onClick={nextMonth}
className="p-2 hover:bg-gray-100 rounded-full transition-colors" className="p-2 hover:bg-gray-100 rounded-full transition-colors"
@ -314,179 +190,68 @@ function Schedule() {
</button> </button>
</div> </div>
{/* 년/월 선택 팝업 */} {/* 요일 헤더 */}
<AnimatePresence> <div className="grid grid-cols-7 mb-4">
{showYearMonthPicker && ( {days.map((day, i) => (
<motion.div <div
initial={{ opacity: 0, y: -10 }} key={day}
animate={{ opacity: 1, y: 0 }} className={`text-center text-sm font-medium py-2 ${
exit={{ opacity: 0, y: -10 }} i === 0 ? 'text-red-500' : i === 6 ? 'text-blue-500' : 'text-gray-500'
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" }`}
> >
<div className="flex items-center justify-between mb-4"> {day}
<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 }}
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>
))}
</div>
<div className="grid grid-cols-7 gap-1"> {/* 날짜 그리드 */}
{/* 전달 날짜 */} <div className="grid grid-cols-7 gap-1">
{Array.from({ length: firstDay }).map((_, i) => { {/* 빈 칸 */}
const prevMonthDays = getDaysInMonth(year, month - 1); {Array.from({ length: firstDay }).map((_, i) => (
const day = prevMonthDays - firstDay + i + 1; <div key={`empty-${i}`} className="aspect-square" />
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) => { {Array.from({ length: daysInMonth }).map((_, i) => {
const day = i + 1; const day = i + 1;
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
const isSelected = selectedDate === dateStr; const isSelected = selectedDate === dateStr;
const hasEvent = hasSchedule(day); const hasEvent = hasSchedule(day);
const eventColor = getScheduleColor(day); const dayOfWeek = (firstDay + i) % 7;
const dayOfWeek = (firstDay + i) % 7; const isToday = new Date().toDateString() === new Date(year, month, day).toDateString();
const isToday = new Date().toDateString() === new Date(year, month, day).toDateString();
return ( return (
<button <button
key={day} key={day}
onClick={() => selectDate(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 disabled={!hasEvent}
${isSelected ? 'bg-primary text-white shadow-lg hover:bg-primary' : ''} className={`aspect-square flex flex-col items-center justify-center rounded-xl text-base font-medium transition-all
${isToday && !isSelected ? 'bg-primary/10 text-primary font-bold hover:bg-primary/20' : ''} ${isSelected ? 'bg-primary text-white shadow-md' : ''}
${dayOfWeek === 0 && !isSelected && !isToday ? 'text-red-500' : ''} ${isToday && !isSelected ? 'ring-2 ring-primary' : ''}
${dayOfWeek === 6 && !isSelected && !isToday ? 'text-blue-500' : ''} ${hasEvent && !isSelected ? 'hover:bg-primary/10 cursor-pointer' : ''}
`} ${!hasEvent ? 'cursor-default opacity-60' : ''}
> ${dayOfWeek === 0 && !isSelected ? 'text-red-500' : ''}
<span>{day}</span> ${dayOfWeek === 6 && !isSelected ? 'text-blue-500' : ''}
{/* 점: absolute로 위치 고정하여 글씨 위치에 영향 없음 */} `}
<span >
className={`absolute bottom-1 w-1.5 h-1.5 rounded-full ${hasEvent ? '' : 'opacity-0'}`} <span>{day}</span>
style={{ backgroundColor: isSelected ? 'white' : (eventColor || 'transparent') }} {hasEvent && (
/> <span className={`w-1.5 h-1.5 rounded-full mt-1 ${isSelected ? 'bg-white' : 'bg-primary'}`} />
</button> )}
); </button>
})} );
})}
{/* 다음달 날짜 */} </div>
{(() => {
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="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"> <div className="flex items-center gap-1 text-gray-500">
<span className="w-2 h-2 rounded-full bg-primary flex-shrink-0" /> <span className="w-2 h-2 rounded-full bg-primary" />
<span className="leading-none">일정 있음</span> <span>일정 있음</span>
</div> </div>
<button <button
onClick={() => setSelectedDate(null)} onClick={() => setSelectedDate(null)}
className={`px-4 py-2 rounded-lg transition-colors ${ className={`px-4 py-1.5 rounded-lg transition-colors ${
selectedDate selectedDate
? 'bg-primary text-white hover:bg-primary-dark' ? 'bg-primary text-white hover:bg-primary-dark'
: 'bg-gray-100 text-gray-400 cursor-default' : 'bg-gray-100 text-gray-400 cursor-default'
@ -499,260 +264,53 @@ function Schedule() {
</div> </div>
</motion.div> </motion.div>
{/* 카테고리 필터 */}
<motion.div
animate={{ opacity: isSearchMode && searchResults.length === 0 ? 0.4 : 1 }}
transition={{ duration: 0.2 }}
className={`bg-white rounded-2xl shadow-sm p-6 mt-4 ${isSearchMode && searchResults.length === 0 ? 'pointer-events-none' : ''}`}
>
<h3 className="font-bold text-gray-900 mb-4">카테고리</h3>
<div className="space-y-1">
{/* 전체 */}
<button
onClick={() => setSelectedCategories([])}
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="flex items-center gap-2">
<span className="w-3 h-3 rounded-full bg-gray-400" />
<span>전체</span>
</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>
{/* 개별 카테고리 */}
{categories.map(category => {
// 검색 모드에서는 검색 결과 기준, 일반 모드에서는 해당 월 기준
const count = isSearchMode && searchTerm
? searchResults.filter(s => s.category_id === category.id).length
: schedules.filter(s => {
const scheduleDate = s.date ? s.date.split('T')[0] : '';
return scheduleDate.startsWith(currentYearMonth) && s.category_id === category.id;
}).length;
const isSelected = selectedCategories.includes(category.id);
return (
<button
key={category.id}
onClick={() => toggleCategory(category.id)}
className={`w-full flex items-center justify-between px-3 py-3 rounded-lg transition-colors ${
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-1 space-y-4">
{/* 헤더 */} {filteredSchedules.length > 0 ? (
<div className="flex items-center justify-between mb-4"> filteredSchedules.map((schedule, index) => {
<AnimatePresence mode="wait"> const formatted = formatDate(schedule.date);
{isSearchMode ? ( return (
/* 검색 모드 - 밑줄 스타일 */
<motion.div <motion.div
key="search-mode" key={schedule.id}
initial={{ opacity: 0, x: -10 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, x: -10 }} transition={{ delay: index * 0.1 }}
transition={{ duration: 0.15 }} className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"
className="flex items-center gap-3 flex-1"
> >
<button {/* 날짜 영역 */}
onClick={() => { <div className="w-24 bg-primary flex flex-col items-center justify-center text-white py-6">
setIsSearchMode(false); <span className="text-sm font-medium opacity-80">{formatted.month}월</span>
setSearchInput(''); <span className="text-3xl font-bold">{formatted.day}</span>
setSearchTerm(''); <span className="text-sm font-medium opacity-80">{formatted.weekday}</span>
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> </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="flex-1 p-6 flex flex-col justify-center">
<div className="text-center py-20 text-gray-500">로딩 중...</div> <h3 className="font-bold text-lg mb-3">{schedule.title}</h3>
) : 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 ( <div className="flex flex-wrap gap-4 text-sm text-gray-500">
<motion.div <div className="flex items-center gap-1">
key={schedule.id} <Clock size={14} className="text-primary" />
initial={{ opacity: 0, y: 20 }} <span>{schedule.time}</span>
animate={{ opacity: 1, y: 0 }} </div>
transition={{ delay: Math.min(index, 10) * 0.03 }} <div className="flex items-center gap-1">
onClick={() => handleScheduleClick(schedule)} <MapPin size={14} className="text-primary" />
className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer" <span>{schedule.platform}</span>
> </div>
{/* 날짜 영역 */} <div className="flex items-center gap-1">
<div <Users size={14} className="text-primary" />
className="w-24 flex flex-col items-center justify-center text-white py-6" <span>{schedule.members.join(', ')}</span>
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> </div>
</motion.div> </div>
); </motion.div>
}) );
) : ( })
<div className="text-center py-20 text-gray-500"> ) : (
{selectedDate ? '선택한 날짜에 일정이 없습니다.' : '예정된 일정이 없습니다.'} <div className="text-center py-20 text-gray-500">
</div> {selectedDate ? '선택한 날짜에 일정이 없습니다.' : '예정된 일정이 없습니다.'}
)} </div>
</div> )}
</div> </div>
</div> </div>
</div> </div>

14
frontend/src/pages/pc/admin/AdminAlbumForm.jsx
View file

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

168
frontend/src/pages/pc/admin/AdminAlbumPhotos.jsx
View file

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

4
frontend/src/pages/pc/admin/AdminAlbums.jsx
View file

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

103
frontend/src/pages/pc/admin/AdminDashboard.jsx
View file

@ -6,46 +6,9 @@ import {
Home, ChevronRight Home, ChevronRight
} from 'lucide-react'; } 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() { function AdminDashboard() {
const navigate = useNavigate(); const navigate = useNavigate();
const [user, setUser] = useState(null); const [user, setUser] = useState(null);
const [stats, setStats] = useState({
albums: 0,
photos: 0,
schedules: 0,
members: 0
});
useEffect(() => { useEffect(() => {
// 로그인 상태 확인 // 로그인 상태 확인
@ -72,58 +35,8 @@ function AdminDashboard() {
localStorage.removeItem('adminUser'); localStorage.removeItem('adminUser');
navigate('/admin'); navigate('/admin');
}); });
// 통계 데이터 가져오기
fetchStats();
}, [navigate]); }, [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 = () => { const handleLogout = () => {
localStorage.removeItem('adminToken'); localStorage.removeItem('adminToken');
localStorage.removeItem('adminUser'); localStorage.removeItem('adminUser');
@ -161,7 +74,7 @@ function AdminDashboard() {
<header className="bg-white shadow-sm border-b border-gray-100"> <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="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Link to="/admin/dashboard" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity"> <Link to="/" className="text-2xl font-bold text-primary hover:opacity-80 transition-opacity">
fromis_9 fromis_9
</Link> </Link>
<span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full"> <span className="px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
@ -226,21 +139,21 @@ function AdminDashboard() {
<h2 className="text-xl font-bold text-gray-900 mb-6">빠른 통계</h2> <h2 className="text-xl font-bold text-gray-900 mb-6">빠른 통계</h2>
<div className="grid grid-cols-4 gap-6"> <div className="grid grid-cols-4 gap-6">
<div className="bg-white rounded-xl p-6 border border-gray-100 shadow-sm"> <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.members} /></p> <p className="text-3xl font-bold text-primary mb-1">-</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> <p className="text-gray-500 text-sm">총 앨범</p>
</div> </div>
<div className="bg-white rounded-xl p-6 border border-gray-100 shadow-sm"> <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.photos} /></p> <p className="text-3xl font-bold text-primary mb-1">-</p>
<p className="text-gray-500 text-sm">총 사진</p> <p className="text-gray-500 text-sm">총 사진</p>
</div> </div>
<div className="bg-white rounded-xl p-6 border border-gray-100 shadow-sm"> <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.schedules} /></p> <p className="text-3xl font-bold text-primary mb-1">-</p>
<p className="text-gray-500 text-sm">총 일정</p> <p className="text-gray-500 text-sm">총 일정</p>
</div> </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>
</div> </div>
</main> </main>

34
frontend/src/pages/pc/admin/AdminLogin.jsx
View file

@ -1,4 +1,4 @@
import { useState, useEffect } from 'react'; import { useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { Lock, User, AlertCircle, Eye, EyeOff } from 'lucide-react'; import { Lock, User, AlertCircle, Eye, EyeOff } from 'lucide-react';
@ -10,29 +10,6 @@ function AdminLogin() {
const [error, setError] = useState(''); const [error, setError] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [showPassword, setShowPassword] = 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) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
@ -65,15 +42,6 @@ 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 ( return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4"> <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
<motion.div <motion.div

595
frontend/src/pages/pc/admin/AdminMemberEdit.jsx
View file

@ -1,595 +0,0 @@
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;

212
frontend/src/pages/pc/admin/AdminMembers.jsx
View file

@ -1,212 +0,0 @@
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;

989
frontend/src/pages/pc/admin/AdminSchedule.jsx
View file

@ -1,989 +0,0 @@
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;

376
frontend/src/pages/pc/admin/AdminScheduleBots.jsx
View file

@ -1,376 +0,0 @@
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;

572
frontend/src/pages/pc/admin/AdminScheduleCategory.jsx
View file

@ -1,572 +0,0 @@
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;

1623
frontend/src/pages/pc/admin/AdminScheduleForm.jsx
View file

File diff suppressed because it is too large Load diff

2
frontend/vite.config.js
View file

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