From 849d8bb8b9824d069db7574f431269d016522879 Mon Sep 17 00:00:00 2001
From: Park Byung Eun <geekdev@naver.com>
Date: Mon, 11 Jul 2022 08:19:19 +0000
Subject: [PATCH] bug fix

---
 .../components/list.component.html            | 257 +++------
 .../casinomoney/components/list.component.ts  |   6 +-
 .../components/list.component.html            | 504 +++++++-----------
 .../member/user/components/list.component.ts  |   6 +-
 4 files changed, 271 insertions(+), 502 deletions(-)

diff --git a/src/app/modules/admin/member/casinomoney/components/list.component.html b/src/app/modules/admin/member/casinomoney/components/list.component.html
index cd533ed..4f6b702 100644
--- a/src/app/modules/admin/member/casinomoney/components/list.component.html
+++ b/src/app/modules/admin/member/casinomoney/components/list.component.html
@@ -128,7 +128,7 @@
               matSort
               matSortDisableClear
             >
-              <div></div>
+              <div class="hidden sm:block">요율</div>
               <div class="hidden sm:block" [mat-sort-header]="'management'">
                 관리
               </div>
@@ -162,18 +162,6 @@
                 상태
               </div>
               <div class="hidden sm:block" [mat-sort-header]="'top'">상부</div>
-              <!-- <div class="hidden md:block" [mat-sort-header]="'sku'">SKU</div>
-              <div [mat-sort-header]="'name'">Name</div>
-              <div class="hidden sm:block" [mat-sort-header]="'price'">
-                Price
-              </div>
-              <div class="hidden lg:block" [mat-sort-header]="'stock'">
-                Stock
-              </div>
-              <div class="hidden lg:block" [mat-sort-header]="'active'">
-                Active
-              </div>
-              <div class="hidden sm:block">Details</div> -->
             </div>
             <!-- Rows -->
             <ng-container *ngIf="casinomoneys$ | async as casinomoneys">
@@ -237,181 +225,88 @@
                   <div class="hidden sm:block truncate">
                     LV.{{ casinomoney.level }}
                   </div>
-                </div>
-                <!-- id -->
-                <ng-container *ngIf="users$ | async as users">
-                  <ng-container
-                    *ngFor="let user of users; trackBy: __trackByFn"
-                  >
-                    <div
-                      class="hidden sm:block truncate"
-                      (click)="viewUserDetail(user.id!)"
+
+                  <!-- id -->
+                  <ng-container *ngIf="users$ | async as users">
+                    <ng-container
+                      *ngFor="let user of users; trackBy: __trackByFn"
                     >
-                      {{ casinomoney.id }}
-                    </div>
-                  </ng-container>
-                </ng-container>
-                <!-- nickname -->
-                <div class="hidden sm:block truncate">
-                  {{ casinomoney.nickname }}
-                </div>
-
-                <!-- accountHolder -->
-                <div class="hidden sm:block truncate">
-                  {{ casinomoney.accountHolder }}
-                </div>
-
-                <!-- contact -->
-                <div class="hidden sm:block truncate">
-                  {{ casinomoney.contact }}
-                </div>
-
-                <!-- reserve -->
-                <div class="hidden sm:block truncate">
-                  캐쉬{{ casinomoney.cash }} 콤프{{ casinomoney.comp }} 쿠폰{{
-                    casinomoney.coupon
-                  }}
-                </div>
-
-                <!-- gameMoney -->
-                <div class="hidden sm:block truncate">
-                  {{ casinomoney.gameMoney }}
-                </div>
-
-                <!-- casinoCash -->
-                <div class="hidden sm:block truncate">
-                  <button mat-flat-button [color]="'primary'">
-                    게임머니확인
-                  </button>
-                  <button mat-flat-button [color]="'primary'">
-                    게임머니회수
-                  </button>
-                </div>
-
-                <!-- todayComp -->
-                <div class="hidden sm:block truncate">
-                  {{ casinomoney.todayComp }}P
-                </div>
-
-                <!-- total -->
-                <div class="hidden sm:block truncate">
-                  입금{{ casinomoney.deposit }} 출금{{
-                    casinomoney.withdraw
-                  }}
-                  차익{{ casinomoney.margin }}
-                </div>
-
-                <!-- log -->
-                <div class="hidden sm:block truncate">
-                  가입{{ casinomoney.accession }} 최종{{
-                    casinomoney.final
-                  }}
-                  IP{{ casinomoney.ip }}
-                </div>
-
-                <!-- state -->
-                <div class="hidden sm:block truncate">
-                  {{ casinomoney.state }}
-                </div>
-
-                <!-- top -->
-                <div class="hidden sm:block truncate">
-                  <button mat-flat-button [color]="'primary'">상부</button>
-                </div>
-                <!-- Image -->
-                <!-- <div class="flex items-center">
-                    <div
-                      class="relative flex flex-0 items-center justify-center w-12 h-12 mr-6 rounded overflow-hidden border"
-                    >
-                      <img
-                        class="w-8"
-                        *ngIf="user.thumbnail"
-                        [alt]="'Product thumbnail image'"
-                        [src]="user.thumbnail"
-                      />
                       <div
