[fix] 터치 기기에서 탭한 뒤 hover 효과가 남지 않게 한다 by seongwon030 · Pull Request #2255 · Moadong/moadong

seongwon030 · 2026-10-28T06:14:34Z

문제

모바일 웹과 앱 웹뷰에서 일부 버튼과 카드가 탭한 뒤에도 떠오르거나 커진 채로 남는다. 터치 기기에는 hover가 없어서 브라우저가 첫 탭에 :hover를 적용하고, 다른 곳을 탭할 때까지 그대로 둔다. &:hover 85곳 중 @media (hover: hover)로 감싼 곳은 ClubCard 하나뿐이다.

해결

위치나 크기가 바뀌어 눈에 띄는 5곳의 hover 블록을 ClubCard와 같은 @media (hover: hover)로 감쌌다.

FloatingButtonGroup 아이콘 scale(1.12)
ClubFeed 사진 translateY(-4px), RelatedPromotionCard translateY(-2px)
AdminContactFloatingButton translateY(-2px), RecruitPage 화살표 translateX(3px)

검증

Playwright에서 :hover를 강제(CDP forcePseudoState)하고 FloatingButtonGroup 공유 버튼 svg의 transform을 전후로 비교했다.

	데스크톱 (`hover: hover`)	iPhone 13 에뮬 (`hover: none`)
수정 전	`scale(1.12)`	`scale(1.12)`
수정 후	`scale(1.12)`	`none`

typecheck, 관련 jest 8개 스위트(39개 테스트) 통과
브라우저로 대조한 건 FloatingButtonGroup 하나다. 나머지 4곳은 같은 치환이라 diff로만 확인했다
탭한 뒤 hover가 남는 현상 자체는 에뮬에서 재현되지 않아 실기기 확인이 필요하다

영향 범위

학생용(메인 플로팅 버튼, 동아리 상세 피드, 홍보 상세, 모집 페이지), 관리자(문의 플로팅 버튼), 앱 웹뷰에 닿는다. 데스크톱 마우스 hover는 그대로다. 터치에서 ClubFeed·RelatedPromotionCard·RecruitPage 화살표는 :active가 없어서 누를 때 보이는 반응이 없어진다. 셋 다 누르면 바로 모달이 열리거나 페이지가 바뀐다.

한계와 대안(선택)

배경색만 바뀌는 나머지 hover는 이번 범위 밖이다
입력창 16px 미만(iOS 확대)과 viewport maximum-scale=1, user-scalable=no는 입력창 글자 크기를 디자인과 정한 뒤 별도 PR로 다룬다
트랙패드를 붙인 iPad처럼 기본 입력이 터치로 잡히는 기기에서는 hover 효과가 안 나올 수 있다(실기기 미확인)

Summary by CodeRabbit

개선 사항
- 호버 효과가 마우스 등 호버 입력을 지원하는 환경에서만 적용되도록 변경했습니다. 터치 환경에서 불필요한 확대, 이동, 그림자 효과가 나타나는 현상을 줄였습니다.

- 터치 기기는 hover가 없어서 브라우저가 첫 탭에 :hover를 적용하고 다른 곳을 탭할 때까지 유지하므로, hover에 건 transform이 탭한 뒤에도 남는다 - FloatingButtonGroup·ClubFeed·RelatedPromotionCard·AdminContactFloatingButton·RecruitPage 화살표의 hover를 ClubCard와 같은 @media (hover: hover)로 감싼다

vercel · 2026-10-28T06:14:40Z

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

Project	Deployment	Actions	Updated
moadong	Ready	Preview	Oct 28, 2026 6:15am UTC

coderabbitai · 2026-10-28T06:14:47Z

No actionable comments were generated in the recent review.

Recent review info

Run configuration

