diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
index 493c4ec3..39ab6c35 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html
@@ -50,108 +50,36 @@
           수신
         </ng-template>
 
-        <div
+        <ucap-message-list-item
           *ngFor="let message of messageList"
+          [message]="message"
           (click)="onClickDetail(message)"
           class="message-item"
-        >
-          <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>
+        ></ucap-message-list-item>
       </mat-tab>
       <mat-tab [label]="MessageType.Send">
         <ng-template mat-tab-label>
           발신
         </ng-template>
 
-        <div
+        <ucap-message-list-item
           *ngFor="let message of messageList"
+          [message]="message"
           (click)="onClickDetail(message)"
           class="message-item"
-        >
-          <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>
+        ></ucap-message-list-item>
       </mat-tab>
       <mat-tab [label]="MessageType.Reservation">
         <ng-template mat-tab-label>
           예약
         </ng-template>
 
-        <div
+        <ucap-message-list-item
           *ngFor="let message of messageList"
+          [message]="message"
           (click)="onClickDetail(message)"
           class="message-item"
-        >
-          <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>
+        ></ucap-message-list-item>
       </mat-tab>
     </mat-tab-group>
   </div>
diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
new file mode 100644
index 00000000..2024e311
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html
@@ -0,0 +1,26 @@
+<!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple>  클래스에 checkbox만 추가-->
+<div class="list-item" *ngIf="message" matRipple>
+  <dl class="item-default">
+    <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
+      >
+    </dt>
+    <dd class="info">
+      <div class="detail">
+        <span class="name">
+          <b>{{ message.userName }}</b>
+          {{ message.title }}
+        </span>
+        <span class="dept">
+          {{ message.regDate | dateToStringFormat: 'MM:DD' }}
+        </span>
+      </div>
+    </dd>
+  </dl>
+</div>
diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.spec.ts b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.spec.ts
new file mode 100644
index 00000000..b80a734e
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListItemComponent } from './list-item.component';
+
+describe('Message::ListItemComponent', () => {
+  let component: ListItemComponent;
+  let fixture: ComponentFixture<ListItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ListItemComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.ts b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.ts
new file mode 100644
index 00000000..b4a72a4b
--- /dev/null
+++ b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.ts
@@ -0,0 +1,46 @@
+import {
+  Component,
+  OnInit,
+  Output,
+  EventEmitter,
+  ViewChild,
+  AfterViewInit,
+  ChangeDetectorRef,
+  OnDestroy,
+  ElementRef,
+  Input
+} from '@angular/core';
+
+import { ucapAnimations } from '@ucap-webmessenger/ui';
+
+import { NGXLogger } from 'ngx-logger';
+import {
+  ContentType,
+  MessageList,
+  MessageType
+} from '@ucap-webmessenger/api-message';
+
+@Component({
+  selector: 'ucap-message-list-item',
+  templateUrl: './list-item.component.html',
+  styleUrls: ['./list-item.component.scss'],
+  animations: ucapAnimations
+})
+export class ListItemComponent implements OnInit, OnDestroy, AfterViewInit {
+  @Input()
+  message: MessageList;
+
+  ContentType = ContentType;
+  MessageType = MessageType;
+
+  constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private logger: NGXLogger
+  ) {}
+
+  ngOnInit() {}
+
+  ngOnDestroy(): void {}
+
+  ngAfterViewInit(): void {}
+}
diff --git a/projects/ucap-webmessenger-ui-message/src/lib/ucap-ui-message.module.ts b/projects/ucap-webmessenger-ui-message/src/lib/ucap-ui-message.module.ts
index 5d6067ad..98148b38 100644
--- a/projects/ucap-webmessenger-ui-message/src/lib/ucap-ui-message.module.ts
+++ b/projects/ucap-webmessenger-ui-message/src/lib/ucap-ui-message.module.ts
@@ -6,6 +6,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { ScrollingModule } from '@angular/cdk/scrolling';
 
+import { MatRippleModule } from '@angular/material';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatChipsModule } from '@angular/material/chips';
@@ -21,9 +22,12 @@ import { MatMomentDateModule } from '@angular/material-moment-adapter';
 
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
+import { UCapUiModule } from '@ucap-webmessenger/ui';
+
+import { ListItemComponent } from './components/list-item.component';
 import { WriteComponent } from './components/write.component';
 
-const COMPONENTS = [WriteComponent];
+const COMPONENTS = [ListItemComponent, WriteComponent];
 const DIALOGS = [];
 const DIRECTIVES = [];
 const SERVICES = [];
@@ -36,6 +40,7 @@ const SERVICES = [];
 
     ScrollingModule,
 
+    MatRippleModule,
     MatButtonModule,
     MatCardModule,
     MatChipsModule,
@@ -48,7 +53,9 @@ const SERVICES = [];
     MatListModule,
     MatMomentDateModule,
 
-    PerfectScrollbarModule
+    PerfectScrollbarModule,
+
+    UCapUiModule
   ],
   exports: [...COMPONENTS, ...DIRECTIVES],
   declarations: [...COMPONENTS, ...DIRECTIVES, ...DIALOGS],