[스팀몬스터] React로 스몬 관련 정보 보기(11) : 메뉴 만들기

보통 웹에서 지원하는 여러가지 기능을 menu로 구분을 합니다. 메뉴를 구현하는 방법은 다양하지만 일반적으로 위에 메뉴가 나오는 방식으로 개발을 해 봅니다.

Carbon Design System에서는 UI shell을 사용하면 됩니다. UI shell을 이용하면 다양한 형태의 menu를 구현할 수 있습니다.

제가 필요로 하는 메뉴와 정확하게 일치하는 예제가 있습니다. 이러면 게임 끝이죠

https://react.carbondesignsystem.com/?path=/story/components-ui-shell--header-base-w-navigation

소스 코드를 참고하여 만들어봅니다.

코드 가져와서 이름만 이름만 바꾸면 되죠.

기존 코드와 UI shell을 합쳤더니 이렇게 화면이 보입니다.

그런데 그냥 배치만 했더니 이쁘게 보이지가 않는군요. 웹페이지를 이쁘게 보이는 건 또 다른 문제라.. 추가로 공부가 필요할 듯 합니다.