# common_slat.php 개발자 가이드

## 📋 개요

`common_slat.php`는 방화셔터 견적 시스템의 철재 스라트 견적 테이블을 동적으로 생성하는 핵심 PHP 컴포넌트입니다. 이 파일은 스크린 견적과 유사하지만 철재 특화 기능을 포함하며, 철재 스라트 견적서 작성에 필요한 모든 컬럼과 기능을 제공합니다.

## 🏗️ 파일 구조

### 📁 파일 위치
```
/estimate/common/common_slat.php
```

### 📊 파일 정보
- **파일 크기**: 8.9KB (227 lines)
- **주요 언어**: PHP + HTML
- **의존성**: Bootstrap, Bootstrap Icons
- **주요 함수**: `generateTableSection_slat()`

## 🔧 핵심 기능

### 1. 메인 함수: `generateTableSection_slat()`
```php
function generateTableSection_slat($id, $title, $badgeClass = 'bg-success', $user_idtem= '', $process=null, $mode)
```

#### 매개변수
- `$id`: 테이블의 고유 식별자 (예: 'estimateSlat')
- `$title`: 테이블 섹션 제목
- `$badgeClass`: 배지 스타일 클래스 (기본값: 'bg-success' - 철재용 초록색)
- `$user_idtem`: 사용자 아이템 (개발자 모드용)
- `$process`: 프로세스 타입 (예: '견적서')
- `$mode`: 모드 (예: 'view', 'edit')

## 📊 테이블 구조 분석

### 🎯 **테이블 헤더 구조 (6단계 계층)**

#### **1단계 헤더 (기본 정보)**
```html
<tr>
    <th rowspan='6'>행추가<br>삭제</th>
    <th rowspan='6'>일련<br>번호</th>
    <th rowspan='6'>층수</th>
    <th rowspan='6'>부호</th>
    <th rowspan='6'>제품명</th>
    <th rowspan='6'>투시창선택</th>
    <th rowspan='6'>종류</th>
    <th rowspan='4' colspan='2'>가이드레일</th>
    <th rowspan='4' colspan='2'>①오픈사이즈</th>
    <th rowspan='4' colspan='2'>②-1제작사이즈 <br> <span class='text-primary'> (철재)</span></th>
    <th rowspan='4' colspan='2'>②-2제작사이즈 <br> <span class='text-danger'> (부자재)</span></th>
    <th rowspan='6'>③면적</th>
    <th rowspan='6'>④중량</th>
    <th rowspan='6'>투시창<br>수량</th>
    <th rowspan='6'>셔터<br>수량</th>
    <th rowspan='4' colspan='3'>연동제어기</th>
    <th rowspan='2' colspan='7'>⑤모터</th>
    <th rowspan='1' colspan='36'>절곡</th>
    <th rowspan='1' colspan='21'>부자재</th>
</tr>
```

#### **2단계 헤더 (주요 카테고리)**
```html
<tr>
    <th rowspan='2' colspan='8'>⑥가이드레일(한쌍)</th>
    <th rowspan='2' colspan='18'>⑦케이스(셔터박스)</th>
    <th rowspan='2' colspan='10'>⑧하단마감재</th>
    <th rowspan='2' colspan='13'>⑨감기샤프트</th>
    <th rowspan='2' colspan='4'>⑩각파이프</th>
    <th rowspan='4'>조인트바</th>
    <th rowspan='4'>앵글</th>
</tr>
```

#### **3단계 헤더 (모터 상세)**
```html
<tr>
    <th rowspan='4'> <span class='text-primary'> 모터 견적가 포함</span> </th>
    <th rowspan='4'> 전원 </th>
    <th rowspan='4'> 유/무선 </th>
    <th rowspan='4'> 용량 </th>
    <th rowspan='2' colspan='3'> 브라케트 </th>
</tr>
```

#### **4단계 헤더 (세부 구성요소)**
```html
<tr>
    <th rowspan='1' colspan='6'>가이드레일 마감/보강재</th>
    <th rowspan='3'>하부base1</th>
    <th rowspan='3'>하부base2</th>
    <th colspan='5'> 레일용 연기차단재 <br> W50</th>
    <th colspan='12'> 케이스 </th>
    <th> 케이스용<br>연기차단재</th>
    <th colspan='3'>하장바</th>
    <th colspan='7'>x</th>
    <th rowspan='3'>인치</th>
    <th colspan='12'>원형파이프</th>
    <th rowspan='2' colspan='4'> 50*30*1.4T </th>
</tr>
```

