[FE] 리액트 - 35강: 임시 저장 목록 다이얼로그 구현하기
- 발행되지 않은 임시 저장 토픽을 조회하고 관리하기 위한 다이얼로그 UI를 구현하며, 이는 토픽 재작성, 수정, 삭제 등 콘텐츠 관리에 필수적입니다. 🎯
shadcn/ui 라이브러리의 Dialog 컴포넌트를 활용하여 임시 저장 목록 다이얼로그의 기본 구조를 구축합니다. 🧩
npm 명령어를 통해 Dialog 컴포넌트를 설치하고, components/ui 폴더에 통합하여 index.ts 파일에서 중앙 관리합니다. 🛠️
pages/index.tsx에 노트북 펜 아이콘과 둥근 스타일의 버튼을 추가하고, 작은 빨간색 알림 아이콘을 오버레이하여 다이얼로그를 여는 트리거로 사용합니다. 🖊️
AppDraftDialog.tsx라는 재사용 가능한 공통 컴포넌트를 생성하여 shadcn/ui의 Dialog와 DialogTrigger를 래핑하고, children prop을 통해 트리거 UI를 유연하게 전달받도록 설계합니다. ♻️
- 다이얼로그의 제목은 "임시 저장된 토픽 목록", 설명은 "임시 저장된 토픽 목록입니다. 이어서 작성하거나 삭제할 수 있습니다."로 설정하여 사용자에게 명확한 정보를 제공합니다. 📝
- 임시 저장된 콘텐츠에 대한 접근성을 높여 사용자 경험을 향상시키고, 발행 전 콘텐츠 관리를 용이하게 하는 전반적인 UI/UX 개선을 목표로 합니다. ✨