[refactor] 모바일 앱에 웹 페이지 헤더가 표시되지않게 변경한다

[lepitaaar]

#️⃣연관된 이슈

#1087

헤더 컴포넌트에 hideOn, showOn 옵션을 추가했습니다. ed8c5d1
지원하기 페이지는 desktop일때만 보여주게 추가했습니다.

📝작업 내용

이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지/동영상 첨부 가능)

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

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

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

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

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

🫡 참고사항

Summary by CodeRabbit

릴리스 노트

개선 사항

• 헤더가 접속하는 기기 유형(모바일, 태블릿, 데스크톱, 웹뷰)에 따라 자동으로 표시 여부가 결정되도록 개선되었습니다.
• 다양한 환경에서 사용자 경험이 최적화되며, 여러 페이지에 일관된 헤더 표시 방식이 적용됩니다.

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

[vercel]

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

Project	Deployment	Review	Updated (UTC)
moadong	Ready	Preview, Comment	Jan 23, 2026 6:32am

[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

Walkthrough

Header 컴포넌트에 device 기반 렌더링 제어 기능을 추가하여 showOn, hideOn props를 통한 조건부 렌더링을 지원합니다. 이를 적용하여 여러 페이지에서 기존 조건부 렌더링 로직을 prop 기반 방식으로 전환했습니다.

Changes

Cohort / File(s)	변경 요약
Header 컴포넌트 확장 frontend/src/components/common/Header/Header.tsx	DeviceType 타입 정의 및 HeaderProps 인터페이스 추가; useDevice와 isInAppWebView를 활용한 device 감지 로직 구현; shouldRender() 함수로 showOn/hideOn props 기반 렌더링 제어 로직 추가
페이지 컴포넌트 업데이트 frontend/src/pages/ApplicationFormPage/ApplicationFormPage.tsx, frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx, frontend/src/pages/ClubUnionPage/ClubUnionPage.tsx, frontend/src/pages/IntroducePage/IntroducePage.tsx	기존 조건부 렌더링 로직(isInAppWebView, useDevice 체크) 제거; Header 컴포넌트에 hideOn 또는 showOn props 전달하여 device별 표시 제어로 변경

Sequence Diagram

sequenceDiagram
    participant Page as Page Component
    participant Device as Device Detection<br/>(useDevice, isInAppWebView)
    participant Header as Header Component
    participant UI as Rendered Output

    Page->>Device: 현재 device type 감지 요청
    Device-->>Page: DeviceType 반환 (mobile, tablet, laptop, desktop, webview)
    
    Page->>Header: Header props 전달<br/>(showOn/hideOn)
    
    Header->>Header: shouldRender() 실행<br/>- hideOn과 현재 device 비교<br/>- showOn 지정 시 매칭 확인
    
    alt showOn/hideOn 조건 충족
        Header-->>UI: Header UI 렌더링
    else 조건 미충족
        Header-->>UI: null 반환 (렌더링 안 함)
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related issues

• MOA-546: 이 PR은 모바일 앱(webview)에서 웹 페이지 헤더가 표시되지 않도록 하는 기능을 구현하여 linked issue의 체크리스트 항목("헤더 표시 옵션 추가")을 완료합니다.

Possibly related PRs

• [release] FE v1.1.8 #939: 이 PR에서 useDevice 훅이 도입되었고, 본 PR은 이를 활용하여 Header 컴포넌트에 device 기반 렌더링 제어 로직을 구현했습니다.
• [feature] 웹뷰 감지 로직 추가 및 웹뷰용 UI 조건부 처리 #828: 이전에 isInAppWebView를 활용한 조건부 Header 렌더링을 구현했고, 본 PR은 이를 showOn/hideOn props 기반으로 리팩토링합니다.
• [refactor] 헤더 구조 리펙토링 / 탭 활성 상태 추가 / 각종 UI 버그 수정 #775: 동일한 Header 컴포넌트의 공개 API와 device 기반 렌더링 로직을 수정하여 헤더 가시성 제어 방식을 전환하는 변경입니다.

Suggested reviewers

• seongwon030
• oesnuj
• suhyun113

🚥 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	제목은 Pull Request의 주요 변경사항을 명확하게 설명하고 있습니다. 모바일 앱에서 웹 페이지 헤더가 표시되지 않도록 변경하는 것이 주요 목표이며, 이는 코드 변경사항과 일치합니다.
Linked Issues check	✅ Passed	Header 컴포넌트에 hideOn, showOn 옵션이 추가되었고, 모바일 앱에서 헤더 표시를 제어하는 기능이 구현되었습니다. 모든 페이지(ApplicationFormPage, ClubDetailPage, ClubUnionPage, IntroducePage)에서 hideOn 또는 showOn 옵션으로 헤더 표시를 제어하고 있어 요구사항을 충족합니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 Header 컴포넌트의 디바이스별 조건부 렌더링 제어와 관련된 범위 내의 변경입니다. 추가적인 기능이나 불필요한 리팩터링은 포함되지 않았습니다.
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

---

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

[seongwon030]

고생하셨습니다 ~ 분기처리 좋습니당