#### **5단계 헤더 (구체적 사양)**
```html
<tr>
    <th rowspan='2'> 설치유형 </th>
    <th rowspan='2'> 마감유형 </th>
    <th rowspan='2'> 가로 </th>
    <th rowspan='2'> 높이 </th>
    <th rowspan='2'> 가로 </th>
    <th rowspan='2'> 높이 </th>
    <th rowspan='2'> 가로 </th>
    <th rowspan='2'> 높이 </th>
    <th rowspan='2'> 매립 </th>
    <th rowspan='2'> 노출 </th>
    <th rowspan='2'> 매립형 <br> 뒷박스 </th>
    <th rowspan='2'>가로*세로</th>
    <th rowspan='2'>사이즈</th>
    <th rowspan='2'>받침용<br>앵글</th>
    <th rowspan='2'>size</th>
    <th rowspan='2'>2438</th>
    <th rowspan='2'>3000</th>
    <th rowspan='2'>3500</th>
    <th rowspan='2'>4000</th>
    <th rowspan='2'>4300</th>
    <th rowspan='2'>2438</th>
    <th rowspan='2'>3000</th>
    <th rowspan='2'>3500</th>
    <th rowspan='2'>4000</th>
    <th rowspan='2'>4300</th>
    <th colspan='8'>셔터박스</th>
    <th rowspan='1'>상부덮개</th>
    <th colspan='3'>마구리</th>
    <th colspan='1'>W80</th>
    <th colspan='3'>60*40</th>
    <th colspan='7'>x</th>
    <th colspan='1'>x</th>
    <th colspan='3'>4</th>
    <th colspan='3'>5</th>
    <th colspan='4'>6</th>
    <th colspan='1'>8</th>
</tr>
```

#### **6단계 헤더 (최종 세부사항)**
```html
<tr>
    <th>규격 <br> (사이즈,전면밑,레일폭,점검구방향) </th>
    <th>size</th>
    <th>1219</th>
    <th>2438</th>
    <th>3000</th>
    <th>3500</th>
    <th>4000</th>
    <th>4150</th>
    <th>1219*@</th>
    <th>size</th>
    <th>날개</th>
    <th>수량</th>
    <th>3000</th>
    <th>size</th>
    <th>3000</th>
    <th>4000</th>
    <th colspan='7'>x</th>
    <th>철재x</th>
    <th>3000</th>
    <th>4500</th>
    <th>6000</th>
    <th>6000</th>
    <th>7000</th>
    <th>8200</th>
    <th>3000</th>
    <th>6000</th>
    <th>7000</th>
    <th>8000</th>
    <th>8200</th>
    <th>보강개수환산</th>
    <th>size</th>
    <th>3000</th>
    <th>6000</th>
    <th>300</th>
    <th>2500</th>
</tr>
```

## 🎨 UI/UX 특징

### 📱 **반응형 디자인**
- Bootstrap `table-responsive` 클래스 활용
- 모바일 최적화된 테이블 레이아웃
- 스크롤 가능한 테이블 구조

### 🔘 **버튼 시스템**
```html
<!-- 기본 버튼들 -->
<button type='button' id='estimateslat_view' class='btn btn-success btn-sm'>
    <i class='bi bi-chevron-down'></i>
</button>
<span class='text-primary fs-4 viewNoBtn add-row-slat' data-table='{$id}Table'>+</span>

<!-- 조건부 버튼들 -->
<button type='button' id='viewEstimateSlatUnit' class='btn btn-secondary btn-sm'>
    <i class='bi bi-grid-3x3'></i> 단가표
</button>
<button type='button' id='viewEstimateSlat' class='btn btn-dark btn-sm'>
    <i class='bi bi-card-heading'></i> 견적서
</button>
<button type='button' id='viewEstimateSlatDetail' class='btn btn-danger btn-sm'>
    <i class='bi bi-card-heading'></i> 산출내역서
</button>
```

### 🎯 **색상 코딩 시스템**
- **초록색 (bg-success)**: 철재 스라트 기본 색상
- **파란색 (text-primary)**: 철재 관련 항목
- **빨간색 (text-danger)**: 부자재 관련 항목
- **초록색 (text-success)**: 개발자 모드 컬럼 번호

## 🔧 개발자 모드 기능

