✨ feat: 작성 페이지 이미지 임시 저장 구현

[KKYHH]

✅ 체크리스트

• [x] 글을 작성할 때 업로드 중인 이미지도 같이 로컬 스토리지에 저장 시켜 줍니다

📝 작업 상세 내용

임시 저장

1️⃣ 작성 글을 임시 저장할 때 로컬 스토리지에 diary_info와 같이 image 값을 저장해 줍니다.

2️⃣ 기존에 ImageHandler함수에서 저장되는 변환된 base64 인코딩 값을 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를 저장 합니다.

// 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);
          });

• Base64 문자열을 Blob으로 변환
• Blob을 이용해 새로운 File 객체를 생성
• File 객체를 FormData에 추가
• 이 FormData를 setFile을 통해 상태로 저장

저장돼있던 이미지 값이 다시 File 형태로 복원돼서 file에 저장합니다. 이렇게 되면 페이지를 벗어났다가 돌아와도 원래 상태로 복원이 됩니다 이전에는 File 객체의 재생성 과정이 없어서 Base64가 문자열로만 존재했고 실제 업로드를 할 땐 복원되지 않았지만 이 동작으로 정상 작동합니다!

🚨 버그 발생 이유 (선택 사항)

🔎 후속 작업 (선택 사항)

🤔 질문 사항 (선택 사항)

후에는 임시 저장 데이터를 서버에 저장하도록 변경? 🤔

📚 참고 자료 (선택 사항)

추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.

📸 스크린샷 (선택 사항)

변경 사항에 대한 스크린샷이 있다면 첨부해주세요.

✅ 셀프 체크리스트

• [x] 브랜치 확인하기
• [x] 불필요한 코드가 들어가지 않았는지 재확인하기
• [x] issue 닫기
• [x] reiewers, assignees, Lables 등록 확인하기

이슈 번호: #194