shadcn 은 React 및 Next.js 기반의 UI 컴포넌트 라이브러리로, Radix UI와 Tailwind CSS를 기반으로 해요. 필요한 컴포넌트를 선택해 직접 설치가 가능하며, 컴포넌트가 로컬에 추가되므로 tailwind 등을 통해 자유롭게 수정이 가능하다는 장점이 있어요. 따라서 다양한 상호작용(모달, 아코디언 등)을 쉽게 구현할 수 있어 많은 사랑을 받고 있는 라이브러리입니다. 현재 코드당에서도 shadcn을 적극 사용하고 있어요. 이번 스터디를 통해 shadcn과 친해지는 시간을 가져보도록 해요 😊

여러분의 공부를 돕기 위해 준비한 자료들이에요. 따라서 꼭 준비된 자료만 공부할 필요는 없어요! 자신만의 방식으로 공부하고 과제만 잘 수행하면 돼요! 😄

📚 공부할 내용

🎯 프로젝트 실습

저번 스터디에 진행했던 Next.js 실습에서 시작합니다!

1. Shadcn 설치

  1. 저번 스터디 실습에서 생성한 프로젝트 안에서 npx shadcn@latest init 명령어로 shadcn을 설치해주세요.
  2. 원하는 컴포넌트를 Shadcn 홈페이지에서 찾아 설치해주세요. 예를 들어, button 컴포넌트를 다운받고 싶을 때, npx shadcn@latest add button 명령어로 컴포넌트를 설치해주세요.
  3. 마찬가지로 npm run dev 또는 pnpm run dev 명령어를 통해 프로젝트를 실행해요.

2. 멋진 컴포넌트 사용해보기!

이번 실습은 Dialog 라는 컴포넌트를 설치하여 진행하겠습니다.

  • 지금까지는 포켓몬 버튼을 클릭하면 새로운 URL로써 새 페이지가 로딩되어 해당 포켓몬의 상세정보를 확인할 수 있었습니다.
  • 이번에는 포켓몬 버튼을 누르면 Dialog 컴포넌트로 모달창을 띄워 페이지 전환없이 각 포켓몬의 상세정보를 확인할 수 있도록 만들어볼게요!
  • Dialog 컴포넌트도 마찬가지로 Shadcn 홈페이지에 설명되어 있습니다. 커스텀하는 방법도 있으니 홈페이지를 잘 읽고 실습을 진행해보세요~

+) 상세정보를 Dialog에 넣는 방법을 고민해보세요 😄 디자인은 달라져도 괜찮아요!