팝업 등록, 수정, 상세 페이지 추가

src/app/mock-api/apps/board/popup/api.ts

@@ -42,19 +42,19 @@ export class BoardPopupMockApi {
         let popups: any[] | null = cloneDeep(this._popups);
 
         // Sort the popups
-        if (sort === 'sku' || sort === 'name' || sort === 'active') {
-          popups.sort((a, b) => {
-            const fieldA = a[sort].toString().toUpperCase();
-            const fieldB = b[sort].toString().toUpperCase();
-            return order === 'asc'
-              ? fieldA.localeCompare(fieldB)
-              : fieldB.localeCompare(fieldA);
-          });
-        } else {
-          popups.sort((a, b) =>
-            order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort]
-          );
-        }
+        // if (sort === 'sku' || sort === 'name' || sort === 'active') {
+        //   popups.sort((a, b) => {
+        //     const fieldA = a[sort].toString().toUpperCase();
+        //     const fieldB = b[sort].toString().toUpperCase();
+        //     return order === 'asc'
+        //       ? fieldA.localeCompare(fieldB)
+        //       : fieldB.localeCompare(fieldA);
+        //   });
+        // } else {
+        //   popups.sort((a, b) =>
+        //     order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort]
+        //   );
+        // }
 
         // If search exists...
         if (search) {

src/app/mock-api/apps/board/popup/data.ts

@@ -2,6 +2,7 @@
 
 export const popups = [
   {
+    id: '1',
     index: 10,
     title: '악성배팅 제제 안내',
     widthSize: 500,
@@ -10,5 +11,66 @@ export const popups = [
     leftMargin: 100,
     site: 'all',
     useOrNot: 'N',
+    content: 'test',
+  },
+  {
+    id: '2',
+    index: 10,
+    title: '악성배팅 제제 안내2',
+    widthSize: 500,
+    heightSize: 830,
+    topMargin: 100,
+    leftMargin: 100,
+    site: 'all',
+    useOrNot: 'N',
+    content: 'test',
+  },
+  {
+    id: '3',
+    index: 10,
+    title: '악성배팅 제제 안내3',
+    widthSize: 500,
+    heightSize: 830,
+    topMargin: 100,
+    leftMargin: 100,
+    site: 'all',
+    useOrNot: 'N',
+    content: 'test',
+  },
+  {
+    id: '4',
+    index: 10,
+    title: '악성배팅 제제 안내4',
+    widthSize: 500,
+    heightSize: 830,
+    topMargin: 100,
+    leftMargin: 100,
+    site: 'all',
+    useOrNot: 'N',
+    content: 'test',
+  },
+  {
+    id: '5',
+    index: 10,
+    title: '악성배팅 제제 안내5',
+    widthSize: 500,
+    heightSize: 830,
+    topMargin: 100,
+    leftMargin: 100,
+    site: 'all',
+    useOrNot: 'N',
+    content: 'test',
+  },
+  {
+    id: '6',
+    index: 10,
+    title: '악성배팅 제제 안내6',
+    widthSize: 500,
+    heightSize: 830,
+    topMargin: 100,
+    leftMargin: 100,
+    site: 'all',
+    useOrNot: 'N',
+    content: 'test',
   },
 ];

src/app/modules/admin/board/popup/components/index.ts

@@ -1,4 +1,5 @@
 import { ListComponent } from './list.component';
+import { ViewComponent } from './view.component';
 import { ReditComponent } from './redit.component';
 
-export const COMPONENTS = [ListComponent, ReditComponent];
+export const COMPONENTS = [ListComponent, ViewComponent, ReditComponent];

src/app/modules/admin/board/popup/components/list.component.html

@@ -28,7 +28,12 @@
               <!-- Title -->
               <ng-container matColumnDef="title">
                 <th mat-header-cell *matHeaderCellDef>제목</th>
-                <td mat-cell *matCellDef="let info">
+                <td
+                  mat-cell
+                  *matCellDef="let info"
+                  style="cursor: pointer"
+                  (click)="__viewPopupDetail(info.id)"
+                >
                   <span class="font-medium text-right">
                     {{ info.title }}
                   </span>
@@ -98,7 +103,12 @@
                 <th mat-header-cell *matHeaderCellDef>비고</th>
                 <td mat-cell *matCellDef="let info">
                   <div class="flex items-center mt-2 py-3 space-x-4">
-                    <button class="flex-auto" type="button" mat-stroked-button>
+                    <button
+                      class="flex-auto"
+                      type="button"
+                      mat-stroked-button
+                      (click)="__modifyPopup(info.id)"
+                    >
                       수정
                     </button>
                     <button class="flex-auto" type="button" mat-stroked-button>
@@ -117,7 +127,9 @@
                   colspan="9"
                 >
                   <div lass="flex items-center mt-2 py-3 space-x-4">
-                    <button mat-stroked-button>팝업창 만들기</button>
+                    <button mat-stroked-button (click)="__createPopup()">
+                      팝업창 만들기
+                    </button>
                   </div>
                 </td>
               </ng-container>

src/app/modules/admin/board/popup/components/list.component.ts

@@ -179,14 +179,24 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   // @ Public methods
   // -----------------------------------------------------------------------------------------------------
 
-  viewUserDetail(id: string): void {
-    let url: string = 'member/user/' + id;
-    this.router.navigateByUrl(url);
-  }
   // -----------------------------------------------------------------------------------------------------
   // @ Private methods
   // -----------------------------------------------------------------------------------------------------
 
+  __viewPopupDetail(id: string): void {
+    let url: string = 'board/popup/view/' + id;
+    this.router.navigateByUrl(url);
+  }
+
+  __createPopup(): void {
+    let url: string = 'board/popup/redit/';
+    this.router.navigateByUrl(url);
+  }
+
+  __modifyPopup(id: string): void {
+    let url: string = 'board/popup/redit/' + id;
+    this.router.navigateByUrl(url);
+  }
   /**
    * Create product
    */

src/app/modules/admin/board/popup/components/redit.component.html

@@ -1,146 +1,9 @@
 <div class="flex flex-col flex-auto min-w-0">
-  <!-- View mode -->
-  <ng-container *ngIf="!editMode">
-    <!-- Header -->
-    <div
-      class="relative w-full h-40 sm:h-16 mt-10 x-8 sm:px-12 bg-accent-100 dark:bg-accent-700"
-    >
-      <!-- Background -->
-
-      <!-- Close button -->
-      <div
-        class="flex items-center justify-end w-full max-w-3xl mx-auto pt-6"
-      ></div>
-    </div>
-    <!-- Contact -->
-    <div
-      class="relative flex flex-col flex-auto items-center p-6 pt-0 sm:p-12 sm:pt-0"
-    >
-      <div class="w-full max-w-3xl">
-        <!-- Avatar and actions -->
-        <div class="flex flex-auto items-end -mt-16">
-          <!-- Actions -->
-          <div class="flex items-center ml-auto mb-1">
-            <button mat-stroked-button (click)="toggleEditMode(true)">
-              <mat-icon
-                class="icon-size-5"
-                [svgIcon]="'heroicons_solid:pencil-alt'"
-              ></mat-icon>
-              <span class="ml-2">수정</span>
-            </button>
-            <button mat-stroked-button (click)="toggleEditMode(true)">
-              <mat-icon
-                class="icon-size-5"
-                [svgIcon]="'heroicons_solid:pencil-alt'"
-              ></mat-icon>
-              <span class="ml-2">삭제</span>
-            </button>
-          </div>
-        </div>
-        <div class="flex flex-col mt-4 pt-6 border-t space-y-8">
-          <!-- Title -->
-          <ng-container *ngIf="contact.title">
-            <div class="flex sm:items-center">
-              <!-- <mat-icon [svgIcon]="'heroicons_outline:briefcase'"></mat-icon> -->
-              <div class="ml-6 leading-6">사이트선택</div>
-              <div class="ml-6 leading-6">{{ contact.title }}</div>
-            </div>
-          </ng-container>
-
-          <!-- 팝업사이즈 -->
-          <ng-container *ngIf="contact.emails.length">
-            <div class="flex">
-              <!-- <mat-icon [svgIcon]="'heroicons_outline:mail'"></mat-icon> -->
-              <div class="ml-6 leading-6">팝업사이즈</div>
-              <div class="min-w-0 ml-6 space-y-1">
-                <ng-container
-                  *ngFor="let email of contact.emails; trackBy: __trackByFn"
-                >
-                  <div class="flex items-center leading-6">
-                    <div class="text-md truncate text-secondary">
-                      <span class="mx-2">&bull;</span>
-                      <span class="font-medium">{{ email.label }}</span>
-                    </div>
-                    <div class="text-md truncate text-secondary">
-                      <span class="mx-2">&bull;</span>
-                      <span class="font-medium">180</span>
-                    </div>
-                  </div>
-                </ng-container>
-              </div>
-            </div>
-          </ng-container>
-
-          <!-- 팝업좌표 -->
-          <ng-container *ngIf="contact.phoneNumbers.length">
-            <div class="flex">
-              <!-- <mat-icon [svgIcon]="'heroicons_outline:phone'"></mat-icon> -->
-              <div class="ml-6 leading-6">팝업좌표</div>
-              <div class="min-w-0 ml-6 space-y-1">
-                <ng-container
-                  *ngFor="
-                    let phoneNumber of contact.phoneNumbers;
-                    trackBy: __trackByFn
-                  "
-                >
-                  <div class="flex items-center leading-6">
-                    <div class="text-md truncate text-secondary">
-                      <span class="mx-2">&bull;</span>
-                      <span class="font-medium">{{
-                        phoneNumber.phoneNumber
-                      }}</span>
-                    </div>
-                    <div class="text-md truncate text-secondary">
-                      <span class="mx-2">&bull;</span>
-                      <span class="font-medium">180</span>
-                    </div>
-                  </div>
-                </ng-container>
-              </div>
-            </div>
-          </ng-container>
-
-          <!-- Address -->
-          <ng-container *ngIf="contact.address">
-            <div class="flex sm:items-center">
-              <div class="ml-6 leading-6">팝업제목</div>
-              <div class="ml-6 leading-6">{{ contact.address }}</div>
-            </div>
-          </ng-container>
-
-          <!-- Notes -->
-          <ng-container *ngIf="contact.notes">
-            <div class="ml-6 leading-6">팝업내용</div>
-            <div class="flex">
-              <!-- <mat-icon [svgIcon]="'heroicons_outline:menu-alt-2'"></mat-icon> -->
-
-              <div
-                class="max-w-none ml-6 prose prose-sm"
-                [innerHTML]="contact.notes"
-              ></div>
-            </div>
-          </ng-container>
-          <!-- Birthday -->
-          <ng-container *ngIf="contact.birthday">
-            <div class="flex sm:items-center">
-              <!-- <mat-icon [svgIcon]="'heroicons_outline:cake'"></mat-icon> -->
-              <div class="ml-6 leading-6">사용여부</div>
-              <div class="ml-6 leading-6">
-                {{ contact.birthday | date: "longDate" }}
-              </div>
-            </div>
-          </ng-container>
-        </div>
-      </div>
-    </div>
-  </ng-container>
-
   <!-- Edit mode -->
-  <ng-container *ngIf="editMode">
   <!-- Contact form -->
   <div class="relative flex flex-col flex-auto items-center px-6 sm:px-12">
     <div class="w-full max-w-3xl">
-        <form [formGroup]="contactForm">
+      <form [formGroup]="popupForm">
         <!-- Name -->
         <div class="mt-8">
           <mat-form-field class="fuse-mat-no-subscript w-full">
@@ -159,22 +22,22 @@
         <div class="flex">
           <mat-form-field class="w-1/2 pr-2 mt-4">
             <mat-label>팝업 가로 사이즈</mat-label>
-              <input type="number" matInput />
+            <input type="number" matInput [formControlName]="'widthSize'" />
           </mat-form-field>
           <mat-form-field class="w-1/2 pl-2 mt-4">
             <mat-label>팝업 세로 사이즈</mat-label>
-              <input type="number" matInput />
+            <input type="number" matInput [formControlName]="'heightSize'" />
           </mat-form-field>
         </div>
         <!-- 팝업 좌표 -->
         <div class="flex">
           <mat-form-field class="w-1/2 pr-2 mt-4">
             <mat-label>팝업 좌표 TOP</mat-label>
-              <input type="number" matInput />
+            <input type="number" matInput [formControlName]="'topMargin'" />
           </mat-form-field>
           <mat-form-field class="w-1/2 pl-2 mt-4">
             <mat-label>팝업 좌표 LEFT</mat-label>
-              <input type="number" matInput />
+            <input type="number" matInput [formControlName]="'leftMargin'" />
           </mat-form-field>
         </div>
 
@@ -187,7 +50,11 @@
               class="hidden sm:flex icon-size-5"
               [svgIcon]="'heroicons_solid:briefcase'"
             ></mat-icon>
-              <input matInput [placeholder]="'Job title'" />
+            <input
+              matInput
+              [placeholder]="'Job title'"
+              [formControlName]="'title'"
+            />
           </mat-form-field>
         </div>
 
@@ -208,6 +75,7 @@
               [rows]="5"
               [spellcheck]="false"
               matTextareaAutosize
+              [formControlName]="'content'"
             ></textarea>
           </mat-form-field>
         </div>
@@ -247,7 +115,7 @@
             class="ml-2"
             mat-flat-button
             [color]="'primary'"
-              [disabled]="contactForm.invalid"
+            [disabled]="popupForm.invalid"
             [matTooltip]="'Save'"
           >
             Save
@@ -256,5 +124,4 @@
       </form>
     </div>
   </div>
-  </ng-container>
 </div>

src/app/modules/admin/board/popup/components/redit.component.ts

@@ -8,6 +8,8 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
+
+import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
@@ -15,7 +17,8 @@ import { Subject, takeUntil } from 'rxjs';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseConfirmationService } from '@fuse/services/confirmation';
 
-import { ActivatedRoute, Router } from '@angular/router';
+import { Popup } from '../models/popup';
+import { PopupService } from '../services/popup.service';
 
 @Component({
   selector: 'popup-redit',
@@ -50,10 +53,11 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
 
   isLoading = false;
   searchInputControl = new FormControl();
-  contactForm!: FormGroup;
+  popupForm!: FormGroup;
   editMode: boolean = false;
   contact = contacts[0];
   categories = categories;
+  popup: Popup | undefined;
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -65,7 +69,8 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
     private _fuseConfirmationService: FuseConfirmationService,
     private _formBuilder: FormBuilder,
     private _route: ActivatedRoute,
-    private _router: Router
+    private _router: Router,
+    private _popupService: PopupService
   ) {}
 
   // -----------------------------------------------------------------------------------------------------
@@ -77,17 +82,31 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   ngOnInit(): void {
     // Create the contact form
-    this.contactForm = this._formBuilder.group({
+    this.popupForm = this._formBuilder.group({
       id: [''],
-      name: [''],
-      emails: this._formBuilder.array([]),
-      phoneNumbers: this._formBuilder.array([]),
+      index: [''],
       title: [''],
-      company: [''],
-      birthday: [null],
-      address: [null],
-      notes: [null],
-      tags: [[]],
+      widthSize: [''],
+      heightSize: [''],
+      topMargin: [''],
+      leftMargin: [''],
+      site: [''],
+      useOrNot: [''],
+      content: [''],
+    });
+
+    this._popupService.popup$
+      .pipe(takeUntil(this._unsubscribeAll))
+      .subscribe((popup: Popup | undefined) => {
+        if (!popup) {
+          return;
+        }
+
+        this.popup = popup;
+        this.popupForm.patchValue(popup);
+
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
       });
   }
 

src/app/modules/admin/board/popup/components/view.component.html

@@ -0,0 +1,143 @@
+<div class="flex flex-col flex-auto min-w-0">
+  <!-- View mode -->
+
+  <!-- Header -->
+  <div
+    class="relative w-full h-40 sm:h-16 mt-10 x-8 sm:px-12 bg-accent-100 dark:bg-accent-700"
+  >
+    <!-- Background -->
+
+    <!-- Close button -->
+    <div
+      class="flex items-center justify-end w-full max-w-3xl mx-auto pt-6"
+    ></div>
+  </div>
+  <!-- Contact -->
+  <div
+    class="relative flex flex-col flex-auto items-center p-6 pt-0 sm:p-12 sm:pt-0"
+  >
+    <div class="w-full max-w-3xl">
+      <!-- Avatar and actions -->
+      <div class="flex flex-auto items-end -mt-16">
+        <!-- Actions -->
+        <div class="flex items-center ml-auto mb-1">
+          <button mat-stroked-button (click)="toggleEditMode()">
+            <mat-icon
+              class="icon-size-5"
+              [svgIcon]="'heroicons_solid:pencil-alt'"
+            ></mat-icon>
+            <span class="ml-2">수정</span>
+          </button>
+          <button mat-stroked-button>
+            <mat-icon
+              class="icon-size-5"
+              [svgIcon]="'heroicons_solid:pencil-alt'"
+            ></mat-icon>
+            <span class="ml-2">삭제</span>
+          </button>
+        </div>
+      </div>
+      <div class="flex flex-col mt-4 pt-6 border-t space-y-8">
+        <!-- Title -->
+        <ng-container *ngIf="popup?.site">
+          <div class="flex sm:items-center">
+            <!-- <mat-icon [svgIcon]="'heroicons_outline:briefcase'"></mat-icon> -->
+            <div class="ml-6 leading-6">사이트선택</div>
+            <div class="ml-6 leading-6">{{ popup?.site }}</div>
+          </div>
+        </ng-container>
+
+        <!-- 팝업사이즈 -->
+        <ng-container *ngIf="popup?.widthSize">
+          <div class="flex">
+            <!-- <mat-icon [svgIcon]="'heroicons_outline:mail'"></mat-icon> -->
+            <div class="ml-6 leading-6">팝업사이즈</div>
+            <div class="min-w-0 ml-6 space-y-1">
+              <div class="flex items-center leading-6">
+                <div class="text-md truncate text-secondary">
+                  <span class="mx-2">&bull;</span>
+                  <span class="font-medium">가로</span>
+                </div>
+                <div class="text-md truncate text-secondary">
+                  <span class="mx-2">&bull;</span>
+                  <span class="font-medium">{{ popup?.widthSize }}</span>
+                </div>
+              </div>
+              <div class="flex items-center leading-6">
+                <div class="text-md truncate text-secondary">
+                  <span class="mx-2">&bull;</span>
+                  <span class="font-medium">세로</span>
+                </div>
+                <div class="text-md truncate text-secondary">
+                  <span class="mx-2">&bull;</span>
+                  <span class="font-medium">{{ popup?.heightSize }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ng-container>
+
+        <!-- 팝업좌표 -->
+        <ng-container *ngIf="popup?.topMargin">
+          <div class="flex">
+            <!-- <mat-icon [svgIcon]="'heroicons_outline:mail'"></mat-icon> -->
+            <div class="ml-6 leading-6">팝업좌표</div>
+            <div class="min-w-0 ml-6 space-y-1">
+              <div class="flex items-center leading-6">
+                <div class="text-md truncate text-secondary">
+                  <span class="mx-2">&bull;</span>
+                  <span class="font-medium">TOP</span>
+                </div>
+                <div class="text-md truncate text-secondary">
+                  <span class="mx-2">&bull;</span>
+                  <span class="font-medium">{{ popup?.topMargin }}</span>
+                </div>
+              </div>
+              <div class="flex items-center leading-6">
+                <div class="text-md truncate text-secondary">
+                  <span class="mx-2">&bull;</span>
+                  <span class="font-medium">LEFT</span>
+                </div>
+                <div class="text-md truncate text-secondary">
+                  <span class="mx-2">&bull;</span>
+                  <span class="font-medium">{{ popup?.leftMargin }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ng-container>
+
+        <!-- Address -->
+        <ng-container *ngIf="popup?.title">
+          <div class="flex sm:items-center">
+            <div class="ml-6 leading-6">팝업제목</div>
+            <div class="ml-6 leading-6">{{ popup?.title }}</div>
+          </div>
+        </ng-container>
+
+        <!-- Notes -->
+        <ng-container *ngIf="popup?.content">
+          <div class="ml-6 leading-6">팝업내용</div>
+          <div class="flex">
+            <!-- <mat-icon [svgIcon]="'heroicons_outline:menu-alt-2'"></mat-icon> -->
+
+            <div
+              class="max-w-none ml-6 prose prose-sm"
+              [innerHTML]="popup?.content"
+            ></div>
+          </div>
+        </ng-container>
+        <!-- UseOrNot -->
+        <ng-container *ngIf="popup?.useOrNot">
+          <div class="flex sm:items-center">
+            <!-- <mat-icon [svgIcon]="'heroicons_outline:cake'"></mat-icon> -->
+            <div class="ml-6 leading-6">사용여부</div>
+            <div class="ml-6 leading-6">
+              {{ popup?.useOrNot }}
+            </div>
+          </div>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</div>

src/app/modules/admin/board/popup/components/view.component.ts

@@ -0,0 +1,113 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+  ViewEncapsulation,
+} from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+import { Subject, takeUntil } from 'rxjs';
+import { fuseAnimations } from '@fuse/animations';
+import { FuseConfirmationService } from '@fuse/services/confirmation';
+
+import { Popup } from '../models/popup';
+import { PopupService } from '../services/popup.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'popup-view',
+  templateUrl: './view.component.html',
+  styles: [
+    /* language=SCSS */
+    `
+      .inventory-grid {
+        grid-template-columns: 60px auto 40px;
+
+        @screen sm {
+          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
+        }
+
+        @screen md {
+          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
+        }
+
+        @screen lg {
+          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
+        }
+      }
+    `,
+  ],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: fuseAnimations,
+})
+export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
+  isLoading = false;
+
+  private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+  popup: Popup | undefined;
+
+  /**
+   * Constructor
+   */
+  constructor(
+    private _changeDetectorRef: ChangeDetectorRef,
+    private _fuseConfirmationService: FuseConfirmationService,
+    private _formBuilder: FormBuilder,
+    private _popupService: PopupService,
+    private router: Router
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
+  ngOnInit(): void {
+    this._popupService.popup$
+      .pipe(takeUntil(this._unsubscribeAll))
+      .subscribe((popup: Popup | undefined) => {
+        if (!popup) {
+          return;
+        }
+
+        this.popup = popup;
+        // Mark for check
+        this._changeDetectorRef.markForCheck();
+      });
+  }
+
+  /**
+   * After view init
+   */
+  ngAfterViewInit(): void {}
+
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next(null);
+    this._unsubscribeAll.complete();
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Private methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Toggle edit mode
+   *
+   * @param editMode
+   */
+  toggleEditMode(): void {}
+}

src/app/modules/admin/board/popup/models/popup.ts

@@ -2,6 +2,7 @@ export interface Popup {
   id?: string;
   index?: number;
   title?: string;
+  content?: string;
   widthSize?: number;
   heightSize?: number;
   topMargin?: number;

src/app/modules/admin/board/popup/popup.routing.ts

@@ -2,9 +2,9 @@ import { Route } from '@angular/router';
 
 import { ListComponent } from './components/list.component';
 
-import { PopupsResolver } from './resolvers/popup.resolver';
-import { UserResolver } from '../../member/user/resolvers/user.resolver';
+import { PopupsResolver, PopupResolver } from './resolvers/popup.resolver';
 import { ReditComponent } from './components/redit.component';
+import { ViewComponent } from './components/view.component';
 
 export const popupRoutes: Route[] = [
   {
@@ -24,6 +24,21 @@ export const popupRoutes: Route[] = [
     path: 'redit',
     component: ReditComponent,
   },
+  {
+    path: 'redit/:id',
+    component: ReditComponent,
+    resolve: {
+      popup: PopupResolver,
+    },
+  },
+
+  {
+    path: 'view/:id',
+    component: ViewComponent,
+    resolve: {
+      popup: PopupResolver,
+    },
+  },
 
   // {
   //   path: 'redit',