free board

2019-11-06 22:08:08 +09:00 · 2019-11-06 22:08:08 +09:00 · a62f3e0d31
commit a62f3e0d31
parent ae9a1338e9
13 changed files with 707 additions and 40 deletions
--- a/src/app/pages/infos/info/component/free-board-list.component.html
+++ b/src/app/pages/infos/info/component/free-board-list.component.html
@ -60,7 +60,7 @@
          <mat-header-cell *matHeaderCellDef mat-sort-header
            >번호</mat-header-cell
          >
-          <mat-cell *matCellDef="let serviceCenter; let i = index">
+          <mat-cell *matCellDef="let freeBoard; let i = index">
            <p class="text-truncate">{{ i }}</p>
          </mat-cell>
        </ng-container>
@ -70,8 +70,8 @@
          <mat-header-cell *matHeaderCellDef mat-sort-header
            >제목</mat-header-cell
          >
-          <mat-cell *matCellDef="let serviceCenter">
-            <p class="text-truncate">{{ serviceCenter.title }}</p>
+          <mat-cell *matCellDef="let freeBoard">
+            <p class="text-truncate">{{ freeBoard.title }}</p>
          </mat-cell>
        </ng-container>

@ -80,22 +80,22 @@
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
            >내용</mat-header-cell
          >
-          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
-            <!-- <p class="text-truncate">{{ serviceCenter.contents }}</p> -->
-            <p class="text-truncate">010-3004-2001</p>
+          <mat-cell *matCellDef="let freeBoard" fxHide fxShow.gt-sm>
+            <p class="text-truncate">{{ freeBoard.contents }}</p>
+            <!-- <p class="text-truncate">010-3004-2001</p> -->
          </mat-cell>
        </ng-container>

        <!-- Total Price Column -->
-        <ng-container matColumnDef="register">
+        <ng-container matColumnDef="createdBy">
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md
            >작성자</mat-header-cell
          >
-          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-md>
-            <p class="total-price text-truncate">
-              <!-- {{ user.totalprice | currency: 'USD':'symbol' }} -->
-              1,000,000
-            </p>
+          <mat-cell *matCellDef="let freeBoard" fxHide fxShow.gt-md>
+            <!-- <p class="total-price text-truncate"> -->
+            <!-- {{ user.totalprice | currency: 'USD':'symbol' }} -->
+            <p class="text-truncate">{{ freeBoard.createdBy }}</p>
+            <!-- </p> -->
          </mat-cell>
        </ng-container>

@ -104,10 +104,9 @@
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
            >작성일</mat-header-cell
          >
-          <mat-cell *matCellDef="let serviceCenter" fxHide fxShow.gt-sm>
+          <mat-cell *matCellDef="let freeBoard" fxHide fxShow.gt-sm>
            <p class="text-truncate">
-              <!-- {{ user.point }} -->
-              5000
+              {{ freeBoard.createdDate | date: 'yyyy.MM.dd, HH:mm:ss' }}
            </p>
          </mat-cell>
        </ng-container>
@ -115,13 +114,13 @@
        <!-- Level Column -->
        <ng-container matColumnDef="contactStatus">
          <mat-header-cell *matHeaderCellDef mat-sort-header
-            >문의상태</mat-header-cell
+            >상태</mat-header-cell
          >
-          <mat-cell *matCellDef="let serviceCenter">
+          <mat-cell *matCellDef="let freeBoard">
            <!-- <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color"> -->
            <p class="text-truncate">
              <!-- {{ user.level }} -->
-              브론즈
+              승인인증
            </p>
          </mat-cell>
        </ng-container>
@ -129,7 +128,7 @@
        <!-- Charge Money Column -->
        <ng-container matColumnDef="removeBtn">
          <mat-header-cell *matHeaderCellDef mat-sort-header
-            >삭제버튼</mat-header-cell
+            >적용</mat-header-cell
          >
          <mat-cell *matCellDef="let user">
            <p class="text-truncate ">
--- a/src/app/pages/infos/info/component/free-board-list.component.scss
+++ b/src/app/pages/infos/info/component/free-board-list.component.scss
@ -1,6 +1,6 @@
@import 'src/@fuse/scss/fuse';

