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

fix: React Router v7 future 플래그 추가

Browse source 
- BrowserRouter에 v7_startTransition, v7_relativeSplatPath 플래그 추가
- 콘솔 경고 메시지 제거

refactor: 앨범 유형 표시 분리 및 라이트박스 개선
- album_type (전체), album_type_short (짧은) 분리
- 앨범 목록에서 짧은 유형 표시
- 라이트박스 닫기 애니메이션 추가 (AnimatePresence)
- 배경 클릭 시 모달 닫힘 방지
- favicon 링크 추가
This commit is contained in:
caadiq 2026-01-01 14:15:39 +09:00
parent ef1050758a
commit 66099a1988
6 changed files with 13 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
backend/routes/albums.js
View file

@ -8,7 +8,7 @@ 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"
"SELECT id, title, album_type, album_type_short, release_date, cover_url FROM albums ORDER BY release_date DESC"
);
// 각 앨범에 트랙 정보 추가

1
frontend/index.html
View file

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>fromis_9 - 프로미스나인</title>
<link
rel="stylesheet"

BIN
frontend/public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 234 KiB

2
frontend/src/App.jsx
View file

@ -13,7 +13,7 @@ import PCLayout from './components/pc/Layout';
function App() {
return (
<BrowserRouter>
<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
<BrowserView>
<PCLayout>
<Routes>

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

@ -1,6 +1,6 @@
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';
import { motion, AnimatePresence } from 'framer-motion';
import { ArrowLeft, Calendar, Music2, Play, Clock, X, ChevronLeft, ChevronRight } from 'lucide-react';
function AlbumDetail() {
@ -263,10 +263,14 @@ function AlbumDetail() {
</motion.div>
{/* 라이트박스 모달 */}
<AnimatePresence>
{lightbox.open && (
<div
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center"
onClick={() => setLightbox({ ...lightbox, open: false })}
>
{/* 닫기 버튼 */}
<button
@ -335,8 +339,9 @@ function AlbumDetail() {
/>
))}
</div>
</div>
</motion.div>
)}
</AnimatePresence>
</>
);
}

2
frontend/src/pages/pc/Discography.jsx
View file

@ -139,7 +139,7 @@ function Discography() {
<div className="flex items-center gap-2 mb-1">
<h3 className="font-bold text-lg truncate flex-1">{album.title}</h3>
<span className="px-2 py-0.5 bg-primary/10 text-primary text-xs font-medium rounded-full flex-shrink-0">
{album.album_type}
{album.album_type_short || album.album_type}
</span>
</div>
<p className="text-primary text-sm font-medium mb-3">