리액트 마스터 클래스 - 19강: 토픽 생성 페이지 UI 만들기
- 리액트 라우터를 활용하여 토픽 작성 페이지 UI를 구성하고, 데이터베이스에 저장될 정보 구상 📝
- 토픽 작성 UI는 사용자 편의성과 심미성을 고려하여 디자인 🎨
index.tsx에서 '나만의 토픽 작성' 버튼 클릭 시 해당 페이지로 라우팅 처리 ➡️
useNavigate 훅을 사용하여 페이지 이동 구현 🚀
- UI는 메인 태그와 섹션 태그를 활용하여 레이아웃 구성 🧱
- Tailwind CSS를 사용하여 스타일링 적용 (width, height, flex, gap 등) 💅
- 픽스드 위치의 버튼 그룹을 만들어 UI 고정 📌
- 뒤로 가기, 저장, 발행 버튼 추가 및 아이콘 활용 🔙💾📤
- 2개의 섹션으로 나누어 '토픽 작성하기'와 '카테고리 및 썸네일 등록' UI 구현 ➗
- '토픽 작성하기' 섹션은 제목과 본문 입력 필드로 구성 ✍️
- 필수 입력 필드 표시를 위해 에스터리스크 아이콘 사용 *️⃣
- shadcn/ui의 라벨 및 인풋 컴포넌트 설치 및 활용 📦
- 플레이스 홀더 텍스트 스타일 조정 (크기, 폰트 굵기) ✒️
- '카테고리 및 썸네일 등록' 섹션은 카테고리 선택 및 썸네일 등록 기능 제공 🗂️🖼️
- shadcn/ui의 셀렉트 컴포넌트 설치 및 활용 ⚙️
- 상수 파일에서 카테고리 목록을 가져와 셀렉트 옵션으로 사용 📂
- 썸네일 제거 버튼 추가 및 스켈레톤 UI 구현 🗑️
- UI 구현 시 데이터베이스에 저장될 정보 고려 (제목, 카테고리, 썸네일, 본문) 🤔
- UI에 패딩을 적용하여 시각적 완성도 향상 🖼️