Source mode: Auto
Repository: Moadong/moadong
Branch: fix/&#35;2254-hover-media-gate-MOA-1228
File: .coderabbit.yaml
Commit: 290e958
Layers: Repository YAML
Review profile: CHILL
Plan: Advanced
Run ID: 4825d3ad-c59e-4c16-8c8b-ff518afdd9bc

Commits

Reviewing files that changed from the base of the PR and between 322d83d and 290e958.

Files selected for processing: 5

frontend/src/components/common/FloatingButtonGroup/FloatingButtonGroup.styles.ts
frontend/src/pages/AdminPage/components/AdminContactFloatingButton/AdminContactFloatingButton.styles.ts
frontend/src/pages/ClubDetailPage/components/ClubFeed/ClubFeed.styles.ts
frontend/src/pages/PromotionPage/components/detail/RelatedPromotionSection/RelatedPromotionCard/RelatedPromotionCard.styles.ts
frontend/src/pages/RecruitPage/RecruitPage.styles.ts

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

Walkthrough

5개 컴포넌트의 hover 효과를 @media (hover: hover) 조건 안으로 이동했습니다. hover 입력을 지원하는 환경에서는 기존 효과가 유지됩니다.

Changes

Hover 효과 조건 변경

Layer / File(s)	Summary
Hover 스타일에 미디어 조건 적용 `frontend/src/components/common/FloatingButtonGroup/FloatingButtonGroup.styles.ts`, `frontend/src/pages/AdminPage/components/AdminContactFloatingButton/AdminContactFloatingButton.styles.ts`, `frontend/src/pages/ClubDetailPage/components/ClubFeed/ClubFeed.styles.ts`, `frontend/src/pages/PromotionPage/components/detail/RelatedPromotionSection/RelatedPromotionCard/RelatedPromotionCard.styles.ts`, `frontend/src/pages/RecruitPage/RecruitPage.styles.ts`	5개 컴포넌트의 hover 스타일을 `@media (hover: hover)` 조건으로 제한했습니다. SVG 확대 배율, 사진 항목 효과, 카드 이동 거리, 셰브론 이동 거리는 기존 값과 같습니다.

Priority: Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Low

Suggested labels: 💻 FE

Suggested reviewers: suhyun113

Merge Risk: Minimal · up to 290e9

No actionable merge-blocking risk remains.

Pre-merge checks: 5

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		제목은 터치 기기에서 탭 후 hover 효과가 남는 문제를 수정하는 PR의 핵심 변경 사항을 정확하고 간결하게 설명합니다.
Linked Issues check		직접 연결된 활성 이슈 [`#2254`]의 구현 요구사항을 충족합니다. 5개 지정 위치의 `:hover` 규칙을 `@media (hover: hover)` 안으로 이동했습니다. 변경된 변형 값은 유지되므로 hover 지원 환경의 동작을 유지하고, `hover: none` 환경의 hover 변형 적용을 제한합니다. 변경 diff는 `FloatingButtonGr…
Out of Scope Changes check		전체 PR diff는 [`#2254`]가 지정한 5개 hover 블록의 미디어 조건 변경으로만 구성됩니다. 배경색 hover, 입력 글자 크기, viewport 확대 제한 등 제외 범위의 변경은 없습니다. 관련 스타일 변경은 이슈 구현에 직접 연결됩니다.
Docstring Coverage		No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…

Full details: Linked Issues check

Explanation

