update chat btn

src/css/toc.css

@@ -100,7 +100,7 @@
   background: var(--color-blue-10);
 }
 
-.sidebar .capture-btn {
+.sidebar .chat-btn {
   cursor: pointer;
   display: flex;
   justify-content: center;
@@ -115,81 +115,92 @@
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
 }
 
-.sidebar .capture-btn:hover {
+.sidebar .chat-btn:hover {
   transition: transform 0.2s ease-in-out;
   background-color: rgba(0, 114, 206, 0.8);
   transform: scale(1.1);
 }
 
-.sidebar .capture-btn > i {
-  background: url(../img/ico-camera.svg) no-repeat center;
-  display: inline-block;
-  width: 22px;
-  height: 22px;
-}
-
-.capture-modal {
+.chat {
   display: none;
   position: fixed;
   z-index: 1000;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background-color: rgba(0, 0, 0, 0.6);
+  right: 10px;
+  bottom: 100px;
+  width: 415px;
+  height: 600px;
+  /* 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;
 }
 
-.capture-modal .button-container {
-  position: absolute;
-  top: 20px;
-  right: 25px;
+.chat.show {
   display: flex;
-  align-items: center;
-  color: var(--color-white);
-  cursor: pointer;
+  flex-direction: column;
 }
 
-.capture-modal .button-container .close {
-  font-size: 40px;
-  font-weight: bold;
+.chat .chat-head {
+  background-color: var(--color-bwg-main);
+  height: 100px;
+  border-top-left-radius: 30px;
+  border-top-right-radius: 30px;
 }
 
-.capture-modal .button-container .close:hover {
-  transform: translateY(-3px);
-  transition: 200ms ease;
+.chat .chat-body {
+  padding: 1rem;
+  height: 420px;
+  border-bottom: 1px solid var(--color-bwg-main);
+  overflow-y: auto;
 }
 
-.capture-modal .button-container > i {
-  background: url(../img/ico-capture-download.svg) no-repeat center;
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  margin-right: 20px;
+.chat .chat-area {
+  display: flex;
+  justify-content: center;
+  height: 80px;
+  padding: 5px;
+  padding-right: 1rem;
 }
 
-.capture-modal .button-container > i:hover {
-  transform: translateY(-3px);
-  transition: 200ms ease;
+.chat .chat-area textarea {
+  border: none;
+  outline: none;
+  padding: 0;
+  width: 100%;
+  height: 55px;
+  padding: 10px;
+  resize: none; /* 사용자가 크기를 변경하지 못하게 설정 */
+  font-size: 16px;
+  line-height: 1.5;
 }
 
-.capture-modal > img {
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  left: 0;
-  opacity: 1;
-  transform: scale(0.8);
-  z-index: 99999;
-}
-
-.capture-modal-content {
-  background-color: #fefefe;
-  margin: 15% auto;
-  padding: 20px;
-  border: 1px solid #888;
-  width: 80%;
-  max-width: 500px;
-  text-align: center;
+.chat .chat-area textarea:focus {
+  outline: none;
+}
+
+.chat .chat-area .chat-btn-area {
+  display: flex;
+  align-items: center;
+  width: 40px;
+  height: 70px;
+}
+
+.chat .chat-area .chat-btn-area .send-btn {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: var(--color-bwg-main);
+}
+
+.chat .chat-area .chat-btn-area .send-btn:active {
+  opacity: 0.7;
+  transition: 0.3ms ease;
+}
+
+.chat .chat-area .chat-btn-area .send-btn svg{
+  margin-left: 2px;
 }

src/img/ico-camera.svg

-<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M149.1 64.8L138.7 96H64C28.7 96 0 124.7 0 160V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H373.3L362.9 64.8C356.4 45.2 338.1 32 317.4 32H194.6c-20.7 0-39 13.2-45.5 32.8zM256 192a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/></svg>

src/js/08-capture.js

-;(function () {
-  'use strict'
-
-  var captureBody = document.getElementById('capture')
-  var captureButton = document.querySelector('.sidebar .capture-btn')
-  var captureModal = document.querySelector('.sidebar .capture-modal')
-  var closeCaptureModalButton = document.querySelector('.sidebar .capture-modal .close')
-  var screenshotImg = document.getElementById('screenshot')
-  var saveButton = document.getElementById('save-btn')
-
-  captureButton.addEventListener('click', () => {
-    const viewportWidth = window.innerWidth
-    const viewportHeight = window.innerHeight
-    const scrollX = window.scrollX
-    const scrollY = window.scrollY
-
-    html2canvas(captureBody, {
-      allowTaint: true,
-      x: scrollX,
-      y: scrollY,
-      width: viewportWidth,
-      height: viewportHeight,
-      scrollX: 0, // reset scrollX for canvas capturing
-      scrollY: 0, // reset scrollY for canvas capturing
-      scale: 1.3,
-    }).then(canvas => {
-      screenshotImg.src = canvas.toDataURL()
-      captureModal.style.display = 'block'
-    })
-  })
-
-  closeCaptureModalButton.addEventListener('click', () => {
-    captureModal.style.display = 'none'
-  })
-
-  saveButton.addEventListener('click', () => {
-    var link = document.createElement('a')
-
-    link.href = screenshotImg.src
-    link.download = 'screenshot.png'
-    link.click()
-
-    document.removeChild(link)
-  })
-})()

src/js/08-chat.js

+;(function () {
+  'use strict'
+
+  const chatButton = document.querySelector('.sidebar .chat-btn')
+  const chat = document.querySelector('.sidebar .chat')
+  const chatIcon = document.querySelector('.sidebar .chat-btn svg')
+
+  // 기본 아이콘과 변경할 아이콘의 SVG 경로 데이터
+  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>
+  `
+  const closeIconPath = `
+    <path stroke-linecap="round" stroke-linejoin="round"
+      d="M6 18 18 6M6 6l12 12"></path>
+  `
+
+  chatButton.addEventListener('click', () => {
+    chat.classList.toggle('show')
+
+    if (chat.classList.contains('show')) {
+      chatIcon.innerHTML = closeIconPath
+      chatIcon.setAttribute('fill', 'none')
+      chatIcon.setAttribute('stroke', '#fff')
+      chatIcon.setAttribute('viewBox', '0 0 24 24')
+    } else {
+      chatIcon.innerHTML = openIconPath
+      chatIcon.setAttribute('fill', '#fff')
+      chatIcon.setAttribute('stroke', '#0072ce')
+      chatIcon.setAttribute('viewBox', '0 0 20 20')
+    }
+  })
+})()

src/layouts/default.hbs

@@ -3,7 +3,7 @@
   <head>
 {{> head defaultPageTitle='Untitled'}}
   </head>
-  <body id="capture" class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
+  <body class="article{{#with (or page.attributes.role page.role)}} {{{this}}}{{/with}}">
 {{> header}}
 {{> body}}
 {{!-- {{> footer}} --}}

src/partials/footer-scripts.hbs

 <script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}"></script>
-<script async src="{{{uiRootPath}}}/js/vendor/html2canvas.js"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
 {{#if env.SITE_SEARCH_PROVIDER}}
 {{> search-scripts}}

src/partials/toc.hbs

 <aside class="toc sidebar" data-title="{{{or page.attributes.toctitle 'Contents'}}}" data-levels="{{{or page.attributes.toclevels 2}}}">
   <div class="toc-menu"></div>
-  <div class="capture-btn"><i></i></div>
-  <div class="capture-modal">
-    <div class="button-container">
-      <i id="save-btn"></i>
-      <span class="close">&times;</span>
+  {{!-- <div class="chat-btn">
+    <svg id="chat-icon" data-slot="icon" fill="#fff" stroke-width="1.5" stroke="#0072ce" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="32" height="32">
+      <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>
+    </svg>
+  </div> --}}
+  <div class="chat">
+    <div class="chat-head">
+
+    </div>
+    <div class="chat-body">
+
+    </div>
+    <div class="chat-area">
+      <textarea id="chat-input" placeholder="무엇을 도와드릴까요?"></textarea>
+      <div class="chat-btn-area">
+        <div class="send-btn">
+          <svg data-slot="icon" fill="#fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="20" height="20">
+            <path d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z"></path>
+          </svg>
+        </div>
+      </div>
     </div>
-    <img id="screenshot" src="" alt="Screenshot" crossorigin="anonymous">
   </div>
 </aside>