refactor(pc): 홈/멤버 페이지 UI 개선
- 홈: 퀵 링크 제거, 통계 섹션(데뷔일/D+Day/멤버수/팬덤명) 추가 - 홈: 모든 섹션 배경색 회색(bg-gray-50)으로 통일 - 멤버: 전 멤버 카드 UI를 현재 멤버와 동일하게 변경 (5열 그리드) - 멤버: 불필요한 stats API 호출 제거
This commit is contained in:
parent
f958e2b5e2
commit
0750dded97
2 changed files with 74 additions and 77 deletions
|
|
@ -1,7 +1,7 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Calendar, Users, Disc3, ArrowRight, Clock, Link2, Tag } from 'lucide-react';
|
||||
import { Calendar, ArrowRight, Clock, Link2, Tag } from 'lucide-react';
|
||||
|
||||
function Home() {
|
||||
const [members, setMembers] = useState([]);
|
||||
|
|
@ -64,34 +64,46 @@ function Home() {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{/* 퀵 링크 섹션 */}
|
||||
<section className="py-16 bg-white">
|
||||
{/* 그룹 통계 섹션 */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="grid grid-cols-3 gap-8">
|
||||
<Link
|
||||
to="/members"
|
||||
className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300"
|
||||
<div className="grid grid-cols-4 gap-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="bg-gradient-to-br from-primary to-primary-dark rounded-2xl p-6 text-white text-center"
|
||||
>
|
||||
<Users size={40} className="mb-4 text-primary group-hover:text-white" />
|
||||
<h3 className="text-xl font-bold mb-2">멤버</h3>
|
||||
<p className="text-gray-500 group-hover:text-white/80">5명의 멤버를 만나보세요</p>
|
||||
</Link>
|
||||
<Link
|
||||
to="/album"
|
||||
className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300"
|
||||
<p className="text-3xl font-bold mb-1">2018.01.24</p>
|
||||
<p className="text-white/70 text-sm">데뷔일</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="bg-gradient-to-br from-primary to-primary-dark rounded-2xl p-6 text-white text-center"
|
||||
>
|
||||
<Disc3 size={40} className="mb-4 text-primary group-hover:text-white" />
|
||||
<h3 className="text-xl font-bold mb-2">앨범</h3>
|
||||
<p className="text-gray-500 group-hover:text-white/80">앨범과 음악을 확인하세요</p>
|
||||
</Link>
|
||||
<Link
|
||||
to="/schedule"
|
||||
className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300"
|
||||
<p className="text-3xl font-bold mb-1">D+{(Math.floor((new Date() - new Date('2018-01-24')) / (1000 * 60 * 60 * 24)) + 1).toLocaleString()}</p>
|
||||
<p className="text-white/70 text-sm">D+Day</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="bg-gradient-to-br from-primary to-primary-dark rounded-2xl p-6 text-white text-center"
|
||||
>
|
||||
<Calendar size={40} className="mb-4 text-primary group-hover:text-white" />
|
||||
<h3 className="text-xl font-bold mb-2">일정</h3>
|
||||
<p className="text-gray-500 group-hover:text-white/80">다가오는 일정을 확인하세요</p>
|
||||
</Link>
|
||||
<p className="text-3xl font-bold mb-1">5</p>
|
||||
<p className="text-white/70 text-sm">멤버 수</p>
|
||||
</motion.div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
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">flover</p>
|
||||
<p className="text-white/70 text-sm">팬덤명</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -132,7 +144,7 @@ function Home() {
|
|||
</section>
|
||||
|
||||
{/* 일정 미리보기 */}
|
||||
<section className="py-16 bg-white">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -4,17 +4,13 @@ import { Instagram, Calendar } from 'lucide-react';
|
|||
|
||||
function Members() {
|
||||
const [members, setMembers] = useState([]);
|
||||
const [stats, setStats] = useState({ memberCount: 0, albumCount: 0, debutYear: 2018, fandomName: 'flover' });
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
fetch('/api/members').then(res => res.json()),
|
||||
fetch('/api/stats').then(res => res.json())
|
||||
])
|
||||
.then(([membersData, statsData]) => {
|
||||
setMembers(membersData);
|
||||
setStats(statsData);
|
||||
fetch('/api/members')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
setMembers(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
|
|
@ -111,66 +107,55 @@ function Members() {
|
|||
))}
|
||||
</div>
|
||||
|
||||
{/* 탈퇴 멤버 섹션 - 콤팩트한 가로 리스트 */}
|
||||
{/* 전 멤버 섹션 - 현재 멤버와 동일한 카드 UI */}
|
||||
{members.filter(m => m.is_former).length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="mt-12"
|
||||
className="mt-16"
|
||||
>
|
||||
<h2 className="text-lg font-bold mb-4 text-gray-400">전 멤버</h2>
|
||||
<div className="flex gap-4">
|
||||
<h2 className="text-2xl font-bold mb-8 text-gray-400">전 멤버</h2>
|
||||
<div className="grid grid-cols-5 gap-8">
|
||||
{members.filter(m => m.is_former).map((member, index) => (
|
||||
<motion.div
|
||||
key={member.id}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.6 + index * 0.05 }}
|
||||
className="group flex items-center gap-3 bg-gray-100 rounded-full pr-4 hover:bg-gray-200 transition-colors"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.6 + index * 0.1 }}
|
||||
className="group h-full"
|
||||
>
|
||||
{/* 작은 원형 이미지 */}
|
||||
<div className="w-12 h-12 rounded-full bg-gray-200 overflow-hidden flex-shrink-0">
|
||||
<img
|
||||
src={member.image_url || '/placeholder-member.jpg'}
|
||||
alt={member.name}
|
||||
className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300"
|
||||
/>
|
||||
<div className="relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 h-full flex flex-col">
|
||||
{/* 이미지 - grayscale */}
|
||||
<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 grayscale group-hover:grayscale-0 transition-all duration-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 정보 */}
|
||||
<div className="p-6 flex-1 flex flex-col">
|
||||
<h3 className="text-xl font-bold mb-1 text-gray-500">{member.name}</h3>
|
||||
<p className="text-gray-400 text-sm font-medium mb-3 min-h-[20px]">{member.position || '\u00A0'}</p>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Calendar size={14} />
|
||||
<span>{formatDate(member.birth_date)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 호버 효과 - 컬러 바 */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-1 bg-gray-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
|
||||
</div>
|
||||
{/* 이름 */}
|
||||
<p className="font-medium text-gray-600 text-sm">{member.name}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 그룹 정보 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.6 }}
|
||||
className="mt-16 bg-gradient-to-r from-primary to-primary-dark rounded-3xl p-10 text-white"
|
||||
>
|
||||
<div className="grid grid-cols-4 gap-8 text-center">
|
||||
<div>
|
||||
<p className="text-4xl font-bold mb-2">2018.01.24</p>
|
||||
<p className="text-white/70">데뷔일</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-4xl font-bold mb-2">D+{(Math.floor((new Date() - new Date('2018-01-24')) / (1000 * 60 * 60 * 24)) + 1).toLocaleString()}</p>
|
||||
<p className="text-white/70">D+Day</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-4xl font-bold mb-2">{members.filter(m => !m.is_former).length}</p>
|
||||
<p className="text-white/70">멤버 수</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-4xl font-bold mb-2">{stats.fandomName}</p>
|
||||
<p className="text-white/70">팬덤명</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue