[캠퍼스] 식단페이지 모바일 디자인 수정

[ParkSungju01]

• Close #ISSUE_NUMBER
  [식단] 식단 모바일 페이지 디자인 수정 #1241

What is this PR? 🔍

• 기능 : 모바일 화면 식단 페이지 디자인 수정
• issue : [식단] 식단 모바일 페이지 디자인 수정 #1241

Changes 📝

• 내 주변 음식점 보기 배너 화살표 위치 수정
• 여백 추가

ScreenShot 📷

Precaution

✔️ Please check if the PR fulfills these requirements

• It's submitted to the correct branch, not the develop branch unconditionally?
• If on a hotfix branch, ensure it targets main?
• There are no warning message when you run yarn lint

Summary by CodeRabbit

• 스타일
  • 추천 배너의 여백이 조정되어 더 나은 시각적 균형 제공
  • 카테고리 섹션에 둥근 모서리와 개선된 간격 적용으로 더 세련된 카드 레이아웃 구현

[coderabbitai]

Walkthrough

모바일 카페테리아 페이지의 레이아웃을 개선하기 위해 두 SCSS 파일의 여백과 시각적 스타일을 조정했습니다. 배너 여백을 확대하고 화살표를 우측 정렬했으며, 카테고리 블록에 모서리 반경과 오버플로우 처리를 추가했습니다.

Changes

모바일 카페테리아 스타일 개선

Layer / File(s)	Summary
배너 여백 및 레이아웃 src/components/cafeteria/MobileCafeteriaPage/MobileCafeteriaPage.module.scss	.recommend-banner의 여백을 margin-top: 12px에서 margin: 16px 24px 16px 24px로 변경하고, .recommend-banner__arrow에 margin-left: auto를 추가하여 화살표를 우측에 정렬합니다.
카테고리 블록 스타일 src/components/cafeteria/MobileCafeteriaPage/components/MobileDiningBlocks/MobileDiningBlocks.module.scss	.category의 여백을 margin: 0에서 margin: 0 24px 16px 24px로 확대하고, border-radius: 16px과 overflow: hidden을 추가하여 카드형 레이아웃을 강화합니다.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related issues

• #1241: 배너 화살표 위치 조정 및 배너/식사 목록 여백 개선 요구사항을 직접적으로 해결합니다.

Suggested labels

🎓 Campus

Suggested reviewers

• hyejun0228
• kongwoojin

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	Pull request 제목이 변경사항의 주요 내용을 명확하게 설명하고 있습니다. '[캠퍼스] 식단페이지 모바일 디자인 수정'은 모바일 식단 페이지의 디자인 개선을 다루는 변경사항과 일치합니다.
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 캠퍼스]-식단-모바일-페이지-디자인-수정

---

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]

🧹 Nitpick comments (1)

src/components/cafeteria/MobileCafeteriaPage/components/MobileDiningBlocks/MobileDiningBlocks.module.scss (1)

1-6: ⚡ Quick win

.blocks gap과 .category margin-bottom 중복 적용 여부 확인 필요

MobileDiningBlocks가 React Fragment를 반환하기 때문에 .category 요소들은 .blocks flex 컨테이너의 직접 자식이 됩니다. 따라서 .blocks의 gap: 8px(MobileCafeteriaPage.module.scss line 30)와 .category의 새로운 margin-bottom: 16px이 누적되어, 카드 간 실제 시각적 간격은 24px이 됩니다.

만약 디자인 의도가 카드 사이 16px 간격이라면, 두 가지 간격 메커니즘 중 하나를 제거하는 것이 권장됩니다.

♻️ 간격 제어를 단일화하는 방법 (gap 제거 예시)