직접 연결된 활성 이슈 [#2254]의 구현 요구사항을 충족합니다. 5개 지정 위치의 :hover 규칙을 @media (hover: hover) 안으로 이동했습니다. 변경된 변형 값은 유지되므로 hover 지원 환경의 동작을 유지하고, hover: none 환경의 hover 변형 적용을 제한합니다. 변경 diff는 FloatingButtonGroup, ClubFeed, RelatedPromotionCard, AdminContactFloatingButton, RecruitPage에만 해당합니다. 이슈의 브라우저 대조 항목은 비코딩 검증 작업이므로 미실기기 검증을 코딩 요구사항 미충족으로 처리하지 않습니다.

Full details: Docstring Coverage

Explanation

No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 5 files.

Finishing Touches

📝 Generate docstrings

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

reviewer-harry · 2026-10-28T06:14:52Z

Claude finished @seongwon030's task in 23s —— View job

harry 리뷰 총평

리뷰 기준에 걸리는 곳이 없어서 통과예요 👍 이미 ClubCard에 있던 @media (hover: hover) 패턴을 5곳에 똑같이 적용했고, 들여쓰기 말고는 hover 블록 안의 값을 바꾸지 않았어요. 변경 범위도 딱 필요한 만큼이라 좋아요.

색상: rgba(0, 0, 0, 0.15), rgb(0 0 0 / 20%)는 원래 있던 줄의 들여쓰기만 바뀐 거라 새 하드코딩으로 보지 않았어요
테스트: CSS만 바뀌고 로직은 그대로라 테스트를 더할 필요는 없어 보여요

diboreview-e2e-bot

켜진 규칙 위반이 없어요.

지적 0개 · 버린 지적 0개 · 중복 제외 0개 · 비용 $0.0186

github-actions · 2026-10-28T06:16:30Z

🎨 UI 변경사항을 확인해주세요

변경된 스토리를 Chromatic에서 확인해주세요.

구분	링크
🔍 변경사항 리뷰	https://www.chromatic.com/build?appId=67904e61c16daa99a63b44a7&number=1265
📖 Storybook	https://67904e61c16daa99a63b44a7-ssuwnopnjp.chromatic.com/

3개 스토리 변경 · 전체 193개 스토리 · 67개 컴포넌트

seongwon030 self-assigned this Oct 28, 2026

github-actions Bot added the 💻 FE Frontend label Oct 28, 2026

diboreview-e2e-bot Bot reviewed Oct 28, 2026

View reviewed changes

vercel Bot deployed to Preview October 28, 2026 06:15

View deployment

seongwon030 merged commit aeb857f into develop-fe Oct 28, 2026
14 checks passed

seongwon030 deleted the fix/#2254-hover-media-gate-MOA-1228 branch October 28, 2026 06:22

reviewer-harry Bot mentioned this pull request Oct 28, 2026

[fix] 카드 탭 지연을 없애고 버튼 hover가 터치 누름 피드백을 덮지 않게 한다 #2259

Open

seongwon030 added the 🛠Fix 기능이 의도한 대로 동작하지 않는 버그를 수정 label Oct 28, 2026

Navigation Menu

Repository navigation

[fix] 터치 기기에서 탭한 뒤 hover 효과가 남지 않게 한다 - #2255

[fix] 터치 기기에서 탭한 뒤 hover 효과가 남지 않게 한다#2255
seongwon030 merged 1 commit into
develop-fefrom
fix/#2254-hover-media-gate-MOA-1228

seongwon030 commented Oct 28, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Oct 28, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 28, 2026 •

edited

Loading

Uh oh!

reviewer-harry Bot commented Oct 28, 2026 •

edited

Loading

Uh oh!

diboreview-e2e-bot Bot left a comment

Uh oh!

github-actions Bot commented Oct 28, 2026

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

seongwon030 commented Oct 28, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

문제

해결

검증

영향 범위

한계와 대안(선택)

Summary by CodeRabbit

Uh oh!

vercel Bot commented Oct 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Walkthrough

Changes

Uh oh!

reviewer-harry Bot commented Oct 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

harry 리뷰 총평

Uh oh!

diboreview-e2e-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Oct 28, 2026

🎨 UI 변경사항을 확인해주세요

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

seongwon030 commented Oct 28, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Oct 28, 2026 •

edited

Loading

coderabbitai Bot commented Oct 28, 2026 •

edited

Loading

reviewer-harry Bot commented Oct 28, 2026 •

edited

Loading