update chat -- session storage

src/js/08-chat.js

@@ -60,6 +60,25 @@
     </path>
   `
 
+  // 페이지 로드 시 sessionStorage에서 메시지 불러오기
+  window.addEventListener('load', () => {
+    const storedMessages = sessionStorage.getItem('messages')
+    if (storedMessages) {
+      const messages = JSON.parse(storedMessages)
+      messages.forEach(({ type, text }) => {
+        const messageItem = document.createElement('pre')
+        messageItem.className = `message ${type}`
+        messageItem.textContent = text
+        chatBody.appendChild(messageItem)
+      })
+      chatBody.scrollTop = chatBody.scrollHeight
+    } else {
+      // 메시지가 없을 경우 초기 메시지 추가
+      const initMessage = '제품 매뉴얼 가이드에 대한 도움을 드리겠습니다. 제품 선택 시 더 정확한 답변을 제공해 드립니다.'
+      createAiMessage(initMessage)
+    }
+  })
+
   chatButton.addEventListener('click', () => {
     chat.classList.toggle('show')
 
@@ -157,14 +176,6 @@
 
   function initializeChat () {
     if (!INIT) {
-      const messageItem = document.createElement('pre')
-      messageItem.className = 'message ai'
-      messageItem.textContent = '제품 매뉴얼 가이드에 대한 도움을 드리겠습니다. 제품 선택 시 더 정확한 답변을 제공해 드립니다.'
-      chatBody.appendChild(messageItem)
-
-      INIT = true
-
-      // Composition events
       chatTextArea.addEventListener('compositionstart', () => {
         isComposing = true
       })
@@ -196,6 +207,8 @@
         stopButton.classList.remove('active')
         sendButton.classList.add('active')
       })
+
+      INIT = true
     }
   }
 
@@ -206,6 +219,12 @@
     }
   }
 
+  function saveMessagesToStorage (type, text) {
+    let messages = JSON.parse(sessionStorage.getItem('messages')) || []
+    messages.push({ type, text })
+    sessionStorage.setItem('messages', JSON.stringify(messages))
+  }
+
   function addMessageToChatBody (message) {
     if (message.trim() !== '') {
       const user = document.createElement('pre')
@@ -214,6 +233,8 @@
       chatBody.appendChild(user)
       chatBody.scrollTop = chatBody.scrollHeight
 
+      saveMessagesToStorage('user', message)
+
       const chatLoader = document.createElement('div')
       chatLoader.className = 'chat-loader'
       const loader = document.createElement('div')
@@ -280,20 +301,24 @@
   // 타이핑 효과 함수
   function typeEffect (element, text, speed = 50) {
     let index = 0
+    let partialMessage = ''
 
     function type () {
       if (isPause) {
+        saveMessagesToStorage('ai', partialMessage)
         isPause = false
         isWriting = false
         return
       }
 
       if (index < text.length) {
-        element.textContent += text.charAt(index)
+        partialMessage += text.charAt(index)
+        element.textContent = partialMessage
         chatBody.scrollTop = chatBody.scrollHeight
         index++
         setTimeout(type, speed) // 한글자씩 추가
       } else {
+        saveMessagesToStorage('ai', element.textContent)
         sendButton.classList.add('active')
         stopButton.classList.remove('active')
         isWriting = false