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 { try {
// 앨범 목록 조회 // 앨범 목록 조회
const [albums] = await pool.query( 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> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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> <title>fromis_9 - 프로미스나인</title>
<link <link
rel="stylesheet" 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() { function App() {
return ( return (
<BrowserRouter> <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
<BrowserView> <BrowserView>
<PCLayout> <PCLayout>
<Routes> <Routes>

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

@ -1,6 +1,6 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom'; 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'; import { ArrowLeft, Calendar, Music2, Play, Clock, X, ChevronLeft, ChevronRight } from 'lucide-react';
function AlbumDetail() { function AlbumDetail() {
@ -263,10 +263,14 @@ function AlbumDetail() {
</motion.div> </motion.div>
{/* 라이트박스 모달 */} {/* 라이트박스 모달 */}
<AnimatePresence>
{lightbox.open && ( {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" className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center"
onClick={() => setLightbox({ ...lightbox, open: false })}
> >
{/* 닫기 버튼 */} {/* 닫기 버튼 */}
<button <button
@ -335,8 +339,9 @@ function AlbumDetail() {
/> />
))} ))}
</div> </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"> <div className="flex items-center gap-2 mb-1">
<h3 className="font-bold text-lg truncate flex-1">{album.title}</h3> <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"> <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> </span>
</div> </div>
<p className="text-primary text-sm font-medium mb-3"> <p className="text-primary text-sm font-medium mb-3">