정보통신품셈최종본

 

고급 통신공사 표준품셈 자동산출 시스템 v2.1

<!-- 1. 프로젝트 기본정보 -->
<section class="mb-8">
  <h2 class="text-lg font-bold mb-4 flex items-center gap-2">
    <i class="fas fa-clipboard-list text-blue-700"></i> 프로젝트 기본정보
  </h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <div>
      <label class="font-medium" for="projectName">공사명 <span class="text-red-500">*</span></label>
      <input id="projectName" class="input-sm mt-1 block w-full border border-gray-300 rounded" placeholder="예: 광주 무선 인프라 구축공사" required>
    </div>
    <div>
      <label class="font-medium" for="projectDate">작성일자 <span class="text-red-500">*</span></label>
      <input id="projectDate" type="date" class="input-sm mt-1 block w-full border border-gray-300 rounded" required>
    </div>
    <div>
      <label class="font-medium" for="projectLocation">공사 위치</label>
      <input id="projectLocation" class="input-sm mt-1 block w-full border border-gray-300 rounded" placeholder="예: 광주시 북구 월산로 112">
    </div>
    <div>
      <label class="font-medium" for="contractor">시공사</label>
      <input id="contractor" class="input-sm mt-1 block w-full border border-gray-300 rounded" placeholder="예: (주)신한테크">
    </div>
    <div>
      <label class="font-medium" for="managerName">담당자</label>
      <input id="managerName" class="input-sm mt-1 block w-full border border-gray-300 rounded" placeholder="홍길동">
    </div>
  </div>
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mt-4">
    <div>
      <label class="font-medium" for="standardYear">품셈 년도</label>
      <select id="standardYear" class="input-sm mt-1 block w-full border border-gray-300 rounded">
        <option value="2025">2025년</option>
        <option value="2024" selected>2024년</option>
        <option value="2023">2023년</option>
        <option value="2022">2022년</option>
      </select>
    </div>
    <div>
      <label class="font-medium" for="regionType">지역 구분</label>
      <select id="regionType" class="input-sm mt-1 block w-full border border-gray-300 rounded">
        <option value="metropolitan">대도시</option>
        <option value="city">중소도시</option>
        <option value="rural">농어촌</option>
        <option value="mountainous">산간지역</option>
        <option value="island">도서지역</option>
      </select>
    </div>
    <div>
      <label class="font-medium" for="projectScale">공사 규모</label>
      <select id="projectScale" class="input-sm mt-1 block w-full border border-gray-300 rounded">
        <option value="small">소규모 (1억 미만)</option>
        <option value="medium" selected>중규모 (1억~10억)</option>
        <option value="large">대규모 (10억 이상)</option>
      </select>
    </div>
    <div>
      <label class="font-medium" for="projectType">공사 유형</label>
      <select id="projectType" class="input-sm mt-1 block w-full border border-gray-300 rounded">
        <option value="new">신설공사</option>
        <option value="extension">증설공사</option>
        <option value="renovation">개량공사</option>
        <option value="maintenance">유지보수</option>
      </select>
    </div>
  </div>
</section>

<!-- 2. 할증/보정 설정 -->
<section class="mb-8">
  <h2 class="text-lg font-bold mb-4 flex items-center gap-2">
    <i class="fas fa-percent text-blue-700"></i> 요율·할증·보정 설정
  </h2>
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
    <div>
      <label class="font-medium" for="laborRate">노무비 할증률(%)</label>
      <input id="laborRate" type="number" class="input-sm mt-1 block w-full border border-gray-300 rounded" min="100" step="1" max="200" value="100">
      <small class="text-gray-500">현장 난이도/지역에 따라 가감 적용</small>
    </div>
    <div>
      <label class="font-medium" for="materialRate">재료비 할증률(%)</label>
      <input id="materialRate" type="number" class="input-sm mt-1 block w-full border border-gray-300 rounded" min="100" max="150" step="1" value="100">
      <small class="text-gray-500">시장 변동 및 특수자재 등 고려</small>
    </div>
    <div>
      <label class="font-medium" for="equipmentRate">장비비 할증률(%)</label>
      <input id="equipmentRate" type="number" class="input-sm mt-1 block w-full border border-gray-300 rounded" min="100" max="150" step="1" value="100">
      <small class="text-gray-500">장비 소요 및 희귀 장비 반영</small>
    </div>
    <div>
      <label class="font-medium" for="siteAdjustment">현장 보정값(%)</label>
      <input id="siteAdjustment" type="number" class="input-sm mt-1 block w-full border border-gray-300 rounded" min="-10" max="30" step="1" value="0">
      <small class="text-gray-500">특수 현장(지하시설/험지 등) (+/-%)</small>
    </div>
  </div>
  <div class="mt-3 text-xs text-gray-600">
    * 모든 할증 및 보정은 실 적용 금액에 곱해 자동 반영됩니다. (예: 110=10% 가산, -5=5% 감산)
  </div>
