- album_teasers 테이블 생성 및 API 연동 - 앨범 상세 페이지에 티저 이미지 썸네일 표시 - 이미지 클릭 시 라이트박스 모달 표시 - 좌우 슬라이드 애니메이션 적용 - 티저 썸네일 호버 효과 (확대 + 그림자)
64 lines
1.9 KiB
JavaScript
64 lines
1.9 KiB
JavaScript
import express from "express";
|
|
import pool from "../lib/db.js";
|
|
|
|
const router = express.Router();
|
|
|
|
// 전체 앨범 조회 (트랙 포함)
|
|
router.get("/", async (req, res) => {
|
|
try {
|
|
// 앨범 목록 조회
|
|
const [albums] = await pool.query(
|
|
"SELECT id, title, album_type, release_date, cover_url FROM albums ORDER BY release_date DESC"
|
|
);
|
|
|
|
// 각 앨범에 트랙 정보 추가
|
|
for (const album of albums) {
|
|
const [tracks] = await pool.query(
|
|
"SELECT id, track_number, title, is_title_track, duration, lyricist, composer, arranger FROM tracks WHERE album_id = ? ORDER BY track_number",
|
|
[album.id]
|
|
);
|
|
album.tracks = tracks;
|
|
}
|
|
|
|
res.json(albums);
|
|
} catch (error) {
|
|
console.error("앨범 조회 오류:", error);
|
|
res.status(500).json({ error: "앨범 정보를 가져오는데 실패했습니다." });
|
|
}
|
|
});
|
|
|
|
// 특정 앨범 조회 (트랙 및 상세 정보 포함)
|
|
router.get("/:id", async (req, res) => {
|
|
try {
|
|
const [albums] = await pool.query("SELECT * FROM albums WHERE id = ?", [
|
|
req.params.id,
|
|
]);
|
|
|
|
if (albums.length === 0) {
|
|
return res.status(404).json({ error: "앨범을 찾을 수 없습니다." });
|
|
}
|
|
|
|
const album = albums[0];
|
|
|
|
// 트랙 정보 조회 (가사 포함)
|
|
const [tracks] = await pool.query(
|
|
"SELECT * FROM tracks WHERE album_id = ? ORDER BY track_number",
|
|
[album.id]
|
|
);
|
|
album.tracks = tracks;
|
|
|
|
// 티저 이미지 조회
|
|
const [teasers] = await pool.query(
|
|
"SELECT image_url FROM album_teasers WHERE album_id = ? ORDER BY sort_order",
|
|
[album.id]
|
|
);
|
|
album.teasers = teasers.map((t) => t.image_url);
|
|
|
|
res.json(album);
|
|
} catch (error) {
|
|
console.error("앨범 조회 오류:", error);
|
|
res.status(500).json({ error: "앨범 정보를 가져오는데 실패했습니다." });
|
|
}
|
|
});
|
|
|
|
export default router;
|