fix:Lucide 아이콘 호환성 수정 및 액션버튼 항상 표시
- Lucide 0.563.0 API 변경 대응 (icons 객체 → 개별 PascalCase export) - 아이콘 이름 변환: kebab-case → PascalCase, 구버전 호환 유지 - 리네임된 아이콘 별칭 처리 (check-circle→CircleCheck 등) - 액션버튼(결과보기/다운로드/삭제) opacity-0 제거하여 항상 표시 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -46,12 +46,22 @@
|
||||
};
|
||||
|
||||
// ─── Lucide icon helper ───
|
||||
const kebabToPascal = (s) => s.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join('');
|
||||
const iconAliases = {'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert'};
|
||||
const getIconDef = (name) => {
|
||||
if (iconAliases[name] && lucide[iconAliases[name]]) return lucide[iconAliases[name]];
|
||||
const p = kebabToPascal(name);
|
||||
if (lucide[p]) return lucide[p];
|
||||
if (lucide.icons && lucide.icons[name]) return lucide.icons[name];
|
||||
return null;
|
||||
};
|
||||
const Icon = ({ name, className = 'w-5 h-5', ...p }) => {
|
||||
const ref = useRef(null);
|
||||
useEffect(() => {
|
||||
if (ref.current && lucide.icons[name]) {
|
||||
const def = getIconDef(name);
|
||||
if (ref.current && def) {
|
||||
ref.current.innerHTML = '';
|
||||
const s = lucide.createElement(lucide.icons[name]);
|
||||
const s = lucide.createElement(def);
|
||||
s.setAttribute('class', className);
|
||||
ref.current.appendChild(s);
|
||||
}
|
||||
@@ -670,7 +680,7 @@ className={`w-5 h-5 ${item.status==='COMPLETED'?'text-emerald-600':item.status==
|
||||
</div>
|
||||
|
||||
{/* 액션 */}
|
||||
<div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<div className="flex items-center gap-1">
|
||||
{item.status === 'COMPLETED' && (
|
||||
<button onClick={()=>onView(item.id)}
|
||||
className="px-2.5 py-1 text-xs font-medium text-purple-700 bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors">
|
||||
|
||||
Reference in New Issue
Block a user