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:31:26 +09:00
parent 9604fecd9e
commit d6466a6903
1 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import { useState } from 'react'; import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
import { Clock, MapPin, Users, ChevronLeft, ChevronRight } from 'lucide-react'; import { Clock, MapPin, Users, ChevronLeft, ChevronRight, ChevronDown } from 'lucide-react';
import { schedules } from '../../data/dummy'; import { schedules } from '../../data/dummy';
function Schedule() { function Schedule() {
@ -106,9 +106,10 @@ function Schedule() {
</button> </button>
<button <button
onClick={() => setShowYearMonthPicker(!showYearMonthPicker)} onClick={() => setShowYearMonthPicker(!showYearMonthPicker)}
className="text-xl font-bold hover:text-primary transition-colors" className="flex items-center gap-1 text-xl font-bold hover:text-primary transition-colors"
> >
{year}년 {month + 1}월 <span>{year}년 {month + 1}월</span>
<ChevronDown size={20} className={`transition-transform ${showYearMonthPicker ? 'rotate-180' : ''}`} />
</button> </button>
<button <button
onClick={nextMonth} onClick={nextMonth}
@ -128,8 +129,8 @@ function Schedule() {
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-20 left-8 right-8 bg-white rounded-xl shadow-lg border border-gray-100 p-4 z-10"
> >
{/* 년도 선택 */} {/* 년도 선택 */}
<div className="mb-4"> <div className="mb-4 text-center">
<p className="text-sm font-medium text-gray-500 mb-2">년도</p> <p className="text-sm font-medium text-gray-500 mb-3">년도</p>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-4 gap-2">
{yearRange.map((y) => ( {yearRange.map((y) => (
<button <button
@ -147,8 +148,8 @@ function Schedule() {
</div> </div>
</div> </div>
{/* 월 선택 */} {/* 월 선택 */}
<div> <div className="text-center">
<p className="text-sm font-medium text-gray-500 mb-2">월</p> <p className="text-sm font-medium text-gray-500 mb-3">월</p>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-4 gap-2">
{Array.from({ length: 12 }, (_, i) => i).map((m) => ( {Array.from({ length: 12 }, (_, i) => i).map((m) => (
<button <button