@dssp/project 0.0.2 → 0.0.6

package/client/pages/checklist/checklist-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/button/elevated-button.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -28,7 +29,7 @@ export class ChecklistImporter extends LitElement {
         padding: var(--padding-default);
       }
 
-      mwc-button {
+      md-elevated-button {
         margin-left: var(--margin-default);
       }
     `
@@ -65,15 +66,13 @@ export class ChecklistImporter extends LitElement {
       <ox-grist
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.columns}
-        .data=${
-          { 
-            records: this.checklists 
-          }
-        }
+        .data=${{
+          records: this.checklists
+        }}
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <md-elevated-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</md-elevated-button>
       </div>
     `
   }
@@ -93,4 +92,3 @@ export class ChecklistImporter extends LitElement {
     this.dispatchEvent(new CustomEvent('imported'))
   }
 }
-

package/client/pages/checklist/checklist-list-page.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import { CommonButtonStyles, CommonGristStyles, ScrollbarStyles } from '@operato/styles'
@@ -5,12 +6,7 @@ import { PageView, store } from '@operato/shell'
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import {
-  ColumnConfig,
-  DataGrist,
-  FetchOption,
-  SortersControl
-} from '@operato/data-grist'
+import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
@@ -24,7 +20,6 @@ import { ChecklistImporter } from './checklist-importer'
 
 @customElement('checklist-list-page')
 export class ChecklistListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
