setting-frame 레이아웃

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

@@ -1,16 +1,10 @@
-<mat-card class="confirm-card mat-elevation-z" fxFlexFill>
+<mat-card class="confirm-card mat-elevation-z setting-frame">
   <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
     <mat-card-title>설정</mat-card-title>
   </mat-card-header>
   <mat-card-content>
-    <div
+    <div fxFlex class="setting-tab">
-      fxLayout="column"
+      <mat-tab-group animationDuration="0ms" mat-stretch-tabs>
-      fxLayout.xs="column"
-      fxLayoutAlign="center"
-      fxLayoutGap="10px"
-      fxLayoutGap.xs="0"
-    >
-      <mat-tab-group flex="1" vertical animationDuration="0ms">
         <mat-tab>
           <ng-template mat-tab-label>
             <mat-icon>group</mat-icon>
@@ -42,47 +36,23 @@
       </mat-tab-group>
 
       <div class="left-side-tabs-body">
-        <div
+        <div #tabs id="tabs-0" class="left-side-tabs-contents" style="display: block;">
-          #tabs
-          id="tabs-0"
-          class="left-side-tabs-contents"
-          style="display: block;"
-        >
           ddddd
         </div>
-        <div
+        <div #tabs id="tabs-1" class="left-side-tabs-contents" style="display: none;">
-          #tabs
-          id="tabs-1"
-          class="left-side-tabs-contents"
-          style="display: none;"
-        >
           dddagadsfgadsf
         </div>
-        <div
+        <div #tabs id="tabs-2" class="left-side-tabs-contents" style="display: none;">
-          #tabs
-          id="tabs-2"
-          class="left-side-tabs-contents"
-          style="display: none;"
-        >
           fbkasfldsafkskdf
         </div>
-        <div
+        <div #tabs id="tabs-3" class="left-side-tabs-contents" style="display: none;">
-          #tabs
-          id="tabs-3"
-          class="left-side-tabs-contents"
-          style="display: none;"
-        >
           rgkdsfgkdfglkdsflgs
         </div>
       </div>
     </div>
   </mat-card-content>
   <mat-card-actions class="button-farm flex-row">
-    <button
+    <button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
-      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.scss

@@ -1,30 +1,63 @@
+::ng-deep .cdk-overlay-pane{
+  width:600px;
+  max-height:90%;
+  .setting-frame{
+    .mat-dialog-container {
+      position: relative;
+    }
+  }
+}
 .confirm-card {
-  padding: 0px;
+  padding: 16px;
   min-width: 500px;
+  position: relative;
 
   .mat-card-header {
-    margin-bottom: 10px;
+    position: relative;
+    width: 100%;
+    margin-bottom: 12px;
     .mat-card-header-text {
       .mat-card-title {
-        margin: 0 -16px;
       }
     }
   }
 
   .mat-card-content {
-    flex: 1 1 auto;
+    flex: 0 0 auto;
     display: flex;
-
+    align-items: flex-start;
-    .content-box {
+    height: calc(100% - 100px);
-      flex-direction: column;
+    .setting-tab {
-      flex-flow: column;
+      width:100%;
+      height:100%;
+      position: relative;
+      .mat-tab-group {
+        width:100%;
+        height:100%;
+        position: relative;
+      }
     }
   }
 
   .button-farm {
     text-align: right;
+    position: relative;
+    width: 100%;
+    bottom: 10px;
     .mat-primary {
       margin-left: 4px;
     }
   }
 }
+
+::ng-deep .mat-tab-group {
+  .mat-tab-header{
+    margin-bottom:10px;
+    .mat-tab-labels{
+    border-bottom:2px solid #dddddd;
+    .mat-tab-label{
+      padding:0 10px;
+      }
+    }
+  }
+}