diff --git a/projects/ucap-webmessenger-api-message/src/lib/apis/detail.ts b/projects/ucap-webmessenger-api-message/src/lib/apis/detail.ts
index fdc1b655..4bc7fe4c 100644
--- a/projects/ucap-webmessenger-api-message/src/lib/apis/detail.ts
+++ b/projects/ucap-webmessenger-api-message/src/lib/apis/detail.ts
@@ -29,9 +29,9 @@ export interface DetailResponse extends MessageAPIResponse {
     type: MessageType;
     sendUserSeq: number;
     sendUserName: string;
-    reservationTime: Date | null;
+    reservationTime: string | null;
     sendYn: boolean;
-    regDate: Date;
+    regDate: string;
     attachmentYn: boolean;
     smsYn: boolean;
     fileAllow: string;
@@ -41,7 +41,7 @@ export interface DetailResponse extends MessageAPIResponse {
     userSeq: number;
     userName: string;
     cancelYn: boolean;
-    readDate: Date;
+    readDate: string;
     readYn: boolean;
   }[];
 }
@@ -92,7 +92,7 @@ export interface ReadCheckResponse extends MessageAPIResponse {
     userSeq: number;
     userName: string;
     cancelYn: boolean;
-    readDate: Date;
+    readDate: string;
     readYn: boolean;
   }[];
 }
