현재 페이지 표시

• 메인 페이지와 업체 관리페이지에 보여지는 SlideBox.js(라우터; 페이지 항목)와 업체 메뉴판에서 현재 페이지(메뉴 카테고리)를 보여주는 MenuNav.js 두곳에 현재 페이지를 표시해야 했다.
• 업체 메뉴판 페이지는 URL 파라미터를 가지고 오기 때문에, 라우터를 구성을 하지 않았다.

SlideBox.js

• 메뉴가 나타내는 페이지는 각각 라우터(react-router-dom)로 나눠져 있다.
• 따라서 라이브러리에서 제공하는 <NavLink> 를 이용했다.
• 활성화 되었을 때 스타일을 지정할 수 있다.

// SlideBox.js
<NavLink className={({ isActive }) => (isActive ? 'slide-box-active' : undefined)} to={'/'}>
  <img src='/icon/home.png' alt='home' />
    <div>HOME</div>
</NavLink>

/* SlideBox.css*/
.slide-box-active {
  background-color: #ececeb;
}

MenuNav.js

• 업체 메뉴판 내부의 페이지(메뉴 카테고리)는 라우터로 구성한 것이 아니기 때문에 다른 방법으로 구현 했다.
• 활성화된 페이지를 state에 기록하여 구현했다.

// MenuNav.js
const [active, setActive] = useState(0);

{category.map((v, i) => (
  <button onClick={() => setActive(i)} key={`${v}${i}`} className={active === i ? 'nav-item nav-active' : 'nav-item'}>
    {v}
  </button>
))}

.nav-item {
  background-color: #ececeb;
  border: 1px solid #ececeb;
  border-radius: 12px;
  margin: 10px 5px 10px 5px;
  padding: 7px;
  text-align: center;
  font-weight: 900;
  font-size: 15px;
  border: 0px;
}
/* 선택된 메뉴 효과 */
.nav-active {
  background-color: #cf7500;
  color: #ececeb;
}