React - Nav 클릭시 style 변경

• Header Nav 클릭시 style 값 변경
• path parameter를 이용해 해당 페이지로 url 변경

import { useState } from 'react'
import { Link } from 'react-router-dom'
import styled from 'styled-components'
import { flex } from '../../styles/Mixin'

// 필요없는 부분은 코드 생략
const Header = () => {
  const [navStyle, setNavStyle] = useState(0)
  const handleNavStyle = (id) => {
	setNavStyle(id)
  }
  return (
	 <Nav>
		<ListNav>
		  {NAV_ITEMS.map(({ id, name, path }) => {
			return (
			<NavItem key={id} onClick={() => handleNavStyle(id)} changeNavStyle={navStyle === id}>
				<NavLink to={`${path}`}>{name}</NavLink>
			</NavItem>)})}
		</ListNav>
	  </Nav>
				
	)
}

export default Header

const NAV_ITEMS = [
	{
		id: 1,
		name: '서비스 소개',
		path: '/',
	},
	{
		id: 2,
		name: '주문하기',
		path: '/products/channels',
	},
	{
		id: 3,
		name: '고객 후기',
		path: '/reviews',
	},
	{
		id: 4,
		name: 'FAQ',
		path: '/faqs/categories',
	},
]

const Nav = styled.div``

const ListNav = styled.ul`
	${flex('space-between', 'center')}
	width: 441px;
	height: 24px;
`

const NavItem = styled.li`
	color: ${(props) => (props.changeNavStyle ? ({ theme }) => theme.Black : ({ theme }) => theme.Gray[70])};
	font-size: ${({ theme }) => theme.Font.M};
	font-weight: ${(props) => (props.changeNavStyle ? '700' : '400')};
	line-height: 24px;
`

const NavLink = styled(Link)`
	margin-right: 70px;
	color: inherit;
	&:last-child {
		margin-right: 0;
	}
`