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

refactor(pc): 홈/멤버 페이지 UI 개선

Browse source 
- 홈: 퀵 링크 제거, 통계 섹션(데뷔일/D+Day/멤버수/팬덤명) 추가
- 홈: 모든 섹션 배경색 회색(bg-gray-50)으로 통일
- 멤버: 전 멤버 카드 UI를 현재 멤버와 동일하게 변경 (5열 그리드)
- 멤버: 불필요한 stats API 호출 제거
This commit is contained in:
caadiq 2026-01-07 10:30:09 +09:00
parent f958e2b5e2
commit 0750dded97
2 changed files with 74 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
frontend/src/pages/pc/Home.jsx
View file

@ -1,7 +1,7 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { Link } from 'react-router-dom'; 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() { function Home() {
const [members, setMembers] = useState([]); const [members, setMembers] = useState([]);
@ -64,34 +64,46 @@ function Home() {
</div> </div>
</section> </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="max-w-7xl mx-auto px-6">
<div className="grid grid-cols-3 gap-8"> <div className="grid grid-cols-4 gap-6">
<Link <motion.div
to="/members" initial={{ opacity: 0, y: 20 }}
className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300" 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" /> <p className="text-3xl font-bold mb-1">2018.01.24</p>
<h3 className="text-xl font-bold mb-2">멤버</h3> <p className="text-white/70 text-sm">데뷔일</p>
<p className="text-gray-500 group-hover:text-white/80">5명의 멤버를 만나보세요</p> </motion.div>
</Link> <motion.div
<Link initial={{ opacity: 0, y: 20 }}
to="/album" animate={{ opacity: 1, y: 0 }}
className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300" 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" /> <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>
<h3 className="text-xl font-bold mb-2">앨범</h3> <p className="text-white/70 text-sm">D+Day</p>
<p className="text-gray-500 group-hover:text-white/80">앨범과 음악을 확인하세요</p> </motion.div>
</Link> <motion.div
<Link initial={{ opacity: 0, y: 20 }}
to="/schedule" animate={{ opacity: 1, y: 0 }}
className="group p-8 bg-gray-50 rounded-2xl hover:bg-primary hover:text-white transition-all duration-300" 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" /> <p className="text-3xl font-bold mb-1">5</p>
<h3 className="text-xl font-bold mb-2">일정</h3> <p className="text-white/70 text-sm">멤버 수</p>
<p className="text-gray-500 group-hover:text-white/80">다가오는 일정을 확인하세요</p> </motion.div>
</Link> <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>
</div> </div>
</section> </section>
@ -132,7 +144,7 @@ function Home() {
</section> </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="max-w-7xl mx-auto px-6">
<div className="flex justify-between items-center mb-8"> <div className="flex justify-between items-center mb-8">
<h2 className="text-3xl font-bold">다가오는 일정</h2> <h2 className="text-3xl font-bold">다가오는 일정</h2>

81
frontend/src/pages/pc/Members.jsx
View file

@ -4,17 +4,13 @@ import { Instagram, Calendar } from 'lucide-react';
function Members() { function Members() {
const [members, setMembers] = useState([]); const [members, setMembers] = useState([]);
const [stats, setStats] = useState({ memberCount: 0, albumCount: 0, debutYear: 2018, fandomName: 'flover' });
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
useEffect(() => { useEffect(() => {
Promise.all([ fetch('/api/members')
fetch('/api/members').then(res => res.json()), .then(res => res.json())
fetch('/api/stats').then(res => res.json()) .then(data => {
]) setMembers(data);
.then(([membersData, statsData]) => {
setMembers(membersData);
setStats(statsData);
setLoading(false); setLoading(false);
}) })
.catch(error => { .catch(error => {
@ -111,66 +107,55 @@ function Members() {
))} ))}
</div> </div>
{/* 탈퇴 멤버 섹션 - 콤팩트한 가로 리스트 */} {/* 전 멤버 섹션 - 현재 멤버와 동일한 카드 UI */}
{members.filter(m => m.is_former).length > 0 && ( {members.filter(m => m.is_former).length > 0 && (
<motion.div <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.5 }} transition={{ delay: 0.5 }}
className="mt-12" className="mt-16"
> >
<h2 className="text-lg font-bold mb-4 text-gray-400">전 멤버</h2> <h2 className="text-2xl font-bold mb-8 text-gray-400">전 멤버</h2>
<div className="flex gap-4"> <div className="grid grid-cols-5 gap-8">
{members.filter(m => m.is_former).map((member, index) => ( {members.filter(m => m.is_former).map((member, index) => (
<motion.div <motion.div
key={member.id} key={member.id}
initial={{ opacity: 0, x: -10 }} initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.6 + index * 0.05 }} transition={{ delay: 0.6 + index * 0.1 }}
className="group flex items-center gap-3 bg-gray-100 rounded-full pr-4 hover:bg-gray-200 transition-colors" 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="w-12 h-12 rounded-full bg-gray-200 overflow-hidden flex-shrink-0"> {/* 이미지 - grayscale */}
<div className="aspect-[3/4] bg-gray-100 overflow-hidden flex-shrink-0">
<img <img
src={member.image_url || '/placeholder-member.jpg'} src={member.image_url}
alt={member.name} alt={member.name}
className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-300" className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500"
/> />
</div> </div>
{/* 이름 */}
<p className="font-medium text-gray-600 text-sm">{member.name}</p> {/* 정보 */}
<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>
</motion.div> </motion.div>
))} ))}
</div> </div>
</motion.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>
</div> </div>
); );