fix: 서비스 소개서 모바일 화면 개선 by yhi9839 · Pull Request #508 · checkmo2025/FE

yhi9839 · 2026-07-20T11:05:22Z

📌 개요 (Summary)

변경 사항에 대한 간략한 요약을 적어주세요.
관련 이슈가 있다면 링크를 걸어주세요 (예: [fix] cicd / build 문제 #123).

🛠️ 변경 사항 (Changes)

📸 스크린샷 (Screenshots)

(UI 변경 사항이 있다면 첨부해주세요)

✅ 체크리스트 (Checklist)

빌드가 성공적으로 수행되었나요? (pnpm build)
린트 에러가 없나요? (pnpm lint)
불필요한 콘솔 로그나 주석을 제거했나요?

Summary by CodeRabbit

New Features
- Added a mobile orientation notice prompting portrait-mode users to rotate their phone for the best viewing experience.
- Improved responsive slide positioning and viewport handling across devices.
- Added custom branding typography to the service introduction page.
Bug Fixes
- Improved print layout behavior for deck slides.
- Updated page metadata and title for better browser presentation.

vercel · 2026-07-20T11:05:28Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
checkmo	Ready	Preview, Comment	Jul 20, 2026 11:05am

coderabbitai · 2026-07-20T11:05:46Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7568fe60-7340-4df2-b665-8b63f474b1c3

📥 Commits

Reviewing files that changed from the base of the PR and between 757a61f and 180fc56.

⛔ Files ignored due to path filters (1)

public/service-introduction/assets/fonts/FontAwesome5_Brands.ttf is excluded by !**/*.ttf

📒 Files selected for processing (1)

public/service-introduction/index.html

📝 Walkthrough

Walkthrough

The service introduction page updates its metadata and font, uses dynamic viewport sizing and centered slide positioning, adds a portrait-orientation notice, and resets slide positioning for print output.

Changes

Service introduction responsive presentation

Layer / File(s)	Summary
Viewport and slide layout `public/service-introduction/index.html`	Updates page metadata and font loading, changes screen and deck heights to `100dvh`, and centers scaled slides with absolute positioning.
Portrait orientation notice `public/service-introduction/index.html`	Hides the deck in small portrait layouts and displays an ARIA-enabled, safe-area-aware instruction to rotate the device.
Print slide positioning `public/service-introduction/index.html`	Removes screen positioning constraints from slides in print deck-ready styles.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related issues

fix : 서비스 소개서 모바일 지원 #507 — Both changes address mobile responsiveness and orientation handling for the service introduction page.

Possibly related PRs

checkmo2025/FE#506 — Both modify public/service-introduction/index.html, including responsive deck behavior and presentation layout.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목이 서비스 소개서의 모바일 화면 개선이라는 मुख्य 변경점을 잘 요약합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix-507-service-mobile

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

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

gemini-code-assist

Code Review

This pull request enhances the mobile experience of the service introduction page by adding favicons, utilizing dynamic viewport height (100dvh), centering slides, and introducing a portrait-mode orientation notice that prompts users to rotate their device. The review feedback suggests removing an unused @font-face declaration to keep the stylesheet clean and adding a CSS rotation animation to the orientation phone icon to make the user instruction more intuitive.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

gemini-code-assist · 2026-07-20T11:06:53Z

+    @font-face {
+      font-family: "Checkmo Store Brands";
+      src: url("assets/fonts/FontAwesome5_Brands.ttf") format("truetype");
+      font-style: normal;
+      font-weight: 400;
+      font-display: block;
+    }


Checkmo Store Brands 폰트 패밀리가 @font-face로 정의되어 있지만, 이 HTML 파일 내에서 실제로 사용되는 곳이 없습니다. 불필요한 웹 폰트 정의는 스타일시트의 가독성을 떨어뜨리고 유지보수를 어렵게 만듭니다. 사용하지 않는 @font-face 선언을 제거하는 것을 권장합니다.

gemini-code-assist · 2026-07-20T11:06:53Z

+      .orientation-phone {
+        position: relative;
+        width: 50px;
+        height: 82px;
+        margin-bottom: 34px;
+        border: 4px solid var(--brand);
+        border-radius: 13px;
+        transform: rotate(90deg);
+        box-shadow: 0 10px 24px rgba(74, 57, 49, 0.14);
+      }


모바일 세로 화면에서 가로 회전을 안내하는 .orientation-phone 아이콘이 정적으로 90도 회전되어 있어, 사용자가 직관적으로 회전 동작을 인지하기 어려울 수 있습니다. 간단한 회전 애니메이션을 추가하면 사용자가 휴대폰을 가로로 돌려야 한다는 점을 훨씬 더 명확하고 직관적으로 이해할 수 있습니다.

Suggested change

.orientation-phone {

position: relative;

width: 50px;

height: 82px;

margin-bottom: 34px;

border: 4px solid var(--brand);

border-radius: 13px;

transform: rotate(90deg);

box-shadow: 0 10px 24px rgba(74, 57, 49, 0.14);

}

.orientation-phone {

position: relative;

width: 50px;

height: 82px;

margin-bottom: 34px;

border: 4px solid var(--brand);

border-radius: 13px;

transform: rotate(90deg);

box-shadow: 0 10px 24px rgba(74, 57, 49, 0.14);

animation: rotate-phone 2s ease-in-out infinite;

}

@keyframes rotate-phone {

0% {

transform: rotate(0deg);

}

40%, 100% {

transform: rotate(90deg);

}

}

fix: 서비스 소개서 모바일 화면 개선

180fc56

yhi9839 linked an issue Jul 20, 2026 that may be closed by this pull request

fix : 서비스 소개서 모바일 지원 #507

Closed

4 tasks

gemini-code-assist Bot reviewed Jul 20, 2026

View reviewed changes

yhi9839 merged commit 36e656f into main Jul 20, 2026
3 checks passed

Navigation Menu

Repository navigation

fix: 서비스 소개서 모바일 화면 개선 - #508

fix: 서비스 소개서 모바일 화면 개선#508
yhi9839 merged 1 commit into
mainfrom
fix-507-service-mobile

yhi9839 commented Jul 20, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Jul 20, 2026

Uh oh!

coderabbitai Bot commented Jul 20, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot Jul 20, 2026

Uh oh!

gemini-code-assist Bot Jul 20, 2026

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

yhi9839 commented Jul 20, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 개요 (Summary)

🛠️ 변경 사항 (Changes)

📸 스크린샷 (Screenshots)

✅ 체크리스트 (Checklist)

Summary by CodeRabbit

Uh oh!

vercel Bot commented Jul 20, 2026

Uh oh!

coderabbitai Bot commented Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

yhi9839 commented Jul 20, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 20, 2026 •

edited

Loading