feat(members): 전 멤버 섹션 제거
- PC 멤버 페이지에서 전 멤버 섹션 제거 - 모바일 멤버 페이지에서 전 멤버 섹션 제거 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
9163ade56d
commit
45da9c6277
2 changed files with 1 additions and 80 deletions
|
|
@ -54,15 +54,11 @@ function MobileMembers() {
|
|||
}
|
||||
}, [allMembers.length]);
|
||||
|
||||
// 현재/전 멤버 분리
|
||||
// 현재 멤버만 표시
|
||||
const currentMembers = useMemo(
|
||||
() => allMembers.filter((m) => !m.is_former),
|
||||
[allMembers]
|
||||
);
|
||||
const formerMembers = useMemo(
|
||||
() => allMembers.filter((m) => m.is_former),
|
||||
[allMembers]
|
||||
);
|
||||
|
||||
// 나이 계산
|
||||
const calculateAge = (birthDate) => {
|
||||
|
|
@ -105,28 +101,6 @@ function MobileMembers() {
|
|||
))}
|
||||
</div>
|
||||
|
||||
{/* 전 멤버 섹션 */}
|
||||
{formerMembers.length > 0 && (
|
||||
<>
|
||||
<div className="flex items-center gap-3 my-6">
|
||||
<div className="flex-1 h-px bg-gray-300" />
|
||||
<span className="text-gray-400 text-sm font-medium">전 멤버</span>
|
||||
<div className="flex-1 h-px bg-gray-300" />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{formerMembers.map((member, index) => (
|
||||
<MemberCard
|
||||
key={member.id}
|
||||
member={member}
|
||||
index={index}
|
||||
onClick={() => setSelectedMember(member)}
|
||||
shouldAnimate={shouldAnimate}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 선택된 멤버 모달 */}
|
||||
<AnimatePresence>
|
||||
{selectedMember && (
|
||||
|
|
|
|||
|
|
@ -91,59 +91,6 @@ function Members() {
|
|||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 전 멤버 섹션 */}
|
||||
{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-16"
|
||||
>
|
||||
<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, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.6 + index * 0.1 }}
|
||||
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">
|
||||
{/* 이미지 - 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-3 text-gray-500">
|
||||
{member.name}
|
||||
</h3>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Cake size={14} />
|
||||
<span>
|
||||
{formatDate(member.birth_date, 'YYYY.MM.DD')}
|
||||
</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>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue