diff --git a/.prettierrc b/.prettierrc
index 65261d68..57a53a3e 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,5 @@
 {
-  "trailingComma": "es5",
+  "trailingComma": "none",
   "tabWidth": 2,
   "singleQuote": true
 }
diff --git a/electron-projects/ucap-webmessenger-electron/resources/image/ico_64_64.png b/electron-projects/ucap-webmessenger-electron/resources/image/ico_64_64.png
index adbc1dd4..382110d2 100644
Binary files a/electron-projects/ucap-webmessenger-electron/resources/image/ico_64_64.png and b/electron-projects/ucap-webmessenger-electron/resources/image/ico_64_64.png differ
diff --git a/electron-projects/ucap-webmessenger-electron/resources/image/ico_64x64.png b/electron-projects/ucap-webmessenger-electron/resources/image/ico_64x64.png
deleted file mode 100644
index adbc1dd4..00000000
Binary files a/electron-projects/ucap-webmessenger-electron/resources/image/ico_64x64.png and /dev/null differ
diff --git a/projects/ucap-webmessenger-api-message/src/lib/apis/retrieve-send.ts b/projects/ucap-webmessenger-api-message/src/lib/apis/retrieve-send.ts
new file mode 100644
index 00000000..7fec1638
--- /dev/null
+++ b/projects/ucap-webmessenger-api-message/src/lib/apis/retrieve-send.ts
@@ -0,0 +1,49 @@
+import {
+  APIRequest,
+  APIResponse,
+  APIEncoder,
+  APIDecoder,
+  ParameterUtil
+} from '@ucap-webmessenger/api';
+import { DeviceType } from '@ucap-webmessenger/core';
+import { MessageType } from '../types/message.type';
+import { MessageList } from '../models/message-list';
+
+export interface RetrieveRequest extends APIRequest {
+  userSeq: number;
+  deviceType: DeviceType;
+  tokenKey: string;
+  type: MessageType;
+  pageSize: number;
+  pageCount: number;
+}
+
+export interface RetrieveSendResponse extends APIResponse {
+  responseCode: string;
+  responseMsg: string;
+  totalCount: number;
+
+  messageList: MessageList[];
+}
+
+const RetrieveSendEncodeMap = {};
+
+export const encodeRetrieve: APIEncoder<RetrieveRequest> = (
+  req: RetrieveRequest
+) => {
+  return ParameterUtil.encode(RetrieveSendEncodeMap, req);
+};
+
+export const decodeRetrieveSend: APIDecoder<RetrieveSendResponse> = (
+  res: any
+) => {
+  return {
+    statusCode: res.StatusCode,
+    errorMessage: res.ErrorMessage,
+
+    responseCode: res.responseCode,
+    responseMsg: res.responseMsg,
+    totalCount: res.totalCount,
+    messageList: []
+  } as RetrieveSendResponse;
+};
diff --git a/projects/ucap-webmessenger-api-message/src/lib/apis/update-info.ts b/projects/ucap-webmessenger-api-message/src/lib/apis/update-info.ts
deleted file mode 100644
index 4a1cfea9..00000000
--- a/projects/ucap-webmessenger-api-message/src/lib/apis/update-info.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { DeviceType } from '@ucap-webmessenger/core';
-import {
-  APIRequest,
-  APIResponse,
-  APIEncoder,
-  APIDecoder,
-  ParameterUtil,
-} from '@ucap-webmessenger/api';
-
-export interface UpdateInfoRequest extends APIRequest {
-  deviceType: DeviceType;
-}
-
-export interface UpdateInfoResponse extends APIResponse {
-  appVersion?: string;
-  installUrl?: string;
-  launcherAppVersion?: string;
-  launcherInstallUrl?: string;
-}
-
-const updateInfoEncodeMap = {
-  deviceType: 'p_device_type',
-};
-
-export const encodeUpdateInfo: APIEncoder<UpdateInfoRequest> = (
-  req: UpdateInfoRequest
-) => {
-  return ParameterUtil.encode(updateInfoEncodeMap, req);
-};
-
-export const decodeUpdateInfo: APIDecoder<UpdateInfoResponse> = (res: any) => {
-  return {
-    statusCode: res.StatusCode,
-    errorMessage: res.ErrorMessage,
-    appVersion: res.AppVer,
-    installUrl: res.InstallURL,
-    launcherAppVersion: res.LauncherAppVer,
-    launcherInstallUrl: res.LauncherInstallURL,
-  } as UpdateInfoResponse;
-};
diff --git a/projects/ucap-webmessenger-api-message/src/lib/config/urls.ts b/projects/ucap-webmessenger-api-message/src/lib/config/urls.ts
index 36063b65..e01d9548 100644
--- a/projects/ucap-webmessenger-api-message/src/lib/config/urls.ts
+++ b/projects/ucap-webmessenger-api-message/src/lib/config/urls.ts
@@ -1,3 +1,47 @@
 export interface Urls {
-  versionInfo2: string;
+  /** 발신 메시지 list 조회 */
+  retrieveSendMessageList: string;
+  /** 수신 메시지 list 조회 */
+  retrieveRecvMessageList: string;
+  /** 예약 메시지 list 조회 */
+  retrieveReservationMessageList: string;
+  /** 메시지 검색 list 조회 */
+  retrieveSearchMessage: string;
+
+  /** 메시지 발송 */
+  sendNewMessage: string;
+
+  /** 메시지 상세 정보 조회 */
+  retrieveMessageDetail: string;
+  /** 메시지 읽음 */
+  readMessage: string;
+  /** 읽음 확인 */
+  retrieveReadCheck: string;
+  /** 발송 취소 */
+  cancelMessage: string;
+  /** 예약 메시지 발송 취소 */
+  cancelReservationMessage: string;
+  /** content Resource 파일 요청 */
+  retrieveResourceFile: string;
+
+  /** 메시지 삭제 */
+  deleteMessage: string;
+
+  /** My 메시지 등록 */
+  saveMyMessage: string;
+  /** My 메시지 조회 */
+  retrieveMyMessage: string;
+  /** My 메시지 삭제 */
+  deleteMyMessage: string;
+  /** My 메시지 수정 */
+  editMyMessage: string;
+
+  /** 예약 메시지 수정 - 썸네일 기능 완료된 경우 */
+  editReservationMessageEx: string;
+
+  /** 메시지 전달 - 메시지 복사 후, 발송 */
+  sendCopyMessage: string;
+
+  /** 읽지 않은 메시지 개수 조회 */
+  retrieveUnreadCount: string;
 }
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
new file mode 100644
index 00000000..d5b05ca0
--- /dev/null
+++ b/projects/ucap-webmessenger-api-message/src/lib/models/message-list.ts
@@ -0,0 +1,30 @@
+import { MessageType } from '../types/message.type';
+import { CategoryType } from '../types/category.type';
+import { ContentType } from '../types/content.type';
+
+export interface MessageList {
+  /** 메시지 ID */
+  msgId: number;
+  /** 메시지 카테고리 */
+  category: CategoryType;
+  /** 메시지 TITLE */
+  title: string;
+  /** 메시지 제목 입력 여부 */
+  titleYn: boolean;
+  /** 메시지 TYPE */
+  type: MessageType;
+  /** 수신자의 시퀀스 */
+  userSeq: number;
+  /** 수신자 */
+  userName: string;
+  /** 수신자 수 */
+  userCount: number;
+  /** 읽은 사람 수 */
+  userReadCount: number;
+  /** 발신시간 */
+  regDate: Date;
+  /** CONTENT 타입 */
+  resType: ContentType;
+  /** 첨부파일 존재여부 */
+  attachmentYn: boolean;
+}
diff --git a/projects/ucap-webmessenger-api-message/src/lib/services/message-api.service.ts b/projects/ucap-webmessenger-api-message/src/lib/services/message-api.service.ts
index 35f0dc6d..4771dfe8 100644
--- a/projects/ucap-webmessenger-api-message/src/lib/services/message-api.service.ts
+++ b/projects/ucap-webmessenger-api-message/src/lib/services/message-api.service.ts
@@ -4,26 +4,19 @@ import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import {
-  VersionInfo2Request,
-  VersionInfo2Response,
-  encodeVersionInfo2,
-  decodeVersionInfo2,
-} from '../apis/version-info2';
-import {
-  UpdateInfoRequest,
-  UpdateInfoResponse,
-  encodeUpdateInfo,
-  decodeUpdateInfo,
-} from '../apis/update-info';
-
 import { _MODULE_CONFIG } from '../config/token';
 import { ModuleConfig } from '../config/module-config';
 import { UrlConfig } from '@ucap-webmessenger/core';
 import { Urls } from '../config/urls';
