[ Fix ] 이미지 미업로드 시 빈문자열로 처리하도록 수정

[lydiacho]

#️⃣ Related Issue

Closes #345

✅ Done Task

• 이미지 미선택 시 빈문자열로 데이터 처리
• 이미지 선택하지 않아도 다음단계 넘어갈 수 있도록 수정

💎 PR Point

프로필 이미지를 선택하지 않아도 가입이 진행될 수 있도록 로직을 수정해주었습니다!

SEONYAK_CLIENT/src/pages/onboarding/components/commonOnboarding/Step개인정보입력.tsx

Lines 59 to 71 in ae9700f

	const handleClickLink = () => {
	if (res && imageFile) {
	imageUploadMutate({ url: res.url, image: imageFile });
	}
	setData((prev) => ({
	...prev,
	imageFile,
	image: imageFile ? res.fileName : '',
	nickname: nickname,
	isNicknameValid: true,
	}));
	navigate(pathname.includes('senior') ? '/seniorOnboarding/3' : '/juniorOnboarding/3');
	};

기존에는 이미지를 첨부하지 않았을 경우 (imageFile state가 비어있을 경우) 이벤트 핸들러에서 early return을 시켜버려서 다음단계로의 이동을 막았었는데요!
다음과 같이 바꿨습니다.

• imageUploadMutate (presignedURL을 통해 프로필이미지를 S3로 업로드하는 함수) : 이미지를 첨부했을 때만 실행
• 회원가입 요청 시에 request body로 쓰는 data state에서
  • image : 이미지 파일이 있는 경우는 s3에 업로드된 파일명, 없는 경우는 빈 문자열을 담아서 보냅니다

request body에서 Image 필드가 필수 옵션이므로 (반드시 문자열로 보내야함) 빈 문자열 처리 해주었어용

📸 Screenshot

i.e.e.e.2024-11-11.i.i.6.45.07.mov

[se0jinYoon]

lgtm!
영상 녹화된 거 보면 이미지 파일명이 변환된 Url이 아닌 파일 자체인 것 같은데 콘솔에만 그렇게 찍히는 거죠 ? 코드에서는 res.url 들어가는 거 확인했슴다~!

[ijieun]

LGTM

[lydiacho]

@se0jinYoon 그 로직이

• presigned get api를 통해 s3에 저장될 파일명을 받음
• 해당 파일명을 join image 필드에 그대로 담아줌
• 서버에서 프로필 이미지 내려줄 땐 파일명 앞에 s3 base url 붙여서 full url을 만들어서 내려줌!
• 클라는 그 주소 받아서 src에 바로 넣어서 프로필사진 띄울 수 있는거

요렇게 되기 때문에 파일명만 들어가는게 맞슴니다 ! 확인되셧다면 이모지 박아주세용