SamProject/sam-kd
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1f4c49792de8f538853614c0a695633c13b7e036
sam-kd/0readme/estimate/common_slat_developer_guide.md
hskwon aca1767eb9 초기 커밋: 5130 레거시 시스템 
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경
- DB 연결 하드코딩 → .env 기반으로 변경
- MySQL strict mode DATE 오류 수정
2025-12-10 20:14:31 +09:00

15 KiB
Raw Blame History

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()

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단계 헤더 (기본 정보)

<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단계 헤더 (주요 카테고리)

<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단계 헤더 (모터 상세)

<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단계 헤더 (세부 구성요소)

<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단계 헤더 (구체적 사양)

<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단계 헤더 (최종 세부사항)

<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 클래스 활용
  • 모바일 최적화된 테이블 레이아웃
  • 스크롤 가능한 테이블 구조

🔘 버튼 시스템

<!-- 기본 버튼들 -->
<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): 개발자 모드 컬럼 번호

🔧 개발자 모드 기능

👨‍💻 개발자 모드 활성화

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: 50301.4T 각파이프

부자재 (82-84)

  • col82: 조인트바
  • col83: 앵글
  • col84: 기타 부자재

🔧 개발자 사용법

📝 기본 사용법

// 기본 철재 스라트 테이블 생성
generateTableSection_slat('estimateSlat', '철재 스라트 견적', 'bg-success', '', '견적서', 'edit');

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

🎯 조건부 버튼 표시

// 견적서 모드에서만 단가표 버튼 표시
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 생성

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

🚨 주의사항

⚠️ 필수 의존성

  • Bootstrap 5.x
  • Bootstrap Icons
  • jQuery (JavaScript 연동용)

🔒 보안 고려사항

  • 사용자 권한에 따른 버튼 표시 제어
  • XSS 방지를 위한 출력 이스케이프 처리
  • SQL 인젝션 방지를 위한 서버 사이드 검증

📱 성능 최적화

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

🐛 디버깅 가이드

🔍 개발자 모드 활용

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

🛠️ 일반적인 문제 해결

1. 테이블이 표시되지 않는 경우

// 테이블 ID 확인
echo "<!-- Table ID: {$id}Table -->";
// 컨테이너 확인
echo "<!-- Container: estimate_slatDiv -->";

2. 버튼이 작동하지 않는 경우

// JavaScript에서 테이블 ID 확인
console.log('Table ID:', '{$id}Table');
// 이벤트 바인딩 확인
$('#{$id}Table').on('click', '.add-row-slat', function() {
    console.log('Add row clicked');
});

3. 컬럼 수가 맞지 않는 경우

// 컬럼 수 계산
$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
🔗 관련 문서: 견적 시스템 전체 가이드, common_addrowJS 개발자 가이드, common_screen 개발자 가이드