+import {
+  RetrieveRequest,
+  RetrieveSendResponse,
+  encodeRetrieve,
+  decodeRetrieveSend
+} from '../apis/retrieve-send';
 
 @Injectable({
-  providedIn: 'root',
+  providedIn: 'root'
 })
 export class MessageApiService {
   readonly urls: Urls;
@@ -38,15 +31,17 @@ export class MessageApiService {
     );
   }
 
-  public updateInfo(req: UpdateInfoRequest): Observable<UpdateInfoResponse> {
+  public retrieveSendMessage(
+    req: RetrieveRequest
+  ): Observable<RetrieveSendResponse> {
     return this.httpClient
       .post<any>(
-        this.urls.versionInfo2,
+        this.urls.retrieveSendMessageList,
         {},
         {
-          params: encodeUpdateInfo(req),
+          params: encodeRetrieve(req)
         }
       )
-      .pipe(map(res => decodeUpdateInfo(res)));
+      .pipe(map(res => decodeRetrieveSend(res)));
   }
 }
diff --git a/projects/ucap-webmessenger-api-message/src/lib/types/category.type.ts b/projects/ucap-webmessenger-api-message/src/lib/types/category.type.ts
new file mode 100644
index 00000000..02ab9f7c
--- /dev/null
+++ b/projects/ucap-webmessenger-api-message/src/lib/types/category.type.ts
@@ -0,0 +1,6 @@
+export enum CategoryType {
+  /** 일반 */
+  General = 'G',
+  /** 공지 */
+  Notice = 'N'
+}
diff --git a/projects/ucap-webmessenger-api-message/src/lib/types/content.type.ts b/projects/ucap-webmessenger-api-message/src/lib/types/content.type.ts
new file mode 100644
index 00000000..0bcf417a
--- /dev/null
+++ b/projects/ucap-webmessenger-api-message/src/lib/types/content.type.ts
@@ -0,0 +1,8 @@
+export enum ContentType {
+  /** 텍스트 */
+  Text = 'T',
+  /** 이미지파일 */
+  Image = 'F',
+  /** 첨부파일 */
+  AttachFile = 'A'
+}
diff --git a/projects/ucap-webmessenger-api-message/src/lib/types/message.type.ts b/projects/ucap-webmessenger-api-message/src/lib/types/message.type.ts
new file mode 100644
index 00000000..89763903
--- /dev/null
+++ b/projects/ucap-webmessenger-api-message/src/lib/types/message.type.ts
@@ -0,0 +1,5 @@
+export enum MessageType {
+  Send = 'S',
+  Receive = 'R',
+  Reservation = 'B'
+}
diff --git a/projects/ucap-webmessenger-api-message/src/public-api.ts b/projects/ucap-webmessenger-api-message/src/public-api.ts
index 4be0924f..75b9cf44 100644
--- a/projects/ucap-webmessenger-api-message/src/public-api.ts
+++ b/projects/ucap-webmessenger-api-message/src/public-api.ts
@@ -1,11 +1,17 @@
 /*
  * Public API Surface of ucap-webmessenger-api-message
  */
