[fix] 동소한 페이지 디자인 수정, 팝업 이미지 최적화 및 이벤트 트래킹 추가#1289
Merged
oesnuj merged 10 commits intodevelop-fefrom Mar 2, 2026
Merged
Conversation
- padding: 0 6px -> 10px (상하 패딩 누락) - filter: drop-shadow(0px 0px 6px) 슬라이드별 테마 색상 적용 누락
svg 대비 png로 교체하여 이미지 파일 용량 절반 수준으로 감소
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (2)
Warning
|
| Cohort / File(s) | Summary |
|---|---|
Booth 스타일링 및 타입 변경 frontend/src/pages/FestivalPage/components/BoothMapSection/BoothMapSection.styles.ts, frontend/src/pages/FestivalPage/components/BoothMapSection/BoothMapSection.tsx |
Styled.Booth에 트랜지언트 prop $shadowColor: string 추가 및 해당 값으로 drop-shadow 필터 적용. Booth 패딩을 0 6px에서 10px로 변경. MapSlide 타입에 shadowColor 필드 추가하고 CLUB_MAP_SLIDES에 값 설정. |
페스티벌 페이지에 Mixpanel 이벤트 추가 frontend/src/pages/FestivalPage/.../IntroductionPage.tsx, frontend/src/pages/FestivalPage/components/PerformanceCard/PerformanceCard.tsx, frontend/src/pages/FestivalPage/components/BoothMapSection/BoothMapSection.tsx, frontend/src/constants/eventName.ts |
useMixpanelTrack와 USER_EVENT 사용을 추가하여 탭 클릭/탭 체류 시간, 퍼포먼스 카드 토글, 부스 맵 슬라이드 변경 등의 이벤트를 기록하도록 수정. USER_EVENT에 FESTIVAL_* 이벤트 항목 추가. |
팝업 이미지 에셋 및 스타일 조정 frontend/src/pages/MainPage/components/Popup/Popup.tsx, frontend/src/pages/MainPage/components/Popup/Popup.styles.ts |
앱 다운로드 팝업 이미지 소스를 SVG에서 PNG로 교체. 팝업 Container의 border-radius를 10px에서 16px로 증가. |
스타일·레이아웃 보조 변경 frontend/src/pages/FestivalPage/IntroductionPage/IntroductionPage.styles.ts |
새 Styled.TabWrapper 컴포넌트 추가 (반응형 버튼 너비 및 모바일 레이아웃 조정). |
데이터 수정 frontend/src/pages/FestivalPage/data/performances.ts |
공연 데이터 문자열 오타 수정: "Dillema" → "Dilemma". |
Sequence Diagram(s)
(생성 조건 미충족 — 해당 섹션은 건너뜁니다.)
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
- [feature] 2026 동아리 소개 한마당 페이지 완성 #1284: BoothMapSection 컴포넌트 및 스타일 관련 변경(트랜지언트 prop 추가)과 직접 연관.
- [feature] 관리자페이지 믹스패널 로깅을 적용한다 #874:
USER_EVENT/이벤트명 상수 변경과 관련된 작업을 포함함. - [feature] 믹스패널 track 2차 추가 및 기타 작업 #283:
useMixpanelTrack/트래킹 구현 변경을 다뤄 본 PR의 Mixpanel 사용과 연결될 가능성 있음.
Suggested labels
🛠Fix
Suggested reviewers
- lepitaaar
- suhyun113
- seongwon030
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| 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. |
| Title check | ✅ Passed | PR 제목은 부스 카드 디자인 수정과 앱 다운로드 팝업 이미지 최적화라는 두 가지 주요 변경사항을 정확히 반영하고 있으며, 실제 변경 내용과 완전히 일치합니다. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing Touches
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
feature/#1288-update-booth-map-design-MOA-720
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.
Comment @coderabbitai help to get the list of available commands and usage tips.
seongwon030
approved these changes
Mar 2, 2026
Member
seongwon030
left a comment
seongwon030
left a comment
There was a problem hiding this comment.
그림자값 작업해주셔서 감사합니다 !
배너도 png가 훨씬 용량을 덜 잡아먹는군요
- Festival Tab Clicked: 부스지도/동아리시간표 탭 전환 시 전환된 탭 이름 수집 - Festival Tab Duration: 탭 전환 직전 이전 탭의 체류 시간(ms, 초) 수집 - Festival BoothMap Slide Changed: 부스 지도 슬라이드 변경 시 인덱스 및 구역 이름 수집 - Festival PerformanceCard Clicked: 공연 카드 클릭 시 동아리명, 펼침/닫힘 여부, 공연 중 여부 수집
oesnuj
changed the title
2 tasks
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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/IntroductionPage/IntroductionPage.styles.ts`:
- Around line 19-29: The mobile button width rule is being overridden by the
later base rule; move the ${media.mobile} { button { width: 167px; } } block so
it appears after the base button { width: 250px; } rule in
IntroductionPage.styles.ts (or alternatively increase specificity of the mobile
selector) so the mobile width override actually takes effect.
In `@frontend/src/pages/FestivalPage/IntroductionPage/IntroductionPage.tsx`:
- Around line 28-40: The last-tab dwell time is missing because handleTabClick
only sends duration on tab switches; add a cleanup handler that sends the
current tab's duration when the component unmounts or the page is hidden/closed.
Use the existing tabStartTime ref and activeTab inside a useEffect cleanup
(and/or listeners for 'visibilitychange'/'pagehide' and 'beforeunload') to
compute duration = Date.now() - tabStartTime.current and call
trackEvent(USER_EVENT.FESTIVAL_TAB_DURATION, { tab: activeTab, duration,
duration_seconds: Math.round(duration/1000) }) before the page unloads or
component unmounts; keep updating tabStartTime.current and setActiveTab in
handleTabClick as-is.
ℹ️ 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.
⛔ Files ignored due to path filters (1)
frontend/src/assets/images/popup/app-download.pngis excluded by!**/*.png
📒 Files selected for processing (6)
frontend/src/constants/eventName.tsfrontend/src/pages/FestivalPage/IntroductionPage/IntroductionPage.styles.tsfrontend/src/pages/FestivalPage/IntroductionPage/IntroductionPage.tsxfrontend/src/pages/FestivalPage/components/BoothMapSection/BoothMapSection.tsxfrontend/src/pages/FestivalPage/components/PerformanceCard/PerformanceCard.tsxfrontend/src/pages/FestivalPage/data/performances.ts
✅ Files skipped from review due to trivial changes (1)
- frontend/src/pages/FestivalPage/data/performances.ts
frontend/src/pages/FestivalPage/IntroductionPage/IntroductionPage.styles.ts
Show resolved
Hide resolved
페이지 이탈 시 마지막 탭의 체류시간이 전송되지 않던 문제 수정 useEffect cleanup에서 Festival Tab Duration 이벤트 전송하도록 추가
🎨 UI 변경사항을 확인해주세요
25개 스토리 변경 · 전체 58개 스토리 · 23개 컴포넌트 |
This was referenced Mar 2, 2026
Merged
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
#️⃣연관된 이슈
📝작업 내용
부스 카드 디자인 피그마 명세 반영
앱 다운로드 팝업 이미지 최적화
알록달록 복잡한 이미지는 svg로 사용하면 용량이 더 커져서 png로 바꾸어주었습니다. 이미지 등장 속도도 절반 정도 개선될 것으로 예상됩니다.
동소한 페이지 탭 버튼 데스크탑 가운데 정렬
UnderlineTabs공통 컴포넌트 변경 없이IntroductionPage에만TabWrapper로 감싸 해결250px으로 확장동소한 페이지 믹스패널 이벤트 추가
Dillema→Dilemma)🫡 참고사항
피그마에서 drop-shadow가 개별 카드가 아닌 컬럼 컨테이너에 적용되어 있어 초기 구현 시 누락된 것 같아요 (그림자값 한참 찾았네요 😿)
절대위치 기반 레이아웃 구조를 유지하면서 개별 카드에 동일한 효과를 적용하는 방식으로 수정했습니다~~!
Summary by CodeRabbit