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:
김보곤
2026-02-07 14:03:47 +09:00
parent e8f07bad63
commit 6eb60fa22d

View File

@@ -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">