스킬 소개

그누보드5 관리자 페이지 개발 시 일관된 UI/UX를 유지하기 위해 디자인 시스템을 준수해야 합니다.
이 스킬은 Claude Code에서 테이블, 버튼, 폼, 모달, 배지 등 관리자 UI 컴포넌트를 자동 생성합니다.
한 번의 프롬프트로 완전한 관리자 페이지를 생성할 수 있습니다.

스킬 개요

• 스킬 이름: g5-admin-ui
• 용도: 그누보드5 관리자 페이지 UI 코드 생성
• 위치: ~/.claude/skills/g5-admin-ui/
• 특징: 한 번의 프롬프트로 완전한 페이지 생성

스킬 구조 (v2.0)

~/.claude/skills/g5-admin-ui/
├── SKILL.md                          # 핵심 가이드 (283줄)
└── references/
    ├── decision-flowchart.md         # 의사결정 플로우차트
    ├── security-checklist.md         # 보안 체크리스트
    ├── design-tokens.md              # 디자인 토큰
    │
    ├── page-templates/               # 페이지별 완전 템플릿
    │   ├── list-page.md              # 목록 페이지
    │   ├── form-page.md              # 등록/수정 폼
    │   ├── detail-page.md            # 상세 페이지
    │   └── settings-page.md          # 설정 페이지
    │
    ├── components/                   # 컴포넌트별 스니펫 (7개)
    │   ├── buttons.md, tables.md, forms.md
    │   ├── modals.md, badges.md
    │   └── filters.md, pagination.md
    │
    └── patterns/                     # 구현 패턴
        ├── crud-ajax.md
        ├── data-flow.md
        └── validation.md

구조 변경 이력 (v1.0 → v2.0)

• SKILL.md 길이: 598줄 → 283줄
• 참조 파일 수: 2개 → 17개
• 페이지 템플릿: 1개 → 4개
• 의사결정 가이드: 없음 → 플로우차트
• 컴포넌트 분리: 단일 파일 → 7개 파일

설치 방법

1. 첨부파일 다운로드 후 압축 해제
2. g5-admin-ui 폴더를 아래 경로에 복사
   ~/.claude/skills/g5-admin-ui/
3. Claude Code 재시작 또는 새 세션 시작

스킬 활성화

자동 활성화 조건:

• adm/ 디렉토리 내 PHP 파일 생성/수정 시
• 관리자 UI 컴포넌트(테이블, 버튼, 모달 등) 관련 작업 요청 시
• 그누보드5 관리자 페이지 개발 요청 시

수동 호출:

/g5-admin-ui

핵심 원칙

• 일관성: 디자인 시스템 토큰 준수
• 보안: SQL 인젝션, XSS 방지 필수 적용
• 접근성: 시맨틱 HTML, scope 속성, ARIA 레이블

의사결정 가이드

스킬은 요청 키워드를 분석하여 자동으로 적절한 템플릿과 컴포넌트를 선택합니다.

페이지 타입 선택:

• 목록, 리스트, 검색, 조회 → list-page.md → *_list.php
• 등록, 추가, 수정, 편집 → form-page.md → *_form.php
• 상세, 보기 → detail-page.md → *_view.php
• 설정, 환경설정 → settings-page.md → *_config.php

버튼 선택:

• 주요 긍정 (저장, 추가): btn btn_01 #ff4081
• 부정/위험 (삭제, 취소): btn btn_02 #9eacc6
• 보조 (수정, 상세): btn btn_03 #3f51b5
• 폼 제출 (검색): btn_submit #ff4081

배지 vs 버튼:

• 클릭 가능 → 버튼 스타일 (.btn 클래스) - 채도 높은 배경, 흰색 텍스트
• 클릭 불가 → 배지 스타일 (.badge_ 클래스) - 밝은 배경, 어두운 텍스트

테이블 선택:

• 다건 목록 (N rows): tbl_head01 tbl_wrap - 목록 페이지
• 키-값 (key:value): tbl_frm01 - 폼, 상세, 설정

모달 vs 별도 페이지:

• 입력 필드 3개 이하 → 모달 사용
• 입력 필드 4개 이상 → 별도 페이지
• 파일 업로드 필요 → 별도 페이지 권장

페이지 타입별 사용법

1. 목록 페이지

adm/item_list.php 에 상품 목록 페이지를 만들어주세요.
필드: 번호, 상품명, 가격, 상태, 등록일
검색: 상품명, 날짜 범위
기능: 추가, 수정, 삭제 (모달 사용)

→ 생성: item_list.php (통계, 필터, 테이블, 페이징, 모달), item_ajax.php (AJAX 핸들러)

2. 등록/수정 폼

adm/item_form.php 에 상품 등록/수정 폼을 만들어주세요.
필드: 상품명(필수), 가격, 설명(에디터), 이미지, 상태

→ 생성: item_form.php (등록/수정 겸용), item_form_update.php (저장 처리)

3. 상세 페이지

adm/item_view.php 에 상품 상세 페이지를 만들어주세요.
연관 데이터: 주문 목록

