디자인 수정.

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -1,5 +1,8 @@
 <div class="chat-messages">
   <!-- MESSAGE -->
+  <ucap-chat-message-box-date-splitter *ngIf="getDateSplitter(i)" [message]="message">
+  </ucap-chat-message-box-date-splitter>
+
   <div
     *ngFor="let message of messages; let i = index"
     class="message-row"
@@ -8,11 +11,6 @@
       contact: message.senderSeq !== loginRes.userSeq
     }"
   >
-    <ucap-chat-message-box-date-splitter
-      *ngIf="getDateSplitter(i)"
-      [message]="message"
-    >
-    </ucap-chat-message-box-date-splitter>
 
     <div
       *ngIf="getIsInformation(message); then information; else contents"
@@ -47,9 +45,7 @@
       </ng-container>
     </ng-template>
     <ng-template #contents>
-      <div>
-        <ul>
-          <li *ngIf="getUserProfile(message.senderSeq) != ''">
+      <div *ngIf="getUserProfile(message.senderSeq) != ''" class="profile-img">
             <!-- <img
               class="avatar"
               style="width: 50px; height: 50px;"
@@ -70,61 +66,64 @@
               [path]="getUserProfile(message.senderSeq)"
               [default]="'assets/images/img_nophoto_50.png'"
             ></ucap-ui-imaage>
-          </li>
-          <li>
-            {{ getUserName(message.senderSeq) }}
-          </li>
-        </ul>
       </div>
 
-      <ng-container
-        class="bubble"
-        *ngIf="message.type !== EventType.NotificationForTimerRoom"
-        [ngSwitch]="message.type"
-      >
-        <ucap-chat-message-box-mass
-          *ngSwitchCase="EventType.MassText"
-          [message]="message"
-          (massDetail)="onMassDetail($event)"
-        >
-        </ucap-chat-message-box-mass>
-        <ucap-chat-message-box-file
-          *ngSwitchCase="EventType.File"
-          [message]="message"
-          (save)="onSave($event)"
-          (imageViewer)="onImageViewer($event)"
-        >
-        </ucap-chat-message-box-file>
-        <ucap-chat-message-box-sticker
-          *ngSwitchCase="EventType.Sticker"
-          [message]="message"
-        >
-        </ucap-chat-message-box-sticker>
-        <ucap-chat-message-box-recall
-          *ngSwitchCase="EventType.RecalledMessage"
-        ></ucap-chat-message-box-recall>
-        <ucap-chat-message-box-text
-          *ngSwitchCase="EventType.Character"
-          [message]="message"
-          (contextmenu)="onContextMenuMessage($event, message)"
-        >
-        </ucap-chat-message-box-text>
-        <div *ngSwitchDefault>
-          mass-translation
-          <ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
-          notice
-          <ucap-chat-message-box-notice></ucap-chat-message-box-notice>
-          <ucap-chat-message-box-schedule></ucap-chat-message-box-schedule>
-          translation
-          <ucap-chat-message-box-translation></ucap-chat-message-box-translation>
-          video-conference
-          <ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>
-
-          <div class="message">
-            {{ message.sentMessage }}
-          </div>
+      <div class="message-main">
+        <div class="chat-name">
+            {{ getUserName(message.senderSeq) }}
         </div>
-      </ng-container>
+
+      <div class="bubble">
+        <ng-container
+          class="bubble"
+          *ngIf="message.type !== EventType.NotificationForTimerRoom"
+          [ngSwitch]="message.type"
+        >
+          <ucap-chat-message-box-mass
+            *ngSwitchCase="EventType.MassText"
+            [message]="message"
+            (massDetail)="onMassDetail($event)"
+          >
+          </ucap-chat-message-box-mass>
+          <ucap-chat-message-box-file
+            *ngSwitchCase="EventType.File"
+            [message]="message"
+            (save)="onSave($event)"
+            (imageViewer)="onImageViewer($event)"
+          >
+          </ucap-chat-message-box-file>
+          <ucap-chat-message-box-sticker
+            *ngSwitchCase="EventType.Sticker"
+            [message]="message"
+          >
+          </ucap-chat-message-box-sticker>
+          <ucap-chat-message-box-recall
+            *ngSwitchCase="EventType.RecalledMessage"
+          ></ucap-chat-message-box-recall>
+          <ucap-chat-message-box-text
+            *ngSwitchCase="EventType.Character"
+            [message]="message"
+            (contextmenu)="onContextMenuMessage($event, message)"
+          >
+          </ucap-chat-message-box-text>
+          <div *ngSwitchDefault>
+            mass-translation
+            <ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
+            notice
+            <ucap-chat-message-box-notice></ucap-chat-message-box-notice>
+            <ucap-chat-message-box-schedule></ucap-chat-message-box-schedule>
+            translation
+            <ucap-chat-message-box-translation></ucap-chat-message-box-translation>
+            video-conference
+            <ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>
+
+            <div class="message">
+              {{ message.sentMessage }}
+            </div>
+          </div>
+        </ng-container>
+      </div>
+    </div>
 
       <div class="time secondary-text">
         {{ message.sendDate | date: 'a hh:mm' }}