MobileCafeteriaPage.module.scss의 .blocks에서 gap을 제거하고, 개별 요소 margin으로 통일:

 .blocks {
   display: flex;
   flex-direction: column;
-  gap: 8px;

또는 반대로 .category의 margin-bottom을 제거하고 gap만 유지:

 .category {
   display: block;
   background-color: `#fff`;
-  margin: 0 24px 16px 24px;
+  margin: 0 24px;
   border-radius: 16px;
   overflow: hidden;

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@src/components/cafeteria/MobileCafeteriaPage/components/MobileDiningBlocks/MobileDiningBlocks.module.scss`
around lines 1 - 6, The .category margin-bottom (in
MobileDiningBlocks.module.scss .category) is being applied on top of the .blocks
gap (in MobileCafeteriaPage.module.scss .blocks) because MobileDiningBlocks
renders a React Fragment so .category elements are direct children of .blocks;
remove the duplication by choosing one spacing mechanism: either delete the
.category margin-bottom:16px and rely on .blocks gap:8px (or update gap to
16px), or remove .blocks gap and keep per-card .category margin-bottom:16px;
update the corresponding style (either .blocks or .category) accordingly to
ensure final visual spacing is 16px between cards.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@src/components/cafeteria/MobileCafeteriaPage/components/MobileDiningBlocks/MobileDiningBlocks.module.scss`:
- Around line 1-6: The .category margin-bottom (in
MobileDiningBlocks.module.scss .category) is being applied on top of the .blocks
gap (in MobileCafeteriaPage.module.scss .blocks) because MobileDiningBlocks
renders a React Fragment so .category elements are direct children of .blocks;
remove the duplication by choosing one spacing mechanism: either delete the
.category margin-bottom:16px and rely on .blocks gap:8px (or update gap to
16px), or remove .blocks gap and keep per-card .category margin-bottom:16px;
update the corresponding style (either .blocks or .category) accordingly to
ensure final visual spacing is 16px between cards.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 74dc3f6d-7a7b-4238-a6fc-de259321c1a3

📥 Commits

Reviewing files that changed from the base of the PR and between feda477 and 705e5df.

⛔ Files ignored due to path filters (15)

• .yarn/cache/@esbuild-darwin-arm64-npm-0.27.2-d675c4a521-10.zip is excluded by !**/.yarn/**, !**/*.zip, !.yarn/** and included by **
• .yarn/cache/@esbuild-linux-x64-npm-0.27.2-11f1a3d9db-10.zip is excluded by !**/.yarn/**, !**/*.zip, !.yarn/** and included by **
• .yarn/cache/@img-sharp-darwin-arm64-npm-0.34.3-8944698b4c-10.zip is excluded by !**/.yarn/**, !**/*.zip, !.yarn/** and included by **
• .yarn/cache/@img-sharp-libvips-darwin-arm64-npm-1.2.0-2d65006be7-10.zip is excluded by !**/.yarn/**, !**/*.zip, !.yarn/** and included by **
• .yarn/cache/@img-sharp-libvips-linux-x64-npm-1.2.0-91cf635ac8-10.zip is excluded by !**/.yarn/**, !**/*.zip, !.yarn/** and included by **
• .yarn/cache/@img-sharp-linux-x64-npm-0.34.3-aa297ca1ca-10.zip is excluded by !**/.yarn/**, !**/*.zip, !.yarn/** and included by **
• .yarn/cache/@next-swc-darwin-arm64-npm-15.5.15-745fcf051d-10.zip is excluded by !**/.yarn/**, !**/*.zip, !.yarn/** and included by **
• .yarn/cache/@rollup-rollup-darwin-arm64-npm-4.59.0-db3495ba42-10.zip is excluded by !**/.yarn/**, !**/*.zip, !.yarn/** and included by **
• .yarn/cache/@rollup-rollup-linux-x64-gnu-npm-4.59.0-da6c703f69-10.zip is excluded by !**/.yarn/**, !**/*.zip, !.yarn/** and included by **
• .yarn/cache/@sentry-cli-darwin-npm-2.45.0-76059cfa9f-10.zip is excluded by !**/.yarn/**, !**/*.zip, !.yarn/** and included by **
• .yarn/cache/@sentry-cli-darwin-npm-2.58.5-1f667e3b9d-10.zip is excluded by !**/.yarn/**, !**/*.zip, !.yarn/** and included by **
• .yarn/cache/@sentry-cli-linux-x64-npm-2.45.0-6e5f26280b-10.zip is excluded by !**/.yarn/**, !**/*.zip, !.yarn/** and included by **
• .yarn/cache/@sentry-cli-linux-x64-npm-2.58.5-7cea7778bc-10.zip is excluded by !**/.yarn/**, !**/*.zip, !.yarn/** and included by **
• .yarn/cache/@unrs-resolver-binding-darwin-arm64-npm-1.11.1-c78d4bd2cb-10.zip is excluded by !**/.yarn/**, !**/*.zip, !.yarn/** and included by **
• .yarn/cache/@unrs-resolver-binding-linux-x64-gnu-npm-1.11.1-93a00570de-10.zip is excluded by !**/.yarn/**, !**/*.zip, !.yarn/** and included by **

📒 Files selected for processing (2)

• src/components/cafeteria/MobileCafeteriaPage/MobileCafeteriaPage.module.scss
• src/components/cafeteria/MobileCafeteriaPage/components/MobileDiningBlocks/MobileDiningBlocks.module.scss

[dooohun]

수고하셨습니다~