### 👨‍💻 **개발자 모드 활성화**
```php
if ($user_idtem === 'pro') {
    echo "<tr class='text-primary'><th></th>";
    
    // 1) 기본 col1~col4
    for ($i = 1; $i <= 4; $i++) {
        echo "<th class='text-primary'>col{$i}</th>";
    }
    
    // 2) col4 다음에 col4_quartz (투시창 선택)
    echo "<th class='text-primary'>col4_quartz</th>";
    
    // 3) col5~col18 (특수 처리 포함)
    for ($i = 5; $i <= 18; $i++) {
        if($i==10) {
            $j = 'col10_SW'; // 철재제작치수 가로
            echo "<th class='text-primary'>$j</th>";
            $j = 'col11_SH'; // 철재제작치수 높이
            echo "<th class='text-primary'>$j</th>";
            echo "<th class='text-primary'>col{$i}</th>";
        } else {
            echo "<th class='text-primary'>col{$i}</th>";
        }
    }
    
    // 4) col19 이전에 추가할 3개 (모터 관련)
    echo "<th class='text-primary'>col19_brand</th>";
    echo "<th class='text-primary'>col19</th>";
    echo "<th class='text-primary'>col19_wireless</th>";
    
    // 5) 나머지 col20~col46
    for ($i = 20; $i <= 46; $i++) {
        echo "<th class='text-primary'>col{$i}</th>";
    }
    echo "<th class='text-primary'>col46_wing</th>";
    
    // 6) col47~col77
    for ($i = 47; $i <= 77; $i++) {
        echo "<th class='text-primary'>col{$i}</th>";
    }
    echo "</tr>";
    
    // 컬럼 번호 표시 행
    echo "<tr> <th>idx </th>";
    for ($i = 0; $i <= 82; $i++) {
        echo "<th class='text-success'>$i</th>";
    }
    echo "</tr>";
}
```

### 📊 **특수 컬럼 처리**
- **col4_quartz**: 투시창 선택 (철재 특화)
- **col10**: 철재제작사이즈 (3개 컬럼으로 분할)
  - `col10_SW`: 가로 사이즈
  - `col11_SH`: 세로 사이즈
  - `col10`: 통합 사이즈
- **col19**: 모터 관련 (3개 컬럼으로 분할)
  - `col19_brand`: 계산서 발행 주체
  - `col19`: 전원
  - `col19_wireless`: 유/무선
- **col46_wing**: 마구리 윙 관련
  - `col46`: 기본 필드
  - `col46_wing`: 마구리 날개 여부

## 📊 컬럼 구조 (84개 컬럼)

### 🎯 **컬럼별 분류**

#### **기본 정보 (1-15)**
- **col1**: 행추가/삭제 버튼
- **col2**: 일련번호
- **col3**: 층수
- **col4**: 부호
- **col4_quartz**: 투시창선택 (철재 특화)
- **col5**: 제품명
- **col6**: 종류
- **col7-8**: 가이드레일 (가로/높이)
- **col9-10**: 오픈사이즈 (가로/높이)
- **col11-12**: 제작사이즈 철재 (가로/높이)
- **col13-14**: 제작사이즈 부자재 (가로/높이)
- **col15**: 면적
- **col16**: 중량
- **col17**: 투시창수량 (철재 특화)
- **col18**: 셔터수량

#### **연동제어기 (19-21)**
- **col19**: 연동제어기 관련 설정

#### **모터 (22-28)**
- **col22**: 모터 견적가 포함
- **col23**: 전원 (220V/380V)
- **col24**: 유/무선
- **col25**: 용량
- **col26-28**: 브라켓 관련

#### **가이드레일 (29-36)**
- **col29-34**: 가이드레일 마감/보강재
- **col35**: 하부base1
- **col36**: 하부base2

#### **케이스 (37-54)**
- **col37-41**: 레일용 연기차단재 W50
- **col42-53**: 셔터박스 관련 설정
- **col54**: 케이스용 연기차단재

#### **하단마감재 (55-64)**
- **col55-57**: 하장바
- **col58-64**: 기타 하단마감재

#### **감기샤프트 (65-77)**
- **col65**: 인치
- **col66-77**: 원형파이프 (다양한 길이)

#### **각파이프 (78-81)**
- **col78-81**: 50*30*1.4T 각파이프

#### **부자재 (82-84)**
- **col82**: 조인트바
- **col83**: 앵글
- **col84**: 기타 부자재

## 🔧 개발자 사용법

### 📝 **기본 사용법**
```php
// 기본 철재 스라트 테이블 생성
generateTableSection_slat('estimateSlat', '철재 스라트 견적', 'bg-success', '', '견적서', 'edit');

// 개발자 모드로 테이블 생성
generateTableSection_slat('estimateSlat', '철재 스라트 견적', 'bg-success', 'pro', '견적서', 'view');
```

### 🎯 **조건부 버튼 표시**
```php
// 견적서 모드에서만 단가표 버튼 표시
if($process == '견적서') {
    echo "<button type='button' id='viewEstimateSlatUnit' class='btn btn-secondary btn-sm'>단가표</button>";
    
    // 뷰 모드에서만 견적서/산출내역서 버튼 표시
    if($mode === 'view') {
        echo "<button type='button' id='viewEstimateSlat'>견적서</button>";
        echo "<button type='button' id='viewEstimateSlatDetail'>산출내역서</button>";
    }
}
```

