@dssp/supervision 1.0.0-alpha.26 → 1.0.0-alpha.28

package/dist-client/pages/building-inspection/component/photo-album-popup.js

@@ -1,406 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import '@material/web/button/elevated-button.js';
-import '@material/web/icon/icon.js';
-import '@material/web/tabs/tabs.js';
-import '@material/web/tabs/primary-tab.js';
-import gql from 'graphql-tag';
-import { client } from '@operato/graphql';
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles';
-import { notify, openPopup } from '@operato/layout';
-import { store, User } from '@operato/shell';
-import { connect } from 'pwa-helpers/connect-mixin.js';
-import './image-preview-popup';
-export var PhotoTab;
-(function (PhotoTab) {
-    PhotoTab["CONSTRUCTOR"] = "constructor";
-    PhotoTab["SUPERVISOR"] = "supervisor";
-})(PhotoTab || (PhotoTab = {}));
-let PhotoAlbumPopup = class PhotoAlbumPopup extends connect(store)(LitElement) {
-    constructor() {
-        super(...arguments);
-        this.checklistId = '';
-        this.title = '사진대지';
-        this.activeTab = PhotoTab.CONSTRUCTOR;
-        this.constructorPhotos = [];
-        this.supervisorPhotos = [];
-        this.user = {};
-    }
-    render() {
-        const currentPhotos = this.activeTab === PhotoTab.CONSTRUCTOR ? this.constructorPhotos : this.supervisorPhotos;
-        const constructorCount = this.constructorPhotos.length;
-        const supervisorCount = this.supervisorPhotos.length;
-        return html `
-      <h3>${this.title}</h3>
-
-      <div body>
-        <div class="tabs-container">
-          <md-tabs @change=${this._onTabChange}>
-            <md-primary-tab 
-              ?active=${this.activeTab === PhotoTab.CONSTRUCTOR}
-              @click=${() => this._setActiveTab(PhotoTab.CONSTRUCTOR)}
-            >
-              시공자 (${constructorCount})
-            </md-primary-tab>
-            <md-primary-tab 
-              ?active=${this.activeTab === PhotoTab.SUPERVISOR}
-              @click=${() => this._setActiveTab(PhotoTab.SUPERVISOR)}
-            >
-              감리자 (${supervisorCount})
-            </md-primary-tab>
-          </md-tabs>
-        </div>
-
-        <div class="tab-content">
-          <div class="photo-count">
-            ${this.activeTab === PhotoTab.CONSTRUCTOR ? '시공자' : '감리자'} 사진: ${currentPhotos.length}건
-          </div>
-
-          ${currentPhotos.length > 0
-            ? html `
-                <div class="photo-grid">
-                  ${currentPhotos.map((photo, index) => {
-                var _a, _b;
-                return html `
-                      <div class="photo-item" @click=${() => this._openPhotoPreview(currentPhotos, index)}>
-                        <img 
-                          src="${photo.fullpath}" 
-                          alt="${photo.name}"
-                          @error=${(e) => this._onImageError(e, photo)}
-                        />
-                        <div class="photo-overlay">
-                          <div class="photo-info">
-                            <div class="photo-name">${((_a = photo.checklistItem) === null || _a === void 0 ? void 0 : _a.name) || photo.name || ''}</div>
-                            <div class="photo-creator">
-                              <md-icon style="--md-icon-size: 10px;">account_circle</md-icon>
-                              ${((_b = photo.creator) === null || _b === void 0 ? void 0 : _b.name) || ''}
-                            </div>
-                            <div class="photo-date">${this._formatDate(photo.createdAt)}</div>
-                          </div>
-                        </div>
-                      </div>
-                    `;
-            })}
-                </div>
-              `
-            : html `
-                <div class="empty-state">
-                  <md-icon>photo_library</md-icon>
-                  <div>${this.activeTab === PhotoTab.CONSTRUCTOR ? '시공자' : '감리자'}가 업로드한 사진이 없습니다.</div>
-                </div>
-              `}
-        </div>
-      </div>
-
-      <div class="button-container">
-        <md-elevated-button @click=${this._close}>
-          <md-icon slot="icon">close</md-icon>닫기
-        </md-elevated-button>
-      </div>
-    `;
-    }
-    async firstUpdated() {
-        var _a;
-        this.user = (_a = store.getState().auth) === null || _a === void 0 ? void 0 : _a.user;
-        await this._loadPhotos();
-    }
-    async _loadPhotos() {
-        var _a;
-        try {
-            const response = await client.query({
-                query: gql `
-          query ChecklistPhotos($checklistId: String!) {
-            checklist(id: $checklistId) {
-              id
-              checklistItems {
-                id
-                name
-                checklistItemAttachments {
-                  id
-                  name
-                  fullpath
-                  creator {
-                    id
-                    name
-                    email
-                  }
-                  createdAt
-                }
-              }
-            }
-          }
-        `,
-                variables: {
-                    checklistId: this.checklistId
-                }
-            });
-            if (response.errors) {
-                notify({ message: '사진 목록을 불러오는데 실패했습니다.', level: 'error' });
-                return;
-            }
-            const checklist = response.data.checklist;
-            const allAttachments = [];
-            // 모든 체크리스트 아이템의 첨부파일을 수집
-            (_a = checklist.checklistItems) === null || _a === void 0 ? void 0 : _a.forEach((item) => {
-                var _a;
-                (_a = item.checklistItemAttachments) === null || _a === void 0 ? void 0 : _a.forEach((attachment) => {
-                    // 이미지 파일만 필터링
-                    if (this._isImageFile(attachment.fullpath)) {
-                        allAttachments.push(Object.assign(Object.assign({}, attachment), { checklistItem: {
-                                id: item.id,
-                                name: item.name
-                            } }));
-                    }
-                });
-            });
-            // 시공자와 감리자로 분류 (이메일 도메인이나 역할로 구분)
-            this.constructorPhotos = allAttachments.filter(attachment => { var _a; return this._isConstructor(((_a = attachment.creator) === null || _a === void 0 ? void 0 : _a.email) || ''); });
-            this.supervisorPhotos = allAttachments.filter(attachment => { var _a; return this._isSupervisor(((_a = attachment.creator) === null || _a === void 0 ? void 0 : _a.email) || ''); });
-        }
-        catch (error) {
-            console.error('사진 목록 로딩 중 오류 발생:', error);
-            notify({ message: '사진 목록을 불러오는데 실패했습니다.', level: 'error' });
-        }
-    }
-    _isImageFile(filepath) {
-        if (!filepath)
-            return false;
-        const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
-        const extension = filepath.toLowerCase().split('.').pop();
-        return imageExtensions.includes(extension || '');
-    }
-    _isConstructor(email) {
-        // 시공자 이메일 패턴을 확인 (예: 회사 도메인이나 역할로 구분)
-        // 이 로직은 실제 시스템의 사용자 역할 구분 방식에 따라 수정해야 합니다
-        return email.includes('constructor') || email.includes('builder') ||
-            email.includes('시공') || this._checkUserRole(email, 'constructor');
-    }
-    _isSupervisor(email) {
-        // 감리자 이메일 패턴을 확인
-        // 이 로직은 실제 시스템의 사용자 역할 구분 방식에 따라 수정해야 합니다
-        return email.includes('supervisor') || email.includes('monitor') ||
-            email.includes('감리') || this._checkUserRole(email, 'supervisor');
-    }
-    _checkUserRole(email, role) {
-        // 실제 사용자 역할 확인 로직을 구현
-        // 예: 사용자 정보에서 역할을 확인하거나, 이메일 도메인으로 구분
-        // 현재는 기본적으로 시공자로 분류
-        return role === 'constructor';
-    }
-    _setActiveTab(tab) {
-        this.activeTab = tab;
-    }
-    _onTabChange(e) {
-        // md-tabs의 change 이벤트 처리 (필요한 경우)
-    }
-    _openPhotoPreview(photos, startIndex) {
-        openPopup(html `
-        <image-preview-popup
-          .images=${photos}
-          .currentIndex=${startIndex}
-          .title=${'사진 미리보기'}
-        ></image-preview-popup>
-      `, {
-            backdrop: true,
-            size: 'large',
-            title: '사진 미리보기'
-        });
-    }
-    _onImageError(e, photo) {
-        const target = e.target;
-        target.style.display = 'none';
-        // 오류 발생 시 기본 아이콘 표시
-        const container = target.parentElement;
-        container.innerHTML += `
-      <div style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #f5f5f5;">
-        <md-icon style="--md-icon-size: 48px; color: #ccc;">broken_image</md-icon>
-      </div>
-    `;
-    }
-    _formatDate(date) {
-        const _date = new Date(date);
-        if (isNaN(_date.getTime())) {
-            return '날짜 없음';
-        }
-        const year = _date.getFullYear();
-        const month = String(_date.getMonth() + 1).padStart(2, '0');
-        const day = String(_date.getDate()).padStart(2, '0');
-        const hours = String(_date.getHours()).padStart(2, '0');
-        const minutes = String(_date.getMinutes()).padStart(2, '0');
-        return `${year}.${month}.${day} ${hours}:${minutes}`;
-    }
-    _close() {
-        history.back();
-    }
-};
-PhotoAlbumPopup.styles = [
-    ButtonContainerStyles,
-    ScrollbarStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: #fff;
-        width: 100%;
-        max-height: 80vh;
-      }
-
-      div[body] {
-        flex: 1;
-        overflow-y: auto;
-        padding: 20px;
-      }
-
-      .tabs-container {
-        margin-bottom: 20px;
-        border-bottom: 2px solid #ddd;
-      }
-
-      md-tabs {
-        --md-primary-tab-container-color: transparent;
-        --md-primary-tab-active-indicator-color: #2196f3;
-        --md-primary-tab-label-text-color: #666;
-        --md-primary-tab-active-label-text-color: #2196f3;
-      }
-
-      .photo-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-        gap: 15px;
-        margin-bottom: 20px;
-      }
-
-      .photo-item {
-        position: relative;
-        aspect-ratio: 1;
-        border-radius: 8px;
-        overflow: hidden;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        border: 2px solid #ddd;
-      }
-
-      .photo-item:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        border-color: #2196f3;
-      }
-
-      .photo-item img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      .photo-overlay {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
-        color: white;
-        padding: 10px 8px 8px;
-        font-size: 12px;
-        line-height: 1.2;
-      }
-
-      .photo-info {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-      }
-
-      .photo-name {
-        font-weight: bold;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .photo-creator {
-        font-size: 10px;
-        opacity: 0.9;
-        display: flex;
-        align-items: center;
-        gap: 3px;
-      }
-
-      .photo-date {
-        font-size: 10px;
-        opacity: 0.8;
-      }
-
-      .empty-state {
-        text-align: center;
-        color: #666;
-        padding: 60px 20px;
-      }
-
-      .empty-state md-icon {
-        --md-icon-size: 64px;
-        color: #ccc;
-        margin-bottom: 16px;
-      }
-
-      .tab-content {
-        min-height: 300px;
-      }
-
-      .photo-count {
-        color: #666;
-        font-size: 14px;
-        margin-bottom: 15px;
-        padding: 10px;
-        background-color: #f5f5f5;
-        border-radius: 5px;
-        text-align: center;
-      }
-
-      h3 {
-        position: relative;
-        color: rgb(5, 149, 229);
-        font-size: 17px;
-        font-weight: 700;
-        margin: 0px 0px 20px 0px;
-        padding-top: 0px;
-      }
-
-      .button-container {
-        display: flex;
-        justify-content: center;
-        padding: 15px;
-        border-top: 1px solid #ddd;
-        background-color: #f9f9f9;
-      }
-    `
-];
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], PhotoAlbumPopup.prototype, "checklistId", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], PhotoAlbumPopup.prototype, "title", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], PhotoAlbumPopup.prototype, "activeTab", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], PhotoAlbumPopup.prototype, "constructorPhotos", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Array)
-], PhotoAlbumPopup.prototype, "supervisorPhotos", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", User)
-], PhotoAlbumPopup.prototype, "user", void 0);
-PhotoAlbumPopup = __decorate([
-    customElement('photo-album-popup')
-], PhotoAlbumPopup);
-export { PhotoAlbumPopup };
-//# sourceMappingURL=photo-album-popup.js.map

package/dist-client/pages/building-inspection/component/photo-album-popup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"photo-album-popup.js","sourceRoot":"","sources":["../../../../client/pages/building-inspection/component/photo-album-popup.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@material/web/icon/icon.js'\nimport '@material/web/tabs/tabs.js'\nimport '@material/web/tabs/primary-tab.js'\n\nimport gql from 'graphql-tag'\nimport { client } from '@operato/graphql'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { ButtonContainerStyles, ScrollbarStyles } from '@operato/styles'\nimport { notify, openPopup } from '@operato/layout'\nimport { store, User } from '@operato/shell'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\nimport './image-preview-popup'\n\nexport enum PhotoTab {\n  CONSTRUCTOR = 'constructor',\n  SUPERVISOR = 'supervisor'\n}\n\n@customElement('photo-album-popup')\nexport class PhotoAlbumPopup extends connect(store)(LitElement) {\n  static styles = [\n    ButtonContainerStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        background-color: #fff;\n        width: 100%;\n        max-height: 80vh;\n      }\n\n      div[body] {\n        flex: 1;\n        overflow-y: auto;\n        padding: 20px;\n      }\n\n      .tabs-container {\n        margin-bottom: 20px;\n        border-bottom: 2px solid #ddd;\n      }\n\n      md-tabs {\n        --md-primary-tab-container-color: transparent;\n        --md-primary-tab-active-indicator-color: #2196f3;\n        --md-primary-tab-label-text-color: #666;\n        --md-primary-tab-active-label-text-color: #2196f3;\n      }\n\n      .photo-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n        gap: 15px;\n        margin-bottom: 20px;\n      }\n\n      .photo-item {\n        position: relative;\n        aspect-ratio: 1;\n        border-radius: 8px;\n        overflow: hidden;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        border: 2px solid #ddd;\n      }\n\n      .photo-item:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        border-color: #2196f3;\n      }\n\n      .photo-item img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n\n      .photo-overlay {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));\n        color: white;\n        padding: 10px 8px 8px;\n        font-size: 12px;\n        line-height: 1.2;\n      }\n\n      .photo-info {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n\n      .photo-name {\n        font-weight: bold;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      .photo-creator {\n        font-size: 10px;\n        opacity: 0.9;\n        display: flex;\n        align-items: center;\n        gap: 3px;\n      }\n\n      .photo-date {\n        font-size: 10px;\n        opacity: 0.8;\n      }\n\n      .empty-state {\n        text-align: center;\n        color: #666;\n        padding: 60px 20px;\n      }\n\n      .empty-state md-icon {\n        --md-icon-size: 64px;\n        color: #ccc;\n        margin-bottom: 16px;\n      }\n\n      .tab-content {\n        min-height: 300px;\n      }\n\n      .photo-count {\n        color: #666;\n        font-size: 14px;\n        margin-bottom: 15px;\n        padding: 10px;\n        background-color: #f5f5f5;\n        border-radius: 5px;\n        text-align: center;\n      }\n\n      h3 {\n        position: relative;\n        color: rgb(5, 149, 229);\n        font-size: 17px;\n        font-weight: 700;\n        margin: 0px 0px 20px 0px;\n        padding-top: 0px;\n      }\n\n      .button-container {\n        display: flex;\n        justify-content: center;\n        padding: 15px;\n        border-top: 1px solid #ddd;\n        background-color: #f9f9f9;\n      }\n    `\n  ]\n\n  @property({ type: String }) checklistId: string = ''\n  @property({ type: String }) title: string = '사진대지'\n\n  @state() activeTab: PhotoTab = PhotoTab.CONSTRUCTOR\n  @state() constructorPhotos: any[] = []\n  @state() supervisorPhotos: any[] = []\n  @state() user: User = {}\n\n  render() {\n    const currentPhotos = this.activeTab === PhotoTab.CONSTRUCTOR ? this.constructorPhotos : this.supervisorPhotos\n    const constructorCount = this.constructorPhotos.length\n    const supervisorCount = this.supervisorPhotos.length\n\n    return html`\n      <h3>${this.title}</h3>\n\n      <div body>\n        <div class=\"tabs-container\">\n          <md-tabs @change=${this._onTabChange}>\n            <md-primary-tab \n              ?active=${this.activeTab === PhotoTab.CONSTRUCTOR}\n              @click=${() => this._setActiveTab(PhotoTab.CONSTRUCTOR)}\n            >\n              시공자 (${constructorCount})\n            </md-primary-tab>\n            <md-primary-tab \n              ?active=${this.activeTab === PhotoTab.SUPERVISOR}\n              @click=${() => this._setActiveTab(PhotoTab.SUPERVISOR)}\n            >\n              감리자 (${supervisorCount})\n            </md-primary-tab>\n          </md-tabs>\n        </div>\n\n        <div class=\"tab-content\">\n          <div class=\"photo-count\">\n            ${this.activeTab === PhotoTab.CONSTRUCTOR ? '시공자' : '감리자'} 사진: ${currentPhotos.length}건\n          </div>\n\n          ${currentPhotos.length > 0\n            ? html`\n                <div class=\"photo-grid\">\n                  ${currentPhotos.map(\n                    (photo, index) => html`\n                      <div class=\"photo-item\" @click=${() => this._openPhotoPreview(currentPhotos, index)}>\n                        <img \n                          src=\"${photo.fullpath}\" \n                          alt=\"${photo.name}\"\n                          @error=${(e: Event) => this._onImageError(e, photo)}\n                        />\n                        <div class=\"photo-overlay\">\n                          <div class=\"photo-info\">\n                            <div class=\"photo-name\">${photo.checklistItem?.name || photo.name || ''}</div>\n                            <div class=\"photo-creator\">\n                              <md-icon style=\"--md-icon-size: 10px;\">account_circle</md-icon>\n                              ${photo.creator?.name || ''}\n                            </div>\n                            <div class=\"photo-date\">${this._formatDate(photo.createdAt)}</div>\n                          </div>\n                        </div>\n                      </div>\n                    `\n                  )}\n                </div>\n              `\n            : html`\n                <div class=\"empty-state\">\n                  <md-icon>photo_library</md-icon>\n                  <div>${this.activeTab === PhotoTab.CONSTRUCTOR ? '시공자' : '감리자'}가 업로드한 사진이 없습니다.</div>\n                </div>\n              `}\n        </div>\n      </div>\n\n      <div class=\"button-container\">\n        <md-elevated-button @click=${this._close}>\n          <md-icon slot=\"icon\">close</md-icon>닫기\n        </md-elevated-button>\n      </div>\n    `\n  }\n\n  async firstUpdated() {\n    this.user = (store.getState() as any).auth?.user\n    await this._loadPhotos()\n  }\n\n  private async _loadPhotos() {\n    try {\n      const response = await client.query({\n        query: gql`\n          query ChecklistPhotos($checklistId: String!) {\n            checklist(id: $checklistId) {\n              id\n              checklistItems {\n                id\n                name\n                checklistItemAttachments {\n                  id\n                  name\n                  fullpath\n                  creator {\n                    id\n                    name\n                    email\n                  }\n                  createdAt\n                }\n              }\n            }\n          }\n        `,\n        variables: {\n          checklistId: this.checklistId\n        }\n      })\n\n      if (response.errors) {\n        notify({ message: '사진 목록을 불러오는데 실패했습니다.', level: 'error' })\n        return\n      }\n\n      const checklist = response.data.checklist\n      const allAttachments: any[] = []\n\n      // 모든 체크리스트 아이템의 첨부파일을 수집\n      checklist.checklistItems?.forEach((item: any) => {\n        item.checklistItemAttachments?.forEach((attachment: any) => {\n          // 이미지 파일만 필터링\n          if (this._isImageFile(attachment.fullpath)) {\n            allAttachments.push({\n              ...attachment,\n              checklistItem: {\n                id: item.id,\n                name: item.name\n              }\n            })\n          }\n        })\n      })\n\n      // 시공자와 감리자로 분류 (이메일 도메인이나 역할로 구분)\n      this.constructorPhotos = allAttachments.filter(attachment => \n        this._isConstructor(attachment.creator?.email || '')\n      )\n      \n      this.supervisorPhotos = allAttachments.filter(attachment => \n        this._isSupervisor(attachment.creator?.email || '')\n      )\n\n    } catch (error) {\n      console.error('사진 목록 로딩 중 오류 발생:', error)\n      notify({ message: '사진 목록을 불러오는데 실패했습니다.', level: 'error' })\n    }\n  }\n\n  private _isImageFile(filepath: string): boolean {\n    if (!filepath) return false\n    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg']\n    const extension = filepath.toLowerCase().split('.').pop()\n    return imageExtensions.includes(extension || '')\n  }\n\n  private _isConstructor(email: string): boolean {\n    // 시공자 이메일 패턴을 확인 (예: 회사 도메인이나 역할로 구분)\n    // 이 로직은 실제 시스템의 사용자 역할 구분 방식에 따라 수정해야 합니다\n    return email.includes('constructor') || email.includes('builder') || \n           email.includes('시공') || this._checkUserRole(email, 'constructor')\n  }\n\n  private _isSupervisor(email: string): boolean {\n    // 감리자 이메일 패턴을 확인\n    // 이 로직은 실제 시스템의 사용자 역할 구분 방식에 따라 수정해야 합니다\n    return email.includes('supervisor') || email.includes('monitor') || \n           email.includes('감리') || this._checkUserRole(email, 'supervisor')\n  }\n\n  private _checkUserRole(email: string, role: string): boolean {\n    // 실제 사용자 역할 확인 로직을 구현\n    // 예: 사용자 정보에서 역할을 확인하거나, 이메일 도메인으로 구분\n    // 현재는 기본적으로 시공자로 분류\n    return role === 'constructor'\n  }\n\n  private _setActiveTab(tab: PhotoTab) {\n    this.activeTab = tab\n  }\n\n  private _onTabChange(e: Event) {\n    // md-tabs의 change 이벤트 처리 (필요한 경우)\n  }\n\n  private _openPhotoPreview(photos: any[], startIndex: number) {\n    openPopup(\n      html`\n        <image-preview-popup\n          .images=${photos}\n          .currentIndex=${startIndex}\n          .title=${'사진 미리보기'}\n        ></image-preview-popup>\n      `,\n      {\n        backdrop: true,\n        size: 'large',\n        title: '사진 미리보기'\n      }\n    )\n  }\n\n  private _onImageError(e: Event, photo: any) {\n    const target = e.target as HTMLImageElement\n    target.style.display = 'none'\n    \n    // 오류 발생 시 기본 아이콘 표시\n    const container = target.parentElement!\n    container.innerHTML += `\n      <div style=\"display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #f5f5f5;\">\n        <md-icon style=\"--md-icon-size: 48px; color: #ccc;\">broken_image</md-icon>\n      </div>\n    `\n  }\n\n  private _formatDate(date: string | Date): string {\n    const _date = new Date(date)\n    \n    if (isNaN(_date.getTime())) {\n      return '날짜 없음'\n    }\n\n    const year = _date.getFullYear()\n    const month = String(_date.getMonth() + 1).padStart(2, '0')\n    const day = String(_date.getDate()).padStart(2, '0')\n    const hours = String(_date.getHours()).padStart(2, '0')\n    const minutes = String(_date.getMinutes()).padStart(2, '0')\n\n    return `${year}.${month}.${day} ${hours}:${minutes}`\n  }\n\n  private _close() {\n    history.back()\n  }\n}"]}