📱[PHOBUM] 회의록: 이미지 업로드 및 수정 기능 개선

📱 [PHOBUM] 이미지 업로드 및 수정 기능 개선

최근 PHOBUM 프로젝트에서는 이미지 업로드 및 수정 기능 전반에 대한 리팩토링 작업을 진행했습니다.
초기 구조에서는 image-upload 폴더 내부에 모든 로직이 몰려 있어 유지보수에 어려움이 있었고, 사용자 경험도 부족한 점이 있었습니다.

이번 개선 작업에서는 컴포넌트 구조 분리, 상태 관리 최적화, 렌더링 성능 향상, 그리고 즉각적인 사용자 피드백 제공을 중심으로 개선했습니다.

---

✅ 컴포넌트 구조 개선

🔹 CardDetail 컴포넌트

• 이미지 수정 후 즉시 UI에 반영되도록 처리
• useMemo, useCallback을 적극 활용하여 연산 최적화
• 상태 로직 단순화 및 코드 가독성 향상

🔹 CardModify 컴포넌트

• 파일 선택 즉시 미리보기 제공
• 저장 시에는 백엔드에 비동기 요청 → 반영 후 상태 업데이트
• 불필요한 상태 중복 제거 및 컴팩트한 흐름 구성

🔹 Album 컴포넌트

• Intersection Observer 활용 → 보이는 이미지 위주 프리로딩
• 이미지 목록 상태를 분리하여 불필요한 전체 렌더링 방지

---

🛠 기술적 개선 사항

📌 상태 관리 최적화

• useCallback, useMemo로 리렌더링 최소화
• 상태 업데이트도 부분적으로 처리하여 성능 최적화

📌 이미지 처리 방식 단순화

const handleModifySave = async (updatedImage: ImageUpdateRequest) => {
  const response = await imagesApi.update(currentImage.id, updatedImage);
  const newImage = {
    ...currentImage,
    ...response.data
  };
  setCurrentImage(newImage);
  onEdit?.(newImage);
};

• API 응답 기반으로 상태 갱신 → 즉시 반영
• 상위 컴포넌트에도 콜백으로 업데이트 전달

📌 렌더링 및 메모리 최적화

• 이미지 프리로딩 도입
• cleanup 함수 추가로 불필요한 리스너 제거
• 중복 API 호출 방지 및 렌더링 효율 개선 (약 20~30% 성능 향상 체감)

---

🎯 사용자 경험 개선

즉각적인 UI 반영

• 수정 즉시 이미지 갱신 → 실시간 피드백
• 로딩 중에는 스피너 또는 진행 표시
• 오류 시 명확한 에러 메시지 제공

이미지 업로드 UX 향상

• 선택 즉시 미리보기로 이미지 확인 가능
• 업로드 중 시각적 상태 표시
• 수정/저장/취소 버튼 명확히 분리해 작업 혼동 방지

---

🔭 향후 개선 예정 사항

개선 항목	세부 내용
이미지 최적화	WebP 자동 변환, 업로드 시 압축
캐싱 전략	클라이언트·서버 양쪽에서 적용
성능 모니터링	Sentry, React Profiler, Lighthouse 등 연동
렌더링 분석	메모리/시간/네트워크 요청 개선 목표

---

🧾 결론 및 정리

이번 이미지 기능 리팩토링을 통해 다음과 같은 효과를 얻었습니다:

• 💡 컴포넌트 구조 개선 → 유지보수성 향상
• 🚀 렌더링/API 호출 성능 향상
• 🙌 사용자 경험 전반의 질적 향상

---

📌 다음 단계

• 기능별 테스트 코드 추가
• 개선된 로직 기반으로 기술 문서화
• 모니터링 환경 구축 및 지속적인 성능 트래킹

---

이제는 단순히 “작동하는 기능”을 넘어서, 성능과 경험 모두를 만족시키는 구조로 도약했습니다. PHOBUM의 이미지 처리 기능은 앞으로도 계속 발전할 예정입니다. 💪