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

🔧 달력 UI 개선: 크기 확대, 년월 선택 팝업, 전체보기 버튼 항상 표시

Browse source
This commit is contained in:
caadiq 2025-12-31 22:28:47 +09:00
parent 66e54ed640
commit 9604fecd9e
1 changed files with 98 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
frontend/src/pages/pc/Schedule.jsx
View file

@ -1,11 +1,12 @@
import { useState } from 'react'; import { useState } from 'react';
import { motion } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { Clock, MapPin, Users, ChevronLeft, ChevronRight } from 'lucide-react'; import { Clock, MapPin, Users, ChevronLeft, ChevronRight } from 'lucide-react';
import { schedules } from '../../data/dummy'; import { schedules } from '../../data/dummy';
function Schedule() { function Schedule() {
const [currentDate, setCurrentDate] = useState(new Date()); const [currentDate, setCurrentDate] = useState(new Date());
const [selectedDate, setSelectedDate] = useState(null); const [selectedDate, setSelectedDate] = useState(null);
const [showYearMonthPicker, setShowYearMonthPicker] = useState(false);
// 달력 관련 함수 // 달력 관련 함수
const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate(); const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
@ -17,7 +18,6 @@ function Schedule() {
const firstDay = getFirstDayOfMonth(year, month); const firstDay = getFirstDayOfMonth(year, month);
const days = ['일', '월', '화', '수', '목', '금', '토']; const days = ['일', '월', '화', '수', '목', '금', '토'];
const monthNames = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
// 스케줄이 있는 날짜 목록 // 스케줄이 있는 날짜 목록
const scheduleDates = schedules.map(s => s.date); const scheduleDates = schedules.map(s => s.date);
@ -29,17 +29,22 @@ function Schedule() {
const prevMonth = () => { const prevMonth = () => {
setCurrentDate(new Date(year, month - 1, 1)); setCurrentDate(new Date(year, month - 1, 1));
setSelectedDate(null);
}; };
const nextMonth = () => { const nextMonth = () => {
setCurrentDate(new Date(year, month + 1, 1)); setCurrentDate(new Date(year, month + 1, 1));
setSelectedDate(null);
}; };
const selectDate = (day) => { const selectDate = (day) => {
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
if (hasSchedule(day)) {
setSelectedDate(selectedDate === dateStr ? null : dateStr); setSelectedDate(selectedDate === dateStr ? null : dateStr);
}
};
const selectYearMonth = (newYear, newMonth) => {
setCurrentDate(new Date(newYear, newMonth, 1));
setShowYearMonthPicker(false);
}; };
// 필터링된 스케줄 // 필터링된 스케줄
@ -57,6 +62,10 @@ function Schedule() {
}; };
}; };
// 년도 범위 (현재 년도 기준 ±5년)
const currentYear = new Date().getFullYear();
const yearRange = Array.from({ length: 11 }, (_, i) => currentYear - 5 + i);
return ( return (
<div className="py-16"> <div className="py-16">
<div className="max-w-7xl mx-auto px-6"> <div className="max-w-7xl mx-auto px-6">
@ -80,34 +89,88 @@ function Schedule() {
</div> </div>
<div className="flex gap-8"> <div className="flex gap-8">
{/* 달력 */} {/* 달력 - 더 큰 사이즈 */}
<motion.div <motion.div
initial={{ opacity: 0, x: -20 }} initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }} animate={{ opacity: 1, x: 0 }}
className="w-80 flex-shrink-0" className="w-[400px] flex-shrink-0"
> >
<div className="bg-white rounded-2xl shadow-sm p-6"> <div className="bg-white rounded-2xl shadow-sm p-8 relative">
{/* 달력 헤더 */} {/* 달력 헤더 */}
<div className="flex items-center justify-between mb-6"> <div className="flex items-center justify-between mb-8">
<button <button
onClick={prevMonth} onClick={prevMonth}
className="p-2 hover:bg-gray-100 rounded-full transition-colors" className="p-2 hover:bg-gray-100 rounded-full transition-colors"
> >
<ChevronLeft size={20} /> <ChevronLeft size={24} />
</button>
<button
onClick={() => setShowYearMonthPicker(!showYearMonthPicker)}
className="text-xl font-bold hover:text-primary transition-colors"
>
{year}년 {month + 1}월
</button> </button>
<h3 className="text-lg font-bold">
{year}년 {monthNames[month]}
</h3>
<button <button
onClick={nextMonth} onClick={nextMonth}
className="p-2 hover:bg-gray-100 rounded-full transition-colors" className="p-2 hover:bg-gray-100 rounded-full transition-colors"
> >
<ChevronRight size={20} /> <ChevronRight size={24} />
</button> </button>
</div> </div>
{/* 년/월 선택 팝업 */}
<AnimatePresence>
{showYearMonthPicker && (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
className="absolute top-20 left-8 right-8 bg-white rounded-xl shadow-lg border border-gray-100 p-4 z-10"
>
{/* 년도 선택 */}
<div className="mb-4">
<p className="text-sm font-medium text-gray-500 mb-2">년도</p>
<div className="grid grid-cols-4 gap-2">
{yearRange.map((y) => (
<button
key={y}
onClick={() => selectYearMonth(y, month)}
className={`py-2 text-sm rounded-lg transition-colors ${
y === year
? 'bg-primary text-white'
: 'hover:bg-gray-100'
}`}
>
{y}
</button>
))}
</div>
</div>
{/* 월 선택 */}
<div>
<p className="text-sm font-medium text-gray-500 mb-2">월</p>
<div className="grid grid-cols-4 gap-2">
{Array.from({ length: 12 }, (_, i) => i).map((m) => (
<button
key={m}
onClick={() => selectYearMonth(year, m)}
className={`py-2 text-sm rounded-lg transition-colors ${
m === month
? 'bg-primary text-white'
: 'hover:bg-gray-100'
}`}
>
{m + 1}월
</button>
))}
</div>
</div>
</motion.div>
)}
</AnimatePresence>
{/* 요일 헤더 */} {/* 요일 헤더 */}
<div className="grid grid-cols-7 mb-2"> <div className="grid grid-cols-7 mb-4">
{days.map((day, i) => ( {days.map((day, i) => (
<div <div
key={day} key={day}
@ -139,39 +202,43 @@ function Schedule() {
return ( return (
<button <button
key={day} key={day}
onClick={() => hasEvent && selectDate(day)} onClick={() => selectDate(day)}
className={`aspect-square flex flex-col items-center justify-center rounded-lg text-sm transition-all disabled={!hasEvent}
${isSelected ? 'bg-primary text-white' : ''} className={`aspect-square flex flex-col items-center justify-center rounded-xl text-base font-medium transition-all
${isSelected ? 'bg-primary text-white shadow-md' : ''}
${isToday && !isSelected ? 'ring-2 ring-primary' : ''} ${isToday && !isSelected ? 'ring-2 ring-primary' : ''}
${hasEvent && !isSelected ? 'hover:bg-primary/10 cursor-pointer' : ''} ${hasEvent && !isSelected ? 'hover:bg-primary/10 cursor-pointer' : ''}
${!hasEvent ? 'cursor-default' : ''} ${!hasEvent ? 'cursor-default opacity-60' : ''}
${dayOfWeek === 0 && !isSelected ? 'text-red-500' : ''} ${dayOfWeek === 0 && !isSelected ? 'text-red-500' : ''}
${dayOfWeek === 6 && !isSelected ? 'text-blue-500' : ''} ${dayOfWeek === 6 && !isSelected ? 'text-blue-500' : ''}
`} `}
> >
<span>{day}</span> <span>{day}</span>
{hasEvent && ( {hasEvent && (
<span className={`w-1.5 h-1.5 rounded-full mt-0.5 ${isSelected ? 'bg-white' : 'bg-primary'}`} /> <span className={`w-1.5 h-1.5 rounded-full mt-1 ${isSelected ? 'bg-white' : 'bg-primary'}`} />
)} )}
</button> </button>
); );
})} })}
</div> </div>
{/* 범례 */} {/* 범례 및 전체보기 */}
<div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-center gap-4 text-xs text-gray-500"> <div className="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between text-sm">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1 text-gray-500">
<span className="w-2 h-2 rounded-full bg-primary" /> <span className="w-2 h-2 rounded-full bg-primary" />
<span>일정 있음</span> <span>일정 있음</span>
</div> </div>
{selectedDate && (
<button <button
onClick={() => setSelectedDate(null)} onClick={() => setSelectedDate(null)}
className="text-primary hover:underline" className={`px-4 py-1.5 rounded-lg transition-colors ${
selectedDate
? 'bg-primary text-white hover:bg-primary-dark'
: 'bg-gray-100 text-gray-400 cursor-default'
}`}
disabled={!selectedDate}
> >
전체 보기 전체 보기
</button> </button>
)}
</div> </div>
</div> </div>
</motion.div> </motion.div>