feat::animation

web/.env

@@ -0,0 +1 @@
+VITE_CHAT_URL=http://192.168.0.121:8000

web/src/components/chatbox/style.ts

@@ -6,11 +6,14 @@ export const Container = styled.div`
   padding: 2rem;
   background-color: #f1f1f1;
   font-size: 1.6rem;
-  &:nth-child(even) {
+  line-height:1.3;
+  font-weight:300;
+  word-break:keep-all;
+  &:nth-child(odd) {
     align-self: flex-start;
     border-radius: 2rem 2rem 2rem 0;
   }
-  &:nth-child(odd) {
+  &:nth-child(even) {
     align-self: flex-end;
     border-radius: 2rem 2rem 0 2rem;
   }

web/src/components/header/index.tsx

@@ -2,8 +2,13 @@ import * as S from './style'
 
 const Header = () => {
   return (
-    <S.Container>Header</S.Container>
-  )
+    <S.Container>
+      <S.LogoWrap>
+        <S.Logo src="/assets/logo.svg" alt="" />
+        <h1 style={{fontWeight:600}}>슬기로운 농사 생활</h1>
+      </S.LogoWrap>
+    </S.Container>
+  );
 }
 
 export default Header

web/src/components/header/style.ts

@@ -5,4 +5,17 @@ export const Container = styled.div`
   height:7rem;
   border-bottom:0.1rem solid #E1E1E1;
   box-sizing:border-box;
-`
+  display:flex;
+  justify-content:space-between;
+  align-items:center;
+  padding:2rem;
+`
+export const LogoWrap = styled.div`
+  width:22rem;
+  display:flex;
+  align-items:center;
+`
+export const Logo = styled.img`
+  width: 6rem;
+  margin-right:1rem;
+`;

web/src/components/router/index.tsx

@@ -2,13 +2,15 @@ import { Routes, Route } from "react-router-dom";
 import Main from "../../pages/main";
 import Chatbot from "../../pages/chatbot";
 import Support from "../../pages/support";
+import Profile from "../../pages/profile";
 
 const Router = () => {
   return (
     <Routes>
       <Route path="/" element={<Main />}></Route>
       <Route path="/chatbot" element={<Chatbot />}></Route>
       <Route path="/support" element={<Support />}></Route>
+      <Route path="/profile" element={<Profile />}></Route>
     </Routes>
   );
 };

web/src/components/tabBar/index.tsx

@@ -15,6 +15,8 @@ const TabBar = () => {
       setPageState('CHATBOT');
     }else if (location.pathname === '/support') {
       setPageState('SUPPORT');
+    }else if (location.pathname === '/profile') {
+      setPageState('PROFILE');
     }else {
       setPageState('/');
     }
@@ -95,6 +97,32 @@ const TabBar = () => {
           지원사업
         </S.MenuTitle>
       </S.MenuBox>
+      <S.MenuBox
+        onClick={() => {
+          navTo("/profile");
+        }}
+      >
+        <IonIcon
+          name={
+            pageState === "PROFILE"
+              ? "person"
+              : "person-outline"
+          }
+          size="large"
+          style={
+            pageState === "PROFILE"
+              ? { fontSize: "1.6rem", color: "#93DB92" }
+              : { fontSize: "1.6rem" }
+          }
+        />
+        <S.MenuTitle
+          style={
+            pageState === "PROFILE" ? { fontWeight: 500, color: "#93DB92" } : {}
+          }
+        >
+          프로필
+        </S.MenuTitle>
+      </S.MenuBox>
     </S.Container>
   );
 }

web/src/components/tabBar/style.ts

