diff --git a/docs/TABLE_LAYOUT_STANDARD.md b/docs/TABLE_LAYOUT_STANDARD.md index f4665e8d..820a8521 100644 --- a/docs/TABLE_LAYOUT_STANDARD.md +++ b/docs/TABLE_LAYOUT_STANDARD.md @@ -656,14 +656,147 @@ #### `resources/views/products/partials/table.blade.php` --- -## 10. 문서 이력 +## 10. React 테이블 (Blade + Babel) + +> **참조 파일**: `resources/views/barobill/etax/index.blade.php` +> **작성일**: 2026-02-03 + +Blade 템플릿 내에서 React(Babel)를 사용하는 경우, 테이블 컬럼 너비 설정 시 주의해야 할 사항이 있습니다. + +### 10.1 colgroup을 사용한 컬럼 너비 지정 + +React에서 `table-fixed` 레이아웃과 함께 컬럼 너비를 정확하게 지정하려면 `colgroup`을 사용해야 합니다. Tailwind의 `w-[]` 클래스만으로는 정확한 너비 적용이 어려울 수 있습니다. + +#### 잘못된 예시 (Tailwind 클래스만 사용) + +```jsx +// ❌ 테이블 셀에 Tailwind 클래스만 적용 - 비율이 의도대로 안 될 수 있음 + + + + + + + + +
품목명수량단가
+``` + +#### 올바른 예시 (colgroup 사용) + +```jsx +// ✅ colgroup으로 명시적 너비 지정 + + + {/* 품목명 - 가장 넓게 */} + {/* 수량 - 작게 고정 */} + {/* 단가 - 수량보다 넓게 */} + {/* 공급가액 */} + {/* 세액 */} + {/* 금액 */} + {/* 과세 (select) */} + {/* 삭제 버튼 */} + + + + + + + {/* ... */} + + +
품목명수량단가
+``` + +### 10.2 Blade 템플릿에서 React 스타일 객체 이스케이프 + +**중요**: Blade 템플릿(`.blade.php`)에서 React의 스타일 객체 `{{ }}`를 사용하면 Blade가 이를 PHP echo 구문으로 해석하여 에러가 발생합니다. + +#### 에러 발생 코드 + +```jsx +// ❌ Blade가 {{ }}를 PHP 변수로 해석 → 에러 발생 + +// Error: Unknown named parameter $tableLayout +``` + +#### 해결 방법: `@{{ }}` 사용 + +```jsx +// ✅ @를 붙여 Blade 이스케이프 처리 +
++``` + +`@{{ }}`를 사용하면 Blade가 해당 구문을 처리하지 않고 그대로 `{{ }}`로 출력하여 React/Babel이 정상적으로 해석합니다. + +### 10.3 입력 테이블 컬럼 비율 가이드 + +품목 입력 테이블의 권장 컬럼 비율: + +| 컬럼 | 너비 | 설명 | +|------|------|------| +| 품목명 | **30%** | 텍스트 입력, 가장 넓게 | +| 수량 | **60px** | 작은 숫자 입력, 고정 너비 | +| 단가 | **100px** | 금액 입력, 수량보다 넓게 | +| 공급가액 | **12%** | 계산된 금액 표시 | +| 세액 | **10%** | 계산된 금액 표시 | +| 금액 | **12%** | 합계 금액 표시 | +| 과세유형 | **70px** | select 박스 | +| 삭제 | **40px** | 버튼 | + +#### 비율 설정 원칙 + +1. **입력 필드**는 내용에 맞는 적절한 너비 확보 +2. **수량**은 보통 작은 숫자이므로 좁게 (60px) +3. **단가/금액**은 큰 숫자를 표시하므로 넉넉하게 +4. **품목명**은 텍스트 입력이므로 가장 넓게 (%) +5. **버튼/아이콘**은 고정 픽셀 (px) + +### 10.4 전체 예제 코드 + +```jsx +// Blade 템플릿 내 React 코드 (@push('scripts') 내부) +
+ + + + + + + + + + + + + + + + + + + + + + + + {/* 데이터 행들 */} + +
품목명수량단가공급가액세액금액과세
+``` + +--- + +## 11. 문서 이력 | 버전 | 날짜 | 작성자 | 변경 내용 | |------|------|--------|----------| | 1.0 | 2025-11-25 | Claude | 초안 작성 (권한 관리 페이지 기반) | +| 1.1 | 2026-02-03 | Claude | React 테이블 섹션 추가 (colgroup, Blade 이스케이프) | --- -## 11. 문의 +## 12. 문의 이 문서에 대한 문의사항이나 개선 제안은 프로젝트 관리자에게 연락하세요. \ No newline at end of file