-export * from './lib/apis/update-info';
+export * from './lib/apis/retrieve-send';
 
 export * from './lib/services/message-api.service';
 
 export * from './lib/ucap-message-api.module';
 
+export * from './lib/models/message-list';
+
+export * from './lib/types/category.type';
+export * from './lib/types/content.type';
+export * from './lib/types/message.type';
+
 export * from './lib/config/urls';
 export * from './lib/config/module-config';
diff --git a/projects/ucap-webmessenger-app/src/app/app.module.ts b/projects/ucap-webmessenger-app/src/app/app.module.ts
index 2476fe74..6e3a5d86 100644
--- a/projects/ucap-webmessenger-app/src/app/app.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/app.module.ts
@@ -16,6 +16,7 @@ import { UCapUtilModule } from '@ucap-webmessenger/util';
 
 import { UCapCommonApiModule } from '@ucap-webmessenger/api-common';
 import { UCapExternalApiModule } from '@ucap-webmessenger/api-external';
+import { UCapMessageApiModule } from '@ucap-webmessenger/api-message';
 import { UCapPublicApiModule } from '@ucap-webmessenger/api-public';
 
 import { UCapPiModule } from '@ucap-webmessenger/pi';
@@ -62,6 +63,7 @@ import { environment } from '../environments/environment';
 
     UCapPublicApiModule.forRoot(environment.publicApiModuleConfig),
     UCapExternalApiModule.forRoot(environment.externalApiModuleConfig),
