[Feature] - 검색 구현

frontend/.storybook/preview.tsx

@@ -21,13 +21,13 @@ initialize(
   handlers,
 );
 
-const rootStyle = {
+const getRootStyle = (storyId: string) => ({
   width: "48rem",
-  padding: "1.6rem",
+  padding: storyId.startsWith("common-header--") ? 0 : "1.6rem",
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-};
+});
 
 const preview: Preview = {
   parameters: {
@@ -39,14 +39,14 @@ const preview: Preview = {
     },
   },
   decorators: [
-    (Story) => {
+    (Story, context) => {
       const queryClient = new QueryClient();
       return (
         <QueryClientProvider client={queryClient}>
           <ThemeProvider theme={theme}>
             <Global styles={globalStyle} />
             <div id="root">
-              <div style={rootStyle}>
+              <div style={getRootStyle(context.id)}>
                 <Story />
               </div>
             </div>

frontend/src/assets/svg/index.ts

@@ -20,3 +20,4 @@ export { default as KaKao } from "./kakao.svg";
 export { default as KoreanLogo } from "./korean-logo.svg";
 export { default as Plus } from "./plus.svg";
 export { default as tturiUrl } from "./tturi.svg?url";
+export { default as HomeIcon } from "./home-icon.svg";

frontend/src/components/common/Header/Header.stories.tsx

@@ -0,0 +1,94 @@
+import { css } from "@emotion/react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Icon from "../Icon/Icon";
+import IconButton from "../IconButton/IconButton";
+import { Input } from "../Input/Input.styled";
+import Header from "./Header";
+import * as S from "./SearchHeader/SearchHeader.styled";
+
+const rightContentOptions = {
+  None: null,
+  HomeIcon: <IconButton iconType="home-icon" size="20" />,
+  SearchIcon: <IconButton iconType="search-icon" size="18" />,
+  SearchForm: (
+    <S.FormWrapper>
+      <Input
+        autoFocus
+        placeholder="검색해주세요"
+        css={css`
+          height: 4rem;
+        `}
+      />
+      <S.ButtonContainer>
+        <S.DeleteButton title="delete keyword button" type="button">
+          <Icon iconType="x-icon" size="8" />
+        </S.DeleteButton>
+        <button title="search button" type="submit">
+          <Icon iconType="search-icon" size="18" />
+        </button>
+      </S.ButtonContainer>
+    </S.FormWrapper>
+  ),
+};
+
+const meta = {
+  title: "common/Header",
+  component: Header,
+  argTypes: {
+    useHamburger: { control: "boolean" },
+    useLogo: { control: "boolean" },
+    rightContent: {
+      options: Object.keys(rightContentOptions),
+      mapping: rightContentOptions,
+      control: {
+        type: "select",
+      },
+    },
+    $isRightContentFull: { control: "boolean" },
+  },
+  decorators: [
+    (Story, context) => {
+      return (
+        <div style={{ padding: 0, width: "48rem", position: "relative" }}>
+          <Story args={{ ...context.args }} />
+        </div>
+      );
+    },
+  ],
+  tags: ["autodocs"],
+} satisfies Meta<typeof Header>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const HomeHeader: Story = {
+  args: {
+    useHamburger: true,
+    rightContent: "HomeIcon",
+  },
+};
+
+export const LogoHeader: Story = {
+  args: {
+    useLogo: true,
+    useHamburger: true,
+    rightContent: "SearchIcon",
+  },
+};
+
+export const NavigationHeader: Story = {
+  args: {
+    useHamburger: true,
+    rightContent: "SearchIcon",
+  },
+};
+
+export const SearchHeader: Story = {
+  args: {
+    rightContent: "SearchForm",
+    $isRightContentFull: true,
+  },
+};

frontend/src/components/common/Header/Header.styled.ts

@@ -11,7 +11,7 @@ export const HeaderLayout = styled.header`
   z-index: ${({ theme }) => theme.zIndex.header};
 
   width: 100%;
-  height: fit-content;
+  height: 6rem;
   max-width: 48rem;
   padding: 1.6rem;
   border-bottom: 0.1rem solid ${({ theme }) => theme.colors.border};
@@ -41,12 +41,16 @@ export const MenuList = styled.ul`
   background-color: ${PRIMITIVE_COLORS.white};
 `;
 
-export const HeaderTitle = styled.span`
-  ${({ theme }) => theme.typography.mobile.bodyBold}
-  color: ${({ theme }) => theme.colors.text.primary};
+export const LeftWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 
-export const HiddenDiv = styled.div`
-  width: 2.4rem;
-  height: 2.4rem;
+export const RightWrapper = styled.div<{ $isRightContentFull?: boolean }>`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing.m};
+  justify-content: center;
+  align-items: center;
+  ${({ $isRightContentFull = false }) => $isRightContentFull && "flex: 1;"}
 `;

frontend/src/components/common/Header/Header.tsx

@@ -1,7 +1,5 @@
 import { useLocation, useNavigate } from "react-router-dom";
 
-import IconButton from "@components/common/IconButton/IconButton";
-
 import useUser from "@hooks/useUser";
 
 import { ROUTE_PATHS_MAP } from "@constants/route";
@@ -12,53 +10,61 @@ import { PRIMITIVE_COLORS } from "@styles/tokens";
 import { DoubleRightArrow } from "@assets/svg";
 
 import Drawer from "../Drawer/Drawer";
+import IconButton from "../IconButton/IconButton";
 import * as S from "./Header.styled";
 
-const Header = () => {
+interface HeaderProps {
+  useLogo?: boolean;
+  rightContent: React.ReactNode;
+  $isRightContentFull?: boolean;
+  useHamburger?: boolean;
+}
+
+const Header = ({
+  useLogo = false,
+  rightContent,
+  $isRightContentFull = false,
+  useHamburger = false,
+}: HeaderProps) => {
   const { user, saveUser } = useUser();
   const location = useLocation();
   const pathName = location.pathname;
 
   const navigate = useNavigate();
 
-  const handleClickButton =
-    pathName === ROUTE_PATHS_MAP.root || pathName === ROUTE_PATHS_MAP.login
-      ? () => navigate(ROUTE_PATHS_MAP.root)
-      : () => navigate(ROUTE_PATHS_MAP.back);
-
   const handleClickLogout = () => {
     if (
       pathName.includes(ROUTE_PATHS_MAP.travelPlan().split("/").shift()!) ||
       pathName.includes(ROUTE_PATHS_MAP.my)
     ) {
       navigate(ROUTE_PATHS_MAP.login);
     }
-
     saveUser({ accessToken: "", memberId: 0 });
   };
 
   const handleClickMyPage = () => navigate(ROUTE_PATHS_MAP.my);
 
-  const handleClickHome = () => navigate(ROUTE_PATHS_MAP.root);
-
   return (
     <Drawer>
       <S.HeaderLayout>
-        <IconButton
-          color={pathName === ROUTE_PATHS_MAP.root ? theme.colors.primary : PRIMITIVE_COLORS.black}
-          onClick={handleClickButton}
-          iconType={pathName === ROUTE_PATHS_MAP.root ? "korean-logo" : "back-icon"}
-        />
-        {pathName === ROUTE_PATHS_MAP.login ? (
-          <>
-            <S.HeaderTitle>로그인</S.HeaderTitle>
-            <S.HiddenDiv />
-          </>
-        ) : (
-          <Drawer.Trigger>
-            <IconButton iconType={"hamburger"} />
-          </Drawer.Trigger>
-        )}
+        <S.LeftWrapper>
+          <IconButton
+            color={useLogo ? theme.colors.primary : PRIMITIVE_COLORS.black}
+            iconType={useLogo ? "korean-logo" : "back-icon"}
+            onClick={
+              useLogo ? () => navigate(ROUTE_PATHS_MAP.root) : () => navigate(ROUTE_PATHS_MAP.back)
+            }
+          />
+        </S.LeftWrapper>
+
+        <S.RightWrapper $isRightContentFull={$isRightContentFull}>
+          {rightContent}
+          {useHamburger && (
+            <Drawer.Trigger>
+              <IconButton iconType="hamburger" />
+            </Drawer.Trigger>
+          )}
+        </S.RightWrapper>
       </S.HeaderLayout>
 
       <Drawer.Header>
@@ -70,9 +76,6 @@ const Header = () => {
       </Drawer.Header>
       <Drawer.Content>
         <S.MenuList>
-          <Drawer.Trigger>
-            <S.MenuItem onClick={handleClickHome}>홈</S.MenuItem>
-          </Drawer.Trigger>
           <Drawer.Trigger>
             <S.MenuItem onClick={handleClickMyPage}>마이페이지</S.MenuItem>
           </Drawer.Trigger>

frontend/src/components/common/Header/HomeHeader/HomeHeader.tsx

@@ -0,0 +1,25 @@
+import { useNavigate } from "react-router-dom";
+
+import IconButton from "@components/common/IconButton/IconButton";
+
+import { ROUTE_PATHS_MAP } from "@constants/route";
+
+import Header from "../Header";
+
+const HomeHeader = () => {
+  const navigation = useNavigate();
+  return (
+    <Header
+      rightContent={
+        <IconButton
+          iconType="home-icon"
+          size="20"
+          onClick={() => navigation(ROUTE_PATHS_MAP.root)}
+        />
+      }
+      useHamburger
+    />
+  );
+};
+
+export default HomeHeader;

frontend/src/components/common/Header/LogoHeader/LogoHeader.tsx

@@ -0,0 +1,27 @@
+import { useNavigate } from "react-router-dom";
+
+import IconButton from "@components/common/IconButton/IconButton";
+
+import { ROUTE_PATHS_MAP } from "@constants/route";
+
+import Header from "../Header";
+
+const LogoHeader = () => {
+  const navigation = useNavigate();
+
+  return (
+    <Header
+      useLogo
+      rightContent={
+        <IconButton
+          iconType="search-icon"
+          size="18"
+          onClick={() => navigation(ROUTE_PATHS_MAP.searchMain)}
+        />
+      }
+      useHamburger
+    />
+  );
+};
+
+export default LogoHeader;

frontend/src/components/common/Header/NavigationHeader/NavigationHeader.tsx

@@ -0,0 +1,26 @@
+import { useNavigate } from "react-router-dom";
+
+import IconButton from "@components/common/IconButton/IconButton";
+
+import { ROUTE_PATHS_MAP } from "@constants/route";
+
+import Header from "../Header";
+
+const NavigationHeader = () => {
+  const navigation = useNavigate();
+
+  return (
+    <Header
+      rightContent={
+        <IconButton
+          iconType="search-icon"
+          size="18"
+          onClick={() => navigation(ROUTE_PATHS_MAP.searchMain)}
+        />
+      }
+      useHamburger
+    />
+  );
+};
+
+export default NavigationHeader;

frontend/src/components/common/Header/SearchHeader/SearchHeader.styled.ts

@@ -0,0 +1,25 @@
+import styled from "@emotion/styled";
+
+export const FormWrapper = styled.form`
+  flex: 1;
+  position: relative;
+  padding-left: 1.6rem;
+`;
+
+export const ButtonContainer = styled.div`
+  display: flex;
+  gap: 1.2rem;
+  position: absolute;
+  top: 50%;
+  right: 1.6rem;
+  transform: translateY(-50%);
+`;
+
+export const DeleteButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0.8rem;
+  border-radius: 50%;
+  background: rgb(0 0 0/ 10%);
+`;