feat(frontend): Phase 9 - 기타 공개 페이지 마이그레이션
페이지 추가: - Home: PC/Mobile 통합 홈 페이지 - 히어로 섹션, 그룹 통계, 멤버/앨범/일정 미리보기 - Members: PC/Mobile 통합 멤버 페이지 - 현재 멤버, 전 멤버 그리드 - NotFound: 404 페이지 훅 추가: - useMembers: 멤버 목록 조회 - useMemberDetail: 멤버 상세 조회 라우팅: - 모든 공개 라우트 완성 (/, /members, /album, /schedule) - 404 라우트 추가 (*) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
6c25d32259
commit
bd8e87f636
10 changed files with 610 additions and 152 deletions
|
|
@ -1,145 +1,14 @@
|
||||||
import { BrowserRouter, Routes, Route, NavLink } from "react-router-dom";
|
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||||
import { cn, getTodayKST, formatFullDate } from "@/utils";
|
import { ErrorBoundary, ToastContainer, Layout } from "@/components";
|
||||||
import { useUIStore } from "@/stores";
|
import { Schedule, Album, Home, Members, NotFound } from "@/pages";
|
||||||
import { useIsMobile, useCategories, useScheduleData } from "@/hooks";
|
|
||||||
import { ErrorBoundary, Loading, ToastContainer, ScheduleCard, Layout } from "@/components";
|
|
||||||
import { Schedule, Album } from "@/pages";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 홈 페이지 (임시)
|
|
||||||
*/
|
|
||||||
function Home() {
|
|
||||||
const today = getTodayKST();
|
|
||||||
const isMobile = useIsMobile();
|
|
||||||
const { showSuccess, showError } = useUIStore();
|
|
||||||
const { data: categories, isLoading: categoriesLoading } = useCategories();
|
|
||||||
const currentDate = new Date();
|
|
||||||
const { data: schedules, isLoading: schedulesLoading } = useScheduleData(
|
|
||||||
currentDate.getFullYear(),
|
|
||||||
currentDate.getMonth() + 1
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={cn("p-4", isMobile ? "pb-20" : "")}>
|
|
||||||
<div className="max-w-2xl mx-auto space-y-4">
|
|
||||||
<div className="text-center">
|
|
||||||
<h1 className="text-2xl font-bold text-primary mb-2">
|
|
||||||
fromis_9 Frontend Refactoring
|
|
||||||
</h1>
|
|
||||||
<p className="text-gray-600">Phase 7 진행 중 - 스케줄 페이지</p>
|
|
||||||
<p className={cn("text-sm", isMobile ? "text-blue-500" : "text-green-500")}>
|
|
||||||
디바이스: {isMobile ? "모바일" : "PC"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="p-4 bg-white rounded-lg shadow text-sm space-y-3">
|
|
||||||
<p><strong>오늘:</strong> {formatFullDate(today)}</p>
|
|
||||||
|
|
||||||
<div className="border-t pt-3">
|
|
||||||
<p className="font-semibold mb-2">카테고리 ({categories?.length || 0}개)</p>
|
|
||||||
{categoriesLoading ? (
|
|
||||||
<Loading size="sm" />
|
|
||||||
) : (
|
|
||||||
<div className="flex flex-wrap gap-1">
|
|
||||||
{categories?.map((c) => (
|
|
||||||
<span
|
|
||||||
key={c.id}
|
|
||||||
className="px-2 py-0.5 rounded text-xs text-white"
|
|
||||||
style={{ backgroundColor: c.color }}
|
|
||||||
>
|
|
||||||
{c.name}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-t pt-3">
|
|
||||||
<p className="font-semibold mb-2">토스트 테스트</p>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<button
|
|
||||||
onClick={() => showSuccess("성공 메시지!")}
|
|
||||||
className="px-3 py-1 bg-emerald-500 text-white rounded text-xs"
|
|
||||||
>
|
|
||||||
성공
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
onClick={() => showError("에러 메시지!")}
|
|
||||||
className="px-3 py-1 bg-red-500 text-white rounded text-xs"
|
|
||||||
>
|
|
||||||
에러
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="border-t pt-3">
|
|
||||||
<p className="font-semibold mb-2">페이지 이동</p>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<NavLink
|
|
||||||
to="/schedule"
|
|
||||||
className="px-3 py-1 bg-primary text-white rounded text-xs"
|
|
||||||
>
|
|
||||||
일정 페이지
|
|
||||||
</NavLink>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ScheduleCard 컴포넌트 테스트 */}
|
|
||||||
{schedulesLoading ? (
|
|
||||||
<div className="p-4 bg-white rounded-lg shadow">
|
|
||||||
<Loading size="sm" text="스케줄 로딩 중..." />
|
|
||||||
</div>
|
|
||||||
) : schedules?.length > 0 ? (
|
|
||||||
<>
|
|
||||||
{/* Public Variant (공개 페이지용) */}
|
|
||||||
<div className="p-4 bg-white rounded-lg shadow">
|
|
||||||
<p className="font-semibold mb-3 text-sm">variant="public" (공개 페이지용)</p>
|
|
||||||
<div className="space-y-3">
|
|
||||||
{schedules.slice(0, 2).map((schedule) => (
|
|
||||||
<ScheduleCard
|
|
||||||
key={schedule.id}
|
|
||||||
schedule={schedule}
|
|
||||||
variant="public"
|
|
||||||
onClick={() => showSuccess(`${schedule.title} 클릭`)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Admin Variant (관리자 페이지용) */}
|
|
||||||
<div className="p-4 bg-white rounded-lg shadow">
|
|
||||||
<p className="font-semibold mb-3 text-sm">variant="admin" (관리자 페이지용)</p>
|
|
||||||
<div className="divide-y">
|
|
||||||
{schedules.slice(0, 2).map((schedule) => (
|
|
||||||
<ScheduleCard
|
|
||||||
key={schedule.id}
|
|
||||||
schedule={schedule}
|
|
||||||
variant="admin"
|
|
||||||
onClick={() => showSuccess(`${schedule.title} 클릭`)}
|
|
||||||
onEdit={(s) => showSuccess(`${s.title} 수정`)}
|
|
||||||
onDelete={(s) => showError(`${s.title} 삭제`)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className="p-4 bg-white rounded-lg shadow">
|
|
||||||
<p className="text-gray-500 text-sm">이번 달 스케줄이 없습니다.</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 프로미스나인 팬사이트 메인 앱
|
* 프로미스나인 팬사이트 메인 앱
|
||||||
*
|
*
|
||||||
* Phase 8: 앨범 페이지 마이그레이션
|
* Phase 9: 기타 공개 페이지 마이그레이션
|
||||||
* - Album 페이지 (PC/Mobile 통합)
|
* - Home 페이지 (PC/Mobile 통합)
|
||||||
* - useAlbums 훅 추가
|
* - Members 페이지 (PC/Mobile 통합)
|
||||||
|
* - NotFound 페이지
|
||||||
*/
|
*/
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -157,6 +26,28 @@ function App() {
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* 멤버 */}
|
||||||
|
<Route
|
||||||
|
path="/members"
|
||||||
|
element={
|
||||||
|
<Layout pageTitle="멤버">
|
||||||
|
<Members />
|
||||||
|
<ToastContainer />
|
||||||
|
</Layout>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* 앨범 */}
|
||||||
|
<Route
|
||||||
|
path="/album"
|
||||||
|
element={
|
||||||
|
<Layout pageTitle="앨범">
|
||||||
|
<Album />
|
||||||
|
<ToastContainer />
|
||||||
|
</Layout>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
|
||||||
{/* 스케줄 */}
|
{/* 스케줄 */}
|
||||||
<Route
|
<Route
|
||||||
path="/schedule"
|
path="/schedule"
|
||||||
|
|
@ -168,22 +59,12 @@ function App() {
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* 임시 페이지들 */}
|
{/* 404 */}
|
||||||
<Route
|
<Route
|
||||||
path="/members"
|
path="*"
|
||||||
element={
|
element={
|
||||||
<Layout pageTitle="멤버">
|
<Layout>
|
||||||
<div className="p-4 text-center text-gray-500">멤버 페이지 (준비 중)</div>
|
<NotFound />
|
||||||
</Layout>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
{/* 앨범 */}
|
|
||||||
<Route
|
|
||||||
path="/album"
|
|
||||||
element={
|
|
||||||
<Layout pageTitle="앨범">
|
|
||||||
<Album />
|
|
||||||
<ToastContainer />
|
|
||||||
</Layout>
|
</Layout>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -27,3 +27,6 @@ export { useAdminAuth, useRedirectIfAuthenticated } from './useAdminAuth';
|
||||||
|
|
||||||
// 앨범 데이터
|
// 앨범 데이터
|
||||||
export { useAlbums, useAlbumDetail, useAlbumGallery } from './useAlbumData';
|
export { useAlbums, useAlbumDetail, useAlbumGallery } from './useAlbumData';
|
||||||
|
|
||||||
|
// 멤버 데이터
|
||||||
|
export { useMembers, useMemberDetail } from './useMemberData';
|
||||||
|
|
|
||||||
24
frontend-temp/src/hooks/useMemberData.js
Normal file
24
frontend-temp/src/hooks/useMemberData.js
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { memberApi } from '@/api';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 멤버 목록 조회 훅
|
||||||
|
*/
|
||||||
|
export function useMembers() {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['members'],
|
||||||
|
queryFn: memberApi.getMembers,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 멤버 상세 조회 훅
|
||||||
|
* @param {number} id - 멤버 ID
|
||||||
|
*/
|
||||||
|
export function useMemberDetail(id) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['member', id],
|
||||||
|
queryFn: () => memberApi.getMemberById(id),
|
||||||
|
enabled: !!id,
|
||||||
|
});
|
||||||
|
}
|
||||||
30
frontend-temp/src/pages/common/NotFound.jsx
Normal file
30
frontend-temp/src/pages/common/NotFound.jsx
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { Home } from 'lucide-react';
|
||||||
|
import { useIsMobile } from '@/hooks';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 404 페이지 (PC/Mobile 통합)
|
||||||
|
*/
|
||||||
|
function NotFound() {
|
||||||
|
const isMobile = useIsMobile();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center min-h-[60vh] p-4 text-center">
|
||||||
|
<h1 className={`font-bold text-primary mb-4 ${isMobile ? 'text-6xl' : 'text-9xl'}`}>
|
||||||
|
404
|
||||||
|
</h1>
|
||||||
|
<p className={`text-gray-600 mb-8 ${isMobile ? 'text-lg' : 'text-2xl'}`}>
|
||||||
|
페이지를 찾을 수 없습니다
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
to="/"
|
||||||
|
className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full hover:bg-primary-dark transition-colors"
|
||||||
|
>
|
||||||
|
<Home size={20} />
|
||||||
|
<span>홈으로 돌아가기</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NotFound;
|
||||||
1
frontend-temp/src/pages/common/index.js
Normal file
1
frontend-temp/src/pages/common/index.js
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as NotFound } from './NotFound';
|
||||||
333
frontend-temp/src/pages/home/Home.jsx
Normal file
333
frontend-temp/src/pages/home/Home.jsx
Normal file
|
|
@ -0,0 +1,333 @@
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Calendar, ArrowRight, Clock, Tag, Music } from 'lucide-react';
|
||||||
|
import { useIsMobile, useMembers, useAlbums, useUpcomingSchedules } from '@/hooks';
|
||||||
|
import { Loading } from '@/components';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 홈 페이지 (PC/Mobile 통합)
|
||||||
|
*/
|
||||||
|
function Home() {
|
||||||
|
const isMobile = useIsMobile();
|
||||||
|
|
||||||
|
// 멤버 데이터
|
||||||
|
const { data: members = [] } = useMembers();
|
||||||
|
|
||||||
|
// 앨범 데이터 (최신 4개)
|
||||||
|
const { data: allAlbums = [] } = useAlbums();
|
||||||
|
const albums = allAlbums.slice(0, 4);
|
||||||
|
|
||||||
|
// 다가오는 일정 (3개)
|
||||||
|
const { data: upcomingSchedules = [] } = useUpcomingSchedules(3);
|
||||||
|
|
||||||
|
// D+Day 계산
|
||||||
|
const debutDate = new Date('2018-01-24');
|
||||||
|
const today = new Date();
|
||||||
|
const dDay = Math.floor((today - debutDate) / (1000 * 60 * 60 * 24)) + 1;
|
||||||
|
|
||||||
|
// 모바일 레이아웃
|
||||||
|
if (isMobile) {
|
||||||
|
return (
|
||||||
|
<div className="pb-4">
|
||||||
|
{/* 히어로 */}
|
||||||
|
<div className="bg-gradient-to-br from-primary to-primary-dark text-white p-6">
|
||||||
|
<h1 className="text-3xl font-bold mb-1">fromis_9</h1>
|
||||||
|
<p className="text-lg opacity-80">프로미스나인</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 통계 */}
|
||||||
|
<div className="grid grid-cols-2 gap-3 p-4">
|
||||||
|
{[
|
||||||
|
{ value: '2018.01.24', label: '데뷔일' },
|
||||||
|
{ value: `D+${dDay.toLocaleString()}`, label: 'D+Day' },
|
||||||
|
].map((stat, i) => (
|
||||||
|
<div key={i} className="bg-primary/10 rounded-xl p-4 text-center">
|
||||||
|
<p className="text-lg font-bold text-primary">{stat.value}</p>
|
||||||
|
<p className="text-xs text-gray-500">{stat.label}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 멤버 미리보기 */}
|
||||||
|
<div className="px-4 mb-6">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<h2 className="text-lg font-bold">멤버</h2>
|
||||||
|
<Link to="/members" className="text-primary text-sm flex items-center gap-1">
|
||||||
|
전체보기 <ArrowRight size={14} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-3 overflow-x-auto pb-2">
|
||||||
|
{members.filter((m) => !m.is_former).map((member) => (
|
||||||
|
<div key={member.id} className="flex-shrink-0 w-20">
|
||||||
|
<div className="aspect-square rounded-full overflow-hidden mb-1">
|
||||||
|
<img src={member.image_url} alt={member.name} className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-center font-medium truncate">{member.name}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 앨범 미리보기 */}
|
||||||
|
<div className="px-4 mb-6">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<h2 className="text-lg font-bold">앨범</h2>
|
||||||
|
<Link to="/album" className="text-primary text-sm flex items-center gap-1">
|
||||||
|
전체보기 <ArrowRight size={14} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
{albums.slice(0, 2).map((album) => (
|
||||||
|
<Link key={album.id} to={`/album/${album.folder_name}`} className="block">
|
||||||
|
<div className="aspect-square rounded-xl overflow-hidden mb-2">
|
||||||
|
<img src={album.cover_thumb_url} alt={album.title} className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
<p className="text-sm font-medium truncate">{album.title}</p>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 일정 미리보기 */}
|
||||||
|
<div className="px-4">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<h2 className="text-lg font-bold">다가오는 일정</h2>
|
||||||
|
<Link to="/schedule" className="text-primary text-sm flex items-center gap-1">
|
||||||
|
전체보기 <ArrowRight size={14} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
{upcomingSchedules.length === 0 ? (
|
||||||
|
<div className="text-center py-8 text-gray-400">
|
||||||
|
<Calendar size={32} className="mx-auto mb-2 opacity-30" />
|
||||||
|
<p className="text-sm">예정된 일정이 없습니다</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-3">
|
||||||
|
{upcomingSchedules.map((schedule) => (
|
||||||
|
<div key={schedule.id} className="bg-white rounded-xl p-4 shadow-sm">
|
||||||
|
<p className="font-medium mb-1">{schedule.title}</p>
|
||||||
|
<p className="text-xs text-gray-500">
|
||||||
|
{new Date(schedule.date).getMonth() + 1}월 {new Date(schedule.date).getDate()}일
|
||||||
|
{schedule.time && ` · ${schedule.time.slice(0, 5)}`}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// PC 레이아웃
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{/* 히어로 섹션 */}
|
||||||
|
<section className="relative h-[600px] bg-gradient-to-br from-primary to-primary-dark overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-black/20" />
|
||||||
|
<div className="relative max-w-7xl mx-auto px-6 h-full flex items-center">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.8 }}
|
||||||
|
className="text-white"
|
||||||
|
>
|
||||||
|
<h1 className="text-6xl font-bold mb-4">fromis_9</h1>
|
||||||
|
<p className="text-2xl font-light mb-2">프로미스나인</p>
|
||||||
|
<p className="text-lg opacity-80 leading-relaxed">
|
||||||
|
인사드리겠습니다. 둘, 셋!
|
||||||
|
<br />
|
||||||
|
이제는 약속해 소중히 간직해,
|
||||||
|
<br />
|
||||||
|
당신의 아이돌로 성장하겠습니다!
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
<div className="absolute right-0 bottom-0 w-1/2 h-full opacity-10">
|
||||||
|
<div className="absolute right-10 top-20 w-64 h-64 rounded-full bg-white/30" />
|
||||||
|
<div className="absolute right-40 bottom-20 w-48 h-48 rounded-full bg-white/20" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* 그룹 통계 */}
|
||||||
|
<section className="py-16 bg-gray-50">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="grid grid-cols-4 gap-6">
|
||||||
|
{[
|
||||||
|
{ value: '2018.01.24', label: '데뷔일' },
|
||||||
|
{ value: `D+${dDay.toLocaleString()}`, label: 'D+Day' },
|
||||||
|
{ value: '5', label: '멤버 수' },
|
||||||
|
{ value: 'flover', label: '팬덤명' },
|
||||||
|
].map((stat, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: index * 0.1 }}
|
||||||
|
className="bg-gradient-to-br from-primary to-primary-dark rounded-2xl p-6 text-white text-center"
|
||||||
|
>
|
||||||
|
<p className="text-3xl font-bold mb-1">{stat.value}</p>
|
||||||
|
<p className="text-white/70 text-sm">{stat.label}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* 멤버 미리보기 */}
|
||||||
|
<section className="py-16 bg-gray-50">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="flex justify-between items-center mb-8">
|
||||||
|
<h2 className="text-3xl font-bold">멤버</h2>
|
||||||
|
<Link to="/members" className="text-primary hover:underline flex items-center gap-1">
|
||||||
|
전체보기 <ArrowRight size={16} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-5 gap-6">
|
||||||
|
{members.filter((m) => !m.is_former).map((member, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={member.id}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.3 + index * 0.1 }}
|
||||||
|
className="group relative rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300"
|
||||||
|
>
|
||||||
|
<div className="aspect-[3/4] overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={member.image_url}
|
||||||
|
alt={member.name}
|
||||||
|
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-60 group-hover:opacity-90 transition-opacity duration-300" />
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 p-5 text-white">
|
||||||
|
<h3 className="font-bold text-xl drop-shadow-lg">{member.name}</h3>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* 앨범 미리보기 */}
|
||||||
|
<section className="py-16 bg-gray-50">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="flex justify-between items-center mb-8">
|
||||||
|
<h2 className="text-3xl font-bold">앨범</h2>
|
||||||
|
<Link to="/album" className="text-primary hover:underline flex items-center gap-1">
|
||||||
|
전체보기 <ArrowRight size={16} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-4 gap-6">
|
||||||
|
{albums.map((album, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={album.id}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.3 + index * 0.1 }}
|
||||||
|
className="group cursor-pointer"
|
||||||
|
onClick={() => (window.location.href = `/album/${encodeURIComponent(album.title)}`)}
|
||||||
|
>
|
||||||
|
<div className="relative aspect-square rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300">
|
||||||
|
<img
|
||||||
|
src={album.cover_medium_url || album.cover_original_url}
|
||||||
|
alt={album.title}
|
||||||
|
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
||||||
|
<div className="text-center text-white">
|
||||||
|
<Music size={32} className="mx-auto mb-2" />
|
||||||
|
<p className="text-sm">{album.tracks?.length || 0}곡 수록</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-3">
|
||||||
|
<h3 className="font-bold text-lg truncate">{album.title}</h3>
|
||||||
|
<p className="text-gray-500 text-sm">{album.release_date?.slice(0, 4)}</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* 일정 미리보기 */}
|
||||||
|
<section className="py-16 bg-gray-50">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="flex justify-between items-center mb-8">
|
||||||
|
<h2 className="text-3xl font-bold">다가오는 일정</h2>
|
||||||
|
<Link to="/schedule" className="text-primary hover:underline flex items-center gap-1">
|
||||||
|
전체보기 <ArrowRight size={16} />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
{upcomingSchedules.length === 0 ? (
|
||||||
|
<div className="text-center py-12 text-gray-400">
|
||||||
|
<Calendar size={48} className="mx-auto mb-4 opacity-30" />
|
||||||
|
<p>예정된 일정이 없습니다</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{upcomingSchedules.map((schedule) => {
|
||||||
|
const scheduleDate = new Date(schedule.date);
|
||||||
|
const categoryColor = schedule.category_color || '#6366f1';
|
||||||
|
const memberList = schedule.member_names
|
||||||
|
? schedule.member_names.split(',')
|
||||||
|
: schedule.members?.map((m) => m.name) || [];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={schedule.id}
|
||||||
|
initial={{ opacity: 0, x: -30 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden cursor-pointer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="w-24 flex flex-col items-center justify-center text-white py-6"
|
||||||
|
style={{ backgroundColor: categoryColor }}
|
||||||
|
>
|
||||||
|
<span className="text-3xl font-bold">{scheduleDate.getDate()}</span>
|
||||||
|
<span className="text-sm font-medium opacity-80">
|
||||||
|
{['일', '월', '화', '수', '목', '금', '토'][scheduleDate.getDay()]}
|
||||||
|
</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-base text-gray-500">
|
||||||
|
{schedule.time && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Clock size={16} className="opacity-60" />
|
||||||
|
{schedule.time.slice(0, 5)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Tag size={16} className="opacity-60" />
|
||||||
|
{schedule.category_name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{memberList.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-1.5 mt-2">
|
||||||
|
{memberList.map((name, i) => (
|
||||||
|
<span
|
||||||
|
key={i}
|
||||||
|
className="px-2 py-0.5 bg-primary/10 text-primary text-sm font-medium rounded-full"
|
||||||
|
>
|
||||||
|
{name.trim()}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Home;
|
||||||
1
frontend-temp/src/pages/home/index.js
Normal file
1
frontend-temp/src/pages/home/index.js
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as Home } from './Home';
|
||||||
|
|
@ -3,3 +3,6 @@
|
||||||
*/
|
*/
|
||||||
export * from './schedule';
|
export * from './schedule';
|
||||||
export * from './album';
|
export * from './album';
|
||||||
|
export * from './home';
|
||||||
|
export * from './members';
|
||||||
|
export * from './common';
|
||||||
|
|
|
||||||
181
frontend-temp/src/pages/members/Members.jsx
Normal file
181
frontend-temp/src/pages/members/Members.jsx
Normal file
|
|
@ -0,0 +1,181 @@
|
||||||
|
import { motion } from 'framer-motion';
|
||||||
|
import { Instagram, Calendar } from 'lucide-react';
|
||||||
|
import { useIsMobile, useMembers } from '@/hooks';
|
||||||
|
import { Loading } from '@/components';
|
||||||
|
import { formatDate } from '@/utils';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 멤버 카드 컴포넌트 (PC)
|
||||||
|
*/
|
||||||
|
function MemberCard({ member, isFormer = false, delay = 0 }) {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay }}
|
||||||
|
className="group h-full"
|
||||||
|
>
|
||||||
|
<div className="relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 h-full flex flex-col">
|
||||||
|
{/* 이미지 */}
|
||||||
|
<div className="aspect-[3/4] bg-gray-100 overflow-hidden flex-shrink-0">
|
||||||
|
<img
|
||||||
|
src={member.image_url}
|
||||||
|
alt={member.name}
|
||||||
|
className={`w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 ${
|
||||||
|
isFormer ? 'grayscale group-hover:grayscale-0' : ''
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 정보 */}
|
||||||
|
<div className="p-6 flex-1 flex flex-col">
|
||||||
|
<h3 className={`text-xl font-bold mb-3 ${isFormer ? 'text-gray-500' : ''}`}>
|
||||||
|
{member.name}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className={`flex items-center gap-2 text-sm ${isFormer ? 'text-gray-400' : 'text-gray-500'} mb-2`}>
|
||||||
|
<Calendar size={14} />
|
||||||
|
<span>{formatDate(member.birth_date, 'YYYY.MM.DD')}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 인스타그램 링크 */}
|
||||||
|
{member.instagram && !isFormer && (
|
||||||
|
<a
|
||||||
|
href={member.instagram}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-pink-500 transition-colors mt-auto"
|
||||||
|
>
|
||||||
|
<Instagram size={16} />
|
||||||
|
<span>Instagram</span>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 호버 효과 - 컬러 바 */}
|
||||||
|
<div
|
||||||
|
className={`absolute bottom-0 left-0 right-0 h-1 ${
|
||||||
|
isFormer ? 'bg-gray-400' : 'bg-primary'
|
||||||
|
} transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 멤버 페이지 (PC/Mobile 통합)
|
||||||
|
*/
|
||||||
|
function Members() {
|
||||||
|
const isMobile = useIsMobile();
|
||||||
|
const { data: members = [], isLoading } = useMembers();
|
||||||
|
|
||||||
|
const currentMembers = members.filter((m) => !m.is_former);
|
||||||
|
const formerMembers = members.filter((m) => m.is_former);
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center min-h-[60vh]">
|
||||||
|
<Loading text="멤버 로딩 중..." />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 모바일 레이아웃
|
||||||
|
if (isMobile) {
|
||||||
|
return (
|
||||||
|
<div className="px-4 py-4">
|
||||||
|
{/* 현재 멤버 */}
|
||||||
|
<div className="grid grid-cols-2 gap-4 mb-8">
|
||||||
|
{currentMembers.map((member) => (
|
||||||
|
<div key={member.id} className="bg-white rounded-2xl overflow-hidden shadow-md">
|
||||||
|
<div className="aspect-[3/4] bg-gray-200">
|
||||||
|
<img src={member.image_url} alt={member.name} className="w-full h-full object-cover" />
|
||||||
|
</div>
|
||||||
|
<div className="p-3">
|
||||||
|
<p className="font-semibold">{member.name}</p>
|
||||||
|
<p className="text-xs text-gray-400">{formatDate(member.birth_date, 'YYYY.MM.DD')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 전 멤버 */}
|
||||||
|
{formerMembers.length > 0 && (
|
||||||
|
<>
|
||||||
|
<h2 className="text-lg font-bold text-gray-400 mb-4">전 멤버</h2>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{formerMembers.map((member) => (
|
||||||
|
<div key={member.id} className="bg-white rounded-2xl overflow-hidden shadow-md">
|
||||||
|
<div className="aspect-[3/4] bg-gray-200">
|
||||||
|
<img
|
||||||
|
src={member.image_url}
|
||||||
|
alt={member.name}
|
||||||
|
className="w-full h-full object-cover grayscale"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="p-3">
|
||||||
|
<p className="font-semibold text-gray-500">{member.name}</p>
|
||||||
|
<p className="text-xs text-gray-400">{formatDate(member.birth_date, 'YYYY.MM.DD')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// PC 레이아웃
|
||||||
|
return (
|
||||||
|
<div className="py-16">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
{/* 헤더 */}
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<motion.h1
|
||||||
|
initial={{ opacity: 0, y: -20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="text-4xl font-bold mb-4"
|
||||||
|
>
|
||||||
|
멤버
|
||||||
|
</motion.h1>
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
className="text-gray-500"
|
||||||
|
>
|
||||||
|
프로미스나인의 멤버를 소개합니다
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 현재 멤버 그리드 */}
|
||||||
|
<div className="grid grid-cols-5 gap-8">
|
||||||
|
{currentMembers.map((member, index) => (
|
||||||
|
<MemberCard key={member.id} member={member} delay={index * 0.1} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 전 멤버 섹션 */}
|
||||||
|
{formerMembers.length > 0 && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.5 }}
|
||||||
|
className="mt-16"
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl font-bold mb-8 text-gray-400">전 멤버</h2>
|
||||||
|
<div className="grid grid-cols-5 gap-8">
|
||||||
|
{formerMembers.map((member, index) => (
|
||||||
|
<MemberCard key={member.id} member={member} isFormer delay={0.6 + index * 0.1} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Members;
|
||||||
1
frontend-temp/src/pages/members/index.js
Normal file
1
frontend-temp/src/pages/members/index.js
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as Members } from './Members';
|
||||||
Loading…
Add table
Reference in a new issue