웹: useEffect를 useQuery로 리팩토링 (PC/모바일 공개 페이지)
This commit is contained in:
parent
a89139f056
commit
990d360520
6 changed files with 347 additions and 321 deletions
|
|
@ -1,22 +1,18 @@
|
|||
import { motion } from 'framer-motion';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { getAlbums } from '../../../api/public/albums';
|
||||
|
||||
// 모바일 앨범 목록 페이지
|
||||
function MobileAlbum() {
|
||||
const navigate = useNavigate();
|
||||
const [albums, setAlbums] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
getAlbums()
|
||||
.then(data => {
|
||||
setAlbums(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(console.error);
|
||||
}, []);
|
||||
// useQuery로 앨범 데이터 로드
|
||||
const { data: albums = [], isLoading: loading } = useQuery({
|
||||
queryKey: ['albums'],
|
||||
queryFn: getAlbums,
|
||||
});
|
||||
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { motion } from 'framer-motion';
|
||||
import { ChevronRight, Clock, Tag } from 'lucide-react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { getTodayKST } from '../../../utils/date';
|
||||
import { getMembers } from '../../../api/public/members';
|
||||
|
|
@ -10,27 +10,27 @@ import { getUpcomingSchedules } from '../../../api/public/schedules';
|
|||
// 모바일 홈 페이지
|
||||
function MobileHome() {
|
||||
const navigate = useNavigate();
|
||||
const [members, setMembers] = useState([]);
|
||||
const [albums, setAlbums] = useState([]);
|
||||
const [schedules, setSchedules] = useState([]);
|
||||
|
||||
// 데이터 로드
|
||||
useEffect(() => {
|
||||
// 멤버 로드
|
||||
getMembers()
|
||||
.then(data => setMembers(data.filter(m => !m.is_former)))
|
||||
.catch(console.error);
|
||||
// useQuery로 멤버 데이터 로드 (활동 중인 멤버만)
|
||||
const { data: members = [] } = useQuery({
|
||||
queryKey: ['members'],
|
||||
queryFn: getMembers,
|
||||
select: (data) => data.filter(m => !m.is_former),
|
||||
});
|
||||
|
||||
// 앨범 로드 (최신 2개)
|
||||
getAlbums()
|
||||
.then(data => setAlbums(data.slice(0, 2)))
|
||||
.catch(console.error);
|
||||
// useQuery로 앨범 로드 (최신 2개)
|
||||
const { data: albums = [] } = useQuery({
|
||||
queryKey: ['albums'],
|
||||
queryFn: getAlbums,
|
||||
select: (data) => data.slice(0, 2),
|
||||
});
|
||||
|
||||
// useQuery로 다가오는 일정 로드
|
||||
const { data: schedules = [] } = useQuery({
|
||||
queryKey: ['upcomingSchedules', 3],
|
||||
queryFn: () => getUpcomingSchedules(3),
|
||||
});
|
||||
|
||||
// 다가오는 일정 로드
|
||||
getUpcomingSchedules(3)
|
||||
.then(data => setSchedules(data))
|
||||
.catch(console.error);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,23 @@
|
|||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useMemo } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Instagram, Calendar, X } from 'lucide-react';
|
||||
import { getMembers } from '../../../api/public/members';
|
||||
|
||||
// 모바일 멤버 페이지
|
||||
function MobileMembers() {
|
||||
const [members, setMembers] = useState([]);
|
||||
const [formerMembers, setFormerMembers] = useState([]);
|
||||
const [selectedMember, setSelectedMember] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
getMembers()
|
||||
.then(data => {
|
||||
setMembers(data.filter(m => !m.is_former));
|
||||
setFormerMembers(data.filter(m => m.is_former));
|
||||
})
|
||||
.catch(console.error);
|
||||
}, []);
|
||||
// useQuery로 멤버 데이터 로드
|
||||
const { data: allMembers = [] } = useQuery({
|
||||
queryKey: ['members'],
|
||||
queryFn: getMembers,
|
||||
});
|
||||
|
||||
// useMemo로 현재/전 멤버 분리
|
||||
const members = useMemo(() => allMembers.filter(m => !m.is_former), [allMembers]);
|
||||
const formerMembers = useMemo(() => allMembers.filter(m => m.is_former), [allMembers]);
|
||||
|
||||
|
||||
// 나이 계산
|
||||
const calculateAge = (birthDate) => {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Calendar, Music } from 'lucide-react';
|
||||
|
|
@ -7,20 +7,13 @@ import { formatDate } from '../../../utils/date';
|
|||
|
||||
function Album() {
|
||||
const navigate = useNavigate();
|
||||
const [albums, setAlbums] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// useQuery로 앨범 데이터 로드
|
||||
const { data: albums = [], isLoading: loading } = useQuery({
|
||||
queryKey: ['albums'],
|
||||
queryFn: getAlbums,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
getAlbums()
|
||||
.then(data => {
|
||||
setAlbums(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('앨범 데이터 로드 오류:', error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
// 타이틀곡 찾기
|
||||
const getTitleTrack = (tracks) => {
|
||||
|
|
|
|||
|
|
@ -1,260 +1,304 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Calendar, ArrowRight, Clock, Link2, Tag } from 'lucide-react';
|
||||
import { getTodayKST } from '../../../utils/date';
|
||||
import { getMembers } from '../../../api/public/members';
|
||||
import { getUpcomingSchedules } from '../../../api/public/schedules';
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Calendar, ArrowRight, Clock, Link2, Tag } from "lucide-react";
|
||||
import { getTodayKST } from "../../../utils/date";
|
||||
import { getMembers } from "../../../api/public/members";
|
||||
import { getUpcomingSchedules } from "../../../api/public/schedules";
|
||||
|
||||
function Home() {
|
||||
const [members, setMembers] = useState([]);
|
||||
const [upcomingSchedules, setUpcomingSchedules] = useState([]);
|
||||
// useQuery로 멤버 데이터 로드
|
||||
const { data: members = [] } = useQuery({
|
||||
queryKey: ["members"],
|
||||
queryFn: getMembers,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
// 멤버 데이터 로드
|
||||
getMembers()
|
||||
.then(data => setMembers(data))
|
||||
.catch(error => console.error('멤버 데이터 로드 오류:', error));
|
||||
|
||||
// 다가오는 일정 로드 (오늘 이후 3개)
|
||||
getUpcomingSchedules(3)
|
||||
.then(data => setUpcomingSchedules(data))
|
||||
.catch(error => console.error('일정 데이터 로드 오류:', error));
|
||||
}, []);
|
||||
// useQuery로 다가오는 일정 로드 (오늘 이후 3개)
|
||||
const { data: upcomingSchedules = [] } = useQuery({
|
||||
queryKey: ["upcomingSchedules", 3],
|
||||
queryFn: () => getUpcomingSchedules(3),
|
||||
});
|
||||
|
||||
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 mb-8 leading-relaxed">
|
||||
인사드리겠습니다. 둘, 셋!<br />
|
||||
이제는 약속해 소중히 간직해,<br />
|
||||
당신의 아이돌로 성장하겠습니다!
|
||||
</p>
|
||||
<Link
|
||||
to="/members"
|
||||
className="inline-flex items-center gap-2 bg-white text-primary px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
멤버 보기
|
||||
<ArrowRight size={18} />
|
||||
</Link>
|
||||
</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">
|
||||
<motion.div
|
||||
className="grid grid-cols-4 gap-6"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.1 }}
|
||||
variants={{
|
||||
hidden: { opacity: 1 },
|
||||
visible: { opacity: 1, transition: { staggerChildren: 0.1 } }
|
||||
}}
|
||||
>
|
||||
{[
|
||||
{ value: "2018.01.24", label: "데뷔일" },
|
||||
{ value: `D+${(Math.floor((new Date() - new Date('2018-01-24')) / (1000 * 60 * 60 * 24)) + 1).toLocaleString()}`, label: "D+Day" },
|
||||
{ value: "5", label: "멤버 수" },
|
||||
{ value: "flover", label: "팬덤명" }
|
||||
].map((stat, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: "easeOut" } }
|
||||
}}
|
||||
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>
|
||||
))}
|
||||
</motion.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, duration: 0.5, ease: "easeOut" }}
|
||||
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="/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>
|
||||
) : (
|
||||
<motion.div
|
||||
className="space-y-4"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.1 }}
|
||||
variants={{
|
||||
hidden: { opacity: 1 },
|
||||
visible: { opacity: 1, transition: { staggerChildren: 0.1 } }
|
||||
}}
|
||||
>
|
||||
{upcomingSchedules.map((schedule) => {
|
||||
const scheduleDate = new Date(schedule.date);
|
||||
const today = new Date();
|
||||
const currentYear = today.getFullYear();
|
||||
const currentMonth = today.getMonth();
|
||||
|
||||
const scheduleYear = scheduleDate.getFullYear();
|
||||
const scheduleMonth = scheduleDate.getMonth();
|
||||
const isCurrentYear = scheduleYear === currentYear;
|
||||
const isCurrentMonth = isCurrentYear && scheduleMonth === currentMonth;
|
||||
|
||||
const day = scheduleDate.getDate();
|
||||
const weekdays = ['일', '월', '화', '수', '목', '금', '토'];
|
||||
const weekday = weekdays[scheduleDate.getDay()];
|
||||
|
||||
// 멤버 처리
|
||||
const memberList = schedule.member_names ? schedule.member_names.split(',') : [];
|
||||
const displayMembers = memberList.length >= 5 ? ['프로미스나인'] : memberList;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={schedule.id}
|
||||
variants={{
|
||||
hidden: { opacity: 0, x: -30 },
|
||||
visible: { opacity: 1, x: 0, transition: { duration: 0.4, ease: "easeOut" } }
|
||||
}}
|
||||
className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"
|
||||
>
|
||||
{/* 날짜 영역 - primary 색상 고정 */}
|
||||
<div className="w-20 flex flex-col items-center justify-center text-white py-5 bg-primary">
|
||||
{/* 현재 년도가 아니면 년.월 표시 */}
|
||||
{!isCurrentYear && (
|
||||
<span className="text-xs font-medium opacity-70">
|
||||
{scheduleYear}.{scheduleMonth + 1}
|
||||
</span>
|
||||
)}
|
||||
{/* 현재 달이 아니면 월 표시 (현재 년도일 때) */}
|
||||
{isCurrentYear && !isCurrentMonth && (
|
||||
<span className="text-xs font-medium opacity-70">
|
||||
{scheduleMonth + 1}월
|
||||
</span>
|
||||
)}
|
||||
<span className="text-3xl font-bold">{day}</span>
|
||||
<span className="text-sm font-medium opacity-80">{weekday}</span>
|
||||
</div>
|
||||
|
||||
{/* 내용 영역 */}
|
||||
<div className="flex-1 p-5 flex flex-col justify-center">
|
||||
<h3 className="font-bold text-lg text-gray-900 mb-2">{schedule.title}</h3>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 text-sm text-gray-500">
|
||||
{schedule.time && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock size={14} className="text-primary opacity-60" />
|
||||
<span>{schedule.time.slice(0, 5)}</span>
|
||||
</div>
|
||||
)}
|
||||
{schedule.category_name && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Tag size={14} className="text-primary opacity-60" />
|
||||
<span>{schedule.category_name}</span>
|
||||
</div>
|
||||
)}
|
||||
{schedule.source_name && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Link2 size={14} className="text-primary opacity-60" />
|
||||
<span>{schedule.source_name}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 멤버 태그 */}
|
||||
{displayMembers.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-3">
|
||||
{displayMembers.map((name, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full"
|
||||
>
|
||||
{name.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
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 mb-8 leading-relaxed">
|
||||
인사드리겠습니다. 둘, 셋!
|
||||
<br />
|
||||
이제는 약속해 소중히 간직해,
|
||||
<br />
|
||||
당신의 아이돌로 성장하겠습니다!
|
||||
</p>
|
||||
<Link
|
||||
to="/members"
|
||||
className="inline-flex items-center gap-2 bg-white text-primary px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
멤버 보기
|
||||
<ArrowRight size={18} />
|
||||
</Link>
|
||||
</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">
|
||||
<motion.div
|
||||
className="grid grid-cols-4 gap-6"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.1 }}
|
||||
variants={{
|
||||
hidden: { opacity: 1 },
|
||||
visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
|
||||
}}
|
||||
>
|
||||
{[
|
||||
{ value: "2018.01.24", label: "데뷔일" },
|
||||
{
|
||||
value: `D+${(
|
||||
Math.floor(
|
||||
(new Date() - new Date("2018-01-24")) /
|
||||
(1000 * 60 * 60 * 24)
|
||||
) + 1
|
||||
).toLocaleString()}`,
|
||||
label: "D+Day",
|
||||
},
|
||||
{ value: "5", label: "멤버 수" },
|
||||
{ value: "flover", label: "팬덤명" },
|
||||
].map((stat, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
variants={{
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.4, ease: "easeOut" },
|
||||
},
|
||||
}}
|
||||
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>
|
||||
))}
|
||||
</motion.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,
|
||||
duration: 0.5,
|
||||
ease: "easeOut",
|
||||
}}
|
||||
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="/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>
|
||||
) : (
|
||||
<motion.div
|
||||
className="space-y-4"
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, amount: 0.1 }}
|
||||
variants={{
|
||||
hidden: { opacity: 1 },
|
||||
visible: { opacity: 1, transition: { staggerChildren: 0.1 } },
|
||||
}}
|
||||
>
|
||||
{upcomingSchedules.map((schedule) => {
|
||||
const scheduleDate = new Date(schedule.date);
|
||||
const today = new Date();
|
||||
const currentYear = today.getFullYear();
|
||||
const currentMonth = today.getMonth();
|
||||
|
||||
const scheduleYear = scheduleDate.getFullYear();
|
||||
const scheduleMonth = scheduleDate.getMonth();
|
||||
const isCurrentYear = scheduleYear === currentYear;
|
||||
const isCurrentMonth =
|
||||
isCurrentYear && scheduleMonth === currentMonth;
|
||||
|
||||
const day = scheduleDate.getDate();
|
||||
const weekdays = ["일", "월", "화", "수", "목", "금", "토"];
|
||||
const weekday = weekdays[scheduleDate.getDay()];
|
||||
|
||||
// 멤버 처리
|
||||
const memberList = schedule.member_names
|
||||
? schedule.member_names.split(",")
|
||||
: [];
|
||||
const displayMembers =
|
||||
memberList.length >= 5 ? ["프로미스나인"] : memberList;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={schedule.id}
|
||||
variants={{
|
||||
hidden: { opacity: 0, x: -30 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
transition: { duration: 0.4, ease: "easeOut" },
|
||||
},
|
||||
}}
|
||||
className="flex items-stretch bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow overflow-hidden"
|
||||
>
|
||||
{/* 날짜 영역 - primary 색상 고정 */}
|
||||
<div className="w-20 flex flex-col items-center justify-center text-white py-5 bg-primary">
|
||||
{/* 현재 년도가 아니면 년.월 표시 */}
|
||||
{!isCurrentYear && (
|
||||
<span className="text-xs font-medium opacity-70">
|
||||
{scheduleYear}.{scheduleMonth + 1}
|
||||
</span>
|
||||
)}
|
||||
{/* 현재 달이 아니면 월 표시 (현재 년도일 때) */}
|
||||
{isCurrentYear && !isCurrentMonth && (
|
||||
<span className="text-xs font-medium opacity-70">
|
||||
{scheduleMonth + 1}월
|
||||
</span>
|
||||
)}
|
||||
<span className="text-3xl font-bold">{day}</span>
|
||||
<span className="text-sm font-medium opacity-80">
|
||||
{weekday}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 내용 영역 */}
|
||||
<div className="flex-1 p-5 flex flex-col justify-center">
|
||||
<h3 className="font-bold text-lg text-gray-900 mb-2">
|
||||
{schedule.title}
|
||||
</h3>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 text-sm text-gray-500">
|
||||
{schedule.time && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock
|
||||
size={14}
|
||||
className="text-primary opacity-60"
|
||||
/>
|
||||
<span>{schedule.time.slice(0, 5)}</span>
|
||||
</div>
|
||||
)}
|
||||
{schedule.category_name && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Tag
|
||||
size={14}
|
||||
className="text-primary opacity-60"
|
||||
/>
|
||||
<span>{schedule.category_name}</span>
|
||||
</div>
|
||||
)}
|
||||
{schedule.source_name && (
|
||||
<div className="flex items-center gap-1">
|
||||
<Link2
|
||||
size={14}
|
||||
className="text-primary opacity-60"
|
||||
/>
|
||||
<span>{schedule.source_name}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 멤버 태그 */}
|
||||
{displayMembers.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-3">
|
||||
{displayMembers.map((name, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="px-2.5 py-1 bg-primary/10 text-primary text-xs font-medium rounded-full"
|
||||
>
|
||||
{name.trim()}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,16 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Instagram, Calendar } from 'lucide-react';
|
||||
import { getMembers } from '../../../api/public/members';
|
||||
import { formatDate } from '../../../utils/date';
|
||||
|
||||
function Members() {
|
||||
const [members, setMembers] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
// useQuery로 멤버 데이터 로드
|
||||
const { data: members = [], isLoading: loading } = useQuery({
|
||||
queryKey: ['members'],
|
||||
queryFn: getMembers,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
getMembers()
|
||||
.then(data => {
|
||||
setMembers(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('데이터 로드 오류:', error);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue