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

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

Browse source
This commit is contained in:
caadiq 2025-12-31 22:38:21 +09:00
parent 1cf49c7239
commit 2443d53ce2
1 changed files with 25 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -122,31 +122,24 @@ function Schedule() {
> >
<ChevronLeft size={24} /> <ChevronLeft size={24} />
</button> </button>
<button <div ref={pickerRef} className="relative">
onClick={() => setShowYearMonthPicker(!showYearMonthPicker)} <button
className="flex items-center gap-1 text-xl font-bold hover:text-primary transition-colors" onClick={() => setShowYearMonthPicker(!showYearMonthPicker)}
> className="flex items-center gap-1 text-xl font-bold hover:text-primary transition-colors"
<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"
> >
<span>{year}년 {month + 1}월</span>
<ChevronDown size={20} className={`transition-transform ${showYearMonthPicker ? 'rotate-180' : ''}`} />
</button>
{/* 년/월 선택 팝업 */}
<AnimatePresence>
{showYearMonthPicker && (
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -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"> <div className="mb-4 text-center">
<p className="text-sm font-medium text-gray-500 mb-3">년도</p> <p className="text-sm font-medium text-gray-500 mb-3">년도</p>
@ -188,6 +181,14 @@ function Schedule() {
</motion.div> </motion.div>
)} )}
</AnimatePresence> </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"> <div className="grid grid-cols-7 mb-4">