From e6ca623bd12e167813c52bc878ea808028a04332 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Tue, 1 Aug 2023 16:29:20 +0900 Subject: [PATCH 1/9] =?UTF-8?q?style:=20=EB=88=84=EB=9D=BD=EB=90=9C=20them?= =?UTF-8?q?e=20=EC=BB=AC=EB=9F=AC=20=EA=B0=92=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tailwind.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index 5f87125f..7ae38948 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -41,7 +41,8 @@ module.exports = { kakao: '#FEE102', kakaotext: '#191600', black: { - 200: '#F4F4F4', + 100: '#F4F4F4', + 200: '#E9E9E9', 300: '#ECECEC', 400: '#D9D9D9', 500: '#8D8D8D', From 0b7ee151aecfb68fe5aa962421a35c52502a9bfe Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Fri, 4 Aug 2023 17:34:53 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20BottomNavigationItem=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui/Base/BottomNavigationItem.tsx | 36 ++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 src/ui/Base/BottomNavigationItem.tsx diff --git a/src/ui/Base/BottomNavigationItem.tsx b/src/ui/Base/BottomNavigationItem.tsx new file mode 100644 index 00000000..917acc1a --- /dev/null +++ b/src/ui/Base/BottomNavigationItem.tsx @@ -0,0 +1,36 @@ +import Link from 'next/link'; +import { ReactElement, useMemo } from 'react'; + +type Props = { + icon: ReactElement; + label: string; + href: string; + isActive: boolean; +}; + +const getIconColorClasses = (isActive: boolean) => { + return isActive + ? 'fill-main-900 text-main-900' + : 'fill-placeholder text-placeholder'; +}; + +const BottomNavigationItem = ({ icon, label, href, isActive }: Props) => { + const computedClasses = useMemo(() => { + const iconColorClass = getIconColorClasses(isActive); + + return iconColorClass; + }, [isActive]); + + return ( + +
+ {icon} + {label} +
+ + ); +}; + +export default BottomNavigationItem; From eeba32e47a0fa39527e560e5c609e5dd18c77e27 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Fri, 4 Aug 2023 17:35:13 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20BottomNavigation=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=88=ED=8A=B8=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui/Base/BottomNavigation.tsx | 55 ++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 src/ui/Base/BottomNavigation.tsx diff --git a/src/ui/Base/BottomNavigation.tsx b/src/ui/Base/BottomNavigation.tsx new file mode 100644 index 00000000..2285bc29 --- /dev/null +++ b/src/ui/Base/BottomNavigation.tsx @@ -0,0 +1,55 @@ +'use client'; + +import { + IconBookarchive, + IconDiscover, + IconGroup, + IconProfile, +} from '@public/icons'; +import { usePathname } from 'next/navigation'; +import BottomNavigationItem from './BottomNavigationItem'; + +const BASE_ICON_CLASSES = 'h-[2.6rem] w-[2.6rem] text-placeholder'; + +const icons = [ + { + icon: , + label: '북카이브', + href: '/bookarchive', + }, + { + icon: , + label: '도서 검색', + href: '/book/search', + }, + { + icon: , + label: '독서 모임', + href: '/group', + }, + { + icon: , + label: '내 프로필', + href: '/profile/me', + }, +]; + +const BottomNavigation = () => { + const pathname = usePathname(); + + return ( +
+ {icons.map(({ icon, label, href }) => ( + + ))} +
+ ); +}; + +export default BottomNavigation; From a9820f83975330419815560bc955154ead94f6e0 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Sun, 6 Aug 2023 01:25:41 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feat:=20BottomNavigation=20=EC=8A=A4?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/Base/BottomNavigation.stories.tsx | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 src/stories/Base/BottomNavigation.stories.tsx diff --git a/src/stories/Base/BottomNavigation.stories.tsx b/src/stories/Base/BottomNavigation.stories.tsx new file mode 100644 index 00000000..ce75e912 --- /dev/null +++ b/src/stories/Base/BottomNavigation.stories.tsx @@ -0,0 +1,64 @@ +import BottomNavigation from '@/ui/Base/BottomNavigation'; +import { Meta, StoryObj } from '@storybook/react'; + +const meta: Meta = { + title: 'Base/BottomNavigation', + component: BottomNavigation, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + parameters: { + nextjs: { + navigation: { + pathname: '/bookarchive', + }, + }, + }, + render: () => { + return ; + }, +}; + +export const Search: Story = { + parameters: { + nextjs: { + navigation: { + pathname: '/book/search', + }, + }, + }, + render: () => { + return ; + }, +}; + +export const Group: Story = { + parameters: { + nextjs: { + navigation: { + pathname: '/group', + }, + }, + }, + render: () => { + return ; + }, +}; + +export const Profile: Story = { + parameters: { + nextjs: { + navigation: { + pathname: '/profile/me', + }, + }, + }, + render: () => { + return ; + }, +}; From 0f5579e25dccb1f476b87fc910f0dea07e4c09a7 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Sun, 6 Aug 2023 02:25:29 +0900 Subject: [PATCH 5/9] =?UTF-8?q?fix:=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81?= =?UTF-8?q?=20docs=EC=97=90=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=EA=B0=80=20=EC=98=AC=EB=B0=94=EB=A5=B4=EA=B2=8C=20=ED=91=9C?= =?UTF-8?q?=EC=8B=9C=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8D=98=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/Base/BottomNavigation.stories.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/stories/Base/BottomNavigation.stories.tsx b/src/stories/Base/BottomNavigation.stories.tsx index ce75e912..647b934d 100644 --- a/src/stories/Base/BottomNavigation.stories.tsx +++ b/src/stories/Base/BottomNavigation.stories.tsx @@ -1,10 +1,18 @@ -import BottomNavigation from '@/ui/Base/BottomNavigation'; import { Meta, StoryObj } from '@storybook/react'; +import BottomNavigation from '@/ui/Base/BottomNavigation'; + const meta: Meta = { title: 'Base/BottomNavigation', component: BottomNavigation, tags: ['autodocs'], + parameters: { + docs: { + story: { + inline: false, + }, + }, + }, }; export default meta; From 583fb372335c0c2de6ee6cab052eb75fa87c7c93 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Wed, 9 Aug 2023 00:33:38 +0900 Subject: [PATCH 6/9] =?UTF-8?q?refactor:=20NavigationItem=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=BD=94=EB=93=9C=EC=9D=B4?= =?UTF-8?q?=EB=8F=99=20=EB=B0=8F=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui/Base/BottomNavigation.tsx | 25 ++++++++++++------- src/ui/Base/BottomNavigationItem.tsx | 36 ---------------------------- 2 files changed, 17 insertions(+), 44 deletions(-) delete mode 100644 src/ui/Base/BottomNavigationItem.tsx diff --git a/src/ui/Base/BottomNavigation.tsx b/src/ui/Base/BottomNavigation.tsx index 2285bc29..95cc9ba8 100644 --- a/src/ui/Base/BottomNavigation.tsx +++ b/src/ui/Base/BottomNavigation.tsx @@ -6,8 +6,8 @@ import { IconGroup, IconProfile, } from '@public/icons'; +import Link from 'next/link'; import { usePathname } from 'next/navigation'; -import BottomNavigationItem from './BottomNavigationItem'; const BASE_ICON_CLASSES = 'h-[2.6rem] w-[2.6rem] text-placeholder'; @@ -37,16 +37,25 @@ const icons = [ const BottomNavigation = () => { const pathname = usePathname(); + const getIconColorClasses = (href: string) => { + return href === pathname + ? 'fill-main-900 text-main-900' + : 'fill-placeholder text-placeholder'; + }; + return (
{icons.map(({ icon, label, href }) => ( - + +
+ {icon} + {label} +
+ ))}
); diff --git a/src/ui/Base/BottomNavigationItem.tsx b/src/ui/Base/BottomNavigationItem.tsx deleted file mode 100644 index 917acc1a..00000000 --- a/src/ui/Base/BottomNavigationItem.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import Link from 'next/link'; -import { ReactElement, useMemo } from 'react'; - -type Props = { - icon: ReactElement; - label: string; - href: string; - isActive: boolean; -}; - -const getIconColorClasses = (isActive: boolean) => { - return isActive - ? 'fill-main-900 text-main-900' - : 'fill-placeholder text-placeholder'; -}; - -const BottomNavigationItem = ({ icon, label, href, isActive }: Props) => { - const computedClasses = useMemo(() => { - const iconColorClass = getIconColorClasses(isActive); - - return iconColorClass; - }, [isActive]); - - return ( - -
- {icon} - {label} -
- - ); -}; - -export default BottomNavigationItem; From 7db350f46f2ca18ffddac5e53a069ba11a0e9534 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Fri, 11 Aug 2023 11:17:41 +0900 Subject: [PATCH 7/9] =?UTF-8?q?refactor:=20icon=20=ED=81=AC=EA=B8=B0=20?= =?UTF-8?q?=EC=A0=95=EC=9D=98=20=EB=B0=A9=EB=B2=95=EC=9D=84=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui/Base/BottomNavigation.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/ui/Base/BottomNavigation.tsx b/src/ui/Base/BottomNavigation.tsx index 95cc9ba8..b753e727 100644 --- a/src/ui/Base/BottomNavigation.tsx +++ b/src/ui/Base/BottomNavigation.tsx @@ -9,26 +9,24 @@ import { import Link from 'next/link'; import { usePathname } from 'next/navigation'; -const BASE_ICON_CLASSES = 'h-[2.6rem] w-[2.6rem] text-placeholder'; - const icons = [ { - icon: , + icon: , label: '북카이브', href: '/bookarchive', }, { - icon: , + icon: , label: '도서 검색', href: '/book/search', }, { - icon: , + icon: , label: '독서 모임', href: '/group', }, { - icon: , + icon: , label: '내 프로필', href: '/profile/me', }, @@ -52,7 +50,7 @@ const BottomNavigation = () => { href )}`} > - {icon} +
{icon}
{label} From f844d3fed327f0aaa3717b1696575aa97ec95788 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Sun, 13 Aug 2023 18:34:24 +0900 Subject: [PATCH 8/9] =?UTF-8?q?refactor:=20getIconColorClasses()=EB=A5=BC?= =?UTF-8?q?=20=EC=A1=B0=EA=B1=B4=EB=B0=98=ED=99=98=EB=AC=B8=20=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui/Base/BottomNavigation.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/ui/Base/BottomNavigation.tsx b/src/ui/Base/BottomNavigation.tsx index b753e727..ee8ddc47 100644 --- a/src/ui/Base/BottomNavigation.tsx +++ b/src/ui/Base/BottomNavigation.tsx @@ -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 = { + active: 'fill-main-900 text-main-900', + inactive: 'fill-placeholder text-placeholder', + } as const; return (
{icons.map(({ icon, label, href }) => (
{icon}
{label} From e20dcb2eb88391010263b4d27bb7ec981fa2b353 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Mon, 14 Aug 2023 10:10:07 +0900 Subject: [PATCH 9/9] =?UTF-8?q?chore:=20iconColor=20=EC=83=81=EC=88=98?= =?UTF-8?q?=EB=A5=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B0=94?= =?UTF-8?q?=EA=B9=A5=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui/Base/BottomNavigation.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/ui/Base/BottomNavigation.tsx b/src/ui/Base/BottomNavigation.tsx index ee8ddc47..3c006380 100644 --- a/src/ui/Base/BottomNavigation.tsx +++ b/src/ui/Base/BottomNavigation.tsx @@ -32,14 +32,14 @@ const icons = [ }, ]; +const iconColor = { + active: 'fill-main-900 text-main-900', + inactive: 'fill-placeholder text-placeholder', +} as const; + const BottomNavigation = () => { const pathname = usePathname(); - const iconColor = { - active: 'fill-main-900 text-main-900', - inactive: 'fill-placeholder text-placeholder', - } as const; - return (
{icons.map(({ icon, label, href }) => (