peach-add-print

Print Page Generation Skill

Overview

Generate a polished print-only page in a new window without layout via the window.open method.

Core Patterns:

Context7 MCP: Reference the latest documentation for Vue.js and TailwindCSS v4 print variant
Sequential Thinking MCP: Analyze complex print layout design
Print-optimized design: readability, information hierarchy, page separation

Using MCP Tools

Using Context7 MCP

When generating a print page, reference the latest documentation:

# TailwindCSS v4 print variant 쿼리
mcp__context7__resolve-library-id: "TailwindCSS"
mcp__context7__query-docs: "print variant responsive design v4"

# Vue.js 라이프사이클
mcp__context7__resolve-library-id: "Vue.js"
mcp__context7__query-docs: "onMounted lifecycle composition API"

Using Sequential Thinking MCP

When designing a complex print layout:

mcp__sequential-thinking__sequentialthinking:
- thought: "인쇄 대상 데이터 구조 분석"
- thought: "페이지 브레이크 위치 결정"
- thought: "헤더/푸터 반복 요소 설계"
- thought: "정보 계층 구조 최적화"

Input Method

/peach-add-print [원본컴포넌트경로]

Print Design Principles

Characteristics of Print Media (Differences from Web)

Category	웹	Print
Interaction	Click, hover, scroll	None (static)
Color	RGB (emissive)	CMYK (reflective)
Animation	Possible	Not possible
Size	Responsive	Fixed (A4, Letter)
Resolution	72-96dpi	300dpi recommended

Print-Optimized Design Guide

print-design-guide.md Detailed CSS Reference

1. Typography (TailwindCSS v4 print variant)

<!-- 인쇄용 타이포그래피 -->
<div class="print:font-sans print:text-[11pt] print:leading-relaxed print:text-black">
  <h1 class="print:text-[18pt] print:font-bold">제목</h1>
  <h2 class="print:text-[14pt] print:font-semibold">부제목</h2>
  <h3 class="print:text-[12pt] print:font-semibold">소제목</h3>
</div>

2. Color (high contrast, ink saving)

<!-- 인쇄 친화적 색상 -->
<span class="print:text-black">기본 텍스트</span>
<span class="print:text-gray-700">보조 텍스트</span>
<span class="print:text-blue-700">강조</span>
<span class="print:text-red-600">음수/경고</span>

<!-- 배경색 (절제하여 사용) -->
<div class="print:bg-gray-100">연한 배경</div>
<div class="print:border print:border-gray-300">테두리</div>

3. Layout (page breaks)

<!-- 페이지 브레이크 제어 -->
<div class="print:break-before-page">새 페이지 시작</div>
<div class="print:break-after-page">페이지 끝</div>
<div class="print:break-inside-avoid">분리 방지</div>

<!-- 테이블 헤더 반복 -->
<thead class="print:table-header-group">...</thead>
<tfoot class="print:table-footer-group">...</tfoot>

<!-- 인쇄 시 숨김/표시 -->
<div class="print:hidden">화면에서만 표시</div>
<div class="hidden print:block">인쇄에서만 표시</div>

4. Information Hierarchy

┌─────────────────────────────────────────┐
│  문서 타이틀 (18pt, Bold, 중앙)          │
├─────────────────────────────────────────┤
│  메타 정보 (기간, 작성자, 날짜)           │
│  ─────────────────────────────────────  │
│  요약 박스 (배경색, 테두리)               │
│  ┌─────────────────────────────────┐   │
│  │ 핵심 수치 / KPI                   │   │
│  └─────────────────────────────────┘   │
├─────────────────────────────────────────┤
│  섹션 타이틀 (14pt, Bold)               │
│  ─────────────────────────────────────  │
│  데이터 테이블                           │
│  ┌───┬───────┬─────┬─────┬─────┐      │
│  │   │       │     │     │     │      │
│  ├───┼───────┼─────┼─────┼─────┤      │
│  │   │       │     │     │     │      │
│  └───┴───────┴─────┴─────┴─────┘      │
├─────────────────────────────────────────┤
│  푸터 (페이지 번호, 인쇄일시)             │
└─────────────────────────────────────────┘

Workflow

Step 0. Check Design System

cat DESIGN.md 2>/dev/null | head -100

If present: Reflect color and typography rules in subsequent print style decisions
If not present: ⚠️ DESIGN.md 없음 Output and continue

Step 1: Analyze the original component (Sequential Thinking)

Sequential Thinking 활용:
1. 데이터 구조 파악 (테이블, 목록, 차트 등)
2. 인쇄 시 필수 정보 vs 생략 가능 정보 분류
3. 페이지당 최적 데이터 양 계산
4. 페이지 브레이크 위치 결정

Step 2: Reference the latest TailwindCSS documentation with Context7

# TailwindCSS v4 print variant 최신 사양 확인
mcp__context7__query-docs:
  libraryId: "/tailwindlabs/tailwindcss"
  query: "print variant modifier responsive design"

Step 3: Generate the print component

print-component.md Template reference

Step 4: Route configuration

print-routes.md Template reference

Step 5: Add a print button to the original

<u-button color="neutral" variant="outline" @click="actionPrint">
  <i class="i-heroicons-printer" />
  인쇄
</u-button>

Generated Files

front/src/modules-domain/[모듈명]/pages/
├── [원본]-print.vue           # 인쇄 전용 컴포넌트
└── _[모듈명]-print.routes.ts  # 인쇄 전용 라우트

Reference Documents

print-component.md: Print component template
print-routes.md: Route configuration template
print-design-guide.md: Detailed print design guide

Reference Code

front/src/modules-domain/unpaid/pages/account-print.vue
front/src/modules-domain/unpaid/pages/_unpaid-print.routes.ts
front/src/assets/styles/components.css (table_report)