From 1fc42bef1eb3e598e570e7df03dc698b839f94c5 Mon Sep 17 00:00:00 2001
From: kkn1125 <xpfjrnseks1@naver.com>
Date: Wed, 3 Nov 2021 19:10:13 +0900
Subject: [PATCH] v024 update list

---
 README.md                     |   2 +-
 UPDATE.md                     |  34 ++-
 dist/assets/css/chat.css      | 548 +++++++++++++++++-----------------
 dist/assets/css/gnb.css       |   3 +-
 dist/assets/css/main.css      |   7 +-
 dist/assets/js/documentify.js |  11 +-
 dist/assets/js/example.js     |   2 +-
 dist/assets/js/theme.js       | 308 ++++++++++++-------
 dist/data/userData.json       |   6 +-
 dist/include/chat-popup.html  |   2 +-
 dist/include/footer.html      |   6 +-
 dist/include/updates.html     |   4 +-
 12 files changed, 531 insertions(+), 402 deletions(-)

diff --git a/README.md b/README.md
index bad1eb5..ec71345 100644
--- a/README.md
+++ b/README.md
@@ -37,7 +37,7 @@ js 주석을 구문 분석하고 문서화합니다. 현재는 기능만 구현
 
 ## 버전
 
-v0.2.2
+v0.2.4
 
 ## 사용법
 
