refactor(Header): 헤더 '코드잽' 로고에도 현재 경로 스타일 적용

woowacourse-teams · Oct 14, 2024 · bb228c6 · bb228c6
1 parent 51d15d8
commit bb228c6
Showing 1 changed file with 15 additions and 8 deletions.
diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
@@ -92,14 +92,21 @@ const Header = ({ headerRef }: { headerRef: React.RefObject<HTMLDivElement> }) =
   );
 };
 
-const Logo = () => (
-  <Link to={END_POINTS.HOME}>
-    <Flex align='center' gap='0.5rem'>
-      <CodeZapLogo aria-label='로고 버튼' />
-      <Heading.XSmall color={theme.color.light.secondary_800}>코드잽</Heading.XSmall>
-    </Flex>
-  </Link>
-);
+const Logo = () => {
+  const location = useLocation();
+  const isLandingPage = location.pathname === '/';
+
+  return (
+    <Link to={END_POINTS.HOME}>
+      <Flex align='center' gap='0.5rem'>
+        <CodeZapLogo aria-label='로고 버튼' />
+        <Heading.XSmall color={isLandingPage ? theme.color.light.primary_500 : theme.color.light.secondary_800}>
+          코드잽
+        </Heading.XSmall>
+      </Flex>
+    </Link>
+  );
+};
 
 const NavOption = ({ route, name }: { route: string; name: string }) => {
   const location = useLocation();