2024. 10. 17. (팀프로젝트 - code404(6))

1.  문제점

- 마이페이지에서 회원정보변경에 제목은 변경이 되지만 프로필 이미지는 변경도 안되고 supabase에 업로드도 안되는 모습을 보였다.

2. 해결방안

- createClient 함수를 사용하여 Supabase 클라이언트를 중앙에서 생성하고 관리하도록 수정했습니다. 이를 통해 클라이언트 인스턴스가 일관되게 유지되도록 했으며, 이미지 업로드 후 새롭게 생성된 이미지 URL이 제대로 반영되도록 로직을 개선하였다. 

3. 수정된 코드

// 클라이언트 생성 부분
const supabase = createClient();

// 프로필 업데이트 함수
const handleProfileUpdate = async () => {
    if (!user || !user.id) {
        console.error("User ID is not defined");
        return;
    }

    try {
        let profile_url = user.profile_url;

        if (profilePic) {
            const fileExt = profilePic.name.split(".").pop();
            const fileName = `${user.id}-${Date.now()}.${fileExt}`;
            const filePath = `${fileName}`;

            const { error: uploadError } = await supabase.storage
                .from("user_profile_img")
                .upload(filePath, profilePic, { upsert: true });

            if (uploadError) {
                throw uploadError;
            }

            const { data: publicUrlData } = supabase.storage.from("user_profile_img").getPublicUrl(filePath);
            profile_url = publicUrlData?.publicUrl || "";
        }

        if (newUserName === user.user_name && profile_url === user.profile_url) {
            alert("수정한 사항이 없습니다.");
            return;
        }

        const { error: updateError } = await supabase
            .from("User")
            .update({ user_name: newUserName, profile_url })
            .eq("id", user.id);

        if (updateError) {
            throw updateError;
        }

        await fetchUserData(); // 최신 데이터 가져오기

        setUser({ ...user, user_name: newUserName, profile_url });
        alert("회원 정보가 성공적으로 업데이트되었습니다.");
    } catch (error) {
        console.error("Error updating profile:", error);
        alert("회원 정보 업데이트 중 오류가 발생했습니다.");
    }
};