🔧 달력 UI 개선: 크기 확대, 년월 선택 팝업, 전체보기 버튼 항상 표시
This commit is contained in:
parent
66e54ed640
commit
9604fecd9e
1 changed files with 98 additions and 31 deletions
|
|
@ -1,11 +1,12 @@
|
|||
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 { schedules } from '../../data/dummy';
|
||||
|
||||
function Schedule() {
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
const [selectedDate, setSelectedDate] = useState(null);
|
||||
const [showYearMonthPicker, setShowYearMonthPicker] = useState(false);
|
||||
|
||||
// 달력 관련 함수
|
||||
const getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
|
||||
|
|
@ -17,7 +18,6 @@ function Schedule() {
|
|||
const firstDay = getFirstDayOfMonth(year, month);
|
||||
|
||||
const days = ['일', '월', '화', '수', '목', '금', '토'];
|
||||
const monthNames = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];
|
||||
|
||||
// 스케줄이 있는 날짜 목록
|
||||
const scheduleDates = schedules.map(s => s.date);
|
||||
|
|
@ -29,17 +29,22 @@ function Schedule() {
|
|||
|
||||
const prevMonth = () => {
|
||||
setCurrentDate(new Date(year, month - 1, 1));
|
||||
setSelectedDate(null);
|
||||
};
|
||||
|
||||
const nextMonth = () => {
|
||||
setCurrentDate(new Date(year, month + 1, 1));
|
||||
setSelectedDate(null);
|
||||
};
|
||||
|
||||
const selectDate = (day) => {
|
||||
const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||||
setSelectedDate(selectedDate === dateStr ? null : dateStr);
|
||||
if (hasSchedule(day)) {
|
||||
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 (
|
||||
<div className="py-16">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
|
|
@ -80,34 +89,88 @@ function Schedule() {
|
|||
</div>
|
||||
|
||||
<div className="flex gap-8">
|
||||
{/* 달력 */}
|
||||
{/* 달력 - 더 큰 사이즈 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
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
|
||||
onClick={prevMonth}
|
||||
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>
|
||||
<h3 className="text-lg font-bold">
|
||||
{year}년 {monthNames[month]}
|
||||
</h3>
|
||||
<button
|
||||
onClick={nextMonth}
|
||||
className="p-2 hover:bg-gray-100 rounded-full transition-colors"
|
||||
>
|
||||
<ChevronRight size={20} />
|
||||
<ChevronRight size={24} />
|
||||
</button>
|
||||
</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) => (
|
||||
<div
|
||||
key={day}
|
||||
|
|
@ -139,39 +202,43 @@ function Schedule() {
|
|||
return (
|
||||
<button
|
||||
key={day}
|
||||
onClick={() => hasEvent && selectDate(day)}
|
||||
className={`aspect-square flex flex-col items-center justify-center rounded-lg text-sm transition-all
|
||||
${isSelected ? 'bg-primary text-white' : ''}
|
||||
onClick={() => selectDate(day)}
|
||||
disabled={!hasEvent}
|
||||
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' : ''}
|
||||
${hasEvent && !isSelected ? 'hover:bg-primary/10 cursor-pointer' : ''}
|
||||
${!hasEvent ? 'cursor-default' : ''}
|
||||
${!hasEvent ? 'cursor-default opacity-60' : ''}
|
||||
${dayOfWeek === 0 && !isSelected ? 'text-red-500' : ''}
|
||||
${dayOfWeek === 6 && !isSelected ? 'text-blue-500' : ''}
|
||||
`}
|
||||
>
|
||||
<span>{day}</span>
|
||||
{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>
|
||||
);
|
||||
})}
|
||||
</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="flex items-center gap-1">
|
||||
{/* 범례 및 전체보기 */}
|
||||
<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 text-gray-500">
|
||||
<span className="w-2 h-2 rounded-full bg-primary" />
|
||||
<span>일정 있음</span>
|
||||
</div>
|
||||
{selectedDate && (
|
||||
<button
|
||||
onClick={() => setSelectedDate(null)}
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
전체 보기
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setSelectedDate(null)}
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue