From f503b86c736c9eb058f2bef1b1fdf0d97daf7de9 Mon Sep 17 00:00:00 2001
From: Park Byung Eun <geekdev@naver.com>
Date: Mon, 1 Aug 2022 08:59:00 +0000
Subject: [PATCH] =?UTF-8?q?=EA=B3=B5=EC=A7=80=EC=82=AC=ED=95=AD=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/mock-api/apps/board/notice/api.ts     |  18 +-
 src/app/mock-api/apps/board/notice/data.ts    |  34 +++
 .../components/redit.component.ts             |  12 +-
 .../admin/board/notice/components/index.ts    |   3 +-
 .../notice/components/list.component.html     | 265 ++++++++----------
 .../board/notice/components/list.component.ts |  64 ++---
 .../notice/components/redit.component.html    | 123 ++++++++
 .../{view.component.ts => redit.component.ts} | 129 ++++-----
 .../notice/components/view.component.html     |   2 -
 .../admin/board/notice/models/notice.ts       |   2 +-
 .../admin/board/notice/notice.module.ts       |   4 +
 .../admin/board/notice/notice.routing.ts      |  20 +-
 12 files changed, 386 insertions(+), 290 deletions(-)
 create mode 100644 src/app/modules/admin/board/notice/components/redit.component.html
 rename src/app/modules/admin/board/notice/components/{view.component.ts => redit.component.ts} (62%)
 delete mode 100644 src/app/modules/admin/board/notice/components/view.component.html

