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 (
     <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}