</section>

<!-- 3. 품셈 입력 영역 -->
<section class="mb-8">
  <h2 class="text-lg font-bold mb-4 flex items-center gap-2">
    <i class="fas fa-layer-group text-blue-700"></i> 작업/공종·세부 품셈 입력
  </h2>
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-3">
    <div>
      <label class="font-medium">공종 분류 <span class="text-red-500">*</span></label>
      <select id="mainCategory" class="input-sm block w-full border border-gray-300 rounded" onchange="updateSubAndItem()"></select>
    </div>
    <div>
      <label class="font-medium">세부 공종</label>
      <select id="subCategory" class="input-sm block w-full border border-gray-300 rounded" onchange="updateItemList()"></select>
    </div>
    <div>
      <label class="font-medium">작업 품목</label>
      <select id="itemCategory" class="input-sm block w-full border border-gray-300 rounded"></select>
    </div>
    <div class="flex items-end">
      <button id="addWorkItemBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold rounded p-2 flex items-center justify-center">
        <i class="fas fa-plus mr-1"></i> 항목 추가
      </button>
    </div>
  </div>
  <div class="overflow-x-auto">
    <table class="w-full border-t border-b border-gray-200 text-xs sm:text-sm table-min-w">
      <thead class="bg-blue-50">
        <tr>
          <th class="p-1">공종</th><th class="p-1">세부공종</th><th class="p-1">작업품명</th>
          <th class="p-1">단위</th><th class="p-1">수량</th>
          <th class="p-1">노무비</th><th class="p-1">재료비</th><th class="p-1">장비비</th>
          <th class="p-1">공식</th>
          <th class="p-1">삭제</th>
        </tr>
      </thead>
      <tbody id="workTableBody"></tbody>
    </table>
  </div>
  <div class="flex flex-wrap gap-4 mt-2">
    <button id="saveWorkItems" class="bg-green-700 hover:bg-green-800 text-white rounded px-3 py-1.5 text-xs no-print">
      <i class="fas fa-save mr-1"></i> 자동 저장
    </button>
    <button id="loadWorkItems" class="bg-yellow-500 hover:bg-yellow-600 text-white rounded px-3 py-1.5 text-xs no-print">
      <i class="fas fa-folder-open mr-1"></i> 불러오기
    </button>
    <input id="fileInput" type="file" accept=".json" class="hidden"/>
    <div id="saveStatus" class="text-xs text-blue-700 flex items-center"></div>
  </div>
  <div class="flex flex-col sm:flex-row gap-1 text-xs text-gray-500 mt-1">
    <div>※ 품셈 DB는 실무 기준 확장형 품셈DB로 최신 개정(2024년) 기준 대폭 업데이트 적용. 품명 직접 검색/선택 지원(키보드: Alt+↓)</div>
  </div>
</section>

