---
name: admin-ui-builder
description: "지오정보기술 홈페이지 관리자(zioinfo-web) UI 구현 스킬. FAQ, 레퍼런스, 파트너사, CEO인사말, 조직도 등 새 DB 항목의 관리자 CRUD 페이지(AdminXxx.jsx)를 AdminHistory.jsx 패턴으로 구현하고 AdminLayout.jsx 사이드바와 App.jsx 라우트를 등록한다. 다음 상황에서 반드시 사용: (1) '관리자에서 XXX 관리', '관리자 페이지 추가', 'CRUD UI 추가' 요청; (2) AdminXxx.jsx 신규 생성; (3) 사이드바 메뉴 추가; (4) 다시 실행, 업데이트, 수정, 보완."
---

# 홈페이지 관리자 UI 구현 스킬

## 기본 패턴 파일

`workspace/zioinfo-web/frontend/src/pages/admin/AdminHistory.jsx` — 모든 관리자 페이지의 기준 템플릿.

## AdminXxx.jsx 필수 구성 요소

```jsx
const authFetch = (url, opts={}) =>
  fetch(url, { ...opts, headers: {
    'Content-Type':'application/json',
    Authorization:`Bearer ${localStorage.getItem('admin_token')}`,
    ...opts.headers
  }});

// 필수 상태
const [items, setItems] = useState([]);
const [modal, setModal] = useState(null);   // null | 'create' | 'edit'
const [form, setForm] = useState(EMPTY);
const [editId, setEditId] = useState(null);
const [saving, setSaving] = useState(false);
const [toast, setToast] = useState(null);
const [search, setSearch] = useState('');

// 필수 기능: load, openCreate, openEdit, closeModal, save, del, toggleVisible
```

## AdminLayout.jsx 사이드바 추가

```js
// NAV 배열에 추가 (콘텐츠 관리 섹션 아래)
{ path: '/admin/{path}', icon: '{이모지}', label: '{메뉴명}' },
```

## App.jsx 라우트 추가

```jsx
// lazy import 추가
const Admin{Name} = lazy(() => import('./pages/admin/Admin{Name}'));

// AdminLayout Route 자식에 추가
<Route path="{path}" element={<Admin{Name} />} />
```

## 항목별 아이콘 가이드

| 항목 | 아이콘 |
|------|------|
| FAQ | ❓ |
| 레퍼런스 | 🏆 |
| 파트너사 | 🤝 |
| KPI 통계 | 📊 |
| CEO 인사말 | 👔 |
| 핵심 가치 | ⭐ |
| 조직도 | 🏢 |
| 솔루션 | 💡 |

## 공통 스타일 변수 (AdminHistory.jsx 재사용)

```jsx
const btnStyle = color => ({
  padding:'7px 16px', background:color, color:'#fff',
  border:'none', borderRadius:6, cursor:'pointer', fontSize:13, fontWeight:600,
});
const btnSmall = color => ({
  padding:'3px 10px', background:color, color:'#fff',
  border:'none', borderRadius:4, cursor:'pointer', fontSize:11, fontWeight:600,
});
const labelStyle = { display:'flex', flexDirection:'column', gap:4, fontSize:13, fontWeight:600, color:'#475569' };
const inputStyle = { padding:'8px 10px', border:'1px solid #cbd5e1', borderRadius:6, fontSize:13, outline:'none', marginTop:2 };
```