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 { 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';
function Schedule() {
@ -106,9 +106,10 @@ function Schedule() {
</button>
<button
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
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"
>
{/* 년도 선택 */}
<div className="mb-4">
<p className="text-sm font-medium text-gray-500 mb-2">년도</p>
<div className="mb-4 text-center">
<p className="text-sm font-medium text-gray-500 mb-3">년도</p>
<div className="grid grid-cols-4 gap-2">
{yearRange.map((y) => (
<button
@ -147,8 +148,8 @@ function Schedule() {
</div>
</div>
{/* 월 선택 */}
<div>
<p className="text-sm font-medium text-gray-500 mb-2">월</p>
<div className="text-center">
<p className="text-sm font-medium text-gray-500 mb-3">월</p>
<div className="grid grid-cols-4 gap-2">
{Array.from({ length: 12 }, (_, i) => i).map((m) => (
<button