[fix] 공연 카드 UX 개선 및 웹뷰 환경 대응

[oesnuj]

#️⃣연관된 이슈

#1297

📝작업 내용

• 모바일 터치 시 파란 하이라이트 전역 제거 (-webkit-tap-highlight-color: transparent)

• 웹뷰 환경에서 ClubDetailPage Footer 미노출

• PerformanceCard 펼침/접힘 애니메이션 개선 (찌부 현상, 재렌더 느낌, 간격 문제 수정)
• SongItem 색상 전환 (접힌 상태 gray[600] → 펼쳐지면 gray[800])

🫡 참고사항

• framer-motion motion.div height 애니메이션 사용 (0 ↔ auto)
• songs[0]은 항상 DOM에 유지하고 나머지만 motion.div로 감싸는 구조로 재렌더 느낌 제거

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	Mar 3, 2026 3:18pm

[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

본 PR은 ClubDetailPage에서 앱 내 웹뷰 환경일 때 Footer를 숨기고, PerformanceCard의 스타일링을 테마 기반 색상으로 통일하며, 애니메이션 로직을 단순화하고, 전역 CSS 규칙을 추가합니다.

Changes

Cohort / File(s)	Summary
앱 내 웹뷰 UI 조정 frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx	앱 내 웹뷰 환경 감지 시 Footer를 조건부로 렌더링하지 않음.
PerformanceCard 스타일 리팩토링 frontend/src/pages/FestivalPage/components/PerformanceCard/PerformanceCard.styles.ts	하드코딩된 색상을 테마 기반 색상으로 변경, SongArea에서 $expanded 제거, SongItem에 $collapsed 속성 추가, CollapsedSong 제거, 색상 전환 효과 추가.
PerformanceCard 애니메이션 단순화 frontend/src/pages/FestivalPage/components/PerformanceCard/PerformanceCard.tsx	AnimatePresence 제거, 높이 기반 애니메이션 로직 단순화, 곡 목록 렌더링 구조 재정의.
전역 스타일 추가 frontend/src/styles/Global.styles.ts	웹킷 탭 하이라이트 색상 투명화 CSS 규칙 추가.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• [fix] 동소한 페이지 디자인 수정, 팝업 이미지 최적화 및 이벤트 트래킹 추가 #1289: PerformanceCard.tsx의 toggleExpanded에 Mixpanel 추적 추가와 관련된 같은 파일 수정
• [fix] 동소한 공연 시간표 탭 UI/데이터 개선 및 웹뷰 대응 #1298: 앱 내 웹뷰 감지를 사용하여 Footer 조건부 숨김 처리 (동일 패턴)
• [feature] 웹뷰 감지 로직 추가 및 웹뷰용 UI 조건부 처리 #828: ClubDetailPage.tsx에서 isInAppWebView를 사용한 UI 조건부 렌더링 (유사 패턴)

Suggested reviewers

• lepitaaar
• seongwon030
• suhyun113

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 변경사항의 주요 내용을 정확히 반영하고 있습니다. 공연 카드 UX 개선과 웹뷰 환경 대응이 모두 구현되어 있으며, 제목은 명확하고 구체적입니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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 (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/#1297-update-performance-schedule-ui-MOA-726

---

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

[github-actions]

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

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

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

6개 스토리 변경 · 전체 58개 스토리 · 23개 컴포넌트

[lepitaaar]

웹뷰로 보는환경이 어색하긴했네요 해결됐으면좋겠습니다~

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

frontend/src/pages/FestivalPage/components/PerformanceCard/PerformanceCard.styles.ts (1)

68-69: Chevron 활성 색상도 테마 토큰으로 통일하면 더 일관됩니다.

현재 비활성 색상은 테마를 쓰고, 활성 색상만 하드코딩되어 있어 동일 파일 내 스타일 기준이 섞여 있습니다.

🤖 Prompt for AI Agents

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

In
`@frontend/src/pages/FestivalPage/components/PerformanceCard/PerformanceCard.styles.ts`
around lines 68 - 69, The active chevron color is hardcoded as '#ff9f7c' in the
styled component (the stroke property using {$active, theme}) causing
inconsistency; update the stroke to use a theme token instead (e.g., replace
'#ff9f7c' with an appropriate token like theme.colors.primary[...],
theme.colors.accent[...], or a new token such as theme.colors.chevronActive) so
both active and inactive states come from theme; ensure the styled value remains
stroke: ${({ $active, theme }) => $active ? theme.colors.<chosenToken> :
theme.colors.gray[500]} and add the new token to the theme if it doesn’t exist.

🤖 Prompt for all review comments with AI agents

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

Inline comments:
In
`@frontend/src/pages/FestivalPage/components/PerformanceCard/PerformanceCard.tsx`:
- Around line 41-46: The collapsed animation only sets height to 0 but doesn't
mark the content hidden to assistive tech; update the motion.div inside the
PerformanceCard component to include an accessibility attribute (set
aria-hidden={expanded ? false : true}) so when expanded is false the container
is exposed as hidden to screen readers; locate the motion.div using the symbol
expanded in PerformanceCard and add the aria-hidden prop (and optionally ensure
any toggle control sets aria-expanded consistently) to keep visual animation and
accessibility in sync.

---

Nitpick comments:
In
`@frontend/src/pages/FestivalPage/components/PerformanceCard/PerformanceCard.styles.ts`:
- Around line 68-69: The active chevron color is hardcoded as '#ff9f7c' in the
styled component (the stroke property using {$active, theme}) causing
inconsistency; update the stroke to use a theme token instead (e.g., replace
'#ff9f7c' with an appropriate token like theme.colors.primary[...],
theme.colors.accent[...], or a new token such as theme.colors.chevronActive) so
both active and inactive states come from theme; ensure the styled value remains
stroke: ${({ $active, theme }) => $active ? theme.colors.<chosenToken> :
theme.colors.gray[500]} and add the new token to the theme if it doesn’t exist.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 8a29cf6 and 8e67a5a.

📒 Files selected for processing (4)

• frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx
• frontend/src/pages/FestivalPage/components/PerformanceCard/PerformanceCard.styles.ts
• frontend/src/pages/FestivalPage/components/PerformanceCard/PerformanceCard.tsx
• frontend/src/styles/Global.styles.ts