Skip to content

[feature] 대동제 공연시간표 페이지 및 탭/슬라이드 ab테스트추가#1518

Merged
seongwon030 merged 19 commits into
develop-fefrom
feature/#1517-performance-schedule-page-MOA-835
May 11, 2026
Merged

[feature] 대동제 공연시간표 페이지 및 탭/슬라이드 ab테스트추가#1518
seongwon030 merged 19 commits into
develop-fefrom
feature/#1517-performance-schedule-page-MOA-835

Conversation

@seongwon030
Copy link
Copy Markdown
Member

@seongwon030 seongwon030 commented May 9, 2026

#️⃣연관된 이슈

ex) #1517

📝작업 내용

  • /festival-busking 라우트에 2026 대동제 버스킹 시간표 페이지 신규 구현
  • 날짜 네비게이션 방식 A/B 테스트 (tabs vs arrows, 50:50) 도입 대동제 AB테스트 문서
  • PerformanceList 공통화 및 PerformanceCard 곡 미공개 상태 처리

feat

  • BuskingPage — 4일치 버스킹 시간표 페이지 (/festival-busking)
  • DayTabsNav — Variant A: UnderlineTabs로 날짜 4개 탭
  • DayArrowsNav — Variant B: ‹ › 화살표 날짜 네비게이션
  • buskingDays.ts — 4일치 공연 데이터 (2일차~4일차 곡 목록 포함)
  • swipe 제스처 지원 (framer-motion onPanEnd), interaction: 'click' | 'swipe' 이벤트 구분
  • festivalTimetableNavExperiment A/B 실험 추가, 미사용 실험 2개 제거
  • Mixpanel 이벤트 추가 (DAEDONG2026_DAY_CHANGED, DAEDONG2026_DAY_DURATION)
  • 메인페이지 대동제 필터칩 추가 및 라우팅 적용

refactor

  • PerformanceListperformances, festivalDate를 optional props로 추가해 재사용 가능하도록 개선 (기존
    IntroductionPage 동작 유지)

fix

  • PerformanceCardsongs: []일 때 "🎵 추후 공개 예정" 표시, chevron 숨김, 클릭 비활성화

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

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

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

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

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

🫡 참고사항

Summary by CodeRabbit

  • 새로운 기능

    • 2026 대동제 버스킹 시간표 페이지 추가(/festival-busking) — 메인무대·동아리 공연 구분, 날짜별 타임테이블 제공
    • 메인 페이지용 팝업: 대동제 팝업 추가 및 팝업 구성 방식 도입
  • 동작/UI 변경

    • 날짜 네비게이션 A/B 실험(탭 vs 화살표, 50:50), 탭/화살표/스와이프 지원, 오늘 자동 선택 및 공연 없는 날짜 제외
    • 공연 카드: 곡 목록 숨기기 옵션 및 곡 미존재 처리 개선
    • 필터에 대동제 옵션·알림점 추가
  • 분석(트래킹)

    • 페이지뷰, 날짜 변경, 체류시간 등 관련 이벤트 추가
  • 문서

    • 버스킹 시간표·팝업·필터 동작 문서화 완료

Review Change Stack

performances, festivalDate를 optional props로 추가해 다른 축제 페이지에서도 재사용 가능하도록 개선.
기존 IntroductionPage는 기본값으로 동작이 유지된다.
songs가 비어있을 때 '🎵 추후 공개 예정' 텍스트를 표시하고,
chevron 아이콘 숨김 및 카드 클릭 비활성화 처리.
- /festival-busking 라우트 추가
- 날짜 네비게이션 A/B 실험 구현 (tabs vs arrows, 50:50)
- framer-motion onPanEnd 기반 swipe 제스처 지원
- interaction: 'click' | 'swipe' 속성으로 Mixpanel 이벤트 구분
- performances가 없는 날짜는 탭에서 자동 제외
- 미사용 실험(mainBanner, applyButtonCopy) 제거
@vercel
Copy link
Copy Markdown

vercel Bot commented May 9, 2026

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

Project Deployment Actions Updated (UTC)
moadong Ready Ready Preview, Comment May 11, 2026 3:14am

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 9, 2026

Caution

Review failed

