docs: update minjeekim week log

members/minjeekim.md

@@ -80,7 +80,7 @@
 
 ---
 
-### Week 02
+### Week 02~03
 
 > 💡요약
 >
@@ -186,4 +186,122 @@
 - 개선 방향
     - 트랙 내 썸 위치 조정
 - 요청 사항
-    - 현재 figma 작업 페이지 내 정의가 없어 관련 스펙 정의 요청 (size, state, type 등)
+    - 현재 figma 작업 페이지 내 정의가 없어 관련 스펙 정의 요청 (size, state, type 등)
+
+
+### Week 04 - 05 
+
+> 요약
+> 이미지 컴포넌트 관련 레퍼런스 디자인 시스템 분석한 내용을 기반으로 기본 구현 방향(에러, 로딩 처리 방식) 관련 초기 작업을 진행 중입니다.
+> 다음 회의 전까지 초안 컴포넌트 완성 + 논의 지점 정리해서 공유 예정입니다.
+
+#### 레퍼런스 디자인 시스템 분석
+
+Next.js 기반 서비스 특성상 Next.js Image 대응이 가능한 상용 디자인 시스템(Mantine, Chakra UI)을 우선 검토했습니다.
+다만 로딩, 에러 처리 부분은 두 시스템만으로는 아쉬운 점이 있어 추가 레퍼런스를 더 살펴볼 예정입니다.
+
+- 공통 : alt 필수 prop 강제
+- 차이점 : fallback 처리 방식 (Mantine : fallback용 img를 별도 렌더링 / Chakra UI는 fallbackSrc로 URL을 받아 처리)
+
+#### 기본 구현 방향
+- component prop 패턴 채택 (img 기본, Next.js Image 주입 가능) : asChild + Slot 방식의 타입 문제(@ts-expect-error 억제 필요)를 피하기 위한 선택
+  => 추후 변동 가능성 있음
+- 에러 처리: 같은 DOM에서 resolvedSrc만 갱신하는 방식으로 구현
+  (Mantine은 에러 시 fallback용 img를 별도로 렌더링하는 방식인데, 우리는 동일 DOM에서 resolvedSrc만 갱신하는 방식으로 단순화)
+- 로딩 처리: Skeleton 조합 방식 채택 (Mantine, Chakra UI 동일 패턴)
+- fit prop: cover / contain / fill 지원, 기본값 cover
+- radius: 현재 none 고정, 추후 디자인 토큰 반영 예정
+
+#### 다음주 할 일
+- 로딩, 에러 처리 관련 레퍼런스를 추가로 검토
+- 초안 컴포넌트 완성
+- 논의가 필요한 지점은 PR로 따로 정리해서 팀원분들의 의견을 듣고 싶음
+
+#### 2026.04.29 컴포넌트팀 발표 준비 회의록
+
+- 프로젝트 주요 목표 및 방향성
+  - SIDE 디자인시스템을 분석하고 범용적인 디자인 시스템 구축하자
+  - 1차 목표 : 디자인시스템 분석, SIPE 홈페이지에 컴포넌트 적용
+  - 목표 달성을 위한 구체적인 액션 : 홈페이지 기준 활용성 높은 컴포넌트 위주로 우선순위 설정 후 작업
+
+- 주차별 작업
+  - 1-2주차
+    - 기존 SIDE 시스템 및 상용 디자인시스템 분석
+    - 컴포넌트 설계 방식 논의 구체화 (headless vs headful)
+    - SIDE ver2 방향성 및 MVP 범위 및 담당 컴포넌트 배정
+  - 3-4주차
+    - 담당 컴포넌트 분석 및 작업 계획 설정 -> 개별 작업
+    - 모각작
+    - 팀원 PR 리뷰
+  - 5-6주차
+    - 컴포넌트 본격 작업
+    - 테스트코드 컨벤션 확정
+    - 버그 픽스, 코드 퀄리티 및 테스트 코드 개선
+    - 고도화한 컴포넌트 SIPE 반영
+
+### Week 06 과제 - 발표 준비
+
+#### 개인 느낀점 (100자 이내)
+
+동료들의 작업 방식을 보고 피드백을 받으며, 혼자서는 생각 못했을 것들을 해보고 배울 수 있었습니다. 처음이라 어려웠지만 함께할 수 있어서 영광이었습니다. SIPE 최고!
+
+#### 담당 컴포넌트 작업 내용 정리
+
+> 요약
+> as-is: SIDE DS에는 이미지 컴포넌트가 없었음. SIPE는 next/image 래퍼 컴포넌트를 정의해서 사용 중이었으나 사용처마다 에러/로딩 처리가 달랐음.
+> to-be: img 기반 신규 컴포넌트 패키지 추가, Ant Design 등 디자인 시스템을 레퍼런스로 로딩·정상·대체·에러 네 가지 상태로 구분. fallbackSrc, placeholder로 동작 통일
+> 남은 과업 : SIPE 홈페이지에 디자인시스템 컴포넌트 도입. 고도화
+
+- 담당 컴포넌트 : image, input, checkbox, radio, switch
+- 작업 방향성 : SIPE 홈페이지에 직접적으로 사용하고 있는 컴포넌트를 우선적으로 작업하기 위해 image부터 작업 결정
+- `as-is`
+  - SIDE 디자인시스템 : 이미지 컴포넌트 부재
+  - SIPE 홈페이지
+    - 8곳에서 이미지 요소 사용 중 (히어로 배경 이미지, Avatar 컴포넌트 대체 2곳 제외 5곳을 적용 범위로 설정)
+    - 내부적으로 이미지 컴포넌트 선언 후 사용 중 : next/image 위에 얇게 올린 wrapper 형태
+    - 문제 지점 : 사용처마다 에러 처리 방식이 다름 / 로딩 처리 방식 부재
+- 과정
+  - 상용 디자인 시스템(Ant Design, Next.js, Mantine, Chakra)을 레퍼런스로 스펙 구성
+- `to-be`
+  - 패키지로 Image 컴포넌트 신규 추가
+  - img 기반 프레임워크 중립적 코어로 서비스 프레임워크 상관없이 동일한 동작과 API를 쓰게 함
+  - 4가지 상태(loading, normal, fallback, error) 기반으로 로딩/성공/에러 상황 구분
+  - fallbackSrc, 최종 실패 시 visibility: hidden으로 영역만 남기고 숨길 수 있도록 함
+- 남은 과업
+  - SIPE 홈페이지 도입
+  - next/image 연동 전략 고민
+  - 고도화 : 기본 에러 UI, 디자인 토큰 및 프리셋 등, src 변경 시 상태 리셋 등
+
+### Week 06 - 작업 보고
+
+> 요약
+> 이미지 컴포넌트 초안 PR을 올렸습니다.
+> - [PR 링크](https://github.com/sipe-team/side/pull/262)
+
+#### 구현 완료 내용
+
+- `useImageStatus` 훅 분리 : 에러/대체 이미지 상태 관리 (loading / normal / fallback / error 4단계)
+  - fallback 1회 전환 + 무한루프 방지 (`hasTriedFallback` 플래그) — 레퍼런스에 없는 방식으로 직접 추가
+  - `onError` 콜백 호출 보장
+- Props : `src`, `alt` 필수 / `width`, `height`, `fit`, `fill`, `loading`(기본값 lazy), `placeholder`, `fallbackSrc` 지원
+- 테스트 8개 케이스 작성
+- Storybook 추가 (Basic / Fallbacks / WithPlaceholder / WithFill / Fits / ResponsiveWidth)
+- 내부적으로 에러/로딩 상태를 관리하다 보니 next/image의 자체 처리와 충돌 가능성이 있어 이전 구현 방식에서 변경 있음
+  (4주차에서 검토했던 component prop 방식은 next/image 자체 처리와의 충돌 가능성으로 이번 구현에서 제외, 대응 방식은 팀 논의 후 결정 예정)
+
+#### 레퍼런스 추가 분석
+
+4주차에서 Mantine, Chakra UI를 검토했고, 에러 처리와 로딩 처리 관련해서 추가 레퍼런스(Ant Design, Next.js)를 살펴봤습니다.
+
+- 상태 4단계 분리 구조 : Ant Design 참고
+- 에러 시 `visibility: hidden`으로 공간 유지 : Ant Design 참고
+- `fallbackSrc` prop 제공 + `onError` 항상 호출 : Ant Design + Next.js 참고
+
+#### 다음 주 할 일
+- PR 피드백 반영 및 세부 작업 진행
+- 토큰/radius 처리 방향 논의 (현재는 사용자가 직접 값을 입력하는 방식으로 열어둔 상태)
+
+#### 팀과 논의하고 싶은 것
+- 에러 표시 정책 : 현재 `visibility: hidden`으로 공간 유지 중. 기본 fallback UI를 내장하는 방향으로 가면 에러 상태가 더 명확해질 것 같아 디자인팀과 UI 형태 논의 후 추가하는 방향 제안
+- next/image 대응 방식 : 단일 패키지 대응 vs `@sipe-team/image-next` 분리
+- `aspectRatio` prop : 현재 서비스에서 비율 처리 케이스가 적어 제외했으나, 필요 시 추가하는 방향 고려