[FE] Creator Image Lazy loading 적용

[jinhokim98]

issue

• close [FE] Creator Image Lazy loading 적용 #794

구현 사항

Creator 이미지 Lazy loading 적용

Creator 이미지도 필요할 때 불러오도록 lazy loading했습니다.
여기에는 Intersection Observer를 달지 않았습니다.

여기 이미지는 특정 공간이 관측될 때 가져와야 하는 이미지가 8개 입니다.
지금 훅은 이미지 한 개만 지원하고 있어서 배열을 지원하는 훅도 만들어야 합니다.

하지만 제작자 이미지들은 페이지 제일 하단에 있어 loading lazy를 주어도 충분히 초기 로딩 때 이미지를 불러오지 않았기 때문에 img 태그에 loading lazy만 적용했습니다.

lazy loading (Intersection Observer) fallback src도 지원

webp와 png 둘 다 lazy loading이 되도록 훅에서 기능을 추가했습니다

type ImgTagSrcType = string | undefined;

const [imageSrc, setImageSrc] = useState<ImgTagSrcType>(undefined);
const [fallbackImageSrc, setFallbackImageSrc] = useState<ImgTagSrcType>(undefined);

🫡 참고사항

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-zlojinnrnv.chromatic.com/

[soi-ha]

오호~ lazy 적용 좋아요!
쿠키 pr보고 든 생각인데 나중에 createor 이미지들은 은행 아이콘들 하나에 모아둔 것처럼 바꿔도 좋을 것 같네요!

[jinhokim98]

https://www.toptal.com/developers/css/sprite-generator

image sprite 기법을 도움 받을 수 있는 사이트입니다!

[Todari]

고생했어요~!~! 나이스십니당

[github-actions]

🚀 storybook: https://66a9dea5db27afc2b8f91ba7-dtzbltftck.chromatic.com/