Merge pull request #29 from prnsslcn/frontend-ui

Feat: 디자인 색상 변경 및 category추가

Author: prnsslcn

frontend/chatbot-ui/src/api/getQuery.js

@@ -1,30 +1,31 @@
 import axios from "axios";
-import { customAxios } from "./axiosCustom"
+import { customAxios } from "./axiosCustom";
 
-export const postQuery = async ( user_input ) => {
-    try {
-        const response = await customAxios.post('/query', {user_input});
-        return response.data;
-    } catch (error) {
-        throw error;
-    }
-}
+// const response = await customAxios.post('/query', {user_input, category})
+export const postQuery = async (user_input, category) => {
+  try {
+    const response = await customAxios.post("/query", { user_input, category });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
 
 // json-server 테스트용
 export const getRecipes = async () => {
-    try {
-        const response = await axios.get('http://localhost:5000/0')
-        return response.data
-    } catch (error) {
-        throw error
-    }
-}
+  try {
+    const response = await axios.get("http://localhost:5000/0");
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
 
 export const postRecipes = async (user_input) => {
-    try {
-        const reponse = await customAxios.post('/recipes', user_input)
-        return reponse.data
-    } catch (error) {
-        throw error
-    }
-}
+  try {
+    const reponse = await customAxios.post("/recipes", user_input);
+    return reponse.data;
+  } catch (error) {
+    throw error;
+  }
+};

frontend/chatbot-ui/src/components/AllChatBubble.js

@@ -59,8 +59,8 @@ const AllChatBubble = () => {
               <div
                 className={`chat-bubble text-xl ${
                   message === "어떤 요리를 만들고 싶으세요?"
-                    ? "bg-yellow-400"
-                    : "bg-sky-400"
+                    ? "bg-lime-600 text-lime-50"
+                    : "bg-stone-200 text-stone-900"
                 }`}
               >
                 {message}
@@ -74,7 +74,7 @@ const AllChatBubble = () => {
           if (message.content) {
             return (
               <div key={index} className="chat chat-start">
-                <div className="chat-bubble bg-yellow-400 text-xl">
+                <div className="chat-bubble bg-lime-600 text-lime-50 text-xl">
                   {message.type === "text" ? (
                     <div>{message.content}</div>
                   ) : (
@@ -95,10 +95,10 @@ const AllChatBubble = () => {
   );
 
   return (
-    <div className="bg-white w-full h-full grow p-6 flex flex-col">
+    <div className="bg-white w-full h-full grow p-6 flex flex-col rounded-t-xl border-t border-l border-r border-stone-300">
       <div
         ref={chatContainerRef}
-        className="overflow-y-auto flex-grow max-h-[75vh] flex flex-col"
+        className="overflow-y-auto flex-grow max-h-[60vh] flex flex-col"
       >
         {renderedMessages}
         {callResponse && (
@@ -112,14 +112,14 @@ const AllChatBubble = () => {
           <div className="flex flex-col items-center my-6">
             {!showSteps ? (
               <button
-                className="btn bg-sky-400 w-1/3 text-2xl p-6"
+                className="btn bg-amber-500 text-amber-50 w-1/3 text-2xl p-6"
                 onClick={() => setShowSteps(true)}
               >
                 시작
               </button>
             ) : (
-              <div className="w-full flex flex-col items-center">
-                <ul className="steps steps-vertical w-2/3">
+              <div className="w-full flex items-center flex-col border-t border-stone-300 pt-4">
+                <ul className="steps steps-vertical">
                   {allMessages
                     .find((msg) => msg.recipe?.steps)
                     ?.recipe?.steps?.slice(0, currentStep + 1)
@@ -135,8 +135,8 @@ const AllChatBubble = () => {
                     (allMessages.find((msg) => msg.recipe?.steps)?.recipe?.steps
                       .length || 0) -
                       1
-                      ? "bg-emerald-400 text-emerald-900"
-                      : "bg-red-400 text-white"
+                      ? "bg-amber-600 text-amber-50"
+                      : "bg-red-600 text-red-50"
                   }`}
                   onClick={() => {
                     if (

frontend/chatbot-ui/src/components/LoadingSpinner.js

@@ -1,7 +1,7 @@
 export const LoadingSpinner = () => {
   return (
     <div className="chat chat-start">
-      <div className="chat-bubble bg-yellow-400 text-xl">
+      <div className="chat-bubble bg-lime-600 text-lime-50 text-xl">
         <div className="loading loading-infinity loading-xl"></div>
       </div>
     </div>

frontend/chatbot-ui/src/components/UserInput.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useChat } from "../context/ChatContext";
+import { postQuery } from "../api/getQuery";
 
 export const UserInput = () => {
   const [userInput, setUserInput] = useState("");
@@ -17,23 +18,41 @@ export const UserInput = () => {
   const category = ["한식", "일식", "중식", "양식"];
 
   const handleSubmit = async () => {
+    if (!optionCheck) {
+      const noCategoryMessage = {
+        type: "text",
+        content: "🚨 카테고리를 선택해주세요.",
+      };
+      setMessages((prev) => [...prev, noCategoryMessage]);
+      setAllMessages((prev) => [...prev, noCategoryMessage]);
+      return;
+    }
+
     if (userInput.trim() !== "" && !isAiResponding) {
       setMessages((prevMessages) => [...prevMessages, userInput]);
       setAllMessages((prevMessages) => [...prevMessages, userInput]);
       setCallResponse(true);
       setUserInput("");
+
+      try {
+        const response = await postQuery(userInput, optionCheck);
+        console.log(response);
+      } catch (err) {
+        console.log(err);
+      }
     }
   };
 
-  const handleKeyDown = (e) => {
+  const handleKeyUp = (e) => {
     if (e.key === "Enter") {
       e.preventDefault();
       handleSubmit();
     }
   };
 
   return (
-    <div className="bg-white p-6 rounded-lg shadow-md">
+    <div className="bg-white p-6 relative rounded-b-xl border-b border-l border-r border-stone-300">
+      <div className="font-semibold mb-2 text-lime-950">카테고리(필수)</div>
       <div className="flex space-x-4 mb-4">
         {category.map((category, idx) => (
           <label key={idx} className="flex items-center space-x-2">
@@ -47,18 +66,17 @@ export const UserInput = () => {
           </label>
         ))}
       </div>
-
       <div className="relative flex items-center">
         <input
           type="text"
           placeholder="만들고 싶은 요리를 입력해주세요"
           className="input input-xl w-full pr-28 p-3 border border-gray-300 rounded-lg focus:outline-none"
           value={userInput}
           onChange={handleInputChange}
-          onKeyUp={handleKeyDown}
+          onKeyUp={handleKeyUp}
         />
         <button
-          className="btn absolute right-9 top-1/2 transform -translate-y-1/2"
+          className="btn absolute right-5 top-1/2 transform -translate-y-1/2"
           onClick={handleSubmit}
           disabled={isAiResponding}
         >

frontend/chatbot-ui/src/context/ChatContext.js

@@ -7,7 +7,7 @@ export const ChatProvider = ({ children }) => {
   const [aiResponse, setAiResponse] = useState([]);
   const [callResponse, setCallResponse] = useState(false);
   const [allMessages, setAllMessages] = useState([
-    "어떤 요리를 만들고 싶으세요?"
+    "어떤 요리를 만들고 싶으세요?",
   ]);
   const [isAiResponding, setIsAiResponding] = useState(false);
   const [optionCheck, setOptionCheck] = useState("");
@@ -25,7 +25,8 @@ export const ChatProvider = ({ children }) => {
         setAllMessages,
         isAiResponding,
         setIsAiResponding,
-        optionCheck, setOptionCheck
+        optionCheck,
+        setOptionCheck,
       }}
     >
       {children}

frontend/chatbot-ui/src/index.css

@@ -1,3 +1,11 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+[data-theme="light"] {
+  --color-primary: oklch(70% 0.3 310); /* ✅ primary 색상 변경 */
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
@@ -21,6 +29,20 @@ code {
 .steps .step {
   text-align: left !important;
 }
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+
+.steps .step > .step-icon,
+.steps .step:not(:has(.step-icon)):after,
+.steps .step:not(:has(.step-icon)):before {
+  background-color: oklch(76% 0.188 70.08);
+  border: 1px solid oklch(76% 0.188 70.08);
+  color: oklch(98% 0.022 95.277);
+}
+
+.checkbox-primary {
+  border: 1px solid oklch(53% 0.157 131.589);
+  --input-color: oklch(53% 0.157 131.589);
+}
+
+.checkbox checkbox-primary span {
+  color: oklch(27% 0.072 132.109);
+}

frontend/chatbot-ui/src/pages/Home.js

@@ -3,17 +3,15 @@ import AllChatBubble from "../components/AllChatBubble";
 import { UserInput } from "../components/UserInput";
 
 export default function Home() {
-
-    return (
-        <div className="bg-gray-300 p-10 min-h-screen flex flex-col">
-            <AiChatValidate/>
-            <AllChatBubble/>
-            <UserInput/>
-        </div>
-    );
+  return (
+    <div className="bg-stone-200 p-10 min-h-screen flex flex-col">
+      <AiChatValidate />
+      <AllChatBubble />
+      <UserInput />
+    </div>
+  );
 }
 
 /*
 2025-03-17-14:40 pull develop
 */
-