[LAB-7] 회원가입 시 storage에 업로드한 프로필 이미지 파일 다운로드

[realldk]

질문 작성자

이동경

문제 상황

현재 야무쌤의 firebase - auth, firestore, storage 커스텀훅들을 사용하고 있습니다.

회원가입 시 SignUp.jsx컴포넌트에서 profileImage, email, password, passwordConfirm, nickname 의 정보를 받아서

Authentication에 email, password로 회원가입

firestore - users 컬렉션에 입력하고

storage에 profileImage로 선택한 파일을 업로드 하는 것까지 했습니다.

그런데 업로드한 파일을 useDownloadUrl 컴포넌트를 써서 다운로드해서 렌더링 하는 것을 못하겠습니다. createAuthUser() 를 이용해 firestore의 photoURL 입력값에는 이미지파일의 주소를 넣어서 이용하게 의도하신 걸까요?

    const user = await signUp(email, password, nickname);
    await createAuthUser(user, { photoURL: "assets/" });

    console.log("회원가입 및 users 콜렉션에 user 데이터 생성");

추가로 이미지를 선택했을 때 지금 있는 기본 이미지 위치에 미리보기로 보여주려면 FileUpload 컴포넌트에 을 추가해서 이미지 업로드 함수만 따로 이용해야 할까요? 현재는 label과 input만 있습니다. SignUp

      <form className={styles.form} onSubmit={handleSubmit}>
        <FileUpload id={id} isSignUp={true} ref={fileInputRef} />

        <FormInput
          name="email"
          type="email"
          label="e-mail 아이디"
          placeholder="아이디 입력"
          onChange={handleChangeInput}
        />
        <FormInput
          name="password"
          type="password"
          label="비밀번호"
          placeholder="비밀번호 입력"
          onChange={handleChangeInput}
        />
        <FormInput
          name="passwordConfirm"
          type="password"
          label="비밀번호 확인"
          placeholder="비밀번호 입력"
          onChange={handleChangeInput}
        />
        <FormInput
          name="nickname"
          label="닉네임"
          placeholder="닉네임 입력"
          onChange={handleChangeInput}
        />
        <div>로그인한 유저: {user?.email}</div>
        <SubmitButton type="submit" title="회원가입" writeButton={false} />
      </form>

FileUpload

const FileUpload = forwardRef(function FileUpload({ isSignUp, id }, ref) {
  return (
    <div>
      {isSignUp ? (
        <div>
          <label htmlFor={id} className={styles.profile_label_isSignUp}>
            <Upload className={styles.profile_image_isSignUp} /> 파일 업로드
          </label>

          <input
            id={id}
            type="file"
            accept="image/jpg, image/png, image/jpeg"
            name="profile"
            className={styles.profile_form_isSignUp}
            ref={ref}
          />
        </div>
      ) : (
        <div>
          <label htmlFor={id} className={styles.profile_label}>
            <Upload className={styles.profile_image} /> 파일 업로드
          </label>

          <input
            id={id}
            type="file"
            accept="image/jpg, image/png, image/jpeg"
            name="profile"
            className={styles.profile_form}
            ref={ref}
          />
        </div>
      )}
    </div>
  );
});

프로젝트 저장소 URL

• Sign-up-update-profile#45
• deco\src\components\SignUpPage\SignUp.jsx 에 해당 내용이 들어있습니다.
• npm run dev를 통해 들어가셨을 때는 /signup 페이지입니다.
• 트러블 슈팅을 위해 node_modules 폴더를 제외한 나머지를 압축해 이 곳에 첨부하세요. deco.zip

환경 정보

• 운영체제 정보 Windows
• Node.js 정보 v16.19.1
• 라이브러리 정보 React v18.2.0

[yamoo9]

문제 파악

업로드한 파일을 useDownloadUrl 컴포넌트를 써서 다운로드해서 렌더링 하는 것을 못하겠습니다. createAuthUser() 를 이용해 firestore의 photoURL 입력값에는 이미지파일의 주소를 넣어서 이용하게 의도하신 걸까요?

추가로 이미지를 선택했을 때 지금 있는 기본 이미지 위치에 미리보기로 보여주려면 FileUpload 컴포넌트에 을 추가해서 이미지 업로드 함수만 따로 이용해야 할까요?

문제 해결

회원가입 과정 처리에서 useDownloadUrl 훅을 사용하는 것은 적절하지 않습니다. useDownloadUrl 훅은 에셋 위치 및 이름을 알고 있을 때만 사용 가능합니다.

그리고 createAuthUser 함수는 Firestore 데이터베이스에 사용자 정보를 저장할 때 사용합니다. photoURL 입력 값은 업로드 된 사용자 사진 URL이 문자 값으로 설정되어야 합니다.

마지막으로 미리보기 이미지를 화면에 표시하려면 FileReader를 사용해야 합니다. (참고)

수정한 파일 목록

요구된 사항 처리를 위해 수정된 파일은 다음과 같습니다. 가이드 파일 src.zip을 다운로드 받아 내부 코드를 살펴보세요.

커스텀 훅

• useUploadFile.js → 변경 이력 : downloadURLList 반환(return)
• useSignUp.js → 변경 이력 : photoURL 추가 (사용자 프로필 업데이트)

컴포넌트

• FileUpload.jsx → 변경 이력 : restProps 설정
• SignUp.jsx → 변경 이력 : 아래 작성된 내용 참고

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

[realldk]

감사합니다 야무쌤!