# common_screen.php 개발자 가이드

## 📋 개요

`common_screen.php`는 방화셔터 견적 시스템의 스크린 견적 테이블을 동적으로 생성하는 핵심 PHP 컴포넌트입니다. 이 파일은 복잡한 HTML 테이블 구조를 함수화하여 재사용 가능한 형태로 제공하며, 스크린 견적서 작성에 필요한 모든 컬럼과 기능을 포함합니다.

## 🏗️ 파일 구조

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

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

## 🔧 핵심 기능

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

#### 매개변수
- `$id`: 테이블의 고유 식별자 (예: 'estimateScreen')
- `$title`: 테이블 섹션 제목
- `$badgeClass`: 배지 스타일 클래스 (기본값: 'bg-primary')
- `$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='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='4' colspan='3'> 연동제어기</th>
    <th rowspan='2' colspan='7'> ⑤모터</th>
    <th rowspan='1' colspan='36'> 절곡</th>
    <th rowspan='1' colspan='14'> 부자재</th>
</tr>
```

#### **2단계 헤더 (주요 카테고리)**
```html
<tr>
    <th rowspan='2' colspan='13'>⑥가이드레일(한쌍)</th>
    <th rowspan='2' colspan='13'>⑦케이스(셔터박스)</th>
    <th rowspan='2' colspan='10'>⑧하단마감재</th>
    <th rowspan='2' colspan='8'>⑨감기샤프트</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'> 레일용 연기차단재</th>
    <th colspan='12'> 케이스 </th>
    <th> 케이스용<br>연기차단재</th>
    <th colspan='3'>하장바</th>
    <th colspan='3'>엘바</th>
    <th colspan='3'>보강평철</th>
    <th colspan='1'>무게평철</th>
    <th rowspan='3'>인치</th>
    <th colspan='7'>원형파이프</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'>사이즈<br>(인치)</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 colspan='5'>W50</th>
    <th colspan='8'>셔터박스</th>
    <th rowspan='1'>상부덮개</th>
    <th colspan='3'>마구리</th>
    <th rowspan='2' colspan='1'>W80</th>
    <th colspan='3'>60*40</th>
    <th colspan='3'>60*17</th>
    <th colspan='3'>50</th>
    <th colspan='1'>12T</th>
    <th colspan='1'>연결 샤프트</th>
    <th colspan='3'>4</th>
    <th colspan='3'>5</th>
</tr>
```

#### **6단계 헤더 (최종 세부사항)**
```html
<tr>
    <th rowspan='1'>2438</th>
    <th rowspan='1'>3000</th>
    <th rowspan='1'>3500</th>
    <th rowspan='1'>4000</th>
    <th rowspan='1'>4300</th>
    <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*389</th>
    <th>size</th>
    <th>날개</th>
    <th>수량</th>
    <th>size</th>
    <th>3000</th>
    <th>4000</th>
    <th>size</th>
    <th>3000</th>
    <th>4000</th>
    <th>size</th>
    <th>3000</th>
    <th>4000</th>
    <th>2000</th>
    <th>인치 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/&nbsp; &nbsp;  길이&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/ &nbsp; &nbsp;수량</th>
    <th>3000</th>
    <th>4500</th>
    <th>6000</th>
    <th>6000</th>
    <th>7000</th>
    <th>8200</th>
    <th>보강개수환산</th>
    <th>size</th>
    <th>3000</th>
    <th>6000</th>
    <th>3000</th>
    <th>2500</th>
</tr>
```

## 🎨 UI/UX 특징

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

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

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

### 🎯 **색상 코딩 시스템**
- **파란색 (text-primary)**: 스크린 관련 항목
- **빨간색 (text-danger)**: 부자재 관련 항목
- **초록색 (text-success)**: 개발자 모드 컬럼 번호
- **보라색 (text-primary)**: 모터 견적가 포함 표시

## 🔧 개발자 모드 기능

### 👨‍💻 **개발자 모드 활성화**
```php
if ($user_idtem === 'pro') {
    // 컬럼명 표시 행 추가
    echo "<tr> <th> </th> ";
    for ($i = 1; $i <= 71; $i++) {
        // 특수 컬럼 처리
        if($i==10) {
            $j = 'col10_SW'; // 스크린제작치수 가로
            echo "<th class='text-primary'>$j</th>";
            $j = 'col11_SH'; // 스크린제작치수 높이
            echo "<th class='text-primary'>$j</th>";
            $j = 'col' . $i;
        }
        // ... 추가 특수 처리
        echo "<th class='text-primary'>$j</th>";
    }
    echo "</tr>";
    
    // 컬럼 번호 표시 행 추가
    echo "<tr> <th> </th> ";
    for ($i = 2; $i <= 77; $i++) {
        echo "<th class='text-success'>$i</th>";
    }
    echo "</tr>";
}
```

### 📊 **특수 컬럼 처리**
- **col10**: 스크린제작사이즈 (3개 컬럼으로 분할)
  - `col10_SW`: 가로 사이즈
  - `col11_SH`: 세로 사이즈
  - `col10`: 통합 사이즈
- **col18**: 모터 관련 (3개 컬럼으로 분할)
  - `col18_brand`: 계산서 발행 주체
  - `col18`: 전원
  - `col18_wireless`: 유/무선
- **col45**: 마구리 윙 관련
  - `col45`: 기본 필드
  - `col45_wing`: 마구리 날개 여부

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

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

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

#### **연동제어기 (18-20)**
- **col18**: 연동제어기 관련 설정

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

#### **가이드레일 (28-40)**
- **col28-33**: 가이드레일 마감/보강재
- **col34**: 하부base1
- **col35**: 하부base2
- **col36-40**: 레일용 연기차단재

#### **케이스 (41-52)**
- **col41-52**: 셔터박스 관련 설정
- **col53**: 케이스용 연기차단재

#### **하단마감재 (54-63)**
- **col54-56**: 하장바
- **col57-59**: 엘바
- **col60-62**: 보강평철
- **col63**: 무게평철

#### **감기샤프트 (64-71)**
- **col64**: 인치
- **col65-71**: 원형파이프 (다양한 길이)

#### **각파이프 (72-75)**
- **col72-75**: 50*30*1.4T 각파이프

#### **부자재 (76-77)**
- **col76**: 환봉
- **col77**: 앵글

## 🔧 개발자 사용법

### 📝 **기본 사용법**
```php
// 기본 스크린 테이블 생성
generateTableSection('estimateScreen', '스크린 견적', 'bg-primary', '', '견적서', 'edit');

// 개발자 모드로 테이블 생성
generateTableSection('estimateScreen', '스크린 견적', 'bg-primary', 'pro', '견적서', 'view');
```

### 🎯 **조건부 버튼 표시**
```php
// 견적서 모드에서만 단가표 버튼 표시
if($process == '견적서') {
    echo "<button type='button' id='viewEstimateUnit' class='btn btn-secondary btn-sm'>단가표</button>";
    
    // 뷰 모드에서만 견적서/산출내역서 버튼 표시
    if($mode === 'view') {
        echo "<button type='button' id='viewEstimate'>견적서</button>";
        echo "<button type='button' id='viewEstimateDetail'>산출내역서</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_screenDiv -->";
```

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

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

## 📚 관련 파일

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

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

### 🔗 **JavaScript 연동**
- `estimateScreen_view`: 테이블 표시/숨김
- `viewEstimateUnit`: 단가표 보기
- `viewEstimate`: 견적서 보기
- `viewEstimateDetail`: 산출내역서 보기
- `add-row`: 행 추가 기능

## 🎯 향후 개선 방향

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

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

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

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

---

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