update

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      /*"url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}"*/
+      "file": "${workspaceFolder}"
+    }
+  ]
+}

chat.html

@@ -40,22 +40,28 @@
     <main class="main-screen main-chat">
       <div class="chat__timestamp">Tuesday, June 30, 2020</div>
 
-      <div class="message-row message-row--other">
-        <img
-          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRh3i_blpxbhLdG5zNC68kENRH1d_SnY_wvsw&usqp=CAU"
-        />
+      <div class="message-row message-row--own">
         <div class="message-row__content">
-          <span class="message__author">Nicolas Serrano</span>
           <div class="message__info">
-            <span class="message__bubble">Hi!</span>
+            <span class="message__bubble"
+              >현수연/221018/여/70cm/8.5kg/예방접종 유</span
+            >
             <span class="message__time">21:27</span>
           </div>
         </div>
       </div>
-      <div class="message-row message-row--own">
+      <div class="message-row message-row--other">
+        <img
+          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS78n40IYkwiY0JTXqnJoITYgwaaH7bYXOVYA&usqp=CAU"
+        />
         <div class="message-row__content">
+          <span class="message__author">유아 의료 알리미</span>
           <div class="message__info">
-            <span class="message__bubble">Hi nice to meet you!</span>
+            <span class="message__bubble"
+              >생후 6개월 여자아이 평균<br />키 : 62.2 ~ 71.5cm<br />
+              체중 : 6.29 ~ 9.60kg<br />키, 체중 : 각각 상위 3%, 5%에
+              해당됩니다.</span
+            >
             <span class="message__time">21:27</span>
           </div>
         </div>
@@ -78,7 +84,7 @@
     </div>
 
     <script
-      src="https://kit.fontawesome.com/6478f529f2.js"
+      src="https://kit.fontawesome.com/1dcf822923.js"
       crossorigin="anonymous"
     ></script>
   </body>

chats.html

@@ -89,7 +89,7 @@ <h6 class="user-component__subtitle">
     </div>
 
     <script
-      src="https://kit.fontawesome.com/6478f529f2.js"
+      src="https://kit.fontawesome.com/1dcf822923.js"
       crossorigin="anonymous"
     ></script>
   </body>

css/components/chat.css

@@ -66,7 +66,9 @@
 }
 
 .message-row--other {
-  animation: Receive 1s linear;
+  opacity: 0;
+  animation: Receive 1s linear forwards;
+  animation-delay: 2.7s;
 }
 
 .message-row img {
@@ -79,6 +81,8 @@
 .message__author {
   display: block;
   margin-bottom: 5px;
+  font-weight: 600;
+  font-size: 12px;
 }
 
 .message__info {
@@ -92,12 +96,12 @@
   border-radius: 15px;
   border-top-left-radius: 0px;
   margin-right: 5px;
+  font-size: 12px;
 }
 
-.message__author,
 .message__time {
   opacity: 0.7;
-  font-size: 14px;
+  font-size: 10px;
 }
 
 @keyframes Send {

css/styles.css

@@ -1,4 +1,5 @@
 @import url("https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@1,600&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap");
 @import "reset.css";
 @import "variables.css";
 
@@ -22,7 +23,8 @@
 
 body {
   color: #2e363e;
-  font-family: "Source Serif Pro", serif;
+  /*font-family: "Source Serif Pro", serif;*/
+  font-family: "Noto Sans KR", sans-serif;
 }
 .main-screen {
   padding: 0px var(--horizontal-space);

find.html

@@ -146,7 +146,7 @@ <h5 class="open-post__hashtags">
     </div>
 
     <script
-      src="https://kit.fontawesome.com/6478f529f2.js"
+      src="https://kit.fontawesome.com/1dcf822923.js"
       crossorigin="anonymous"
     ></script>
   </body>

friends.html

@@ -114,7 +114,7 @@ <h6 class="user-component__subtitle">this text whatever</h6>
     </div>
 
     <script
-      src="https://kit.fontawesome.com/6478f529f2.js"
+      src="https://kit.fontawesome.com/1dcf822923.js"
       crossorigin="anonymous"
     ></script>
   </body>

index.html

@@ -44,7 +44,7 @@ <h1 class="welcome-header__title">Welcome to KokoaTalk</h1>
     </div>
 
     <script
-      src="https://kit.fontawesome.com/6478f529f2.js"
+      src="https://kit.fontawesome.com/1dcf822923.js"
       crossorigin="anonymous"
     ></script>
   </body>

more.html

@@ -143,7 +143,7 @@ <h4 class="more-suggestions__title">Suggestions</h4>
     </div>
 
     <script
-      src="https://kit.fontawesome.com/6478f529f2.js"
+      src="https://kit.fontawesome.com/1dcf822923.js"
       crossorigin="anonymous"
     ></script>
   </body>