[FE] refactor: 검색 탭 삭제 및 순서 수정 (#578)

* feat: 검색 탭 삭제

* feat: 상품 목록, 꿀조합 페이지에 검색 아이콘 추가

* refactor: Title 컴포넌트를 Common에서 Product로 이동

* refactor: 검색 탭 삭제 후 검색 페이지로 분리

* refactor: dynamic segment로 변경해서 타입체킹을 하는 방법으로 변경

* chore: msw 버전업

* feat: 새로운 헤더 디자인 추가

* feat: 검색 페이지와 통합 검색 페이지 분리

* feat: 검색 페이지 헤더 ui 변경

* refactor: 검색 페이지 헤더 ui 변경

* refactor: Title->ProductTitle로 네이밍 변경

* fix: AuthLayout 에러 해결

frontend/public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.2.3).
+ * Mock Service Worker (1.3.0).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

frontend/src/components/Common/Header/Header.tsx

@@ -2,21 +2,49 @@ import { Link } from '@fun-eat/design-system';
 import { Link as RouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
+import SvgIcon from '../Svg/SvgIcon';
+
 import Logo from '@/assets/logo.svg';
 import { PATH } from '@/constants/path';
 
-const Header = () => {
+interface HeaderProps {
+  hasSearch?: boolean;
+}
+
+const Header = ({ hasSearch = true }: HeaderProps) => {
+  if (hasSearch) {
+    return (
+      <HeaderWithSearchContainer>
+        <Link as={RouterLink} to={PATH.HOME}>
+          <Logo width={160} />
+        </Link>
+        <Link as={RouterLink} to={`${PATH.SEARCH}/integrated`}>
+          <SvgIcon variant="search" />
+        </Link>
+      </HeaderWithSearchContainer>
+    );
+  }
+
   return (
     <HeaderContainer>
       <Link as={RouterLink} to={PATH.HOME}>
-        <Logo width={200} />
+        <Logo width={180} />
       </Link>
     </HeaderContainer>
   );
 };
 
 export default Header;
 
+const HeaderWithSearchContainer = styled.header`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: calc(100% - 40px);
+  height: 60px;
+  margin: 0 auto;
+`;
+
 const HeaderContainer = styled.header`
   display: flex;
   justify-content: center;

frontend/src/components/Common/index.ts

@@ -7,7 +7,6 @@ export { default as SvgSprite } from './Svg/SvgSprite';
 export { default as SvgIcon } from './Svg/SvgIcon';
 export { default as TabMenu } from './TabMenu/TabMenu';
 export { default as TagList } from './TagList/TagList';
-export { default as Title } from './Title/Title';
 export { default as SectionTitle } from './SectionTitle/SectionTitle';
 export { default as ScrollButton } from './ScrollButton/ScrollButton';
 export { default as Input } from './Input/Input';

frontend/src/components/Layout/AuthLayout.tsx

@@ -1,10 +1,13 @@
-import type { PropsWithChildren } from 'react';
 import { Navigate } from 'react-router-dom';
 
 import { PATH } from '@/constants/path';
 import { useMemberQuery } from '@/hooks/queries/members';
 
-const AuthLayout = ({ children }: PropsWithChildren) => {
+interface AuthLayoutProps {
+  children: JSX.Element;
+}
+
+const AuthLayout = ({ children }: AuthLayoutProps) => {
   const { data: member } = useMemberQuery();
 
   if (!member) {

frontend/src/components/Layout/SimpleHeaderLayout.tsx

@@ -0,0 +1,31 @@
+import type { PropsWithChildren } from 'react';
+import styled from 'styled-components';
+
+import Header from '../Common/Header/Header';
+import NavigationBar from '../Common/NavigationBar/NavigationBar';
+
+const SimpleHeaderLayout = ({ children }: PropsWithChildren) => {
+  return (
+    <SimpleHeaderLayoutContainer>
+      <Header hasSearch={false} />
+      <MainWrapper id="main">{children}</MainWrapper>
+      <NavigationBar />
+    </SimpleHeaderLayoutContainer>
+  );
+};
+
+export default SimpleHeaderLayout;
+
+const SimpleHeaderLayoutContainer = styled.div`
+  height: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+`;
+
+const MainWrapper = styled.main`
+  position: relative;
+  height: calc(100% - 120px);
+  padding: 20px;
+  overflow-x: hidden;
+  overflow-y: auto;
+`;

frontend/src/components/Layout/index.ts

@@ -2,3 +2,4 @@ export { default as DefaultLayout } from './DefaultLayout';
 export { default as MinimalLayout } from './MinimalLayout';
 export { default as HeaderOnlyLayout } from './HeaderOnlyLayout';
 export { default as AuthLayout } from './AuthLayout';
+export { default as SimpleHeaderLayout } from './SimpleHeaderLayout';

frontend/src/components/Product/ProductTitle/ProductTitle.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import ProductTitle from './ProductTitle';
+
+const meta: Meta<typeof ProductTitle> = {
+  title: 'common/ProductTitle',
+  component: ProductTitle,
+  args: {
+    headingTitle: '상품 목록',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductTitle>;
+
+export const Default: Story = {};

frontend/src/components/Product/ProductTitle/ProductTitle.tsx

@@ -0,0 +1,51 @@
+import { Heading, Link, theme } from '@fun-eat/design-system';
+import { Link as RouterLink } from 'react-router-dom';
+import styled from 'styled-components';
+
+import SvgIcon from '../../Common/Svg/SvgIcon';
+
+import { PATH } from '@/constants/path';
+
+interface ProductTitleProps {
+  content: string;
+  routeDestination: string;
+}
+
+const ProductTitle = ({ content, routeDestination }: ProductTitleProps) => {
+  return (
+    <ProductTitleContainer>
+      <ProductTitleLink as={RouterLink} to={routeDestination} replace>
+        <HeadingTitle>{content}</HeadingTitle>
+        <DropDownIcon variant="arrow" color={theme.colors.black} width={15} height={15} />
+      </ProductTitleLink>
+      <Link as={RouterLink} to={`${PATH.SEARCH}/products`}>
+        <SvgIcon variant="search" />
+      </Link>
+    </ProductTitleContainer>
+  );
+};
+
+export default ProductTitle;
+
+const ProductTitleContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const ProductTitleLink = styled(Link)`
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-left: 36%;
+`;
+
+const HeadingTitle = styled(Heading)`
+  font-size: 2.4rem;
+`;
+
+const DropDownIcon = styled(SvgIcon)`
+  rotate: 270deg;
+`;

frontend/src/components/Product/index.ts

@@ -4,3 +4,4 @@ export { default as ProductList } from './ProductList/ProductList';
 export { default as ProductOverviewItem } from './ProductOverviewItem/ProductOverviewItem';
 export { default as PBProductList } from './PBProductList/PBProductList';
 export { default as ProductRecipeList } from './ProductRecipeList/ProductRecipeList';
+export { default as ProductTitle } from './ProductTitle/ProductTitle';

frontend/src/constants/index.ts

@@ -3,11 +3,6 @@ import { PATH } from './path';
 import type { NavigationMenu } from '@/types/common';
 
 export const NAVIGATION_MENU: NavigationMenu[] = [
-  {
-    variant: 'search',
-    name: '검색',
-    path: PATH.SEARCH,
-  },
   {
     variant: 'list',
     name: '목록',
@@ -58,7 +53,8 @@ export const TAG_TITLE = {
 
 export const MIN_DISPLAYED_TAGS_LENGTH = 3;
 
-export const SEARCH_PAGE_TABS = ['상품', '꿀조합'] as const;
+export const SEARCH_TAB_VARIANTS = ['상품', '꿀조합'];
+export const SEARCH_PAGE_VARIANTS = { products: '상품', recipes: '꿀조합', integrated: '통합' } as const;
 
 export const CATEGORY_TYPE = {
   FOOD: 'food',