-                        class="flex items-center justify-center w-full h-full text-xs font-semibold leading-none text-center uppercase"
-                        *ngIf="!user.thumbnail"
+                        class="hidden sm:block truncate"
+                        (click)="viewUserDetail(user.id!)"
                       >
-                        NO THUMB
+                        {{ casinomoney.id }}
                       </div>
-                    </div>
-                  </div> -->
-
-                <!-- SKU -->
-                <!-- <div class="hidden md:block truncate">
-                    {{ user.sku }}
-                  </div> -->
-
-                <!-- Name -->
-                <!-- <div class="truncate">
-                    {{ user.name }}
-                  </div> -->
-
-                <!-- Price -->
-                <!-- <div class="hidden sm:block">
-                    {{ user.price | currency: "USD":"symbol":"1.2-2" }}
-                  </div> -->
-
-                <!-- Stock -->
-                <!-- <div class="hidden lg:flex items-center">
-                    <div class="min-w-4">{{ user.stock }}</div> -->
-                <!-- Low stock -->
-                <!-- <div
-                      class="flex items-end ml-2 w-1 h-4 bg-red-200 rounded overflow-hidden"
-                      *ngIf="user.stock < 20"
-                    >
-                      <div class="flex w-full h-1/3 bg-red-600"></div>
-                    </div> -->
-                <!-- Medium stock -->
-                <!-- <div
-                      class="flex items-end ml-2 w-1 h-4 bg-orange-200 rounded overflow-hidden"
-                      *ngIf="user.stock >= 20 && user.stock < 30"
-                    >
-                      <div class="flex w-full h-2/4 bg-orange-400"></div>
-                    </div> -->
-                <!-- High stock -->
-                <!-- <div
-                      class="flex items-end ml-2 w-1 h-4 bg-green-100 rounded overflow-hidden"
-                      *ngIf="user.stock >= 30"
-                    >
-                      <div class="flex w-full h-full bg-green-400"></div>
-                    </div>
-                  </div> -->
-
-                <!-- Active -->
-                <!-- <div class="hidden lg:block">
-                    <ng-container *ngIf="user.active">
-                      <mat-icon
-                        class="text-green-400 icon-size-5"
-                        [svgIcon]="'heroicons_solid:check'"
-                      ></mat-icon>
                     </ng-container>
-                    <ng-container *ngIf="!user.active">
-                      <mat-icon
-                        class="text-gray-400 icon-size-5"
-                        [svgIcon]="'heroicons_solid:x'"
-                      ></mat-icon>
-                    </ng-container>
-                  </div> -->
+                  </ng-container>
+                  <!-- nickname -->
+                  <div class="hidden sm:block truncate">
+                    {{ casinomoney.nickname }}
+                  </div>
 
