509 lines
15 KiB
Markdown
509 lines
15 KiB
Markdown
|
# 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)
|