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.

Sign up for GitHub

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

Jump to bottom

[#361] BottomNavigation 컴포넌트 #392

Merged
merged 9 commits into from
Aug 16, 2023
Merged

[#361] BottomNavigation 컴포넌트 #392

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e6ca623
style: 누락된 theme 컬러 값 추가
hanyugeon Aug 1, 2023
0b7ee15
feat: BottomNavigationItem 컴포넌트 작성
hanyugeon Aug 4, 2023
eeba32e
feat: BottomNavigation 컴포너트 작성
hanyugeon Aug 4, 2023
a9820f8
feat: BottomNavigation 스토리북 작성
hanyugeon Aug 5, 2023
0f5579e
fix: 스토리북 docs에 컴포넌트가 올바르게 표시되지 않던 문제 해결
hanyugeon Aug 5, 2023
583fb37
refactor: NavigationItem 컴포넌트 코드이동 및 삭제
hanyugeon Aug 8, 2023
7db350f
refactor: icon 크기 정의 방법을 수정
hanyugeon Aug 11, 2023
f844d3f
refactor: getIconColorClasses()를 조건반환문 으로 변경
hanyugeon Aug 13, 2023
e20dcb2
chore: iconColor 상수를 컴포넌트 바깥으로 이동
hanyugeon Aug 14, 2023
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
15 changes: 7 additions & 8 deletions src/ui/Base/BottomNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,20 +35,19 @@ const icons = [
const BottomNavigation = () => {
const pathname = usePathname();

const getIconColorClasses = (href: string) => {
return href === pathname
? 'fill-main-900 text-main-900'
: 'fill-placeholder text-placeholder';
};
const iconColor = {
hanyugeon marked this conversation as resolved.
Show resolved Hide resolved
active: 'fill-main-900 text-main-900',
inactive: 'fill-placeholder text-placeholder',
} as const;

return (
<div className="border-top-[0.05rem] fixed bottom-0 flex h-[6.4rem] w-full max-w-[39.3rem] justify-between border-black-200 bg-white px-[2.6rem] pb-[1.2rem] pt-[0.8rem]">
{icons.map(({ icon, label, href }) => (
<Link key={label} type="button" href={href}>
<div
className={`flex h-[4.4rem] w-[4.6rem] flex-col items-center justify-center text-xs font-bold ${getIconColorClasses(
href
)}`}
className={`flex h-[4.4rem] w-[4.6rem] flex-col items-center justify-center text-xs font-bold ${
href === pathname ? iconColor.active : iconColor.inactive
}`}
>
<div className="h-[2.6rem] w-[2.6rem] text-placeholder">{icon}</div>
{label}
Expand Down