-
   static styles = [
     ScrollbarStyles,
     CommonGristStyles,
@@ -93,11 +88,7 @@ export class ChecklistListPage extends connect(store)(localize(i18next)(ScopedEl
     const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
 
     return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-      >
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom">
           <div id="filters">
             <ox-filters-form autofocus></ox-filters-form>
@@ -105,7 +96,7 @@ export class ChecklistListPage extends connect(store)(localize(i18next)(ScopedEl
 
           <div id="sorters">
             Sort
-            <mwc-icon
+            <md-icon
               @click=${e => {
                 const target = e.currentTarget
                 this.sortersControl.open({
@@ -113,7 +104,7 @@ export class ChecklistListPage extends connect(store)(localize(i18next)(ScopedEl
                   top: target.offsetTop + target.offsetHeight
                 })
               }}
-              >expand_more</mwc-icon
+              >expand_more</md-icon
             >
             <ox-popup id="sorter-control">
               <ox-sorters-control> </ox-sorters-control>
@@ -121,9 +112,9 @@ export class ChecklistListPage extends connect(store)(localize(i18next)(ScopedEl
           </div>
 
           <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
+            <md-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</md-icon>
+            <md-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</md-icon>
+            <md-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</md-icon>
           </div>
         </div>
       </ox-grist>
@@ -312,12 +303,7 @@ export class ChecklistListPage extends connect(store)(localize(i18next)(ScopedEl
 
   private async exportHandler() {
     const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
-    const targetFieldSet = new Set([
-      'id',
-      'name',
-      'description',
-      'active'
-    ])
+    const targetFieldSet = new Set(['id', 'name', 'description', 'active'])
 
     return exportTargets.map(checklist => {
       let tempObj = {}
@@ -346,10 +332,9 @@ export class ChecklistListPage extends connect(store)(localize(i18next)(ScopedEl
         title: i18next.t('title.import checklist')
       }
     )
-    
+
     popup.onclosed = () => {
       this.grist.fetch()
     }
   }
 }
-

package/client/pages/project/popup/popup-plan-upload.ts

@@ -0,0 +1,138 @@
+import { css, html, LitElement } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { BuildingLevel } from '../project-list'
+
+@customElement('popup-plan-upload')
+export class PopupPlanUpload extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+        width: 100%;
+      }
+
+      div[body] {
+        flex: 1;
+
+        div[input-container] {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 25px;
+          background-color: #f7f7f7;
+          padding: 35px 27px 27px 27px;
+
+          ox-input-file {
+            height: 100px;
+            width: 120px;
+            line-height: 100%;
+          }
+        }
+
+        div[button-container] {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-top: 20px;
+        }
+      }
+    `
+  ]
+
+  @property({ type: Object }) private buildingLevel: BuildingLevel = {}
+  @property({ type: Number }) private selectedIdx: number | undefined
+
+  render() {
+    const noUploadStyle = '--file-uploader-icon-size: 0; --file-uploader-label-padding; 0;'
+
+    // 메인 도면 스타일
+    const { mainDrawing, mainDrawingThumbnail } = this.buildingLevel
+    const mainDrawingIcon = mainDrawing ? '' : 'upload'
+    const mainDrawingStyle = mainDrawing ? noUploadStyle : ''
+    const mainDrawingLabel = mainDrawingThumbnail ? ' ' : '업로드'
+    const mainDrawingDesc = mainDrawingThumbnail ? ' ' : '평면 파일'
+    const mainDrawingThumbnailStyle = mainDrawingThumbnail ? this._getThumbnailStyle(mainDrawingThumbnail) : ''
+
+    // 입면 도면 스타일
+    const { elevationDrawing, elevationDrawingThumbnail } = this.buildingLevel
+    const elevationDrawingIcon = elevationDrawing ? '' : 'upload'
+    const elevationDrawingLabel = elevationDrawingThumbnail ? ' ' : '업로드'
+    const elevationDrawingDesc = elevationDrawingThumbnail ? ' ' : '입면 파일'
+    const elevationDrawingStyle = elevationDrawing ? noUploadStyle : ''
+    const elevationDrawingThumbnailStyle = elevationDrawingThumbnail ? this._getThumbnailStyle(elevationDrawingThumbnail) : ''
+
+    // 철근배근도 도면 스타일
+    const { rebarDistributionDrawing, rebarDistributionDrawingThumbnail } = this.buildingLevel
+    const rebarDistributionDrawingIcon = rebarDistributionDrawing ? '' : 'upload'
+    const rebarDistributionDrawingStyle = rebarDistributionDrawing ? noUploadStyle : ''
+    const rebarDistributionDrawingLabel = rebarDistributionDrawingThumbnail ? ' ' : '업로드'
+    const rebarDistributionDrawingDesc = rebarDistributionDrawingThumbnail ? ' ' : '철근배근도 파일'
+    const rebarDistributionDrawingThumbnailStyle = rebarDistributionDrawingThumbnail
+      ? this._getThumbnailStyle(rebarDistributionDrawingThumbnail)
+      : ''
+
+    return html`
+      <div body>
+        <div input-container>
+          <ox-input-file
+            name="mainDrawing"
+            .value=${mainDrawing || undefined}
+            icon=${mainDrawingIcon}
+            label=${mainDrawingLabel}
+            description=${mainDrawingDesc}
+            @change=${this._onChangeAttachment.bind(this)}
+            style="${mainDrawingStyle + mainDrawingThumbnailStyle}"
+          ></ox-input-file>
+
+          <ox-input-file
+            name="elevationDrawing"
+            .value=${elevationDrawing || undefined}
+            icon=${elevationDrawingIcon}
+            label=${elevationDrawingLabel}
+            description=${elevationDrawingDesc}
+            @change=${this._onChangeAttachment.bind(this)}
+            style="${elevationDrawingStyle + elevationDrawingThumbnailStyle}"
+          ></ox-input-file>
+
+          <ox-input-file
+            name="rebarDistributionDrawing"
+            .value=${rebarDistributionDrawing || undefined}
+            icon=${rebarDistributionDrawingIcon}
+            label=${rebarDistributionDrawingLabel}
+            description=${rebarDistributionDrawingDesc}
+            @change=${this._onChangeAttachment.bind(this)}
+            style="${rebarDistributionDrawingStyle + rebarDistributionDrawingThumbnailStyle}"
+          ></ox-input-file>
+        </div>
+
+        <div button-container>
+          <md-outlined-button @click=${this._close}><md-icon slot="icon">cancel</md-icon>취소</md-outlined-button>
+        </div>
+      </div>
+    `
+  }
+
+  private _close() {
+    history.back()
+  }
+
+  // 이미지 업로드
+  async _onChangeAttachment(e: CustomEvent) {
+    const target = e.target as HTMLInputElement
+    const file = e.detail[0] || null
+
+    this.buildingLevel[target.name] = file
+    this.buildingLevel[`${target.name}Upload`] = file
+
+    this.buildingLevel = { ...this.buildingLevel }
+
+    const detail = { buildingLevel: this.buildingLevel, selectedIdx: this.selectedIdx }
+    this.dispatchEvent(new CustomEvent('file_change', { bubbles: false, detail: detail }))
+  }
+
+  private _getThumbnailStyle(path) {
+    return `background: url(${path}); background-size: cover; background-repeat: round; justify-content: flex-end;`
+  }
+}

package/client/pages/project/{project-create-popup.ts → popup/popup-project-create.ts}

@@ -1,14 +1,13 @@
 import { css, html, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
-import { i18next, localize } from '@operato/i18n'
 import { notify } from '@operato/layout'
 import gql from 'graphql-tag'
 import '@material/web/textfield/outlined-text-field.js'
 import '@material/web/button/elevated-button.js'
 
-@customElement('project-create-popup')
-export class ProjectCreatePopup extends localize(i18next)(LitElement) {
+@customElement('popup-project-create')
+export class PopupProjectCreate extends LitElement {
   static styles = [
     css`
       :host {

package/client/pages/project/project-detail.ts

@@ -1,18 +1,19 @@
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+import '@material/web/textfield/outlined-text-field.js'
+import '@material/web/button/outlined-button.js'
+
 import { PageView } from '@operato/shell'
 import { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'
 import { css, html } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 import { client } from '@operato/graphql'
-import { notify } from '@operato/layout'
 
 import gql from 'graphql-tag'
 import { Project } from './project-list'
-import '@material/web/button/elevated-button.js'
-import '@material/web/textfield/outlined-text-field.js'
-import '@material/web/button/outlined-button.js'
-import './ox-progress-circle'
 import _getWeather from '../lib/waether'
+import '@operato/chart/ox-progress-circle.js'
 
 export interface InspectionSummary {
   request: number
@@ -201,7 +202,7 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
             }
             div[inspection] {
               display: grid;
-              grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 0.9fr;
+              grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr;
               margin-top: 5px;
               background: #f6f6f6;
               border-radius: 7px;
@@ -322,6 +323,7 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
       buildings: []
     }
   }
+
   @state() projectId: string = ''
   @state() project: Project = { ...this.defaultProject }
   @state() inspectionSummary: InspectionSummary = {
@@ -415,9 +417,7 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
               <div subject bold>개별 단지 상세정보 바로가기</div>
               <div building-container>
                 ${this.project.buildingComplex?.buildings?.map(building => {
-                  return html`<md-outlined-button
-                    href=${`building-complex-detail/${this.project.id}?buildingId=${building.id}`}
-                  >
+                  return html`<md-outlined-button href=${`building-complex-detail/${this.project.id}?buildingId=${building.id}`}>
                     ${building.name}
                   </md-outlined-button>`
                 })}
@@ -605,8 +605,8 @@ export class ProjectDetail extends ScopedElementsMixin(PageView) {
 
     if (response.errors) return
 
-    this.project = response.data?.project
-    this.inspectionSummary = response.data?.inspectionSummary
+    this.project = response.data?.project || {}
+    this.inspectionSummary = response.data?.inspectionSummary || {}
 
     const { latitude, longitude } = this.project?.buildingComplex
     if (latitude && longitude) {

package/client/pages/project/project-list.ts

@@ -1,3 +1,5 @@
+import '@material/web/icon/icon.js'
+
 import { PageView } from '@operato/shell'
 import { css, html } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
@@ -11,7 +13,7 @@ export enum ProjectStatus {
   'PROCEEDING' = '10',
   'COMPLICATED' = '20'
 }
-export enum InspectionType {
+export enum InspectionStatus {
   REQUEST = 'REQUEST',
   PASS = 'PASS',
   FAIL = 'FAIL'
@@ -67,7 +69,15 @@ export interface BuildingLevel {
   id?: string
   floor?: number
   mainDrawing?: Attachment
+  mainDrawingImage?: string
+  mainDrawingThumbnail?: string
   mainDrawingUpload?: FileUpload
+  elevationDrawing?: Attachment
+  elevationDrawingThumbnail?: string
+  elevationDrawingUpload?: FileUpload
+  rebarDistributionDrawing?: Attachment
+  rebarDistributionDrawingThumbnail?: string
+  rebarDistributionDrawingUpload?: FileUpload
   buildingInspections?: BuildingInspection[]
 }
 
@@ -75,8 +85,9 @@ export interface BuildingInspection {
   id?: string
   indexX?: number
   indexY?: number
-  type?: InspectionType
+  status?: InspectionStatus
   detail?: string
+  attatchments?: Attachment[]
   // buildingInspectionAttachments?: BuildingInspectionAttachment[]
 }
 
@@ -253,14 +264,12 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
 
                 <span project-state>
                   <div progress>
-                    <md-linear-progress buffer="100" max="100" value=${project.totalProgress || 0}>
-                    </md-linear-progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.totalProgress || 0}> </md-linear-progress>
                     <span>전체</span>
                     <span>${project.totalProgress || 0}%</span>
                   </div>
                   <div progress>
-                    <md-linear-progress buffer="100" max="100" value=${project.weeklyProgress || 0}>
-                    </md-linear-progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.weeklyProgress || 0}> </md-linear-progress>
                     <span>주간</span>
                     <span>${project.weeklyProgress || 0}%</span>
                   </div>
@@ -275,14 +284,12 @@ export class ProjectListPage extends ScopedElementsMixin(PageView) {
                     <span>${project.inspPassRate || 0}%</span>
                   </div>
                   <div progress>
-                    <md-linear-progress buffer="100" max="100" value=${project.robotProgressRate || 0}>
-                    </md-linear-progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.robotProgressRate || 0}> </md-linear-progress>
                     <span>Robot Progress</span>
                     <span>${project.robotProgressRate || 0}%</span>
                   </div>
                   <div progress>
-                    <md-linear-progress buffer="100" max="100" value=${project.structuralSafetyRate || 0}>
-                    </md-linear-progress>
+                    <md-linear-progress buffer="100" max="100" value=${project.structuralSafetyRate || 0}> </md-linear-progress>
                     <span>Structural safety</span>
                     <span>${project.structuralSafetyRate || 0}%</span>
                   </div>

package/client/pages/project/project-plan-management.ts

@@ -1,3 +1,9 @@
+import '@material/web/icon/icon.js'
+import '@material/web/button/elevated-button.js'
+import '@material/web/textfield/outlined-text-field.js'
+import '@material/web/button/filled-button.js'
+import '@material/web/button/outlined-button.js'
+
 import { PageView } from '@operato/shell'
 import { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view'
 import { css, html } from 'lit'
@@ -5,13 +11,11 @@ import { customElement, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
 import { client } from '@operato/graphql'
 import { notify } from '@operato/layout'
+import { openPopup } from '@operato/layout'
 
 import gql from 'graphql-tag'
-import { Building, Project } from './project-list'
-import '@material/web/button/elevated-button.js'
-import '@material/web/textfield/outlined-text-field.js'
-import '@material/web/button/filled-button.js'
-import '@material/web/button/outlined-button.js'
+import { Building, BuildingLevel, Project } from './project-list'
+import './popup/popup-plan-upload'
 
 @customElement('project-plan-management')
 export class ProjectPlanManagement extends ScopedElementsMixin(PageView) {
@@ -45,6 +49,10 @@ export class ProjectPlanManagement extends ScopedElementsMixin(PageView) {
         height: 100px;
       }
 
+      *[bold] {
+        font-weight: bold;
+      }
+
       div[header] {
         display: flex;
         margin: 0px 20px;
@@ -157,12 +165,29 @@ export class ProjectPlanManagement extends ScopedElementsMixin(PageView) {
             margin-top: 10px;
 
             & > span {
-              width: 150px;
               display: inline-block;
               text-align: center;
               margin: 0px 10px 15px 0px;
+              cursor: pointer;
+
+              & > [name='building-plan'] {
+                width: 150px;
+                height: 100px;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                border: 1px solid #333;
+                box-shadow: 2px 2px 2px #0000001a;
+                align-items: center;
+                border-radius: 7px;
+                font-size: 13px;
+
+                md-icon {
+                  margin-bottom: 6px;
+                }
+              }
 
-              & > div {
+              & > div[floor-name] {
                 margin-top: 7px;
 
                 &[no-data] {
@@ -246,7 +271,7 @@ export class ProjectPlanManagement extends ScopedElementsMixin(PageView) {
                     label=" "
                     description="동 도면 업로드"
                     idx=${idx}
-                    @change=${this.onCreateAttachment.bind(this)}
+                    @change=${this._onCreateAttachment.bind(this)}
                   ></ox-input-file>
                   <div>${building.name}</div>
                 </span>
@@ -262,37 +287,40 @@ export class ProjectPlanManagement extends ScopedElementsMixin(PageView) {
               ${this.project.buildingComplex.buildings?.map((building, idx) => {
                 return this.project.buildingComplex?.buildings?.[this.selectedBuildingIdx]?.id === building.id
                   ? html`
-                      <md-filled-button @click=${() => this._onClickBuildingChange(idx)}>
-                        ${building.name}
-                      </md-filled-button>
+                      <md-filled-button @click=${() => this._onClickBuildingChange(idx)}> ${building.name} </md-filled-button>
                     `
                   : html`
-                      <md-outlined-button @click=${() => this._onClickBuildingChange(idx)}>
-                        ${building.name}
-                      </md-outlined-button>
+                      <md-outlined-button @click=${() => this._onClickBuildingChange(idx)}> ${building.name} </md-outlined-button>
                     `
               })}
             </span>
           </div>
 
           <div floor-plan>
-            ${this.project.buildingComplex?.buildings?.[this.selectedBuildingIdx]?.buildingLevels?.map(
-              (buildingLevel, idx) => {
-                return html`
-                  <span plan>
-                    <ox-input-file
-                      name="building-plan"
-                      .value=${buildingLevel?.mainDrawing || undefined}
-                      label=" "
-                      description="층 도면 업로드"
-                      idx=${idx}
-                      @change=${this.onCreateAttachment.bind(this)}
-                    ></ox-input-file>
-                    <div ?no-data=${!buildingLevel?.mainDrawing}>${buildingLevel.floor}층</div>
-                  </span>
-                `
-              }
-            )}
+            ${this.project.buildingComplex?.buildings?.[this.selectedBuildingIdx]?.buildingLevels?.map((buildingLevel, idx) => {
+              return buildingLevel.mainDrawingThumbnail
+                ? html`
+                    <span plan>
+                      <img
+                        name="building-plan"
+                        .src=${buildingLevel.mainDrawingThumbnail}
+                        idx=${idx}
+                        @click=${this._onClickImage}
+                      />
+                      <div floor-name>${buildingLevel.floor}층</div>
+                    </span>
+                  `
+                : html`
+                    <span plan>
+                      <a name="building-plan" idx=${idx} @click=${this._onClickImage}>
+                        <md-icon slot="icon">image</md-icon>
+                        <div bold>도면 파일</div>
+                        <div>업로드</div>
+                      </a>
+                      <div floor-name no-data>${buildingLevel.floor}층</div>
+                    </span>
+                  `
+            })}
           </div>
         </div>
 
@@ -360,6 +388,17 @@ export class ProjectPlanManagement extends ScopedElementsMixin(PageView) {
                     id
                     name
                   }
+                  elevationDrawing {
+                    id
+                    name
+                  }
+                  rebarDistributionDrawing {
+                    id
+                    name
+                  }
+                  mainDrawingThumbnail
+                  elevationDrawingThumbnail
+                  rebarDistributionDrawingThumbnail
                 }
               }
             }
@@ -372,7 +411,6 @@ export class ProjectPlanManagement extends ScopedElementsMixin(PageView) {
     })
 
     this.project = response.data?.project
-    this.selectedBuildingIdx = 0
 
     console.log('init project : ', this.project)
   }
@@ -385,10 +423,16 @@ export class ProjectPlanManagement extends ScopedElementsMixin(PageView) {
 
       for (let levelKey in building.buildingLevels) {
         delete this.project.buildingComplex.buildings[buildingKey].buildingLevels[levelKey].mainDrawing
+        delete this.project.buildingComplex.buildings[buildingKey].buildingLevels[levelKey].mainDrawingImage
+        delete this.project.buildingComplex.buildings[buildingKey].buildingLevels[levelKey].mainDrawingThumbnail
+        delete this.project.buildingComplex.buildings[buildingKey].buildingLevels[levelKey].elevationDrawing
+        delete this.project.buildingComplex.buildings[buildingKey].buildingLevels[levelKey].elevationDrawingThumbnail
+        delete this.project.buildingComplex.buildings[buildingKey].buildingLevels[levelKey].rebarDistributionDrawing
+        delete this.project.buildingComplex.buildings[buildingKey].buildingLevels[levelKey].rebarDistributionDrawingThumbnail
       }
     }
 
-    console.log('this.project :', this.project)
+    console.log('upload project :', this.project)
 
     const response = await client.mutate({
       mutation: gql`
@@ -408,6 +452,9 @@ export class ProjectPlanManagement extends ScopedElementsMixin(PageView) {
 
     if (!response.errors) {
       notify({ message: '저장에 성공하였습니다.' })
+
+      // 데이터 다시 조회
+      this.initProject(this.project.id)
     }
   }
 
@@ -419,19 +466,50 @@ export class ProjectPlanManagement extends ScopedElementsMixin(PageView) {
   }
 
   // 이미지 업로드
-  async onCreateAttachment(e: CustomEvent) {
+  async _onCreateAttachment(e: CustomEvent) {
     const target = e.target as HTMLInputElement
     const file = e.detail[0] || null
     const idx = Number(target.getAttribute('idx')) || 0
 
-    if (target.name === 'building-drawing') {
-      this.project.buildingComplex!.buildings![idx].drawingUpload = file
-    } else {
-      this.project.buildingComplex!.buildings![this.selectedBuildingIdx].buildingLevels![idx].mainDrawingUpload = file
-    }
+    this.project.buildingComplex!.buildings![idx].drawingUpload = file
+
+    // re rendering
+    this.project = { ...this.project }
   }
 
   _onClickBuildingChange(idx: number) {
     this.selectedBuildingIdx = idx
   }
+
+  _onClickImage(e) {
+    const target = e.currentTarget as HTMLInputElement
+    const idx = Number(target.getAttribute('idx')) || 0
+    const buildingLevel = this.project.buildingComplex!.buildings![this.selectedBuildingIdx].buildingLevels![idx]
+    const title = buildingLevel.floor?.toString() + '층' || ''
+
+    // 팝업 오픈
+    this._openPopup(title, buildingLevel, idx)
+  }
+
+  private _openPopup(title: string, buildingLevel: BuildingLevel, selectedIdx: number) {
+    openPopup(
+      html`<popup-plan-upload
+        .buildingLevel=${buildingLevel}
+        .selectedIdx=${selectedIdx}
+        @file_change=${this._onChangeAdditionalDrawing.bind(this)}
+      ></popup-plan-upload>`,
+      {
+        backdrop: true,
+        size: 'medium',
+        title: `${title} 도면 관리`
+      }
+    )
+  }
+
+  private _onChangeAdditionalDrawing(e) {
+    const idx = e.detail?.selectedIdx || null
+    const buildingLevel: BuildingLevel = e.detail?.buildingLevel || {}
+
+    this.project.buildingComplex!.buildings![this.selectedBuildingIdx]!.buildingLevels![idx] = { ...buildingLevel }
+  }
 }