change theme is modified as temparary

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html

@@ -10,21 +10,29 @@
             <span class="mdi mdi-settings"></span>
             일반
           </ng-template>
-          <ucap-settings-general class="setting-category general"></ucap-settings-general>
+
+          <ucap-settings-general
+            class="setting-category general"
+            (selectTheme)="onSelectTheme($event)"
+          ></ucap-settings-general>
         </mat-tab>
         <mat-tab>
           <ng-template mat-tab-label>
             <span class="mdi mdi-lock"></span>
             개인정보취급방침
           </ng-template>
-          <ucap-settings-privacy class="setting-category"></ucap-settings-privacy>
+          <ucap-settings-privacy
+            class="setting-category"
+          ></ucap-settings-privacy>
         </mat-tab>
         <mat-tab>
           <ng-template mat-tab-label>
             <span class="mdi mdi-bell"></span>
             알림
           </ng-template>
-          <ucap-settings-notification class="setting-category"></ucap-settings-notification>
+          <ucap-settings-notification
+            class="setting-category"
+          ></ucap-settings-notification>
         </mat-tab>
         <mat-tab>
           <ng-template mat-tab-label>
@@ -38,7 +46,9 @@
             <span class="mdi mdi-view-grid-plus"></span>
             사용권한
           </ng-template>
-          <ucap-settings-permission class="setting-category"></ucap-settings-permission>
+          <ucap-settings-permission
+            class="setting-category"
+          ></ucap-settings-permission>
         </mat-tab>
         <mat-tab>
           <ng-template mat-tab-label>
@@ -86,7 +96,11 @@
     </div>
   </mat-card-content>
   <mat-card-actions class="button-farm flex-row">
-    <button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
+    <button
+      mat-stroked-button
+      (click)="onClickChoice(false)"
+      class="mat-primary"
+    >
       No
     </button>
     <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, Renderer2 } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
@@ -10,6 +10,7 @@ import { DialogService } from '@ucap-webmessenger/ui';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { map } from 'rxjs/operators';
+import { DOCUMENT } from '@angular/common';
 
 export interface MessengerSettingsDialogData {}
 
@@ -32,7 +33,9 @@ export class MessengerSettingsDialogComponent implements OnInit {
     @Inject(MAT_DIALOG_DATA) public data: MessengerSettingsDialogData,
     private dialogService: DialogService,
     private sessionStorageService: SessionStorageService,
-    private store: Store<any>
+    private store: Store<any>,
+    @Inject(DOCUMENT) private document: Document,
+    private renderer2: Renderer2
   ) {
     this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
       KEY_VER_INFO
@@ -44,6 +47,10 @@ export class MessengerSettingsDialogComponent implements OnInit {
 
   ngOnInit() {}
 
+  onSelectTheme(theme: string): void {
+    this.renderer2.setAttribute(this.document.body, 'class', theme);
+  }
+
   onClickChoice(choice: boolean): void {
     this.dialogRef.close({});
   }

projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.html

@@ -3,14 +3,38 @@
     <h1 mat-subheader>테마</h1>
 
     <ul class="theme-list">
-      <li class="theme-box default on"></li>
+      <li
-      <li class="theme-box lgRed"></li>
+        class="theme-box default on"
+        (click)="onSelectedTabChange('theme-default')"
+      ></li>
+      <li
+        class="theme-box lgRed"
+        (click)="onSelectedTabChange('theme-lgRed')"
+      ></li>
     </ul>
-
     <mat-list-item>
+      <!-- <mat-tab-group
+        mat-stretch-tabs
+        animationDuration="0ms"
+        (selectedTabChange)="onSelectedTabChange($event)"
+      >
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <div class="theme-box default-theme"></div>
+            <div>기본값</div>
+          </ng-template>
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <div class="theme-box lg-red-theme"></div>
+            <div>LG Red</div>
+          </ng-template>
+        </mat-tab>
+      </mat-tab-group> -->
+      <!--
      <span>기본값</span>
       <span>어둡게</span>
-      <span>밝게</span>
+      <span>밝게</span> -->
     </mat-list-item>
 
     <mat-divider></mat-divider>

projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss

@@ -14,10 +14,10 @@
     background-repeat: no-repeat;
     opacity: 0.7;
     &.default {
-      background-image: url("../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png");
+      background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png');
     }
     &.lgRed {
-     background-image: url("../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png");
+      background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png');
     }
     &.on {
       border: 1px solid #333333;
@@ -25,4 +25,10 @@
     }
   }
 
+  .default-theme {
+    background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png');
+  }
+  .lg-red-theme {
+    background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png');
+  }
 }

projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.ts

@@ -1,4 +1,10 @@
-import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ChangeDetectorRef,
+  Output,
+  EventEmitter
+} from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
 
 @Component({
@@ -9,6 +15,9 @@ import { FormGroup, FormBuilder } from '@angular/forms';
 export class GeneralComponent implements OnInit {
   loginForm: FormGroup;
 
+  @Output()
+  selectTheme = new EventEmitter<string>();
+
   constructor(
     private formBuilder: FormBuilder,
     private changeDetectorRef: ChangeDetectorRef
@@ -16,5 +25,9 @@ export class GeneralComponent implements OnInit {
 
   ngOnInit() {}
 
+  onSelectedTabChange(theme: string) {
+    this.selectTheme.emit(theme);
+  }
+
   onClickLogin() {}
 }

projects/ucap-webmessenger-ui-settings/src/lib/ucap-ui-settings.module.ts

@@ -9,6 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatListModule } from '@angular/material/list';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatTabsModule } from '@angular/material/tabs';
 
 import { CallComponent } from './components/call.component';
 import { DeviceComponent } from './components/device.component';
@@ -36,7 +37,8 @@ const SERVICES = [];
     MatFormFieldModule,
     MatListModule,
     MatSelectModule,
-    MatSlideToggleModule
+    MatSlideToggleModule,
+    MatTabsModule
   ],
   exports: [...COMPONENTS],
   declarations: [...COMPONENTS]