- 컨셉 포토 갤러리 페이지 추가 (AlbumGallery.jsx) - react-photo-album 라이브러리로 Justified 레이아웃 구현 - 썸네일/원본 이미지 분리 (thumb_400, original 폴더) - 라우터 변경: /discography → /album - URL 형식 변경: ID 기반 → 앨범명 기반 (/album/하얀 그리움) - 앨범명 기반 API 추가 (/api/albums/by-name/:name) - 브레드크럼 스타일 네비게이션 적용 - 라이트박스 슬라이드 애니메이션 추가 - 점 형태 인디케이터로 변경
43 lines
1.7 KiB
JavaScript
43 lines
1.7 KiB
JavaScript
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
|
import { BrowserView, MobileView } from 'react-device-detect';
|
|
|
|
// PC 페이지
|
|
import PCHome from './pages/pc/Home';
|
|
import PCMembers from './pages/pc/Members';
|
|
import PCDiscography from './pages/pc/Discography';
|
|
import PCAlbumDetail from './pages/pc/AlbumDetail';
|
|
import PCAlbumGallery from './pages/pc/AlbumGallery';
|
|
import PCSchedule from './pages/pc/Schedule';
|
|
|
|
// PC 레이아웃
|
|
import PCLayout from './components/pc/Layout';
|
|
|
|
function App() {
|
|
return (
|
|
<BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
|
|
<BrowserView>
|
|
<PCLayout>
|
|
<Routes>
|
|
<Route path="/" element={<PCHome />} />
|
|
<Route path="/members" element={<PCMembers />} />
|
|
<Route path="/album" element={<PCDiscography />} />
|
|
<Route path="/album/:name" element={<PCAlbumDetail />} />
|
|
<Route path="/album/:name/gallery" element={<PCAlbumGallery />} />
|
|
<Route path="/schedule" element={<PCSchedule />} />
|
|
</Routes>
|
|
</PCLayout>
|
|
</BrowserView>
|
|
<MobileView>
|
|
{/* 모바일 버전은 추후 구현 */}
|
|
<div className="flex items-center justify-center h-screen bg-gray-100 p-4">
|
|
<div className="text-center">
|
|
<p className="text-xl font-bold text-primary mb-2">fromis_9</p>
|
|
<p className="text-gray-500">모바일 버전은 준비 중입니다.</p>
|
|
</div>
|
|
</div>
|
|
</MobileView>
|
|
</BrowserRouter>
|
|
);
|
|
}
|
|
|
|
export default App;
|