docs:React 테이블 컬럼 비율 설정 가이드 추가

- colgroup을 사용한 명시적 컬럼 너비 지정 방법
- Blade에서 React 스타일 객체 이스케이프 (@{{ }})
- 입력 테이블 권장 컬럼 비율 가이드 (품목명 30%, 수량 60px 등)
- 전체 예제 코드 포함

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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 클래스만 적용 - 비율이 의도대로 안 될 수 있음
+<table className="w-full text-sm table-fixed">
+    <thead>
+        <tr>
+            <th className="w-[30%]">품목명</th>
+            <th className="w-[60px]">수량</th>
+            <th className="w-[100px]">단가</th>
+        </tr>
+    </thead>
+</table>
+```
+
+#### 올바른 예시 (colgroup 사용)
+
+```jsx
+// ✅ colgroup으로 명시적 너비 지정
+<table className="w-full text-sm" style=@{{tableLayout: 'fixed'}}>
+    <colgroup>
+        <col style=@{{width: '30%'}} />   {/* 품목명 - 가장 넓게 */}
+        <col style=@{{width: '60px'}} />  {/* 수량 - 작게 고정 */}
+        <col style=@{{width: '100px'}} /> {/* 단가 - 수량보다 넓게 */}
+        <col style=@{{width: '12%'}} />   {/* 공급가액 */}
+        <col style=@{{width: '10%'}} />   {/* 세액 */}
+        <col style=@{{width: '12%'}} />   {/* 금액 */}
+        <col style=@{{width: '70px'}} />  {/* 과세 (select) */}
+        <col style=@{{width: '40px'}} />  {/* 삭제 버튼 */}
+    </colgroup>
+    <thead className="bg-stone-100 border-b border-stone-200">
+        <tr>
+            <th className="px-3 py-2.5 text-left font-medium text-stone-700">품목명</th>
+            <th className="px-2 py-2.5 text-right font-medium text-stone-700">수량</th>
+            <th className="px-2 py-2.5 text-right font-medium text-stone-700">단가</th>
+            {/* ... */}
+        </tr>
+    </thead>
+</table>
+```
+
+### 10.2 Blade 템플릿에서 React 스타일 객체 이스케이프
+
+**중요**: Blade 템플릿(`.blade.php`)에서 React의 스타일 객체 `{{ }}`를 사용하면 Blade가 이를 PHP echo 구문으로 해석하여 에러가 발생합니다.
+
+#### 에러 발생 코드
+
+```jsx
+// ❌ Blade가 {{ }}를 PHP 변수로 해석 → 에러 발생
+<table style={{tableLayout: 'fixed'}}>
+// Error: Unknown named parameter $tableLayout
+```
+
+#### 해결 방법: `@{{ }}` 사용
+
+```jsx
+// ✅ @를 붙여 Blade 이스케이프 처리
+<table style=@{{tableLayout: 'fixed'}}>
+<col style=@{{width: '30%'}} />
+```
+
+`@{{ }}`를 사용하면 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') 내부)
+<table className="w-full text-sm" style=@{{tableLayout: 'fixed'}}>
+    <colgroup>
+        <col style=@{{width: '30%'}} />
+        <col style=@{{width: '60px'}} />
+        <col style=@{{width: '100px'}} />
+        <col style=@{{width: '12%'}} />
+        <col style=@{{width: '10%'}} />
+        <col style=@{{width: '12%'}} />
+        <col style=@{{width: '70px'}} />
+        <col style=@{{width: '40px'}} />
+    </colgroup>
+    <thead className="bg-stone-100 border-b border-stone-200">
+        <tr>
+            <th className="px-3 py-2.5 text-left font-medium text-stone-700">품목명</th>
+            <th className="px-2 py-2.5 text-right font-medium text-stone-700">수량</th>
+            <th className="px-2 py-2.5 text-right font-medium text-stone-700">단가</th>
+            <th className="px-2 py-2.5 text-right font-medium text-stone-700">공급가액</th>
+            <th className="px-2 py-2.5 text-right font-medium text-stone-700">세액</th>
+            <th className="px-2 py-2.5 text-right font-medium text-stone-700">금액</th>
+            <th className="px-1 py-2.5 text-center font-medium text-stone-700">과세</th>
+            <th className="px-1 py-2.5 text-center font-medium text-stone-700"></th>
+        </tr>
+    </thead>
+    <tbody className="divide-y divide-stone-100">
+        {/* 데이터 행들 */}
+    </tbody>
+</table>
+```
+
+---
+
+## 11. 문서 이력
 
 | 버전 | 날짜 | 작성자 | 변경 내용 |
 |------|------|--------|----------|
 | 1.0 | 2025-11-25 | Claude | 초안 작성 (권한 관리 페이지 기반) |
+| 1.1 | 2026-02-03 | Claude | React 테이블 섹션 추가 (colgroup, Blade 이스케이프) |
 
 ---
 
-## 11. 문의
+## 12. 문의
 
 이 문서에 대한 문의사항이나 개선 제안은 프로젝트 관리자에게 연락하세요.