refactor(concert): 세트리스트 회차 선택을 탭에서 드롭다운으로 변경

- 탭 UI → select 드롭다운 (회차가 많아도 깔끔)
- 드롭다운에 날짜 표시 (예: "1회차 (2026-04-01)")
- 회차 전환 시 애니메이션 제거
- framer-motion 의존성 제거

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
caadiq 2026-03-31 18:08:39 +09:00
parent 8ccf18e8b1
commit cdb94972a3

View file

@ -1,5 +1,4 @@
import { useState, useRef, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Plus, Trash2, Users, Search, Copy } from "lucide-react";
import ConfirmDialog from "@/components/pc/admin/common/ConfirmDialog";
@ -229,36 +228,26 @@ function SetlistSection({ rounds, setlists, setSetlists, members, selectedMember
)}
</div>
{/* 회차 (2개 이상일 때만) */}
{/* 회차 선택 드롭다운 (2개 이상일 때만) */}
{rounds.length > 1 && (
<div className="flex gap-1 mb-4 p-1 bg-gray-100 rounded-lg">
{rounds.map((round, index) => (
<button
key={round.id}
type="button"
onClick={() => setActiveRoundId(round.id)}
className={`flex-1 py-2 text-sm font-medium rounded-md transition-colors ${
activeRoundId === round.id
? "bg-white text-primary shadow-sm"
: "text-gray-500 hover:text-gray-700"
}`}
>
{index + 1}회차
</button>
))}
<div className="mb-4">
<select
value={activeRoundId}
onChange={(e) => setActiveRoundId(Number(e.target.value))}
className="px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
>
{rounds.map((round, index) => (
<option key={round.id} value={round.id}>
{index + 1}회차{round.date ? ` (${round.date})` : ''}
</option>
))}
</select>
</div>
)}
<div ref={containerRef} className="flex flex-col gap-4">
<AnimatePresence initial={false}>
{setlist.map((song, index) => (
<motion.div
key={song.id}
initial={{ opacity: 0, scale: 0.98, y: -8 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.98, y: -8 }}
transition={{ duration: 0.15, ease: "easeOut" }}
>
<div key={song.id}>
<div className="p-4 bg-gray-50 rounded-xl space-y-3">
{/* 헤더 */}
<div className="flex items-center justify-between">
@ -349,9 +338,8 @@ function SetlistSection({ rounds, setlists, setSetlists, members, selectedMember
</div>
</div>
</div>
</motion.div>
</div>
))}
</AnimatePresence>
</div>
<div className="flex gap-2 mt-4">