→ 생성: item_view.php (읽기 전용 데이터, 연관 목록)

4. 설정 페이지

adm/item_config.php 에 상품 설정 페이지를 만들어주세요.
설정: 페이지당 표시 수, 기본 상태, 이미지 크기
탭: 기본 설정, 표시 설정

→ 생성: item_config.php (탭 UI, 설정 폼, 저장 처리)

보안 규칙 (필수 적용)

PHP 파일 필수 헤더:

<?php
if (!defined('_GNUBOARD_')) exit;

SQL 인젝션 방지:

// 숫자
$id = (int)$_POST['id'];

// 문자열
$title = sql_escape_string($_POST['title']);

// 정렬 필드 - 화이트리스트 필수!
$allowed_fields = ['id', 'title', 'created_at'];
if (!in_array($sst, $allowed_fields)) {
    $sst = 'id';
}

XSS 방지:

// 입력 시
$keyword = clean_xss_tags($_GET['keyword']);

// 출력 시
echo htmlspecialchars($row['title']);

권한 체크:

auth_check($auth[$sub_menu], "r");  // 읽기
auth_check($auth[$sub_menu], "w");  // 쓰기
auth_check($auth[$sub_menu], "d");  // 삭제

지원 컴포넌트 (7개)

• 버튼: Primary, Secondary, Info, Submit → components/buttons.md
• 테이블: 목록 테이블, 폼 테이블, 정렬 헤더 → components/tables.md
• 폼 요소: 텍스트, 셀렉트, 라디오, 체크박스 → components/forms.md
• 모달: 팝업 모달 (AJAX 처리 포함) → components/modals.md
• 배지: 상태 표시 (사용/미사용) → components/badges.md
• 필터: 검색, 날짜 범위, 상태 필터 → components/filters.md
• 페이징: 페이지 네비게이션 → components/pagination.md

디자인 토큰 요약

주요 색상:

• Primary: #540F74 (브랜드 메인)
• Accent: #ff4081 (강조)
• System: #3f51b5 (시스템 기본)

상태 색상:

• 성공/활성 배경: #e8f5e9, 텍스트: #2e7d32
• 경고 배경: #fff3e0, 텍스트: #e65100
• 위험/에러 배경: #ffebee, 텍스트: #c62828
• 비활성 배경: #f5f5f5, 텍스트: #757575

테이블 열 너비:

• td_chk 30px (체크박스)
• td_num 60px (번호)
• td_date 70px (날짜)
• td_datetime 130px (날짜시간)
• td_mng 100px (관리)

효과적인 프롬프트 작성법

한 번의 프롬프트로 완성된 코드를 생성하려면 다음 정보를 포함하세요:

필수 정보:

1. 파일 경로: adm/item_list.php
2. 페이지 타입: 목록/폼/상세/설정
3. 필드 목록: 번호, 제목, 상태, 등록일

권장 정보:

1. 검색/필터 조건: 제목 검색, 날짜 범위
2. CRUD 기능: 추가, 수정, 삭제
3. UI 방식: 모달 사용 / 별도 페이지
4. 연관 데이터: 주문 목록 표시

예시 프롬프트:

adm/product_list.php 에 상품 관리 목록 페이지를 만들어주세요.

테이블 필드:
- 번호, 상품명, 카테고리, 가격, 재고, 상태(배지), 등록일

검색/필터:
- 상품명 검색
- 카테고리 셀렉트
- 날짜 범위

기능:
- 추가/수정: 모달 사용
- 삭제: AJAX
- 정렬: 상품명, 가격, 등록일

문제 해결

스킬이 활성화되지 않는 경우:

1. 스킬 파일이 ~/.claude/skills/g5-admin-ui/ 경로에 있는지 확인
2. SKILL.md 파일의 YAML frontmatter가 올바른지 확인
3. 작업 디렉토리가 adm/ 내에 있는지 확인

스타일이 적용되지 않는 경우:

1. 그누보드5 관리자 CSS가 로드되었는지 확인
2. 클래스명이 정확한지 확인 (예: btn_01, btn_02, btn_03)

코드가 불완전하게 생성되는 경우:

1. 프롬프트에 필드 목록을 명시했는지 확인
2. 필요한 기능(CRUD, 검색 등)을 명시했는지 확인
3. UI 방식(모달/별도 페이지)을 명시했는지 확인

참조 파일 인덱스

[핵심 가이드]

SKILL.md (스킬 핵심 정의), decision-flowchart.md (플로우차트), security-checklist.md (보안 체크리스트)

[페이지 템플릿]

page-templates/list-page.md, form-page.md, detail-page.md, settings-page.md

[컴포넌트]

components/buttons.md, tables.md, forms.md, modals.md, badges.md, filters.md, pagination.md

[구현 패턴]

patterns/crud-ajax.md, data-flow.md, validation.md

참고사항

• Claude Code CLI 도구가 필요합니다 (https://claude.ai/code)
• 전체 디자인 시스템: docs/admin-design-system.md
• 관련 스킬: gnuboard5-plugin-developer, gnuboard5-db-schema