@dssp/supervision 1.0.0-alpha.0 → 1.0.0-alpha.100

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

@@ -1,22 +1,27 @@
 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 } from '../building-inspection/building-inspection-list';
+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 } from '@operato/shell';
-import { connect } from 'pwa-helpers/connect-mixin.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: [],
@@ -25,9 +30,98 @@ let ChecklistView = class ChecklistView extends connect(store)(LitElement) {
             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, _o;
+        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 ||
@@ -71,204 +165,321 @@ let ChecklistView = class ChecklistView extends connect(store)(LitElement) {
             // 3순위: sequence 오름차순
             return a.sequence - b.sequence;
         });
-        const processedItems = this.drawChecklistItems(((_j = this.checklist) === null || _j === void 0 ? void 0 : _j.checklistItems) || []);
+        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 `
-      <div wrapper>
-        <div name bold>${this.checklist.name}</div>
+      ${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>
+            `
+            : ''}
 
-        <table header>
+      <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>공종</th>
-            <td>${this.checklist.constructionType}</td>
-            <th>문서 번호</th>
-            <td>${this.checklist.documentNo}</td>
+            <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>세부 공종</th>
-            <td>${this.checklist.constructionDetailType}</td>
-            <th>위치 및 부위</th>
-            <td>${this.checklist.location}</td>
+            <th colspan="2">시공자</th>
+            <th colspan="2">감리자</th>
           </tr>
           <tr>
-            <th>검측 부위</th>
-            <td>${((_l = (_k = this.checklist) === null || _k === void 0 ? void 0 : _k.inspectionParts) === null || _l === void 0 ? void 0 : _l.join(', ')) || ''}</td>
-            <th>검측 상태</th>
-            <td>${BUILDING_INSPECTION_STATUS_DISPLAY[(_o = (_m = this.checklist) === null || _m === void 0 ? void 0 : _m.buildingInspection) === null || _o === void 0 ? void 0 : _o.status]}</td>
+            <th>적합</th>
+            <th>부적합</th>
+            <th>적합</th>
+            <th>부적합</th>
           </tr>
-        </table>
-
-        <table body>
-          <thead>
-            <tr>
-              <th colspan="2" rowspan="3" type>구분</th>
-              <th rowspan="3" inspection-name>검사항목</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) => {
+        </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]}</td>`
+              ${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> `
+                    : ''
                 : ''}
-                ${showDetailTypeCell ? html ` <td bold rowspan="${detailTypeRowspan}">${item.detailType}</td> ` : ''}
-
-                <td>${idx + 1}. ${item.name}</td>
-                <td>${item.inspctionCriteria}</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
+                ?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>
-              <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 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>
-            </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 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>
-            </tr>
-            <tr>
-              <th rowspan="2">감리자 점검일</th>
-              <td rowspan="2">
-                ${this.mode == "VIEWER" /* ChecklistMode.VIEWER */ ? today : this._getDate(this.checklist.supervisorInspectionDate)}
+              <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>
-              <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 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>
-            </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
+                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>
-            </tr>
-          </tbody>
-        </table>
+              <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 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;
@@ -278,8 +489,27 @@ let ChecklistView = class ChecklistView extends connect(store)(LitElement) {
         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)
@@ -330,26 +560,20 @@ let ChecklistView = class ChecklistView extends connect(store)(LitElement) {
         <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: '조치 사항'
-        });
+      `, { 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: '첨부 자료'
-        });
+      `, { backdrop: true, size: 'medium', title: '첨부 자료' });
     }
     async _refreshItem(e) {
         var _a;
@@ -374,6 +598,21 @@ let ChecklistView = class ChecklistView extends connect(store)(LitElement) {
         });
         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,
@@ -386,6 +625,8 @@ ChecklistView.styles = [
         padding-top: 0;
         font-size: 14px;
         min-width: 800px;
+
+        position: relative;
       }
 
       [bold] {
@@ -457,7 +698,7 @@ ChecklistView.styles = [
             width: 270px;
           }
           &[criteria] {
-            width: 90px;
+            width: 200px;
           }
           &[small] {
             width: 60px;
@@ -536,6 +777,119 @@ ChecklistView.styles = [
         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([
@@ -546,6 +900,10 @@ __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)
@@ -554,6 +912,14 @@ __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);