design

src/packages/member/component/settings/totp/config/config-setting.component.html

@@ -1,37 +1,42 @@
-<div>
+<div class="ui-g">
-  <div>
+  <div class="ui-g-12">
-    구글 인증기(OTP)는 암호 기능 중 하나입니다. 작동 원리는 SMS 인증 방식과 유사합니다.
+    <b>구글 인증기(OTP)</b>는 암호 기능 중 하나입니다. 작동 원리는 SMS 인증 방식과 유사합니다.
     연동 후 30초 마다 보안 코드가 생성되고, 보안 코드는 로그인, 인출, 보안 설정 변경등의 보안 인증을 하는 곳에 사용됩니다.
   </div>
-</div>
-<div>
-  <div>
-    IOS 회원은 App Store에서 "Authenticator" 검색 후 다운로드 해주세요.
-    안드로이드 회원은 구글 플레이 스토어 또는 핸드폰 브라우저를 통해 "구글 인증기(OTP)" 검색 후 다운로드 해주세요.
-  </div>
-</div>
-<div class="ui-top-space-10" dir="auto">
-    <button type="button" class=" ui-button-width-fit"pButton type="button" label="App Store" icon="fa-check"></button>
-    <button type="button" class=" ui-button-width-fit"pButton type="button" label="Google Play" icon="fa-check"></button>
-</div>
-<div>
-  <p>Key & Backup Code</p>
-  <div *ngIf="totp">{{totp.key}}, {{totp.uri}}</div>
-  <div *ngIf="totp">
-    <qrcode [qrdata]="totp.uri" [size]="128" [level]="'M'"></qrcode>
-  </div>
-  <form fxLayout="column" fxLayoutAlign="start stretch" [formGroup]="totpForm" (ngSubmit)="totpRegistClick()">
-    <input type="text"
-           id="code" class="input"
-           placeholder="Please enter your code"
-           formControlName="code" required matInput>
-  </form>
-  <!--QR Code print & Key Print-->
-</div>
-<div class="ui-top-space-10" dir="rtl">
-<button type="button" pButton icon="fa-check" (click)="totpSettingDisplay=false" label="Yes"></button>
-<button type="button" class=" ui-button-width-fit" pButton icon="fa-close" (click)="onCancel()" label="No"></button>
 
+  <div class="ui-g">
+    <div class="ui-g-6">
+      <p-card>
+        <p><b>IOS 회원</b>은 App Store에서 "Authenticator" 검색 후 다운로드 해주세요.<br><br></p>
+        <button type="button"  pButton label="App Store" icon="fa-check"></button>
+      </p-card>
+    </div>
+    <div class="ui-g-6">
+        <p-card>
+        <p><b>안드로이드 회원</b>은 구글 플레이 스토어 또는 핸드폰 브라우저를 통해 "구글 인증기(OTP)" 검색 후 다운로드 해주세요.</p>
+        <button type="button" pButton label="Google Play" icon="fa-check"></button>
+        </p-card>
+    </div>
+  </div>
+  
+  <div class="ui-g-12">
+    <h2>Key & Backup Code</h2>
+    <div class="ui-bottom-space-10" *ngIf="totp">{{totp.key}}, {{totp.uri}}</div>
+    <div class="ui-bottom-space-10" *ngIf="totp">
+      <qrcode [qrdata]="totp.uri" [size]="128" [level]="'M'"></qrcode>
+    </div>
+    <form fxLayout="column" fxLayoutAlign="start stretch" [formGroup]="totpForm" (ngSubmit)="totpRegistClick()">
+      <input type="text"
+            id="code" class="input"
+            placeholder="Please enter your code"
+            formControlName="code" required matInput>
+    </form>
+    <!--QR Code print & Key Print-->
+  </div>
+  <div class="ui-g-12" dir="rtl">
+      <button type="button" class="ui-button-width-fit ui-button-secondary" pButton icon="fa-close" (click)="onCancel()" label="No"></button>
+      <button type="button" class="ui-button-width-fit" pButton icon="fa-check" (click)="totpSettingDisplay=false" label="Yes"></button>
+  </div>
 </div>
 <!--<p-panel>-->
   <!--<p-header [style]="{'margin-bottom':'20px'}">-->

src/packages/member/component/settings/totp/totp.component.html

@@ -1,4 +1,4 @@
-<p-dialog header="{{headerItem}}" [modal]="true" [width]="1200" [(visible)]="totpSettingDisplay" [showHeader]="true" [closeOnEscape]="false">
+<p-dialog header="{{headerItem}}" [modal]="true" [width]="800" [(visible)]="totpSettingDisplay" [showHeader]="true" [closeOnEscape]="false">
   <of-config-setting [selectedItem]="selectedItem" (close)="onTotpSettingClose()"></of-config-setting>
 </p-dialog>
 
@@ -6,18 +6,14 @@
   <p-header>이중보안</p-header>
 
   <ng-template let-item pTemplate="listItem">
-    <div class="ui-g" style="padding: 2em;border-bottom: 1px solid #d9d9d9">
+    <div class="ui-g ui-bottom-border-1" style="padding: 2em;">
       <!--<div class="ui-g-12 ui-md-3" style="text-align:left">-->
       <!--</div>-->
-      <div class="ui-g-12 ui-md-8 car-details">
+      <div class="ui-g-2 ui-sm-6">{{item.name }} </div>
-        <div class="ui-g">
+      <div class="ui-g-3 ui-sm-6">{{item.value }}</div>
-          <div class="ui-g-2 ui-sm-6">{{item.name }} </div>
+      <div class="ui-g-5 ui-sm-6">{{item.description }}</div>
-          <div class="ui-g-2 ui-sm-8">{{item.value }}</div>
-          <div class="ui-g-2 ui-sm-8">{{item.description }}</div>
-        </div>
-      </div>
 
-      <div class="ui-g-12 ui-md-1 search-icon" style="text-align:right">
+      <div class="ui-g-2 ui-sm-6">
         <button pButton type="button" label="Add" icon="ui-icon-add" (click)="on2factorConfig($event, item)"></button>
 
         <!--<button pButton type="button" label="Add" icon="ui-icon-add" (click)="selectCar($event, car)"></button>-->