SamProject/sam-kd
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1dcfe05b8bc572f0519374be7f740df66fa2cd7e
sam-kd/0readme/estimate/common_screen_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

13 KiB
Raw Blame History

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

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

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

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

<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'> 레일용 연기차단재</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단계 헤더 (구체적 사양)

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

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

🔘 버튼 시스템

<!-- 기본 버튼들 -->
<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): 모터 견적가 포함 표시

🔧 개발자 모드 기능

👨‍💻 개발자 모드 활성화

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

부자재 (76-77)

  • col76: 환봉
  • col77: 앵글

🔧 개발자 사용법

📝 기본 사용법

// 기본 스크린 테이블 생성
generateTableSection('estimateScreen', '스크린 견적', 'bg-primary', '', '견적서', 'edit');

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

🎯 조건부 버튼 표시

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

// 테이블 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_screenDiv -->";

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

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

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

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