chore(format): printWidth 100으로 통일하고 전체 재포맷

.github/pull_request_template.md

@@ -18,7 +18,6 @@
 
 <!-- UI 변경이 있는 경우 스크린샷을 첨부해주세요 -->
 
-
 ## 📚 추가 정보
 
 <!-- 리뷰어가 알아야 할 추가 정보가 있다면 작성해주세요 -->

.prettierignore

@@ -7,3 +7,11 @@ build
 coverage
 *.min.js
 pnpm-lock.yaml
+
+# 벤더링된 서드파티 참고 구현 — 원본 그대로 유지한다
+references
+
+# 빌드 산출물
+out
+docs/doc_build
+.vercel

.prettierrc

@@ -2,7 +2,7 @@
   "semi": true,
   "trailingComma": "es5",
   "singleQuote": true,
-  "printWidth": 80,
+  "printWidth": 100,
   "tabWidth": 2,
   "useTabs": false
 }

apps/react-zpl/src/commands/barcodeQR.ts

@@ -22,18 +22,15 @@ const MAX_MAGNIFICATION = 100;
  * @see https://docs.zebra.com/us/en/printers/software/zpl-pg/c-zpl-zpl-commands/r-zpl-bq.html
  */
 export const barcodeQR = defineCommand<BarcodeQRParams>((params) => {
-  const { orientation, model, magnification, errorCorrection, maskValue } =
-    params;
+  const { orientation, model, magnification, errorCorrection, maskValue } = params;
 
   if (magnification < MIN_MAGNIFICATION || magnification > MAX_MAGNIFICATION) {
     throw new Error(
       `barcodeQR: magnification은 ${MIN_MAGNIFICATION}~${MAX_MAGNIFICATION}이어야 합니다. (magnification=${magnification})`
     );
   }
   if (!Number.isInteger(maskValue) || maskValue < 0 || maskValue > 7) {
-    throw new Error(
-      `barcodeQR: maskValue는 0~7 정수여야 합니다. (maskValue=${maskValue})`
-    );
+    throw new Error(`barcodeQR: maskValue는 0~7 정수여야 합니다. (maskValue=${maskValue})`);
   }
   if (model !== 1 && model !== 2) {
     throw new Error(`barcodeQR: model은 1 또는 2여야 합니다. (model=${model})`);

apps/react-zpl/src/commands/base.ts

@@ -4,9 +4,7 @@
  * - `P`가 `void`이면 사용자가 전달할 매개변수가 없으므로 단순히 문자열을 반환하는 함수가 됩니다.
  * - `P`가 객체 타입이면 `params`로 해당 속성을 전달하여 명령 문자열을 동적으로 구성합니다.
  */
-export type Command<P = void> = P extends void
-  ? () => string
-  : (params: P) => string;
+export type Command<P = void> = P extends void ? () => string : (params: P) => string;
 
 /**
  * 명령어 생성을 담당하는 실제 구현 함수 타입

apps/react-zpl/src/commands/changeInternationalEncoding.ts

@@ -4,11 +4,10 @@ import { UTF8_ENCODING } from '../constants';
 
 type ChangeInternationalEncodingParams = string[] | undefined;
 
-export const changeInternationalEncoding =
-  defineCommand<ChangeInternationalEncodingParams>(
-    (characterSets = [UTF8_ENCODING]) => {
-      const joinedCharacterSets = characterSets.join(',');
-
-      return `^CI${joinedCharacterSets}`;
-    }
-  );
+export const changeInternationalEncoding = defineCommand<ChangeInternationalEncodingParams>(
+  (characterSets = [UTF8_ENCODING]) => {
+    const joinedCharacterSets = characterSets.join(',');
+
+    return `^CI${joinedCharacterSets}`;
+  }
+);

apps/react-zpl/src/components/QrCode.tsx

@@ -14,8 +14,6 @@ export interface QrCodeProps extends PropsWithChildren {
   maskValue?: number;
 }
 
-export const QrCode = ({ children }: QrCodeProps) => (
-  <span>{children}</span>
-);
+export const QrCode = ({ children }: QrCodeProps) => <span>{children}</span>;
 
 QrCode.displayName = 'QrCode';

apps/react-zpl/src/components/ZplLabel.tsx

@@ -29,5 +29,5 @@ ZplLabel.displayName = 'ZplLabel';
 
 ZplLabel.print = (element) => {
   const node = toLabelNode(element); // ReactElement → LabelRootNode
-  return renderLabel(node);          // LabelRootNode → ZPL
+  return renderLabel(node); // LabelRootNode → ZPL
 };

apps/react-zpl/src/utils/render.ts

@@ -1,10 +1,4 @@
-import {
-  Children,
-  ComponentClass,
-  FunctionComponent,
-  ReactElement,
-  ReactNode,
-} from 'react';
+import { Children, ComponentClass, FunctionComponent, ReactElement, ReactNode } from 'react';
 
 /**
  * React 엘리먼트를 렌더링하여 ReactNode 배열로 변환하는 함수
@@ -34,8 +28,7 @@ export const renderReactElement = (element: ReactElement): ReactNode[] => {
   let rendered: ReactNode | ReactNode[] = [];
 
   if (typeof element.type === 'function') {
-    const isClassComponent =
-      !!element.type.prototype && !!element.type.prototype.isReactComponent;
+    const isClassComponent = !!element.type.prototype && !!element.type.prototype.isReactComponent;
 
     rendered = isClassComponent
       ? new (element.type as ComponentClass)(element.props).render()

apps/react-zpl/src/utils/toNode.ts

@@ -1,10 +1,6 @@
 import { Children, isValidElement, ReactElement, ReactNode } from 'react';
 
-import {
-  ChildLabelNode,
-  LabelRootNode,
-  type LabelCoreProps,
-} from '@zpl-kit/zpl-core';
+import { ChildLabelNode, LabelRootNode, type LabelCoreProps } from '@zpl-kit/zpl-core';
 
 import { renderReactElement } from './render';
 

apps/zpl-core/src/commands/barcodeQR.ts

@@ -22,18 +22,15 @@ const MAX_MAGNIFICATION = 100;
  * @see https://docs.zebra.com/us/en/printers/software/zpl-pg/c-zpl-zpl-commands/r-zpl-bq.html
  */
 export const barcodeQR = defineCommand<BarcodeQRParams>((params) => {
-  const { orientation, model, magnification, errorCorrection, maskValue } =
-    params;
+  const { orientation, model, magnification, errorCorrection, maskValue } = params;
 
   if (magnification < MIN_MAGNIFICATION || magnification > MAX_MAGNIFICATION) {
     throw new Error(
       `barcodeQR: magnification은 ${MIN_MAGNIFICATION}~${MAX_MAGNIFICATION}이어야 합니다. (magnification=${magnification})`
     );
   }
   if (!Number.isInteger(maskValue) || maskValue < 0 || maskValue > 7) {
-    throw new Error(
-      `barcodeQR: maskValue는 0~7 정수여야 합니다. (maskValue=${maskValue})`
-    );
+    throw new Error(`barcodeQR: maskValue는 0~7 정수여야 합니다. (maskValue=${maskValue})`);
   }
   if (model !== 1 && model !== 2) {
     throw new Error(`barcodeQR: model은 1 또는 2여야 합니다. (model=${model})`);

apps/zpl-core/src/commands/base.ts

@@ -4,9 +4,7 @@
  * - `P`가 `void`이면 사용자가 전달할 매개변수가 없으므로 단순히 문자열을 반환하는 함수가 됩니다.
  * - `P`가 객체 타입이면 `params`로 해당 속성을 전달하여 명령 문자열을 동적으로 구성합니다.
  */
-export type Command<P = void> = P extends void
-  ? () => string
-  : (params: P) => string;
+export type Command<P = void> = P extends void ? () => string : (params: P) => string;
 
 /**
  * 명령어 생성을 담당하는 실제 구현 함수 타입

apps/zpl-core/src/commands/changeInternationalEncoding.ts

@@ -4,11 +4,10 @@ import { UTF8_ENCODING } from '../constants';
 
 type ChangeInternationalEncodingParams = string[] | undefined;
 
-export const changeInternationalEncoding =
-  defineCommand<ChangeInternationalEncodingParams>(
-    (characterSets = [UTF8_ENCODING]) => {
-      const joinedCharacterSets = characterSets.join(',');
-
-      return `^CI${joinedCharacterSets}`;
-    }
-  );
+export const changeInternationalEncoding = defineCommand<ChangeInternationalEncodingParams>(
+  (characterSets = [UTF8_ENCODING]) => {
+    const joinedCharacterSets = characterSets.join(',');
+
+    return `^CI${joinedCharacterSets}`;
+  }
+);

apps/zpl-core/src/renderers/ellipse.ts

@@ -26,10 +26,7 @@ export function renderEllipse(props: EllipseCoreProps): string {
     lineColor = COLOR.BLACK,
   } = props;
 
-  if (
-    width < MIN_SIZE || width > MAX_SIZE ||
-    height < MIN_SIZE || height > MAX_SIZE
-  ) {
+  if (width < MIN_SIZE || width > MAX_SIZE || height < MIN_SIZE || height > MAX_SIZE) {
     throw new Error(
       `renderEllipse: width와 height는 ${MIN_SIZE}~${MAX_SIZE} 사이여야 합니다. (width=${width}, height=${height})`
     );

apps/zpl-core/src/renderers/line.ts

@@ -25,9 +25,7 @@ export function renderLine(props: LineCoreProps): string {
   } = props;
 
   if (length < MIN_LENGTH) {
-    throw new Error(
-      `renderLine: length는 ${MIN_LENGTH} 이상이어야 합니다. (length=${length})`
-    );
+    throw new Error(`renderLine: length는 ${MIN_LENGTH} 이상이어야 합니다. (length=${length})`);
   }
   if (thickness < MIN_THICKNESS) {
     throw new Error(

apps/zpl-core/src/renderers/qrCode.ts

@@ -13,10 +13,7 @@ export interface QrCodeCoreProps {
   maskValue?: number;
 }
 
-export function renderQrCode(
-  props: QrCodeCoreProps,
-  context: ZplElementContext
-): string {
+export function renderQrCode(props: QrCodeCoreProps, context: ZplElementContext): string {
   const {
     text,
     fieldOriginX = 0,

apps/zpl-core/src/renderers/renderChildNode.ts

@@ -6,17 +6,11 @@ import { renderLine } from './line';
 import { renderQrCode } from './qrCode';
 import { renderText } from './text';
 
-export function renderChildren(
-  nodes: ChildLabelNode[],
-  context: ZplElementContext
-): string[] {
+export function renderChildren(nodes: ChildLabelNode[], context: ZplElementContext): string[] {
   return nodes.map((node) => renderChildNode(node, context));
 }
 
-export function renderChildNode(
-  node: ChildLabelNode,
-  context: ZplElementContext
-): string {
+export function renderChildNode(node: ChildLabelNode, context: ZplElementContext): string {
   switch (node.type) {
     case 'text':
       return renderText(node.props, context);

apps/zpl-core/src/renderers/text.ts

@@ -25,17 +25,8 @@ interface TextFontOwnCoreProps extends TextBaseCoreProps {
 
 export type TextCoreProps = TextFontInheritCoreProps | TextFontOwnCoreProps;
 
-export function renderText(
-  props: TextCoreProps,
-  context: ZplElementContext
-): string {
-  const {
-    text,
-    fieldOriginX = 0,
-    fieldOriginY = 0,
-    fieldOrientation,
-    fontInherit,
-  } = props;
+export function renderText(props: TextCoreProps, context: ZplElementContext): string {
+  const { text, fieldOriginX = 0, fieldOriginY = 0, fieldOrientation, fontInherit } = props;
 
   if (typeof text !== 'string') {
     throw new Error('renderText: text는 문자열이어야 합니다.');

apps/zpl-viewer/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />

apps/zpl-viewer/package.json

@@ -28,4 +28,4 @@
     "typescript": "^5.7.0",
     "vite": "^5.4.0"
   }
-}
+}

apps/zpl-viewer/src/index.css

@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @theme {
   --color-background: oklch(1 0 0);

demos/electron/.prettierrc.yaml

@@ -1,3 +1,5 @@
+# Prettier는 설정을 상속하지 않으므로 루트와 겹치는 키도 모두 명시해야 한다.
+# 루트와의 차이: semi(false), trailingComma(none) — electron-vite 스캐폴드 스타일.
 singleQuote: true
 semi: false
 printWidth: 100

demos/electron/src/renderer/src/App.tsx

@@ -1,11 +1,6 @@
 import { useState } from 'react'
 
-import {
-  graphicsShowcaseZpl,
-  priceTagZpl,
-  qrDemoZpl,
-  shippingLabelZpl,
-} from './examples'
+import { graphicsShowcaseZpl, priceTagZpl, qrDemoZpl, shippingLabelZpl } from './examples'
 
 import './App.css'
 
@@ -26,7 +21,7 @@ async function zplToPng(
     {
       method: 'POST',
       headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-      body: zpl,
+      body: zpl
     }
   )
 
@@ -45,9 +40,9 @@ const EXAMPLES = [
     label: '그래픽 쇼케이스',
     generate: graphicsShowcaseZpl,
     widthMm: 75,
-    heightMm: 62.5,
+    heightMm: 62.5
   },
-  { label: 'QR 코드', generate: qrDemoZpl, widthMm: 50, heightMm: 50 },
+  { label: 'QR 코드', generate: qrDemoZpl, widthMm: 50, heightMm: 50 }
 ] as const
 
 const PLACEHOLDER_ZPL = `^XA
@@ -115,7 +110,7 @@ function App(): React.JSX.Element {
                 onClick={() => handleLoadExample(index)}
                 style={{
                   fontWeight: activeIndex === index ? 'bold' : 'normal',
-                  marginRight: 8,
+                  marginRight: 8
                 }}
               >
                 {example.label}
@@ -132,15 +127,15 @@ function App(): React.JSX.Element {
 
           <h2>ZPL 직접 입력</h2>
           <p className="privacy-notice">
-            ⚠️ 미리보기는 Labelary API(외부 서버)를 사용합니다. ZPL 내용이
-            api.labelary.com으로 전송됩니다.
+            ⚠️ 미리보기는 Labelary API(외부 서버)를 사용합니다. ZPL 내용이 api.labelary.com으로
+            전송됩니다.
           </p>
           <div
             style={{
               marginBottom: 12,
               display: 'flex',
               gap: 12,
-              flexWrap: 'wrap',
+              flexWrap: 'wrap'
             }}
           >
             <label>
@@ -169,9 +164,7 @@ function App(): React.JSX.Element {
               dpmm:{' '}
               <select
                 value={dpmm}
-                onChange={(e) =>
-                  setDpmm(Number(e.target.value) as 6 | 8 | 12 | 24)
-                }
+                onChange={(e) => setDpmm(Number(e.target.value) as 6 | 8 | 12 | 24)}
               >
                 {DPMM_OPTIONS.map((d) => (
                   <option key={d} value={d}>
@@ -192,7 +185,7 @@ function App(): React.JSX.Element {
               fontSize: 12,
               padding: 8,
               marginBottom: 12,
-              resize: 'vertical',
+              resize: 'vertical'
             }}
           />
           <button
@@ -211,11 +204,7 @@ function App(): React.JSX.Element {
           )}
           {imageUrl && !loading && (
             <div style={{ marginTop: 16 }}>
-              <img
-                src={imageUrl}
-                alt="ZPL 미리보기"
-                style={{ maxWidth: '100%' }}
-              />
+              <img src={imageUrl} alt="ZPL 미리보기" style={{ maxWidth: '100%' }} />
             </div>
           )}
         </div>