Merge branch 'dev' of https://github.com/MBTips/FE-MBTips into fix/chat-아이콘-비율-유지

Author: Soohyuniii

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/StrokeBanner.tsx

@@ -23,8 +23,9 @@ const StrokeBanner = () => {
         친구 정보를 저장하고 대화할 수 있어요
       </strong>
       <p className="mt-2 text-sm font-light text-gray-900">
-        로그인 시 기억하고 싶은 친구의 MBTI와 특징을 입력해서 빠르게 대화할 수
-        있어요
+        로그인 시 기억하고 싶은 친구의 MBTI와 특징을
+        <br />
+        입력해서 빠르게 대화할 수 있어요
       </p>
     </div>
   );

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/header/Header.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from "react";
 import { useLocation } from "react-router-dom";
 import SubHeader from "@/components/header/SubHeader";
 import MainHeader from "@/components/header/MainHeader";
@@ -7,25 +8,35 @@ type HeaderProps = {
   title?: string;
   showPreviousIcon?: boolean;
   showShareIcon?: boolean;
+  children?: ReactNode;
 };
 
 const Header = ({
   title = "",
   showPreviousIcon = true,
-  showShareIcon = false
+  showShareIcon = false,
+  children
 }: HeaderProps) => {
   const { pathname } = useLocation();
   const { isLoggedIn } = useAuthStore();
   const isHomepage = pathname === "/";
 
-  return isHomepage ? (
-    <MainHeader isLoggedIn={isLoggedIn} />
-  ) : (
-    <SubHeader
-      title={title}
-      showPreviousIcon={showPreviousIcon}
-      showShareIcon={showShareIcon}
-    />
+  return (
+    <>
+      <div className="fixed z-50 w-[360px] bg-white md:w-[375px] lg:w-[500px]">
+        {isHomepage ? (
+          <MainHeader isLoggedIn={isLoggedIn} />
+        ) : (
+          <SubHeader
+            title={title}
+            showPreviousIcon={showPreviousIcon}
+            showShareIcon={showShareIcon}
+          />
+        )}
+      </div>
+
+      <div className="pt-14">{children}</div>
+    </>
   );
 };
 

src/components/header/SubHeader.tsx

@@ -56,13 +56,13 @@ const SubHeader = ({
             src="/public/icon/arrow_left.svg"
             alt="Go To Back"
             className="absolute left-[18.77px] cursor-pointer"
-            width={9.87}
+            width={9}
             height={16}
             onClick={handleGoBack}
           />
         )}
 
-        <h1 className="absolute left-1/2 -translate-x-1/2 transform text-[18px] font-bold text-gray-900">
+        <h1 className="absolute left-1/2 -translate-x-1/2 transform font-bold text-gray-900">
           {title}
         </h1>
 

src/components/modal/ActionConfirmModal.tsx

@@ -19,10 +19,13 @@ const ActionConfirmModal = ({
 }: AlertProps) => {
   return (
     <div
-      className="absolute inset-0 z-50 flex items-center justify-center bg-black/50"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
       onClick={onCancel}
     >
-      <div className="flex h-[200px] w-[294px] flex-col items-center justify-center rounded-2xl bg-white">
+      <div
+        className="flex h-[200px] w-[294px] flex-col items-center justify-center rounded-2xl bg-white"
+        onClick={(e) => e.stopPropagation()}
+      >
         <h3 className="text-2xl font-bold">{title}</h3>
         <p className="mt-[9px] text-center text-xl font-medium">
           {message.map((line, index) => (

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

@@ -30,18 +30,31 @@ body {
 
 main {
   @media screen and (min-width: 360px) {
+    font-size: 14px;
     width: 360px;
-    
   }
   @media screen and (min-width: 375px) {
+    font-size: 16px;
     width: 375px;
-    
   }
   @media screen and (min-width: 500px) {
+    font-size: 16px;
     width: 500px;
   }
 }
 
+header {
+  @media screen and (min-width: 360px) {
+    font-size: 16px;
+  }
+  @media screen and (min-width: 375px) {
+    font-size: 18px;
+  }
+  @media screen and (min-width: 500px) {
+    font-size: 18px;
+  }
+}
+
 input:focus {
   outline: none;
 }
@@ -55,7 +68,6 @@ button:hover {
 }
 
 @keyframes pulse-custom {
-
   0%,
   100% {
     transform: scale(1);
@@ -87,4 +99,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>
   );
 };