### 🔄 **동적 테이블 ID 생성**
```php
// 테이블 ID를 동적으로 생성하여 JavaScript에서 참조
$tableId = $id . 'Table';
echo "<table class='table table-bordered' id='{$tableId}'>";
```

## 🚨 주의사항

### ⚠️ **필수 의존성**
- Bootstrap 5.x
- Bootstrap Icons
- jQuery (JavaScript 연동용)

### 🔒 **보안 고려사항**
- 사용자 권한에 따른 버튼 표시 제어
- XSS 방지를 위한 출력 이스케이프 처리
- SQL 인젝션 방지를 위한 서버 사이드 검증

### 📱 **성능 최적화**
- 대용량 테이블 렌더링 시 성능 고려
- 조건부 렌더링으로 불필요한 요소 제거
- CSS 클래스 최적화

## 🐛 디버깅 가이드

### 🔍 **개발자 모드 활용**
```php
// 개발자 모드에서 컬럼명과 번호 확인
if ($user_idtem === 'pro') {
    // 컬럼명 표시
    echo "<th class='text-primary'>col{$i}</th>";
    // 컬럼 번호 표시
    echo "<th class='text-success'>{$i}</th>";
}
```

### 🛠️ **일반적인 문제 해결**

#### 1. 테이블이 표시되지 않는 경우
```php
// 테이블 ID 확인
echo "<!-- Table ID: {$id}Table -->";
// 컨테이너 확인
echo "<!-- Container: estimate_slatDiv -->";
```

#### 2. 버튼이 작동하지 않는 경우
```javascript
// JavaScript에서 테이블 ID 확인
console.log('Table ID:', '{$id}Table');
// 이벤트 바인딩 확인
$('#{$id}Table').on('click', '.add-row-slat', function() {
    console.log('Add row clicked');
});
```

#### 3. 컬럼 수가 맞지 않는 경우
```php
// 컬럼 수 계산
$totalColumns = 84; // 기본 컬럼 수
if ($user_idtem === 'pro') {
    $totalColumns += 2; // 개발자 모드 추가 컬럼
}
echo "<!-- Total columns: {$totalColumns} -->";
```

## 📚 관련 파일

### 🔗 **의존성 파일**
- `Bootstrap CSS/JS`: UI 프레임워크
- `Bootstrap Icons`: 아이콘 라이브러리
- `jQuery`: JavaScript 라이브러리

### 🔗 **연관 파일**
- `common_addrowJS.php`: 행 추가 JavaScript
- `common_screen.php`: 스크린 테이블 생성
- `estimateSlat.php`: 철재 스라트 견적 메인 페이지
- `write_form.php`: 견적 작성 폼

### 🔗 **JavaScript 연동**
- `estimateslat_view`: 테이블 표시/숨김
- `viewEstimateSlatUnit`: 단가표 보기
- `viewEstimateSlat`: 견적서 보기
- `viewEstimateSlatDetail`: 산출내역서 보기
- `add-row-slat`: 행 추가 기능

## 🎯 스크린 vs 철재 차이점

### 🔍 **주요 차이점**

#### **1. 투시창 기능**
- **스크린**: 투시창 관련 컬럼 없음
- **철재**: `col4_quartz` (투시창선택) 추가

#### **2. 수량 구분**
- **스크린**: 셔터수량만 존재
- **철재**: 투시창수량 + 셔터수량 분리

#### **3. 색상 테마**
- **스크린**: 파란색 (`bg-primary`)
- **철재**: 초록색 (`bg-success`)

#### **4. 컬럼 수**
- **스크린**: 77개 컬럼
- **철재**: 84개 컬럼 (7개 추가)

#### **5. 특수 컬럼**
- **스크린**: `col18_brand`, `col18`, `col18_wireless`
- **철재**: `col19_brand`, `col19`, `col19_wireless`

## 🎯 향후 개선 방향

### 🔄 **코드 리팩토링**
- 함수 분리 및 모듈화
- 설정 파일 분리
- 템플릿 엔진 도입 고려

### 🎨 **UI/UX 개선**
- 드래그 앤 드롭 컬럼 재정렬
- 컬럼 숨김/표시 기능
- 실시간 검증 메시지

### ⚡ **성능 최적화**
- 가상 스크롤링 도입
- 지연 로딩 구현
- 메모리 사용량 최적화

### 🔧 **기능 확장**
- 동적 컬럼 추가/제거
- 사용자 정의 테이블 템플릿
- 다국어 지원

---

**📅 문서 버전**: 1.0  
**👨‍💻 작성자**: 개발팀  
**📝 최종 수정일**: 2024-12-24  
**🔗 관련 문서**: [견적 시스템 전체 가이드](./README.md), [common_addrowJS 개발자 가이드](./common_addrowJS_developer_guide.md), [common_screen 개발자 가이드](./common_screen_developer_guide.md)