Feature/fe/#301 header refactoring

frontend/.storybook/preview.ts

@@ -1,15 +1,5 @@
 import type { Preview } from '@storybook/react';
 import '../src/index.css';
-// 우선은 폰트 다 포함시켰는데, 나중에 사용할 것들만 따로 뺴자.
-import '@fontsource/pretendard/100.css';
-import '@fontsource/pretendard/200.css';
-import '@fontsource/pretendard/300.css';
-import '@fontsource/pretendard/400.css';
-import '@fontsource/pretendard/500.css';
-import '@fontsource/pretendard/600.css';
-import '@fontsource/pretendard/700.css';
-import '@fontsource/pretendard/800.css';
-import '@fontsource/pretendard/900.css';
 
 const preview: Preview = {
   parameters: {

frontend/package.json

@@ -19,7 +19,6 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@fontsource/pretendard": "^5.1.0",
     "axios": "^1.7.7",
     "lz-string": "^1.5.0",
     "react": "^18.3.1",

frontend/src/App.css

@@ -1,6 +1,6 @@
 #root {
   touch-action: pan-y;
-  font-family: Pretendard, 'Pretendard Variable', sans-serif;
+  font-family: Pretendard, 'Pretendard Variable', sans-serif !important;
 }
 
 .logo {
@@ -40,10 +40,10 @@
 }
 
 .disable-drag {
-  -webkit-user-select:none;
-  -moz-user-select:none;
-  -ms-user-select:none;
-  user-select:none
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .overlay {

frontend/src/component/content/Content.tsx

@@ -4,6 +4,7 @@ import { getChannelInfo } from '@/api/channel.api';
 import { useContext } from 'react';
 import { ChannelContext } from '@/context/ChannelContext';
 import { Dropdown } from '../common/dropdown/Dropdown';
+import { FooterContext } from '../layout/footer/LayoutFooterProvider';
 
 interface IContentProps {
   title: string;
@@ -35,6 +36,7 @@ interface IContentProps {
  */
 
 export const Content = (props: IContentProps) => {
+  const { resetFooterContext } = useContext(FooterContext);
   const formattedDate = new Date(props.time).toLocaleDateString('ko-KR', {
     year: 'numeric',
     month: '2-digit',
@@ -61,31 +63,34 @@ export const Content = (props: IContentProps) => {
   const goToChannelInfoPage = () => {
     if (channelInfo?.id) {
       navigate(`/channelInfo/${channelInfo.id}`);
+      resetFooterContext();
     }
   };
 
+  const goToHostViewPage = () => {
+    navigate(props.link);
+    resetFooterContext();
+  };
+
   const handleUpdate = () => {
     getUpdateChannelInfo();
     goToChannelInfoPage();
   };
 
   return (
     <div className="relative flex w-full flex-row justify-between px-4 py-5">
-      <button
-        type="button"
-        onClick={() => {
-          navigate(props.link);
-        }}
-      >
-        <header className="border-gray-200 pb-1 text-start text-lg">{props.title}</header>
-        <section className="flex items-center text-sm leading-5 text-gray-500">
+      <button type="button" onClick={goToHostViewPage}>
+        <header className="border-gray-200 pb-1 text-start text-base font-normal">
+          {props.title}
+        </header>
+        <section className="text-grayscale-200 flex items-center text-xs font-normal leading-5">
           <time className="mr-4">
             {formattedDate} {formattedTime}
           </time>
           {props.person > 0 && (
             <>
               <MdGroup className="mr-2 h-5 w-5" aria-label="인원수 아이콘" />
-              <span>{props.person}명</span>
+              <span className="text-xs font-normal">{props.person}명</span>
             </>
           )}
         </section>
@@ -96,10 +101,15 @@ export const Content = (props: IContentProps) => {
             <MdMoreVert className="h-6 w-6" />
           </Dropdown.Trigger>
           <Dropdown.Menu>
-            <Dropdown.Item className="flex items-start text-base" onClick={handleUpdate}>
+            <Dropdown.Item
+              className="flex items-start text-base font-normal"
+              onClick={handleUpdate}
+            >
               공유하기
             </Dropdown.Item>
-            <Dropdown.Item className="flex items-start text-base">삭제하기</Dropdown.Item>
+            <Dropdown.Item className="flex items-start text-base font-normal">
+              삭제하기
+            </Dropdown.Item>
           </Dropdown.Menu>
         </Dropdown>
         {/* {isMenuOpen && (드롭다운 메뉴)} */}

frontend/src/component/header/HeaderLayout.tsx

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import classNames from 'classnames';
+
+interface IHeaderProps {
+  leftItems?: ReactNode[];
+  rightItems?: ReactNode[];
+  title?: ReactNode;
+  subtitle?: string;
+  className?: string;
+  userName?: string;
+}
+
+export const HeaderLayout = (props: IHeaderProps) => {
+  return (
+    <header
+      className={classNames(
+        'absolute flex w-full flex-col gap-2.5 bg-transparent px-4 pb-2 pt-4',
+        props.className,
+      )}
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1">
+          {props.leftItems &&
+            props.leftItems.map(item => (
+              <div className="flex items-center justify-center">{item}</div>
+            ))}
+          <div className="flex items-center justify-center text-base">
+            <div className="font-bold">{props.userName}</div>
+            <div>{props.title}</div>
+          </div>
+        </div>
+        <div className="flex items-center gap-1">
+          {props.rightItems &&
+            props.rightItems.map(item => (
+              <div className="flex items-center justify-center">{item}</div>
+            ))}
+        </div>
+      </div>
+      <div className="text-grayscale-400 ml-8 text-xs">{props.subtitle}</div>
+    </header>
+  );
+};

frontend/src/component/layout/constant/HeaderConst.ts

@@ -1,3 +1,7 @@
+import { HeaderBackButton } from '@/component/header/HeaderBackButton';
+import { HeaderDropdown } from '@/component/header/HeaderDropdown';
+import React, { ReactNode } from 'react';
+
 export const HEADER_TITLE: Record<string, string> = {
   '/add-channel/:user/draw': '에 따른 경로 설정',
 };
@@ -6,17 +10,17 @@ export const HEADER_SUBTITLE: Record<string, string> = {
   '/add-channel/:user/draw': '사용자 별로 출발지/도착지(마커), 경로(그림)을 설정할 수 있습니다',
 };
 
-export const HEADER_LEFTBUTTON: Record<string, string> = {
-  '/add-channel': 'back',
-  '/add-channel/:user': 'back',
-  '/add-channel/:user/draw': 'back',
-  '/channel/:channelId/host': 'back',
-  '/update-channel': 'back',
-  '/register': 'back',
-  '/channelInfo/:channelId': 'back',
-  '/guest-add-channel/:channelId': 'back',
+export const HEADER_LEFTITEMS: Record<string, ReactNode[]> = {
+  '/add-channel': [React.createElement(HeaderBackButton)],
+  '/add-channel/:user': [React.createElement(HeaderBackButton)],
+  '/add-channel/:user/draw': [React.createElement(HeaderBackButton)],
+  '/channel/:channelId/host': [React.createElement(HeaderBackButton)],
+  '/update-channel': [React.createElement(HeaderBackButton)],
+  '/register': [React.createElement(HeaderBackButton)],
+  '/channelInfo/:channelId': [React.createElement(HeaderBackButton)],
+  '/guest-add-channel/:channelId': [React.createElement(HeaderBackButton)],
 };
 
-export const HEADER_RIGHTBUTTON: Record<string, string> = {
-  '/channel/:channelId/host': 'dropdown',
+export const HEADER_RIGHTITEMS: Record<string, ReactNode[]> = {
+  '/channel/:channelId/host': [React.createElement(HeaderDropdown)],
 };

frontend/src/component/layout/header/LayoutHeader.tsx

@@ -1,25 +1,19 @@
-import { Header } from '@/component/header/Header';
-import { NoticeText } from '@/component/text/NoticeText';
 import { useLocation, useParams } from 'react-router-dom';
 import { getHeaderInfo } from '@/utils/mapping/HeaderMapping';
+import { HeaderLayout } from '@/component/header/HeaderLayout';
 
 export const LayoutHeader = () => {
   const params = useParams<Record<string, string | undefined>>();
   const urlPath = useLocation();
   const headerOption = getHeaderInfo(urlPath.pathname);
-
   return (
-    <Header className="z-4000">
-      <Header.MainLayout
-        leftButton={headerOption.leftButton}
-        rightButton={headerOption.rightButton}
-        title={`${params.user || ''}${headerOption.title}`}
-      />
-      {headerOption.subtitle && (
-        <Header.Subtitle>
-          <NoticeText>{headerOption.subtitle}</NoticeText>
-        </Header.Subtitle>
-      )}
-    </Header>
+    <HeaderLayout
+      className="z-[5000]"
+      userName={`${params.user || ''}`}
+      title={`${headerOption.title}`}
+      subtitle={`${headerOption.subtitle}`}
+      leftItems={headerOption.leftItems}
+      rightItems={headerOption.rightItems}
+    />
   );
 };