-                <!-- Details button -->
-                <!-- <div>
-                    <button
-                      class="min-w-10 min-h-7 h-7 px-2 leading-6"
-                      mat-stroked-button
-                      (click)="__toggleDetails(user.id)"
-                    >
-                      <mat-icon
-                        class="icon-size-5"
-                        [svgIcon]="
-                          selectedUser?.id === user.id
-                            ? 'heroicons_solid:chevron-up'
-                            : 'heroicons_solid:chevron-down'
-                        "
-                      ></mat-icon>
+                  <!-- accountHolder -->
+                  <div class="hidden sm:block truncate">
+                    {{ casinomoney.accountHolder }}
+                  </div>
+
+                  <!-- contact -->
+                  <div class="hidden sm:block truncate">
+                    {{ casinomoney.contact }}
+                  </div>
+
+                  <!-- reserve -->
+                  <div class="hidden sm:block truncate">
+                    캐쉬{{ casinomoney.cash }} 콤프{{ casinomoney.comp }} 쿠폰{{
+                      casinomoney.coupon
+                    }}
+                  </div>
+
+                  <!-- gameMoney -->
+                  <div class="hidden sm:block truncate">
+                    {{ casinomoney.gameMoney }}
+                  </div>
+
+                  <!-- casinoCash -->
+                  <div class="hidden sm:block truncate">
+                    <button mat-flat-button [color]="'primary'">
+                      게임머니확인
                     </button>
-                  </div> -->
+                    <button mat-flat-button [color]="'primary'">
+                      게임머니회수
+                    </button>
+                  </div>
+
+                  <!-- todayComp -->
+                  <div class="hidden sm:block truncate">
+                    {{ casinomoney.todayComp }}P
+                  </div>
+
+                  <!-- total -->
+                  <div class="hidden sm:block truncate">
+                    입금{{ casinomoney.deposit }} 출금{{
+                      casinomoney.withdraw
+                    }}
+                    차익{{ casinomoney.margin }}
+                  </div>
+
+                  <!-- log -->
+                  <div class="hidden sm:block truncate">
+                    가입{{ casinomoney.accession }} 최종{{
+                      casinomoney.final
+                    }}
+                    IP{{ casinomoney.ip }}
+                  </div>
+
+                  <!-- state -->
+                  <div class="hidden sm:block truncate">
+                    {{ casinomoney.state }}
+                  </div>
+
+                  <!-- top -->
+                  <div class="hidden sm:block truncate">
+                    <button mat-flat-button [color]="'primary'">상부</button>
+                  </div>
+                </div>
               </ng-container>
             </ng-container>
           </div>
