peach-add-print

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

인쇄 페이지 생성 스킬

打印页面生成技能

개요

概述

window.open 방식으로 새 창에서 레이아웃 없이 세련된 인쇄 전용 페이지 생성.

핵심 패턴:

Context7 MCP: Vue.js, TailwindCSS v4 print variant 최신 문서 참조
Sequential Thinking MCP: 복잡한 인쇄 레이아웃 설계 분석
인쇄 최적화 디자인: 가독성, 정보 계층, 페이지 구분

通过window.open方式在新窗口生成无多余布局的精致打印专用页面。

核心模式：

Context7 MCP：参考Vue.js、TailwindCSS v4 print variant最新文档
Sequential Thinking MCP：复杂打印布局设计分析
打印优化设计：可读性、信息层级、页面分隔

MCP 도구 활용

MCP工具使用

Context7 MCP 활용

使用Context7 MCP

인쇄 페이지 생성 시 최신 문서 참조:

bash

undefined

生成打印页面时参考最新文档：

bash

undefined

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"

undefined

mcp__context7__resolve-library-id: "Vue.js" mcp__context7__query-docs: "onMounted lifecycle composition API"

undefined

Sequential Thinking MCP 활용

使用Sequential Thinking MCP

복잡한 인쇄 레이아웃 설계 시:

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

设计复杂打印布局时：

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

입력 방식

输入方式

bash

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

bash

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

인쇄 디자인 원칙

打印设计原则

인쇄 매체 특성 (웹과 다른 점)

打印介质特性（与网页的区别）

구분	웹	인쇄
상호작용	클릭, 호버, 스크롤	없음 (정적)
색상	RGB (발광)	CMYK (반사광)
애니메이션	가능	불가능
크기	반응형	고정 (A4, Letter)
해상도	72-96dpi	300dpi 권장

分类	网页	打印
交互	点击、悬停、滚动	无（静态）
颜色	RGB（发光）	CMYK（反射光）
动画	支持	不支持
尺寸	响应式	固定（A4、Letter）
分辨率	72-96dpi	推荐300dpi

인쇄 최적화 디자인 가이드

打印优化设计指南

print-design-guide.md 상세 CSS 참조

参考print-design-guide.md查看详细CSS

1. 타이포그래피 (TailwindCSS v4 print variant)

1. 排版（TailwindCSS v4 print variant）

html

<!-- 인쇄용 타이포그래피 -->
<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>

html

<!-- 인쇄용 타이포그래피 -->
<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. 색상 (고대비, 잉크 절약)

2. 颜色（高对比度、节省墨水）

html

<!-- 인쇄 친화적 색상 -->
<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>

html

<!-- 인쇄 친화적 색상 -->
<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. 레이아웃 (페이지 브레이크)

3. 布局（分页符）

html

<!-- 페이지 브레이크 제어 -->
<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>

html

<!-- 페이지 브레이크 제어 -->
<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. 정보 계층 구조

4. 信息层级结构

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

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

워크플로우

工作流程

1단계: 원본 컴포넌트 분석 (Sequential Thinking)

第1步：源组件分析（Sequential Thinking）

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

使用Sequential Thinking：
1. 梳理数据结构（表格、列表、图表等）
2. 分类打印必填信息与可省略信息
3. 计算每页最优数据容量
4. 确定分页符位置

2단계: Context7로 최신 TailwindCSS 문서 참조

第2步：通过Context7参考最新TailwindCSS文档

bash

undefined

bash

undefined

TailwindCSS v4 print variant 최신 사양 확인

mcp__context7__query-docs: libraryId: "/tailwindlabs/tailwindcss" query: "print variant modifier responsive design"

undefined

mcp__context7__query-docs: libraryId: "/tailwindlabs/tailwindcss" query: "print variant modifier responsive design"

undefined

3단계: 인쇄 컴포넌트 생성

第3步：生成打印组件

print-component.md 템플릿 참조

参考print-component.md模板

4단계: 라우트 설정

第4步：路由配置

print-routes.md 템플릿 참조

参考print-routes.md模板

5단계: 원본에 인쇄 버튼 추가

第5步：在源页面添加打印按钮

vue

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

vue

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

생성 파일

生成的文件

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

front/src/modules-domain/[모듈명]/pages/
├── [원본]-print.vue           # 打印专用组件
└── _[모듈명]-print.routes.ts  # 打印专用路由

참조 문서

参考文档

print-component.md: 인쇄 컴포넌트 템플릿
print-routes.md: 라우트 설정 템플릿
print-design-guide.md: 인쇄 디자인 상세 가이드

print-component.md：打印组件模板
print-routes.md：路由配置模板
print-design-guide.md：打印设计详细指南

참조 코드

参考代码

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)

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)