심화 프로젝트 1차 QA 회고록 (08/26)

배운점

혼자 작업할 때는 보이지 않던 부분들을 함께 QA를 진행하며 발견할 수 있음을 깨달았습니다.

• 아이템 카드 의 이미지에 최소 너비 min-w 를 설정하지 않았을 경우, 이미지에 따라서 화면이 줄어들 때 눌려버리는 문제가 발생한다는 것을 배웠습니다.
• fallback 이미지 사용 피드백을 수용하여 단순히 이미지가 없을 때 fallback을 띄우는게 아닌, 잘못된 URL, 서버 문제 등으로 이미지가 깨질 때도 fallback 이미지로 방어할 수 있는 방법을 배웠습니다. UX 향상 측면에서 좋은 개선점을 배운 것 같습니다.

//아이템 카드 폴백 이미지 처리용 컴포넌트 예시 코드
'use client';

import Image, { ImageProps } from 'next/image';

import { useState } from 'react';

const fallbackImage = '/images/fallbackImage.png';

type Props = ImageProps;

const SafeImage = ({ src, alt, ...props }: Props) => {
  const [errored, setError] = useState(false);
  const isFallback = !src || errored;

  return (
    <Image
      {...props}
      src={errored ? fallbackImage : src}
      alt={alt}
      onError={() => setError(true)}
      className={isFallback ? 'bg-black-800 object-contain p-4' : 'object-cover'}
    />
  );
};

export default SafeImage;

 

//사용 예시 코드
	<div className='relative aspect-[14/9] w-full min-w-[140px]'>
	  <SafeImage src={contentImage} alt={title} fill className='object-cover' />
  	</div>