refactor(insta): instaUtils(fmtDate)+usePollTask 훅+StatusBadge/TaskStatusBox 추출

src/pages/insta/InstaCards.jsx

@@ -21,81 +21,10 @@ import {
   putInstaPreferences,
 } from '../../api';
 import './InstaCards.css';
-
-/* ────────────────────── 유틸 ────────────────────── */
-function fmtDate(iso) {
-  if (!iso) return '';
-  return new Date(iso).toLocaleDateString('ko-KR', {
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-}
-
-function StatusBadge({ status }) {
-  return (
-    <span className={`ic-status-badge ic-status-badge--${status || 'draft'}`}>
-      {status || 'draft'}
-    </span>
-  );
-}
-
-/* ────────────────────── 폴링 훅 ────────────────────── */
-function usePollTask(onDone) {
-  const [taskId, setTaskId] = useState(null);
-  const [task, setTask] = useState(null);
-  const timer = useRef(null);
-
-  useEffect(() => {
-    if (!taskId) return;
-    let cancelled = false;
-    const poll = async () => {
-      try {
-        const t = await getInstaTask(taskId);
-        if (cancelled) return;
-        setTask(t);
-        if (t.status === 'succeeded' || t.status === 'failed') {
-          setTaskId(null);
-          onDone?.(t);
-        } else {
-          timer.current = setTimeout(poll, 3000);
-        }
-      } catch {
-        if (!cancelled) timer.current = setTimeout(poll, 3000);
-      }
-    };
-    poll();
-    return () => {
-      cancelled = true;
-      clearTimeout(timer.current);
-    };
-  }, [taskId]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  return {
-    taskId,
-    task,
-    start: setTaskId,
-    clear: () => { setTaskId(null); setTask(null); },
-  };
-}
-
-/* ────────────────────── TaskStatusBox ────────────────────── */
-function TaskStatusBox({ task }) {
-  if (!task) return null;
-  const pct = task.progress != null ? task.progress : (task.status === 'succeeded' ? 100 : 0);
-  return (
-    <div className="ic-task-status">
-      <div className="ic-task-status__label">
-        {task.status === 'succeeded' ? '완료' : task.status === 'failed' ? '실패' : '진행 중'}
-      </div>
-      <div className="ic-task-status__msg">{task.message || task.error || ''}</div>
-      <div className="ic-task-status__progress">
-        <div className="ic-task-status__fill" style={{ width: `${pct}%` }} />
-      </div>
-    </div>
-  );
-}
+import { fmtDate } from './instaUtils';
+import usePollTask from './hooks/usePollTask';
+import StatusBadge from './components/StatusBadge';
+import TaskStatusBox from './components/TaskStatusBox';
 
 /* ══════════════════════ Trends 탭 패널 1: AccountFocusPanel ══════════════ */
 function AccountFocusPanel() {