feat: add seed-safe-area-bottom in overlay components

[junghyeonsu]

Summary by CodeRabbit

릴리스 노트

• 개선
  • BottomSheet 및 MenuSheet 컴포넌트가 화면 하단의 안전 영역(Safe Area)을 올바르게 처리하도록 개선되었습니다. 콘텐츠 영역의 하단 패딩이 기기의 안전 영역에 맞춰 자동으로 조정됩니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[changeset-bot]

🦋 Changeset detected

Latest commit: 3e3646f

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

워크스루

BottomSheet 및 MenuSheet 컴포넌트의 Content 슬롯에 안전 영역 하단(safe-area-bottom) 패딩을 추가하는 변경사항입니다. 기존 로직은 유지되며, 화면 하단의 시스템 UI 영역을 고려한 스타일 업데이트입니다.

변경 사항

응집 / 파일	변경 요약
Changeset 문서 \.changeset/smart-bags-look\.md	@seed-design/css 패치 버전 업데이트 문서화 및 BottomSheet, MenuSheet의 Content 슬롯에 안전 영역 추가 내용 기재
시트 컴포넌트 스타일 업데이트 packages/qvism-preset/src/recipes/bottom-sheet\.ts, packages/qvism-preset/src/recipes/menu-sheet\.ts	Content 슬롯의 paddingBottom에 var(--seed-safe-area-bottom) 변수를 추가하여 하단 안전 영역 반영

예상 코드 리뷰 노력

🎯 2 (Simple) | ⏱️ ~8분

• 스타일 변경이 두 파일에서 일관되게 적용되었는지 확인
• CSS 변수 --seed-safe-area-bottom의 올바른 정의 및 사용 확인
• 기존 패딩 값과의 상호작용이 예상대로 작동하는지 검증

시

🐰 안녕하오, 시트의 하단을 감싸네,
안전 영역 변수 소중하게,
시스템 UI 아래 곡선 맞춰,
아름다운 인셋이 더해지니,
모바일 화면 가장자리 배려 가득! 🎀

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The PR title accurately describes the main change: adding seed-safe-area-bottom CSS variable to overlay components (BottomSheet and MenuSheet).

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

✨ Finishing touches

• 📝 Generate docstrings

---

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.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 59c24ea and 1fb0471.

⛔ Files ignored due to path filters (4)

• packages/css/all.css is excluded by !packages/css/**/*
• packages/css/all.min.css is excluded by !packages/css/**/*
• packages/css/recipes/bottom-sheet.css is excluded by !packages/css/**/*
• packages/css/recipes/menu-sheet.css is excluded by !packages/css/**/*

📒 Files selected for processing (3)

• .changeset/smart-bags-look.md (1 hunks)
• packages/qvism-preset/src/recipes/bottom-sheet.ts (1 hunks)
• packages/qvism-preset/src/recipes/menu-sheet.ts (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Analyze (javascript)
• GitHub Check: chromatic-deployment
• GitHub Check: Deploy Seed Design V3 Docs

🔇 Additional comments (2)

.changeset/smart-bags-look.md (1)

1-5: LGTM!

changeset 포맷과 내용이 적절합니다. Content slot에 safe area를 추가하는 변경사항이 정확히 문서화되어 있습니다.

packages/qvism-preset/src/recipes/bottom-sheet.ts (1)

86-86: CSS 변수가 정상적으로 정의되어 있으며, 변경사항이 적절합니다.

--seed-safe-area-bottom CSS 변수는 packages/qvism-preset/src/global.ts에서 잘 정의되어 있고, 다양한 브라우저 지원 레벨에 맞는 폴백값(constant, env)을 포함하고 있습니다.

콘텐츠 슬롯에 안전 영역을 추가한 것은 다음과 같은 이유로 적절합니다:

• 콘텐츠 슬롯은 flex: 1로 설정되어 있어 스크롤 가능한 영역입니다
• menu-sheet.ts(line 67)와 app-screen.ts(line 161)에서 동일한 패턴으로 안전 영역을 적용하고 있습니다
• footer 슬롯은 고정된 패딩값을 사용하도록 의도적으로 설계되었으며, 이는 현재 설정이 정확함을 나타냅니다

[cloudflare-workers-and-pages]

Deploying seed-design-v3 with    Cloudflare Pages

Latest commit:	3e3646f
Status:	✅  Deploy successful!
Preview URL:	https://133bb9c1.seed-design.pages.dev
Branch Preview URL:	https://feat-bottom-overlay-componen.seed-design.pages.dev

View logs