[fix] 레이아웃이 깨지는 버그 수정

[lepitaaar]

#️⃣연관된 이슈

• [fix] MOA-658 레이아웃이 깨지는 문제 수정 #1207

📝작업 내용

기존

<Suspense fallback={...}>
    <GlobalStyles />
</Suspense>

에러 바운더리를 도입하면서 GlobalStyles를 Suspense안에 두어 잠깐의 fallback동안 스타일이 제거되어 레이아웃이 깨지는 문제가 발생하였습니다.

해당문제를 수정하기 위해 GlobalStyles를 Suspense 태그 밖 최상위에 위치시켰습니다

아마 createGlobalStyle은 한번만 실행되는듯~ 마운트 될때마다 주입되는게아니듯합니다
신기하네요

중점적으로 리뷰받고 싶은 부분(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

논의하고 싶은 부분(선택)

논의하고 싶은 부분이 있다면 작성해주세요.

🫡 참고사항

Summary by CodeRabbit

Summary by CodeRabbit

릴리스 노트

• 리팩토링
  • 전역 스타일의 적용 위치를 조정하여 페이지 전반의 스타일 일관성과 렌더링 순서를 개선했습니다. 사용자 인터페이스의 시각적 안정성과 초기 스타일 로드가 향상됩니다. 기능 동작에는 영향이 없습니다.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
moadong	Ready	Preview, Comment	Feb 16, 2026 9:20am

[coderabbitai]

Warning

.coderabbit.yaml has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid regex pattern for base branch. Received: "**" at "reviews.auto_review.base_branches[0]"

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

No actionable comments were generated in the recent review. 🎉

---

Walkthrough

GlobalStyles 컴포넌트를 BrowserRouter 내부에서 최상위로 이동시키도록 App.tsx 반환을 프래그먼트로 래핑하고 최상단에 <GlobalStyles />를 추가했습니다. 렌더 트리 구조는 그대로 유지됩니다.

Changes

Cohort / File(s)	Summary
GlobalStyles 위치 조정 frontend/src/App.tsx	GlobalStyles를 BrowserRouter 바깥 최상위로 이동. 반환값을 프래그먼트로 감싸고 최상위에 <GlobalStyles /> 추가(렌더 순서 및 스타일 적용 범위 변경).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• [Fix] 메인 UI 수정  #1182: Global.styles.ts에 전역 스타일(overscroll-behavior 등) 변경을 포함 — App.tsx에서의 GlobalStyles 위치 변경과 코드 레벨 연관성 있음.

Suggested reviewers

• seongwon030
• suhyun113

🚥 Pre-merge checks | ✅ 5 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Merge Conflict Detection	⚠️ Warning	⚠️ Unable to check for merge conflicts: Invalid branch name format

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목은 '레이아웃이 깨지는 버그 수정'으로 변경사항의 핵심(GlobalStyles를 Suspense 외부로 이동)을 명확하게 요약하고 있습니다.
Linked Issues check	✅ Passed	PR의 변경사항(GlobalStyles를 최상위로 이동)이 MOA-658의 요구사항(GlobalStyle 위치를 Suspense 바깥 최상위로 이동)과 완전히 일치합니다.
Out of Scope Changes check	✅ Passed	frontend/src/App.tsx의 변경사항이 GlobalStyles 위치 이동에만 집중되어 있으며, 연결된 이슈의 범위와 완벽하게 일치합니다.
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/#1207-strange-layout-MOA-658

⚔️ Resolve merge conflicts (beta)

• Auto-commit resolved conflicts to branch fix/#1207-strange-layout-MOA-658
• Create stacked PR with resolved conflicts
• Post resolved changes as copyable diffs in a comment

---

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]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/src/App.tsx (1)

38-84: ⚠️ Potential issue | 🟡 Minor

수정 방향은 정확합니다. 다만 Prettier 포맷팅 오류를 해결해 주세요.

GlobalStyles를 GlobalBoundary(Suspense) 밖으로 이동한 것은 올바른 수정입니다. 하지만 CI 파이프라인에서 Prettier 포맷팅 경고가 발생하고 있습니다. Fragment(<>...</>) 내부 자식 요소들의 들여쓰기가 Prettier 규칙과 맞지 않는 것으로 보입니다.

npx prettier --write frontend/src/App.tsx를 실행하여 포맷팅을 맞춰 주세요.

🔧 예상되는 들여쓰기 수정

   return (
     <>
-    <GlobalStyles />
-    <GlobalBoundary>
+      <GlobalStyles />
+      <GlobalBoundary>
         ...
-    </GlobalBoundary>
-    </>
+      </GlobalBoundary>
+    </>
   );

[seongwon030]

글로벌스타일을 최상단으로 위치시켜야 스타일이 적용되는군요