Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 13 commits into from
Sep 14, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/public/mockServiceWorker.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
32 changes: 30 additions & 2 deletions frontend/src/components/Common/Header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
16 changes: 0 additions & 16 deletions frontend/src/components/Common/Title/Title.stories.tsx

This file was deleted.

53 changes: 0 additions & 53 deletions frontend/src/components/Common/Title/Title.tsx

This file was deleted.

1 change: 0 additions & 1 deletion frontend/src/components/Common/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
7 changes: 5 additions & 2 deletions frontend/src/components/Layout/AuthLayout.tsx
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down
31 changes: 31 additions & 0 deletions frontend/src/components/Layout/SimpleHeaderLayout.tsx
Original file line number Diff line number Diff line change
@@ -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;
`;
1 change: 1 addition & 0 deletions frontend/src/components/Layout/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Original file line number Diff line number Diff line change
@@ -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 = {};
51 changes: 51 additions & 0 deletions frontend/src/components/Product/ProductTitle/ProductTitle.tsx
Original file line number Diff line number Diff line change
@@ -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;
`;
1 change: 1 addition & 0 deletions frontend/src/components/Product/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
8 changes: 2 additions & 6 deletions frontend/src/constants/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: '목록',
Expand Down Expand Up @@ -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',
Expand Down
Loading
Loading