From 6ba4f4efdfa3d99740617eb3f4d1dbf9978534ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Mon, 23 Feb 2026 17:54:52 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20[account-transactions]=20createIcon?=
 =?UTF-8?q?=20React.createElement=20=EB=B0=A9=EC=8B=9D=EC=9C=BC=EB=A1=9C?=
 =?UTF-8?q?=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useRef/useEffect DOM 조작 → React 네이티브 SVG 렌더링
- arrow-up-circle/arrow-down-circle 아이콘 별칭 추가
---
 .../finance/account-transactions.blade.php    | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/resources/views/finance/account-transactions.blade.php b/resources/views/finance/account-transactions.blade.php
index 85b46ded..feabc615 100644
--- a/resources/views/finance/account-transactions.blade.php
+++ b/resources/views/finance/account-transactions.blade.php
@@ -20,18 +20,21 @@
 <script type="text/babel">
 const { useState, useRef, useEffect } = React;
 
-const createIcon = (name) => ({ className = "w-5 h-5", ...props }) => {
-    const ref = useRef(null);
-    useEffect(() => {
-        const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
-        if (ref.current && _def) {
-            ref.current.innerHTML = '';
-            const svg = lucide.createElement(_def);
-            svg.setAttribute('class', className);
-            ref.current.appendChild(svg);
-        }
-    }, [className]);
-    return <span ref={ref} className="inline-flex items-center" {...props} />;
+const createIcon = (name) => {
+    const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck','arrow-up-circle':'CircleArrowUp','arrow-down-circle':'CircleArrowDown'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
+    const _c = s => s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+    return ({ className = "w-5 h-5", ...props }) => {
+        if (!_def) return null;
+        const [, attrs, children = []] = _def;
+        const sp = { className };
+        Object.entries(attrs).forEach(([k, v]) => { sp[_c(k)] = v; });
+        Object.assign(sp, props);
+        return React.createElement("svg", sp, ...children.map(([tag, ca], i) => {
+            const cp = { key: i };
+            if (ca) Object.entries(ca).forEach(([k, v]) => { cp[_c(k)] = v; });
+            return React.createElement(tag, cp);
+        }));
+    };
 };
 
 const ArrowUpDown = createIcon('arrow-up-down');