From 2f88e895ea487638558361650d5c310fc3821c3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=84=8B=E1=85=B2=E1=86=AB=E1=84=8B=E1=85=A7=E1=86=BC?=
 =?UTF-8?q?=E1=84=86=E1=85=B5?= <maie421@naver.com>
Date: Wed, 3 Jan 2024 17:03:32 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20=EC=A7=88=EB=AC=B8=20=ED=96=88?=
 =?UTF-8?q?=EB=8A=94=EB=8D=B0=20=ED=95=B4=EB=8B=B9=20=EC=83=81=ED=92=88?=
 =?UTF-8?q?=EC=9D=B4=20=EC=A1=B4=EC=9E=AC=20=ED=95=A0=EA=B2=BD=EC=9A=B0=20?=
 =?UTF-8?q?=EC=B1=97=EB=B4=87=EC=97=90=20=EB=85=B8=EC=B6=9C=20=EB=90=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/static/js/chat_gpt.js   | 45 +++++++++++++++++++++++++++++++------
 web/templates/aiSearch.html | 10 ++++-----
 2 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/web/static/js/chat_gpt.js b/web/static/js/chat_gpt.js
index 95cba9e..dd3c4e4 100644
--- a/web/static/js/chat_gpt.js
+++ b/web/static/js/chat_gpt.js
@@ -30,6 +30,38 @@ function addMessage(content, isUser) {
   chatMessages.scrollTop = chatMessages.scrollHeight;
 }
 
+function addProductElement(productData) {
+    let chatMessages = document.getElementById('chat-messages');
+    let newDiv = document.createElement('div');
+    newDiv.className = 'd-flex mb-4';
+    newDiv.style.width = '50px';
+    newDiv.style.marginLeft = '19px';
+
+    let discount_rate = Math.round(productData.discount_rate);
+    let increase_rate = Math.round(productData.increase_rate);
+
+    newDiv.innerHTML = `
+        <div class="col mb-3">
+            <a href="/product?pid=5071428226">
+                <div class="card h-100">
+                    <img class="card-img-top" src="${productData.image}" alt="${productData.name}">
+                    <div class="card-body p-4">
+                        <div class="text-center">
+                            <h5 class="fw-bolder two-line-text">${productData.name}</h5>
+                            ${discount_rate > 0 ? `<span class="discount-box" style="background-color: red;">▼ ${discount_rate}%</span>` : ''}
+                            ${increase_rate > 0 ? `<span class="discount-box" style="background-color: #14AF40;">▲ ${increase_rate}%</span>` : ''}
+                            ${productData.avg_price}원
+                        </div>
+                    </div>
+                </div>
+            </a>
+        </div>
+    `;
+
+    chatMessages.insertBefore(newDiv, chatMessages.firstChild);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
 async function fetchAIResponse(prompt) {
     const requestOptions = {
         method: 'POST',
@@ -91,14 +123,13 @@ sendButton.addEventListener('click', async () => {
     const productResponse = await fetchProductResponse(message);
     let productData = productResponse['products']['0'];
     if (productData !== undefined)
-        addMessage(`/product?pid=${productData['product_id']}`, false);
-        console.log(productData);
-});
-userInput.addEventListener('keydown', (event) => {
-    if (event.key === 'Enter') {
-        sendButton.click();
-    }
+        addProductElement(productData);
 });
+// userInput.addEventListener('keydown', (event) => {
+//     if (event.key === 'Enter') {
+//         sendButton.click();
+//     }
+// });
 
 document.getElementById('open-chat').addEventListener('click', function() {
    var chatContainer = document.getElementById('chat-container');
diff --git a/web/templates/aiSearch.html b/web/templates/aiSearch.html
index d8ff6a6..083b0e9 100644
--- a/web/templates/aiSearch.html
+++ b/web/templates/aiSearch.html
@@ -1,13 +1,13 @@
 <section>
     <div class="container px-4 px-lg-5 d-flex justify-content-center">
         <div id="chat-container">
-             <div id="chat-messages">
-             </div>
-             <div id="user-input">
-                <input type="text" placeholder="메시지를 입력하세요..." />
-             <button>전송</button>
+            <div id="chat-messages">
             </div>
+            <div id="user-input">
+                <input type="text" placeholder="메시지를 입력하세요..."/>
+                <button>전송</button>
             </div>
         </div>
     </div>
+    </div>
 </section>
\ No newline at end of file