The pull request is closed.

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
ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5ce7bfec-749a-4f71-8c8b-902d5beba02d

📥 Commits

Reviewing files that changed from the base of the PR and between 554525c and 200a4ea.

⛔ Files ignored due to path filters (1)
  • frontend/src/assets/images/popup/daedong.png is excluded by !**/*.png
📒 Files selected for processing (11)
  • frontend/docs/features/main/filter.md
  • frontend/docs/features/main/popup.md
  • frontend/src/components/common/Filter/Filter.tsx
  • frontend/src/pages/MainPage/MainPage.tsx
  • frontend/src/pages/MainPage/components/Popup/Popup.stories.tsx
  • frontend/src/pages/MainPage/components/Popup/Popup.styles.ts
  • frontend/src/pages/MainPage/components/Popup/Popup.test.tsx
  • frontend/src/pages/MainPage/components/Popup/Popup.tsx
  • frontend/src/pages/MainPage/components/Popup/popupConfigs.ts
  • frontend/src/pages/WebviewMainPage/WebviewMainPage.tsx
  • frontend/src/utils/popupUtils.ts

Disabled knowledge base sources:

  • Jira integration is disabled

You can enable these sources in your CodeRabbit configuration.


Walkthrough

버스킹 시간표 페이지와 관련 데이터·스키마, A/B 실험, 네비게이션 컴포넌트·스타일, 페이지 구현, Performance 컴포넌트 변경, 팝업 리팩터 및 통합, 라우트를 추가합니다.

Changes

Festival Busking Timetable Page

Layer / File(s) Summary
데이터 모델
frontend/src/pages/FestivalPage/data/performances.ts, frontend/src/pages/FestivalPage/data/buskingDays.ts
PerformanceclubNamename으로 변경하고 FestivalDay 타입 및 4일치 BUSKING_DAYS 상수를 추가합니다.
추적 이벤트
frontend/src/constants/eventName.ts
버스킹 페이지 조회(PAGE_VIEW) 및 일자 변경·체류 시간(USER_EVENT) 상수를 추가합니다.
A/B 테스트
frontend/src/experiments/definitions.ts
festival_timetable_nav_v1을 추가(variants: tabs/arrows, 50:50)하고 이전 두 실험을 제거합니다.
페이지 스타일
frontend/src/pages/FestivalPage/BuskingPage/BuskingPage.styles.ts
Container, NavWrapper, TimetableSection/Header/Date/Location, SectionLabel 등 스타일 컴포넌트를 추가합니다.
Tabs 네비게이션
frontend/src/pages/FestivalPage/components/DayTabsNav/DayTabsNav.tsx
UnderlineTabs 래퍼로 day 탭 네비게이션을 구현합니다.
Arrows 네비게이션
frontend/src/pages/FestivalPage/components/DayArrowsNav/*
이전/다음 화살표와 중앙 레이블 버튼 네비게이션을 구현하고 관련 스타일을 추가합니다.
BuskingPage 컴포넌트
frontend/src/pages/FestivalPage/BuskingPage/BuskingPage.tsx
availableDays 필터, 초기 activeDay 결정(오늘 우선), Mixpanel 추적(페이지뷰/일자 변경/체류시간), onPanEnd 스와이프 처리, 탭/화살표 분기 렌더링, 클럽/메인 스테이지 두 섹션 렌더링을 구현합니다.
Performance 컴포넌트 수정
frontend/src/pages/FestivalPage/components/PerformanceCard/PerformanceCard.tsx
hideSongs?: boolean 추가, hasSongs로 상호작용·chevron·곡 목록 조건부 렌더링, 제목에 performance.name 사용으로 변경합니다.
PerformanceList 파라미터화
frontend/src/pages/FestivalPage/components/PerformanceList/PerformanceList.tsx
performances, festivalDate, hideSongs를 props로 받도록 변경하고 날짜 비교 로직을 파라미터화합니다.
라우팅 / 문서
frontend/src/routes/AppRoutes.tsx, frontend/docs/features/festival/busking-timetable.md
/festival-busking 라우트를 추가하고 페이지 구조·실험·추적·데이터 규칙을 문서화합니다.
Filter 통합
frontend/src/components/common/Filter/Filter.tsx
웹·웹뷰 필터 옵션에 '대동제' 항목을 추가하여 해당 경로로 이동할 수 있게 하고 sessionStorage로 dot 상태를 관리합니다.
Popup 리팩터
frontend/src/pages/MainPage/components/Popup/*, frontend/src/utils/popupUtils.ts, frontend/src/pages/MainPage/components/Popup/popupConfigs.ts
Popup를 PopupConfig[] 기반으로 리팩터: PopupConfig 타입·isPopupHidden 유틸 추가, APP_DOWNLOAD_POPUP/DAEDONG_POPUP 구성 추가, Popup 컴포넌트/스토리/테스트 갱신.
MainPage / Webview 통합
frontend/src/pages/MainPage/MainPage.tsx, frontend/src/pages/WebviewMainPage/WebviewMainPage.tsx
MainPage/WebviewMainPage에서 DAEDONG_POPUP 구성 전달하여 Popup 렌더링; 관련 스토리/테스트/스타일 조정.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant BuskingPage
  participant Experiment
  participant PerformanceList
  participant Mixpanel

  User->>BuskingPage: 페이지 진입
  BuskingPage->>Mixpanel: PAGE_VIEW: DAEDONG2026_BUSKING_PAGE
  BuskingPage->>Experiment: 네비게이션 변형 조회
  Experiment-->>BuskingPage: tabs/arrows
  BuskingPage->>PerformanceList: activeDay 전달 (클럽/메인 스테이지)

  User->>BuskingPage: 탭/화살표/스와이프로 일자 변경
  BuskingPage->>Mixpanel: USER_EVENT: DAEDONG2026_DAY_CHANGED (from_day,to_day,interaction)
  BuskingPage->>Mixpanel: USER_EVENT: DAEDONG2026_DAY_DURATION (day,duration_seconds,nav_variant)
  BuskingPage->>PerformanceList: 새 일자 데이터 렌더
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

  • Moadong/moadong#1301: Popup 구현 및 추적 상수 관련 변경이 겹칩니다.
  • Moadong/moadong#1041: Popup visibility/session 로직(세션/로컬 스토리지) 관련하여 코드 수준 충돌 가능성이 있습니다.
  • Moadong/moadong#1519: DAEDONG_POPUP 및 Popup configs/통합 관련 변경과 직접적으로 연관됩니다.

Suggested labels

🔨 Refactor

Suggested reviewers

  • lepitaaar
  • suhyun113
  • oesnuj
🚥 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 PR 제목은 변경 사항의 핵심을 명확히 반영하고 있으며, 새로운 대동제 공연시간표 페이지와 탭/슬라이드 A/B 테스트 추가라는 주요 변경 내용을 간결하게 설명합니다.
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.

✏️ 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 feature/#1517-performance-schedule-page-MOA-835

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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 and usage tips.

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 9, 2026

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

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

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

13개 스토리 변경 · 전체 56개 스토리 · 22개 컴포넌트

@seongwon030 seongwon030 changed the title Feature/#1517 performance schedule page moa 835 [feature] 대동제 공연시간표 페이지 및 탭/슬라이드 ab테스트추가 May 9, 2026
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (6)
frontend/src/pages/FestivalPage/components/DayTabsNav/DayTabsNav.tsx (1)

2-2: ⚡ Quick win

FestivalDay import 경로를 alias로 바꿔주세요.

상대경로 대신 @/*를 사용해 파일 이동 시 경로 깨짐을 줄이는 게 좋습니다.

경로 통일 예시
-import type { FestivalDay } from '../../data/buskingDays';
+import type { FestivalDay } from '@/pages/FestivalPage/data/buskingDays';

As per coding guidelines, "Use path alias @/* to import from src/* in all TypeScript files".

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/FestivalPage/components/DayTabsNav/DayTabsNav.tsx` at line
2, The import in DayTabsNav.tsx currently uses a relative path for the
FestivalDay type; change the import for FestivalDay to use the path alias from
src (e.g. import type { FestivalDay } from
'@/pages/FestivalPage/components/data/buskingDays' or the correct '@/...' path
matching your project structure) so the FestivalDay type is imported via the `@/`*
alias instead of a relative path; update the import statement that references
FestivalDay accordingly to maintain consistent alias usage across TypeScript
files.
frontend/src/pages/FestivalPage/components/PerformanceList/PerformanceList.tsx (1)

3-4: ⚡ Quick win

performances 관련 import를 alias 기반으로 바꿔주세요.

상대경로 import가 늘어나면 리팩토링 시 경로 변경 비용이 커집니다.

경로 통일 예시
-import type { Performance } from '../../data/performances';
-import { performances as defaultPerformances } from '../../data/performances';
+import type { Performance } from '@/pages/FestivalPage/data/performances';
+import { performances as defaultPerformances } from '@/pages/FestivalPage/data/performances';

As per coding guidelines, "Use path alias @/* to import from src/* in all TypeScript files".

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@frontend/src/pages/FestivalPage/components/PerformanceList/PerformanceList.tsx`
around lines 3 - 4, The imports for Performance and performances should use the
project path alias instead of relative paths; update the two import statements
that reference '../../data/performances' so they import from
'@/pages/FestivalPage/data/performances' (or the correct alias path that maps to
the original module) and keep the same imported symbols (Performance and
performances as defaultPerformances) so usages of Performance and
defaultPerformances in PerformanceList.tsx remain unchanged.
frontend/src/pages/FestivalPage/components/DayArrowsNav/DayArrowsNav.tsx (1)

1-1: ⚡ Quick win

여기도 import alias 규칙으로 맞춰주세요.

신규 컴포넌트에서 @/* 별칭을 사용하면 전체 경로 규칙이 일관됩니다.

경로 통일 예시
-import type { FestivalDay } from '../../data/buskingDays';
+import type { FestivalDay } from '@/pages/FestivalPage/data/buskingDays';

As per coding guidelines, "Use path alias @/* to import from src/* in all TypeScript files".

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/FestivalPage/components/DayArrowsNav/DayArrowsNav.tsx` at
line 1, The import in DayArrowsNav.tsx uses a relative path; update it to use
the project path alias so imports follow the '@/...' convention. Replace the
relative import of FestivalDay (currently "import type { FestivalDay } from
'../../data/buskingDays'") with the equivalent alias import using
"@/.../data/buskingDays" (keeping the FestivalDay type name) so the component
DayArrowsNav follows the path-alias rule.
frontend/src/pages/FestivalPage/data/buskingDays.ts (1)

1-1: ⚡ Quick win

상대 경로 import 대신 @/* 별칭으로 통일해주세요.

신규 파일에서도 alias 규칙을 맞추면 경로 유지보수가 쉬워집니다.

경로 통일 예시
-import type { Performance } from './performances';
+import type { Performance } from '@/pages/FestivalPage/data/performances';

As per coding guidelines, "Use path alias @/* to import from src/* in all TypeScript files".

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/FestivalPage/data/buskingDays.ts` at line 1, Replace the
relative import of the Performance type in this module—currently "import type {
Performance } from './performances';"—with the project path-alias form that
starts with "@/". Update the import to use the alias (keeping the same exported
symbol Performance) so the file follows the "Use path alias `@/*`" guideline and
future renames/moves are easier to maintain.
frontend/src/pages/FestivalPage/BuskingPage/BuskingPage.tsx (2)

105-111: 💤 Low value

SWIPE_THRESHOLD를 상수로 추출하는 것을 고려하세요.

매직 넘버 50을 파일 상단의 상수로 추출하면 가독성과 유지보수성이 향상됩니다.

♻️ 제안하는 개선 방안
+const SWIPE_THRESHOLD = 50;
+
 const BuskingPage = () => {
   // ... 
   
   <motion.div
     onPanEnd={(_, info) => {
-      const SWIPE_THRESHOLD = 50;
       if (info.offset.x < -SWIPE_THRESHOLD) handleSwipe('left');
       else if (info.offset.x > SWIPE_THRESHOLD) handleSwipe('right');
     }}
   >
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/FestivalPage/BuskingPage/BuskingPage.tsx` around lines 105
- 111, Extract the magic number 50 used in the onPanEnd handler of the
BuskingPage component into a top-level constant (e.g., SWIPE_THRESHOLD) at the
top of the file; update the motion.div onPanEnd logic to reference that constant
instead of the literal so handleSwipe('left') / handleSwipe('right') use the
named threshold for improved readability and maintainability.

44-54: ⚡ Quick win

cleanup 효과의 의존성 배열 검토가 필요합니다.

빈 의존성 배열로 인해 trackEventnavVariant가 초기 렌더링 시점의 값으로 고정됩니다. 일반적으로 이러한 값들은 변경되지 않지만, 의존성 배열에 명시적으로 포함하거나 ref 패턴을 사용하는 것이 더 안전합니다.

♻️ 제안하는 개선 방안
   useEffect(() => {
     return () => {
       const duration = Date.now() - dayStartTime.current;
       trackEvent(USER_EVENT.DAEDONG2026_DAY_DURATION, {
         day: activeDayIdRef.current,
         nav_variant: navVariant,
         duration,
         duration_seconds: Math.round(duration / 1000),
       });
     };
-  }, []);
+  }, [trackEvent, navVariant]);
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/FestivalPage/BuskingPage/BuskingPage.tsx` around lines 44
- 54, The cleanup effect captures stale values because useEffect has an empty
dependency array; update the code so the cleanup uses stable refs instead of
closed-over variables: create refs (e.g., navVariantRef and trackEventRef),
update navVariantRef.current = navVariant and trackEventRef.current = trackEvent
in a short effect or inside the component render, and then read
navVariantRef.current and trackEventRef.current in the useEffect cleanup (which
can remain with an empty dependency array) when computing duration with
dayStartTime.current and activeDayIdRef.current and calling
trackEvent(USER_EVENT.DAEDONG2026_DAY_DURATION, ...). This preserves the
unmount-only behavior while ensuring the cleanup uses the latest navVariant and
trackEvent.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/docs/features/festival/busking-timetable.md`:
- Around line 11-17: The fenced code block describing the component tree
(BuskingPage, DayTabsNav, DayArrowsNav, PerformanceList, TimelineRow,
PerformanceCard) lacks a language identifier; update the markdown by adding a
language tag like ```text or ```plaintext right after the opening fence so the
linter stops flagging it—e.g., change ``` to ```text and keep the existing
indentation and content intact.

In `@frontend/src/pages/FestivalPage/BuskingPage/BuskingPage.tsx`:
- Around line 19-27: The getInitialDayId function builds todayStr manually;
switch it to use date-fns by importing format from 'date-fns' and replace the
manual construction with format(new Date(), 'yyyy-MM-dd') inside getInitialDayId
so availableDays.find((d) => d.date === todayStr)?.id logic remains the same;
keep the existing fallback to availableDays[0]?.id and BUSKING_DAYS[0].id.

In `@frontend/src/pages/FestivalPage/components/DayArrowsNav/DayArrowsNav.tsx`:
- Around line 11-29: The component DayArrowsNav currently assumes activeDayId
exists and days is non-empty; guard against days.length === 0 and currentIndex
=== -1 before using activeDay or indexing neighbors. In the DayArrowsNav
component compute currentIndex as you do, then if days.length === 0 or
currentIndex === -1 render a safe fallback: disable both Styled.ArrowButton
controls, avoid calling onChange with undefined indices, and render a default
label (e.g., "날짜 없음") instead of activeDay.fullDateLabel; ensure onClick
handlers only reference days[currentIndex ± 1].id after verifying those indices
are in range.

---

Nitpick comments:
In `@frontend/src/pages/FestivalPage/BuskingPage/BuskingPage.tsx`:
- Around line 105-111: Extract the magic number 50 used in the onPanEnd handler
of the BuskingPage component into a top-level constant (e.g., SWIPE_THRESHOLD)
at the top of the file; update the motion.div onPanEnd logic to reference that
constant instead of the literal so handleSwipe('left') / handleSwipe('right')
use the named threshold for improved readability and maintainability.
- Around line 44-54: The cleanup effect captures stale values because useEffect
has an empty dependency array; update the code so the cleanup uses stable refs
instead of closed-over variables: create refs (e.g., navVariantRef and
trackEventRef), update navVariantRef.current = navVariant and
trackEventRef.current = trackEvent in a short effect or inside the component
render, and then read navVariantRef.current and trackEventRef.current in the
useEffect cleanup (which can remain with an empty dependency array) when
computing duration with dayStartTime.current and activeDayIdRef.current and
calling trackEvent(USER_EVENT.DAEDONG2026_DAY_DURATION, ...). This preserves the
unmount-only behavior while ensuring the cleanup uses the latest navVariant and
trackEvent.

In `@frontend/src/pages/FestivalPage/components/DayArrowsNav/DayArrowsNav.tsx`:
- Line 1: The import in DayArrowsNav.tsx uses a relative path; update it to use
the project path alias so imports follow the '@/...' convention. Replace the
relative import of FestivalDay (currently "import type { FestivalDay } from
'../../data/buskingDays'") with the equivalent alias import using
"@/.../data/buskingDays" (keeping the FestivalDay type name) so the component
DayArrowsNav follows the path-alias rule.

In `@frontend/src/pages/FestivalPage/components/DayTabsNav/DayTabsNav.tsx`:
- Line 2: The import in DayTabsNav.tsx currently uses a relative path for the
FestivalDay type; change the import for FestivalDay to use the path alias from
src (e.g. import type { FestivalDay } from
'@/pages/FestivalPage/components/data/buskingDays' or the correct '@/...' path
matching your project structure) so the FestivalDay type is imported via the `@/`*
alias instead of a relative path; update the import statement that references
FestivalDay accordingly to maintain consistent alias usage across TypeScript
files.

In
`@frontend/src/pages/FestivalPage/components/PerformanceList/PerformanceList.tsx`:
- Around line 3-4: The imports for Performance and performances should use the
project path alias instead of relative paths; update the two import statements
that reference '../../data/performances' so they import from
'@/pages/FestivalPage/data/performances' (or the correct alias path that maps to
the original module) and keep the same imported symbols (Performance and
performances as defaultPerformances) so usages of Performance and
defaultPerformances in PerformanceList.tsx remain unchanged.

In `@frontend/src/pages/FestivalPage/data/buskingDays.ts`:
- Line 1: Replace the relative import of the Performance type in this
module—currently "import type { Performance } from './performances';"—with the
project path-alias form that starts with "@/". Update the import to use the
alias (keeping the same exported symbol Performance) so the file follows the
"Use path alias `@/*`" guideline and future renames/moves are easier to
maintain.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ab539fb3-7dcd-402d-bd64-17fec89064b3

📥 Commits

Reviewing files that changed from the base of the PR and between 9cf9669 and 3ab456d.

📒 Files selected for processing (12)
  • frontend/docs/features/festival/busking-timetable.md
  • frontend/src/constants/eventName.ts
  • frontend/src/experiments/definitions.ts
  • frontend/src/pages/FestivalPage/BuskingPage/BuskingPage.styles.ts
  • frontend/src/pages/FestivalPage/BuskingPage/BuskingPage.tsx
  • frontend/src/pages/FestivalPage/components/DayArrowsNav/DayArrowsNav.styles.ts
  • frontend/src/pages/FestivalPage/components/DayArrowsNav/DayArrowsNav.tsx
  • frontend/src/pages/FestivalPage/components/DayTabsNav/DayTabsNav.tsx
  • frontend/src/pages/FestivalPage/components/PerformanceCard/PerformanceCard.tsx
  • frontend/src/pages/FestivalPage/components/PerformanceList/PerformanceList.tsx
  • frontend/src/pages/FestivalPage/data/buskingDays.ts
  • frontend/src/routes/AppRoutes.tsx

Comment thread frontend/docs/features/festival/busking-timetable.md
Comment thread frontend/src/pages/FestivalPage/BuskingPage/BuskingPage.tsx
- FestivalDay에 mainStagePerformances 추가 (Day1~4 아티스트 라인업)
- 동아리/아티스트 섹션 구분선(SectionLabel) 렌더링
- PerformanceCard/List에 hideSongs prop 추가 (아티스트 카드 곡목 숨김)
- Performance.clubName → name 리팩토링
- Filter에 대동제 칩 추가 (/festival-busking, /webview/festival-busking)
- BuskingPage에 Filter 렌더링 (홍보 알림 dot 동적 처리)
- Filter 추가로 인한 상단 여백 조정
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@frontend/src/pages/FestivalPage/BuskingPage/BuskingPage.tsx`:
- Line 45: The lookup for activeDay using BUSKING_DAYS.find((d) => d.id ===
activeDayId) uses a non-null assertion which can crash if not found; change this
to a safe guard by checking the result and providing a fallback (e.g., const
activeDay = BUSKING_DAYS.find(d => d.id === activeDayId) ?? BUSKING_DAYS[0] or
handle the null case explicitly with a default object or early return), updating
any code that assumes activeDay to handle the fallback path; reference
identifiers: activeDay, BUSKING_DAYS, activeDayId in BuskingPage.tsx.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 358afc4d-2adb-4823-b21a-3b501a1497a5

📥 Commits

Reviewing files that changed from the base of the PR and between 436b5da and 554525c.

📒 Files selected for processing (6)
  • frontend/src/components/common/Filter/Filter.tsx
  • frontend/src/constants/eventName.ts
  • frontend/src/pages/FestivalPage/BuskingPage/BuskingPage.styles.ts
  • frontend/src/pages/FestivalPage/BuskingPage/BuskingPage.tsx
  • frontend/src/pages/FestivalPage/components/DayArrowsNav/DayArrowsNav.tsx
  • frontend/src/pages/FestivalPage/data/buskingDays.ts
✅ Files skipped from review due to trivial changes (1)
  • frontend/src/constants/eventName.ts
🚧 Files skipped from review as they are similar to previous changes (1)
  • frontend/src/pages/FestivalPage/data/buskingDays.ts

Comment thread frontend/src/pages/FestivalPage/BuskingPage/BuskingPage.tsx
- PopupConfig 인터페이스 도입으로 팝업별 storageKey/sessionKey/daysToHide 분리
- configs: PopupConfig[] prop으로 첫 번째 eligible 팝업 자동 표시
- onImageClick에 trackEvent 주입하여 팝업별 트래킹 로직 자체 정의 가능
- isPopupHidden/DAYS_TO_HIDE를 src/utils/popupUtils.ts로 추출
- popupConfigs.ts에 APP_DOWNLOAD_POPUP config 분리
- daysToHide: 0 설정 시 항상 표시되는 버그 수정
- isPopupHidden(config) 시그니처에 맞게 mock config 도입
- sessionStorage 초기화 및 sessionKey 관련 테스트 케이스 추가
- daysToHide: 0 엣지 케이스 테스트 추가
- PopupConfig에 to?: string 필드 추가
- Popup 컴포넌트에 useNavigate 연결, 이미지 클릭 시 React Router로 이동
- DAEDONG_POPUP 추가 (이미지 클릭 시 /festival-busking 이동)
- MainPage를 DAEDONG_POPUP으로 교체 (축제 기간 임시)
Copy link
Copy Markdown
Collaborator

@suhyun113 suhyun113 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

기존 컴포턴트를 공통화한 리팩토링이 깔끔하고, A/B 실험 설계도 Mixpanel 이벤트 속성이 잘 설계되어있는 것 같아요! 빠른 추가 좋습니다!!

Comment thread frontend/src/components/common/Filter/Filter.tsx
Comment thread frontend/src/components/common/Filter/Filter.tsx
PopupConfig 기반 리팩터 과정에서 누락된 MAIN_POPUP_NOT_SHOWN
이벤트 트래킹을 복구. eligible한 팝업이 없을 때 해당 이벤트를 전송.
[feature] 대동제 팝업 추가 및 팝업 로직 개선
sessionStorage를 활용해 대동제 필터 칩의 dot을 세션 내 최초 방문 시 표시하고,
클릭 시 사라지도록 Filter 컴포넌트 내부에서 자체 관리
- WebviewMainPage에 DAEDONG_POPUP 추가 (대동제 종료 후 제거 예정)
- PopupImage에 scale(1.1) 적용으로 이미지 내 흰 여백 크롭 처리
@seongwon030 seongwon030 merged commit 5eed7d1 into develop-fe May 11, 2026
4 of 5 checks passed
@seongwon030 seongwon030 deleted the feature/#1517-performance-schedule-page-MOA-835 branch May 22, 2026 07:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AB TEST AB 테스트 관련 💻 FE Frontend ✨ Feature 기능 개발

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants