Closed KKYHH closed 1 month ago
1️⃣ 작성 글을 임시 저장할 때 로컬 스토리지에 diary_info와 같이 image 값을 저장해 줍니다.
2️⃣ 기존에 ImageHandler함수에서 저장되는 변환된 base64 인코딩 값을 onImageBase64Change에 담아서 CreateDiary 컴포넌트에 보내줍니다
ImageHandler
onImageBase64Change
CreateDiary
// QuillEditor const reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = () => { const base64String = reader.result as string; setImage({ imageId: 0, imageURL: base64String, }); onImageBase64Change(base64String);
// CreateDiary const [imageBase64, setImageBase64] = useState<string | null>(null); const handleImageBase64Change = (base64String: string) => { setImageBase64(base64String); };
🚀 작성 페이지에서 임시 저장을 실행할 때 diary_draft에 dirayInfo와 같이 변환된 이미지 값 imageBase64, 이미지 정보 imageInfo를 저장 합니다.
diary_draft
dirayInfo
imageBase64
imageInfo
// CreateDiray const handleSaveDraft = () => { if (isContentEmpty) return; // 일기 내용이 비어 있으면 저장 요청 불가 const draftData = { ...diaryInfo, imageBase64: imageBase64, imageInfo: { name: imageInfo.name, size: imageInfo.size, }, }; localStorage.setItem('diary_draft', JSON.stringify(draftData)); toast(CREATE_MESSAGES.toast.temp_save); };
🤔 처음에 useEffect를 사용 할 땐 로컬 스토리지에 값이 잘 저장되는 것처럼 보였는데 정작 임시 저장 글을 저장할 때는 이미지가 휘발돼서 같이 저장이 되지 않았습니다
useEffect(() => { const savedDraft = localStorage.getItem('diary_draft'); if (savedDraft) { const parsedDraft = JSON.parse(savedDraft); setDiaryInfo(parsedDraft); if (parsedDraft.imageBase64) { setImage({ imageId: 0, imageURL: parsedDraft.imageBase64, }); setImageBase64(parsedDraft.imageBase64); setImageInfo(parsedDraft.imageInfo || { name: '', size: '' });
3️⃣ Base64 문자열을 다시 File 객체로 변환하고 Formdata에 추가 합니다
useEffect(() => { const savedDraft = localStorage.getItem('diary_draft'); if (savedDraft) { const parsedDraft = JSON.parse(savedDraft); setDiaryInfo(parsedDraft); if (parsedDraft.imageBase64) { setImage({ imageId: 0, imageURL: parsedDraft.imageBase64, }); setImageBase64(parsedDraft.imageBase64); setImageInfo(parsedDraft.imageInfo || { name: '', size: '' }); // Base64를 File 객체로 변환 fetch(parsedDraft.imageBase64) .then(res => res.blob()) .then(blob => { const file = new File([blob], 'image.jpg', { type: 'image/jpeg' }); const formData = new FormData(); formData.append('image', file); setFile(formData); });
저장돼있던 이미지 값이 다시 File 형태로 복원돼서 file에 저장합니다. 이렇게 되면 페이지를 벗어났다가 돌아와도 원래 상태로 복원이 됩니다 이전에는 File 객체의 재생성 과정이 없어서 Base64가 문자열로만 존재했고 실제 업로드를 할 땐 복원되지 않았지만 이 동작으로 정상 작동합니다!
file
Base64
후에는 임시 저장 데이터를 서버에 저장하도록 변경? 🤔
추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.
변경 사항에 대한 스크린샷이 있다면 첨부해주세요.
이슈 번호: #194
✅ 체크리스트
📝 작업 상세 내용
임시 저장
1️⃣ 작성 글을 임시 저장할 때 로컬 스토리지에 diary_info와 같이 image 값을 저장해 줍니다.
2️⃣ 기존에
ImageHandler
함수에서 저장되는 변환된 base64 인코딩 값을onImageBase64Change
에 담아서CreateDiary
컴포넌트에 보내줍니다🚀 작성 페이지에서 임시 저장을 실행할 때
diary_draft
에dirayInfo
와 같이 변환된 이미지 값imageBase64
, 이미지 정보imageInfo
를 저장 합니다.🤔 처음에 useEffect를 사용 할 땐 로컬 스토리지에 값이 잘 저장되는 것처럼 보였는데 정작 임시 저장 글을 저장할 때는 이미지가 휘발돼서 같이 저장이 되지 않았습니다
3️⃣ Base64 문자열을 다시 File 객체로 변환하고 Formdata에 추가 합니다
저장돼있던 이미지 값이 다시 File 형태로 복원돼서
file
에 저장합니다. 이렇게 되면 페이지를 벗어났다가 돌아와도 원래 상태로 복원이 됩니다 이전에는 File 객체의 재생성 과정이 없어서Base64
가 문자열로만 존재했고 실제 업로드를 할 땐 복원되지 않았지만 이 동작으로 정상 작동합니다!🚨 버그 발생 이유 (선택 사항)
🔎 후속 작업 (선택 사항)
🤔 질문 사항 (선택 사항)
후에는 임시 저장 데이터를 서버에 저장하도록 변경? 🤔
📚 참고 자료 (선택 사항)
추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.
📸 스크린샷 (선택 사항)
변경 사항에 대한 스크린샷이 있다면 첨부해주세요.
✅ 셀프 체크리스트
이슈 번호: #194