diff --git a/projects/ucap-webmessenger-api-message/src/lib/apis/retrieve.ts b/projects/ucap-webmessenger-api-message/src/lib/apis/retrieve.ts
index f7bffeee..9b8df2f9 100644
--- a/projects/ucap-webmessenger-api-message/src/lib/apis/retrieve.ts
+++ b/projects/ucap-webmessenger-api-message/src/lib/apis/retrieve.ts
@@ -7,6 +7,8 @@ import {
 import { DeviceType } from '@ucap-webmessenger/core';
 import { MessageType } from '../types/message.type';
 import { MessageList } from '../models/message-list';
+import { CategoryType } from '../types/category.type';
+import { ContentType } from '../types/content.type';
 
 export interface RetrieveRequest extends APIRequest {
   userSeq: number;
@@ -23,6 +25,8 @@ export interface RetrieveSearchRequest extends RetrieveRequest {
 }
 
 export interface RetrieveResponse extends MessageAPIResponse {
+  pageCount: number;
+  pageSize: number;
   totalCount: number;
 
   messageList: MessageList[];
@@ -40,33 +44,104 @@ export const encodeRetrieveSearch: APIJsonEncoder<RetrieveResponse> = (
 };
 
 export const decodeRetrieveSend: APIDecoder<RetrieveResponse> = (res: any) => {
+  const messageList: MessageList[] = [];
+  if (!!res.msgList && res.msgList.length > 0) {
+    for (const msgList of res.msgList) {
+      messageList.push({
+        ...msgList,
+        userCount:
+          !msgList.userCount || msgList.userCount === null
+            ? 0
+            : msgList.userCount,
+        userReadCount:
+          !msgList.userReadCount || msgList.userReadCount === null
+            ? 0
+            : msgList.userReadCount,
+        titleYn: msgList.titleYn === 'Y' ? true : false,
+        attachmentYn: msgList.attachmentYn === 'Y' ? true : false
+      } as MessageList);
+    }
+  }
+
   return {
     responseCode: res.responseCode,
     responseMsg: res.responseMsg,
+
+    pageCount: res.pageCount,
+    pageSize: res.pageSize,
     totalCount: res.totalCount,
-    messageList: []
+
+    messageList
   } as RetrieveResponse;
 };
 
 export const decodeRetrieveReceive: APIDecoder<RetrieveResponse> = (
   res: any
 ) => {
+  const messageList: MessageList[] = [];
+  if (!!res.msgList && res.msgList.length > 0) {
+    for (const msgList of res.msgList) {
+      messageList.push({
+        ...msgList,
+        userCount:
+          !msgList.userCount || msgList.userCount === null
+            ? 0
+            : msgList.userCount,
+        userReadCount:
+          !msgList.userReadCount || msgList.userReadCount === null
+            ? 0
+            : msgList.userReadCount,
+        titleYn: msgList.titleYn === 'Y' ? true : false,
+        attachmentYn: msgList.attachmentYn === 'Y' ? true : false,
+        readYn: msgList.readYn === 'Y' ? true : false
+      } as MessageList);
+    }
+  }
+
   return {
     responseCode: res.responseCode,
     responseMsg: res.responseMsg,
+
+    pageCount: res.pageCount,
+    pageSize: res.pageSize,
     totalCount: res.totalCount,
-    messageList: []
+
+    messageList
   } as RetrieveResponse;
 };
 
 export const decodeRetrieveReservation: APIDecoder<RetrieveResponse> = (
   res: any
 ) => {
+  const messageList: MessageList[] = [];
+  if (!!res.msgList && res.msgList.length > 0) {
+    for (const msgList of res.msgList) {
+      messageList.push({
+        ...msgList,
+
+        userCount:
+          !msgList.userCount || msgList.userCount === null
+            ? 0
+            : msgList.userCount,
+        userReadCount:
+          !msgList.userReadCount || msgList.userReadCount === null
+            ? 0
+            : msgList.userReadCount,
+        titleYn: msgList.titleYn === 'Y' ? true : false,
+        attachmentYn: msgList.attachmentYn === 'Y' ? true : false
+      } as MessageList);
+    }
+  }
+
   return {
     responseCode: res.responseCode,
     responseMsg: res.responseMsg,
+
+    pageCount: res.pageCount,
+    pageSize: res.pageSize,
     totalCount: res.totalCount,
-    messageList: []
+
+    messageList
   } as RetrieveResponse;
 };
 
diff --git a/projects/ucap-webmessenger-api-message/src/lib/models/message-list.ts b/projects/ucap-webmessenger-api-message/src/lib/models/message-list.ts
index 5e9836f3..af830491 100644
--- a/projects/ucap-webmessenger-api-message/src/lib/models/message-list.ts
+++ b/projects/ucap-webmessenger-api-message/src/lib/models/message-list.ts
@@ -22,9 +22,9 @@ export interface MessageList {
   /** 읽은 사람 수 */
   userReadCount?: number;
   /** 예약시간 :: DATE 형식은 "yyyy-MM-dd HH:mm:ss"  (단 초는 00고정. 예약메일은 분단위까지만) */
-  reservationTime?: Date;
+  reservationTime?: string;
   /** 발신시간 */
-  regDate: Date;
+  regDate: string;
   /** CONTENT 타입 */
   resType: ContentType;
   /** 첨부파일 존재여부 */
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.html
index 155ffc31..3ab24c19 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.html
@@ -1,3 +1,109 @@
 <div class="message-box container">
-  <p>message-box works!</p>
+  <div>
+    search Area.
+  </div>
+  <div class="container">
+    <mat-tab-group
+      mat-stretch-tabs
+      animationDuration="0ms"
+      (selectedIndexChange)="onSelectedIndexChange($event)"
+    >
+      <mat-tab>
+        <ng-template mat-tab-label>
+          수신
+        </ng-template>
+
+        <div *ngFor="let message of messageList">
+          <dl>
+            <dt>
+              <mat-icon
+                *ngIf="
+                  !!message.resType && message.resType === ContentType.Image
+                "
+                >image</mat-icon
+              >
+              <mat-icon
+                *ngIf="
+                  !!message.resType &&
+                  message.resType === ContentType.AttachFile
+                "
+                >attach_file</mat-icon
+              >
+              <ul>
+                <li>{{ message.userName }}</li>
+                <li>{{ message.title }}</li>
+              </ul>
+            </dt>
+            <dd>
+              {{ message.regDate | dateToStringFormat: 'MM:DD' }}
+            </dd>
+          </dl>
+        </div>
+      </mat-tab>
+      <mat-tab>
+        <ng-template mat-tab-label>
+          발신
+        </ng-template>
+
+        <div *ngFor="let message of messageList">
+          <dl>
+            <dt>
+              <mat-icon
+                *ngIf="
+                  !!message.resType && message.resType === ContentType.Image
+                "
+                >image</mat-icon
+              >
+              <mat-icon
+                *ngIf="
+                  !!message.resType &&
+                  message.resType === ContentType.AttachFile
+                "
+                >attach_file</mat-icon
+              >
+              <ul>
+                <li>{{ message.userName }}</li>
+                <li>{{ message.title }}</li>
+              </ul>
+            </dt>
+            <dd>
+              {{ message.regDate | dateToStringFormat: 'MM:DD' }}
+            </dd>
+          </dl>
+        </div>
+      </mat-tab>
+      <mat-tab>
+        <ng-template mat-tab-label>
+          예약
+        </ng-template>
+
+        <div *ngFor="let message of messageList">
+          <dl>
+            <dt>
+              <mat-icon
+                *ngIf="
+                  !!message.resType && message.resType === ContentType.Image
+                "
+                >image</mat-icon
+              >
+              <mat-icon
+                *ngIf="
+                  !!message.resType &&
+                  message.resType === ContentType.AttachFile
+                "
+                >attach_file</mat-icon
+              >
+              <ul>
+                <li>{{ message.userName }}</li>
+                <li>{{ message.title }}</li>
+              </ul>
+            </dt>
+            <dd>
+              {{ message.regDate | dateToStringFormat: 'MM:DD' }}
+            </dd>
+          </dl>
+        </div>
+      </mat-tab>
+    </mat-tab-group>
+  </div>
 </div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.ts
index d5735021..66ecec74 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.ts
@@ -10,35 +10,23 @@ import { Store, select } from '@ngrx/store';
 import { tap, map, catchError } from 'rxjs/operators';
 
 import * as AppStore from '@app/store';
-import * as SyncStore from '@app/store/messenger/sync';
-import * as RoomStore from '@app/store/messenger/room';
 
 import { UserInfo } from '@ucap-webmessenger/protocol-room';
 import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
 import { SessionStorageService } from '@ucap-webmessenger/web-storage';
 import { KEY_VER_INFO } from '@app/types/ver-info.type';
 import { DialogService } from '@ucap-webmessenger/ui';
-import {
-  SelectGroupDialogComponent,
-  SelectGroupDialogResult,
-  SelectGroupDialogData
-} from '../../dialogs/group/select-group.dialog.component';
-import { GroupDetailData } from '@ucap-webmessenger/protocol-sync';
-import {
-  CreateChatDialogComponent,
-  CreateChatDialogResult,
-  CreateChatDialogData
-} from '../../dialogs/chat/create-chat.dialog.component';
-import { UserSelectDialogType } from '@app/types';
 import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
 import { KEY_LOGIN_RES_INFO } from '@app/types/login-res-info.type';
 import {
   MessageApiService,
   MessageType,
-  RetrieveRequest
+  RetrieveRequest,
+  MessageList
 } from '@ucap-webmessenger/api-message';
 import { DeviceType } from '@ucap-webmessenger/core';
-import { StatusCode, MessageStatusCode } from '@ucap-webmessenger/api';
+import { MessageStatusCode } from '@ucap-webmessenger/api';
+import { ContentType } from '@ucap-webmessenger/api-message';
 
 @Component({
   selector: 'app-layout-chat-right-drawer-message-box',
@@ -52,10 +40,23 @@ export class MessageBoxComponent implements OnInit, OnDestroy {
   loginRes: LoginResponse;
   sessionVerinfo: VersionInfo2Response;
 
-  messageSendListSubscription: Subscription;
+  messageList: MessageList[] = [];
 
-  pageSize = 100; // default
-  currentPage = 0; // start index is 0.
+  messageRecieveListSubscription: Subscription;
+  messageSendListSubscription: Subscription;
+  messageReservationListSubscription: Subscription;
+  messageSearchListSubscription: Subscription;
+
+  defaultPageSize = 100; // default
+  recieveCurrentPage = 0; // start index is 0.
+  sendCurrentPage = 0; // start index is 0.
+  reservationCurrentPage = 0; // start index is 0.
+  searchCurrentPage = 0; // start index is 0.
+
+  currentTotalCount = 0;
+  currentPage = 0;
+
+  ContentType = ContentType;
 
   constructor(
     private store: Store<any>,
@@ -81,33 +82,137 @@ export class MessageBoxComponent implements OnInit, OnDestroy {
       )
       .subscribe();
 
-    this.messageSendListSubscription = this.messageApiService
-      .retrieveSendMessage({
-        userSeq: this.loginRes.userSeq,
-        deviceType: DeviceType.PC,
-        tokenKey: this.loginRes.tokenString,
-        type: MessageType.Send,
-        pageSize: this.pageSize,
-        pageCount: this.currentPage
-      } as RetrieveRequest)
-      .pipe(
-        map(res => {
-          console.log(res);
-          if (res.responseCode === MessageStatusCode.Success) {
-          } else {
-          }
-        }),
-        catchError(error => of(console.log(error)))
-      )
-      .subscribe();
+    // 초기 검색은 수신함.
+    this.getRetrieveMessage(MessageType.Receive, this.recieveCurrentPage);
   }
 
   ngOnDestroy(): void {
     if (!!this.userInfoListSubscription) {
       this.userInfoListSubscription.unsubscribe();
     }
+    if (!!this.messageRecieveListSubscription) {
+      this.messageRecieveListSubscription.unsubscribe();
+    }
     if (!!this.messageSendListSubscription) {
       this.messageSendListSubscription.unsubscribe();
     }
+    if (!!this.messageReservationListSubscription) {
+      this.messageReservationListSubscription.unsubscribe();
+    }
+    if (!!this.messageSearchListSubscription) {
+      this.messageSearchListSubscription.unsubscribe();
+    }
+  }
+
+  onSelectedIndexChange(value: number) {
+    switch (value) {
+      case 0:
+        {
+          // Recieve
+          this.getRetrieveMessage(MessageType.Receive, this.recieveCurrentPage);
+        }
+        break;
+      case 1:
+        {
+          // Send
+          this.getRetrieveMessage(MessageType.Send, this.sendCurrentPage);
+        }
+        break;
+      case 2:
+        {
+          // Reservation
+          this.getRetrieveMessage(
+            MessageType.Reservation,
+            this.reservationCurrentPage
+          );
+        }
+        break;
+    }
+  }
+
+  getRetrieveMessage(type: MessageType, trgtPageIndex: number) {
+    switch (type) {
+      case MessageType.Receive:
+        {
+          this.messageSendListSubscription = this.messageApiService
+            .retrieveReceiveMessage({
+              userSeq: this.loginRes.userSeq,
+              deviceType: DeviceType.PC,
+              tokenKey: this.loginRes.tokenString,
+              type: MessageType.Receive,
+              pageSize: this.defaultPageSize,
+              pageCount: this.recieveCurrentPage
+            } as RetrieveRequest)
+            .pipe(
+              map(res => {
+                console.log(res);
+                if (res.responseCode === MessageStatusCode.Success) {
+                  this.currentTotalCount = res.totalCount;
+                  this.currentPage = res.pageCount;
+                  this.recieveCurrentPage = res.pageCount;
+                  this.messageList = res.messageList;
+                } else {
+                }
+              }),
+              catchError(error => of(console.log(error)))
+            )
+            .subscribe();
+        }
+        break;
+      case MessageType.Send:
+        {
+          this.messageSendListSubscription = this.messageApiService
+            .retrieveSendMessage({
+              userSeq: this.loginRes.userSeq,
+              deviceType: DeviceType.PC,
+              tokenKey: this.loginRes.tokenString,
+              type: MessageType.Send,
+              pageSize: this.defaultPageSize,
+              pageCount: this.sendCurrentPage
+            } as RetrieveRequest)
+            .pipe(
+              map(res => {
+                console.log(res);
+                if (res.responseCode === MessageStatusCode.Success) {
+                  this.currentTotalCount = res.totalCount;
+                  this.currentPage = res.pageCount;
+                  this.sendCurrentPage = res.pageCount;
+                  this.messageList = res.messageList;
+                } else {
+                }
+              }),
+              catchError(error => of(console.log(error)))
+            )
+            .subscribe();
+        }
+        break;
+      case MessageType.Reservation:
+        {
+          this.messageSendListSubscription = this.messageApiService
+            .retrieveReservationMessage({
+              userSeq: this.loginRes.userSeq,
+              deviceType: DeviceType.PC,
+              tokenKey: this.loginRes.tokenString,
+              type: MessageType.Reservation,
+              pageSize: this.defaultPageSize,
+              pageCount: this.reservationCurrentPage
+            } as RetrieveRequest)
+            .pipe(
+              map(res => {
+                console.log(res);
+                if (res.responseCode === MessageStatusCode.Success) {
+                  this.currentTotalCount = res.totalCount;
+                  this.currentPage = res.pageCount;
+                  this.reservationCurrentPage = res.pageCount;
+                  this.messageList = res.messageList;
+                } else {
+                }
+              }),
+              catchError(error => of(console.log(error)))
+            )
+            .subscribe();
+        }
+        break;
+    }
   }
 }