오늘은 팀프로젝트를 하면서 Ui 구현을 위해 사용한 NextUi 에서 겪었던 문제를 정리해봤다.
문제상황 설명
NavBar 를 만들기 위해 Header 컴포넌트를 작성중에 NextUi 에서 Dropdown 이라는것을 찾아서 임의로 만든 nav 태그에 넣어 사용하려했다.
❗ Dropdown 은 이런 모습이다.
아바타 아이콘을 클릭하면 저런식으로 메뉴가 Drop! 되는 형태로 나오게 된다.
그래서 이 Dropdown 을 적용해 짠 코드는
<Dropdown placement="bottom-end">
<DropdownTrigger>
<Avatar
isBordered
as="button"
className="transition-transform"
color="secondary"
size="md"
src={user.avatar}
/>
</DropdownTrigger>
<DropdownMenu aria-label="Profile Actions" variant="flat">
<DropdownItem key="profile" className="h-14 gap-2 pointer-events-none" textValue="Signed in as">
<p className="font-semibold">Signed in as</p>
<p className="font-semibold">{user.email}</p>
</DropdownItem>
<DropdownItem textValue="글쓰기">
<Link href="/write">글쓰기</Link>
</DropdownItem>
<DropdownItem textValue="마이페이지">
<Link href="/userProfile">마이페이지</Link>
</DropdownItem>
<DropdownItem key="logout" color="danger" onClick={() => authLogout()} textValue="로그아웃">
로그아웃
</DropdownItem>
</DropdownMenu>
</Dropdown>이렇게 완성했는데 대부분 정상작동이 되는걸 확인했지만 한가지 문제를 직면하게 되었는데
이 메뉴바에서 글쓰기와 마이페이지를 클릭했을 때
<Link href="/write">글쓰기</Link>이 링크를 통해 글쓰기와 마이페이지로 페이지가 이동 되었어야 했지만 계속 클릭 해봐도 아무 변화가 없는 문제를 발견하게 되었다.
해결 방법
그래서 이 문제를 해결 하기위해 gpt 도 활용 해보고 구글링을 열심히 해봤지만
몇시간동안 답을 찾지 못하다가 NextUi Github 에서 답을 찾아냈는데
그 해결 방법은 아래와 같았다.
NextUi 를 통해 가져온 DropdownItem 태그 안에
<DropdownItem
as={Link}
href='/userProfile'
textValue="마이페이지"
>이런식으로 as 를 사용하면 DropdownItem을 버튼이 아닌 다른 요소로 대체할 수 있게되는데 예를 들어, as={Link} 로 설정하면 DropdownItem을 링크 요소로 대체하게 된다. 따라서 클릭할 때 별도로 Link 태그를 작성하지 않아도 링크된 주소로 이동하게 된다.
이렇게 작성해주니 작동하지 않던 Link 가 정상 작동 되는걸 확인할수 있었다.
