• Vue 3 Composition API 마스터
• TypeScript 타입 설계 전문가
• NuxtUI v4 + TailwindCSS v4 경험 풍부
• 사용자 경험(UX) 최적화 능력
• 반응형 웹 디자인 구현

• 전제조건: Store 존재 (Mock 데이터 기반 또는 API 연결 완료)
• 생성 방식: Store 인터페이스 기반, test-data 가이드 코드를 기준 골격으로 참조 후 Bounded Autonomy 범위 내 적응
• 컴포넌트 사용: 케밥케이스 사용 (예:

  <u-button>

  ,

  <u-modal>

  ,

  <my-component>

  )
• 완료 기준: vue-tsc + lint + build 모두 통과

"AI Slop": 과도한 그라데이션, 보라색 계열, 예측 가능한 레이아웃 등 AI가 생성하는 전형적이고 진부한 시각적 패턴

1. 프로젝트 테마 준수: Primary

   #287dff

   , Pretendard 폰트
2. NuxtUI 컴포넌트 우선: 커스텀 스타일링 최소화
3. 단순함 유지: 불필요한 장식 요소 배제

• NuxtUI 컴포넌트:

  UButton

  ,

  UCard

  ,

  UModal

  ,

  UTable

• 테마 변수:

  primary

  ,

  neutral

  ,

  error

  ,

  success

• 간격: 4px 배수 (

  p-2

  ,

  p-4

  ,

  gap-4

  )
• 그림자:

  shadow-sm

  ,

  shadow

  (최대)
• 둥근 모서리:

  rounded-md

  ,

  rounded-lg

  (최대)

경고: 아래 패턴은 모든 UI 패턴에서 반드시 적용해야 합니다. 누락 시 검색, 페이징, URL 상태관리가 동작하지 않습니다.

<form @submit.prevent="listAction">

@change="listAction"

@update:modelValue="listAction"

@update:page="listMovePage"

listAction()

resetAction()

listMovePage()

🔴 상세 코드와 금지 패턴: common-patterns.md 참조 (필수)

/peach-gen-ui notice-board
/peach-gen-ui member-manage excel=Y
/peach-gen-ui product file=Y excel=Y

UI 패턴은 실행 후 대화형으로 선택 (1단계)

이 단계는 생략 불가! 개발자에게 반드시 UI 패턴을 질문하고 선택을 받은 후 진행합니다. 선택 없이 코드 생성을 시작하면 안 됩니다.

undefined

대상 프로젝트에

_common/components/

디렉토리가 존재하면 NuxtUI 직접 사용 대신 래퍼 컴포넌트를 우선 사용합니다.

<UInput>

<p-input-box>

<USelect>

<p-nuxt-select>

<UFormField>

<p-form-field>

<UFileInput>

<p-file-upload>

• _common/components/

  없으면 → NuxtUI 직접 사용 (기존 방식 유지)

1. Store 액션 비교: test-data 대비 액션 수, 특수 동작, 파일/엑셀 기능
2. UI 복잡도 판단: 필드 수, 검색 조건, 테이블 컬럼 구성
3. 적응 결정:
   • Must Follow → 그대로 (script setup, 필수 패턴, AI Slop 금지)
   • May Adapt → 도메인 맞춤 (테이블 컬럼, 검색 폼, 모달 폼 구성)

test-data/pages/crud/

test-data/pages/crud/

detail-page.vue

test-data/pages/two-depth/

test-data/pages/infinite-scroll-list/

test-data/pages/select-list/

test-data/modals/list-table-progress.modal.vue

• Selectbox 패턴 (전체 옵션 value='')
• Router 동기화 패턴 (listAction, resetAction, watch)
• Date 검색 패턴 (초기값: 5년 전 ~ 오늘)

cd front && bunx vue-tsc --noEmit  # 타입 체크
cd front && bun run lint:fix      # 린트
cd front && bun run build         # 빌드

에러 발생 시: 원인 분석 → 코드 수정 → 다시 검증 → 통과할 때까지 반복

• <script setup>

  필수
• NuxtUI 컴포넌트 우선, AI Slop 금지
• 필수 패턴:

  listAction

  ,

  resetAction

  ,

  listMovePage

  , watch 패턴

• @submit.prevent="listAction"

  ,

  @change="listAction"

  패턴
• 모듈 경계:

  _common

  만 import

• 테이블 컬럼 구성 (도메인 필드에 맞춤)
• 검색 폼 구성 (필드 수에 따른 레이아웃)
• 모달/페이지 폼 구성 (입력 필드 그룹핑)
• UI 상호작용 흐름 (도메인 특수 UX)

┌─────────────────────────────────┐
│ 완료 체크리스트                 │
│ □ UI 패턴 선택 완료             │
│ □ Store 연결 확인               │
│ □ 페이지/모달 컴포넌트 생성     │
│ □ bunx vue-tsc --noEmit 통과     │
│ □ bun run lint:fix 통과         │
│ □ bun run build 성공            │
└─────────────────────────────────┘

빌드 성공 없이 완료 선언 금지!

중요: 선택된 패턴의 참조 파일만 읽으세요! 모든 references를 한 번에 로드하지 마세요.

경고: 아래 파일은 어떤 패턴을 선택하든 반드시 먼저 읽어야 합니다! 이 파일을 읽지 않으면 검색, 페이징, URL 상태관리 패턴이 누락됩니다.

• common-patterns.md - URL Watch 패턴, Selectbox, Router 동기화, Date 검색, 모달 오픈 패턴
  • ⚠️ URL Watch 패턴 (list-search.vue, list-table.vue)
  • ⚠️ listAction, resetAction, listMovePage 함수
  • ⚠️

    @change="listAction"

    ,

    @submit.prevent="listAction"

    패턴

• 가이드 코드 (필수):

  front/src/modules/test-data/

• Store:

  front/src/modules/[모듈명]/store/

test-data 가이드 코드를 기준 골격으로 참조하되, 도메인 특성에 맞게 Bounded Autonomy 범위 내에서 적응