@dssp/supervision 1.0.0 → 1.0.1

package/dist-client/pages/checklist/checklist-view.js

@@ -0,0 +1,926 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/fab/fab.js';
+import '@material/web/icon/icon.js';
+import gql from 'graphql-tag';
+import { client } from '@operato/graphql';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles';
+import { CHECKLIST_MAIN_TYPE_LIST, BuildingInspectionStatus, BUILDING_INSPECTION_STATUS_DISPLAY, BUILDING_INSPECTION_RE_STATUS_DISPLAY } from '../building-inspection/building-inspection-list';
+import '@operato/input/ox-input-signature.js';
+import { store, connect } from '@operato/shell';
+import { openPopup } from '@operato/layout';
+import './comment-list-popup';
+import './attachment-list-popup';
+import './kcs-criteria-popup';
+import '../../stt/speech-to-text';
+import { parseSpeechCommand } from '../../stt/stt-utils';
+import { notify } from '@operato/layout';
+let ChecklistView = class ChecklistView extends connect(store)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.mode = "VIEWER" /* ChecklistMode.VIEWER */;
+        this.checklist = {};
+        this.manager = {};
+        this.buildingComplex = {
+            id: '',
+            taskConstructorEmails: [],
+            overallConstructorEmails: [],
+            taskSupervisoryEmails: [],
+            overallSupervisoryEmails: []
+        };
+        this.status = BuildingInspectionStatus.WAIT;
+        this.failCount = 0;
+        this.projectType = "DSSP" /* ProjectType.DSSP */;
+        this.isListening = false;
+        this._tooltip = null;
+        this._kcsDetail = null;
+        this._kcsDetailItem = '';
+        this._siteSpecDetail = null;
+        this._siteSpecDetailItem = '';
+        this._onStartSTT = (e) => {
+            e.preventDefault();
+            const stt = this.renderRoot.querySelector('#stt');
+            if (!this.isListening) {
+                stt === null || stt === void 0 ? void 0 : stt.startListening();
+            }
+        };
+        this._onStopSTT = (e) => {
+            e.preventDefault();
+            const stt = this.renderRoot.querySelector('#stt');
+            if (this.isListening) {
+                stt === null || stt === void 0 ? void 0 : stt.stopListening();
+            }
+        };
+        this._hideSiteSpecDetail = () => {
+            this._siteSpecDetail = null;
+            this.requestUpdate();
+        };
+        this._hideKcsDetail = () => {
+            this._kcsDetail = null;
+            this.requestUpdate();
+        };
+    }
+    firstUpdated() {
+        const stt = this.renderRoot.querySelector('#stt');
+        if (stt) {
+            stt.addEventListener('stt-result', (e) => {
+                var _a, _b;
+                const text = e.detail.finalTranscript;
+                const parsed = parseSpeechCommand(text, ((_b = (_a = this.checklist) === null || _a === void 0 ? void 0 : _a.checklistItems) === null || _b === void 0 ? void 0 : _b.length) || 20);
+                this._applySpeechCommand(parsed);
+            });
+            stt.addEventListener('stt-status', (e) => {
+                // 음성 인식 상태에 따라 버튼 상태 갱신
+                const status = e.detail.status;
+                if (status && status.includes('Listening'))
+                    this.isListening = true;
+                if (status && (status.includes('종료') || status.includes('Stopped')))
+                    this.isListening = false;
+                this.requestUpdate();
+            });
+        }
+    }
+    /**
+     * 음성 명령 해석 결과를 체크리스트에 반영
+     */
+    async _applySpeechCommand(parsed) {
+        // 합격/불합격 처리 예시 (시공자 기준)
+        if (parsed.rowIds && parsed.isPass !== null) {
+            this.checklist.checklistItems = this.checklist.checklistItems.map((item, idx) => parsed.rowIds.includes(idx + 1) ? Object.assign(Object.assign({}, item), { constructionConfirmStatus: parsed.isPass ? 'T' : 'F' }) : item);
+            this.requestUpdate();
+        }
+        // 조치사항 처리 예시
+        if (parsed.rowIds && parsed.actionText) {
+            const { rowIds, actionText } = parsed;
+            const checklistItems = this.checklist.checklistItems;
+            const ids = rowIds.length > 0 ? rowIds : Array.from({ length: checklistItems.length }, (_, i) => i + 1); // rowIds가 빈값이면 모든 아이템에 대해 조치사항 등록
+            let count = 0;
+            for (const rowId of ids) {
+                const item = checklistItems[rowId - 1];
+                count += await this._createChecklistItemComment(item.id, actionText);
+                this._refreshItem({ detail: { checklistItemId: item.id } });
+            }
+            notify({ message: `${count}건의 조치사항을 등록했습니다.` });
+        }
+    }
+    // 체크리스트 아이템 코멘트 생성
+    async _createChecklistItemComment(checklistItemId, comment) {
+        const response = await client.mutate({
+            mutation: gql `
+        mutation CreateChecklistItemComment($checklistItemComment: NewChecklistItemComment!) {
+          createChecklistItemComment(checklistItemComment: $checklistItemComment) {
+            id
+          }
+        }
+      `,
+            variables: {
+                checklistItemComment: { comment, checklistItemId }
+            }
+        });
+        return !response.errors ? 1 : 0;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const today = this._getDate(new Date());
+        // 시공자 스탭 여부
+        const isConstructorStep = this.status == BuildingInspectionStatus.WAIT ||
+            this.status == BuildingInspectionStatus.OVERALL_WAIT ||
+            this.status == BuildingInspectionStatus.FAIL;
+        // 감리자 스탭 여부
+        const isSupervisoryStep = this.status == BuildingInspectionStatus.REQUEST || this.status == BuildingInspectionStatus.OVERALL_REQUEST;
+        // 현재 스탭에 해당하는 계정인지 체크 (편집모드만)
+        let havePermissionByStatus = false;
+        let isTaskConstructor = false;
+        let isOverallConstructor = false;
+        let isTaskSupervisory = false;
+        let isOverallSupervisory = false;
+        if (this.mode == "EDITOR" /* ChecklistMode.EDITOR */ && this.status) {
+            const email = (_b = (_a = store.getState().auth) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.email;
+            // 현재 유저가 "공종별 시공 관리자" 인지 체크
+            isTaskConstructor = ((_c = this.buildingComplex.taskConstructorEmails) === null || _c === void 0 ? void 0 : _c.includes(email)) || false;
+            // 현재 유저가 "총괄 시공 책임자" 인지 체크
+            isOverallConstructor = ((_d = this.buildingComplex.overallConstructorEmails) === null || _d === void 0 ? void 0 : _d.includes(email)) || false;
+            // 현재 유저가 "공종별 감리 책임자" 인지 체크
+            isTaskSupervisory = ((_e = this.buildingComplex.taskSupervisoryEmails) === null || _e === void 0 ? void 0 : _e.includes(email)) || false;
+            // 현재 유저가 "총괄 감리 책임자" 인지 체크
+            isOverallSupervisory = ((_f = this.buildingComplex.overallSupervisoryEmails) === null || _f === void 0 ? void 0 : _f.includes(email)) || false;
+            // 스탭이 시공자 스탭일때에 내가 시공자 권한이 있는지 체크
+            havePermissionByStatus = isConstructorStep
+                ? isTaskConstructor || isOverallConstructor
+                : isTaskSupervisory || isOverallSupervisory;
+        }
+        // 체크리스트 아이템 정렬
+        (_h = (_g = this.checklist) === null || _g === void 0 ? void 0 : _g.checklistItems) === null || _h === void 0 ? void 0 : _h.sort((a, b) => {
+            // 1순위: mainType 오름차순
+            if (a.mainType < b.mainType)
+                return -1;
+            if (a.mainType > b.mainType)
+                return 1;
+            // 2순위: detailType 오름차순
+            if (a.detailType < b.detailType)
+                return -1;
+            if (a.detailType > b.detailType)
+                return 1;
+            // 3순위: sequence 오름차순
+            return a.sequence - b.sequence;
+        });
+        const checklistItems = ((_j = this.checklist) === null || _j === void 0 ? void 0 : _j.checklistItems) || [];
+        const processedItems = this.drawChecklistItems(checklistItems);
+        const hasAnyDetailType = checklistItems.some(item => item.detailType);
+        return html `
+      ${this.mode == "EDITOR" /* ChecklistMode.EDITOR */
+            ? html `
+              <speech-to-text id="stt"></speech-to-text>
+              <md-fab
+                class="stt-fab"
+                ?active=${this.isListening}
+                @mousedown=${this._onStartSTT}
+                @mouseup=${this._onStopSTT}
+                @mouseleave=${this._onStopSTT}
+                @touchstart=${this._onStartSTT}
+                @touchend=${this._onStopSTT}
+                ?disabled=${false}
+                .label=${this.isListening ? '말씀하세요...' : '길게 눌러서 음성 인식'}
+              >
+                <md-icon slot="icon">mic</md-icon>
+              </md-fab>
+            `
+            : ''}
+
+      <div title-row>
+        <div name>${this.checklist.name}</div>
+      </div>
+      <table header>
+        <tr>
+          <th>공종</th>
+          <td>${this.checklist.constructionType}</td>
+          <th>문서 번호</th>
+          <td>${this.checklist.documentNo}</td>
+        </tr>
+        <tr>
+          <th>세부 공종</th>
+          <td>${this.checklist.constructionDetailType}</td>
+          <th>위치 및 부위</th>
+          <td>${this.checklist.location}</td>
+        </tr>
+        <tr>
+          ${this.projectType == "DSSP" /* ProjectType.DSSP */
+            ? html `
+                  <th>담당자</th>
+                  <td>${((_k = this.manager) === null || _k === void 0 ? void 0 : _k.name) || ''}</td>
+                `
+            : html `
+                  <th>검측 부위</th>
+                  <td>${((_m = (_l = this.checklist) === null || _l === void 0 ? void 0 : _l.inspectionParts) === null || _m === void 0 ? void 0 : _m.join(', ')) || ''}</td>
+                `}
+
+          <th>검측 상태</th>
+          <td>
+            ${(this.failCount > 0 ? BUILDING_INSPECTION_RE_STATUS_DISPLAY : BUILDING_INSPECTION_STATUS_DISPLAY)[this.status]}
+          </td>
+        </tr>
+      </table>
+
+      <table body>
+        <thead>
+          <tr>
+            <th colspan="${hasAnyDetailType ? 2 : 1}" rowspan="3" type>구분</th>
+            <th rowspan="3" inspection-name>검사항목</th>
+            <th rowspan="3" criteria>KCS 시방서 기준</th>
+            <th rowspan="3" criteria>현장 시방서 기준</th>
+            <th colspan="4" result>검사결과</th>
+            <th rowspan="3" small>첨부자료</th>
+            <th rowspan="3" small>조치사항</th>
+          </tr>
+          <tr>
+            <th colspan="2">시공자</th>
+            <th colspan="2">감리자</th>
+          </tr>
+          <tr>
+            <th>적합</th>
+            <th>부적합</th>
+            <th>적합</th>
+            <th>부적합</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${processedItems.map(({ item, showMainTypeCell, mainTypeRowspan, showDetailTypeCell, detailTypeRowspan }, idx) => {
+            var _a;
+            const recs = ((_a = [
+                item.recommendation1,
+                item.recommendation2,
+                item.recommendation3,
+                item.recommendation4,
+                item.recommendation5
+            ]) === null || _a === void 0 ? void 0 : _a.filter(r => r)) || [];
+            const hasRecs = recs.length > 0;
+            const kcs = this._parseKcs(item.kcsCriteria);
+            const hasKcs = !!kcs;
+            const siteSpec = item.siteSpecCriteria || item.inspctionCriteria || '';
+            return html ` <tr>
+              ${showMainTypeCell
+                ? html `<td main-type bold rowspan="${mainTypeRowspan}">
+                      ${CHECKLIST_MAIN_TYPE_LIST[item.mainType] || item.mainType}
+                    </td>`
+                : ''}
+              ${hasAnyDetailType
+                ? showDetailTypeCell
+                    ? html ` <td bold rowspan="${detailTypeRowspan}">${item.detailType}</td> `
+                    : ''
+                : ''}
+
+              <td
+                ?has-recommendation=${hasRecs}
+                @mouseenter=${hasRecs ? (e) => this._showRecTooltip(e, item.id || idx, recs) : null}
+                @mouseleave=${hasRecs ? () => this._hideRecTooltip() : null}
+              >
+                ${idx + 1}. ${item.name}
+                ${hasRecs ? html `<md-icon style="font-size:14px;vertical-align:middle;color:#2e79be;">info</md-icon>` : ''}
+              </td>
+              <td kcs-criteria ?has-kcs=${hasKcs} @click=${hasKcs ? () => this._showKcsDetail(kcs, item.name) : null}>
+                ${(kcs === null || kcs === void 0 ? void 0 : kcs.file_label) || ''}
+                ${hasKcs ? html `<md-icon style="font-size:14px;vertical-align:middle;color:#2e79be;">search</md-icon>` : ''}
+              </td>
+              <td
+                site-spec-criteria
+                ?has-site-spec=${!!siteSpec}
+                @click=${siteSpec ? () => this._showSiteSpecDetail(siteSpec, item.name) : null}
+              >
+                ${this._summarize(siteSpec)}
+                ${siteSpec ? html `<md-icon style="font-size:14px;vertical-align:middle;color:#2e79be;">search</md-icon>` : ''}
+              </td>
+              <td radio>
+                <md-radio
+                  item-id=${item.id}
+                  item-name="constructionConfirmStatus"
+                  name=${'radio-construction-' + item.id}
+                  value="T"
+                  .checked=${item.constructionConfirmStatus === 'T'}
+                  ?disabled=${!isConstructorStep || !havePermissionByStatus}
+                  @change=${this._onChangeConfirmStatus}
+                ></md-radio>
+              </td>
+              <td radio>
+                <md-radio
+                  item-id=${item.id}
+                  item-name="constructionConfirmStatus"
+                  name=${'radio-construction-' + item.id}
+                  value="F"
+                  .checked=${item.constructionConfirmStatus === 'F'}
+                  ?disabled=${!isConstructorStep || !havePermissionByStatus}
+                  @change=${this._onChangeConfirmStatus}
+                ></md-radio>
+              </td>
+              <td radio>
+                <md-radio
+                  item-id=${item.id}
+                  item-name="supervisoryConfirmStatus"
+                  name=${'radio-supervisory-' + item.id}
+                  value="T"
+                  .checked=${item.supervisoryConfirmStatus === 'T'}
+                  ?disabled=${!isSupervisoryStep || !havePermissionByStatus}
+                  @change=${this._onChangeConfirmStatus}
+                ></md-radio>
+              </td>
+              <td radio>
+                <md-radio
+                  item-id=${item.id}
+                  item-name="supervisoryConfirmStatus"
+                  name=${'radio-supervisory-' + item.id}
+                  value="F"
+                  .checked=${item.supervisoryConfirmStatus === 'F'}
+                  ?disabled=${!isSupervisoryStep || !havePermissionByStatus}
+                  @change=${this._onChangeConfirmStatus}
+                ></md-radio>
+              </td>
+              <td
+                attachment
+                ?disabled=${this.status == BuildingInspectionStatus.PASS}
+                @click=${() => this._onClickAttachment(item.id)}
+              >
+                <md-icon slot="icon">attach_file</md-icon>
+                <span>${(item === null || item === void 0 ? void 0 : item.checklistItemAttachmentCount) || ''}</span>
+              </td>
+              <td comment ?disabled=${this.status == BuildingInspectionStatus.PASS} @click=${() => this._onClickComment(item.id)}>
+                <md-icon slot="icon">chat</md-icon>
+                <span>${(item === null || item === void 0 ? void 0 : item.checklistItemCommentCount) || ''}</span>
+              </td>
+            </tr>`;
+        })}
+        </tbody>
+      </table>
+
+      <table tail>
+        <tbody>
+          <tr first>
+            <th rowspan="2">시공자 점검일</th>
+            <td rowspan="2">
+              ${this.mode == "VIEWER" /* ChecklistMode.VIEWER */ ? today : this._getDate(this.checklist.constructionInspectionDate)}
+            </td>
+            <th>공종별 시공 관리자</th>
+            <td>
+              <span sign-text>(인)</span>
+              <ox-input-signature
+                .value=${this.checklist.taskConstructorSignature}
+                name="taskConstructorSignature"
+                @change=${this._onChangeSignature}
+                ?disabled=${(this.status != BuildingInspectionStatus.WAIT && this.status != BuildingInspectionStatus.FAIL) ||
+            !isTaskConstructor}
+              >
+              </ox-input-signature>
+            </td>
+          </tr>
+          <tr>
+            <th>총괄 시공 책임자</th>
+            <td>
+              <span sign-text>(인)</span>
+              <ox-input-signature
+                .value=${this.checklist.overallConstructorSignature}
+                name="overallConstructorSignature"
+                @change=${this._onChangeSignature}
+                ?disabled=${this.status != BuildingInspectionStatus.OVERALL_WAIT || !isOverallConstructor}
+              >
+              </ox-input-signature>
+            </td>
+          </tr>
+          <tr>
+            <th rowspan="2">감리자 점검일</th>
+            <td rowspan="2">
+              ${this.mode == "VIEWER" /* ChecklistMode.VIEWER */ ? today : this._getDate(this.checklist.supervisorInspectionDate)}
+            </td>
+            <th>공종별 감리 책임자</th>
+            <td>
+              <span sign-text>(인)</span>
+              <ox-input-signature
+                .value=${this.checklist.taskSupervisorySignature}
+                name="taskSupervisorySignature"
+                @change=${this._onChangeSignature}
+                ?disabled=${this.status != BuildingInspectionStatus.REQUEST || !isTaskSupervisory}
+              >
+              </ox-input-signature>
+            </td>
+          </tr>
+          <tr>
+            <th>총괄 감리 책임자</th>
+            <td>
+              <span sign-text>(인)</span>
+              <ox-input-signature
+                .value=${this.checklist.overallSupervisorySignature}
+                name="overallSupervisorySignature"
+                @change=${this._onChangeSignature}
+                ?disabled=${this.status != BuildingInspectionStatus.OVERALL_REQUEST || !isOverallSupervisory}
+              >
+              </ox-input-signature>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div footer>
+        <div>
+          - 검사결과는 1차, 2차로 구분 재검측시 2차에 기록하고 검사기준도 검사결과와 비교될 수 있도록 시방서 또는 도면 등에 있는
+          수치를 작성하며, 수치가 없는 검사항목은 시방서 또는 설계도서에 있는 내용과 검사한 내용으로 작성함
+        </div>
+        <div>- 검사항목 및 검사기준은 각 공종별로 감리원과 협의하여 작성할 것</div>
+      </div>
+
+      ${this._tooltip
+            ? html `
+              <div recommendation-tooltip style="left:${this._tooltip.x}px;top:${this._tooltip.y}px;">
+                <div tooltip-title>추천 검사 항목</div>
+                ${this._tooltip.recs.map(r => html `<div tooltip-item>${r}</div>`)}
+              </div>
+            `
+            : ''}
+      ${this._kcsDetail
+            ? html `<kcs-criteria-popup
+              .kcs=${this._kcsDetail}
+              .itemName=${this._kcsDetailItem}
+              @close=${this._hideKcsDetail}
+            ></kcs-criteria-popup>`
+            : ''}
+      ${this._siteSpecDetail
+            ? html `<kcs-criteria-popup
+              .popupTitle=${'현장 시방서 기준'}
+              .kcs=${{ text: this._siteSpecDetail }}
+              .itemName=${this._siteSpecDetailItem}
+              @close=${this._hideSiteSpecDetail}
+            ></kcs-criteria-popup>`
+            : ''}
+    `;
+    }
+    // 본문 앞 20글자 요약 (그 뒤는 ... 처리)
+    _summarize(text, length = 20) {
+        if (!text)
+            return '';
+        return text.length > length ? `${text.slice(0, length)}...` : text;
+    }
+    // 현장 시방서 기준 상세(본문 전체)를 팝업으로 표시
+    _showSiteSpecDetail(text, itemName = '') {
+        this._siteSpecDetail = text;
+        this._siteSpecDetailItem = itemName;
+        this.requestUpdate();
+    }
+    // KCS 기준 JSON 문자열을 오브젝트로 파싱 (file_label/clause/text 포함)
+    _parseKcs(kcsCriteria) {
+        if (!kcsCriteria)
+            return null;
+        try {
+            const obj = JSON.parse(kcsCriteria);
+            return obj && (obj.file_label || obj.text) ? obj : null;
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    // KCS 기준 상세(text)를 팝업으로 표시
+    _showKcsDetail(kcs, itemName = '') {
+        this._kcsDetail = kcs;
+        this._kcsDetailItem = itemName;
+        this.requestUpdate();
+    }
+    _onChangeConfirmStatus(e) {
+        var _a, _b;
+        const target = e.target;
+        const itemId = target.getAttribute('item-id');
+        const name = target.getAttribute('item-name') || '';
+        const value = target.value;
+        this.checklist.checklistItems = (_b = (_a = this.checklist) === null || _a === void 0 ? void 0 : _a.checklistItems) === null || _b === void 0 ? void 0 : _b.map(item => item.id == itemId ? Object.assign(Object.assign({}, item), { [name]: value }) : item);
+    }
+    _onChangeSignature(e) {
+        var _a;
+        const target = e.target;
+        const { name: userName } = (_a = store.getState().auth) === null || _a === void 0 ? void 0 : _a.user;
+        this.checklist[target.name] = target.value;
+        // 서명할 때 해당 사용자 ID도 업데이트
+        if (userName) {
+            switch (target.name) {
+                case 'taskConstructorSignature':
+                    this.checklist.taskConstructor = { name: userName };
+                    break;
+                case 'overallConstructorSignature':
+                    this.checklist.overallConstructor = { name: userName };
+                    break;
+                case 'taskSupervisorySignature':
+                    this.checklist.taskSupervisory = { name: userName };
+                    break;
+                case 'overallSupervisorySignature':
+                    this.checklist.overallSupervisory = { name: userName };
+                    break;
+            }
+        }
+    }
+    _getDate(date) {
+        if (!date)
+            return ' 년 월 일';
+        const _date = new Date(date) || new Date();
+        return _date.toLocaleDateString('ko-KR', {
+            timeZone: 'Asia/Seoul',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+        });
+    }
+    drawChecklistItems(checklistItems) {
+        const mainTypeRowspans = {};
+        const detailTypeRowspans = {};
+        let previousMainType = null;
+        let previousDetailType = null;
+        return checklistItems.map((item, index) => {
+            const mainType = item.mainType;
+            const detailType = item.detailType;
+            // mainType이 변경되면 rowspan을 계산
+            if (mainType !== previousMainType) {
+                mainTypeRowspans[mainType] = checklistItems.filter(i => i.mainType === mainType).length;
+                previousDetailType = null; // detailType 초기화
+            }
+            // detailType이 변경되면 rowspan을 계산
+            if (detailType !== previousDetailType) {
+                detailTypeRowspans[`${mainType}-${detailType}`] = checklistItems.filter(i => i.mainType === mainType && i.detailType === detailType).length;
+            }
+            const showMainTypeCell = mainType !== previousMainType;
+            const showDetailTypeCell = detailType !== previousDetailType;
+            const mainTypeRowspan = mainTypeRowspans[mainType];
+            const detailTypeRowspan = detailTypeRowspans[`${mainType}-${detailType}`];
+            // 이전 값을 업데이트
+            previousMainType = mainType;
+            previousDetailType = detailType;
+            return {
+                item,
+                showMainTypeCell,
+                mainTypeRowspan,
+                showDetailTypeCell,
+                detailTypeRowspan
+            };
+        });
+    }
+    _onClickComment(checklistItemId) {
+        openPopup(html `
+        <comment-list-popup
+          .checklistItemId=${checklistItemId}
+          .status=${this.status}
+          .mode=${this.mode}
+          @change-comment=${this._refreshItem.bind(this)}
+        ></comment-list-popup>
+      `, { backdrop: true, size: 'medium', title: '조치 사항' });
+    }
+    _onClickAttachment(checklistItemId) {
+        openPopup(html `
+        <attachment-list-popup
+          .checklistItemId=${checklistItemId}
+          .status=${this.status}
+          .mode=${this.mode}
+          @change-attachment=${this._refreshItem.bind(this)}
+        ></attachment-list-popup>
+      `, { backdrop: true, size: 'medium', title: '첨부 자료' });
+    }
+    async _refreshItem(e) {
+        var _a;
+        const { checklistItemId } = e.detail;
+        const response = await client.query({
+            query: gql `
+        query ChecklistItem($checklistItemId: String!) {
+          checklistItem(id: $checklistItemId) {
+            id
+            checklistItemCommentCount
+            checklistItemAttachmentCount
+          }
+        }
+      `,
+            variables: {
+                checklistItemId: checklistItemId
+            }
+        });
+        const checklistItem = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.checklistItem) || [];
+        this.checklist.checklistItems = this.checklist.checklistItems.map(item => {
+            return item.id != checklistItemId ? item : Object.assign(Object.assign({}, item), checklistItem);
+        });
+        this.requestUpdate();
+    }
+    _showRecTooltip(e, id, recs) {
+        const td = e.currentTarget;
+        const rect = td.getBoundingClientRect();
+        const tooltipHeight = recs.length * 24 + 40;
+        // 위에 공간이 부족하면 아래로
+        const showBelow = rect.top < tooltipHeight;
+        const x = rect.left;
+        const y = showBelow ? rect.bottom + 4 : rect.top - tooltipHeight;
+        this._tooltip = { id: String(id), x, y, recs };
+        this.requestUpdate();
+    }
+    _hideRecTooltip() {
+        this._tooltip = null;
+        this.requestUpdate();
+    }
+};
+ChecklistView.styles = [
+    ButtonContainerStyles,
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        padding: var(--spacing-large, 12px);
+        padding-top: 0;
+        font-size: 14px;
+        min-width: 800px;
+
+        position: relative;
+      }
+
+      [bold] {
+        font-weight: bold;
+      }
+
+      div[name] {
+        display: flex;
+        color: #586878;
+        font-size: 24px;
+        align-items: center;
+        justify-content: center;
+      }
+
+      table {
+        width: 100%;
+        font-size: 15px;
+        color: #586878;
+        text-align: left;
+        border-collapse: collapse;
+        td,
+        th {
+          border: 1px rgba(51, 51, 51, 0.2) solid;
+          padding-inline: var(--spacing-medium, 8px);
+          vertical-align: middle;
+        }
+        th {
+          background-color: #efefef;
+          font-weight: bold;
+        }
+        td {
+          height: 33px;
+          background-color: var(--md-sys-color-on-primary);
+          &[radio] {
+            text-align: center;
+            width: 50px;
+          }
+        }
+      }
+
+      table[header] {
+        margin-top: var(--spacing-small, 4px);
+
+        td {
+          min-width: 180px;
+          border-left: none;
+        }
+        th {
+          width: 110px;
+          border-right: none;
+        }
+      }
+
+      table[body] {
+        border: 2px solid var(--md-sys-color-on-primary-container);
+        border-bottom: none;
+        margin-top: var(--spacing-medium, 8px);
+
+        th {
+          text-align: center;
+
+          &[type] {
+            min-width: 150px;
+          }
+          &[inspection-name] {
+            min-width: 250px;
+          }
+          &[result] {
+            width: 270px;
+          }
+          &[criteria] {
+            width: 200px;
+          }
+          &[small] {
+            width: 60px;
+          }
+        }
+        td {
+          &[main-type] {
+            width: 50px;
+            text-align: center;
+            word-break: keep-all;
+          }
+
+          &[attachment] {
+            text-align: center;
+            cursor: pointer;
+
+            * {
+              vertical-align: middle;
+            }
+          }
+          &[comment] {
+            cursor: pointer;
+            text-align: center;
+
+            * {
+              vertical-align: middle;
+            }
+          }
+          &[disabled] * {
+            opacity: 0.6;
+          }
+        }
+      }
+
+      table[tail] {
+        border: 2px solid var(--md-sys-color-on-primary-container);
+        border-top: none;
+        margin-top: -1px;
+
+        td {
+          width: 25%;
+          border-left: none;
+          text-align: center;
+          position: relative;
+          background-color: var(--md-sys-color-on-primary);
+          font-size: 14px;
+        }
+        th {
+          width: 25%;
+          border-right: none;
+        }
+
+        span[sign-text] {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          pointer-events: none;
+        }
+        ox-input-signature {
+          margin: var(--spacing-medium, 8px);
+
+          &[disabled] {
+            background: #eee;
+          }
+        }
+      }
+
+      div[footer] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-tiny, 2px);
+        font-size: 12px;
+        margin-top: var(--spacing-medium, 8px);
+        color: #586878;
+        text-indent: -9px;
+        padding-left: var(--spacing-medium, 8px);
+      }
+
+      .stt-float-btns {
+        position: absolute;
+        top: 0;
+        right: 0;
+        display: flex;
+        gap: 8px;
+        z-index: 10;
+      }
+      .stt-float-btns button {
+        background: #fff;
+        border: 1px solid #ccc;
+        border-radius: 50%;
+        width: 38px;
+        height: 38px;
+        font-size: 18px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        cursor: pointer;
+        transition: background 0.2s;
+        outline: none;
+      }
+      .stt-float-btns button:hover {
+        background: #f2f2f2;
+      }
+      div[title-row] {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 8px;
+      }
+      div[name] {
+        color: #586878;
+        font-size: 24px;
+        font-weight: bold;
+        flex: 1;
+        text-align: center;
+      }
+
+      @keyframes pulse {
+        0% {
+          filter: drop-shadow(0 0 0 #d32f2f);
+        }
+        70% {
+          filter: drop-shadow(0 0 8px #d32f2f);
+        }
+        100% {
+          filter: drop-shadow(0 0 0 #d32f2f);
+        }
+      }
+
+      /* 추천 검사 항목 툴팁 */
+      td[has-recommendation] {
+        cursor: pointer;
+        position: relative;
+      }
+      td[has-recommendation]:hover {
+        background-color: #f0f7ff !important;
+      }
+      div[recommendation-tooltip] {
+        position: fixed;
+        z-index: 1000;
+        background: #333;
+        color: #fff;
+        padding: 8px 12px;
+        border-radius: 6px;
+        font-size: 13px;
+        max-width: 350px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        line-height: 1.6;
+        pointer-events: none;
+      }
+      div[recommendation-tooltip] div[tooltip-title] {
+        font-weight: bold;
+        color: #8fc9ff;
+        margin-bottom: 4px;
+        font-size: 12px;
+      }
+      div[recommendation-tooltip] div[tooltip-item] {
+        padding-left: 8px;
+      }
+      div[recommendation-tooltip] div[tooltip-item]::before {
+        content: '• ';
+        color: #8fc9ff;
+      }
+
+      /* KCS 시방서 기준 셀 (클릭 시 상세 팝업) */
+      td[kcs-criteria][has-kcs] {
+        cursor: pointer;
+        color: #2e79be;
+      }
+      td[kcs-criteria][has-kcs]:hover {
+        background-color: #f0f7ff !important;
+      }
+      td[site-spec-criteria][has-site-spec] {
+        cursor: pointer;
+        color: #2e79be;
+      }
+      td[site-spec-criteria][has-site-spec]:hover {
+        background-color: #f0f7ff !important;
+      }
+
+      .stt-fab {
+        position: fixed;
+        top: 100px;
+        right: 20px;
+        z-index: 1;
+      }
+
+      .stt-fab[active] md-icon {
+        color: #d32f2f;
+        animation: pulse 1s infinite;
+      }
+    `
+];
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ChecklistView.prototype, "mode", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ChecklistView.prototype, "checklist", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ChecklistView.prototype, "manager", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ChecklistView.prototype, "buildingComplex", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ChecklistView.prototype, "status", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], ChecklistView.prototype, "failCount", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ChecklistView.prototype, "projectType", void 0);
+ChecklistView = __decorate([
+    customElement('checklist-view')
+], ChecklistView);
+//# sourceMappingURL=checklist-view.js.map