+    UCapMessageApiModule.forRoot(environment.messageApiModuleConfig),
 
     UCapPiModule.forRoot(environment.piModuleConfig),
 
@@ -93,12 +95,12 @@ import { environment } from '../environments/environment';
     AppNativeLayoutModule,
 
     LoggerModule.forRoot({
-      level: NgxLoggerLevel.DEBUG,
-    }),
+      level: NgxLoggerLevel.DEBUG
+    })
   ],
   providers: [...GUARDS],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
-  entryComponents: [],
+  entryComponents: []
 })
 export class AppModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
index e9b6a2c0..e141bee9 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts
@@ -20,6 +20,7 @@ import {
   UserInfoDN
 } from '@ucap-webmessenger/protocol-query';
 import { MatTabChangeEvent, MatTabGroup } from '@angular/material';
+import { RightDrawer } from '@app/types';
 
 export enum MainMenu {
   Group = 'GROUP',
@@ -144,6 +145,11 @@ export class LeftSideComponent implements OnInit {
               icon: 'add',
               tooltip: 'New Group Add',
               divisionType: 'GROUP_NEW_ADD'
+            },
+            {
+              icon: 'sms',
+              tooltip: 'Message',
+              divisionType: 'MESSAGE'
             }
           ];
         }
@@ -247,6 +253,16 @@ export class LeftSideComponent implements OnInit {
           this.onClickNewChat('TIMER');
         }
         break;
+
+      case 'MESSAGE':
+        {
+          this.store.dispatch(
+            ChatStore.selectedRightDrawer({
+              req: RightDrawer.Message
+            })
+          );
+        }
+        break;
     }
   }
 }
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
index 4004a64d..28ff1ca3 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.html
@@ -13,6 +13,7 @@
   </span>
 </div>
 <ng-container *ngIf="selectedRightDrawer" [ngSwitch]="selectedRightDrawer">
+  <!-- [S] About Chat room -->
   <app-layout-chat-right-drawer-file-box *ngSwitchCase="RightDrawer.FileBox">
   </app-layout-chat-right-drawer-file-box>
 
@@ -24,4 +25,10 @@
     (openProfile)="onClickOpenProfile($event)"
   >
   </app-layout-chat-right-drawer-room-user-list>
+  <!-- [E] About Chat room -->
+
+  <!-- [S] About Common -->
+  <app-layout-chat-right-drawer-message-box *ngSwitchCase="RightDrawer.Message">
+  </app-layout-chat-right-drawer-message-box>
+  <!-- [E] About Common -->
 </ng-container>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts
index b10fa90c..2c8c66fe 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/index.ts
@@ -1,9 +1,11 @@
 import { FileBoxComponent } from './file-box.component';
 import { AlbumBoxComponent } from './album-box.component';
 import { RoomUserListComponent } from './room-user-list.component';
