Compare commits
No commits in common. "27878816b111748297cb3a62381b90275b13d171" and "1ae01fb2d76d6d9627c3494a766c009b8cbd8075" have entirely different histories.
27878816b1
...
1ae01fb2d7
8 changed files with 128 additions and 281 deletions
13
frontend/package-lock.json
generated
13
frontend/package-lock.json
generated
|
|
@ -14,8 +14,7 @@
|
|||
"react-device-detect": "^2.2.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-photo-album": "^3.4.0",
|
||||
"react-router-dom": "^6.22.3",
|
||||
"react-window": "^2.2.3"
|
||||
"react-router-dom": "^6.22.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
|
|
@ -2311,16 +2310,6 @@
|
|||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-window": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/react-window/-/react-window-2.2.3.tgz",
|
||||
"integrity": "sha512-gTRqQYC8ojbiXyd9duYFiSn2TJw0ROXCgYjenOvNKITWzK0m0eCvkUsEUM08xvydkMh7ncp+LE0uS3DeNGZxnQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/read-cache": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -15,8 +15,7 @@
|
|||
"react-device-detect": "^2.2.3",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-photo-album": "^3.4.0",
|
||||
"react-router-dom": "^6.22.3",
|
||||
"react-window": "^2.2.3"
|
||||
"react-router-dom": "^6.22.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
|
|
|
|||
|
|
@ -1,70 +0,0 @@
|
|||
import { useState, useRef } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
/**
|
||||
* 커스텀 툴팁 컴포넌트
|
||||
* 마우스 커서를 따라다니는 방식
|
||||
* @param {React.ReactNode} children - 툴팁을 표시할 요소
|
||||
* @param {string} text - 툴팁에 표시할 텍스트 (content prop과 호환)
|
||||
* @param {string} content - 툴팁에 표시할 텍스트 (text prop과 호환)
|
||||
*/
|
||||
const Tooltip = ({ children, text, content, className = "" }) => {
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const [position, setPosition] = useState({ bottom: 0, left: 0 });
|
||||
const triggerRef = useRef(null);
|
||||
|
||||
// text 또는 content prop 사용
|
||||
const tooltipText = text || content;
|
||||
|
||||
const handleMouseEnter = (e) => {
|
||||
// 마우스 커서 위치를 기준으로 툴팁 위치 설정 (커서 위로)
|
||||
setPosition({
|
||||
bottom: window.innerHeight - e.clientY + 10,
|
||||
left: e.clientX
|
||||
});
|
||||
setIsVisible(true);
|
||||
};
|
||||
|
||||
const handleMouseMove = (e) => {
|
||||
// 마우스 이동 시 툴팁 위치 업데이트
|
||||
setPosition({
|
||||
bottom: window.innerHeight - e.clientY + 10,
|
||||
left: e.clientX
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
ref={triggerRef}
|
||||
className={`inline-flex items-center ${className}`}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={() => setIsVisible(false)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
{isVisible && tooltipText && ReactDOM.createPortal(
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 5, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 5, scale: 0.95 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
style={{
|
||||
bottom: position.bottom,
|
||||
left: position.left,
|
||||
}}
|
||||
className="fixed z-[9999] -translate-x-1/2 px-2.5 py-1.5 bg-gray-800 text-white text-xs font-medium rounded-lg shadow-xl pointer-events-none whitespace-nowrap"
|
||||
>
|
||||
{tooltipText}
|
||||
</motion.div>
|
||||
</AnimatePresence>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tooltip;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Calendar, Music2, Clock, X, ChevronLeft, ChevronRight, Download, MoreVertical, FileText } from 'lucide-react';
|
||||
import { Calendar, Music2, Clock, X, ChevronLeft, ChevronRight, Download } from 'lucide-react';
|
||||
|
||||
function AlbumDetail() {
|
||||
const { name } = useParams();
|
||||
|
|
@ -11,8 +11,6 @@ function AlbumDetail() {
|
|||
const [lightbox, setLightbox] = useState({ open: false, images: [], index: 0 });
|
||||
const [slideDirection, setSlideDirection] = useState(0);
|
||||
const [imageLoaded, setImageLoaded] = useState(false);
|
||||
const [showDescriptionModal, setShowDescriptionModal] = useState(false);
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
|
||||
// 라이트박스 네비게이션 함수
|
||||
const goToPrev = useCallback(() => {
|
||||
|
|
@ -204,7 +202,7 @@ function AlbumDetail() {
|
|||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="w-80 h-80 flex-shrink-0 rounded-2xl overflow-hidden shadow-lg"
|
||||
className="w-80 h-80 flex-shrink-0 rounded-2xl overflow-hidden shadow-2xl"
|
||||
>
|
||||
<img
|
||||
src={album.cover_url}
|
||||
|
|
@ -221,50 +219,9 @@ function AlbumDetail() {
|
|||
className="flex-1 flex flex-col"
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="inline-block w-fit px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full">
|
||||
<span className="inline-block w-fit px-3 py-1 bg-primary/10 text-primary text-sm font-medium rounded-full mb-3">
|
||||
{album.album_type}
|
||||
</span>
|
||||
{/* 점3개 메뉴 - 소개글이 있을 때만 */}
|
||||
{album.description && (
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowMenu(!showMenu)}
|
||||
className="p-2 hover:bg-gray-100 rounded-full transition-colors relative z-20"
|
||||
>
|
||||
<MoreVertical size={20} className="text-gray-500" />
|
||||
</button>
|
||||
<AnimatePresence>
|
||||
{showMenu && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 z-10"
|
||||
onClick={() => setShowMenu(false)}
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95, y: -5 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: -5 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className="absolute right-0 top-full mt-1 bg-white rounded-xl shadow-lg border border-gray-100 py-1 z-20 min-w-[140px]"
|
||||
>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowDescriptionModal(true);
|
||||
setShowMenu(false);
|
||||
}}
|
||||
className="w-full flex items-center gap-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<FileText size={16} />
|
||||
앨범 소개
|
||||
</button>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<h1 className="text-4xl font-bold mb-3">{album.title}</h1>
|
||||
|
||||
<div className="flex items-center gap-6 text-gray-500 mb-3">
|
||||
|
|
@ -311,11 +268,33 @@ function AlbumDetail() {
|
|||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* 수록곡 리스트 */}
|
||||
{/* 2열 그리드: 소개글 + 트랙 리스트 */}
|
||||
<div className="grid grid-cols-3 gap-8">
|
||||
{/* 소개글 */}
|
||||
{album.description && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2, duration: 0.4 }}
|
||||
className="col-span-1"
|
||||
>
|
||||
<h2 className="text-xl font-bold mb-4">앨범 소개</h2>
|
||||
<div className="bg-white rounded-2xl shadow-lg overflow-hidden">
|
||||
<div className="max-h-[460px] overflow-y-auto p-6">
|
||||
<p className="text-gray-600 leading-relaxed text-sm whitespace-pre-line text-justify break-all">
|
||||
{album.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* 트랙 리스트 */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3, duration: 0.4 }}
|
||||
className={album.description ? "col-span-2" : "col-span-3"}
|
||||
>
|
||||
<h2 className="text-xl font-bold mb-4">수록곡</h2>
|
||||
<div className="bg-white rounded-2xl shadow-lg overflow-hidden">
|
||||
|
|
@ -353,6 +332,7 @@ function AlbumDetail() {
|
|||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* 컨셉 포토 섹션 */}
|
||||
{album.conceptPhotos && Object.keys(album.conceptPhotos).length > 0 && (
|
||||
|
|
@ -389,7 +369,6 @@ function AlbumDetail() {
|
|||
<img
|
||||
src={photo.medium_url}
|
||||
alt={`컨셉 포토 ${idx + 1}`}
|
||||
loading="lazy"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -504,44 +483,6 @@ function AlbumDetail() {
|
|||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* 앨범 소개 다이얼로그 */}
|
||||
<AnimatePresence>
|
||||
{showDescriptionModal && album?.description && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4"
|
||||
onClick={() => setShowDescriptionModal(false)}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
className="bg-white rounded-2xl shadow-2xl max-w-xl w-full max-h-[80vh] overflow-hidden"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between p-5 border-b border-gray-100">
|
||||
<h3 className="text-lg font-bold">앨범 소개</h3>
|
||||
<button
|
||||
onClick={() => setShowDescriptionModal(false)}
|
||||
className="p-1.5 hover:bg-gray-100 rounded-full transition-colors"
|
||||
>
|
||||
<X size={20} className="text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
{/* 내용 */}
|
||||
<div className="p-6 overflow-y-auto max-h-[60vh]">
|
||||
<p className="text-gray-600 leading-relaxed whitespace-pre-line text-justify">
|
||||
{album.description}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -317,28 +317,16 @@ function AlbumGallery() {
|
|||
animate={{ x: 0 }}
|
||||
transition={{ duration: 0.25, ease: 'easeOut' }}
|
||||
/>
|
||||
{/* 컨셉 정보 + 멤버 - 하나라도 있으면 표시 */}
|
||||
{imageLoaded && (
|
||||
(() => {
|
||||
const title = photos[lightbox.index]?.title;
|
||||
const hasValidTitle = title && title.trim() && title !== 'Default';
|
||||
const members = photos[lightbox.index]?.members;
|
||||
const hasMembers = members && String(members).trim();
|
||||
|
||||
if (!hasValidTitle && !hasMembers) return null;
|
||||
|
||||
return (
|
||||
{/* 컨셉 정보 - 정보가 있을 때만 표시 */}
|
||||
{imageLoaded && photos[lightbox.index]?.title && (
|
||||
<div className="mt-6 flex flex-col items-center gap-2">
|
||||
{/* 컨셉명 - 있고 유효할 때만 */}
|
||||
{hasValidTitle && (
|
||||
<span className="px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-white font-medium text-base">
|
||||
{title}
|
||||
{photos[lightbox.index]?.title}
|
||||
</span>
|
||||
)}
|
||||
{/* 멤버 - 있으면 항상 표시 */}
|
||||
{hasMembers && (
|
||||
{/* 멤버가 있고 빈 문자열이 아닐 때만 표시, 쉼표로 분리해서 개별 태그 */}
|
||||
{photos[lightbox.index]?.members && String(photos[lightbox.index]?.members).trim() && (
|
||||
<div className="flex items-center gap-2">
|
||||
{String(members).split(',').map((member, idx) => (
|
||||
{String(photos[lightbox.index]?.members).split(',').map((member, idx) => (
|
||||
<span key={idx} className="px-3 py-1.5 bg-primary/80 rounded-full text-white text-sm">
|
||||
{member.trim()}
|
||||
</span>
|
||||
|
|
@ -346,8 +334,6 @@ function AlbumGallery() {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -123,7 +123,6 @@ function Discography() {
|
|||
<img
|
||||
src={album.cover_url}
|
||||
alt={album.title}
|
||||
loading="lazy"
|
||||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 will-change-transform"
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useNavigate, Link, useParams } from 'react-router-dom';
|
||||
import { motion, AnimatePresence, Reorder } from 'framer-motion';
|
||||
import {
|
||||
|
|
@ -371,12 +371,19 @@ function AdminAlbumPhotos() {
|
|||
|
||||
// 컨셉 포토일 때만 검증
|
||||
if (photoType === 'concept') {
|
||||
// 개인/유닛인데 멤버 선택 안 한 경우
|
||||
// 컨셉명 검증 (각 파일별로)
|
||||
const missingConcept = pendingFiles.some(f => !f.conceptName.trim());
|
||||
if (missingConcept) {
|
||||
setToast({ message: '모든 사진의 컨셉명을 입력해주세요.', type: 'warning' });
|
||||
return;
|
||||
}
|
||||
|
||||
// 솔로/유닛인데 멤버 선택 안 한 경우
|
||||
const missingMembers = pendingFiles.some(f =>
|
||||
(f.groupType === 'solo' || f.groupType === 'unit') && f.members.length === 0
|
||||
);
|
||||
if (missingMembers) {
|
||||
setToast({ message: '개인/유닛 사진에는 멤버를 선택해주세요.', type: 'warning' });
|
||||
setToast({ message: '솔로/유닛 사진에는 멤버를 선택해주세요.', type: 'warning' });
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
|
@ -962,21 +969,21 @@ function AdminAlbumPhotos() {
|
|||
}
|
||||
}}
|
||||
className="w-10 h-8 bg-primary/10 text-primary rounded-lg text-center text-sm font-bold border-0 focus:outline-none focus:ring-2 focus:ring-primary [appearance:textfield]"
|
||||
title="순서를 직접 입력할 수 있습니다"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 썸네일 (180px로 확대) */}
|
||||
{/* 썸네일 (작게 축소하여 스크롤 성능 개선) */}
|
||||
<img
|
||||
src={file.preview}
|
||||
alt={file.filename}
|
||||
draggable="false"
|
||||
loading="lazy"
|
||||
className="w-[180px] h-[180px] rounded-lg object-cover cursor-pointer hover:opacity-80 transition-opacity flex-shrink-0 select-none"
|
||||
className="w-24 h-24 rounded-lg object-cover cursor-pointer hover:opacity-80 transition-opacity flex-shrink-0 select-none"
|
||||
onClick={() => setPreviewPhoto(file)}
|
||||
/>
|
||||
|
||||
{/* 메타 정보 - 고정 높이 */}
|
||||
<div className="flex-1 space-y-3 h-[200px] overflow-hidden">
|
||||
{/* 메타 정보 */}
|
||||
<div className="flex-1 space-y-3">
|
||||
{/* 파일명 */}
|
||||
<p className="text-base font-medium text-gray-900 truncate">{file.filename}</p>
|
||||
|
||||
|
|
@ -989,7 +996,7 @@ function AdminAlbumPhotos() {
|
|||
<div className="flex gap-1.5">
|
||||
{[
|
||||
{ value: 'group', icon: Users, label: '단체' },
|
||||
{ value: 'solo', icon: User, label: '개인' },
|
||||
{ value: 'solo', icon: User, label: '솔로' },
|
||||
{ value: 'unit', icon: Users2, label: '유닛' },
|
||||
].map(({ value, icon: Icon, label }) => (
|
||||
<button
|
||||
|
|
@ -1032,7 +1039,9 @@ function AdminAlbumPhotos() {
|
|||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{file.groupType === 'solo' && (
|
||||
<span className="text-xs text-gray-400 ml-2">(한 명만 선택)</span>
|
||||
)}
|
||||
</div>
|
||||
{/* 전 멤버 (다음 줄) */}
|
||||
{file.groupType !== 'group' && members.filter(m => m.is_former).length > 0 && (
|
||||
|
|
@ -1115,7 +1124,7 @@ function AdminAlbumPhotos() {
|
|||
<div className="flex gap-1">
|
||||
{[
|
||||
{ value: 'group', icon: Users, label: '단체' },
|
||||
{ value: 'solo', icon: User, label: '개인' },
|
||||
{ value: 'solo', icon: User, label: '솔로' },
|
||||
{ value: 'unit', icon: Users2, label: '유닛' },
|
||||
].map(({ value, icon: Icon, label }) => (
|
||||
<button
|
||||
|
|
@ -1327,7 +1336,7 @@ function AdminAlbumPhotos() {
|
|||
key={photo.id}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.2, delay: index < 20 ? index * 0.02 : 0 }}
|
||||
transition={{ duration: 0.2, delay: index * 0.02 }}
|
||||
className={`relative group aspect-square rounded-lg overflow-hidden cursor-pointer border-2 transition-all duration-200 ${
|
||||
selectedPhotos.includes(photo.id)
|
||||
? 'border-primary ring-2 ring-primary/30 scale-[0.98]'
|
||||
|
|
@ -1344,7 +1353,6 @@ function AdminAlbumPhotos() {
|
|||
<img
|
||||
src={photo.thumb_url || photo.medium_url}
|
||||
alt={`사진 ${photo.sort_order}`}
|
||||
loading="lazy"
|
||||
className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105"
|
||||
/>
|
||||
{/* 호버 시 반투명 오버레이 */}
|
||||
|
|
@ -1397,7 +1405,7 @@ function AdminAlbumPhotos() {
|
|||
key={teaser.id}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.2, delay: index < 20 ? index * 0.02 : 0 }}
|
||||
transition={{ duration: 0.2, delay: index * 0.02 }}
|
||||
className={`relative group aspect-square rounded-lg overflow-hidden cursor-pointer border-2 transition-all duration-200 ${
|
||||
selectedPhotos.includes(`teaser-${teaser.id}`)
|
||||
? 'border-primary ring-2 ring-primary/30 scale-[0.98]'
|
||||
|
|
@ -1415,7 +1423,6 @@ function AdminAlbumPhotos() {
|
|||
<img
|
||||
src={teaser.thumb_url || teaser.medium_url}
|
||||
alt={`티저 ${teaser.sort_order}`}
|
||||
loading="lazy"
|
||||
className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105"
|
||||
/>
|
||||
{/* 호버 시 반투명 오버레이 */}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import {
|
|||
Home, ChevronRight, LogOut, Calendar, AlertTriangle, X
|
||||
} from 'lucide-react';
|
||||
import Toast from '../../../components/Toast';
|
||||
import Tooltip from '../../../components/Tooltip';
|
||||
|
||||
function AdminAlbums() {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -288,30 +287,27 @@ function AdminAlbums() {
|
|||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<Tooltip text="사진 관리" position="top">
|
||||
<button
|
||||
onClick={() => navigate(`/admin/albums/${album.id}/photos`)}
|
||||
className="p-2 text-gray-400 hover:text-purple-500 hover:bg-purple-50 rounded-lg transition-colors"
|
||||
title="사진 관리"
|
||||
>
|
||||
<Image size={18} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip text="수정" position="top">
|
||||
<button
|
||||
onClick={() => navigate(`/admin/albums/${album.id}/edit`)}
|
||||
className="p-2 text-gray-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-colors"
|
||||
title="수정"
|
||||
>
|
||||
<Edit2 size={18} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip text="삭제" position="top">
|
||||
<button
|
||||
onClick={() => setDeleteDialog({ show: true, album })}
|
||||
className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
|
||||
title="삭제"
|
||||
>
|
||||
<Trash2 size={18} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</td>
|
||||
</motion.tr>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue