fix(css): ImageFrame media sizing for aspect ratio

[junghyeonsu]

Summary by CodeRabbit

• 버그 수정
  • ImageFrame의 이미지 및 비디오 요소가 컨테이너의 전체 너비·높이를 채우도록 조정되어 레이아웃과 크롭 동작이 더 일관되고 예측 가능합니다.
• 문서
  • ImageFrame용 스토리(라이트/다크 테마 및 다양한 글꼴 배율 포함) 추가로 시각적 테스트와 사용 예시를 제공합니다.
• 새 기능
  • 예제 앱에 ImageFrame 목록 화면과 해당 내비게이션 경로가 추가되어 다양한 이미지 사례를 앱 내에서 탐색할 수 있습니다.

[changeset-bot]

🦋 Changeset detected

Latest commit: d65c45a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@seed-design/css	Patch
@seed-design/figma	Patch
@seed-design/mcp	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

ImageFrame 내부 미디어 요소에 레이아웃 스타일(display: block, width: 100%, height: 100%)을 추가하고 changeset을 추가했으며, ImageFrame Storybook 스토리 및 예제 앱용 StackFlow Activity, 라우트, 등록과 네비게이션 항목을 도입합니다.

Changes

Cohort / File(s)	Summary
Changeset 문서 .changeset/fruity-drinks-mate.md	@seed-design/css 패치 버전 범프를 기록하는 changeset 항목 추가.
ImageFrame 레이아웃 스타일 packages/qvism-preset/src/recipes/image-frame.ts	ImageFrame 후손 img/video에 display: block, width: 100%, height: 100% 추가(기존 objectFit: cover 유지) — 내부 미디어가 프레임을 채우도록 레이아웃 강제.
Storybook 스토리 추가 docs/stories/ImageFrame.stories.tsx	ImageFrame용 Storybook 파일 추가: 기본 meta, 데코레이터, 여러 스토리(라이트/다크/폰트 스케일 변형) 및 테이블 기반 사례 렌더링 템플릿 도입.
StackFlow 예제 활동 추가 examples/stackflow-spa/src/activities/ActivityListImageFrame.tsx	새 Activity 컴포넌트 추가: 이미지 리스트 렌더링, 네비게이션(push), PTR 리프레시 시뮬레이션 및 StackFlow Register 타입 보강.
예제 앱 네비게이션 업데이트 examples/stackflow-spa/src/activities/ActivityHome.tsx	ActivityHome의 네비게이션 목록에 ListImageFrame 항목 추가(클릭 시 ActivityListImageFrame으로 이동).
Stack 구성 등록 examples/stackflow-spa/src/stackflow/Stack.tsx	components 맵에 ActivityListImageFrame을 lazy 로드로 등록하여 해당 Activity를 노출.
StackFlow 라우트 구성 examples/stackflow-spa/src/stackflow/stackflow.config.ts	활동 목록에 { route: "/list-image-frame", name: "ActivityListImageFrame" } 항목 추가로 라우트 등록.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 살금살금 캔버스 위로,
사진이 넓게 퍼져 앉았네.
가로·세로 꽉 채운 채로,
프레임 안에서 춤을 추고,
토끼는 깡충, 기쁨을 나누네.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main change: adding width and height styling to ImageFrame media elements to fix aspect ratio handling.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/image-frame-width-height

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying seed-design-v3 with    Cloudflare Pages

Latest commit:	d65c45a
Status:	✅  Deploy successful!
Preview URL:	https://6406c460.seed-design.pages.dev
Branch Preview URL:	https://fix-image-frame-width-height.seed-design.pages.dev

View logs