가취뽀 - 프로필이미지 수정
문제발생
회원정보를 수정할 때 다른 정보는 회원가입시 사용했던 것으로 어떻게 만들어놨는데 프로필 이미지 변경이 안된다
원인추론
스토리지에 이미지가 들어가지 않는 것으로 보아 로직 자체에 문제가 있는 것 같다
로직에 문제가 없다고 해도 (정상적으로 이미지가 선택된다고 해도) 회원가입때 사용했던 것을 그대로 사용하면 한사람이 프로필 이미지를 계속 바꾸면 이미지도 계속 쌓이게 되므로 수정은 필연적이었다.
해결방안
1. 회원가입할 때 이미지를 넣어줄 경로에 있는 기존 이미지를 삭제하고 새로 넣어주는 방법
1. 사용자가 이미지를 선택했을 경우
2. user_image / user_id 경로의 모든 이미지를 삭제한 후
3. 선택한 이미지를 user_image / user_id 경로에 넣고
4. 이 이미지를 프로필 이미지로 등록
순으로 생각했는데 너무 비효율적?이라는 생각이 들었다
새롭게 선택된 이미지로 업데이트 해줄 수 없는지 공식문서를 더 찾아보기로함.
2. upsert
힌트를 얻은 것은 이 문서였다
https://supabase.com/docs/guides/storage/uploads/resumable-uploads
upsert : Update와 Insert를 합친 것으로, 존재하지 않을 경우, Insert하고 존재할 경우, 현재 내용을 덮어쓰는 유용한 쿼리
라고 한다! 저 내용만으로는 부족해 조금 더 찾아봤는데
https://supabase.com/docs/reference/javascript/storage-from-update
https://supabase.com/docs/guides/storage/uploads/standard-uploads
이렇게 사용해준다고 한다.
이렇게 하면 코드를 반으로 줄일 수 있을 것 같다.
// 프로필 이미지 등록 핸들러
const handleImgUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) {
console.log('파일을 선택해 주세요.');
return;
}
console.log(file);
console.log(userId);
const { data: imgData, error: imgError } = await browserClient.storage
.from('user_image')
.upload(`${userId}/${file.name}`, file, {
cacheControl: '3600',
upsert: true
});
if (imgError) {
console.log('이미지 오류 => ', imgError);
}
// 업로드된 이미지의 URL 가져오기
const imageUrl = `${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/user_image/${userId}/${file.name}`;
setValue('image_url', imageUrl);
};
이렇게 작성했는데 이미지를 선택할 때 에러가 난다
file 도 정상적으로 찍히고 userId도 잘 찍히는데 왜??
이 문제에 대한 답은 여기서 얻었는데, supabase storage에는 한글로 된 파일명은 업로드가 되지 않는다고 한다.
회원가입짤 때 몰랐던 이유는 한글파일로 테스트를 해보지 않아서..
아무튼 나도 똑같이
const profile_image_name = userUid;
UUID를 넣어줘봤다
가입할 때도 저런 유니크한 값으로 바꿔줘야 할 것 같다.
이제 수파베이스 상에서 이미지가 바로바로 바뀐다!
가취뽀 - 마이페이지/회원정보 편집 페이지 404 에러
문제발생
위에서 문제를 해결하면서 알게 됐는데 분명 수파베이스에서는 수정한 정보가 반영되는데 브라우저에서는 반영되지 않는 것을 확인함.
마이페이지/회원정보 편집 페이지에서 새로고침을 할 때마다 404에러가 뜨고
수파베이스상의 변경된 내용을 실시간으로 불러오지 못하고 시크릿창으로 새로 열 때마다 변경된 내용이 반영됨
원인추론
1. 라우팅문제?
해결이 안돼서 질문하러감
내 폴더 구조는 (auth) / mypage, (auth) / mypage / edit
여기서 (auth) 가 문제될 수 있으니 (auth) 폴더 밖으로 꺼내보라고 하셨는데,
(auth)는 서브 사이드바에서 프로필 관련 메뉴만 표시할 수있도록 + 프로젝트 내에서 맡은 부분을 구분하기 위해 그룹화 해놓은 것이고, 다른 login이나 signup페이지도 같은식으로 묶여있는데 동일한 에러가 뜨지 않음.
결정적으로 혹시나? 싶어서 꺼내봤는데도 동일한 문제가 생겨서 이 문제는 아닐거라고 판단했다.
2. 스토리지문제?
처음 이미지 업데이트를 제외한 나머지를 구현했을 정상적으로 수정이 됐었는데
나중에 이미지 업데이트를 추가하고 나서 부터 안되기 시작했음.
그래서 스토리지 부분을 모두 주석처리하고 다시 시도해봤는데 여전히 프로필 수정사항이 반영되지 않음
해결방안
🤯 현재 풀어야 할 문제
1. 이미지 수정 / 이미지 등록 시 이름 변경
2. 사이드바 버튼
3. 마이페이지, 회원정보편집페이지에서 404에러가 뜨는 문제
4. 이력서, 면접목록 불러오기
5. 마이페이지 편집시 마이페이지로 리다이렉트 시키기
➕ 추가 해야 할 것
로그인시 포인트 지급 (하다 말음)