docs: update minjeekim week log

[minjeeki]

Week6

진행한 내용

SIDE 디자인 시스템에 @sipe-team/image 패키지를 추가하고 Image 컴포넌트 초기 구현을 완료했습니다.
Design·Next.js·Mantine·Chakra 등을 레퍼런스로 스펙을 잡은 뒤, Storybook·테스트까지 포함해 공유 가능한 형태로 마무리했습니다.

@sipe-team/image — Image 컴포넌트 초기 구현

• 구현 요약
  • img 기반 코어: src·alt 필수, width/height(number | string), fit(contain | cover | fill, 기본 cover), fill, loading 기본값 lazy, placeholder 지원.
  • 상태 관리: useImageStatus 훅으로 loading · normal · fallback · error 구분, fallbackSrc 1회 전환 및 무한 루프 방지(hasTriedFallback), onError 호출 보장, 최종 실패 시 visibility: hidden으로 레이아웃 유지

후속 논의·과제(문서화)

• 에러 시 기본 UI 내장 여부(디자인팀과 정책 정렬)
• radius/size 등 토큰, aspectRatio 필요 시 추가
• next/image는 별도 패키지(@sipe-team/image-next 등)로 분리 검토.

PR 링크

• feat(image): add image component

발표 자료 준비

개인 느낀점 (100자)

• 동료들의 작업 방식을 보고 피드백을 받으며, 혼자서는 생각 못했을 것들을 해보고 배울 수 있었습니다. 처음이라 어려웠지만 함께할 수 있어서 영광이었습니다. SIPE 최고!

담당 컴포넌트(image) 작업 내용

• as-is: SIDE DS에는 이미지 컴포넌트가 없었음. SIPE는 next/image 래퍼 컴포넌트를 정의해서 사용 중이었으나 사용처마다 에러/로딩 처리가 달랐음.
• to-be: img 기반 신규 컴포넌트 패키지 추가, Ant Design 등 디자인 시스템을 레퍼런스로 로딩·정상·대체·에러 네 가지 상태로 구분. fallbackSrc, placeholder로 동작 통일