추천코드등록페이지 수정

src/app/app.routing.ts

@@ -213,13 +213,13 @@ export const appRoutes: Route[] = [
           //       'app/modules/admin/member/partner-store/partner-store.module'
           //     ).then((m: any) => m.PartnerStoreModule),
           // },
-          // {
+          {
-          //   path: 'partner-recommendation',
+            path: 'recommendation',
-          //   loadChildren: () =>
+            loadChildren: () =>
-          //     import(
+              import(
-          //       'app/modules/admin/member/partner-recommendation/partner-recommendation.module'
+                'app/modules/admin/member/recommendation/recommendation.module'
-          //     ).then((m: any) => m.PartnerRecommendationModule),
+              ).then((m: any) => m.RecommendationModule),
-          // },
+          },
           {
             path: 'coupon',
             loadChildren: () =>

src/app/mock-api/apps/member/partner-recommendation/data.ts

@@ -1,33 +0,0 @@
-/* eslint-disable */
-
-export const partnerRecommendations = [
-  {
-    id: 'on00',
-    totalPartnerCount: '5',
-    totalHoldingMoney: 303675,
-    totalComp: 108933,
-    total: 412608,
-    branchCount: 1,
-    divisionCount: 1,
-    officeCount: 1,
-    storeCount: 1,
-    memberCount: 1,
-    nickname: 'on00',
-    accountHolder: '11',
-    phoneNumber: '010-1111-1111',
-    calculateType: '롤링',
-    ownCash: 50000,
-    ownComp: 1711,
-    ownCoupon: 50000,
-    gameMoney: 0,
-    todayComp: 0,
-    totalDeposit: 0,
-    totalWithdraw: 0,
-    balance: 0,
-    registDate: '2022-06-12 15:38',
-    finalSigninDate: '',
-    ip: '',
-    state: '정상',
-    note: '',
-  },
-];

src/app/mock-api/apps/member/recommendation/api.ts

@@ -1,13 +1,13 @@
 import { Injectable } from '@angular/core';
 import { assign, cloneDeep } from 'lodash-es';
 import { FuseMockApiService, FuseMockApiUtils } from '@fuse/lib/mock-api';
-import { partnerRecommendations as partnerRecommendationsData } from './data';
+import { recommendations as recommendationsData } from './data';
 
 @Injectable({
   providedIn: 'root',
 })
-export class MemberPartnerRecommendationMockApi {
+export class MemberRecommendationMockApi {
-  private _partnerRecommendations: any[] = partnerRecommendationsData;
+  private _recommendations: any[] = recommendationsData;
 
   /**
    * Constructor
@@ -26,29 +26,24 @@ export class MemberPartnerRecommendationMockApi {
    */
   registerHandlers(): void {
     // -----------------------------------------------------------------------------------------------------
-    // @ PartnerRecommendations - GET
+    // @ Recommendations - GET
     // -----------------------------------------------------------------------------------------------------
     this._fuseMockApiService
-      .onGet(
+      .onGet('api/apps/member/recommendation/recommendations', 300)
-        'api/apps/member/partner-recommendation/partner-recommendations',
-        300
-      )
       .reply(({ request }) => {
         // Get available queries
         const search = request.params.get('search');
-        const sort = request.params.get('sort') || 'name';
+        const sort = request.params.get('sort') || 'signinId';
         const order = request.params.get('order') || 'asc';
         const page = parseInt(request.params.get('page') ?? '1', 10);
         const size = parseInt(request.params.get('size') ?? '10', 10);
 
-        // Clone the partnerRecommendations
+        // Clone the recommendations
-        let partnerRecommendations: any[] | null = cloneDeep(
+        let recommendations: any[] | null = cloneDeep(this._recommendations);
-          this._partnerRecommendations
-        );
 
-        // Sort the partnerRecommendations
+        // Sort the recommendations
-        if (sort === 'sku' || sort === 'name' || sort === 'active') {
+        if (sort === 'signinId' || sort === 'nickname' || sort === 'state') {
-          partnerRecommendations.sort((a, b) => {
+          recommendations.sort((a, b) => {
             const fieldA = a[sort].toString().toUpperCase();
             const fieldB = b[sort].toString().toUpperCase();
             return order === 'asc'
@@ -56,15 +51,15 @@ export class MemberPartnerRecommendationMockApi {
               : fieldB.localeCompare(fieldA);
           });
         } else {
-          partnerRecommendations.sort((a, b) =>
+          recommendations.sort((a, b) =>
             order === 'asc' ? a[sort] - b[sort] : b[sort] - a[sort]
           );
         }
 
         // If search exists...
         if (search) {
-          // Filter the partnerRecommendations
+          // Filter the recommendations
-          partnerRecommendations = partnerRecommendations.filter(
+          recommendations = recommendations.filter(
             (contact: any) =>
               contact.name &&
               contact.name.toLowerCase().includes(search.toLowerCase())
@@ -72,35 +67,32 @@ export class MemberPartnerRecommendationMockApi {
         }
 
         // Paginate - Start
-        const partnerRecommendationsLength = partnerRecommendations.length;
+        const recommendationsLength = recommendations.length;
 
         // Calculate pagination details
         const begin = page * size;
-        const end = Math.min(size * (page + 1), partnerRecommendationsLength);
+        const end = Math.min(size * (page + 1), recommendationsLength);
-        const lastPage = Math.max(
+        const lastPage = Math.max(Math.ceil(recommendationsLength / size), 1);
-          Math.ceil(partnerRecommendationsLength / size),
-          1
-        );
 
         // Prepare the pagination object
         let pagination = {};
 
         // If the requested page number is bigger than
         // the last possible page number, return null for
-        // partnerRecommendations but also send the last possible page so
+        // recommendations but also send the last possible page so
         // the app can navigate to there
         if (page > lastPage) {
-          partnerRecommendations = null;
+          recommendations = null;
           pagination = {
             lastPage,
           };
         } else {
           // Paginate the results by size
-          partnerRecommendations = partnerRecommendations.slice(begin, end);
+          recommendations = recommendations.slice(begin, end);
 
           // Prepare the pagination mock-api
           pagination = {
-            length: partnerRecommendationsLength,
+            length: recommendationsLength,
             size: size,
             page: page,
             lastPage: lastPage,
@@ -113,41 +105,41 @@ export class MemberPartnerRecommendationMockApi {
         return [
           200,
           {
-            partnerRecommendations,
+            recommendations,
             pagination,
           },
         ];
       });
 
     // -----------------------------------------------------------------------------------------------------
-    // @ PartnerRecommendation - GET
+    // @ Recommendation - GET
     // -----------------------------------------------------------------------------------------------------
     this._fuseMockApiService
-      .onGet('api/apps/member/partne-recommendation/partner-recommendation')
+      .onGet('api/apps/member/recommendation/recommendation')
       .reply(({ request }) => {
         // Get the id from the params
         const id = request.params.get('id');
 
-        // Clone the partnerRecommendations
+        // Clone the recommendations
-        const partnerRecommendations = cloneDeep(this._partnerRecommendations);
+        const recommendations = cloneDeep(this._recommendations);
 
-        // Find the partnerRecommendation
+        // Find the recommendation
-        const partnerRecommendation = partnerRecommendations.find(
+        const recommendation = recommendations.find(
           (item: any) => item.id === id
         );
 
         // Return the response
-        return [200, partnerRecommendation];
+        return [200, recommendation];
       });
 
     // -----------------------------------------------------------------------------------------------------
-    // @ PartnerRecommendation - POST
+    // @ Recommendation - POST
     // -----------------------------------------------------------------------------------------------------
     this._fuseMockApiService
-      .onPost('api/apps/member/partner-recommendation/partner-recommendation')
+      .onPost('api/apps/member/recommendation/recommendation')
       .reply(() => {
-        // Generate a new partnerRecommendation
+        // Generate a new recommendation
-        const newPartnerRecommendation = {
+        const newRecommendation = {
           id: FuseMockApiUtils.guid(),
           category: '',
           name: 'A New User',
@@ -169,62 +161,58 @@ export class MemberPartnerRecommendationMockApi {
           active: false,
         };
 
-        // Unshift the new partnerRecommendation
+        // Unshift the new recommendation
-        this._partnerRecommendations.unshift(newPartnerRecommendation);
+        this._recommendations.unshift(newRecommendation);
 
         // Return the response
-        return [200, newPartnerRecommendation];
+        return [200, newRecommendation];
       });
 
     // -----------------------------------------------------------------------------------------------------
-    // @ PartnerRecommendation - PATCH
+    // @ Recommendation - PATCH
     // -----------------------------------------------------------------------------------------------------
     this._fuseMockApiService
-      .onPatch('api/apps/member/partner-recommendation/partner-recommendation')
+      .onPatch('api/apps/member/recommendation/recommendation')
       .reply(({ request }) => {
-        // Get the id and partnerRecommendation
+        // Get the id and recommendation
         const id = request.body.id;
-        const partnerRecommendation = cloneDeep(
+        const recommendation = cloneDeep(request.body.recommendation);
-          request.body.partnerRecommendation
-        );
 
-        // Prepare the updated partnerRecommendation
+        // Prepare the updated recommendation
-        let updatedPartnerRecommendation = null;
+        let updatedRecommendation = null;
 
-        // Find the partnerRecommendation and update it
+        // Find the recommendation and update it
-        this._partnerRecommendations.forEach(
+        this._recommendations.forEach((item, index, recommendations) => {
-          (item, index, partnerRecommendations) => {
+          if (item.id === id) {
-            if (item.id === id) {
+            // Update the recommendation
-              // Update the partnerRecommendation
+            recommendations[index] = assign(
-              partnerRecommendations[index] = assign(
+              {},
-                {},
+              recommendations[index],
-                partnerRecommendations[index],
+              recommendation
-                partnerRecommendation
+            );
-              );
 
-              // Store the updated partnerRecommendation
+            // Store the updated recommendation
-              updatedPartnerRecommendation = partnerRecommendations[index];
+            updatedRecommendation = recommendations[index];
-            }
           }
-        );
+        });
 
         // Return the response
-        return [200, updatedPartnerRecommendation];
+        return [200, updatedRecommendation];
       });
 
     // -----------------------------------------------------------------------------------------------------
-    // @ PartnerRecommendation - DELETE
+    // @ Recommendation - DELETE
     // -----------------------------------------------------------------------------------------------------
     this._fuseMockApiService
-      .onDelete('api/apps/member/partner-recommendation/partner-recommendation')
+      .onDelete('api/apps/member/recommendation/recommendation')
       .reply(({ request }) => {
         // Get the id
         const id = request.params.get('id');
 
-        // Find the partnerRecommendation and delete it
+        // Find the recommendation and delete it
-        this._partnerRecommendations.forEach((item, index) => {
+        this._recommendations.forEach((item, index) => {
           if (item.id === id) {
-            this._partnerRecommendations.splice(index, 1);
+            this._recommendations.splice(index, 1);
           }
         });
 

src/app/mock-api/apps/member/recommendation/data.ts

@@ -0,0 +1,18 @@
+/* eslint-disable */
+
+export const recommendations = [
+  {
+    id: '7eb7c859-1347-4317-96b6-9476a7e2ba3c',
+    signinId: 'on04',
+    nickname: '가가가',
+    rank: '매장',
+    highRank: 'on03',
+    accountHolder: '국민은행4444444',
+    holdingMoney: 0,
+    ownComp: 1649,
+    state: '정상',
+    siteAddress: 'web4.nova114.com',
+    useOrNot: 'Y',
+    memberCount: 1,
+  },
+];

src/app/mock-api/common/navigation/data.ts

@@ -75,11 +75,11 @@ export const defaultNavigation: FuseNavigationItem[] = [
         link: '/member/partner',
       },
       {
-        id: 'member.partner-recommendation',
+        id: 'member.recommendation',
-        title: 'Partner Recommendation',
+        title: 'Recommendation',
         type: 'basic',
         icon: 'heroicons_outline:academic-cap',
-        link: '/member/partner/recommendation',
+        link: '/member/recommendation',
       },
 
       {

src/app/mock-api/index.ts

@@ -21,7 +21,7 @@ import { MemberPartnerBranchMockApi } from './apps/member/partner-branch/api';
 import { MemberPartnerDivisionMockApi } from './apps/member/partner-division/api';
 import { MemberPartnerOfficeMockApi } from './apps/member/partner-office/api';
 import { MemberPartnerStoreMockApi } from './apps/member/partner-store/api';
-import { MemberPartnerRecommendationMockApi } from './apps/member/partner-recommendation/api';
+import { MemberRecommendationMockApi } from './apps/member/recommendation/api';
 import { MemberCouponMockApi } from './apps/member/coupon/api';
 import { MemberCouponMoneyLogMockApi } from './apps/member/coupon-money-log/api';
 import { MemberCouponLogMockApi } from './apps/member/coupon-log/api';
@@ -94,7 +94,7 @@ export const mockApiServices = [
   MemberPartnerDivisionMockApi,
   MemberPartnerOfficeMockApi,
   MemberPartnerStoreMockApi,
-  MemberPartnerRecommendationMockApi,
+  MemberRecommendationMockApi,
   MemberCouponMockApi,
   MemberCouponMoneyLogMockApi,
   MemberCouponLogMockApi,

src/app/modules/admin/member/partner/components/index.ts

@@ -1,4 +1,3 @@
 import { ListComponent } from './list.component';
-import { RecommendationListComponent } from './recommendation-list.component';
 
-export const COMPONENTS = [ListComponent, RecommendationListComponent];
+export const COMPONENTS = [ListComponent];

src/app/modules/admin/member/partner/components/recommendation-list.component.html

@@ -1,372 +0,0 @@
-<div
-  class="sm:absolute sm:inset-0 flex flex-col flex-auto min-w-0 sm:overflow-hidden bg-card dark:bg-transparent"
->
-  <!-- Header -->
-  <div
-    class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b"
-  >
-    <!-- Loader -->
-    <div class="absolute inset-x-0 bottom-0" *ngIf="isLoading">
-      <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
-    </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">
-      <!-- Memo -->
-      <!-- <mat-form-field>
-        <ng-container *ngIf="partnerRecommendations$ | async as partnerRecommendations">
-          <ng-container
-            *ngFor="let partnerRecommendation of partnerRecommendations; trackBy: __trackByFn"
-          >
-            <div
-              class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-            >
-              <fieldset>
-                총 파트너수:{{ partnerRecommendation.totalPartnerCount }} 총 보유머니:{{
-                  partnerRecommendation.totalHoldingMoney
-                }}
-                총 콤프:{{ partnerRecommendation.totalComp }} 총 합계:{{
-                  partnerRecommendation.total
-                }}
-              </fieldset>
-            </div>
-          </ng-container>
-        </ng-container>
-      </mat-form-field> -->
-
-      <!-- SelectBox -->
-      <mat-form-field>
-        <mat-select placeholder="리스트수">
-          <mat-option value="40">40</mat-option>
-          <mat-option value="60">60</mat-option>
-          <mat-option value="80">80</mat-option>
-          <mat-option value="100">100</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="레벨">
-          <mat-option value="level1">LV.1</mat-option>
-          <mat-option value="level2">LV.2</mat-option>
-          <mat-option value="level3">LV.3</mat-option>
-          <mat-option value="level4">LV.4</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="상태">
-          <mat-option value="">정상</mat-option>
-          <mat-option value="">대기</mat-option>
-          <mat-option value="">탈퇴</mat-option>
-          <mat-option value="">휴면</mat-option>
-          <mat-option value="">블랙</mat-option>
-          <mat-option value="">정지</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="제한">
-          <mat-option value="">카지노제한</mat-option>
-          <mat-option value="">슬롯제한</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내용">
-          <mat-option value="">카지노콤프</mat-option>
-          <mat-option value="">슬롯콤프</mat-option>
-          <mat-option value="">배팅콤프</mat-option>
-          <mat-option value="">첫충콤프</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <!-- <mat-form-field>
-        <mat-select placeholder="입금">
-          <mat-option value="">계좌입금</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="아이디">
-          <mat-option value="">아이디</mat-option>
-          <mat-option value="">닉네임</mat-option>
-          <mat-option value="">이름</mat-option>
-          <mat-option value="">사이트</mat-option>
-          <mat-option value="">파트너수동지급</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="가입일 정렬">
-          <mat-option value="">가입일 정렬</mat-option>
-          <mat-option value="">아이디 정렬</mat-option>
-          <mat-option value="">닉네임 정렬</mat-option>
-          <mat-option value="">캐쉬 정렬</mat-option>
-          <mat-option value="">콤프 정렬</mat-option>
-          <mat-option value="">쿠폰 정렬</mat-option>
-          <mat-option value="">입금 정렬</mat-option>
-          <mat-option value="">출금 정렬</mat-option>
-          <mat-option value="">차익 정렬</mat-option>
-        </mat-select>
-      </mat-form-field>
-      <mat-form-field>
-        <mat-select placeholder="내림차순">
-          <mat-option value="">내림차순</mat-option>
-          <mat-option value="">오름차순</mat-option>
-        </mat-select>
-      </mat-form-field> -->
-      <!-- Search -->
-      <mat-form-field
-        class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64"
-      >
-        <mat-icon
-          class="icon-size-5"
-          matPrefix
-          [svgIcon]="'heroicons_solid:search'"
-        ></mat-icon>
-        <input
-          matInput
-          [formControl]="searchInputControl"
-          [autocomplete]="'off'"
-          [placeholder]="'Search'"
-        />
-      </mat-form-field>
-      <!-- Add user button -->
-      <button
-        class="ml-4"
-        mat-flat-button
-        [color]="'primary'"
-        (click)="__createProduct()"
-      >
-        <!-- <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon> -->
-        <span class="ml-2 mr-1">검색하기</span>
-      </button>
-      <button>엑셀저장</button>
-      <button>카지노머니확인</button>
-    </div>
-  </div>
-
-  <!-- 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="partnerRecommendations$ | async as partnerRecommendations"
-      >
-        <ng-container
-          *ngIf="
-            partnerRecommendations.length > 0;
-            else noPartnerRecommendation
-          "
-        >
-          <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 class="hidden sm:block"><mat-checkbox></mat-checkbox></div>
-              <div class="hidden sm:block">요율</div>
-              <div class="hidden sm:block">상부트리</div>
-              <div class="hidden sm:block">관리</div>
-              <div class="hidden sm:block">매장수</div>
-              <div class="hidden sm:block">회원수</div>
-              <div class="hidden sm:block">아이디</div>
-              <div class="hidden sm:block">닉네임</div>
-              <div class="hidden sm:block">예금주</div>
-              <div class="hidden sm:block">연락처</div>
-              <div class="hidden sm:block">정산</div>
-              <div class="hidden sm:block">보유금</div>
-              <div class="hidden sm:block">게임중머니</div>
-              <div class="hidden sm:block">카지노->캐쉬</div>
-              <div class="hidden sm:block">금일콤프</div>
-              <div class="hidden sm:block">총입출</div>
-              <div class="hidden sm:block">로그</div>
-              <div class="hidden sm:block">상태</div>
-              <div class="hidden sm:block">회원수</div>
-              <div class="hidden sm:block">비고</div>
-            </div>
-            <!-- Rows -->
-            <ng-container
-              *ngIf="partnerRecommendations$ | async as partnerRecommendations"
-            >
-              <ng-container
-                *ngFor="
-                  let partnerRecommendation of partnerRecommendations;
-                  trackBy: __trackByFn
-                "
-              >
-                <div
-                  class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
-                >
-                  <div class="hidden sm:block truncate">
-                    <mat-checkbox></mat-checkbox>
-                  </div>
-                  <!-- rate -->
-                  <div class="hidden sm:block truncate">
-                    <button
-                      mat-button
-                      color="primary"
-                      matTooltip="요율확인
-                                카지노-바카라: 0%
-                                카지노-룰렛: 0%
-                                카지노-드레곤타이거: 0%
-                                카지노-그외: 0%
-                                슬롯: 0%
-                                카지노루징: 0%
-                                슬롯루징: 0%"
-                    >
-                      요율
-                    </button>
-                    <div class="hidden sm:block truncate">
-                      <!-- 관리 -->
-                      <button mat-flat-button [color]="'primary'">
-                        <mat-form-field>
-                          <mat-select placeholder="관리">
-                            <mat-option value="">보유금지급/회수</mat-option>
-                            <mat-option value="">수수료설정</mat-option>
-                            <mat-option value="">콤프지급/회수</mat-option>
-                            <mat-option value="">쿠폰머니지급/회수</mat-option>
-                            <mat-option value="">쪽지보내기</mat-option>
-                            <mat-option value="">베팅리스트</mat-option>
-                            <mat-option value="">강제로그아웃</mat-option>
-                          </mat-select>
-                        </mat-form-field>
-                      </button>
-                    </div>
-                  </div>
-                  <!-- 매장수 -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      {{ partnerRecommendation.branchCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ partnerRecommendation.divisionCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ partnerRecommendation.officeCount }}
-                    </button>
-                    <button mat-flat-button [color]="'primary'">
-                      {{ partnerRecommendation.storeCount }}
-                    </button>
-                  </div>
-                  <!-- 회원수 -->
-                  <div class="hidden sm:block truncate">
-                    <button mat-flat-button [color]="'primary'">
-                      {{ partnerRecommendation.memberCount }}
-                    </button>
-                  </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!)"
-                      >
-                        {{ partnerRecommendation.id }}
-                      </div>
-                    </ng-container>
-                  </ng-container>
-                  <!-- nickname -->
-                  <div class="hidden sm:block truncate">
-                    {{ partnerRecommendation.nickname }}
-                  </div>
-                  <!-- accountHolder -->
-                  <div class="hidden sm:block truncate">
-                    {{ partnerRecommendation.accountHolder }}
-                  </div>
-                  <!-- 연락처 -->
-                  <div class="hidden sm:block truncate">
-                    {{ partnerRecommendation.phoneNumber }}
-                  </div>
-                  <!-- 정산 -->
-                  <div class="hidden sm:block truncate">
-                    {{ partnerRecommendation.calculateType }}
-                  </div>
-                  <!-- 보유금 -->
-                  <div class="hidden sm:block truncate">
-                    캐쉬{{ partnerRecommendation.ownCash }} 콤프{{
-                      partnerRecommendation.ownComp
-                    }}
-                    쿠폰{{ partnerRecommendation.ownCoupon }}
-                  </div>
-                  <!-- gameMoney -->
-                  <div class="hidden sm:block truncate">
-                    {{ partnerRecommendation.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">
-                    {{ partnerRecommendation.todayComp }}P
-                  </div>
-                  <!-- 총입출 -->
-                  <div class="hidden sm:block truncate">
-                    입금{{ partnerRecommendation.totalDeposit }} 출금{{
-                      partnerRecommendation.totalWithdraw
-                    }}
-                    차익{{ partnerRecommendation.balance }}
-                  </div>
-                  <!-- log -->
-                  <div class="hidden sm:block truncate">
-                    가입{{ partnerRecommendation.registDate }} 최종{{
-                      partnerRecommendation.finalSigninDate
-                    }}
-                    IP{{ partnerRecommendation.ip }}
-                  </div>
-                  <!-- state -->
-                  <div class="hidden sm:block truncate">
-                    {{ partnerRecommendation.state }}
-                  </div>
-                  <!-- 회원수 -->
-                  <div class="hidden sm:block truncate">
-                    {{ partnerRecommendation.memberCount }}
-                  </div>
-                  <!-- 비고 -->
-                  <div class="hidden sm:block truncate">
-                    <button
-                      mat-flat-button
-                      [color]="'primary'"
-                      (click)="__onClickRegist($event)"
-                    >
-                      {{ partnerRecommendation.note }}
-                    </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 #noPartnerRecommendation>
-        <div
-          class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
-        >
-          There are no partner recommendations!
-        </div>
-      </ng-template>
-    </div>
-  </div>
-</div>

src/app/modules/admin/member/partner/partner.routing.ts

@@ -1,7 +1,6 @@
 import { Route } from '@angular/router';
 
 import { ListComponent } from './components/list.component';
-import { RecommendationListComponent } from './components/recommendation-list.component';
 
 import { PartnersResolver } from './resolvers/partner.resolver';
 
@@ -18,11 +17,4 @@ export const partnerRoutes: Route[] = [
       Partners: PartnersResolver,
     },
   },
-  {
-    path: '',
-    component: RecommendationListComponent,
-    resolve: {
-      Partners: PartnersResolver,
-    },
-  },
 ];

src/app/modules/admin/member/recommendation/components/index.ts

@@ -0,0 +1,3 @@
+import { ListComponent } from './list.component';
+
+export const COMPONENTS = [ListComponent];

src/app/modules/admin/member/recommendation/components/list.component.html

@@ -0,0 +1,300 @@
+<div
+  class="sm:absolute sm:inset-0 flex flex-col flex-auto min-w-0 sm:overflow-hidden bg-card dark:bg-transparent"
+>
+  <!-- Header -->
+  <div
+    class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-8 px-6 md:px-8 border-b"
+  >
+    <!-- Loader -->
+    <div class="absolute inset-x-0 bottom-0" *ngIf="isLoading">
+      <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
+    </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 mat-icon-button (click)="__onClickSearch1()">
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+      </button>
+    </div>
+  </div>
+  <!-- Search -->
+  <div
+    *ngIf="__isSearchOpened1"
+    class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
+  >
+    <!-- Actions -->
+    <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+      <!-- SelectBox -->
+      <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
+        <mat-select placeholder="검색어">
+          <mat-option value="">검색어</mat-option>
+          <mat-option value="">매장아이디</mat-option>
+          <mat-option value="">매장닉네임</mat-option>
+        </mat-select>
+      </mat-form-field>
+      <!-- Search -->
+      <mat-form-field
+        fxFlex
+        class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
+      >
+        <mat-icon
+          class="icon-size-5"
+          matPrefix
+          [svgIcon]="'heroicons_solid:search'"
+        ></mat-icon>
+        <input
+          matInput
+          [formControl]="searchInputControl"
+          [autocomplete]="'off'"
+          [placeholder]="'Search user'"
+        />
+      </mat-form-field>
+      <!-- Add user button -->
+      <button
+        fxFlex
+        mat-flat-button
+        style="position: fixed; margin-top: 4px"
+        [color]="'primary'"
+        (click)="__createProduct()"
+      >
+        <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+        <span class="ml-2 mr-1">Search</span>
+      </button>
+    </div>
+  </div>
+
+  <!-- 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="recommendations$ | async as recommendations">
+        <ng-container *ngIf="recommendations.length > 0; else noRecommendation">
+          <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"
+            >
+              <div>선택</div>
+              <div>상부</div>
+              <div>
+                아이디
+                <hr style="margin: 7px 0px" />
+                닉네임
+                <hr style="margin: 7px 0px" />
+                상태
+              </div>
+              <div>등급</div>
+              <div class="hidden md:block">계좌정보</div>
+              <div class="hidden sm:block">
+                머니
+                <hr style="margin: 7px 0px" />
+                콤프
+              </div>
+              <div class="hidden md:block">사이트</div>
+            </div>
+            <!-- Rows -->
+            <ng-container *ngIf="recommendations$ | async as recommendations">
+              <ng-container
+                *ngFor="
+                  let recommendation of recommendations;
+                  trackBy: __trackByFn
+                "
+              >
+                <div
+                  class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
+                >
+                  <div>
+                    <mat-checkbox></mat-checkbox>
+                  </div>
+                  <div>{{ recommendation.highRank }}</div>
+                  <div>
+                    {{ recommendation.signinId }}
+                    <hr style="margin: 7px 0px" />
+                    {{ recommendation.nickname }}
+                    <hr style="margin: 7px 0px" />
+                    {{ recommendation.state }}
+                  </div>
+                  <div>
+                    {{ recommendation.rank }}
+                  </div>
+                  <div>{{ recommendation.accountHolder }}</div>
+                  <div class="hidden sm:block">
+                    {{ recommendation.holdingMoney }}
+                    <hr style="margin: 7px 0px" />
+                    {{ recommendation.ownComp }}
+                  </div>
+                  <div class="hidden lg:block">
+                    {{ recommendation.siteAddress }}
+                  </div>
+                </div>
+              </ng-container>
+            </ng-container>
+          </div>
+          <div>
+            <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+              추천인으로 추가
+            </button>
+          </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 #noRecommendation>
+        <div
+          class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+        >
+          There are no data!
+        </div>
+      </ng-template>
+
+      <!-- Actions -->
+      <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
+        <button mat-icon-button (click)="__onClickSearch2()">
+          <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+        </button>
+      </div>
+    </div>
+    <!-- Search -->
+    <div
+      *ngIf="__isSearchOpened2"
+      class="relative flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between py-4 px-6 md:px-8 border-b"
+    >
+      <!-- Actions -->
+      <div fxLayout="row wrap" class="items-center mt-6 sm:mt-0 sm:ml-0">
+        <!-- SelectBox -->
+        <mat-form-field fxFlex class="bet-mat-form-field-wrapper-mb-0 mr-2">
+          <mat-select placeholder="매장아이디">
+            <mat-option value="">매장아이디</mat-option>
+            <mat-option value="">매장닉네임</mat-option>
+          </mat-select>
+        </mat-form-field>
+        <!-- Search -->
+        <mat-form-field
+          fxFlex
+          class="fuse-mat-rounded min-w-64 bet-mat-form-field-wrapper-mb-0 mr-2"
+        >
+          <mat-icon
+            class="icon-size-5"
+            matPrefix
+            [svgIcon]="'heroicons_solid:search'"
+          ></mat-icon>
+          <input
+            matInput
+            [formControl]="searchInputControl"
+            [autocomplete]="'off'"
+            [placeholder]="'Search user'"
+          />
+        </mat-form-field>
+        <!-- Add user button -->
+        <button
+          fxFlex
+          mat-flat-button
+          style="position: fixed; margin-top: 4px"
+          [color]="'primary'"
+          (click)="__createProduct()"
+        >
+          <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
+          <span class="ml-2 mr-1">Search</span>
+        </button>
+      </div>
+    </div>
+    <!-- Products list -->
+    <div
+      class="flex flex-col flex-auto sm:mb-18 overflow-hidden sm:overflow-y-auto"
+    >
+      <ng-container *ngIf="recommendations$ | async as recommendations">
+        <ng-container *ngIf="recommendations.length > 0; else noRecommendation">
+          <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"
+            >
+              <div>선택</div>
+              <div>상부</div>
+              <div>
+                아이디
+                <hr style="margin: 7px 0px" />
+                닉네임
+                <hr style="margin: 7px 0px" />
+                상태
+              </div>
+              <div>등급</div>
+              <div class="hidden md:block">사용여부</div>
+              <div class="hidden sm:block">회원수</div>
+            </div>
+            <!-- Rows -->
+            <ng-container *ngIf="recommendations$ | async as recommendations">
+              <ng-container
+                *ngFor="
+                  let recommendation of recommendations;
+                  trackBy: __trackByFn
+                "
+              >
+                <div
+                  class="inventory-grid grid items-center gap-4 py-3 px-6 md:px-8 border-b"
+                >
+                  <div>
+                    <mat-checkbox></mat-checkbox>
+                  </div>
+                  <div>{{ recommendation.highRank }}</div>
+                  <div>
+                    {{ recommendation.signinId }}
+                    <hr style="margin: 7px 0px" />
+                    {{ recommendation.nickname }}
+                    <hr style="margin: 7px 0px" />
+                    {{ recommendation.state }}
+                  </div>
+                  <div>
+                    {{ recommendation.rank }}
+                  </div>
+                  <div>{{ recommendation.useOrNot }}</div>
+                  <div class="hidden sm:block">
+                    {{ recommendation.memberCount }}
+                  </div>
+                  <div class="hidden lg:block">
+                    {{ recommendation.siteAddress }}
+                  </div>
+                </div>
+              </ng-container>
+            </ng-container>
+          </div>
+          <div>
+            <button mat-flat-button class="bet-mat-small-8" [color]="'primary'">
+              추천인 삭제
+            </button>
+          </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 #noRecommendation>
+        <div
+          class="p-8 sm:p-16 border-t text-4xl font-semibold tracking-tight text-center"
+        >
+          There are no data!
+        </div>
+      </ng-template>
+    </div>
+  </div>
+</div>

src/app/modules/admin/member/recommendation/components/list.component.ts

@@ -31,9 +31,9 @@ import { FuseConfirmationService } from '@fuse/services/confirmation';
 
 import { User } from '../../user/models/user';
 
-import { Partner as PartnerRecommendation } from '../models/partner';
+import { Recommendation as Recommendation } from '../models/recommendation';
-import { PartnerPagination as PartnerRecommendationPagination } from '../models/partner-pagination';
+import { RecommendationPagination as RecommendationPagination } from '../models/recommendation-pagination';
-import { PartnerService as PartnerRecommendationService } from '../services/partner.service';
+import { RecommendationService as RecommendationService } from '../services/recommendation.service';
 
 import { Router } from '@angular/router';
 
@@ -41,23 +41,27 @@ import { MatDialog } from '@angular/material/dialog';
 import { RegistComposeComponent } from '../compose/regist-compose.component';
 @Component({
   selector: 'recommendation-list',
-  templateUrl: './recommendation-list.component.html',
+  templateUrl: './list.component.html',
   styles: [
     /* language=SCSS */
     `
       .inventory-grid {
-        grid-template-columns: 60px auto 40px;
+        /*                     CB   상부   아이디 등급 계좌정보 */
+        grid-template-columns: 20px 140px auto 100px 200px;
 
         @screen sm {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px;
+          /*                     CB   상부  아이디 등급 계좌정보  머니  사이트  사용여부*/
+          grid-template-columns: 20px 140px auto 100px 200px 140px 200px 140px;
         }
 
         @screen md {
-          grid-template-columns: 60px 60px 60px 60px 60px 60px auto 60px 60px;
+          /*                     CB   상부  아이디 등급 계좌정보  머니  사이트  사용여부  회원수 */
+          grid-template-columns: 20px 140px auto 100px 200px 140px 200px 140px 140px;
         }
 
         @screen lg {
-          grid-template-columns: 60px 70px 70px 70px 70px 100px 60px 60px auto 60px 60px 60px 60px;
+          /*                     CB   상부  아이디 등급 계좌정보  머니  사이트  사용여부 회원수 */
+          grid-template-columns: 20px 100px auto 100px 200px 140px 200px 140px 140px;
         }
       }
     `,
@@ -66,19 +70,19 @@ import { RegistComposeComponent } from '../compose/regist-compose.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: fuseAnimations,
 })
-export class RecommendationListComponent
+export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
-  implements OnInit, AfterViewInit, OnDestroy
-{
   @ViewChild(MatPaginator) private _paginator!: MatPaginator;
   @ViewChild(MatSort) private _sort!: MatSort;
 
-  partnerRecommendations$!: Observable<PartnerRecommendation[] | undefined>;
+  recommendations$!: Observable<Recommendation[] | undefined>;
   users$!: Observable<User[] | undefined>;
 
+  __isSearchOpened1 = false;
+  __isSearchOpened2 = false;
   isLoading = false;
   searchInputControl = new FormControl();
-  selectedPartnerRecommendation?: PartnerRecommendation;
+  selectedRecommendation?: Recommendation;
-  pagination?: PartnerRecommendationPagination;
+  pagination?: RecommendationPagination;
 
   private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -89,7 +93,7 @@ export class RecommendationListComponent
     private _changeDetectorRef: ChangeDetectorRef,
     private _fuseConfirmationService: FuseConfirmationService,
     private _formBuilder: FormBuilder,
-    private _partnerRecommendationService: PartnerRecommendationService,
+    private _recommendationService: RecommendationService,
     private router: Router,
     private _matDialog: MatDialog
   ) {}
@@ -103,9 +107,9 @@ export class RecommendationListComponent
    */
   ngOnInit(): void {
     // Get the pagination
-    this._partnerRecommendationService.pagination$
+    this._recommendationService.pagination$
       .pipe(takeUntil(this._unsubscribeAll))
-      .subscribe((pagination: PartnerRecommendationPagination | undefined) => {
+      .subscribe((pagination: RecommendationPagination | undefined) => {
         // Update the pagination
         this.pagination = pagination;
 
@@ -114,7 +118,7 @@ export class RecommendationListComponent
       });
 
     // Get the products
-    this.partnerRecommendations$ = this._partnerRecommendationService.partners$;
+    this.recommendations$ = this._recommendationService.recommendations$;
   }
 
   /**
@@ -132,7 +136,7 @@ export class RecommendationListComponent
       // Mark for check
       this._changeDetectorRef.markForCheck();
 
-      // If the partnerRecommendation changes the sort order...
+      // If the recommendation changes the sort order...
       this._sort.sortChange
         .pipe(takeUntil(this._unsubscribeAll))
         .subscribe(() => {
@@ -145,7 +149,7 @@ export class RecommendationListComponent
         .pipe(
           switchMap(() => {
             this.isLoading = true;
-            return this._partnerRecommendationService.getPartners(
+            return this._recommendationService.getRecommendations(
               this._paginator.pageIndex,
               this._paginator.pageSize,
               this._sort.active,
@@ -193,6 +197,17 @@ export class RecommendationListComponent
    */
   __toggleDetails(productId: string): void {}
 
+  /**
+   * toggle the search
+   * Used in 'bar'
+   */
+  __onClickSearch1(): void {
+    this.__isSearchOpened1 = !this.__isSearchOpened1;
+  }
+  __onClickSearch2(): void {
+    this.__isSearchOpened2 = !this.__isSearchOpened2;
+  }
+
   /**
    * Track by function for ngFor loops
    *

src/app/modules/admin/member/recommendation/compose/index.ts

@@ -0,0 +1,3 @@
+import { RegistComposeComponent } from './regist-compose.component';
+
+export const COMPOSE = [RegistComposeComponent];

src/app/modules/admin/member/recommendation/compose/regist-compose.component.html

@@ -0,0 +1,111 @@
+<div class="flex flex-col max-w-240 md:min-w-160 max-h-screen -m-6">
+  <!-- Header -->
+  <div
+    class="flex flex-0 items-center justify-between h-16 pr-3 sm:pr-5 pl-6 sm:pl-8 bg-primary text-on-primary"
+  >
+    <div class="text-lg font-medium">대본사 생성</div>
+    <button mat-icon-button (click)="saveAndClose()" [tabIndex]="-1">
+      <mat-icon
+        class="text-current"
+        [svgIcon]="'heroicons_outline:x'"
+      ></mat-icon>
+    </button>
+  </div>
+
+  <!-- Compose form -->
+  <form
+    class="flex flex-col flex-auto p-6 sm:p-8 overflow-y-auto"
+    [formGroup]="composeForm"
+  >
+    <!-- To -->
+    <mat-form-field>
+      <mat-label>파트너아이디</mat-label>
+      <input matInput [formControlName]="'partnerId'" />
+    </mat-form-field>
+
+    <!-- Cc -->
+    <mat-form-field>
+      <mat-label>사이트명</mat-label>
+      <input matInput [formControlName]="'siteName'" />
+    </mat-form-field>
+
+    <!-- Bcc -->
+    <mat-form-field>
+      <mat-label>회원 아이디</mat-label>
+      <input matInput [formControlName]="'signinId'" />
+    </mat-form-field>
+
+    <!-- Subject -->
+    <mat-form-field>
+      <mat-label>비밀번호</mat-label>
+      <input matInput [formControlName]="'password'" />
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>환전 비밀번호</mat-label>
+      <input matInput [formControlName]="'exchangePw'" />
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>닉네임</mat-label>
+      <input matInput [formControlName]="'nickname'" />
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>정산종류</mat-label>
+      <input matInput [formControlName]="'calculateType'" />
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>휴대폰번호</mat-label>
+      <input matInput [formControlName]="'phoneNumber'" />
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>은행명</mat-label>
+      <input matInput [formControlName]="'bankName'" />
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>계좌번호</mat-label>
+      <input matInput [formControlName]="'accountNumber'" />
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>예금주</mat-label>
+      <input matInput [formControlName]="'accountHolder'" />
+    </mat-form-field>
+
+    <!-- Body -->
+    <!-- <quill-editor
+      class="mt-2"
+      [formControlName]="'body'"
+      [modules]="quillModules"
+    ></quill-editor> -->
+
+    <!-- Actions -->
+    <div
+      class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 sm:mt-6"
+    >
+      <div class="flex items-center mt-4 sm:mt-0">
+        <!-- Discard -->
+        <button class="ml-auto sm:ml-0" mat-stroked-button (click)="discard()">
+          Discard
+        </button>
+        <!-- Save as draft -->
+        <button class="sm:mx-3" mat-stroked-button (click)="saveAsDraft()">
+          <span>Save as draft</span>
+        </button>
+        <!-- Send -->
+        <button
+          class="order-first sm:order-last"
+          mat-flat-button
+          [color]="'primary'"
+          (click)="send()"
+        >
+          Send
+        </button>
+      </div>
+    </div>
+  </form>
+</div>

src/app/modules/admin/member/recommendation/compose/regist-compose.component.ts

@@ -0,0 +1,100 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-regist-compose',
+  templateUrl: './regist-compose.component.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class RegistComposeComponent implements OnInit {
+  composeForm!: FormGroup;
+  copyFields: { cc: boolean; bcc: boolean } = {
+    cc: false,
+    bcc: false,
+  };
+  // quillModules: any = {
+  //   toolbar: [
+  //     ['bold', 'italic', 'underline'],
+  //     [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }],
+  //     ['clean'],
+  //   ],
+  // };
+
+  /**
+   * Constructor
+   */
+  constructor(
+    public matDialogRef: MatDialogRef<RegistComposeComponent>,
+    private _formBuilder: FormBuilder
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Lifecycle hooks
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * On init
+   */
+  ngOnInit(): void {
+    // Create the form
+    this.composeForm = this._formBuilder.group({
+      partnerId: [{ value: 'kgon4', disabled: true }],
+      siteName: [''],
+      signinId: [''],
+      password: [''],
+      exchangePw: [''],
+      nickname: [''],
+      calculateType: [''],
+      phoneNumber: [''],
+      bankName: [''],
+      accountNumber: [''],
+      accountHolder: [''],
+    });
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Show the copy field with the given field name
+   *
+   * @param name
+   */
+  showCopyField(name: string): void {
+    // Return if the name is not one of the available names
+    if (name !== 'cc' && name !== 'bcc') {
+      return;
+    }
+
+    // Show the field
+    this.copyFields[name] = true;
+  }
+
+  /**
+   * Save and close
+   */
+  saveAndClose(): void {
+    // Save the message as a draft
+    this.saveAsDraft();
+
+    // Close the dialog
+    this.matDialogRef.close();
+  }
+
+  /**
+   * Discard the message
+   */
+  discard(): void {}
+
+  /**
+   * Save the message as a draft
+   */
+  saveAsDraft(): void {}
+
+  /**
+   * Send the message
+   */
+  send(): void {}
+}

src/app/modules/admin/member/recommendation/models/recommendation-pagination.ts

@@ -0,0 +1,8 @@
+export interface RecommendationPagination {
+  length: number;
+  size: number;
+  page: number;
+  lastPage: number;
+  startIndex: number;
+  endIndex: number;
+}

src/app/modules/admin/member/recommendation/models/recommendation.ts

@@ -0,0 +1,16 @@
+import { NumberValueAccessor } from '@angular/forms';
+
+export interface Recommendation {
+  id: string;
+  signinId?: string;
+  nickname?: string;
+  rank?: string;
+  highRank?: string;
+  accountHolder?: string;
+  holdingMoney?: number;
+  ownComp?: number;
+  state?: string;
+  siteAddress?: string;
+  useOrNot?: string;
+  memberCount?: number;
+}

src/app/modules/admin/member/recommendation/recommendation.module.ts

@@ -0,0 +1,51 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatRippleModule } from '@angular/material/core';
+import { MatSortModule } from '@angular/material/sort';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+
+import { TranslocoModule } from '@ngneat/transloco';
+
+import { SharedModule } from 'app/shared/shared.module';
+
+import { COMPONENTS } from './components';
+import { COMPOSE } from './compose';
+
+import { recommendationRoutes } from './recommendation.routing';
+
+@NgModule({
+  declarations: [COMPONENTS, COMPOSE],
+  imports: [
+    TranslocoModule,
+    SharedModule,
+    RouterModule.forChild(recommendationRoutes),
+
+    MatButtonModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatRippleModule,
+    MatSortModule,
+    MatSelectModule,
+    MatTooltipModule,
+    MatGridListModule,
+    MatSlideToggleModule,
+    MatRadioModule,
+    MatCheckboxModule,
+  ],
+})
+export class RecommendationModule {}

src/app/modules/admin/member/recommendation/recommendation.routing.ts

@@ -0,0 +1,20 @@
+import { Route } from '@angular/router';
+
+import { ListComponent } from './components/list.component';
+
+import { RecommendationsResolver } from './resolvers/recommendation.resolver';
+
+export const recommendationRoutes: Route[] = [
+  // {
+  //   path: '',
+  //   pathMatch: 'full',
+  //   redirectTo: 'all',
+  // },
+  {
+    path: '',
+    component: ListComponent,
+    resolve: {
+      Recommendations: RecommendationsResolver,
+    },
+  },
+];

src/app/modules/admin/member/recommendation/resolvers/recommendation.resolver.ts

@@ -0,0 +1,89 @@
+import { Injectable } from '@angular/core';
+import {
+  ActivatedRouteSnapshot,
+  Resolve,
+  Router,
+  RouterStateSnapshot,
+} from '@angular/router';
+import { catchError, Observable, throwError } from 'rxjs';
+
+import { Recommendation } from '../models/recommendation';
+import { RecommendationPagination } from '../models/recommendation-pagination';
+import { RecommendationService } from '../services/recommendation.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class RecommendationResolver implements Resolve<any> {
+  /**
+   * Constructor
+   */
+  constructor(
+    private _recommendationServiceService: RecommendationService,
+    private _router: Router
+  ) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Resolver
+   *
+   * @param route
+   * @param state
+   */
+  resolve(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<Recommendation | undefined> {
+    return this._recommendationServiceService
+      .getRecommendationById(route.paramMap.get('id'))
+      .pipe(
+        // Error here means the requested product is not available
+        catchError((error) => {
+          // Log the error
+          console.error(error);
+
+          // Get the parent url
+          const parentUrl = state.url.split('/').slice(0, -1).join('/');
+
+          // Navigate to there
+          this._router.navigateByUrl(parentUrl);
+
+          // Throw an error
+          return throwError(error);
+        })
+      );
+  }
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class RecommendationsResolver implements Resolve<any> {
+  /**
+   * Constructor
+   */
+  constructor(private _recommendationService: RecommendationService) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Resolver
+   *
+   * @param route
+   * @param state
+   */
+  resolve(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<{
+    pagination: RecommendationPagination;
+    recommendations: Recommendation[];
+  }> {
+    return this._recommendationService.getRecommendations();
+  }
+}

src/app/modules/admin/member/recommendation/services/recommendation.service.ts

@@ -0,0 +1,161 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import {
+  BehaviorSubject,
+  filter,
+  map,
+  Observable,
+  of,
+  switchMap,
+  take,
+  tap,
+  throwError,
+} from 'rxjs';
+
+import { Recommendation } from '../models/recommendation';
+import { RecommendationPagination } from '../models/recommendation-pagination';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class RecommendationService {
+  // Private
+  private __pagination = new BehaviorSubject<
+    RecommendationPagination | undefined
+  >(undefined);
+  private __recommendation = new BehaviorSubject<Recommendation | undefined>(
+    undefined
+  );
+  private __recommendations = new BehaviorSubject<Recommendation[] | undefined>(
+    undefined
+  );
+
+  /**
+   * Constructor
+   */
+  constructor(private _httpClient: HttpClient) {}
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Accessors
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Getter for pagination
+   */
+  get pagination$(): Observable<RecommendationPagination | undefined> {
+    return this.__pagination.asObservable();
+  }
+
+  /**
+   * Getter for recommendation
+   */
+  get recommendation$(): Observable<Recommendation | undefined> {
+    return this.__recommendation.asObservable();
+  }
+
+  /**
+   * Getter for recommendations
+   */
+  get recommendations$(): Observable<Recommendation[] | undefined> {
+    return this.__recommendations.asObservable();
+  }
+
+  // -----------------------------------------------------------------------------------------------------
+  // @ Public methods
+  // -----------------------------------------------------------------------------------------------------
+
+  /**
+   * Get recommendations
+   *
+   *
+   * @param page
+   * @param size
+   * @param sort
+   * @param order
+   * @param search
+   */
+  getRecommendations(
+    page: number = 0,
+    size: number = 10,
+    sort: string = 'name',
+    order: 'asc' | 'desc' | '' = 'asc',
+    search: string = ''
+  ): Observable<{
+    pagination: RecommendationPagination;
+    recommendations: Recommendation[];
+  }> {
+    return this._httpClient
+      .get<{
+        pagination: RecommendationPagination;
+        recommendations: Recommendation[];
+      }>('api/apps/member/recommendation/recommendations', {
+        params: {
+          page: '' + page,
+          size: '' + size,
+          sort,
+          order,
+          search,
+        },
+      })
+      .pipe(
+        tap((response) => {
+          this.__pagination.next(response.pagination);
+          this.__recommendations.next(response.recommendations);
+        })
+      );
+  }
+
+  /**
+   * Get product by id
+   */
+  getRecommendationById(id: string | null): Observable<Recommendation> {
+    return this.__recommendations.pipe(
+      take(1),
+      map((recommendations) => {
+        // Find the product
+        const recommendation =
+          recommendations?.find((item) => item.id === id) || undefined;
+
+        // Update the product
+        this.__recommendation.next(recommendation);
+
+        // Return the product
+        return recommendation;
+      }),
+      switchMap((product) => {
+        if (!product) {
+          return throwError('Could not found product with id of ' + id + '!');
+        }
+
+        return of(product);
+      })
+    );
+  }
+
+  /**
+   * Create product
+   */
+  createRecommendation(): Observable<Recommendation> {
+    return this.recommendations$.pipe(
+      take(1),
+      switchMap((recommendations) =>
+        this._httpClient
+          .post<Recommendation>('api/apps/member/recommendation/product', {})
+          .pipe(
+            map((newRecommendation) => {
+              // Update the recommendations with the new product
+              if (!!recommendations) {
+                this.__recommendations.next([
+                  newRecommendation,
+                  ...recommendations,
+                ]);
+              }
+
+              // Return the new product
+              return newRecommendation;
+            })
+          )
+      )
+    );
+  }
+}

src/assets/i18n/en.json

@@ -7,7 +7,7 @@
   "Unconnected": "Unconnected",
   "Project": "Project",
   "Partner": "Partner",
-  "Partner Recommendation": "Partner Recommendation",
+  "Recommendation": "Recommendation",
   "Coupon": "Coupon",
   "Coupon Money Log": "Coupon Money Log",
   "Coupon Log": "Coupon Log",

src/assets/i18n/ko.json

@@ -8,7 +8,7 @@
   "Project": "프로젝트",
   "partner-management": "파트너관리",
   "Partner": "파트너",
-  "Partner Recommendation": "추천코드등록",
+  "Recommendation": "추천코드등록",
   "Coupon": "쿠폰발행리스트",
   "Coupon Money Log": "쿠폰발행머니로그",
   "Coupon Log": "쿠폰발행 로그",