AI 요약관련 정보

• 리액트 컴포넌트에서 썸네일 이미지 업로드 및 미리보기 기능을 구현합니다. 🖼️
• AppFileUploader라는 재사용 가능한 컴포넌트를 생성하여 파일 업로드 로직을 캡슐화합니다. 📦
• 기본 <input type="file"> 요소를 hidden 처리하고, useRef 훅을 사용하여 커스텀 UI 버튼 클릭 시 파일 선택 대화상자를 트리거합니다. 👆
• accept="image/*" 속성을 통해 이미지 파일만 선택 가능하도록 제한합니다. 🚫
• 이미지 미리보기는 파일의 타입에 따라 다르게 처리됩니다: 새로 선택된 File 객체는 URL.createObjectURL로 로컬 미리보기를 제공하고, 이미 저장된 이미지의 string URL은 직접 <img> 태그의 src로 사용합니다. 🔄
• 부모 컴포넌트로부터 thumbnail 상태와 setThumbnail 함수를 props로 전달받아 상태를 관리합니다. 👨‍👩‍👧‍👦
• 동일한 파일을 다시 선택했을 때 onChange 이벤트가 발생하도록, 파일 선택 후 <input> 요소의 value를 초기화하는 중요한 로직을 포함합니다. ♻️
• 현재 구현은 로컬 미리보기에 중점을 두며, 실제 파일 저장(예: Supabase Buckets) 및 URL 영속화는 다음 강의에서 다룰 예정입니다. ☁️