Closed realldk closed 1 year ago
업로드한 파일을 useDownloadUrl 컴포넌트를 써서 다운로드해서 렌더링 하는 것을 못하겠습니다. createAuthUser() 를 이용해 firestore의 photoURL 입력값에는 이미지파일의 주소를 넣어서 이용하게 의도하신 걸까요?
추가로 이미지를 선택했을 때 지금 있는 기본 이미지 위치에 미리보기로 보여주려면 FileUpload 컴포넌트에 을 추가해서 이미지 업로드 함수만 따로 이용해야 할까요?
회원가입 과정 처리에서 useDownloadUrl 훅을 사용하는 것은 적절하지 않습니다. useDownloadUrl 훅은 에셋 위치 및 이름을 알고 있을 때만 사용 가능합니다.
그리고 createAuthUser 함수는 Firestore 데이터베이스에 사용자 정보를 저장할 때 사용합니다. photoURL 입력 값은 업로드 된 사용자 사진 URL이 문자 값으로 설정되어야 합니다.
마지막으로 미리보기 이미지를 화면에 표시하려면 FileReader를 사용해야 합니다. (참고)
요구된 사항 처리를 위해 수정된 파일은 다음과 같습니다. 가이드 파일 src.zip을 다운로드 받아 내부 코드를 살펴보세요.
SignUp.jsx
// 파일 업로드 이미지 URL 상태
const [profileImage, setProfileImage] = useState(null);
// 파일 업로드 이미지 처리 핸들러
const handleChangeUploadInput = (e) => {
const { files } = e.target;
const willUploadFile = files[0];
const reader = new FileReader();
reader.addEventListener("load", () => {
setProfileImage(reader.result);
});
if (willUploadFile) {
reader.readAsDataURL(willUploadFile);
}
};
// FileUpload 컴포넌트 요소에 onChange 설정
<FileUpload
id={id}
isSignUp={true}
ref={fileInputRef}
onChange={handleChangeUploadInput}
/>
그리고 아래는 회원가입 처리 핸들러 코드입니다.
const handleSubmit = async (e) => {
// ...
// uploadFiles 함수는 업로드 된 이미지 URL 배열 반환
const uploadedImagesUrls = await uploadFiles();
// 첫번째 업로드 된 이미지 URL
// 이미지를 한 장만 올리기 때문에 첫번째 URL만 추출
const uploadedImageUrl = uploadedImagesUrls[0];
// 사용자 정보 업데이트 요청
const user = await signUp(email, password, nickname, uploadedImageUrl);
// Firestore 데이터베이스 사용자 정보 저장
await createAuthUser(user, { photoURL: uploadedImageUrl });
};
아래는 회원가입 및 프로필 업데이트 과정이 성공적으로 처리 됨을 보여 줍니다. 😃
https://user-images.githubusercontent.com/1850554/227669528-06c5502f-2be8-4e82-8c30-fedf1acad90c.mp4
감사합니다 야무쌤!
질문 작성자
이동경
문제 상황
현재 야무쌤의 firebase - auth, firestore, storage 커스텀훅들을 사용하고 있습니다.
회원가입 시![image](https://user-images.githubusercontent.com/119571031/227577078-c246ffd7-8606-406f-b662-c0c2a15bef11.png)
SignUp.jsx
컴포넌트에서 profileImage, email, password, passwordConfirm, nickname 의 정보를 받아서Authentication에 email, password로 회원가입
firestore - users 컬렉션에 입력하고![image](https://user-images.githubusercontent.com/119571031/227578022-80b4f6e3-b6bc-4d80-9ea5-f659be59c8c9.png)
storage에 profileImage로 선택한 파일을 업로드 하는 것까지 했습니다.![image](https://user-images.githubusercontent.com/119571031/227578723-b14b1658-11c8-40d6-ba15-d828ba676b6f.png)
그런데 업로드한 파일을
useDownloadUrl
컴포넌트를 써서 다운로드해서 렌더링 하는 것을 못하겠습니다.createAuthUser()
를 이용해 firestore의 photoURL 입력값에는 이미지파일의 주소를 넣어서 이용하게 의도하신 걸까요?추가로 이미지를 선택했을 때 지금 있는 기본 이미지 위치에 미리보기로 보여주려면 FileUpload 컴포넌트에
FileUpload
프로젝트 저장소 URL
node_modules
폴더를 제외한 나머지를 압축해 이 곳에 첨부하세요. deco.zip환경 정보