Update : gpt api 응답값 수정

MajorIn-ABO · Aug 1, 2024 · 8af67ed · 8af67ed
1 parent bea655e
commit 8af67ed
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/src/components/mentoring/MenteeChat.tsx b/src/components/mentoring/MenteeChat.tsx
@@ -7,6 +7,7 @@ import axios from "axios";
 interface ChatMessage {
   sender: "me" | "gpt";
   text: string;
+  question: string;
   time: string;
 }
 
@@ -29,7 +30,7 @@ const MenteeChat = () => {
 
       setChatMessages((prevMessages) => [
         ...prevMessages,
-        { sender: "me", text: message, time: currentTime },
+        { sender: "me", text: message, time: currentTime, question: "" },
       ]);
       const userMessage = message;
       setMessage("");
@@ -59,8 +60,9 @@ const MenteeChat = () => {
             ...prevMessages,
             {
               sender: "gpt",
-              text: response.data.chat_response,
+              text: response.data.gpt_response,
               time: replyTime,
+              question: response.data.question,
             },
           ]);
         } else {
@@ -97,7 +99,10 @@ const MenteeChat = () => {
                   </>
                 ) : (
                   <>
-                    <p>{msg.text}</p>
+                    <div>
+                      <p>{msg.text}</p>
+                      <p className="balloon">{msg.question}</p>
+                    </div>
                     <span className="message-time">{msg.time}</span>
                   </>
                 )}

diff --git a/src/styles/mentoring/MenteeChat.scss b/src/styles/mentoring/MenteeChat.scss
@@ -70,10 +70,19 @@
           color: #1b1c3a;
           border-radius: 10px;
           padding: 5px 10px;
+          margin-bottom: 5px;
+        }
+        .balloon {
+          background: #d9d9d9;
+          color: #1b1c3a;
+          border-radius: 10px;
+          padding: 5px 10px;
+          margin-bottom: 5px;
+          position: relative;
         }
       }
 
-      .gpt-message::after {
+      .balloon::after {
         content: "";
         position: absolute;
         top: 50%;