🔧 년월 버튼 토글 동작 수정 및 JSX 구조 정리

This commit is contained in:
caadiq 2025-12-31 22:38:21 +09:00
parent 1cf49c7239
commit 2443d53ce2

View file

@ -122,6 +122,7 @@ function Schedule() {
>
<ChevronLeft size={24} />
</button>
<div ref={pickerRef} className="relative">
<button
onClick={() => setShowYearMonthPicker(!showYearMonthPicker)}
className="flex items-center gap-1 text-xl font-bold hover:text-primary transition-colors"
@ -129,23 +130,15 @@ function Schedule() {
<span>{year} {month + 1}</span>
<ChevronDown size={20} className={`transition-transform ${showYearMonthPicker ? 'rotate-180' : ''}`} />
</button>
<button
onClick={nextMonth}
className="p-2 hover:bg-gray-100 rounded-full transition-colors"
>
<ChevronRight size={24} />
</button>
</div>
{/* 년/월 선택 팝업 */}
<AnimatePresence>
{showYearMonthPicker && (
<motion.div
ref={pickerRef}
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"
className="absolute top-12 left-1/2 -translate-x-1/2 w-72 bg-white rounded-xl shadow-lg border border-gray-100 p-4 z-10"
>
{/* 년도 선택 */}
<div className="mb-4 text-center">
@ -188,6 +181,14 @@ function Schedule() {
</motion.div>
)}
</AnimatePresence>
</div>
<button
onClick={nextMonth}
className="p-2 hover:bg-gray-100 rounded-full transition-colors"
>
<ChevronRight size={24} />
</button>
</div>
{/* 요일 헤더 */}
<div className="grid grid-cols-7 mb-4">