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:
parent
8ccf18e8b1
commit
cdb94972a3
1 changed files with 15 additions and 27 deletions
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue