Next.js 프로젝트에 반응형 사이드바 구현하기

안녕하세요! 오늘은 Next.js 프로젝트에서 반응형 사이드바를 구현하는 방법을 소개해드리려고 합니다. shadcn/ui를 활용하면 손쉽게 구현할 수 있어요!

왜 반응형 사이드바인가?

반응형 사이드바는 데스크톱과 모바일 환경에서 모두 사용자 경험을 최적화할 수 있는 UI 요소입니다. 특히 대시보드나 관리자 페이지에서 유용하죠.

구현 단계

1. shadcn/ui 설치하기

 `npx shadcn-ui@latest init` 명령어를 사용해서 라이브러리를 설치해주세요. 

2. 필요한 컴포넌트 추가하기

`npx shadcn-ui@latest add badge button card dropdown-menu input sheet` 명령어로 컴포넌트를 추가해줄게요.

3. 모바일 네비게이션 컴포넌트 만들기

- `components/ui/mobile-nav.tsx` 파일 생성

- Sheet 컴포넌트를 활용하여 모바일 메뉴 구현

4. 데스크톱 사이드바 컴포넌트 만들기

- `components/ui/sidebar.tsx` 파일 생성

- 고정된 사이드바 레이아웃 구현

5. 네비게이션 항목 컴포넌트화

- 모바일과 데스크톱에서 공통으로 사용할 네비게이션 항목 분리

핵심 포인트

- 반응형 디자인: 모바일에서는 Sheet 컴포넌트로, 데스크톱에서는 고정 사이드바로 구현

- 재사용성: 네비게이션 항목을 컴포넌트화하여 코드 중복 최소화

- UI 일관성: shadcn/ui를 활용하여 일관된 디자인 시스템 적용

## 마치며

이 방법을 통해 깔끔하고 기능적인 반응형 사이드바를 쉽게 구현할 수 있습니다. 전체 소스 코드는 [GitHub 저장소](https://github.com/woongsnote/next-sidebar)에서 확인하실 수 있어요.

더 자세한 내용이 궁금하시다면, [원본 블로그 포스트](https://www.woongsnote.dev/blog/how-to-create-a-responsive-sidebar-easy)를 참고해주세요!

행복한 코딩 되세요! 🚀