Merge branch 'dev' of https://github.com/MBTips/FE-MBTips into feat/Header-고정-작업

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/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/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>
   );
 };

src/pages/Login.tsx

@@ -7,42 +7,45 @@ import useLayoutSize from "@/hooks/useLayoutSize";
 const Login = () => {
   const layoutSize = useLayoutSize();
   const isPC = layoutSize === "lg";
-  const [isModalOpen, setIsModalOpen] = useState<{isOpen : boolean, mode : "terms" | "privacy"}>({
+  const [isModalOpen, setIsModalOpen] = useState<{
+    isOpen: boolean;
+    mode: "terms" | "privacy";
+  }>({
     isOpen: false,
-    mode: "terms",
+    mode: "terms"
   });
 
-  const openModal =(mode : "terms" | "privacy")=> {
-    setIsModalOpen({mode:mode, isOpen : true});
-  }
+  const openModal = (mode: "terms" | "privacy") => {
+    setIsModalOpen({ mode: mode, isOpen: true });
+  };
   const closeModal = () => {
-    setIsModalOpen((state) => ({mode:state.mode, isOpen : false}));
-  }
+    setIsModalOpen((state) => ({ mode: state.mode, isOpen: false }));
+  };
 
   const isOpen = isModalOpen.isOpen;
   const isTerms = isModalOpen.mode === "terms";
 
   return (
-    <main className="bg-white flex flex-col items-center h-[812px]">
+    <main className="flex h-[812px] flex-col items-center bg-white">
       <img
         src={isPC ? "/image/login/banner_lg.png" : "/image/login/banner.png"}
         alt="로그인 페이지 이미지"
-        className="w-full h-[391px]"
+        className="h-[391px] w-full"
       />
-      <h1 className="mt-12 font-bold text-3xl text-center whitespace-pre-wrap">
+      <h1 className="mt-12 text-center text-3xl font-bold whitespace-pre-wrap">
         MBTI 성향 기반
         <br />
         AI 채팅 시뮬레이션으로
         <br />
         대화 연습과 꿀팁 얻어가세요
       </h1>
-      <div className="mt-[39px] text-gray-900 text-xl">
+      <div className="mt-[39px] text-xl text-gray-900">
         대화 연습부터, 피드백까지 드려요
       </div>
       <div className="mt-[47px]">
         <KakaoLoginButton />
       </div>
-      <div className="w-full mt-auto mb-1">
+      <div className="mt-auto w-full pb-4">
         <TermsAndPrivacy openModal={openModal} />
       </div>
       {isOpen ? (

src/pages/MbtiTestIntro.tsx

@@ -1,13 +1,16 @@
 import { ChangeEvent, FormEvent, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import Header from "@/components/header/Header";
+import useLayoutSize from "@/hooks/useLayoutSize";
 const MbtiTestIntro = () => {
   const [name, setName] = useState("");
   const navigate = useNavigate();
-
-  const handleChange = (e:ChangeEvent<HTMLInputElement>) => {
+  const viewport = useLayoutSize();
+  const bannerSize =
+    viewport === "sm" ? "360" : viewport === "md" ? "375" : "500";
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     setName(e.target.value);
-  }
+  };
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -21,37 +24,48 @@ const MbtiTestIntro = () => {
 
     localStorage.setItem("mbti-test-name", name);
     navigate("/mbti-test-progress");
-  }
+  };
 
   return (
-    <main className="sm:h-[812px] h-[1080px] flex flex-col">
-      <Header title="상대방 MBTI 유추 테스트"/>
-      <div className="relative flex-1 flex flex-col items-center w-full h-[756px]">
-        <img src="/image/mbti-test/500px/intro_500.png" alt="intro image" className="inset-0 w-full h-full"/>
-        <span className="absolute top-[38px] font-medium text-lg">그 사람의 mbti는 뭘까?</span>
-        <h2 className="absolute top-[74px] font-extrabold text-[32px] text-center">
+    <main className="flex h-[1080px] flex-col sm:h-[812px]">
+      <Header title="상대방 MBTI 유추 테스트" />
+      <div className="relative flex h-[756px] w-full flex-1 flex-col items-center">
+        <img
+          src={`/image/mbti-test/${bannerSize}px/intro_${bannerSize}.png`}
+          alt="intro image"
+          className="inset-0 h-full w-full"
+        />
+        <span className="absolute top-[38px] text-lg font-medium">
+          그 사람의 mbti는 뭘까?
+        </span>
+        <h2 className="absolute top-[74px] text-center text-[32px] leading-10 font-extrabold">
           <span className="text-[#2714FF]">상대방</span> MBTI
           <br />
           유추 테스트
         </h2>
-        <form className="absolute top-[472px] flex flex-col items-center" onSubmit={handleSubmit}>
-          <label htmlFor="name" className="font-medium text-lg ">MBTI를 알고 싶은 상대의 이름</label>
+        <form
+          className="absolute top-[472px] flex flex-col items-center"
+          onSubmit={handleSubmit}
+        >
+          <label htmlFor="name" className="text-lg font-medium ">
+            MBTI를 알고 싶은 상대의 이름
+          </label>
           <input
             type="text"
             id="name"
             onChange={handleChange}
-            className="bg-white border-gray-50 w-full rounded-lg mt-[30px]  h-[68px] text-center"
+            className="mt-[30px] h-[68px] w-full rounded-lg border-gray-50  bg-white text-center"
           />
           <button
             type="submit"
-            className="bg-primary-normal hover:opacity-80 mt-[60px] rounded-lg w-[320px] lg:w-[460px] h-[60px] font-bold text-white"
+            className="mt-[60px] h-[60px] w-[320px] rounded-lg bg-primary-normal font-bold text-white hover:opacity-80 lg:w-[460px]"
           >
             시작하기
           </button>
-        </form> 
+        </form>
       </div>
     </main>
-  )
-}
+  );
+};
 
-export default MbtiTestIntro;
+export default MbtiTestIntro;