React - 팀 프로젝트 회고2(뉴스피드, 주제: Mylog)

• Issue

1. 프로필 사진을 첨부 했음에도 유효성 검사에서 걸러내지 못함.
   => 유효성 검사 로직에 문제가 있었고 이미지Url을 저장하는 storage 내 buckets 저장소가 없었던 문제도 있었다. (같은 파트를 담당했던 팀원과 소통의 오류가 있었다.) 수정 되기 전의 코드를 따로 저장하지 못한 점이 아쉽다..

const handleImageChange = async (file) => {
    if (!file) return;

    const { data, error } = await supabase
    .storage
    .from('images')
    .upload(`/${uuidv4()}`, file);

    if (error) {
      console.log(error);
      return;
    }
    // 업로드 이미지url 가져오기
    const { data: imageUploadData, error: imageUploadError } = supabase
      .storage
      .from('images')
      .getPublicUrl(data.path);

      if (imageUploadError) {
       console.log(imageUploadError);
       return;
    }
    setPreviewUrl(URL.createObjectURL(file));
    setPicture(imageUploadData.publicUrl);
    return imageUploadData;
  };

문제였던 부분(bucket 생성)을 해결하고 supabase에서 제공하는 인용코드를 사용해 연결하여 저장되도록 연결했다.

2. useNavigate 훅을 사용하여 뒤로가기 버튼 활성화

  const handleBack = () => {
    navigate(-1);
  };

프로필 페이지로 넘어가게 해준다. 이 부분은 사전 작업만 해주면 쉬운 부분이다.

3. 일반 로그인, 소셜 로그인 시, 유효성 검사 여부

   const handleChangeProfile = async () => {
      const newErrors = {};
   
      try {
        if (!name) {
          newErrors.general = '모든 필드를 입력해주세요.';
          throw new Error('모든 필드를 입력해주세요.');
        }
   
        const { data: userData, error: userError } = await supabase
          .from('Users')
          .select('password, social')
          .eq('userId', user.id)
          .single();
   
        if (userError) {
          newErrors.general = '사용자의 정보를 가져오는 중 오류가 발생했습니다.';
          throw new Error('사용자 정보를 가져오는 중 오류가 발생했습니다.');
        }
   
        if (!userData.social) {
          if (!validatePasswordFormat(currentPassword)) {
            newErrors.password = '비밀번호는 영문 대소문자, 특수문자를 포함하여 8자리 이상이어야 합니다.';
            throw new Error('비밀번호는 영문 대소문자, 특수문자를 포함하여 8자리 이상이어야 합니다.');
          }
   
          if (!validatePasswordMatch(currentPassword, userData.password)) {
            newErrors.unPassword = '비밀번호가 일치하지 않습니다';
            throw new Error('비밀번호 불일치');
          }
        }
   
        const { data, error } = await supabase
          .from('Users')
          .update({
            name: name,
            nickname: nickname,
            password: currentPassword,
            reason: mylogReason,
            ...(picture ? { imageUrl: picture } : {})
          })
          .eq('userId', user.id);
   
        if (error) {
          console.error('업데이트에 문제가 발생했습니다.', error);
        } else {
          alert('업데이트가 완료 됐습니다!', data);
          navigate('/profile');
        }
      } catch (err) {
        setErrors(newErrors);
        console.log(err);
      }
    };```

유효성 검사 부분 여러 오류가 있었는데 대표적으로 소셜 로그인 부분과 연결에 있어서 꽤나 애 먹은 부분들이 있어서 다시 해보라고 하면 기피하고 싶다..ㅎㅎ

4. 탈퇴하기 기능

const handleDeleteAccount = async () => {
    if (confirm('정말로 계정을 삭제하시겠습니까?')) {
      const { error } = await supabase.from('Users').delete().eq('userId', user.id);

      if (error) {
        alert('계정 삭제 중 오류가 발생했습니다: ');
      } else {
        const { error } = await supabase.auth.signOut();
        if (error) {
          alert('로그아웃 중 오류가 발생했습니다');
        } else {
          dispatch(logout());
          alert('계정이 성공적으로 삭제되었습니다.');
          navigate('/');
        }
      }
    } else {
      alert('계정 삭제가 취소되었습니다.');
    }
  };

처음 탈퇴하기 기능을 만들 때 DB 내의 데이터는 삭제가 됐는데 메인 페이지 화면에 아직 로그인이 되있다고 표출되어 있어서 이 부분도 같이 수정했다.