Merge pull request #188 from MBTips/feature/ToggleChatTipsbutton-열고-닫는-기능

feat: ToggleChatTIpsButton 열고 닫히는 기능 구현 완료

Author: junjeeong

src/components/ChatActionBar.tsx

@@ -1,6 +1,7 @@
 import { ChangeEvent, KeyboardEvent } from "react";
 import ToggleChatTipsButton from "@/components/button/ToggleChatTipsButton";
 import MessageInput from "@/components/input/MessageInput";
+import TipsMenuContainer from "@/components/tips/TipsMenuContainer";
 
 interface ChatActionProps {
   isOpen: boolean;

src/components/button/ToggleChatTipsButton.tsx

@@ -8,13 +8,15 @@ const ToggleChatTipsButton = ({
   setIsOpen
 }: ToggleChatTipsButtonProps) => {
   return (
-    <img
-      src={isOpen ? "/icon/close.svg" : "/icon/plus.svg"}
-      onClick={() => setIsOpen(!isOpen)}
-      alt="토글 메뉴 버튼"
-      width={14}
-      height={14}
-    />
+    <button>
+      <img
+        src={isOpen ? "/icon/close.svg" : "/icon/plus.svg"}
+        onClick={() => setIsOpen(!isOpen)}
+        alt="토글 메뉴 버튼"
+        width={14}
+        height={14}
+      />
+    </button>
   );
 };
 

src/components/TipsMenu.tsx src/components/tips/TipsMenu.tsxsrc/components/TipsMenu.tsx renamed to src/components/tips/TipsMenu.tsx

@@ -1,32 +1,41 @@
+import { Link } from "react-router-dom";
+
 const TipsMenu = ({
   mode
 }: {
   mode: "topic" | "conversation" | "temporature";
 }) => {
   let text = "";
   let imageUrl = "";
+  let href = "";
+
   switch (mode) {
     case "topic":
       text = "대화 주제 추천";
       imageUrl = "/icon/starbubble.svg";
+      href = "/chat-recommend";
       break;
     case "conversation":
       text = "대화 꿀팁";
       imageUrl = "/icon/lightbulb.svg";
+      href = "/chat-tips";
       break;
     case "temporature":
       text = "현재 대화의 온도 측정하기";
       imageUrl = "/icon/thermometer.svg";
+      href = "/chat-temporature";
       break;
     default:
       return;
   }
 
   return (
-    <div className="flex bg-white px-4 py-4 border-gray-100 border-b w-[375px] h-[56px]">
-      <img src={imageUrl} alt={text} width={20} height={20} />
-      <h2 className="ml-[22px] font-medium text-2lg text-gray-800">{text}</h2>
-    </div>
+    <Link to={href}>
+      <div className="flex h-[56px] w-full border-t border-gray-100 bg-white px-4 py-4 hover:bg-primary-pale">
+        <img src={imageUrl} alt={text} width={20} height={20} />
+        <h2 className="text-2lg ml-[22px] font-medium text-gray-800">{text}</h2>
+      </div>
+    </Link>
   );
 };
 

src/components/tips/TipsMenuContainer.tsx

@@ -0,0 +1,13 @@
+import TipsMenu from "@/components/tips/TipsMenu";
+
+const TipsMenuContainer = () => {
+  return (
+    <>
+      <TipsMenu mode="topic" />
+      <TipsMenu mode="conversation" />
+      <TipsMenu mode="temporature" />
+    </>
+  );
+};
+
+export default TipsMenuContainer;

src/index.css

@@ -31,11 +31,9 @@ body {
 main {
   @media screen and (min-width: 360px) {
     width: 360px;
-    
   }
   @media screen and (min-width: 375px) {
     width: 375px;
-    
   }
   @media screen and (min-width: 500px) {
     width: 500px;
@@ -55,7 +53,6 @@ button:hover {
 }
 
 @keyframes pulse-custom {
-
   0%,
   100% {
     transform: scale(1);
@@ -87,4 +84,4 @@ button:hover {
   * {
     @apply transition-transform duration-200 ease-in-out;
   }
-}
+}

src/pages/Chat.tsx

@@ -6,6 +6,8 @@ import ChatActionBar from "@/components/ChatActionBar";
 import pickMbtiImage from "@/utils/pickMbtiImage";
 import instance from "@/api/axios";
 import { useLocation } from "react-router-dom";
+import { cls } from "@/utils/cls";
+import TipsMenuContainer from "@/components/tips/TipsMenuContainer";
 
 interface Message {
   role: "user" | "assistant";
@@ -27,7 +29,7 @@ const Chat = () => {
 
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
+  }, [messages, isOpen]);
 
   const chatTitle = `${mbti}와 대화`;
   const assistantInfo = mbti;
@@ -123,7 +125,6 @@ const Chat = () => {
 
         <div ref={bottomRef} />
       </div>
-
       <ChatActionBar
         isOpen={isOpen}
         setIsOpen={setIsOpen}
@@ -132,6 +133,7 @@ const Chat = () => {
         onKeyUp={handleKeyup}
         onSend={() => handleSend(input)}
       />
+      {isOpen && <TipsMenuContainer />}
     </div>
   );
 };

vite.config.ts

@@ -14,7 +14,7 @@ export default defineConfig(({ mode }: { mode: string }) => {
 
   return {
     server: {
-      port: 3000,
+      port: 5173,
       host: true, // 외부에서 접속 가능하도록 설정
       strictPort: true,
       allowedHosts: ["mbtips.kr"],