@@ -14,7 +14,7 @@ export const Container = styled.div`
 `;
 
 export const MenuBox = styled.div`
-  width:33%;
+  width:25%;
   height:100%;
   display:flex;
   flex-direction:column;

web/src/hooks/chat/useChat.ts

@@ -25,17 +25,28 @@ const useChat = (ref:RefObject<HTMLDivElement>) => {
     setMessage("");
     setLoading(true);
     try{
-      const res = await instance.post(`${import.meta.env.VITE_API_URL}/chatbot`,{
-        message
+      const res = await instance.get(`${import.meta.env.VITE_CHAT_URL}/chat`,{
+        params: {message}
       });
       if(res){
-        setChatData((prev)=>[...prev,res.data.response]);
-        setRecommend(res.data.recommend);
+        if(res.data.response) {
+          setChatData((prev) => [...prev, res.data.response]);
+        }else if (res.data.answer){
+          setChatData((prev) => [...prev, res.data.answer]);
+        }else {
+          setChatData((prev)=>[...prev,'챗봇이 답을 찾지 못했어요. 나중에 다시 시도해 주세요.']);
+        }
+
+        if(res.data.recommend) {
+          setRecommend(res.data.recommend);
+        }else{
+          setRecommend(res.data.recommand);
+        }
       }
+      setLoading(false);
     }catch{
       setChatData((prev)=>[...prev,'챗봇 시스템에 에러가 발생했습니다.']);
     }
-    setLoading(false);
   };
 
 

web/src/index.css

@@ -12,7 +12,7 @@ body, html {
 * {
 	margin: 0;
 	font-family: Pretendard;
-  font-weight: 200;
+  font-weight: 300;
 }
 
 input:-webkit-autofill,

web/src/pages/chatbot/index.tsx

@@ -16,16 +16,22 @@ const Chatbot = () => {
   return (
     <S.Container>
       <S.ChatWrap ref={chatWrapRef}>
+        <S.chatIntro>
+          <img src='/assets/farmer.svg' /> <br /><br />
+          챗봇과 함께 대화하며 <br />
+          슬기로운 당신의 농부 생활을 만들어 보세요!
+        </S.chatIntro>
         {chat.chatData.map((item, idx) => (
           <Chatbox message={item} key={idx} />
         ))}
       </S.ChatWrap>
       <S.RecommendWrap>
-        {chat.recommend.map((item) => (
+        {chat.recommend.map((item,idx) => (
           <S.Recommend
             onClick={() => {
               preset(item);
             }}
+            key={idx}
           >
             {item}
           </S.Recommend>
@@ -37,13 +43,17 @@ const Chatbot = () => {
           onChange={chat.handleMessage}
           value={chat.message}
           onKeyDown={(e) => {
-            if (e.key === "Enter" && !chat.loading) {
+            if (
+              e.key === "Enter" &&
+              e.nativeEvent.isComposing === false &&
+              !chat.loading
+            ) {
               chat.submit();
             }
           }}
         />
         <IonIcon
-          name="paper-plane-outline"
+          name={chat.loading ? "ban-outline" : "paper-plane-outline"}
           size="large"
           style={{ fontSize: "1.7rem", marginLeft: "1rem", cursor: "pointer" }}
           onClick={() => {

web/src/pages/chatbot/style.ts

@@ -1,4 +1,13 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
+
+const SlideIn = keyframes`
+  0% {
+    margin-left:5rem;
+  }
+  100% {
+    margin-left:0;
+  }
+`
 
 export const Container = styled.div`
   width: 100%;
@@ -8,6 +17,7 @@ export const Container = styled.div`
   justify-content: center;
   align-items: center;
   font-size: 2rem;
+  animation:${SlideIn} 0.3s forwards;
 `;
 export const ChatWrap = styled.div`
   width:100%;
@@ -17,6 +27,12 @@ export const ChatWrap = styled.div`
   padding:1rem;
   overflow:scroll;
 `
+export const chatIntro = styled.div`
+  width:70%;
+  text-align:center;
+  align-self:center;
+  padding: 2rem 0;
+`
 export const InputWrap = styled.div`
   width:100%;
   height:10rem;
@@ -41,6 +57,7 @@ export const RecommendWrap = styled.div`
   justify-content:center;
   align-items:center;
   flex-wrap:wrap;
+  margin-top:2rem;
 `
 export const Recommend = styled.div`
   padding: 0.5rem 1rem;

web/src/pages/main/style.ts

@@ -1,10 +1,20 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
+
+const SlideIn = keyframes`
+  0% {
+    margin-left:5rem;
+  }
+  100% {
+    margin-left:0;
+  }
+`;
 
 export const Container = styled.div`
-  width:100%;
-  flex:1;
-  display:flex;
-  justify-content:center;
-  align-items:center;
-  font-size:2rem;
-`
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  animation: ${SlideIn} 0.3s forwards;
+`;

web/src/pages/profile/index.tsx

@@ -0,0 +1,7 @@
+import * as S from "./style";
+
+const Profile = () => {
+  return <S.Container>Profile</S.Container>;
+};
+
+export default Profile;

web/src/pages/profile/style.ts

@@ -0,0 +1,20 @@
+import styled, { keyframes } from "styled-components";
+
+const SlideIn = keyframes`
+  0% {
+    margin-left:5rem;
+  }
+  100% {
+    margin-left:0;
+  }
+`;
+
+export const Container = styled.div`
+  width: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  animation: ${SlideIn} 0.3s forwards;
+`;

web/src/pages/support/style.ts

@@ -1,4 +1,14 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
+
+
+const SlideIn = keyframes`
+  0% {
+    margin-left:5rem;
+  }
+  100% {
+    margin-left:0;
+  }
+`;
 
 export const Container = styled.div`
   width: 100%;
@@ -7,4 +17,5 @@ export const Container = styled.div`
   justify-content: center;
   align-items: center;
   font-size: 2rem;
+  animation: ${SlideIn} 0.3s forwards;
 `;

web/src/vite-env.d.ts

@@ -6,5 +6,5 @@ interface ImportMeta {
 
 interface ImportMetaEnv {
   readonly VITE_API_URL: string;
-  readonly VITE_WEB_URL: string;
+  readonly VITE_CHAT_URL: string;
 }