Merge pull request #162 from MBTips/feature/Header,Navbar-통일하는-작업

feat: 기존에 Header와 Navbar를 하나로 추상화한  Header 컴포넌트 구현 완료

Author: junjeeong

src/components/Header.tsx

@@ -0,0 +1,24 @@
+import { useLocation } from "react-router-dom";
+import SubHeader from "@/components/header/SubHeader";
+import MainHeader from "@/components/header/MainHeader";
+import useAuthStore from "@/store/useAuthStore";
+
+type HeaderProps = {
+  title?: string;
+  showPreviousIcon?: boolean;
+  showShareIcon?: boolean;
+};
+
+const Header = ({
+  title = "",
+  showPreviousIcon = true,
+  showShareIcon = false
+}: HeaderProps) => {
+  const { pathname } = useLocation();
+  const { isLoggedIn } = useAuthStore();
+  const isHomepage = pathname === "/";
+
+  return isHomepage ? <MainHeader isLoggedIn={isLoggedIn}/> : <SubHeader title={title} showPreviousIcon={showPreviousIcon} showShareIcon={showShareIcon} />;
+};
+
+export default Header;

src/components/header/Header.tsx

@@ -1,9 +1,9 @@
 import { Link } from "react-router-dom";
 import LoginButton from "../button/LoginButton";
 
-const MainHeader = ({isLoggedIn}: {isLoggedIn : string | null})=> {
+const MainHeader = ({isLoggedIn}: {isLoggedIn : boolean})=> {
   return (
-    <div className="bg-white flex h-[56px] w-full justify-between px-5">
+    <header className="bg-white flex h-[56px] w-full justify-between px-5">
       <Link to="/" className="flex items-center">
       <img
         src="/public/icon/mbtipslogo.svg"
@@ -12,14 +12,14 @@ const MainHeader = ({isLoggedIn}: {isLoggedIn : string | null})=> {
         height={31}
       />
       </Link>
-      {isLoggedIn === "true" ? <LoginButton/> : <img
+      {isLoggedIn ? <LoginButton/> : <img
         src="/public/icon/people.svg"
         alt="Login Done"
         className="mx-auto mr-[20px]"
         width={24}
         height={24}
       />}
-    </div>)
+    </header>)
 }
 
 export default MainHeader;

src/components/header/MainHeader.tsx

@@ -1,5 +1,5 @@
-import useMbtiTestState from "@/store/useMbtiTestState";
 import { useLocation, useNavigate } from "react-router-dom"
+import useMbtiTestState from "@/store/useMbtiTestState";
 
 
 type SubHeaderProps = {
@@ -11,21 +11,26 @@ type SubHeaderProps = {
 const SubHeader = ({
   title = "",
   showPreviousIcon = true,
-  showShareIcon = false
+  showShareIcon = false,
 }: SubHeaderProps) => {
 
   const navigate = useNavigate();
-  const isProgressPage = useLocation().pathname === "/mbti-test-progress";
+  const {pathname} = useLocation();
   const { currentPage, setPreviousStep } = useMbtiTestState();
-  const firstQuestionPage = currentPage === 1;
+  const isProgressPage = pathname === "/mbti-test-progress";
+  const isChatPage = pathname === "/chat";
+  const isFirstQuestionPage = currentPage === 1;
 
   const handleGoBack = () => {
-    if(isProgressPage && !firstQuestionPage) setPreviousStep();
-    else navigate(-1);
+    if(isProgressPage && !isFirstQuestionPage) setPreviousStep();
+    else if(isChatPage) {
+      // 채팅 취소 모달 오픈 로직 추가 부탁드려요 헤헤 -> 4.9 정준영
+    }
+    else if(isFirstQuestionPage) navigate(-1);
   };
 
   return (
-    <div className="relative flex h-[56px] w-full flex-row items-center justify-center border-b border-gray-100 bg-white">
+    <header className="relative flex h-[56px] w-full flex-row items-center justify-center border-b border-gray-100 bg-white">
     {showPreviousIcon && (
       <img
       src="/public/icon/arrow_left.svg"
@@ -50,7 +55,7 @@ const SubHeader = ({
       height={16}
       />
     )}
-  </div>
+  </header>
     );
   }
 

src/components/header/SubHeader.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, ChangeEvent, KeyboardEvent } from "react";
 import IntroGuide from "@/components/IntroGuide";
-import Header from "@/components/Header";
+import Header from "@/components/header/Header";
 import ChatMessage from "@/components/ChatMessage";
 import ChatActionBar from "@/components/ChatActionBar";
 import pickMbtiImage from "@/utils/pickMbtiImage";

src/pages/Chat.tsx

@@ -1,5 +1,5 @@
 import instance from "@/api/axios";
-import Header from "@/components/Header";
+import Header from "@/components/header/Header";
 import { trackEvent } from "@/libs/analytics";
 import React from "react";
 import { useParams } from "react-router-dom";

src/pages/Content.tsx

@@ -1,23 +1,18 @@
-import { useNavigate } from "react-router-dom";
-import Header from "@/components/Header";
 import Banner from "@/components/Banner";
 import StrokeBanner from "@/components/StrokeBanner";
 import SubTitle from "@/components/SubTitle";
 import ChatStartButton from "@/components/button/ChatStartButton";
+import Header from "@/components/header/Header";
 
 const Home = () => {
 
   return (
     <div className="flex flex-col bg-white w-[360px] md:w-[375px] lg:w-[500px]">
-      <header>
-        <Header/>
-      </header>
-
+      <Header/>
       <main>
         <section aria-label="콘텐츠 배너">
           <Banner />
         </section>
-
         <section className="mt-5 w-full" aria-label="빠른 대화">
           <div className="px-[20px] py-[13px] w-full">
             <SubTitle mode="빠른대화" />
@@ -26,7 +21,6 @@ const Home = () => {
             <ChatStartButton mode={"go-fast"}/>
           </div>
         </section>
-
         <section aria-label="친구 목록">
           <div className="px-[20px] py-[21px] w-full">
             <SubTitle mode="친구목록" />

src/pages/Home.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, FormEvent, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import Header from "@/components/Header";
+import Header from "@/components/header/Header";
 const MbtiTestIntro = () => {
   const [name, setName] = useState("");
   const navigate = useNavigate();

src/pages/MbtiTestIntro.tsx

@@ -1,7 +1,7 @@
 import { TEST_QNA } from "@/constants/TEST_QNA";
 import MbtiAnswerButtons from "@/components/button/MbtiAnswerButtons";
 import useMbtiTestState from "@/store/useMbtiTestState";
-import Header from "@/components/Header";
+import Header from "@/components/header/Header";
 
 interface content {
   number: number;

src/pages/MbtiTestQuestions.tsx

@@ -2,9 +2,9 @@ import { MouseEvent } from "react";
 import { MBTI_RESULT_INFO } from "@/constants/MBTI_RESULT_INFO";
 import ShareButton from "@/components/button/ShareButton";
 import RestartButton from "@/components/button/RestartButton";
-import Header from "@/components/Header";
 import ChatStartButton from "@/components/button/ChatStartButton";
 import useLayoutSize from "@/hooks/useLayoutSize";
+import Header from "@/components/header/Header";
 
 const MbtiTestResult = () => {