Merge pull request #27 from Work-Plate/develop

Deploy

.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.env

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "axios": "^1.7.7",
     "jotai": "^2.10.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/apis/aiInstance.js

@@ -0,0 +1,9 @@
+import axios from "axios";
+
+export const aiInstance = axios.create({
+  baseURL: import.meta.env.VITE_AI_BASE_URL,
+  withCredentials: false,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});

src/apis/chatbot.js

@@ -0,0 +1,21 @@
+import { aiInstance } from "./aiInstance";
+
+/**
+ * 사용자 메시지를 AI 챗봇 서버로 전송
+ * @param {string} userMessage - 사용자 메시지
+ * @param {string} memberId - 사용자 ID
+ * @returns {Promise<Object>} - AI 서버의 응답 데이터
+ */
+export const sendUserMessage = async (userMessage, memberId) => {
+  try {
+    const response = await aiInstance.post("/ai/chatbot", {
+      user_message: userMessage,
+      username: memberId,
+    });
+    console.log(response.data);
+    return response.data; // { task_type, text, additional_data }
+  } catch (error) {
+    console.error("AI 챗봇 서버와의 통신 오류:", error);
+    throw error;
+  }
+};

src/apis/instance.js

@@ -0,0 +1,24 @@
+import axios from "axios";
+
+export const instance = axios.create({
+  baseURL: import.meta.env.VITE_BASE_URL,
+  withCredentials: false,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+// 요청 인터셉터 설정
+instance.interceptors.request.use(
+  (config) => {
+    // access_token을 sessionStorage에서 가져와 헤더에 추가
+    const token = sessionStorage.getItem("access_token");
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);

src/apis/restaurants.js

@@ -0,0 +1,17 @@
+import { instance } from "./instance";
+
+export const getRestaurants = async () => {
+  try {
+    const response = await instance.get("/api/restaurants");
+
+    if (response.data.success) {
+      return response.data.data;
+    } else {
+      console.error(response.data.message);
+      return null;
+    }
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};

src/apis/uuid.js

@@ -0,0 +1,25 @@
+import { instance } from "./instance";
+import Cookies from "js-cookie";
+
+export const getUUID = async (username) => {
+  try {
+    const response = await instance.get(`/user/uuid/${username}`, {
+      headers: {
+        Authorization: `Bearer ${sessionStorage.getItem("access_token")}`,
+      },
+    });
+
+    const uuid = response.data.uuid;
+    if (uuid) {
+      // 받은 UUID를 쿠키에 저장
+      Cookies.set("uuid", uuid, {
+        path: "/",
+        secure: true,
+        sameSite: "Strict",
+      });
+    }
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
+};

src/apis/works.js

@@ -0,0 +1,19 @@
+import { instance } from "./instance";
+
+export const getWorks = async (id) => {
+  try {
+    const endpoint = id ? `/api/works/${id}` : "/api/works";
+    const response = await instance.get(endpoint);
+
+    if (response.data.success) {
+      console.log(response.data.data);
+      return response.data.data;
+    } else {
+      console.error(response.data.message);
+      return null;
+    }
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};

src/components/chatBotPageComponent/chatScrollBox/ChatScrollBox.jsx

@@ -13,7 +13,7 @@ const ChatScrollBox = forwardRef(({ children }, ref) => {
         color="#0C0E27"
         weight="500"
         align="left"
-        margin="1.6rem 0 0 1rem"
+        margin="5.3rem 0 0 1rem"
       >
         안녕하세요! 만나서 반갑습니다. <br />
         밥상일터 사용을 도와드릴게요.

src/components/chatBotPageComponent/chatScrollBox/ChatScrollBox.styled.jsx

@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 
 export const ScrollBoxContainers = styled.div`
   width: 100%;
-  height: 77vh; // Header UserInput의 높이 제외
+  height: 90vh; // Header UserInput의 높이 제외
   padding: 0;
   box-sizing: border-box;
   overflow-y: auto; // 스크롤 가능

src/components/chatBotPageComponent/chatbotInButton/ChatbotInButton.jsx

@@ -0,0 +1,19 @@
+import { ButtonContainer } from "./ChatbotInButton.styled";
+import { FaMicrophone } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
+
+const ChatbotInButton = () => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate("/chatbot");
+  };
+
+  return (
+    <ButtonContainer onClick={handleClick}>
+      <FaMicrophone />
+    </ButtonContainer>
+  );
+};
+
+export default ChatbotInButton;

src/components/chatBotPageComponent/chatbotInButton/ChatbotInButton.styled.js

@@ -0,0 +1,28 @@
+import styled from "@emotion/styled";
+
+// 버튼 컨테이너 스타일
+export const ButtonContainer = styled.button`
+  position: fixed;
+  bottom: 6rem;
+  right: 1rem;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background-color: #ff854c;
+
+  border: none;
+  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  color: white;
+  font-size: 30px;
+
+  z-index: 1000;
+
+  &:active {
+    background-color: #e66122;
+    transform: scale(0.95);
+  }
+`;