TIL - Shadcn UI & Next JS

유데미 강좌 “Shadcn UI & Next JS - shadcn으로 아름다운 대시보드 만들기” 를 완강했습니다.

https://www.udemy.com/course/shadcn-ui-next-js-korean/

shadcn 을 사용한 사용자 인터페이스 만들기가 주된 내용입니다.

shadcn 컴포넌트는 소스폴더에 코드로 들어오기 때문에 원하는 대로 고쳐 쓸 수 있다는 점이 특징이네요.

첫번째로 react hook form 과 zod 로 사용자 등록과 로그인 화면을 만듭니다.

다음의 shadcn 컴포넌트가 사용됩니다 - Button, Form, Input, Checkbox, Calendar, Popover, Select, Card

dark 모드 구현, zod 유효성 검사, Calendar와 Input 의 커스터마이제이션 작업을 합니다.

두번째로 로그인 이후의 대시보드 화면을 만듭니다.

새로 사용되는 shadcn 컴포넌트는 Avatar 이고, 주된 작업은 Rechart 작업입니다.

pie chart, line chart 를 그리고, 다른 탭에서 bar chart 를 그립니다

마지막으로 직원 리스트 화면을 만듭니다.

shadcn DataTable 을 사용해서 테이블로 보여주고 pagenation을 붙입니다

Drawer 를 사용하여 화면이 좁아지면 모바일 메뉴 방식으로 바뀌게 하는 작업도 있네요.

길지 않고 재미있는 강의입니다. 추천합니다.