diff --git a/src/app/mock-api/apps/board/notice/api.ts b/src/app/mock-api/apps/board/notice/api.ts
index 5974981..fc51b73 100644
--- a/src/app/mock-api/apps/board/notice/api.ts
+++ b/src/app/mock-api/apps/board/notice/api.ts
@@ -33,29 +33,13 @@ export class BoardNoticeMockApi {
       .reply(({ request }) => {
         // Get available queries
         const search = request.params.get('search');
-        const sort = request.params.get('sort') || 'name';
-        const order = request.params.get('order') || 'asc';
+
         const page = parseInt(request.params.get('page') ?? '1', 10);
         const size = parseInt(request.params.get('size') ?? '10', 10);
 
         // Clone the notices
         let notices: any[] | null = cloneDeep(this._notices);
 
-        // Sort the notices
-        if (sort === 'sku' || sort === 'name' || sort === 'active') {
-          notices.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 {
-          notices.sort((a, b) =>
-            order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort]
-          );
-        }
-
         // If search exists...
         if (search) {
           // Filter the notices
diff --git a/src/app/mock-api/apps/board/notice/data.ts b/src/app/mock-api/apps/board/notice/data.ts
index f416a0e..8a52f37 100644
--- a/src/app/mock-api/apps/board/notice/data.ts
+++ b/src/app/mock-api/apps/board/notice/data.ts
@@ -2,6 +2,40 @@
 
 export const notices = [
   {
+    id: '1',
+    idx: 80,
+    site: '',
+    title:
+      '게임멈춤,튕기는 현상및 계좌문의시 확인및 입금전후 확인사항 대한 공지사항',
+    writer: '관리자',
+    writeDate: '2021-10-25 02:25',
+    views: 136,
+    state: '노출',
+  },
+  {
+    id: '2',
+    idx: 80,
+    site: '',
+    title:
+      '게임멈춤,튕기는 현상및 계좌문의시 확인및 입금전후 확인사항 대한 공지사항',
+    writer: '관리자',
+    writeDate: '2021-10-25 02:25',
+    views: 136,
+    state: '노출',
+  },
+  {
+    id: '3',
+    idx: 80,
+    site: 'all',
+    title:
+      '게임멈춤,튕기는 현상및 계좌문의시 확인및 입금전후 확인사항 대한 공지사항',
+    writer: '관리자',
+    writeDate: '2021-10-25 02:25',
+    views: 136,
+    state: '노출',
+  },
+  {
+    id: '4',
     idx: 80,
     site: '',
     title:
diff --git a/src/app/modules/admin/board/notice-oneline/components/redit.component.ts b/src/app/modules/admin/board/notice-oneline/components/redit.component.ts
index 53ae71c..c0b797b 100644
--- a/src/app/modules/admin/board/notice-oneline/components/redit.component.ts
+++ b/src/app/modules/admin/board/notice-oneline/components/redit.component.ts
@@ -55,9 +55,9 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
   noticeOnelineForm!: FormGroup;
   editMode: boolean = false;
 
-  noticeType = NOTICE_TYPE;
-  siteType = SITE_TYPE;
-  useOrNotType = USE_OR_NOT_TYPE;
+  noticeType = NOTICE_ONELINE_TYPE;
+  siteType = SITE_NOTICE_ONELINE_TYPE;
+  useOrNotType = USE_OR_NOT_NOTICE_ONELINE_TYPE;
 
   noticeOneline!: NoticeOneline;
 
@@ -180,21 +180,21 @@ export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 }
 
-export const NOTICE_TYPE = [
+export const NOTICE_ONELINE_TYPE = [
   {
     key: '0',
     value: '흐르는공지',
   },
 ];
 
-export const SITE_TYPE = [
+export const SITE_NOTICE_ONELINE_TYPE = [
   {
     key: '0',
     value: '--전체--',
   },
 ];
 
-export const USE_OR_NOT_TYPE = [
+export const USE_OR_NOT_NOTICE_ONELINE_TYPE = [
   {
     key: '0',
     value: '사용(노출)',
diff --git a/src/app/modules/admin/board/notice/components/index.ts b/src/app/modules/admin/board/notice/components/index.ts
index 04759eb..d187813 100644
--- a/src/app/modules/admin/board/notice/components/index.ts
+++ b/src/app/modules/admin/board/notice/components/index.ts
@@ -1,3 +1,4 @@
 import { ListComponent } from './list.component';
+import { ReditComponent } from './redit.component';
 
-export const COMPONENTS = [ListComponent];
+export const COMPONENTS = [ListComponent, ReditComponent];
diff --git a/src/app/modules/admin/board/notice/components/list.component.html b/src/app/modules/admin/board/notice/components/list.component.html
index 753facc..c404905 100644
--- a/src/app/modules/admin/board/notice/components/list.component.html
+++ b/src/app/modules/admin/board/notice/components/list.component.html
@@ -12,132 +12,99 @@
     <!-- Title -->
     <div class="text-4xl font-extrabold tracking-tight">공지사항</div>
     <!-- Actions -->
-    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
-      <!-- Memo -->
-      <!-- <mat-form-field>
-        <ng-container *ngIf="notices$ | async as notices">
-          <ng-container
-            *ngFor="let notice of notices; trackBy: __trackByFn"
-          >
-            <div
-              class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-            >
-              <fieldset>
-                총 파트너수:{{ notice.totalPartnerCount }} 총 보유머니:{{
-                  notice.totalHoldingMoney
-                }}
-                총 콤프:{{ notice.totalComp }} 총 합계:{{
-                  notice.total
-                }}
-              </fieldset>
-            </div>
-          </ng-container>
-        </ng-container>
-      </mat-form-field> -->
 
-      <!-- SelectBox -->
-      <!-- <mat-form-field>
-        <mat-select placeholder="리스트수">
-          <mat-option value="40">40</mat-option>
-          <mat-option value="60">60</mat-option>
-          <mat-option value="80">80</mat-option>
-          <mat-option value="100">100</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="레벨">
-          <mat-option value="level1">LV.1</mat-option>
-          <mat-option value="level2">LV.2</mat-option>
-          <mat-option value="level3">LV.3</mat-option>
-          <mat-option value="level4">LV.4</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="상태">
-          <mat-option value="">정상</mat-option>
-          <mat-option value="">대기</mat-option>
-          <mat-option value="">탈퇴</mat-option>
-          <mat-option value="">휴면</mat-option>
-          <mat-option value="">블랙</mat-option>
-          <mat-option value="">정지</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="제한">
-          <mat-option value="">카지노제한</mat-option>
-          <mat-option value="">슬롯제한</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field> -->
-      <mat-form-field>
-        <mat-select placeholder="검색어">
-          <mat-option value="">작성자</mat-option>
-          <mat-option value="">글제목</mat-option>
-          <mat-option value="">글내용</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <!-- <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="아이디">
-          <mat-option value="">아이디</mat-option>
-          <mat-option value="">닉네임</mat-option>
-          <mat-option value="">이름</mat-option>
-          <mat-option value="">사이트</mat-option>
-          <mat-option value="">파트너수동지급</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="가입일 정렬">
-          <mat-option value="">가입일 정렬</mat-option>
-          <mat-option value="">아이디 정렬</mat-option>
-          <mat-option value="">닉네임 정렬</mat-option>
-          <mat-option value="">캐쉬 정렬</mat-option>
-          <mat-option value="">콤프 정렬</mat-option>
-          <mat-option value="">쿠폰 정렬</mat-option>
-          <mat-option value="">입금 정렬</mat-option>
-          <mat-option value="">출금 정렬</mat-option>
-          <mat-option value="">차익 정렬</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내림차순">
-          <mat-option value="">내림차순</mat-option>
-          <mat-option value="">오름차순</mat-option>
-        </mat-select>
-      </mat-form-field> -->
+    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
       <!-- Search -->
-      <mat-form-field
-        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64"
+      <div>
+        <button mat-icon-button (click)="__onClickSearch()">
+          <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Search --><!-- Search -->
+  <div
+    *ngIf="__isSearchOpened"
+    class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
+  >
+    <!-- Actions -->
+    <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+      <!-- Search -->
+      <!-- Add user button -->
+      <button
+        mat-flat-button
+        [color]="'primary'"
+        fxFlex
+        (click)="__createProduct()"
+      >
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+        <span class="ml-2 mr-1">Search</span>
+      </button>
+    </div>
+    <!-- Card inception -->
+    <div class="col-span-2 sm:col-span-1">
+      <mat-form-field
+        class="fuse-mat-no-subscript w-full"
+        [floatLabel]="'always'"
       >
-        <mat-icon
-          class="icon-size-5"
-          matPrefix
-          [svgIcon]="'heroicons_solid:search'"
-        ></mat-icon>
         <input
           matInput
-          [formControl]="searchInputControl"
-          [autocomplete]="'off'"
-          [placeholder]="'Search'"
+          [matDatepicker]="picker1"
+          [placeholder]="'Choose a date'"
         />
+        <mat-datepicker-toggle
+          matSuffix
+          [for]="picker1"
+        ></mat-datepicker-toggle>
+        <mat-datepicker #picker1></mat-datepicker>
       </mat-form-field>
-      <!-- Add user button -->
+    </div>
+    <!-- Card expiration -->
+    <div class="col-span-2 sm:col-span-1">
+      <mat-form-field
+        class="fuse-mat-no-subscript w-full"
+        [floatLabel]="'always'"
+      >
+        <input
+          matInput
+          [matDatepicker]="picker2"
+          [placeholder]="'Choose a date'"
+        />
+        <mat-datepicker-toggle
+          matSuffix
+          [for]="picker2"
+        ></mat-datepicker-toggle>
+        <mat-datepicker #picker2></mat-datepicker>
+      </mat-form-field>
+    </div>
+  </div>
+
+  <div
+    class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b"
+  >
+    <!-- Title -->
+    <div class="text-4xl font-extrabold tracking-tight"></div>
+    <!-- Actions -->
+
+    <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
+      <!-- Search -->
       <button
         class="ml-4"
         mat-flat-button
         [color]="'primary'"
-        (click)="__createProduct()"
+        (click)="__onClickReditBtn($event, '0')"
       >
-        <!-- <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon> -->
-        <span class="ml-2 mr-1">검색하기</span>
+        <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
+        <span class="ml-2 mr-1">등록</span>
+      </button>
+      <button class="ml-4" mat-flat-button [color]="'primary'">
+        <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
+        <span class="ml-2 mr-1">숨김</span>
+      </button>
+      <button class="ml-4" mat-flat-button [color]="'primary'">
+        <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
+        <span class="ml-2 mr-1">완전삭제</span>
       </button>
     </div>
   </div>
@@ -149,22 +116,28 @@
       class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
     >
       <ng-container *ngIf="notices$ | async as notices">
-        <ng-container *ngIf="notices.length > 0; else noNotice">
+        <ng-container *ngIf="notices.length > 0; else noUser">
           <div class="grid">
             <!-- Header -->
             <div
-              class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8 shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
-              matSort
-              matSortDisableClear
+              class="inventory-grid z-10 sticky top-0 grid gap-4 py-4 px-6 md:px-8shadow text-md font-semibold text-secondary bg-gray-50 dark:bg-black dark:bg-opacity-5"
             >
-              <div class="hidden sm:block">선택</div>
-              <div class="hidden sm:block">번호</div>
-              <div class="hidden sm:block">사이트</div>
-              <div class="hidden sm:block">제목</div>
-              <div class="hidden sm:block">작성자</div>
-              <div class="hidden sm:block">작성일</div>
-              <div class="hidden sm:block">조회</div>
-              <div class="hidden sm:block">상태</div>
+              <div class="hidden lg:block">
+                <mat-checkbox></mat-checkbox>
+              </div>
+              <div class="hidden lg:block">번호</div>
+              <div class="hidden lg:block">사이트</div>
+              <div class="hidden lg:block">제목</div>
+              <div class="hidden lg:block">
+                작성자
+                <hr style="margin: 7px 0px" />
+                작성일
+              </div>
+              <div class="hidden lg:block">
+                조회
+                <hr style="margin: 7px 0px" />
+                상태
+              </div>
             </div>
             <!-- Rows -->
             <ng-container *ngIf="notices$ | async as notices">
@@ -174,44 +147,44 @@
                 <div
                   class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
                 >
-                  <!-- 선택 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     <mat-checkbox></mat-checkbox>
                   </div>
                   <!-- 번호 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     {{ notice.idx }}
                   </div>
                   <!-- 사이트 -->
-                  <div class="hidden sm:block truncate">
+                  <div class="hidden lg:block">
                     {{ notice.site }}
                   </div>
                   <!-- 제목 -->
-                  <div class="hidden sm:block truncate">
+                  <div
+                    class="hidden lg:block"
+                    style="cursor: pointer"
+                    (click)="__onClickReditBtn($event, notice.id)"
+                  >
                     {{ notice.title }}
                   </div>
-                  <!-- 작성자 -->
-                  <div class="hidden sm:block truncate">
+                  <!-- 작성자 || 작성일 -->
+                  <div class="hidden lg:block">
                     {{ notice.writer }}
-                  </div>
-                  <!-- 작성일 -->
-                  <div class="hidden sm:block truncate">
+                    <hr style="margin: 7px 0px" />
+
                     {{ notice.writeDate }}
                   </div>
-                  <!-- 조회 -->
-                  <div class="hidden sm:block truncate">
+                  <!-- 조회 || 상태 -->
+                  <div class="hidden lg:block">
                     {{ notice.views }}
-                  </div>
-                  <!-- 상태 -->
-                  <div class="hidden sm:block truncate">
+                    <hr style="margin: 7px 0px" />
+
                     {{ notice.state }}
                   </div>
+
+                  <!-- management -->
                 </div>
               </ng-container>
             </ng-container>
-            <button mat-flat-button [color]="'primary'">등록</button>
-            <button mat-flat-button [color]="'primary'">숨김</button>
-            <button mat-flat-button [color]="'warn'">완전삭제</button>
           </div>
 
           <mat-paginator
@@ -226,11 +199,11 @@
         </ng-container>
       </ng-container>
 
-      <ng-template #noNotice>
+      <ng-template #noUser>
         <div
           class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
         >
-          There are no notices!
+          There are no data!
         </div>
       </ng-template>
     </div>
diff --git a/src/app/modules/admin/board/notice/components/list.component.ts b/src/app/modules/admin/board/notice/components/list.component.ts
index 812f993..b32b8fd 100644
--- a/src/app/modules/admin/board/notice/components/list.component.ts
+++ b/src/app/modules/admin/board/notice/components/list.component.ts
@@ -42,18 +42,18 @@ import { Router } from '@angular/router';
     /* language=SCSS */
     `
       .inventory-grid {
-        grid-template-columns: 60px auto 40px;
+        grid-template-columns: 40px 40px 40px auto 200px 200px;
 
         @screen sm {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
+          grid-template-columns: 40px 40px 40px auto 200px 200px;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
+          grid-template-columns: 40px 40px 40px auto 300px 200px;
         }
 
         @screen lg {
-          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
+          grid-template-columns: 40px 40px 40px auto 300px 200px;
         }
       }
     `,
@@ -67,13 +67,14 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatSort) private _sort!: MatSort;
 
   notices$!: Observable<Notice[] | undefined>;
-  users$!: Observable<User[] | undefined>;
 
   isLoading = false;
   searchInputControl = new FormControl();
   selectedNotice?: Notice;
   pagination?: NoticePagination;
 
+  __isSearchOpened = false;
+
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
   /**
@@ -113,45 +114,7 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
   /**
    * After view init
    */
-  ngAfterViewInit(): void {
-    if (this._sort && this._paginator) {
-      // Set the initial sort
-      this._sort.sort({
-        id: 'name',
-        start: 'asc',
-        disableClear: true,
-      });
-
-      // Mark for check
-      this._changeDetectorRef.markForCheck();
-
-      // If the notice changes the sort order...
-      this._sort.sortChange
-        .pipe(takeUntil(this._unsubscribeAll))
-        .subscribe(() => {
-          // Reset back to the first page
-          this._paginator.pageIndex = 0;
-        });
-
-      // Get products if sort or page changes
-      merge(this._sort.sortChange, this._paginator.page)
-        .pipe(
-          switchMap(() => {
-            this.isLoading = true;
-            return this._noticeService.getNotices(
-              this._paginator.pageIndex,
-              this._paginator.pageSize,
-              this._sort.active,
-              this._sort.direction
-            );
-          }),
-          map(() => {
-            this.isLoading = false;
-          })
-        )
-        .subscribe();
-    }
-  }
+  ngAfterViewInit(): void {}
 
   /**
    * On destroy
@@ -166,14 +129,19 @@ 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
   // -----------------------------------------------------------------------------------------------------
 
+  __onClickReditBtn(event: MouseEvent, id: string): void {
+    const param = id === '0' ? '' : id;
+    let url: string = 'board/notice/redit/' + param;
+    this.router.navigateByUrl(url);
+  }
+  __onClickSearch(): void {
+    this.__isSearchOpened = !this.__isSearchOpened;
+  }
+
   /**
    * Create product
    */
diff --git a/src/app/modules/admin/board/notice/components/redit.component.html b/src/app/modules/admin/board/notice/components/redit.component.html
new file mode 100644
index 0000000..7b7431b
--- /dev/null
+++ b/src/app/modules/admin/board/notice/components/redit.component.html
@@ -0,0 +1,123 @@
+<div class="flex flex-col flex-auto min-w-0">
+  <div class="flex-auto border-t -mt-px pt-4 sm:pt-6">
+    <div class="w-full max-w-screen-xl mx-auto">
+      <div class="grid grid-cols-1 sm:grid-cols-6 gap-6 w-full min-w-0">
+        <!-- Budget distribution -->
+        <div
+          class="sm:col-span-6 flex flex-col flex-auto p-6 bg-card shadow rounded-2xl overflow-hidden"
+        >
+          <div class="text-lg font-medium tracking-tight leading-6 truncate">
+            공지사항 {{ !notice ? "등록" : "수정" }}
+          </div>
+          <div class="flex flex-col flex-auto mt-2 overflow-x-auto">
+            <form
+              [formGroup]="noticeForm"
+              autocomplete="off"
+              class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
+            >
+              <!-- 글쓴이 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>글쓴이(아이디)</mat-label>
+                  <input
+                    matInput
+                    readonly="true"
+                    [formControlName]="'writer'"
+                  />
+                </mat-form-field>
+              </div>
+
+              <!-- 공지적용 -->
+              <div>
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>공지적용</mat-label>
+                  <mat-select>
+                    <ng-container *ngFor="let type of noticeType">
+                      <mat-option [value]="type.key">
+                        {{ type.value }}
+                      </mat-option>
+                    </ng-container>
+                  </mat-select>
+                </mat-form-field>
+              </div>
+
+              <!-- 제목 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>제목</mat-label>
+                  <input matInput readonly="true" [formControlName]="'title'" />
+                </mat-form-field>
+              </div>
+              <!-- 등록시간 -->
+              <div class="mt-8">
+                <mat-form-field
+                  class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+                >
+                  <mat-label>등록시간</mat-label>
+                  <input matInput [formControlName]="'writerDate'" />
+                </mat-form-field>
+                <span
+                  >예) 2001-01-01 23시22분(2001년 1월1일 오후 11시21분)-
+                  <p style="color: red">미등록시 현재일로 등록</p></span
+                >
+              </div>
+
+              <!-- Body -->
+              <!-- <quill-editor class="mt-2"></quill-editor> -->
+              <mat-form-field
+                class="mt-8 fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full"
+              >
+                <textarea
+                  matInput
+                  [required]="true"
+                  [rows]="5"
+                  matTextareaAutosize
+                  [formControlName]="'content'"
+                ></textarea>
+                <mat-label>내용</mat-label>
+              </mat-form-field>
+            </form>
+          </div>
+          <!-- Actions -->
+          <div
+            class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
+          >
+            <div class="flex items-center mt-4 sm:mt-0">
+              <!-- Save as draft -->
+              <button
+                class="sm:mx-3"
+                mat-stroked-button
+                (click)="__onClickeCancel()"
+              >
+                <span>취소</span>
+              </button>
+              <!-- Send -->
+              <button
+                class="order-first sm:order-last"
+                mat-flat-button
+                [color]="'primary'"
+                (click)="__onClickReditBtn($event, notice)"
+              >
+                {{ !notice ? "등록" : "수정" }}
+              </button>
+              <button
+                *ngIf="!!notice"
+                class="order-first sm:order-last"
+                mat-flat-button
+                [color]="'primary'"
+              >
+                숨김
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/modules/admin/board/notice/components/view.component.ts b/src/app/modules/admin/board/notice/components/redit.component.ts
similarity index 62%
rename from src/app/modules/admin/board/notice/components/view.component.ts
rename to src/app/modules/admin/board/notice/components/redit.component.ts
index 67e7c80..a7a72a0 100644
--- a/src/app/modules/admin/board/notice/components/view.component.ts
+++ b/src/app/modules/admin/board/notice/components/redit.component.ts
@@ -8,33 +8,20 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {
-  FormBuilder,
-  FormControl,
-  FormGroup,
-  Validators,
-} from '@angular/forms';
-import { MatCheckboxChange } from '@angular/material/checkbox';
+
+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';
-import {
-  debounceTime,
-  map,
-  merge,
-  Observable,
-  Subject,
-  switchMap,
-  takeUntil,
-} from 'rxjs';
+import { Subject, takeUntil } from 'rxjs';
 import { fuseAnimations } from '@fuse/animations';
 import { FuseConfirmationService } from '@fuse/services/confirmation';
-
-import { User } from 'app/modules/admin/member/user/models/user';
-import { UserService } from 'app/modules/admin/member/user/services/user.service';
+import { NoticeService } from '../services/notice.service';
+import { Notice } from '../models/notice';
 
 @Component({
-  selector: 'notice-view',
-  templateUrl: './view.component.html',
+  selector: 'notice-redit',
+  templateUrl: './redit.component.html',
   styles: [
     /* language=SCSS */
     `
@@ -59,14 +46,18 @@ import { UserService } from 'app/modules/admin/member/user/services/user.service
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: fuseAnimations,
 })
-export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
+export class ReditComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
   @ViewChild(MatSort) private _sort!: MatSort;
 
   isLoading = false;
   searchInputControl = new FormControl();
-  selectedProductForm!: FormGroup;
-  selectedUser?: User;
+  noticeForm!: FormGroup;
+  editMode: boolean = false;
+
+  noticeType = NOTICE_TYPE;
+
+  notice!: Notice;
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -77,7 +68,9 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
     private _changeDetectorRef: ChangeDetectorRef,
     private _fuseConfirmationService: FuseConfirmationService,
     private _formBuilder: FormBuilder,
-    private _userService: UserService
+    private _route: ActivatedRoute,
+    private _router: Router,
+    private _noticeService: NoticeService
   ) {}
 
   // -----------------------------------------------------------------------------------------------------
@@ -88,53 +81,28 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
    * On init
    */
   ngOnInit(): void {
-    this.selectedProductForm = this._formBuilder.group({
-      id: [''],
-      signinId: [{ value: '', disabled: true }],
-      signinPw: [{ value: '' }],
-      exchangePw: [''],
-      description: [''],
-      tags: [[]],
-      nickname: [{ value: '', disabled: true }],
-      ownCash: [''],
-      phoneNumber: [''],
-      level: [''],
-      status: [''],
-      isExcahngeMoney: [''],
-      bankname: [''],
-      accountNumber: [''],
-      accountHolder: [''],
-      comp: [''],
-      coupon: [''],
-      recommender: [{ value: '', disabled: true }],
-      changeSite: [''],
-      recommendCount: [''],
-      hodingGameMoney: [{ value: '0', disabled: true }],
-      memo: [''],
-      bacaraRate: [],
-      rulletRate: [],
-      dragonRate: [],
-      etcRate: [],
-      slotRate: [],
-      casinoRusingRate: [],
-      slotRusingRate: [],
+    // Create the contact form
+    this.noticeForm = this._formBuilder.group({
+      writer: ['관리자'],
+      noticeType: [''],
+      title: [''],
+      writerDate: [''],
+      content: [''],
     });
 
-    // Get the User
-    this._userService.user$
+    this._noticeService.notice$
       .pipe(takeUntil(this._unsubscribeAll))
-      .subscribe((user: User | undefined) => {
-        if (!user) {
+      .subscribe((notice: Notice | undefined) => {
+        if (!notice) {
           return;
         }
-        this.selectedUser = user;
 
-        this.selectedProductForm.patchValue(user);
+        this.notice = notice;
+        this.noticeForm.patchValue(notice);
+
         // Mark for check
         this._changeDetectorRef.markForCheck();
       });
-
-    /* this.user$ = this._userService.user$; */
   }
 
   /**
@@ -159,6 +127,14 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
   // @ Private methods
   // -----------------------------------------------------------------------------------------------------
 
+  __onClickeCancel(): void {
+    /* let url: string = 'board/customer-template/';
+    this._router.navigateByUrl(url); */
+  }
+  __onClickReditBtn(event: MouseEvent, notice: Notice): void {
+    console.log('click: ', notice);
+  }
+
   /**
    * Create product
    */
@@ -171,6 +147,22 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
    */
   __toggleDetails(productId: string): void {}
 
+  /**
+   * Toggle edit mode
+   *
+   * @param editMode
+   */
+  toggleEditMode(editMode: boolean | null = null): void {
+    if (editMode === null) {
+      this.editMode = !this.editMode;
+    } else {
+      this.editMode = editMode;
+    }
+
+    // Mark for check
+    this._changeDetectorRef.markForCheck();
+  }
+
   /**
    * Track by function for ngFor loops
    *
@@ -181,3 +173,14 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
     return item.id || index;
   }
 }
+
+export const NOTICE_TYPE = [
+  {
+    key: '0',
+    value: '공지사항',
+  },
+  {
+    key: '1',
+    value: '파트너공지',
+  },
+];
diff --git a/src/app/modules/admin/board/notice/components/view.component.html b/src/app/modules/admin/board/notice/components/view.component.html
deleted file mode 100644
index 07b309a..0000000
--- a/src/app/modules/admin/board/notice/components/view.component.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<!-- Title -->
-<div class="text-4xl font-extrabold tracking-tight">고객센터-상세page</div>
diff --git a/src/app/modules/admin/board/notice/models/notice.ts b/src/app/modules/admin/board/notice/models/notice.ts
index c322533..71394e5 100644
--- a/src/app/modules/admin/board/notice/models/notice.ts
+++ b/src/app/modules/admin/board/notice/models/notice.ts
@@ -1,5 +1,5 @@
 export interface Notice {
-  id?: string;
+  id: string;
   idx?: number;
   site?: string;
   title?: string;
diff --git a/src/app/modules/admin/board/notice/notice.module.ts b/src/app/modules/admin/board/notice/notice.module.ts
index 0ffebc2..10181be 100644
--- a/src/app/modules/admin/board/notice/notice.module.ts
+++ b/src/app/modules/admin/board/notice/notice.module.ts
@@ -15,6 +15,8 @@ import { MatGridListModule } from '@angular/material/grid-list';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { TranslocoModule } from '@ngneat/transloco';
 
@@ -45,6 +47,8 @@ import { noticeRoutes } from './notice.routing';
     MatSlideToggleModule,
     MatRadioModule,
     MatCheckboxModule,
+    MatDatepickerModule,
+    MatMomentDateModule,
   ],
 })
 export class NoticeModule {}
diff --git a/src/app/modules/admin/board/notice/notice.routing.ts b/src/app/modules/admin/board/notice/notice.routing.ts
index 04c30c6..ef85069 100644
--- a/src/app/modules/admin/board/notice/notice.routing.ts
+++ b/src/app/modules/admin/board/notice/notice.routing.ts
@@ -1,24 +1,32 @@
 import { Route } from '@angular/router';
 
 import { ListComponent } from './components/list.component';
-import { ViewComponent } from '../../member/user/components/view.component';
+import { ReditComponent } from './components/redit.component';
 
-import { NoticesResolver } from './resolvers/notice.resolver';
-import { UserResolver } from '../../member/user/resolvers/user.resolver';
+import { NoticesResolver, NoticeResolver } from './resolvers/notice.resolver';
 
 export const noticeRoutes: Route[] = [
   {
     path: '',
+    pathMatch: 'full',
+    redirectTo: 'list',
+  },
+  {
+    path: 'list',
     component: ListComponent,
     resolve: {
       notices: NoticesResolver,
     },
   },
   {
-    path: ':id',
-    component: ViewComponent,
+    path: 'redit',
+    component: ReditComponent,
+  },
+  {
+    path: 'redit/:id',
+    component: ReditComponent,
     resolve: {
-      users: UserResolver,
+      notice: NoticeResolver,
     },
   },
 ];