+import { MessageBoxComponent } from './message-box.component';
 
 export const RIGHT_DRAWER_COMPONENTS = [
   FileBoxComponent,
   AlbumBoxComponent,
   RoomUserListComponent,
+  MessageBoxComponent
 ];
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
new file mode 100644
index 00000000..155ffc31
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.html
@@ -0,0 +1,3 @@
+<div class="message-box container">
+  <p>message-box works!</p>
+</div>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.scss
new file mode 100644
index 00000000..2dd77e82
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.scss
@@ -0,0 +1,3 @@
+div.message-box {
+  width: 600px;
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.spec.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.spec.ts
new file mode 100644
index 00000000..5a6261b4
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessageBoxComponent } from './message-box.component';
+
+describe('MessageBoxComponent', () => {
+  let component: MessageBoxComponent;
+  let fixture: ComponentFixture<MessageBoxComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessageBoxComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessageBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 00000000..4a5c83c2
--- /dev/null
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/message-box.component.ts
@@ -0,0 +1,113 @@
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  Output,
+  EventEmitter
+} from '@angular/core';
+import { Subscription, of } from 'rxjs';
+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,
+  RetrieveRequest,
+  MessageType
+} from '@ucap-webmessenger/api-message';
+import { DeviceType } from '@ucap-webmessenger/core';
+import { StatusCode } from '@ucap-webmessenger/api';
+
+@Component({
+  selector: 'app-layout-chat-right-drawer-message-box',
+  templateUrl: './message-box.component.html',
+  styleUrls: ['./message-box.component.scss']
+})
+export class MessageBoxComponent implements OnInit, OnDestroy {
+  userInfoList: UserInfo[];
+  userInfoListSubscription: Subscription;
+
+  loginRes: LoginResponse;
+  sessionVerinfo: VersionInfo2Response;
+
+  messageSendListSubscription: Subscription;
+
+  pageSize = 100; // default
+  currentPage = 0; // start index is 0.
+
+  constructor(
+    private store: Store<any>,
+    private sessionStorageService: SessionStorageService,
+    private dialogService: DialogService,
+    private messageApiService: MessageApiService
+  ) {
+    this.loginRes = this.sessionStorageService.get<LoginResponse>(
+      KEY_LOGIN_RES_INFO
+    );
+    this.sessionVerinfo = this.sessionStorageService.get<VersionInfo2Response>(
+      KEY_VER_INFO
+    );
+  }
+
+  ngOnInit() {
+    this.userInfoListSubscription = this.store
+      .pipe(
+        select(AppStore.MessengerSelector.RoomSelector.selectUserinfolist),
+        tap(userInfoList => {
+          this.userInfoList = userInfoList;
+        })
+      )
+      .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.statusCode === StatusCode.Success) {
+          } else {
+          }
+        }),
+        catchError(error => of(console.log(error)))
+      )
+      .subscribe();
+  }
+
+  ngOnDestroy(): void {
+    if (!!this.userInfoListSubscription) {
+      this.userInfoListSubscription.unsubscribe();
+    }
+    if (!!this.messageSendListSubscription) {
+      this.messageSendListSubscription.unsubscribe();
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
index 97a30216..8a5bb275 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
@@ -27,7 +27,7 @@ import {
   MatTableModule,
   MatPaginatorModule,
   MatRippleModule,
-  MatSortModule,
+  MatSortModule
 } from '@angular/material';
 import { MatListModule } from '@angular/material/list';
 import { MatChipsModule } from '@angular/material/chips';
@@ -90,10 +90,10 @@ import { DIALOGS } from './dialogs';
     UCapUiGroupModule,
     UCapUiOrganizationModule,
 
-    AppCommonLayoutModule,
+    AppCommonLayoutModule
   ],
   exports: [...COMPONENTS, ...DIALOGS],
   declarations: [...COMPONENTS, ...DIALOGS],
-  entryComponents: [...DIALOGS],
+  entryComponents: [...DIALOGS]
 })
 export class AppMessengerLayoutModule {}
diff --git a/projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts b/projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts
index 6f76b5cc..b32b9b1d 100644
--- a/projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts
+++ b/projects/ucap-webmessenger-app/src/app/types/right-drawer.type.ts
@@ -1,5 +1,11 @@
 export enum RightDrawer {
-  RoomUser = 'ROOM_USER',
-  FileBox = 'FILE_BOX',
+  /** 대화방 > 앨범함 */
   AlbumBox = 'ALBUM_BOX',
+  /** 대화방 > 파일함 */
+  FileBox = 'FILE_BOX',
+  /** 대화방 > 대화참여자목록 */
+  RoomUser = 'ROOM_USER',
+
+  /** 쪽지함 */
+  Message = 'MESSAGE_BOX'
 }
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.dev.ts b/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
index 9d499d61..22a3c9e2 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.dev.ts
@@ -6,6 +6,7 @@ import {
   externalApiUrls,
   piUrls,
   protocolUrls,
+  messageApiUrls
 } from './environment.type';
 
 export const environment: Environment = {
@@ -16,54 +17,63 @@ export const environment: Environment = {
     hostConfig: {
       protocol: 'http',
       domain: '27.122.224.170',
-      port: 8011,
+      port: 8011
     },
     urls: commonApiUrls,
-    acceptableFileExtensions: commonApiacceptableFileExtensions,
+    acceptableFileExtensions: commonApiacceptableFileExtensions
   },
 
   publicApiModuleConfig: {
     hostConfig: {
       protocol: 'http',
       domain: '27.122.224.170',
-      port: 8011,
+      port: 8011
     },
-    urls: publicApiUrls,
+    urls: publicApiUrls
   },
 
   externalApiModuleConfig: {
     hostConfig: {
       protocol: 'http',
       domain: '27.122.224.170',
-      port: 8011,
+      port: 8011
     },
-    urls: externalApiUrls,
+    urls: externalApiUrls
+  },
+
+  messageApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 9097
+    },
+    urls: messageApiUrls
   },
 
   piModuleConfig: {
     hostConfig: {
       protocol: 'http',
       domain: '27.122.224.170',
-      port: 9097,
+      port: 9097
     },
-    urls: piUrls,
+    urls: piUrls
   },
 
   protocolModuleConfig: {
     hostConfig: {
       protocol: 'ws',
       domain: '27.122.224.170',
-      port: 8080,
+      port: 8080
     },
     urls: protocolUrls,
     reconnect: {
-      delay: 1000,
+      delay: 1000
     },
     requestId: {
       min: 1,
-      max: 59999,
-    },
+      max: 59999
+    }
   },
 
