update chat ui -- add expand btn & update icons

src/css/toc.css

@@ -132,7 +132,16 @@
   /* overflow: hidden; */
   background-color: #fff;
   box-shadow: 0 1px 2px 1px rgba(47, 56, 61, 0.15), 0 1px 2px rgba(47, 56, 61, 0.2);
-  border-radius: 30px;
+  border-radius: 12px;
+}
+
+.chat.expand {
+  width: 830px;
+  height: 650px;
+  /* overflow: hidden; */
+  background-color: #fff;
+  box-shadow: 0 1px 2px 1px rgba(47, 56, 61, 0.15), 0 1px 2px rgba(47, 56, 61, 0.2);
+  border-radius: 12px;
 }
 
 .chat.show {
@@ -146,8 +155,8 @@
   padding: 0 1.5rem;
   background-color: var(--color-bwg-main);
   height: 80px;
-  border-top-left-radius: 30px;
-  border-top-right-radius: 30px;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
   color: var(--color-white);
 }
 
@@ -166,6 +175,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  flex-grow: 1;
 }
 
 .chat-logo-title-contents .chat-logo-title {
@@ -178,6 +188,26 @@
   font-weight: 300;
 }
 
+#expand-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 35px;
+  height: 35px;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: 300ms ease;
+}
+
+#expand-btn:hover {
+  cursor: pointer;
+  background-color: #005bb5;
+}
+
+#expand-btn:active svg {
+  transform: scale(0.9);
+}
+
 .chat .chat-body {
   padding: 1rem;
   height: 420px;
@@ -224,8 +254,8 @@
 .chat .chat-area {
   display: flex;
   justify-content: center;
-  height: 80px;
-  padding: 5px;
+  height: 100px;
+  padding: 10px;
   padding-right: 1rem;
   gap: 10px;
 }
@@ -234,8 +264,8 @@
   border: none;
   outline: none;
   width: 100%;
-  height: 55px;
-  padding: 10px;
+  /* height: 55px; */
+  height: 100%;
   resize: none; /* 사용자가 크기를 변경하지 못하게 설정 */
   font-size: 16px;
   line-height: 1.5;
@@ -249,7 +279,7 @@
   display: flex;
   align-items: center;
   width: 40px;
-  height: 70px;
+  height: 100%;
 }
 
 #send-btn {

src/js/08-chat.js

@@ -7,6 +7,7 @@
   const chatTextArea = document.getElementById('chat-input')
   const sendButton = document.getElementById('send-btn')
   const chatBody = document.querySelector('.sidebar .chat .chat-body')
+  const expandButton = document.querySelector('#expand-btn svg')
 
   let INIT = false
   let isComposing = false
@@ -14,18 +15,42 @@
 
   const openIconPath = `
     <path stroke-linecap="round" stroke-linejoin="round"
-      d="M7.188 10a.312.312 0 1 1-.625 0
-      .312.312 0 0 1 .625 0Zm0 0h-.313m3.438 0a.312.312 0
-      1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.313m3.437 0a.312.312 0
-      1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.312M17.5 10c0 3.797-3.353
-      6.875-7.5 6.875a8.735 8.735 0 0 1-2.292-.303 5.368 5.368 0 0 1-3.639
-      1.576 5.364 5.364 0 0 1-.428-.059 4.025 4.025 0 0 0 .88-1.818c.081-.409
-      -.12-.806-.422-1.098C3.273 13.484 2.5 11.825 2.5 10c0-3.797 3.353-6.875
-      7.5-6.875s7.5 3.078 7.5 6.875Z"></path>
+    d="M7.188 10a.312.312 0 1 1-.625 0
+    .312.312 0 0 1 .625 0Zm0 0h-.313m3.438 0a.312.312 0
+    1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.313m3.437 0a.312.312 0
+    1 1-.625 0 .312.312 0 0 1 .625 0Zm0 0h-.312M17.5 10c0 3.797-3.353
+    6.875-7.5 6.875a8.735 8.735 0 0 1-2.292-.303 5.368 5.368 0 0 1-3.639
+    1.576 5.364 5.364 0 0 1-.428-.059 4.025 4.025 0 0 0 .88-1.818c.081-.409
+    -.12-.806-.422-1.098C3.273 13.484 2.5 11.825 2.5 10c0-3.797 3.353-6.875
+    7.5-6.875s7.5 3.078 7.5 6.875Z"></path>
   `
   const closeIconPath = `
-    <path stroke-linecap="round" stroke-linejoin="round"
-      d="M6 18 18 6M6 6l12 12"></path>
+    <path clip-rule="evenodd" fill-rule="evenodd"
+    d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12
+    14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z"></path>
+  `
+
+  const collapseIconPath = `
+    <path
+    d="M3.28 2.22a.75.75 0 0 0-1.06 1.06L5.44 6.5H2.75a.75.75 0 0 0 0 1.5h4.5
+    A.75.75 0 0 0 8 7.25v-4.5a.75.75 0 0 0-1.5 0v2.69L3.28 2.22ZM13.5 2.75
+    a.75.75 0 0 0-1.5 0v4.5c0 .414.336.75.75.75h4.5a.75.75 0 0 0 0-1.5h-2.69l3.22-3.22
+    a.75.75 0 0 0-1.06-1.06L13.5 5.44V2.75ZM3.28 17.78l3.22-3.22v2.69a.75.75 0 0 0 1.5
+    0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75
+    0 1 0 1.06 1.06ZM13.5 14.56l3.22 3.22a.75.75 0 1 0 1.06-1.06l-3.22-3.22h2.69
+    a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 0 1.5 0v-2.69Z">
+    </path>
+  `
+
+  const expandIconPath = `
+    <path d="
+    m13.28 7.78 3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75
+    0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 0 0 1.06 1.06ZM2 17.25v-4.5a.75.75 0 0 1 1.5 0v2.69l3.22-3.22a.75.75
+    0 0 1 1.06 1.06L4.56 16.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.747.747 0 0 1-.75-.75ZM12.22
+    13.28l3.22 3.22h-2.69a.75.75 0 0 0 0 1.5h4.5a.747.747 0 0 0 .75-.75v-4.5a.75.75
+    0 0 0-1.5 0v2.69l-3.22-3.22a.75.75 0 1 0-1.06 1.06ZM3.5 4.56l3.22 3.22a.75.75
+    0 0 0 1.06-1.06L4.56 3.5h2.69a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 0 1.5 0V4.56Z">
+    </path>
   `
 
   function initializeChat () {
@@ -72,7 +97,7 @@
       chatIcon.innerHTML = closeIconPath
       chatIcon.setAttribute('fill', 'none')
       chatIcon.setAttribute('stroke', '#fff')
-      chatIcon.setAttribute('viewBox', '0 0 24 24')
+      chatIcon.setAttribute('viewBox', '0 -1 24 24')
     } else {
       chatIcon.innerHTML = openIconPath
       chatIcon.setAttribute('fill', '#fff')
@@ -85,6 +110,22 @@
     }
   })
 
+  expandButton.addEventListener('click', () => {
+    expandButton.classList.toggle('expand')
+
+    if (expandButton.classList.contains('expand')) {
+      expandButton.innerHTML = collapseIconPath
+      expandButton.setAttribute('fill', '#fff')
+      expandButton.setAttribute('viewBox', '0 0 20 20')
+      chat?.classList.add('expand')
+    } else {
+      expandButton.innerHTML = expandIconPath
+      expandButton.setAttribute('fill', '#fff')
+      expandButton.setAttribute('viewBox', '0 0 20 20')
+      chat?.classList.remove('expand')
+    }
+  })
+
   function handleUserMessage (message) {
     if (message.trim() !== '') {
       addMessageToChatBody(message)

src/partials/toc.hbs

@@ -12,6 +12,11 @@
         <span class="chat-logo-title">SWLab</span>
         <span class="chat-logo-title sub">Bankware Global</span>
       </div>
+      <div id="expand-btn">
+        <svg data-slot="icon" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="30" height="30">
+          <path d="m13.28 7.78 3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 0 0 1.06 1.06ZM2 17.25v-4.5a.75.75 0 0 1 1.5 0v2.69l3.22-3.22a.75.75 0 0 1 1.06 1.06L4.56 16.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.747.747 0 0 1-.75-.75ZM12.22 13.28l3.22 3.22h-2.69a.75.75 0 0 0 0 1.5h4.5a.747.747 0 0 0 .75-.75v-4.5a.75.75 0 0 0-1.5 0v2.69l-3.22-3.22a.75.75 0 1 0-1.06 1.06ZM3.5 4.56l3.22 3.22a.75.75 0 0 0 1.06-1.06L4.56 3.5h2.69a.75.75 0 0 0 0-1.5h-4.5a.75.75 0 0 0-.75.75v4.5a.75.75 0 0 0 1.5 0V4.56Z"></path>
+        </svg>
+      </div>
     </div>
     <div class="chat-body"></div>
     <form class="chat-area">