SideBar 구현

1. 상태에 따른 메뉴 배열 정의:

   • 공통 로그인 메뉴 (commonLoggedInMenu)
   • 셰프 전용 메뉴 (chefMenu)
   • 비로그인 메뉴 (loggedOutMenu)

2. 조건부 메뉴 구성 로직:

   const currentMenu = user
     ? user.chef_code === 1
       ? [...commonLoggedInMenu, ...chefMenu]
       : commonLoggedInMenu
     : loggedOutMenu;
   

   • 삼항 연산자를 중첩 사용하여 로그인 상태와 셰프 여부 확인
   • 로그인 상태: user 객체 존재 여부로 판단
   • 셰프회원 여부: user.chef_code === 1로 확인

3. 동적 메뉴 렌더링:

   {currentMenu.map((item, index) => (
     <Nav.Link
       key={index}
       as={Link}
       to={item.to}
       onClick={handleClose}
       className={styles.navLink}
     >
       {item.icon && <span className={styles.icon}>{item.icon}</span>}
       {item.text}
     </Nav.Link>
   ))}
   

   • currentMenu 배열을 순회하며 각 메뉴 항목을 동적으로 렌더링

4. 프로필 섹션 조건부 렌더링:

   {user ? (
     <Nav.Link/* 로그인 상태의 프로필 섹션 */ />
   ) : (
     <Nav.Link/* 비로그인 상태의 프로필 섹션 */ />
   )}
   

   • 로그인 상태에 따라 다른 프로필 섹션 표시

5. 셰프회원 뱃지 조건부 렌더링:

   {user.chef_code && user.chef_code === 1 ? (
     <div className={styles.chefBadge}>
       <span className={styles.chefText}>셰프등급</span>
       <FaChessKing />
     </div>
   ) : null}
   

   • 셰프 회원인 경우에만 특별한 뱃지 표시

장점:

• 사용자의 상태에 따라 UI를 동적으로 조정
• 컴포넌트 재사용성, 코드의 유지보수성과 확장성