-  nativeModuleConfig: {},
+  nativeModuleConfig: {}
 };
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.prod.ts b/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
index 32317900..bb7c2e02 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.prod.ts
@@ -6,6 +6,7 @@ import {
   externalApiUrls,
   piUrls,
   protocolUrls,
+  messageApiUrls
 } from './environment.type';
 
 export const environment: Environment = {
@@ -16,54 +17,63 @@ export const environment: Environment = {
     hostConfig: {
       protocol: 'http',
       domain: '27.122.224.170',
-      port: 8011,
+      port: 8011
     },
     urls: commonApiUrls,
-    acceptableFileExtensions: commonApiacceptableFileExtensions,
+    acceptableFileExtensions: commonApiacceptableFileExtensions
   },
 
   publicApiModuleConfig: {
     hostConfig: {
       protocol: 'http',
       domain: '27.122.224.170',
-      port: 8011,
+      port: 8011
     },
-    urls: publicApiUrls,
+    urls: publicApiUrls
   },
 
   externalApiModuleConfig: {
     hostConfig: {
       protocol: 'http',
       domain: '27.122.224.170',
-      port: 8011,
+      port: 8011
     },
-    urls: externalApiUrls,
+    urls: externalApiUrls
+  },
+
+  messageApiModuleConfig: {
+    hostConfig: {
+      protocol: 'http',
+      domain: '27.122.224.170',
+      port: 9097
+    },
+    urls: messageApiUrls
   },
 
   piModuleConfig: {
     hostConfig: {
       protocol: 'http',
       domain: '27.122.224.170',
-      port: 9097,
+      port: 9097
     },
-    urls: piUrls,
+    urls: piUrls
   },
 
   protocolModuleConfig: {
     hostConfig: {
       protocol: 'ws',
       domain: '27.122.224.170',
-      port: 8080,
+      port: 8080
     },
     urls: protocolUrls,
     reconnect: {
-      delay: 1000,
+      delay: 1000
     },
     requestId: {
       min: 1,
-      max: 59999,
-    },
+      max: 59999
+    }
   },
 
-  nativeModuleConfig: {},
+  nativeModuleConfig: {}
 };
diff --git a/projects/ucap-webmessenger-app/src/environments/environment.type.ts b/projects/ucap-webmessenger-app/src/environments/environment.type.ts
index a2736e22..8e2a71a4 100644
--- a/projects/ucap-webmessenger-app/src/environments/environment.type.ts
+++ b/projects/ucap-webmessenger-app/src/environments/environment.type.ts
@@ -1,22 +1,26 @@
 import {
   ModuleConfig as CommonApiModuleConfig,
-  Urls as CommonApiUrls,
+  Urls as CommonApiUrls
 } from '@ucap-webmessenger/api-common';
 import {
   ModuleConfig as PublicApiModuleConfig,
-  Urls as PublicApiUrls,
+  Urls as PublicApiUrls
 } from '@ucap-webmessenger/api-public';
 import {
   ModuleConfig as ExternalApiModuleConfig,
-  Urls as ExternalApiUrls,
+  Urls as ExternalApiUrls
 } from '@ucap-webmessenger/api-external';
+import {
+  ModuleConfig as MessageApiModuleConfig,
+  Urls as MessageApiUrls
+} from '@ucap-webmessenger/api-message';
 import {
   ModuleConfig as PiModuleConfig,
-  Urls as PiUrls,
+  Urls as PiUrls
 } from '@ucap-webmessenger/pi';
 import {
   ModuleConfig as ProtocolModuleConfig,
-  Urls as ProtocolUrls,
+  Urls as ProtocolUrls
 } from '@ucap-webmessenger/protocol';
 import { ModuleConfig as NativeModuleConfig } from '@ucap-webmessenger/native';
 