-app-free-board {
+app-free-board-list {
  #service-center {
    .top-bg {
      @include media-breakpoint('xs') {
--- a/src/app/pages/infos/info/component/free-board-list.component.ts
+++ b/src/app/pages/infos/info/component/free-board-list.component.ts
@ -15,24 +15,25 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

 import { fuseAnimations } from 'src/@fuse/animations';
+import { FreeBoardDataSource } from './free-board-list.data-source';
+import { FreeBoardService } from 'src/modules/infos/service/free-board.service';

-import { ServiceCenterService } from 'src/modules/infos/service/service-center.service';
-import { ServiceCenterDataSource } from './service-center.data-source';
@Component({
-  selector: 'app-free-board',
-  templateUrl: './free-board.component.html',
-  styleUrls: ['./free-board.component.scss'],
+  selector: 'app-free-board-list',
+  templateUrl: './free-board-list.component.html',
+  styleUrls: ['./free-board-list.component.scss'],
  encapsulation: ViewEncapsulation.None,
  animations: fuseAnimations
 })
-export class FreeBoardComponent implements OnInit, OnDestroy, AfterViewInit {
-  dataSource: ServiceCenterDataSource | null;
+export class FreeBoardListComponent
+  implements OnInit, OnDestroy, AfterViewInit {
+  dataSource: FreeBoardDataSource | null;

  displayedColumns = [
    'idx',
    'title',
    'contents',
-    'register',
+    'createdBy',
    'createdAt',
    'contactStatus'
  ];
@ -49,7 +50,7 @@ export class FreeBoardComponent implements OnInit, OnDestroy, AfterViewInit {

  constructor(
    private fb: FormBuilder,
-    private serviceCenterService: ServiceCenterService
+    private freeBoardService: FreeBoardService
  ) {
    // Set the private defaults
    this.unsubscribeAll = new Subject();
@ -64,8 +65,8 @@ export class FreeBoardComponent implements OnInit, OnDestroy, AfterViewInit {
   */
  ngOnInit(): void {
    // Subscribe to update order on changes
-    this.dataSource = new ServiceCenterDataSource(
-      this.serviceCenterService,
+    this.dataSource = new FreeBoardDataSource(
+      this.freeBoardService,
      this.paginator,
      this.sort
    );
--- a/src/app/pages/infos/info/component/free-board-list.data-source.ts
+++ b/src/app/pages/infos/info/component/free-board-list.data-source.ts
@ -0,0 +1,73 @@
+import { DataSource } from '@angular/cdk/table';
+
+import { BehaviorSubject, Observable, merge } from 'rxjs';
+import { switchMap, map } from 'rxjs/operators';
+
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { CollectionViewer } from '@angular/cdk/collections';
+
+import { FreeBoard } from 'src/modules/infos/model/free-board.model';
+import { FreeBoardService } from 'src/modules/infos/service/free-board.service';
+import { Page } from 'src/modules/common/data/model/page';
+
+export class FreeBoardDataSource extends DataSource<FreeBoard> {
+  private filterSubject = new BehaviorSubject('');
+  private pageSubject = new BehaviorSubject<Page<FreeBoard>>({});
+
+  constructor(
+    private freeBoardService: FreeBoardService,
+    private paginator: MatPaginator,
+    private sort: MatSort
+  ) {
+    super();
+  }
+
+  // Filter
+  get filter(): string {
+    return this.filterSubject.value;
+  }
+
+  set filter(filter: string) {
+    this.filterSubject.next(filter);
+  }
+
+  get page(): Page<FreeBoard> {
+    return this.pageSubject.value;
+  }
+
+  set page(value: Page<FreeBoard>) {
+    this.pageSubject.next(value);
+  }
+
+  connect(
+    collectionViewer: CollectionViewer
+  ): Observable<FreeBoard[] | readonly FreeBoard[]> {
+    const displayDataChanges = [
+      this.paginator.page,
+      this.sort.sortChange,
+      this.filterSubject
+    ];
+
+    return merge(...displayDataChanges).pipe(
+      switchMap(() => {
+        const filter = this.filter;
+        const sortActive = this.sort.active;
+        const sortDirection = this.sort.direction;
+        const pageIndex = this.paginator.pageIndex;
+        const pageSize = this.paginator.pageSize;
+
+        return this.freeBoardService.getAll().pipe(
+          map(page => {
+            this.page = page;
+            return page.content;
+          })
+        );
+      })
+    );
+  }
+
+  disconnect(collectionViewer: CollectionViewer): void {
+    this.filterSubject.complete();
+  }
+}
--- a/src/app/pages/infos/info/component/free-board-regist.component.html
+++ b/src/app/pages/infos/info/component/free-board-regist.component.html
@ -41,8 +41,8 @@
            </div>
            <form
              class="update-status p-24"
-              (ngSubmit)="updateStatus()"
-              [formGroup]="statusForm"
+              (ngSubmit)="onSubmit()"
+              [formGroup]="registForm"
              fxLayout="column"
              fxLayoutAlign="start center"
            >
--- a/src/app/pages/infos/info/component/free-board-regist.component.ts
+++ b/src/app/pages/infos/info/component/free-board-regist.component.ts
@ -1,10 +1,14 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { take } from 'rxjs/operators';

 import { fuseAnimations } from 'src/@fuse/animations';

+import { FreeBoardService } from 'src/modules/infos/service/free-board.service';
+import { FreeBoard } from 'src/modules/infos/model/free-board.model';
+
@Component({
  selector: 'app-free-board-regist',
  templateUrl: './free-board-regist.component.html',
@ -15,7 +19,12 @@ import { fuseAnimations } from 'src/@fuse/animations';
 export class FreeBoardRegistComponent implements OnInit, OnDestroy {
  private unsubscribeAll: Subject<any>;

-  constructor(private fb: FormBuilder) {
+  registForm: FormGroup;
+
+  constructor(
+    private fb: FormBuilder,
+    private freeboardService: FreeBoardService
+  ) {
    // Set the private defaults
    this.unsubscribeAll = new Subject();
  }
@ -29,6 +38,10 @@ export class FreeBoardRegistComponent implements OnInit, OnDestroy {
   */
  ngOnInit(): void {
    // Subscribe to update order on changes
+    this.registForm = this.fb.group({
+      title: ['', [Validators.required]],
+      contents: ['', Validators.required]
+    });
  }

  /**
@ -39,4 +52,20 @@ export class FreeBoardRegistComponent implements OnInit, OnDestroy {
    this.unsubscribeAll.next();
    this.unsubscribeAll.complete();
  }
+
+  onSubmit(): void {
+    let board: FreeBoard = <FreeBoard>this.registForm.value;
+    console.log(board);
+    this.freeboardService
+      .regist(board)
+      .pipe(take(1))
+      .subscribe(
+        res => {
+          console.log(res);
+        },
+        err => {
+          console.log(err);
+        }
+      );
+  }
 }
--- a/src/app/pages/infos/info/component/index.ts
+++ b/src/app/pages/infos/info/component/index.ts
@ -1,6 +1,6 @@
 import { ServiceCenterComponent } from './service-center.component';
 import { SendMessageComponent } from './send-message.component';
-import { FreeBoardComponent } from './free-board.component';
+import { FreeBoardListComponent } from './free-board-list.component';
 import { BettingRuleComponent } from './betting-rule.component';
 import { PopupConfigComponent } from './popup-config.component';
 import { EventRegistComponent } from './event-regist.component';
@ -11,7 +11,7 @@ import { PopupConfigDetailComponent } from './popup-config-detail.component';
 export const COMPONENTS = [
  ServiceCenterComponent,
  SendMessageComponent,
-  FreeBoardComponent,
+  FreeBoardListComponent,
  BettingRuleComponent,
  PopupConfigComponent,
  EventRegistComponent,
--- a/src/app/pages/infos/info/info-routing.module.ts
+++ b/src/app/pages/infos/info/info-routing.module.ts
@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { ServiceCenterComponent } from './component/service-center.component';
 import { SendMessageComponent } from './component/send-message.component';
-import { FreeBoardComponent } from './component/free-board.component';
+import { FreeBoardListComponent } from './component/free-board-list.component';
 import { BettingRuleComponent } from './component/betting-rule.component';
 import { PopupConfigComponent } from './component/popup-config.component';
 import { EventRegistComponent } from './component/event-regist.component';
@ -22,7 +22,7 @@ const routes: Routes = [
  },
  {
    path: 'free-board',
-    component: FreeBoardComponent
+    component: FreeBoardListComponent
  },
  {
    path: 'betting-rule',
--- a/src/app/pages/users/user/component/user-regist/user-regist-tab.component.html
+++ b/src/app/pages/users/user/component/user-regist/user-regist-tab.component.html
@ -0,0 +1,249 @@
+<div id="user-regist-tab" class="page-layout carded fullwidth inner-scroll">
+
+  <!-- TOP BACKGROUND -->
+  <div class="top-bg accent"></div>
+  <!-- / TOP BACKGROUND -->
+
+  <!-- CENTER -->
+  <div class="center">
+
+    <!-- HEADER -->
+    <div class="header accent" fxLayout="row" fxLayoutAlign="space-between center">
+
+      <!-- APP TITLE -->
+      <div fxLayout="row" fxLayoutAlign="start center">
+
+        <button mat-icon-button class="mr-0 mr-sm-16" [routerLink]="'/apps/e-commerce/products'">
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+
+        <div class="product-image mr-8 mr-sm-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
+          <img *ngIf="product.images[0]" [src]="product.images[0].url">
+          <img *ngIf="!product.images[0]" [src]="'assets/images/ecommerce/product-image-placeholder.png'">
+        </div>
+
+        <div fxLayout="column" fxLayoutAlign="start start" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
+          <div class="h2" *ngIf="pageType ==='edit'">
+            {{product.name}}
+          </div>
+          <div class="h2" *ngIf="pageType ==='new'">
+            New Product
+          </div>
+          <div class="subtitle secondary-text">
+            <span>Product Detail</span>
+          </div>
+        </div>
+      </div>
+      <!-- / APP TITLE -->
+
+      <button mat-raised-button class="save-product-button" [disabled]="productForm.invalid" *ngIf="pageType ==='new'"
+        (click)="addProduct()">
+        <span>ADD</span>
+      </button>
+
+      <button mat-raised-button class="save-product-button" [disabled]="productForm.invalid || productForm.pristine"
+        *ngIf="pageType ==='edit'" (click)="saveProduct()">
+        <span>SAVE</span>
+      </button>
+    </div>
+    <!-- / HEADER -->
+
+    <!-- CONTENT CARD -->
+    <div class="content-card">
+
+      <!-- CONTENT -->
+      <div class="content">
+
+        <form name="productForm" [formGroup]="productForm" class="product w-100-p" fxLayout="column" fxFlex>
+
+          <mat-tab-group>
+
+            <mat-tab label="Basic Info">
+
+              <div class="tab-content p-24" fusePerfectScrollbar>
+
+                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
+                  <mat-label>Product Name</mat-label>
+                  <input matInput placeholder="Product Name" name="name" formControlName="name" required>
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
+                  <mat-label>Product Description</mat-label>
+                  <textarea matInput placeholder="Product Description" name="description" formControlName="description"
+                    rows="5">
+                                    </textarea>
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
+
+                  <mat-label>Categories</mat-label>
+
+                  <mat-chip-list #categoryList name="categories" formControlName="categories">
+
+                    <mat-chip *ngFor="let category of product.categories" [removable]="true"
+                      (removed)="product.removeCategory(category)">
+                      {{category}}
+                      <mat-icon matChipRemove>cancel</mat-icon>
+                    </mat-chip>
+
+                    <input [matChipInputFor]="categoryList" [matChipInputAddOnBlur]="true"
+                      (matChipInputTokenEnd)="product.addCategory($event)" />
+
+                  </mat-chip-list>
+
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
+
+                  <mat-label>Tags</mat-label>
+
+                  <mat-chip-list #tagList name="tags" formControlName="tags">
+
+                    <mat-chip *ngFor="let tag of product.tags" [removable]="true" (removed)="product.removeTag(tag)">
+                      {{tag}}
+                      <mat-icon matChipRemove>cancel</mat-icon>
+                    </mat-chip>
+
+                    <input [matChipInputFor]="tagList" [matChipInputAddOnBlur]="true"
+                      (matChipInputTokenEnd)="product.addTag($event)" />
+
+                  </mat-chip-list>
+
+                </mat-form-field>
+
+              </div>
+
+            </mat-tab>
+
+            <mat-tab label="Product Images">
+
+              <div class="tab-content p-24" fusePerfectScrollbar>
+                <div fxLayout="row wrap" fxLayoutAlign="start start">
+
+                  <div *ngIf="product.images.length === 0" class="product-image" fxlayout="row"
+                    fxLayoutAlign="center center">
+                    <img class="media" [src]="'assets/images/ecommerce/product-image-placeholder.png'">
+                  </div>
+
+                  <div *ngFor="let image of product.images">
+                    <div *ngIf="product.images.length > 0" class="product-image" fxlayout="row"
+                      fxLayoutAlign="center center">
+                      <img class="media" [src]="image.url">
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+            </mat-tab>
+
+            <mat-tab label="Pricing">
+
+              <div class="tab-content p-24" fusePerfectScrollbar>
+
+                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
+                  <mat-label>Tax Excluded Price</mat-label>
+                  <input matInput placeholder="Tax Excluded Price" name="priceTaxExcl" formControlName="priceTaxExcl"
+                    type="number">
+                  <span matPrefix>$&nbsp;</span>
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
+                  <mat-label>Tax Included Price</mat-label>
+                  <input matInput placeholder="Tax Included Price" name="priceTaxIncl" formControlName="priceTaxIncl"
+                    type="number">
+                  <span matPrefix>$&nbsp;</span>
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
+                  <mat-label>Tax Rate</mat-label>
+                  <input matInput placeholder="Tax Rate" name="taxRate" formControlName="taxRate" type="number">
+                  <span matPrefix>&#37;&nbsp;</span>
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
+                  <mat-label>Compared Price</mat-label>
+                  <input matInput placeholder="Compared Price" name="comparedPrice" formControlName="comparedPrice"
+                    type="number">
+                  <span matPrefix>$&nbsp;</span>
+                  <mat-hint align="start">Add a compare price to show next to the real price
+                  </mat-hint>
+                </mat-form-field>
+
+              </div>
+            </mat-tab>
+
+            <mat-tab label="Inventory">
+
+              <div class="tab-content p-24" fusePerfectScrollbar>
+
+                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
+                  <mat-label>SKU</mat-label>
+                  <input matInput placeholder="SKU" name="sku" formControlName="sku">
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
+                  <mat-label>Quantity</mat-label>
+                  <input matInput placeholder="Quantity" name="quantity" formControlName="quantity" type="number">
+                </mat-form-field>
+
+              </div>
+
+            </mat-tab>
+
+            <mat-tab label="Shipping">
+
+              <div class="tab-content p-24" fusePerfectScrollbar fxLayout="column">
+
+                <div fxLayout="row" fxLayoutAlign="space-between">
+
+                  <mat-form-field appearance="outline" floatLabel="always" fxFlex="30">
+                    <mat-label>Width</mat-label>
+                    <input matInput placeholder="Width" name="Width" formControlName="width">
+                    <span matSuffix>cm</span>
+                  </mat-form-field>
+
+                  <mat-form-field appearance="outline" floatLabel="always" fxFlex="30">
+                    <mat-label>Height</mat-label>
+                    <input matInput placeholder="Height" name="Height" formControlName="height">
+                    <span matSuffix>cm</span>
+                  </mat-form-field>
+
+                  <mat-form-field appearance="outline" floatLabel="always" fxFlex="30">
+                    <mat-label>Depth</mat-label>
+                    <input matInput placeholder="Depth" name="Depth" formControlName="depth">
+                    <span matSuffix>cm</span>
+                  </mat-form-field>
+
+                </div>
+
+                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
+                  <mat-label>Weight</mat-label>
+                  <input matInput placeholder="Weight" name="Weight" formControlName="weight">
+                  <span matSuffix>kg</span>
+                </mat-form-field>
+
+                <mat-form-field appearance="outline" floatLabel="always" class="w-100-p">
+                  <mat-label>Extra Shipping Fee</mat-label>
+                  <input matInput placeholder="Extra Shipping Fee" name="extraShippingFee"
+                    formControlName="extraShippingFee" type="number">
+                  <span matPrefix>$&nbsp;</span>
+                </mat-form-field>
+
+              </div>
+
+            </mat-tab>
+
+          </mat-tab-group>
+
+        </form>
+
+      </div>
+      <!-- / CONTENT -->
+
+    </div>
+    <!-- / CONTENT CARD -->
+
+  </div>
+  <!-- / CENTER -->
+
+</div>
--- a/src/app/pages/users/user/component/user-regist/user-regist-tab.component.scss
+++ b/src/app/pages/users/user/component/user-regist/user-regist-tab.component.scss
@ -0,0 +1,62 @@
+#user-regist-tab {
+  .header {
+    .product-image {
+      overflow: hidden;
+      width: 56px;
+      min-width: 56px;
+      max-width: 56px;
+      height: 56px;
+      min-height: 56px;
+      max-height: 56px;
+      border-radius: 4px;
+
+      img {
+        height: 100%;
+        width: auto;
+        max-width: none;
+      }
+    }
+
+    .subtitle {
+      margin: 6px 0 0 0;
+    }
+  }
+
+  .content {
+    .mat-tab-group,
+    .mat-tab-body-wrapper,
+    .tab-content {
+      flex: 1 1 auto;
+      max-width: 100%;
+    }
+
+    .mat-tab-body-content {
+      display: flex;
+    }
+
+    .mat-tab-label {
+      height: 64px;
+    }
+
+    .product-image {
+      overflow: hidden;
+      width: 128px;
+      height: 128px;
+      margin-right: 16px;
+      margin-bottom: 16px;
+      border-radius: 4px;
+
+      img {
+        height: 100%;
+        width: auto;
+        max-width: none;
+      }
+    }
+
+    // Temporary prefix alignment fix
+    .mat-form-field-appearance-outline .mat-form-field-prefix,
+    .mat-form-field-appearance-outline .mat-form-field-suffix {
+      top: 0;
+    }
+  }
+}
--- a/src/app/pages/users/user/component/user-regist/user-regist-tab.component.ts
+++ b/src/app/pages/users/user/component/user-regist/user-regist-tab.component.ts
@ -0,0 +1,161 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Location } from '@angular/common';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { fuseAnimations } from 'src/@fuse/animations';
+import { FuseUtils } from 'src/@fuse/utils';
+
+// import { Product } from 'app/main/apps/e-commerce/product/product.model';
+// import { EcommerceProductService } from 'app/main/apps/e-commerce/product/product.service';
+
+@Component({
+  selector: 'app-user-regist-tab',
+  templateUrl: './user-regist-tab.component.html',
+  styleUrls: ['./user-regist-tab.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  animations: fuseAnimations
+})
+export class UserRegistTabComponent implements OnInit, OnDestroy {
+  // product: Product;
+  pageType: string;
+  productForm: FormGroup;
+
+  // Private
+  private _unsubscribeAll: Subject<any>;
+
+  /**
+   * Constructor
+   *
+   * @param {EcommerceProductService} _ecommerceProductService
+   * @param {FormBuilder} _formBuilder
+   * @param {Location} _location
+   * @param {MatSnackBar} _matSnackBar
+   */
+  constructor(
+    // private _ecommerceProductService: EcommerceProductService,
+    private _formBuilder: FormBuilder,
+    private _location: Location,
+    private _matSnackBar: MatSnackBar
+  ) {
+    // Set the default
+    // this.product = new Product();
+
+    // Set the private defaults
+    this._unsubscribeAll = new Subject();
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
+  ngOnInit(): void {
+    // Subscribe to update product on changes
+    // this._ecommerceProductService.onProductChanged
+    //   .pipe(takeUntil(this._unsubscribeAll))
+    //   .subscribe(product => {
+    //     if (product) {
+    //       this.product = new Product(product);
+    //       this.pageType = 'edit';
+    //     } else {
+    //       this.pageType = 'new';
+    //       this.product = new Product();
+    //     }
+    //     this.productForm = this.createProductForm();
+    //   });
+  }
+
+  /**
+   * On destroy
+   */
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions
+    this._unsubscribeAll.next();
+    this._unsubscribeAll.complete();
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Create product form
+   *
+   * @returns {FormGroup}
+   */
+  createProductForm(): FormGroup {
+    // return this._formBuilder.group({
+    //   id: [this.product.id],
+    //   name: [this.product.name],
+    //   handle: [this.product.handle],
+    //   description: [this.product.description],
+    //   categories: [this.product.categories],
+    //   tags: [this.product.tags],
+    //   images: [this.product.images],
+    //   priceTaxExcl: [this.product.priceTaxExcl],
+    //   priceTaxIncl: [this.product.priceTaxIncl],
+    //   taxRate: [this.product.taxRate],
+    //   comparedPrice: [this.product.comparedPrice],
+    //   quantity: [this.product.quantity],
+    //   sku: [this.product.sku],
+    //   width: [this.product.width],
+    //   height: [this.product.height],
+    //   depth: [this.product.depth],
+    //   weight: [this.product.weight],
+    //   extraShippingFee: [this.product.extraShippingFee],
+    //   active: [this.product.active]
+    // });
+    return null;
+  }
+
+  /**
+   * Save product
+   */
+  saveProduct(): void {
+    const data = this.productForm.getRawValue();
+    data.handle = FuseUtils.handleize(data.name);
+
+    // this._ecommerceProductService.saveProduct(data).then(() => {
+    //   // Trigger the subscription with new data
+    //   this._ecommerceProductService.onProductChanged.next(data);
+
+    //   // Show the success message
+    //   this._matSnackBar.open('Product saved', 'OK', {
+    //     verticalPosition: 'top',
+    //     duration: 2000
+    //   });
+    // });
+  }
+
+  /**
+   * Add product
+   */
+  addProduct(): void {
+    const data = this.productForm.getRawValue();
+    data.handle = FuseUtils.handleize(data.name);
+
+    // this._ecommerceProductService.addProduct(data).then(() => {
+    //   // Trigger the subscription with new data
+    //   this._ecommerceProductService.onProductChanged.next(data);
+
+    //   // Show the success message
+    //   this._matSnackBar.open('Product added', 'OK', {
+    //     verticalPosition: 'top',
+    //     duration: 2000
+    //   });
+
+    //   // Change the location with new one
+    //   this._location.go(
+    //     'apps/e-commerce/products/' +
+    //       this.product.id +
+    //       '/' +
+    //       this.product.handle
+    //   );
+    // });
+  }
+}
--- a/src/modules/infos/service/free-board.service.ts
+++ b/src/modules/infos/service/free-board.service.ts
@ -0,0 +1,88 @@
+import { Injectable, Inject } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+import { Observable } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
+import { API_BASE_URL } from 'src/modules/common/type/injection-token.type';
+import { Page } from 'src/modules/common/data/model/page';
+import { FormArray } from '@angular/forms';
+
+import { UserDateAuditEntity } from 'src/modules/common/data/model/audit';
+
+import { FreeBoard } from '../model/free-board.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FreeBoardService {
+  constructor(
+    @Inject(API_BASE_URL) private apiBaseUrl: string,
+    private httpClient: HttpClient
+  ) {}
+
+  public regist(freeBoard: FreeBoard): Observable<any> {
+    // const engName = freeBoard.attachFile;
+    const title = freeBoard.title;
+    const contents = freeBoard.contents;
+    const owner = 1;
+    return this.httpClient
+      .post<any>(`${this.apiBaseUrl}/free-board`, {
+        title,
+        contents,
+        owner
+      })
+      .pipe(
+        map(res => {
+          console.log('free board regist response: ' + res);
+          return res;
+        })
+      );
+  }
+
+  public modify(freeBoard: FreeBoard): Observable<any> {
+    const id = freeBoard.id;
+    const title = freeBoard.title;
+    const contents = freeBoard.contents;
+    const createdBy = freeBoard.createdBy;
+    const owner = 1;
+    return this.httpClient
+      .put<any>(`${this.apiBaseUrl}/free-board/${id}`, {
+        id,
+        title,
+        contents,
+        owner,
+        createdBy
+      })
+      .pipe(
+        map(res => {
+          console.log('free board modify response: ' + res);
+          return res;
+        })
+      );
+  }
+
+  public getById(boardId: number): Observable<FreeBoard> {
+    return this.httpClient.get<FreeBoard>(
+      `${this.apiBaseUrl}/free-board/${boardId}`,
+      {}
+    );
+  }
+  public getAll(): Observable<Page<FreeBoard>> {
+    return this.httpClient.get<Page<FreeBoard>>(
+      `${this.apiBaseUrl}/free-board`,
+      {}
+    );
+  }
+
+  public removeById(boardId: number): Observable<any> {
+    const id = boardId;
+    return this.httpClient
+      .delete<any>(`${this.apiBaseUrl}/free-board/${boardId}`, {})
+      .pipe(
+        map(res => {
+          console.log('free board modify response: ' + res);
+          return res;
+        })
+      );
+  }
+}
--- a/src/modules/infos/service/index.ts
+++ b/src/modules/infos/service/index.ts
@ -1,4 +1,9 @@
 import { PopupConfigService } from './popup-config.service';
 import { ServiceCenterService } from './service-center.service';
+import { FreeBoardService } from './free-board.service';

-export const SERVICES = [PopupConfigService, ServiceCenterService];
+export const SERVICES = [
+  PopupConfigService,
+  ServiceCenterService,
+  FreeBoardService
+];