<!-- 4. 비용 집계 및 분석 -->
<section class="mb-8">
  <h2 class="text-lg font-bold mb-4 flex items-center gap-2">
    <i class="fas fa-chart-bar text-blue-700"></i> 산출 결과·공종별 분석
  </h2>
  <div class="flex flex-col lg:flex-row gap-6">
    <div class="flex-1 min-w-[320px]">
      <div class="flex gap-2 mb-2">
        <div class="flex-1 bg-blue-50 rounded-lg p-3 text-center">
          <span class="block text-gray-500 text-xs mb-0.5">노무비 합계</span>
          <span id="sumLabor" class="text-blue-900 font-bold text-base font-value">0</span>
          <span class="text-xs text-gray-400">원</span>
        </div>
        <div class="flex-1 bg-yellow-50 rounded-lg p-3 text-center">
          <span class="block text-gray-500 text-xs mb-0.5">재료비 합계</span>
          <span id="sumMaterial" class="text-yellow-900 font-bold text-base font-value">0</span>
          <span class="text-xs text-gray-400">원</span>
        </div>
        <div class="flex-1 bg-green-50 rounded-lg p-3 text-center">
          <span class="block text-gray-500 text-xs mb-0.5">장비비 합계</span>
          <span id="sumEquipment" class="text-green-800 font-bold text-base font-value">0</span>
          <span class="text-xs text-gray-400">원</span>
        </div>
      </div>
      <div class="bg-gray-50 rounded-lg px-4 py-3 mt-1 text-sm font-bold text-right">
        총 공사비:<span id="totalCost" class="text-blue-700 ml-3 font-value text-lg">0 원</span>
      </div>
      <div class="text-xs text-right text-gray-400 mt-1">* 모든 할증·보정 적용금액 기준</div>
    </div>
    <div class="flex-1 min-w-[284px]">
      <canvas id="costChart" height="200"></canvas>
    </div>
  </div>
  <!-- 공종별 상세 분석 -->
  <div class="mt-6">
    <div class="font-semibold mb-2 text-sm flex items-center gap-2">
      <i class="fas fa-cogs text-blue-500"></i> 공종별 상세 비용 분석
    </div>
    <div class="overflow-x-auto">
      <table class="w-full table-min-w border border-gray-100 bg-gray-50 rounded-lg text-xs print:border">
        <thead class="bg-blue-100">
          <tr>
            <th class="p-1 border">공종</th>
            <th class="p-1 border">합산 노무비</th>
            <th class="p-1 border">합산 재료비</th>
            <th class="p-1 border">합산 장비비</th>
            <th class="p-1 border">전체 비중(%)</th>
          </tr>
        </thead>
        <tbody id="categoryAnalysis"></tbody>
      </table>
    </div>
  </div>
</section>

<!-- 5. 고급 자동화 보고서 -->
<section>
  <h2 class="text-lg font-bold mb-4 flex items-center gap-2">
    <i class="fas fa-file-alt text-blue-700"></i> 산출 내역·견적 보고서 (최종)
  </h2>
  <div class="border rounded-lg bg-gray-50 p-4 print:p-1 print:border print:rounded-none">
    <div class="flex flex-col sm:flex-row items-start gap-3 mb-2">
      <div class="flex-1 mb-1">
        <div class="font-bold text-base" id="reportName">공사명: -</div>
        <div class="text-sm" id="reportLocation">위치: -</div>
        <div class="text-sm" id="reportContractor">시공사: -</div>
        <div class="text-sm" id="reportManager">담당: -</div>
        <div class="text-xs text-gray-500 mt-1">품셈년도: <span id="reportYear">-</span>, 지역: <span id="reportRegion">-</span>, 유형: <span id="reportType">-</span></div>
      </div>
      <div class="text-xs text-gray-500 mt-1">작성일자: <span id="reportDate">-</span></div>
    </div>
    <div class="overflow-x-auto mt-2">
      <table class="w-full border-t border-b border-gray-300 bg-white rounded-lg text-xs sm:text-sm table-min-w print:border">
        <thead class="bg-blue-100">
          <tr>
            <th class="p-1.5 border">공종</th>
            <th class="p-1.5 border">세부공종</th>
            <th class="p-1.5 border">작업명</th>
            <th class="p-1.5 border">단위</th>
            <th class="p-1.5 border">수량</th>
            <th class="p-1.5 border">노무비(원)</th>
            <th class="p-1.5 border">재료비(원)</th>
            <th class="p-1.5 border">장비비(원)</th>
            <th class="p-1.5 border">합계(원)</th>
            <th class="p-1.5 border">공식/비고</th>
          </tr>
        </thead>
        <tbody id="reportTableBody"></tbody>
        <tfoot>
          <tr class="bg-blue-50 font-bold">
            <td colspan="5" class="text-right border px-3">합계</td>
            <td class="border px-2" id="reportSumLabor">0</td>
            <td class="border px-2" id="reportSumMaterial">0</td>
            <td class="border px-2" id="reportSumEquipment">0</td>
            <td class="border px-2" id="reportSumTotal">0</td>
            <td class="border"></td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="mt-8 text-xs text-gray-700">
      <div class="font-bold mb-1">[견적 공지 및 유의사항]</div>
      <ul class="list-disc ml-5">
        <li>본 산출 산정 및 견적서는 확장형 표준품셈과 실제 현장할증을 모두 적용한 결과입니다.</li>
        <li>특수상황(험지/지상/지하/전용 노선 등)은 별도 지급 기준(별표)을 참조 바랍니다.</li>
        <li>프로그램 자동산출값은 참고자료용이며, 최종 견적 확정 전 반드시 발주·시행기관 검토/협의 후 제안합니다.</li>
      </ul>
    </div>
  </div>
</section>