diff --git a/UPDATE.md b/UPDATE.md
index 3b935fb..c9468d3 100644
--- a/UPDATE.md
+++ b/UPDATE.md
@@ -3,15 +3,18 @@
 ***TOC***
 
 - [Update List](#update-list)
+  - [v0.2.4 업데이트](#v024-업데이트)
+    - [추가 사항](#추가-사항)
+    - [버그 수정](#버그-수정)
   - [v0.2.3 업데이트](#v023-업데이트)
     - [수정 사항](#수정-사항)
-    - [추가 사항](#추가-사항)
+    - [추가 사항](#추가-사항-1)
   - [v0.2.2 업데이트](#v022-업데이트)
-    - [버그 수정](#버그-수정)
+    - [버그 수정](#버그-수정-1)
     - [수정 사항](#수정-사항-1)
-    - [추가 사항](#추가-사항-1)
+    - [추가 사항](#추가-사항-2)
   - [v0.2.1 업데이트](#v021-업데이트)
-    - [버그 수정](#버그-수정-1)
+    - [버그 수정](#버그-수정-2)
     - [수정 사항](#수정-사항-2)
   - [v0.2.0 pre-release 수정 사항](#v020-pre-release-수정-사항)
     - [초기화 옵션 방식 수정](#초기화-옵션-방식-수정)
@@ -35,6 +38,29 @@
 
 # Update List
 
+## v0.2.4 업데이트
+
+### 추가 사항
+
+1. 검색창 기능 (MDN 검색 기능 참조)
+2. 채팅창 버튼별 기능 연결
+   - 업데이트, 문의, 만든사람, 저장 기능 연결
+   - 페이지 저장 시 page object 전달
+   - 메세지 입력 하단 스크롤 방식 변경
+   - `userData.json`에 아바타 추가
+   - bot, user 명칭 디스플레이 추가
+   - 채팅창 사이즈 증가
+3. 문서 전체 스크롤에서 메인 영역 스크롤 방식으로 변경
+
+### 버그 수정
+
+1. 채팅창 css
+   - ui 수정
+
+***kimson, ohoraming | 2021-11-03 19:09:02***
+
+-----
+
 ## v0.2.3 업데이트
 
 ### 수정 사항
diff --git a/dist/assets/css/chat.css b/dist/assets/css/chat.css
index 5d6b203..1131f4e 100644
--- a/dist/assets/css/chat.css
+++ b/dist/assets/css/chat.css
@@ -1,34 +1,35 @@
 /**
- * mkDocumentifyJS v0.2.3 (https://github.com/kkn1125/mkDocumentifyJS)
+ * mkDocumentifyJS v0.2.4 (https://github.com/kkn1125/mkDocumentifyJS)
  * Copyright 2021 Authors (https://github.com/kkn1125/mkDocumentifyJS/graphs/contributors) kkn1125, ohoraming
  * Licensed under MIT (https://github.com/kkn1125/mkDocumentifyJS/blob/main/LICENSE)
  */
 
 .chat-btn-wrap {
-  position: fixed;
-  right: 3rem;
-  bottom: 7rem;
-  color: var(--ks-brand);
-  width: auto;
-  height: auto;
-  z-index: 500;
+    position: fixed;
+    right: 3rem;
+    bottom: 8rem;
+    color: var(--ks-brand);
+    width: auto;
+    height: auto;
+    z-index: 500;
 }
 
 .chat-btn-wrap .chat-btn {
-  transform: rotateY(180deg);
-  -webkit-transform: rotateY(180deg);
-  -moz-transform: rotateY(180deg);
-  -ms-transform: rotateY(180deg);
-  -o-transform: rotateY(180deg);
+    transform: rotateY(180deg);
+    -webkit-transform: rotateY(180deg);
+    -moz-transform: rotateY(180deg);
+    -ms-transform: rotateY(180deg);
+    -o-transform: rotateY(180deg);
 }
 
 .chat-btn-wrap .chat-btn:hover {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .chat-modal {
     display: none;
     position: fixed;
+    user-select: none;
     width: 25rem;
     height: 35rem;
     background-color: var(--ks-bg);
@@ -46,105 +47,103 @@
 }
 
 @keyframes chatModalPop {
-  0% {
-    opacity: 0;
-    transform: scale(0.0001);
-    -webkit-transform: scale(0.0001);
-    -moz-transform: scale(0.0001);
-    -ms-transform: scale(0.0001);
-    -o-transform: scale(0.0001);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1);
-    -webkit-transform: scale(1);
-    -moz-transform: scale(1);
-    -ms-transform: scale(1);
-    -o-transform: scale(1);
-  }
+    0% {
+        opacity: 0;
+        transform: scale(0.0001);
+        -webkit-transform: scale(0.0001);
+        -moz-transform: scale(0.0001);
+        -ms-transform: scale(0.0001);
+        -o-transform: scale(0.0001);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        -o-transform: scale(1);
+    }
 }
 
 @keyframes chatModalShow {
-  0% {
-    opacity: 0;
-    transform: scale(0.0001);
-    -webkit-transform: scale(0.0001);
-    -moz-transform: scale(0.0001);
-    -ms-transform: scale(0.0001);
-    -o-transform: scale(0.0001);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1);
-    -webkit-transform: scale(1);
-    -moz-transform: scale(1);
-    -ms-transform: scale(1);
-    -o-transform: scale(1);
-  }
+    0% {
+        opacity: 0;
+        transform: scale(0.0001);
+        -webkit-transform: scale(0.0001);
+        -moz-transform: scale(0.0001);
+        -ms-transform: scale(0.0001);
+        -o-transform: scale(0.0001);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        -o-transform: scale(1);
+    }
 }
 
 @keyframes chatModalHide {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-    -webkit-transform: scale(1);
-    -moz-transform: scale(1);
-    -ms-transform: scale(1);
-    -o-transform: scale(1);
-  }
-
-  100% {
-    opacity: 0;
-    transform: scale(0.0001);
-    -webkit-transform: scale(0.0001);
-    -moz-transform: scale(0.0001);
-    -ms-transform: scale(0.0001);
-    -o-transform: scale(0.0001);
-  }
+    0% {
+        opacity: 1;
+        transform: scale(1);
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        -o-transform: scale(1);
+    }
+
+    100% {
+        opacity: 0;
+        transform: scale(0.0001);
+        -webkit-transform: scale(0.0001);
+        -moz-transform: scale(0.0001);
+        -ms-transform: scale(0.0001);
+        -o-transform: scale(0.0001);
+    }
 }
 
 .chat-modal.show {
-  display: block;
-  animation: chatModalShow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
-  -webkit-animation: chatModalShow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
-    both;
+    display: block;
+    animation: chatModalShow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+    -webkit-animation: chatModalShow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
 }
 
 .chat-modal.hide {
-  display: block;
-  animation: chatModalHide 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
-  -webkit-animation: chatModalHide 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
-    both;
+    display: block;
+    animation: chatModalHide 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
+    -webkit-animation: chatModalHide 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
 }
 
 .chat-modal .chat-title {
-  background-color: var(--ks-brand);
-  line-height: 2.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  font-weight: 700;
-  color: var(--ks-bg);
-  display: flex;
-  justify-content: space-between;
+    background-color: var(--ks-brand);
+    line-height: 2.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    font-weight: 700;
+    color: var(--ks-bg);
+    display: flex;
+    justify-content: space-between;
 }
 
 .chat-modal .chat-title .modal-del-btn {
-  user-select: none;
-  cursor: pointer;
+    user-select: none;
+    cursor: pointer;
 }
 
-.chat-modal .chat-content
+.chat-modal .chat-content {
     color: rgba(80, 80, 80);
     height: 520px;
 }
 
 .chat-modal .chat-content .chat-body {
-  height: 100%;
-  display: flex;
-  flex-flow: column wrap;
-  justify-content: space-between;
+    height: 100%;
+    display: flex;
+    flex-flow: column wrap;
+    justify-content: space-between;
 }
 
 .chat-modal .chat-content .chat-body .chat-message {
@@ -156,224 +155,237 @@
 }
 
 .chat-modal .chat-content .chat-body .chat-message::-webkit-scrollbar {
-  width: 0.3rem;
-  height: 0.3rem;
-  background-color: rgba(94, 194, 113, 0.2);
+    width: 0.3rem;
+    height: 0.3rem;
+    background-color: rgba(94, 194, 113, 0.2);
 }
 
 .chat-modal .chat-content .chat-body .chat-message::-webkit-scrollbar-thumb {
-  width: 0.3rem;
-  height: 0.3rem;
-  background-color: rgba(94, 194, 113, 0.7);
+    width: 0.3rem;
+    height: 0.3rem;
+    background-color: rgba(94, 194, 113, 0.7);
 }
 
 .chat-modal .chat-content .chat-body .chat-bar {
-  padding: 0.5rem 1rem 0.5rem;
-  position: relative;
+    padding: 0.5rem 1rem 0.5rem;
+    position: relative;
 }
 
 .chat-modal .chat-content .chat-body .chat-bar input {
-  font-size: 0.8rem;
-  padding: 0.5rem;
+    font-size: 0.8rem;
+    padding: 0.5rem;
 }
 
 .chat-modal .chat-content .chat-body .chat-message .msg-wrap {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  line-height: 2rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.chat-modal .chat-content .chat-body .chat-message .msg-wrap .msg-box {
-  display: inline-block;
-  max-width: 80%;
-  word-break: break-word;
-  border-radius: 0.5rem;
-  -webkit-border-radius: 0.5rem;
-  -moz-border-radius: 0.5rem;
-  -ms-border-radius: 0.5rem;
-  -o-border-radius: 0.5rem;
-  position: relative;
-  line-height: 1.2rem;
-  text-indent: 0;
-  white-space: pre-line;
-  padding: 0.5rem 0.5rem;
-  box-shadow: 5px 2px 0.2rem 0rem rgba(0, 0, 0, 0.2);
-}
-
-.chat-modal
-  .chat-content
-  .chat-body
-  .chat-message
-  .msg-wrap
-  .msg-box.msg-box-info::before {
-  background-color: white;
-}
-
-.chat-modal
-  .chat-content
-  .chat-body
-  .chat-message
-  .msg-wrap
-  .msg-box.msg-box-info,
-.chat-modal
-  .chat-content
-  .chat-body
-  .chat-message
-  .msg-wrap
-  .msg-box.msg-box-info::before {
-  border: 2px solid var(--ks-brand);
-  /* background-color: var(--ks-brand); */
-  /* color: white; */
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    line-height: 2rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
+.chat-modal .chat-content .chat-body .chat-message .msg-wrap .msg-box-wrap .msg-box {
+    display: inline-block;
+    max-width: 80%;
+
+}
+
+.chat-modal .chat-content .chat-body .chat-message .msg-wrap .msg-box-wrap .msg-box {
+    display: inline-block;
+    word-break: break-word;
+    border-radius: 0.5rem;
+    -webkit-border-radius: 0.5rem;
+    -moz-border-radius: 0.5rem;
+    -ms-border-radius: 0.5rem;
+    -o-border-radius: 0.5rem;
+    position: relative;
+    line-height: 1.2rem;
+    text-indent: 0;
+    white-space: pre-line;
+    padding: 0.5rem 0.5rem;
+    box-shadow: 5px 2px 0.2rem 0rem rgba(0, 0, 0, 0.2);
+}
+
+.chat-modal .chat-content .chat-body .chat-message .msg-wrap .msg-box-wrap [class*="msg-title-"] {
+    font-weight: 700;
+}
+
+.chat-modal .chat-content .chat-body .chat-message .msg-wrap .msg-box-wrap .msg-title-info {
+    color: var(--ks-brand);
+}
+
+.chat-modal .chat-content .chat-body .chat-message .msg-wrap .msg-box-wrap .msg-title-info::before{
+    content: '🤖';
+    margin-right: .2em;
+    font-size: 1.5em;
+}
+
+.chat-modal .chat-content .chat-body .chat-message .msg-wrap .msg-box-wrap .msg-title-user::after {
+    content: '😃';
+    margin-left: .2em;
+    font-size: 1.5em;
+}
+
+.chat-modal .chat-content .chat-body .chat-message .msg-wrap .msg-box-wrap .msg-title-user {
+    text-align: right;
+    color: var(--ks-primary)
+}
+
+.chat-modal .chat-content .chat-body .chat-message .msg-wrap .msg-box.msg-box-info::before {
+    background-color: white;
+}
+
+.chat-modal .chat-content .chat-body .chat-message .msg-wrap .msg-box.msg-box-info,
+.chat-modal .chat-content .chat-body .chat-message .msg-wrap .msg-box.msg-box-info::before {
+    border: 2px solid var(--ks-brand);
+    /* background-color: var(--ks-brand); */
+    /* color: white; */
 }
 
 .msg-box-info::before {
-  content: "";
-  z-index: 5;
-  display: inline-block;
-  width: 0.7rem;
-  height: 0.7rem;
-  border-top: none !important;
-  border-right: none !important;
-  position: absolute;
-  transform: translate(-135%, 10%) rotate(45deg);
-  -webkit-transform: translate(-135%, 10%) rotate(45deg);
-  -moz-transform: translate(-135%, 10%) rotate(45deg);
-  -ms-transform: translate(-135%, 10%) rotate(45deg);
-  -o-transform: translate(-135%, 10%) rotate(45deg);
-}
-
-.chat-modal
-  .chat-content
-  .chat-body
-  .chat-message
-  .msg-wrap
-  .msg-box.msg-box-user::before {
-  background-color: white;
-}
-
-.chat-modal
-  .chat-content
-  .chat-body
-  .chat-message
-  .msg-wrap
-  .msg-box.msg-box-user,
-.chat-modal
-  .chat-content
-  .chat-body
-  .chat-message
-  .msg-wrap
-  .msg-box.msg-box-user::before {
-  border: 2px solid var(--ks-secondary);
-  /* background-color: var(--ks-secondary);
+    content: "";
+    z-index: 5;
+    display: inline-block;
+    width: 0.7rem;
+    height: 0.7rem;
+    border-top: none !important;
+    border-right: none !important;
+    position: absolute;
+    transform: translate(-135%, 10%) rotate(45deg);
+    -webkit-transform: translate(-135%, 10%) rotate(45deg);
+    -moz-transform: translate(-135%, 10%) rotate(45deg);
+    -ms-transform: translate(-135%, 10%) rotate(45deg);
+    -o-transform: translate(-135%, 10%) rotate(45deg);
+}
+
+.chat-modal .chat-content .chat-body .chat-message .msg-wrap .msg-box.msg-box-user::before {
+    background-color: white;
+}
+
+.chat-modal .chat-content .chat-body .chat-message .msg-wrap .msg-box.msg-box-user,
+.chat-modal .chat-content .chat-body .chat-message .msg-wrap .msg-box.msg-box-user::before {
+    border: 2px solid var(--ks-secondary);
+    /* background-color: var(--ks-secondary);
     color: white; */
 }
 
 .msg-box-user::before {
-  content: "";
-  z-index: 5;
-  display: inline-block;
-  width: 0.7rem;
-  height: 0.7rem;
-  border-bottom: none !important;
-  border-left: none !important;
-  position: absolute;
-  right: 0%;
-  transform: translateX(60%) rotate(45deg);
-  -webkit-transform: translateX(60%) rotate(45deg);
-  -moz-transform: translateX(60%) rotate(45deg);
-  -ms-transform: translateX(60%) rotate(45deg);
-  -o-transform: translateX(60%) rotate(45deg);
+    content: "";
+    z-index: 5;
+    display: inline-block;
+    width: 0.7rem;
+    height: 0.7rem;
+    border-bottom: none !important;
+    border-left: none !important;
+    position: absolute;
+    right: 0%;
+    transform: translateX(60%) rotate(45deg);
+    -webkit-transform: translateX(60%) rotate(45deg);
+    -moz-transform: translateX(60%) rotate(45deg);
+    -ms-transform: translateX(60%) rotate(45deg);
+    -o-transform: translateX(60%) rotate(45deg);
+}
+
+.msg-box-user[class*="needs-"]:not(.needs-info):hover {
+    background-color: #5ec271;
+    color: white;
+}
+
+.chat-modal .chat-body .chat-message .msg-wrap .msg-box[class*="needs-"]:not(.needs-info) {
+    cursor: pointer !important;
 }
 
-.msg-box-user:hover {
-  background-color: #5ec271;
-  color: white;
+.chat-modal .chat-body .chat-message .msg-wrap .msg-box div{
+    pointer-events: none;
 }
 
-.msg-box-user:hover::before {
-  background-color: #5ec271 !important;
+.chat-modal .chat-body .chat-message .msg-wrap .msg-box.mail {
+    max-width: 100% !important;
+    width: 100%;
+}
+
+.msg-box-user[class*="needs-"]:not(.needs-info):hover::before {
+    background-color: #5ec271 !important;
 }
 
 .msg-box-info {
-  transform-origin: left top;
-  animation: popInfo 500ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
-  -webkit-animation: popInfo 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform-origin: left top;
+    animation: popInfo 500ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
+    -webkit-animation: popInfo 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
 @keyframes popInfo {
-  0% {
-    transform: scale(0.0001);
-    -webkit-transform: scale(0.0001);
-    -moz-transform: scale(0.0001);
-    -ms-transform: scale(0.0001);
-    -o-transform: scale(0.0001);
-  }
-
-  100% {
-    transform: scale(1);
-    -webkit-transform: scale(1);
-    -moz-transform: scale(1);
-    -ms-transform: scale(1);
-    -o-transform: scale(1);
-  }
+    0% {
+        transform: scale(0.0001);
+        -webkit-transform: scale(0.0001);
+        -moz-transform: scale(0.0001);
+        -ms-transform: scale(0.0001);
+        -o-transform: scale(0.0001);
+    }
+
+    100% {
+        transform: scale(1);
+        -webkit-transform: scale(1);
+        -moz-transform: scale(1);
+        -ms-transform: scale(1);
+        -o-transform: scale(1);
+    }
 }
 
 .msg-box-user {
-  transform-origin: left top;
-  right: 0%;
-  left: 100%;
-  animation: popUser 500ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
-  -webkit-animation: popUser 500ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
-  transform: scale(0.0001) translateX(-100%);
-  -webkit-transform: scale(0.0001) translateX(-100%);
-  -moz-transform: scale(0.0001) translateX(-100%);
-  -ms-transform: scale(0.0001) translateX(-100%);
-  -o-transform: scale(0.0001) translateX(-100%);
-}
-
-@keyframes popUser {
-  0% {
+    transform-origin: left top;
+    right: 0%;
+    left: 100%;
+    animation: popUser 500ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
+    -webkit-animation: popUser 500ms cubic-bezier(0.215, 0.61, 0.355, 1) both;
     transform: scale(0.0001) translateX(-100%);
     -webkit-transform: scale(0.0001) translateX(-100%);
     -moz-transform: scale(0.0001) translateX(-100%);
     -ms-transform: scale(0.0001) translateX(-100%);
     -o-transform: scale(0.0001) translateX(-100%);
-  }
+}
 
-  100% {
-    transform: scale(1) translateX(-100%);
-    -webkit-transform: scale(1) translateX(-100%);
-    -moz-transform: scale(1) translateX(-100%);
-    -ms-transform: scale(1) translateX(-100%);
-    -o-transform: scale(1) translateX(-100%);
-  }
+@keyframes popUser {
+    0% {
+        transform: scale(0.0001) translateX(-100%);
+        -webkit-transform: scale(0.0001) translateX(-100%);
+        -moz-transform: scale(0.0001) translateX(-100%);
+        -ms-transform: scale(0.0001) translateX(-100%);
+        -o-transform: scale(0.0001) translateX(-100%);
+    }
+
+    100% {
+        transform: scale(1) translateX(-100%);
+        -webkit-transform: scale(1) translateX(-100%);
+        -moz-transform: scale(1) translateX(-100%);
+        -ms-transform: scale(1) translateX(-100%);
+        -o-transform: scale(1) translateX(-100%);
+    }
 }
 
 @keyframes motionAlert {
-  0% {
-    filter: drop-shadow(0 0 0 var(--ks-primary));
-    -webkit-filter: drop-shadow(0 0 0 var(--ks-primary));
-  }
-
-  25% {
-    filter: drop-shadow(0 0 0.3rem var(--ks-primary));
-    -webkit-filter: drop-shadow(0 0 0.3rem var(--ks-primary));
-  }
-
-  50% {
-    filter: drop-shadow(0 0 0 var(--ks-brand));
-    -webkit-filter: drop-shadow(0 0 0 var(--ks-brand));
-  }
-
-  75% {
-    filter: drop-shadow(0 0 0.5rem var(--ks-brand));
-    -webkit-filter: drop-shadow(0 0 0.5rem var(--ks-brand));
-  }
-
-  100% {
-    filter: drop-shadow(0 0 0 var(--ks-brand));
-    -webkit-filter: drop-shadow(0 0 0 var(--ks-brand));
-  }
-}
+    0% {
+        filter: drop-shadow(0 0 0 var(--ks-primary));
+        -webkit-filter: drop-shadow(0 0 0 var(--ks-primary));
+    }
+
+    25% {
+        filter: drop-shadow(0 0 0.3rem var(--ks-primary));
+        -webkit-filter: drop-shadow(0 0 0.3rem var(--ks-primary));
+    }
+
+    50% {
+        filter: drop-shadow(0 0 0 var(--ks-brand));
+        -webkit-filter: drop-shadow(0 0 0 var(--ks-brand));
+    }
+
+    75% {
+        filter: drop-shadow(0 0 0.5rem var(--ks-brand));
+        -webkit-filter: drop-shadow(0 0 0.5rem var(--ks-brand));
+    }
+
+    100% {
+        filter: drop-shadow(0 0 0 var(--ks-brand));
+        -webkit-filter: drop-shadow(0 0 0 var(--ks-brand));
+    }
+}
\ No newline at end of file
diff --git a/dist/assets/css/gnb.css b/dist/assets/css/gnb.css
index 451ceca..0f95bb9 100644
--- a/dist/assets/css/gnb.css
+++ b/dist/assets/css/gnb.css
@@ -1,5 +1,5 @@
 /**
- * mkDocumentifyJS v0.2.3 (https://github.com/kkn1125/mkDocumentifyJS)
+ * mkDocumentifyJS v0.2.4 (https://github.com/kkn1125/mkDocumentifyJS)
  * Copyright 2021 Authors (https://github.com/kkn1125/mkDocumentifyJS/graphs/contributors) kkn1125, ohoraming
  * Licensed under MIT (https://github.com/kkn1125/mkDocumentifyJS/blob/main/LICENSE)
  */
@@ -18,6 +18,7 @@
   justify-content: space-between;
   padding: 10px;
   background-color: #5ec271;
+  max-height: 111px;
 }
 
 .gnb .file_name {
diff --git a/dist/assets/css/main.css b/dist/assets/css/main.css
index ca337df..9efed66 100644
--- a/dist/assets/css/main.css
+++ b/dist/assets/css/main.css
@@ -1,5 +1,5 @@
 /**
- * mkDocumentifyJS v0.2.3 (https://github.com/kkn1125/mkDocumentifyJS)
+ * mkDocumentifyJS v0.2.4 (https://github.com/kkn1125/mkDocumentifyJS)
  * Copyright 2021 Authors (https://github.com/kkn1125/mkDocumentifyJS/graphs/contributors) kkn1125, ohoraming
  * Licensed under MIT (https://github.com/kkn1125/mkDocumentifyJS/blob/main/LICENSE)
  */
@@ -254,4 +254,9 @@ button{
 
 a[href]{
     color: var(--ks-primary);
+}
+
+.main{
+  overflow-y: auto;
+  scroll-behavior: smooth;
 }
\ No newline at end of file
diff --git a/dist/assets/js/documentify.js b/dist/assets/js/documentify.js
index 276cde6..0597726 100644
--- a/dist/assets/js/documentify.js
+++ b/dist/assets/js/documentify.js
@@ -1,5 +1,5 @@
 /**!
- * mkDocumentifyJS v0.2.3 (https://github.com/kkn1125/mkDocumentifyJS)
+ * mkDocumentifyJS v0.2.4 (https://github.com/kkn1125/mkDocumentifyJS)
  * Copyright 2021 Authors (https://github.com/kkn1125/mkDocumentifyJS/graphs/contributors) kkn1125, ohoraming
  * Licensed under MIT (https://github.com/kkn1125/mkDocumentifyJS/blob/main/LICENSE)
  */
@@ -525,6 +525,7 @@ const Documentify = (function () {
                 if (xhr.status == 200 || xhr.status == 201) {
                     if (xhr.readyState == 4) {
                         page = JSON.parse(xhr.responseText).page;
+                        window.page = page;
                     }
                 }
             });
@@ -624,15 +625,16 @@ const Documentify = (function () {
 
         /**
          * 파일을 단일 페이지 모드로 압축 저장시키는 메서드
-         * @function fileSaveAsMutilplePage
+         * @function fileSaveAsSinglePage
          * @param {event} ev Controller에서 지정한 addEventListener의 click 타입의 이벤트
-         * @see View.fileSaveHandler,Zip
+         * @see View.fileSaveHandler
          */
         this.fileSaveAsSinglePage = function(ev){
             let main = this.getFileContents('dist/assets/css/main.css');
             let chat = this.getFileContents('dist/assets/css/chat.css');
             let gnb = this.getFileContents('dist/assets/css/gnb.css');
             let theme = this.getFileContents('dist/assets/js/theme.js');
+            theme = theme.replace("'use strict';", `'use strict';\n// page\nconst page = ${JSON.stringify(page)}`);
 
             let saveAsName = 'index.html';
 
@@ -666,13 +668,14 @@ const Documentify = (function () {
          * 파일을 분할 페이지 모드로 압축 저장시키는 메서드
          * @function fileSaveAsMutilplePage
          * @param {event} ev Controller에서 지정한 addEventListener의 click 타입의 이벤트
-         * @see View.fileSaveHandler,Zip
+         * @see Model.fileSaveHandler
          */
          this.fileSaveAsMutilplePage = function (ev) {
             let main = this.getFileContents('dist/assets/css/main.css');
             let chat = this.getFileContents('dist/assets/css/chat.css');
             let gnb = this.getFileContents('dist/assets/css/gnb.css');
             let theme = this.getFileContents('dist/assets/js/theme.js');
+            theme = theme.replace("'use strict';", `'use strict';\n// page\nconst page = ${JSON.stringify(page)}`);
 
             let saveAsName = 'index.html';
             let saveAsNameFunc = 'functions.html';
diff --git a/dist/assets/js/example.js b/dist/assets/js/example.js
index fa29168..553f078 100644
--- a/dist/assets/js/example.js
+++ b/dist/assets/js/example.js
@@ -1,5 +1,5 @@
 /**!
- * mkDocumentifyJS v0.2.3 (https://github.com/kkn1125/mkDocumentifyJS)
+ * mkDocumentifyJS v0.2.4 (https://github.com/kkn1125/mkDocumentifyJS)
  * Copyright 2021 Authors (https://github.com/kkn1125/mkDocumentifyJS/graphs/contributors) kkn1125, ohoraming
  * Licensed under MIT (https://github.com/kkn1125/mkDocumentifyJS/blob/main/LICENSE)
  */
diff --git a/dist/assets/js/theme.js b/dist/assets/js/theme.js
index 4e5a3f8..3c2341f 100644
--- a/dist/assets/js/theme.js
+++ b/dist/assets/js/theme.js
@@ -1,18 +1,11 @@
 /**!
- * mkDocumentifyJS v0.2.3 (https://github.com/kkn1125/mkDocumentifyJS)
+ * mkDocumentifyJS v0.2.4 (https://github.com/kkn1125/mkDocumentifyJS)
  * Copyright 2021 Authors (https://github.com/kkn1125/mkDocumentifyJS/graphs/contributors) kkn1125, ohoraming
  * Licensed under MIT (https://github.com/kkn1125/mkDocumentifyJS/blob/main/LICENSE)
  */
 
 'use strict';
 
-// delete 메뉴버튼 보류
-// window.addEventListener('click', function (ev) {
-//     if (ev.target.id == 'navbarSideCollapse' || ev.target.className == 'navbar-toggler-icon') {
-//         document.querySelector('.offcanvas-collapse').classList.toggle('open');
-//     }
-// });
-
 // recent popup delete | kimson 2021-10-22 16:25:02
 window.addEventListener('click', (ev) => {
     let target = ev.target;
@@ -45,14 +38,13 @@ setTimeout(() => {
  * 원문 코드 라인 이동 기능
  */
 document.addEventListener('click', lineMoveHandler);
-
 function lineMoveHandler(ev) {
     let target = ev.target;
     let check = document.querySelector('.check');
 
     if (check) check.classList.remove('check');
     if (target.tagName !== 'A' || target.dataset.type !== 'lineNum') return;
-
+    
     let lineNum = target.href.split('#')[1];
     let line = document.querySelector('#line-' + lineNum);
     line.scrollIntoView({
@@ -60,6 +52,7 @@ function lineMoveHandler(ev) {
         block: "center",
         inline: "nearest"
     });
+    
     line.classList.add('mark-line', 'check');
     setTimeout(() => {
         line.classList.remove('mark-line')
@@ -67,10 +60,19 @@ function lineMoveHandler(ev) {
 }
 
 document.addEventListener('click', anchorHandler);
-function anchorHandler(ev){
+
+function anchorHandler(ev) {
     let target = ev.target.closest('[data-anchor]');
-    if(!target || target.tagName !== 'A' || target.dataset.anchor !== 'top')return;
-    window.scrollTo({behavior:'smooth',left:0,top:0})
+    if (!target || target.tagName !== 'A') return;
+    ev.preventDefault();
+    
+    let anchor = target.dataset.anchor;
+    let main = document.querySelector('main.main');
+    main.scrollTo({
+        behavior: 'smooth',
+        left: 0,
+        top: anchor=='start'?0:anchor=='end'?main.scrollHeight:target.scrollTop
+    });
 }
 
 
@@ -78,6 +80,7 @@ function anchorHandler(ev){
  * modal 열고 닫기
  */
 let first = false;
+let turn = '';
 
 function motionAlertChatBtn() {
     setTimeout(() => {
@@ -88,8 +91,47 @@ function motionAlertChatBtn() {
 
 motionAlertChatBtn();
 
-document.addEventListener('click', chatHandler);
+const command = {
+    update: '<span class="fw-bold">업데이트</span> 내역을 확인하고 싶어요',
+    // darkMode: '다크모드를 적용하고 싶어요',
+    mail: '<span class="fw-bold">메일</span>로 <span class="fw-bold">문의</span>하고 싶어요',
+    dev: '<span class="fw-bold">만든 사람</span>이 궁금해요',
+    save: '페이지를 <span class="fw-bold">저장</span>하고 싶어요',
+    // tutorial: '튜토리얼을 보고 싶어요'
+};
+
+const answerList = {
+    mail: `<div class="fw-bold fs-5">메일 보내기</div>
+    <form name="mail" action="">
+        <div>작성자명</div>
+        <input name="author" type="text" class="form-control form-control-sm">
+        <div>내용</div>
+        <textarea name="content" class="form-control"></textarea>
+    </form>
+    <button id="sendBtn" class="btn btn-sm btn-success">메일 전송</button>
+    `,
+    update: `최근 업데이트된 내역입니다. <span class="badge bg-info">현재 버전 ${page.version}</span>`,
+    dev: function(){
+        let authors = page.authors.list.map(x => `<a target="_blank" href="${page.authors[x].github}"><img style="width: 42px; height: 42px;" class="rounded img-fluid" src="${page.authors[x].avatar}" alt="img"> ${x}</a>`);
+        return `<span class="fw-bold">개발자 리스트</span> <br> 클릭 시 깃허브로 이동합니다. <br><br> ${authors.join('<hr class="my-2">')}`;
+    }.call(),
+    save: `저장 방식을 선택해주세요.
+    <div id="saveas" class="saveas btn-group mt-2 text-center w-100 rounded-1">
+        <button class="btn btn-primary" data-save-type="single">단일</button>
+        <button class="btn btn-success" data-save-type="multi">분할</button>
+    </div>`,
+    info: '<span class="fw-bold">도와줘</span> 또는 <span class="fw-bold">명령어</span>를 입력하시면 입력 가능한 명령어가 출력됩니다.',
+    send: '문의사항이 전송되었습니다.',
+    notSend: '전송에 실패하였습니다. 특수문자가 있는지 확인해주세요.',
+    noMessage: '전송에 실패하였습니다. 공란이 있는지 확인해주세요.',
+};
+
+// 첫 안내문구
+const msg = document.querySelector('.chat-message');
+document.addEventListener('click', firstOpenListener);
 
+// 모달 핸들러
+document.addEventListener('click', chatHandler);
 function chatHandler(ev) {
     let target = ev.target;
     let modal = document.querySelector('.chat-modal');
@@ -108,59 +150,121 @@ function chatHandler(ev) {
     }
 }
 
-function generateBox(str, type, detail){
+function firstOpenListener(ev) {
+    if (!first) {
+        first = true;
+        msg.insertAdjacentElement('beforeend', generateBox('무엇을 도와드릴까요?', 'info'));
+        for (let type in command) {
+            msg.insertAdjacentElement('beforeend', generateBox(command[type], 'user', type));
+        }
+    }
+}
+
+function generateBox(str, type, detail) {
     let msgWrap = document.createElement('div');
     let msgBox = document.createElement('div');
+    let addDetail = detail ? ` needs-${detail}` : '';
     msgWrap.classList.add('msg-wrap');
-    msgBox.classList.add('msg-box', `msg-box-${type}`, `needs-${detail}`);
-    msgBox.innerHTML = str;
+    if(turn!==type){
+        let msgTitle = document.createElement('div');
+        msgTitle.classList.value = `msg-title-${type}`;
+        msgTitle.innerHTML = type.split(' ').shift() == 'info' ? 'Bot' : type;
+        msgBox.append(msgTitle);
+    }
+
+    let msgContent = document.createElement('div');
+    msgContent.classList.value = `msg-box msg-box-${type}${addDetail}`;
+    msgContent.innerHTML = `<div>${str}</div>`;
+    msgBox.append(msgContent);
+
+    msgBox.classList.add('msg-box-wrap');
     msgWrap.append(msgBox);
+    turn = type;
     return msgWrap;
 }
 
-// 첫 안내문구
-const msg = document.querySelector('.chat-message');
-document.addEventListener('click', firstOpenListener);
-
-let command = {
-    update: '업데이트 내역을 확인하고 싶어요',
-    darkMode: '다크모드를 적용하고 싶어요',
-    mail: '메일로 문의하고 싶어요',
-    dev: '만든 사람이 궁금해요',
-    tutorial: '튜토리얼을 보고 싶어요'
+// 버튼형 대화창 핸들러
+window.addEventListener('click', autoAnswer);
+function autoAnswer(ev) {
+    let target = ev.target;
+    if (target.tagName == 'DIV') {
+        if (target.classList.contains('needs-update')) {
+            insertUpdate();
+            answerDelay(answerList['update'], 'info');
+        } else if (target.classList.contains('needs-mail')) {
+            answerDelay(answerList['mail'], 'info mail');
+        } else if (target.classList.contains('needs-dev')) {
+            answerDelay(answerList['dev'], 'info');
+        } else if (target.classList.contains('needs-save')) {
+            answerDelay(answerList['save'], 'info');
+        }
+        // else if(target.classList.contains('needs-darkMode'))
+        //     answerDelay('다크모드입니다', 'info');
+        // else if(target.classList.contains('needs-tutorial'))
+        //     answerDelay('튜토리얼보기', 'info');
+    }
 }
 
-// 반복문으로 수정하기!!
-// 각 세부 연결 디테일 보충하기
-function firstOpenListener(ev){
-    if(!first){
-        first = true;
-        msg.insertAdjacentElement('beforeend', generateBox('무엇을 도와드릴까요?', 'info'));
-        msg.insertAdjacentElement('beforeend', generateBox('업데이트 내역을 확인하고 싶어요', 'user', 'update'));
-        msg.insertAdjacentElement('beforeend', generateBox('다크모드를 적용하고 싶어요', 'user', 'darkMode'));
-        msg.insertAdjacentElement('beforeend', generateBox('메일로 문의하고 싶어요', 'user', 'mail'));
-        msg.insertAdjacentElement('beforeend', generateBox('만든 사람이 궁금해요', 'user', 'dev'));
-        msg.insertAdjacentElement('beforeend', generateBox('튜토리얼을 보고 싶어요', 'user', 'tutorial'));
+// 유저 대화 입력 핸들러
+document.querySelector('.chat-bar input').addEventListener('keydown', userChatHandler);
+function userChatHandler(ev) {
+    let root = this;
+
+    function isThis(regex) {
+        return root.value.match(regex);
+    }
+
+    if (ev.key === 'Enter') {
+        if (this.value.length > 0) {
+            msg.append(generateBox(this.value, 'user'));
+            if (isThis(/메일|mail|전송|보내|문의/gm)) {
+                answerDelay(answerList['mail'], 'info mail');
+            } else if (isThis(/저장|save|세이브/gm)) {
+                answerDelay(answerList['save'], 'info');
+            } else if (this.value.match(isThis(/도움|도와|어떠|어떻|어떤|뭐|help/gm))) {
+                for (let type in command) {
+                    msg.insertAdjacentElement('beforeend', generateBox(command[type], 'info', type));
+                }
+            } else if (this.value.match(isThis(/만든|개발자|누가/gm))){
+                answerDelay(answerList['dev'], 'info');
+            } else if (this.value.match(isThis(/업데이트|최신|update/gm))){
+                insertUpdate();
+                answerDelay(answerList['update'], 'info');
+            } else {
+                answerDelay(answerList['info'], 'info');
+            }
+        } else {
+            floatWarning.call(this, 'help');
+        }
+        this.value = '';
+        scrollToEnd(1);
+        this.focus();
     }
 }
 
-// 안내문구 팝업 시간 단축하는 방향으로 수정하기
-function answerDelay(str, type){
+// 안내문구 지연
+function answerDelay(str, type) {
     let load = generateBox('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>', 'info');
     msg.append(load);
+    scrollToEnd(1);
     setTimeout(() => {
+        turn = '';
         load.insertAdjacentElement('beforebegin', generateBox(str, type));
         load.remove();
-        setTimeout(() => {
-            msg.lastChild.scrollIntoView({
-                behavior: 'smooth',
-                block: 'end',
-                inline: "nearest"
-            });
-        }, 500);
+        scrollToEnd();
     }, 2000);
 }
 
+function scrollToEnd(delay = 100) {
+    setTimeout(() => {
+        msg.scrollTo({
+            behavior: "smooth",
+            left: 0,
+            top: msg.scrollHeight
+        });
+    }, delay);
+}
+
 function insertUpdate() {
     setTimeout(() => {
         let cl = msg.firstElementChild.cloneNode(true);
@@ -168,77 +272,53 @@ function insertUpdate() {
     }, 2000);
 }
 
-window.addEventListener('click', autoAnswer);
-function autoAnswer(ev){
+// 메일 유효성 검사 후 전송
+window.addEventListener('click', sendMailHandler);
+function sendMailHandler(ev) {
     let target = ev.target;
-    if(target.tagName == 'DIV') {
-        if(target.classList.contains('needs-update'))
-            answerDelay('업데이트 내역입니다', 'info');
-        else if(target.classList.contains('needs-darkMode'))
-            answerDelay('다크모드입니다', 'info');
-        else if(target.classList.contains('needs-mail'))
-            answerDelay('클릭해서 메일 작성하기', 'info');
-        else if(target.classList.contains('needs-dev'))
-            answerDelay('만든 사람들입니다', 'info');
-        else if(target.classList.contains('needs-tutorial'))
-            answerDelay('튜토리얼보기', 'info');
-    } 
-}
+    if (target.id !== 'sendBtn') return;
+    let frm, author, content, arr;
+    frm = target.previousElementSibling;
+    arr = [author, content] = [frm.author, frm.content];
+    frm.parentNode.parentNode.parentNode.remove();
 
-document.querySelector('.chat-bar input').addEventListener('keydown', userChatHandler);
+    for(let valid of arr){
+        if (valid.value.match(/[^\wㄱ-힣\s]/gm)) {
+            answerDelay(answerList['notAllowedContent'], 'info');
+            return;
+        }
+        else if(valid.value.trim().length==0) {
+            answerDelay(answerList['noMessage'], 'info');
+            return;
+        }
+    }
 
-function userChatHandler(ev) {
-    let test = [
-        '현재 상태 좋습니다.',
-        '이정도면 잘 만들어 진거 맞죠?',
-        '테스트를 여러 번 해서 안좋을 것은 없죠.',
-        '저는 아직 많은 것을 배울 수 있어요.',
-    ];
-    let root = this;
+    answerDelay(answerList['send'], 'info');
+}
 
-    function isThis(regex) {
-        return root.value.match(regex);
-    }
+function floatWarning(type) {
+    let alam = document.createElement('span');
+    const msg = {
+        help: `명령어 도움말은 '도와줘' 또는 '?'를 입력하시면 입력가능한 명령어가 나옵니다.`,
+        notAllowedContent: `특수문자는 메일에 포함될 수 없습니다.`,
+        noMessage: `입력된 값 중 공란이 있습니다. 확인해주세요.`
+    };
 
-    if (ev.key === 'Enter') {
-        if (this.value.length > 0) {
-            msg.append(generateBox(this.value, 'user'));
-            if (isThis(/메일|mail|전송|보내/gm)) {
-                console.log('메일을 보냅니다.')
-            } else if (isThis(/저장|save|세이브/gm)) {
-                answerDelay(`저장 방식을 선택해주세요.
-                <div id="saveas" class="saveas btn-group mt-2 text-center w-100 rounded-1">
-                    <button class="btn btn-primary" data-save-type="single">단일</button>
-                    <button class="btn btn-success" data-save-type="multi">분할</button>
-                </div>
-                `, 'info');
-            } else if (this.value.match(isThis(/도움|\?|도와|어떠|어떻|어떤|뭐/gm))) {
-                answerDelay('test', 'info');
-            }
-        } else {
-            let alam = document.createElement('span');
-            alam.innerHTML = `명령어 도움말은 '도와줘' 또는 '?'를 입력하시면 입력가능한 명령어가 나옵니다.`;
-            alam.classList.add('alert', 'alert-warning', 'position-absolute', 'bottom-100', 'start-0', 'w-100');
-            alam.style.transition = '1s ease-in-out';
+    alam.innerHTML = msg[type];
+    alam.classList.add('alert', 'alert-warning', 'position-absolute', `bottom-100`, 'start-0', 'w-100');
+    alam.style.transition = '1s ease-in-out';
+    alam.style.opacity = 0;
+    alam.style.zIndex = 10;
+
+    document.querySelector('.chat-bar input').insertAdjacentElement('beforebegin', alam);
+    setTimeout(() => {
+        alam.style.opacity = 1;
+        setTimeout(() => {
             alam.style.opacity = 0;
-            this.insertAdjacentElement('beforebegin', alam);
-            setTimeout(() => {
-                alam.style.opacity = 1;
-                setTimeout(() => {
-                    alam.style.opacity = 0;
-                }, 3000);
-                setTimeout(() => {
-                    alam.remove();
-                }, 7000);
-            });
-        }
-        this.value = '';
-        msg.lastChild.scrollIntoView({
-            behavior: 'smooth',
-            block: 'end',
-            inline: "end"
-        });
-        this.focus();
-    }
+        }, 3000);
+        setTimeout(() => {
+            alam.remove();
+        }, 5000);
+    });
 }
-// 채팅 modal end
+// 채팅 modal end
\ No newline at end of file
diff --git a/dist/data/userData.json b/dist/data/userData.json
index 57788c7..19c1b49 100644
--- a/dist/data/userData.json
+++ b/dist/data/userData.json
@@ -1,6 +1,6 @@
 {
     "page": {
-        "version": "v0.2.3",
+        "version": "v0.2.4",
         "url": "https://kkn1125.github.io",
         "baseurl": "/",
         "name": "DocumentifyJS",
@@ -12,13 +12,15 @@
             ],
             "kimson": {
                 "name": "kyungnam",
+                "avatar": "https://avatars.githubusercontent.com/u/71887242?v=4",
                 "desc": "현재 백앤드 개발자를 준비하고 있는 예비 개발자입니다. 문의사항이나 버그발생은 '문의'라고 입력하셔서 내용을 남겨주시기 바랍니다.",
                 "github": "https://github.com/kkn1125/",
                 "blog": "https://kkn1125.github.io/"
             },
             "ohoraming": {
                 "name": "minji",
-                "desc": "",
+                "avatar": "https://avatars.githubusercontent.com/u/77590526?v=4",
+                "desc": "현재 백앤드 개발자를 준비하고 있는 예비 개발자입니다. 문의사항이나 버그발생은 '문의'라고 입력하셔서 내용을 남겨주시기 바랍니다.",
                 "github": "https://github.com/ohoraming/",
                 "blog": "https://ohoraming.github.io/"
             }
diff --git a/dist/include/chat-popup.html b/dist/include/chat-popup.html
index 7e4cfe7..24e9d87 100644
--- a/dist/include/chat-popup.html
+++ b/dist/include/chat-popup.html
@@ -2,7 +2,7 @@
     <div class="chat-modal">
         <div class="d-flex flex-column h-100">
             <div class="chat-title">
-                <span>title</span>
+                <span>ChatBot</span>
                 <span class="modal-del-btn">&times</span>
             </div>
             <div class="chat-content">
diff --git a/dist/include/footer.html b/dist/include/footer.html
index 05dc56e..5eb44cf 100644
--- a/dist/include/footer.html
+++ b/dist/include/footer.html
@@ -1,4 +1,4 @@
-<div class="bg-light p-3 mt-5 footer" id="footer">
+<div class="bg-light p-3 footer" id="footer">
     <div class="text-center container">
         <span class="badge text-muted p-3">
             Made by {@page.name@} at {@ new Date(docuPack.regdate).toLocaleString('ko-KR', {timeZone:
@@ -16,11 +16,11 @@
 </div>
 
 <div class="position-fixed" style="bottom: 15rem; right: 3rem;">
-    <a href="#" class="fs-5" style="color: var(--ks-brand);" data-anchor="top">
+    <a href="#" class="fs-5" style="color: var(--ks-brand);" data-anchor="start">
         <i class="fas fa-arrow-up" aria-hidden="true"></i>
     </a>
     <br>
-    <a href="#footer" class="fs-5" style="color: var(--ks-brand);">
+    <a href="#footer" class="fs-5" style="color: var(--ks-brand);" data-anchor="end">
         <i class="fas fa-arrow-down" aria-hidden="true"></i>
     </a>
 </div>
\ No newline at end of file
diff --git a/dist/include/updates.html b/dist/include/updates.html
index 4cbb599..a34f7b0 100644
--- a/dist/include/updates.html
+++ b/dist/include/updates.html
@@ -4,7 +4,7 @@
         <span class="display-5">📔</span>
         <div class="lh-1" style="flex: 1 0 0%;">
             <h1 class="h6 mb-0 text-white lh-1"></h1>
-            <span>업데이트 내역</span>
+            <span>{@page.version@} 업데이트 내역</span>
             <small>Since {@ new Date().getFullYear() @}</small>
         </div>
         <div>
@@ -22,7 +22,7 @@ <h5 class="border-bottom pb-2 mb-0">Recent updates</h5>
             <div class="d-flex text-muted pt-3">
                 <div style="padding-right:.5rem; flex: 0 0 42px; width: 42px; height: 42px; overflow: hidden;">
                     <img class="img-fluid bd-placeholder-img" style="border-radius: .3rem;"
-                        src="https://avatars.githubusercontent.com/u/71887242?v=4" alt="">
+                        src="${page.authors[author].avatar}" alt="">
                 </div>
 
                 <p class="pb-3 mb-0 small lh-sm border-bottom">