diff --git a/src/app/modules/admin/member/casinomoney/components/list.component.ts b/src/app/modules/admin/member/casinomoney/components/list.component.ts
index 2f80ecd..f2d5e42 100644
--- a/src/app/modules/admin/member/casinomoney/components/list.component.ts
+++ b/src/app/modules/admin/member/casinomoney/components/list.component.ts
@@ -45,15 +45,15 @@ import { Router } from '@angular/router';
         grid-template-columns: 60px auto 40px;
 
         @screen sm {
-          grid-template-columns: 60px auto 60px 72px;
+          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px auto 112px 72px;
+          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
         }
 
         @screen lg {
-          grid-template-columns: 60px 60px auto 112px 96px 96px 72px;
+          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
         }
       }
     `,
diff --git a/src/app/modules/admin/member/unconnected/components/list.component.html b/src/app/modules/admin/member/unconnected/components/list.component.html
index 4fe85f9..fe2c51d 100644
--- a/src/app/modules/admin/member/unconnected/components/list.component.html
+++ b/src/app/modules/admin/member/unconnected/components/list.component.html
@@ -11,6 +11,7 @@
     </div>
     <!-- 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">
       <!-- button -->
@@ -20,326 +21,199 @@
       <button mat-flat-button [color]="'primary'">90일</button>
       <button mat-flat-button [color]="'primary'">120일</button>
       <button mat-flat-button [color]="'primary'">가입후미접속</button>
-      <!-- Main -->
-      <div class="flex flex-auto overflow-hidden">
-        <!-- Products list -->
-        <div
-          class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
-        >
-          <ng-container *ngIf="unconnecteds$ | async as unconnecteds">
-            <ng-container *ngIf="unconnecteds.length > 0; else noUnconnected">
-              <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
-                >
-                  <div></div>
-                  <div class="hidden sm:block" [mat-sort-header]="'rank'">
-                    등급
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'id'">
-                    아이디
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'nickname'">
-                    닉네임
-                  </div>
-                  <div
-                    class="hidden sm:block"
-                    [mat-sort-header]="'accountHolder'"
-                  >
-                    예금주
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'level'">
-                    레벨
-                  </div>
-                  <div
-                    class="hidden sm:block"
-                    [mat-sort-header]="'calculateType'"
-                  >
-                    정산종류
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'contact'">
-                    연락처
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'cash'">
-                    캐쉬
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'comp'">
-                    콤프
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'charge'">
-                    충전금
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'exchange'">
-                    환전금
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'revenue'">
-                    수익금
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'accession'">
-                    가입날짜
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'final'">
-                    최근접속일
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'state'">
-                    상태
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="''">쪽지</div>
-                  <div class="hidden sm:block" [mat-sort-header]="'highest'">
-                    최상부
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'highRank'">
-                    직속
-                  </div>
-                  <div class="hidden sm:block" [mat-sort-header]="'members'">
-                    회원수
-                  </div>
-                  <!-- <div class="hidden md:block" [mat-sort-header]="'sku'">SKU</div>
-              <div [mat-sort-header]="'name'">Name</div>
-              <div class="hidden sm:block" [mat-sort-header]="'price'">
-                Price
-              </div>
-              <div class="hidden lg:block" [mat-sort-header]="'stock'">
-                Stock
-              </div>
-              <div class="hidden lg:block" [mat-sort-header]="'active'">
-                Active
-              </div>
-              <div class="hidden sm:block">Details</div> -->
-                </div>
-                <!-- Rows -->
-                <ng-container *ngIf="unconnecteds$ | async as unconnecteds">
-                  <ng-container
-                    *ngFor="
-                      let unconnected of unconnecteds;
-                      trackBy: __trackByFn
-                    "
-                  >
-                    <div
-                      class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-                    >
-                      <!-- rank -->
-                      <div class="hidden sm:block truncate">
-                        {{ unconnected.rank }}
-                      </div>
-                      <!-- id -->
-                      <ng-container *ngIf="users$ | async as users">
-                        <ng-container
-                          *ngFor="let user of users; trackBy: __trackByFn"
-                        >
-                          <div
-                            class="hidden sm:block truncate"
-                            (click)="viewUserDetail(user.id!)"
-                          >
-                            {{ unconnected.id }}
-                          </div>
-                        </ng-container>
-                      </ng-container>
-                      <!-- nickname -->
-                      <div class="hidden sm:block truncate">
-                        {{ unconnected.nickname }}
-                      </div>
-                      <!-- accountHolder -->
-                      <div class="hidden sm:block truncate">
-                        {{ unconnected.accountHolder }}
-                      </div>
-                      <!-- level -->
-                      <div class="hidden sm:block truncate">
-                        LV.{{ unconnected.level }}
-                      </div>
+    </div>
+  </div>
 
-                      <!-- calculateType -->
-                      <div class="hidden sm:block truncate">
-                        {{ unconnected.calculateType }}
-                      </div>
-                      <!-- contact -->
-                      <div class="hidden sm:block truncate">
-                        {{ unconnected.contact }}
-                      </div>
-
-                      <!-- cash -->
-                      <div class="hidden sm:block truncate">
-                        캐쉬{{ unconnected.cash }}
-                      </div>
-                      <!-- comp -->
-                      <div class="hidden sm:block truncate">
-                        comp{{ unconnected.comp }}
-                      </div>
-
-                      <!-- charge -->
-                      <div class="hidden sm:block truncate">
-                        {{ unconnected.charge }}
-                      </div>
-
-                      <!-- exchange -->
-                      <div class="hidden sm:block truncate">
-                        {{ unconnected.exchange }}
-                      </div>
-
-                      <!-- revenue -->
-                      <div class="hidden sm:block truncate">
-                        {{ unconnected.revenue }}
-                      </div>
-
-                      <!-- accession -->
-                      <div class="hidden sm:block truncate">
-                        {{ unconnected.accession }}
-                      </div>
-
-                      <!-- final -->
-                      <div class="hidden sm:block truncate">
-                        {{ unconnected.final }}
-                      </div>
-
-                      <!-- state -->
-                      <div class="hidden sm:block truncate">
-                        {{ unconnected.state }}
-                      </div>
-
-                      <!-- message -->
-                      <div class="hidden sm:block truncate">
-                        <button mat-flat-button [color]="'primary'">
-                          <mat-icon svgIcon="heroicons_outline:mail"></mat-icon>
-                        </button>
-                      </div>
-
-                      <!-- highest -->
-                      <div class="hidden sm:block truncate">
-                        {{ unconnected.highest }}
-                      </div>
-
-                      <!-- highRank -->
-                      <div class="hidden sm:block truncate">
-                        {{ unconnected.highRank }}
-                      </div>
-
-                      <!-- members -->
-                      <div class="hidden sm:block truncate">
-                        {{ unconnected.members }}
-                      </div>
-                      <!-- Image -->
-                      <!-- <div class="flex items-center">
-                    <div
-                      class="relative flex flex-0 items-center justify-center w-12 h-12 mr-6 rounded overflow-hidden border"
-                    >
-                      <img
-                        class="w-8"
-                        *ngIf="user.thumbnail"
-                        [alt]="'Product thumbnail image'"
-                        [src]="user.thumbnail"
-                      />
-                      <div
-                        class="flex items-center justify-center w-full h-full text-xs font-semibold leading-none text-center uppercase"
-                        *ngIf="!user.thumbnail"
-                      >
-                        NO THUMB
-                      </div>
-                    </div>
-                  </div> -->
-
-                      <!-- SKU -->
-                      <!-- <div class="hidden md:block truncate">
-                    {{ user.sku }}
-                  </div> -->
-
-                      <!-- Name -->
-                      <!-- <div class="truncate">
-                    {{ user.name }}
-                  </div> -->
-
-                      <!-- Price -->
-                      <!-- <div class="hidden sm:block">
-                    {{ user.price | currency: "USD":"symbol":"1.2-2" }}
-                  </div> -->
-
-                      <!-- Stock -->
-                      <!-- <div class="hidden lg:flex items-center">
-                    <div class="min-w-4">{{ user.stock }}</div> -->
-                      <!-- Low stock -->
-                      <!-- <div
-                      class="flex items-end ml-2 w-1 h-4 bg-red-200 rounded overflow-hidden"
-                      *ngIf="user.stock < 20"
-                    >
-                      <div class="flex w-full h-1/3 bg-red-600"></div>
-                    </div> -->
-                      <!-- Medium stock -->
-                      <!-- <div
-                      class="flex items-end ml-2 w-1 h-4 bg-orange-200 rounded overflow-hidden"
-                      *ngIf="user.stock >= 20 && user.stock < 30"
-                    >
-                      <div class="flex w-full h-2/4 bg-orange-400"></div>
-                    </div> -->
-                      <!-- High stock -->
-                      <!-- <div
-                      class="flex items-end ml-2 w-1 h-4 bg-green-100 rounded overflow-hidden"
-                      *ngIf="user.stock >= 30"
-                    >
-                      <div class="flex w-full h-full bg-green-400"></div>
-                    </div>
-                  </div> -->
-
-                      <!-- Active -->
-                      <!-- <div class="hidden lg:block">
-                    <ng-container *ngIf="user.active">
-                      <mat-icon
-                        class="text-green-400 icon-size-5"
-                        [svgIcon]="'heroicons_solid:check'"
-                      ></mat-icon>
-                    </ng-container>
-                    <ng-container *ngIf="!user.active">
-                      <mat-icon
-                        class="text-gray-400 icon-size-5"
-                        [svgIcon]="'heroicons_solid:x'"
-                      ></mat-icon>
-                    </ng-container>
-                  </div> -->
-
-                      <!-- Details button -->
-                      <!-- <div>
-                    <button
-                      class="min-w-10 min-h-7 h-7 px-2 leading-6"
-                      mat-stroked-button
-                      (click)="__toggleDetails(user.id)"
-                    >
-                      <mat-icon
-                        class="icon-size-5"
-                        [svgIcon]="
-                          selectedUser?.id === user.id
-                            ? 'heroicons_solid:chevron-up'
-                            : 'heroicons_solid:chevron-down'
-                        "
-                      ></mat-icon>
-                    </button>
-                  </div> -->
-                    </div>
-                  </ng-container>
-                </ng-container>
-              </div>
-
-              <mat-paginator
-                class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
-                [ngClass]="{ 'pointer-events-none': isLoading }"
-                [length]="pagination?.length"
-                [pageIndex]="pagination?.page"
-                [pageSize]="pagination?.size"
-                [pageSizeOptions]="[5, 10, 25, 100]"
-                [showFirstLastButtons]="true"
-              ></mat-paginator>
-            </ng-container>
-          </ng-container>
-
-          <ng-template #noUnconnected>
+  <!-- Main -->
+  <div class="flex flex-auto overflow-hidden">
+    <!-- Products list -->
+    <div
+      class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
+    >
+      <ng-container *ngIf="unconnecteds$ | async as unconnecteds">
+        <ng-container *ngIf="unconnecteds.length > 0; else noUnconnected">
+          <div class="grid">
+            <!-- Header -->
             <div
-              class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+              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
             >
-              There are no unconnected!
+              <div></div>
+              <div class="hidden sm:block" [mat-sort-header]="'rank'">등급</div>
+              <div class="hidden sm:block" [mat-sort-header]="'id'">아이디</div>
+              <div class="hidden sm:block" [mat-sort-header]="'nickname'">
+                닉네임
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'accountHolder'">
+                예금주
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'level'">
+                레벨
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'calculateType'">
+                정산종류
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'contact'">
+                연락처
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'cash'">캐쉬</div>
+              <div class="hidden sm:block" [mat-sort-header]="'comp'">콤프</div>
+              <div class="hidden sm:block" [mat-sort-header]="'charge'">
+                충전금
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'exchange'">
+                환전금
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'revenue'">
+                수익금
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'accession'">
+                가입날짜
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'final'">
+                최근접속일
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'state'">
+                상태
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="''">쪽지</div>
+              <div class="hidden sm:block" [mat-sort-header]="'highest'">
+                최상부
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'highRank'">
+                직속
+              </div>
+              <div class="hidden sm:block" [mat-sort-header]="'members'">
+                회원수
+              </div>
             </div>
-          </ng-template>
+            <!-- Rows -->
+            <ng-container *ngIf="unconnecteds$ | async as unconnecteds">
+              <ng-container
+                *ngFor="let unconnected of unconnecteds; trackBy: __trackByFn"
+              >
+                <div
+                  class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
+                >
+                  <!-- rank -->
+                  <div class="hidden sm:block truncate">
+                    {{ unconnected.rank }}
+                  </div>
+                  <!-- id -->
+
+                  <div
+                    class="hidden sm:block truncate"
+                    (click)="viewUserDetail(unconnected.id!)"
+                  >
+                    {{ unconnected.id }}
+                  </div>
+                  <!-- nickname -->
+                  <div class="hidden sm:block truncate">
+                    {{ unconnected.nickname }}
+                  </div>
+                  <!-- accountHolder -->
+                  <div class="hidden sm:block truncate">
+                    {{ unconnected.accountHolder }}
+                  </div>
+                  <!-- level -->
+                  <div class="hidden sm:block truncate">
+                    LV.{{ unconnected.level }}
+                  </div>
+
+                  <!-- calculateType -->
+                  <div class="hidden sm:block truncate">
+                    {{ unconnected.calculateType }}
+                  </div>
+                  <!-- contact -->
+                  <div class="hidden sm:block truncate">
+                    {{ unconnected.contact }}
+                  </div>
+
+                  <!-- cash -->
+                  <div class="hidden sm:block truncate">
+                    캐쉬{{ unconnected.cash }}
+                  </div>
+                  <!-- comp -->
+                  <div class="hidden sm:block truncate">
+                    comp{{ unconnected.comp }}
+                  </div>
+
+                  <!-- charge -->
+                  <div class="hidden sm:block truncate">
+                    {{ unconnected.charge }}
+                  </div>
+
+                  <!-- exchange -->
+                  <div class="hidden sm:block truncate">
+                    {{ unconnected.exchange }}
+                  </div>
+
+                  <!-- revenue -->
+                  <div class="hidden sm:block truncate">
+                    {{ unconnected.revenue }}
+                  </div>
+
+                  <!-- accession -->
+                  <div class="hidden sm:block truncate">
+                    {{ unconnected.accession }}
+                  </div>
+
+                  <!-- final -->
+                  <div class="hidden sm:block truncate">
+                    {{ unconnected.final }}
+                  </div>
+
+                  <!-- state -->
+                  <div class="hidden sm:block truncate">
+                    {{ unconnected.state }}
+                  </div>
+
+                  <!-- message -->
+                  <div class="hidden sm:block truncate">
+                    <button mat-flat-button [color]="'primary'">
+                      <mat-icon svgIcon="heroicons_outline:mail"></mat-icon>
+                    </button>
+                  </div>
+
+                  <!-- highest -->
+                  <div class="hidden sm:block truncate">
+                    {{ unconnected.highest }}
+                  </div>
+
+                  <!-- highRank -->
+                  <div class="hidden sm:block truncate">
+                    {{ unconnected.highRank }}
+                  </div>
+
+                  <!-- members -->
+                  <div class="hidden sm:block truncate">
+                    {{ unconnected.members }}
+                  </div>
+                </div>
+              </ng-container>
+            </ng-container>
+          </div>
+
+          <mat-paginator
+            class="sm:absolute sm:inset-x-0 sm:bottom-0 border-b sm:border-t sm:border-b-0 z-10 bg-gray-50 dark:bg-transparent"
+            [ngClass]="{ 'pointer-events-none': isLoading }"
+            [length]="pagination?.length"
+            [pageIndex]="pagination?.page"
+            [pageSize]="pagination?.size"
+            [pageSizeOptions]="[5, 10, 25, 100]"
+            [showFirstLastButtons]="true"
+          ></mat-paginator>
+        </ng-container>
+      </ng-container>
+
+      <ng-template #noUnconnected>
+        <div
+          class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+        >
+          There are no unconnected!
         </div>
-      </div>
+      </ng-template>
     </div>
   </div>
 </div>
diff --git a/src/app/modules/admin/member/user/components/list.component.ts b/src/app/modules/admin/member/user/components/list.component.ts
index 530bc41..c36671c 100644
--- a/src/app/modules/admin/member/user/components/list.component.ts
+++ b/src/app/modules/admin/member/user/components/list.component.ts
@@ -44,15 +44,15 @@ import { Router } from '@angular/router';
         grid-template-columns: 60px auto 40px;
 
         @screen sm {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 72px;
+          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 112px 72px;
+          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
         }
 
         @screen lg {
-          grid-template-columns: 50px 50px 50px 50px 70px 40px 60px 60px auto 112px 96px 96px 72px;
+          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
         }
       }
     `,