sw편한세상

요즘 React + Next.js, MUI(Material UI) 조합으로 Front-End를 개발하고 있습니다. MUI에서 Tabs 라는 훌륭한 기능이 있는데, 이름 그대로 Tab을 만들어주고, Active되어 있는 탭과 Inactive되어 있는 탭을 구분 시켜줍니다. 예전에는 직접 구현해야 했지만, 요즘은 UI Framework에서 다 제공해줍니다. 아래는 MUI에서 제공하는 기본 탭입니다. 기본도 훌륭하지만, 우리는 조금 더 차별화를 위해 조금이라도 더 수정을 하고 싶어합니다. 저는 개인적으로 Circluar Button 스타일을 좋아하니, 제가 좋아하는 Circular button 형태로 만들어보겠습니다. 기본 Tabs MUI 기본 Tabs와 거의 유사한 코드입니다. 아래 그림을 보면, Activ..