@@ -30,6 +34,7 @@ export interface Environment {
   commonApiModuleConfig: CommonApiModuleConfig;
   publicApiModuleConfig: PublicApiModuleConfig;
   externalApiModuleConfig: ExternalApiModuleConfig;
+  messageApiModuleConfig: MessageApiModuleConfig;
   piModuleConfig: PiModuleConfig;
   protocolModuleConfig: ProtocolModuleConfig;
   nativeModuleConfig: NativeModuleConfig;
@@ -45,18 +50,47 @@ export const commonApiUrls: CommonApiUrls = {
   transMassTalkDownload: '/Common/TransMassTalkDownload.aspx',
   transMassTalkSave: '/Common/TransMassTalkSave.aspx',
   translationReq: '/Common/TranslationReq.aspx',
-  translationSave: '/Common/TranslationSave.aspx',
+  translationSave: '/Common/TranslationSave.aspx'
 };
 
 export const publicApiUrls: PublicApiUrls = {
   versionInfo2: '/Pub/verinfo2.aspx',
-  updateInfo: '/Pub/updinfo.aspx',
+  updateInfo: '/Pub/updinfo.aspx'
 };
 export const externalApiUrls: ExternalApiUrls = {
   checkUserInfoEx: '/Extern/CheckUserInfoEx.aspx',
   companyList: '/Extern/CompanyList.aspx',
   tokenUpdate: '/Extern/TokenUpdate.aspx',
-  urlInfo: '/Extern/urlinfo.aspx',
+  urlInfo: '/Extern/urlinfo.aspx'
+};
+export const messageApiUrls: MessageApiUrls = {
+  retrieveSendMessageList: '/uCapMsg/msg/retrieveSendMessageList.do',
+  retrieveRecvMessageList: '/uCapMsg/msg/retrieveRecvMessageList.do',
+  retrieveReservationMessageList:
+    '/uCapMsg/msg/retrieveReservationMessageList.do',
+  retrieveSearchMessage: '/uCapMsg/msg/retrieveSearchMessage.do',
+
+  sendNewMessage: '/uCapMsg/msg/sendNewMessage.do',
+
+  retrieveMessageDetail: '/uCapMsg/msg/retrieveMessageDetail.do',
+  readMessage: '/uCapMsg/msg/readMessage.do',
+  retrieveReadCheck: '/uCapMsg/msg/retrieveReadCheck.do',
+  cancelMessage: '/uCapMsg/msg/cancelMessage.do',
+  cancelReservationMessage: '/uCapMsg/msg/cancelReservationMessage.do',
+  retrieveResourceFile: '/uCapMsg/msg/retrieveResourceFile.do',
+
+  deleteMessage: '/uCapMsg/msg/deleteMessage.do',
+
+  saveMyMessage: '/uCapMsg/msg/saveMyMessage.do',
+  retrieveMyMessage: '/uCapMsg/msg/retrieveMyMessage.do',
+  deleteMyMessage: '/uCapMsg/msg/deleteMyMessage.do',
+  editMyMessage: '/uCapMsg/msg/editMyMessage.do',
+
+  editReservationMessageEx: '/uCapMsg/msg/editReservationMessageEx.do',
+
+  sendCopyMessage: '/uCapMsg/msg/sendCopyMessage.do',
+
+  retrieveUnreadCount: '/uCapMsg/msg/retrieveUnreadCount.do'
 };
 export const piUrls: PiUrls = {
   login2: '/uCapPi/login2',
@@ -76,10 +110,10 @@ export const piUrls: PiUrls = {
   eventSendInvite: '/uCapPi/event/sendInvite',
   userRoom: '/uCapPi/user/room',
   scheduleRetrieveScheduleList: '/uCapPi/schedule/retrieveScheduleList',
-  userScreenCapture: '/uCapPi/user/screenCapture',
+  userScreenCapture: '/uCapPi/user/screenCapture'
 };
 export const protocolUrls: ProtocolUrls = {
-  base: '/',
+  base: '/'
 };
 
 export const commonApiacceptableFileExtensions: string[] = [
@@ -177,7 +211,7 @@ export const commonApiacceptableFileExtensions: string[] = [
   'webm',
   'wmv',
   // 폴더전송용
-  'zdr',
+  'zdr'
 ];
 
 // export abstract class UrlConfig {