[Next.js] - 관리자 페이지 메뉴 셀렉트 기능 구현 하기

목표

• 관리자 페이지 상단의 <select> 박스를 통해 선택한 메뉴로 페이지 이동
• 기존 하드코딩된 옵션을 동적 메뉴 데이터로 대체

적용 코드 (Next.js 기준)

import { useRouter } from "next/navigation";

const AdminTitle = ({ user }: any) => {
  const router = useRouter();
  const pathName = ""; // 현재 페이지 경로 설정 필요

  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const selectedUrl = e.target.value;
    if (selectedUrl) {
      router.push(selectedUrl); // 페이지 이동
    }
  };

  return (
    <div className="mTitle1">
      <h3 className="iAdmin1">관리자 페이지</h3>
      <div className="dep2">
        <select className="select" title="2depth 메뉴" value={pathName} onChange={handleChange}>
          {user.auth && user.auth.menuList
            .filter(menu => menu.hirnkMenuYn === "N" && menu.hirnkMenuId === "MENU-ADMIN")
            .map((row, index) => (
              <option value={row.menuUrlAddress} key={row.authRoleId}>
                {row.menuName.replace("관리자-", "")}
              </option>
            ))}
        </select>
      </div>
    </div>
  );
};

설명

• useRouter를 사용하여 선택된 URL로 페이지 이동
• user.auth.menuList 내에서 MENU_ADMIN의 하위 메뉴만 필터링
• 메뉴명에서 '관리자-' 접두어 제거하여 깔끔하게 출력

주의사항

• patName은 현재 페이지 경로에 맞게 설정 필요 (예: usePathName() 활용 가능)
• Next.js App Router 기준이며, Router 버전에 따라 useRouter 임포트 경로 달라질 수 있다.