Document 01READ · PRACTICE · VERIFY
01. 화면을 말로 만들기
원하는 화면을 구체적으로 설명하고 레퍼런스를 붙여 첫 UI를 생성합니다.
- 레이아웃·구성요소 설명
- 레퍼런스 이미지 첨부
- 반응형 요구 명시
- 여러 후보 비교
가격표 3단(월/연 토글), 모바일 1열, 다크 테마로 만들어줘 Document 02READ · PRACTICE · VERIFY
02. 반복해서 다듬기
부분 수정 요청으로 간격·색·상태를 조정하며 완성도를 높입니다.
- 부분 단위로 수정 요청
- 간격·타이포 조정
- 상태(hover·빈 상태) 추가
- 접근성 점검
카드 간격을 넓히고, 강조 버튼만 파란색으로 바꿔줘 Document 03READ · PRACTICE · VERIFY
03. 코드로 가져오기
생성된 React·Tailwind 코드를 내 프로젝트 구조와 컴포넌트 규칙에 맞춰 이식합니다.
- 코드 복사·설치 명령 확인
- 컴포넌트 분리
- 디자인 토큰에 맞추기
- 불필요한 의존성 제거
npx shadcn@latest add ... # 필요한 컴포넌트만 선별 설치 Document 04READ · PRACTICE · VERIFY
04. 실제 데이터 연결
목업을 실제 데이터·이벤트에 연결하고 로딩·에러 상태를 붙입니다.
- 더미를 실제 데이터로
- 이벤트 핸들러 연결
- 로딩·에러 상태
- 동작 검증
// 목업 배열을 API 응답으로 교체하고 로딩/에러 처리 추가Apply what you learned