diff --git a/umc-master/index.html b/umc-master/index.html index 98aeab9..e76b095 100644 --- a/umc-master/index.html +++ b/umc-master/index.html @@ -2,7 +2,7 @@ - + - Vite + React + TS + 홈마스터 diff --git a/umc-master/public/favicon.svg b/umc-master/public/favicon.svg new file mode 100644 index 0000000..70aa4cc --- /dev/null +++ b/umc-master/public/favicon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/umc-master/src/components/NavigationBar/NavigationBar.tsx b/umc-master/src/components/NavigationBar/NavigationBar.tsx index 736c344..9846272 100644 --- a/umc-master/src/components/NavigationBar/NavigationBar.tsx +++ b/umc-master/src/components/NavigationBar/NavigationBar.tsx @@ -1,6 +1,6 @@ -/* eslint-disable react/prop-types */ +import React from 'react'; import { useEffect, useState } from 'react'; -import { Link } from 'react-router-dom'; +import { NavLink } from 'react-router-dom'; import styled from 'styled-components'; import LogoImage from '@assets/logo.png'; import RoutePaths from '@router/routePaths'; @@ -32,32 +32,27 @@ const NavigationBar: React.FC = ({ login }) => { return ( + @@ -93,21 +89,38 @@ const Nav = styled.nav` box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); `; +const LeftSection = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 48px; +`; + const Logo = styled.img` - height: 52px; + height: 42px; cursor: pointer; `; const MenuItems = styled.div` display: flex; gap: clamp(20px, 10vw, 40px); +`; + +const StyledNavLink = styled(NavLink)` + color: ${({ theme }) => theme.colors.text.black}; + text-decoration: none; + transition: color 0.3s ease; + + &:hover { + color: ${({ theme }) => theme.colors.primary[400]}; + } - a { - color: ${({ theme }) => theme.colors.text.black}; + &.active { + color: ${({ theme }) => theme.colors.primary[500]}; } `; -const LoginBtn = styled(Link)` +const LoginBtn = styled(NavLink)` background: ${({ theme }) => theme.colors.primary[500]}; color: ${({ theme }) => theme.colors.text.white}; padding: 7px 27px;