Skip to content

Commit

Permalink
Revert "[#362] TopNavigation 컴포넌트 리팩터링 (#393)"
Browse files Browse the repository at this point in the history 
This reverts commit 55a6b98.
  • Loading branch information
@gxxrxn
gxxrxn authored Aug 20, 2024
1 parent 672153a commit b1649a4
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 146 deletions.
2 changes: 1 addition & 1 deletion public/icons/close.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/icons/hamburger.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
123 changes: 23 additions & 100 deletions src/stories/Base/TopNavigation.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
import { Meta, StoryObj } from '@storybook/react';
import TopNavigation from '@/ui/Base/TopNavigation';
import {
IconPost,
IconShare,
IconArrowLeft,
IconHamburger,
IconClose,
} from '@public/icons';
import { IconPost, IconShare } from '@public/icons';

const meta: Meta<typeof TopNavigation> = {
title: 'Base/TopNavigation',
Expand All @@ -19,97 +13,26 @@ export default meta;
type Story = StoryObj<typeof TopNavigation>;

export const Default: Story = {
render: () => (
<TopNavigation>
<TopNavigation.LeftItem>
<IconArrowLeft />
</TopNavigation.LeftItem>
<TopNavigation.CenterItem>
Refactoring 2nd(리팩터링 2판)
</TopNavigation.CenterItem>
<TopNavigation.RightItem>
<IconShare />
</TopNavigation.RightItem>
</TopNavigation>
),
};

export const OnlySide: Story = {
render: () => (
<TopNavigation>
<TopNavigation.LeftItem>
<IconArrowLeft />
</TopNavigation.LeftItem>
<TopNavigation.RightItem>
<IconShare />
</TopNavigation.RightItem>
</TopNavigation>
),
};

export const OnlyCenter: Story = {
render: () => (
<TopNavigation>
<TopNavigation.CenterItem textAlign="left">
Refactoring 2nd(리팩터링 2판)
</TopNavigation.CenterItem>
</TopNavigation>
),
};

export const CenterWithLeft: Story = {
render: () => (
<TopNavigation>
<TopNavigation.LeftItem>
<IconArrowLeft />
</TopNavigation.LeftItem>
<TopNavigation.CenterItem textAlign="left">
Refactoring 2nd(리팩터링 2판)
</TopNavigation.CenterItem>
</TopNavigation>
),
};

export const CenterWithRight: Story = {
render: () => (
<TopNavigation>
<TopNavigation.CenterItem>
Refactoring 2nd(리팩터링 2판)
</TopNavigation.CenterItem>
<TopNavigation.RightItem>
<IconShare />
</TopNavigation.RightItem>
</TopNavigation>
),
};

export const TextLeft: Story = {
render: () => (
<TopNavigation>
<TopNavigation.LeftItem>
<IconArrowLeft />
</TopNavigation.LeftItem>
<TopNavigation.CenterItem textAlign="left">
프롱이 리팩터링 스터디
</TopNavigation.CenterItem>
<TopNavigation.RightItem>
<IconPost />
<IconHamburger />
</TopNavigation.RightItem>
</TopNavigation>
),
};

export const PostWrite: Story = {
render: () => (
<TopNavigation>
<TopNavigation.LeftItem>
<IconClose />
</TopNavigation.LeftItem>
<TopNavigation.CenterItem>글 작성하기</TopNavigation.CenterItem>
<TopNavigation.RightItem>
<button className="font-bold text-main-900">완료</button>
</TopNavigation.RightItem>
</TopNavigation>
),
args: {
title: 'Refactoring 2nd(리팩터링 2판)',
},
render: args => <TopNavigation {...args} />,
};

export const BookshelfPage: Story = {
args: {
titleAlign: 'center',
children: <IconShare />,
},
render: args => <TopNavigation {...args} />,
};

export const GroupPage: Story = {
args: {
titleAlign: 'left',
title: '프롱이 리팩터링 스터디',
isOwner: true,
children: <IconPost />,
},
render: args => <TopNavigation {...args} />,
};
75 changes: 31 additions & 44 deletions src/ui/Base/TopNavigation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,40 @@
import { PropsWithChildren, ReactNode } from 'react';

interface TopNavigationProps {
children?: ReactNode;
import { IconArrowLeft, IconHamburger } from '@public/icons';
import Link from 'next/link';
import { PropsWithChildren } from 'react';

interface Props extends PropsWithChildren {
titleAlign?: 'center' | 'left';
title?: string;
isOwner?: boolean;
}

type ItemProps = TopNavigationProps;

const TopNavigation = ({ children }: TopNavigationProps) => {
const TopNavigation = ({
children,
titleAlign = 'center',
title = '',
isOwner = false,
}: Props) => {
return (
<div className="relative flex h-[2.4rem] w-full items-center justify-center bg-opacity-0 px-[2rem] py-[1.7rem] text-md">
{children}
<div className="relative flex h-[5.4rem] w-full gap-[1.5rem] bg-opacity-0 px-[2rem] py-[1.7rem]">
<Link href=".">
<IconArrowLeft className="hover:cursor-pointer" />
</Link>
<div
className={`flex w-full pr-[3.5rem] text-md font-normal leading-[1.9rem] ${TITLE_ALIGN_CLASSES[titleAlign]}`}
>
{title}
</div>
<div className="absolute right-[2rem] flex gap-[1rem]">
{children}
{isOwner && <IconHamburger className="hover:cursor-pointer" />}
</div>
</div>
);
};

const LeftItem = ({ children }: ItemProps) => {
return (
<div className="absolute left-[2rem] [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
{children}
</div>
);
};

type CenterItemProps = PropsWithChildren<{ textAlign?: 'left' | 'center' }>;

const textAligns = {
left: 'text-left',
center: 'text-center',
} as const;

const CenterItem = ({ children, textAlign = 'center' }: CenterItemProps) => {
const alignClassName = textAligns[textAlign];
return (
<div className={`w-full px-[3.5rem] ${alignClassName}`}>{children}</div>
);
};
export default TopNavigation;

const RightItem = ({ children }: ItemProps) => {
return (
<div className="absolute right-[2rem] flex gap-[1rem] [&_svg]:h-[2rem] [&_svg]:w-[2rem] [&_svg]:cursor-pointer">
{children}
</div>
);
const TITLE_ALIGN_CLASSES = {
center: 'justify-center',
left: 'justify-start',
};

TopNavigation.LeftItem = LeftItem;

TopNavigation.CenterItem = CenterItem;

TopNavigation.RightItem = RightItem;

export default TopNavigation;

0 comments on commit b1649a4

Please sign in to comment.