Next 기반 UI 컴포넌트 가이드
공용 UI 컴포넌트를 설계하고 확장해가는 과정을 정리한 포트폴리오로, 기본 인터랙션 컴포넌트부터 폼 입력, 오버레이, 복합 컴포넌트까지 범위를 넓혀가며 controlled 패턴과 React Hook Form 연동 방식, 디자인 토큰 정리, 접근성 보완, motion 기준까지 함께 다룹니다.
Next UI Components Guide
Next 환경에서 사용 가능한 공용 UI를 한눈에 확인할 수 있도록 가이드 형태로 제작한 프로젝트입니다.
Project Overview
프로젝트 소개
프로젝트 목적과 사용 라이브러리를 간단히 정리했습니다.
프로젝트 스택
- Next.js 14
- React 18
- TypeScript 5
- Sass (SCSS)
UI 구현 라이브러리
- React Hook Form
- react-select
- react-day-picker
- date-fns
- classnames
- zustand
애니메이션 라이브러리
- framer-motion
Sample Form
회원가입 폼 예시
지금까지 만든 폼 계열 컴포넌트를 실제 가입 흐름처럼 조합한 예시입니다. 기본 폼 검증 후 LayerPopup에서 추가 정보를 입력하면 결과 패널에 함께 반영됩니다.
제출 결과
메인 폼을 통과한 뒤 LayerPopup 확인까지 완료하면 입력한 값이 이 영역에 정리됩니다.