[feature] 홍보 게시판 페이지를 구현한다#1337
Conversation
- clubId 기준으로 조회하던 로직을 id 기준으로 변경 - 잘못된 데이터 매핑으로 인해 일정이 다르게 표시되던 문제 해결
- D-day 계산을 시작일이 아닌 이벤트 기간 기준으로 수정
| if (isTest) { | ||
| return serverArticle; | ||
| } | ||
|
|
There was a problem hiding this comment.
현재 구현은 서버 응답(serverArticle)에 festivalMock를 항상 merge합니다. 이러면 운영 환경에서도 하드코딩된 테스트/프로모션 데이터가 노출됩니다. Mock 주입은 개발/스토리북/테스트 환경으로 제한하거나, 서버 플래그 기반으로 제어하는 쪽이 안전합니다.
There was a problem hiding this comment.
festivalMock은 테스트 데이터가 아니라 항상 노출되는 프로모션 데이터로 의도적으로 포함했습니다.
따라서 서버 응답과 병합하는 구조로 유지했습니다.
| queryFn: getPromotionArticles, | ||
| staleTime: 60 * 1000, | ||
| staleTime: 0, | ||
| refetchInterval: 5000, |
There was a problem hiding this comment.
refetchInterval: 5000 + refetchOnWindowFocus: true로 모든 활성 뷰에서 5초 주기 폴링이 발생합니다. 리스트/상세/메인에서 동일 쿼리가 붙으면 불필요한 트래픽과 렌더링이 커질 수 있습니다. 알림 목적이면 전용 lightweight endpoint를 두거나, 페이지별 조건부 polling(enabled, refetchIntervalInBackground: false)로 범위를 줄이는 것이 좋습니다.
There was a problem hiding this comment.
알림이 빠르게 반영되는 것만 생각해서 기존에는 모든 페이지에서 짧은 주기로 polling이 발생해 불필요한 트래픽과 렌더링이 발생할 수 있는 구조였습니다.
이를 개선하기 위해 페이지별로 polling 주기를 분리하여, 홍보 페이지에서는 상대적으로 짧은 주기(3분)로 최신 데이터를 반영하고, 메인 페이지에서는 더 긴 주기(5분)로 알림 기능을 유지하면서도 요청 수를 줄이도록 구성했습니다. background 상태에서는 polling이 발생하지 않도록 설정하여
불필요한 네트워크 요청을 최소화했습니다.
현재 서비스 특성상 데이터 변경 빈도가 높지 않기 때문에,
해당 수준의 polling으로도 충분히 효율적이라고 판단했습니다.
0151cf8
| {activeEvents.map((event) => ( | ||
| <RelatedPromotionCard | ||
| key={event.clubId} | ||
| article={event} |
There was a problem hiding this comment.
여기 상세 라우트 키는 promotionId인데 네비게이션에 event.clubId를 사용하고 있습니다. 현재 상세 페이지는 data.find(item => item.id === promotionId)로 조회하므로 링크가 깨집니다. /promotions/${event.id}로 맞춰주세요.
There was a problem hiding this comment.
사용하지 않는 컴포넌트라 수정하는 걸 빼먹었네요...
바로 수정했습니다!
02485cc
lepitaaar
left a comment
lepitaaar
left a comment
There was a problem hiding this comment.
전체적으로 홍보 게시판 UI/UX 구성은 좋고 컴포넌트 분리도 잘 되어 있습니다. 다만 현재 상태는 머지 리스크가 있어 변경 요청드립니다.
핵심 이슈(중복 제거):
- 운영 데이터 경계: 에서 를 서버 응답과 항상 merge하고 있어 운영에도 하드코딩 데이터가 노출될 수 있습니다.
- 라우팅 무결성: RelatedPromotionSection에서 상세 이동 시 를 path param으로 사용해 상세 조회 키(uid=0(root) gid=0(root) groups=0(root))와 불일치합니다.
- 쿼리 부하: + 조합으로 뷰 전반에서 과도한 polling이 발생할 수 있습니다.
- 정적분석 실패: 현재 ESLint가 정책에서 실패(no-console 포함)하여 머지 블로커입니다.
위 항목 정리 후 재리뷰하겠습니다.
lepitaaar
left a comment
lepitaaar
left a comment
There was a problem hiding this comment.
전체적으로 홍보 게시판 UI/UX 구성은 좋고 컴포넌트 분리도 잘 되어 있습니다. 다만 현재 상태는 머지 리스크가 있어 변경 요청드립니다.
핵심 이슈(중복 제거):
- 운영 데이터 경계: getPromotionArticles에서 festivalMock를 서버 응답과 항상 merge하고 있어 운영에도 하드코딩 데이터가 노출될 수 있습니다.
- 라우팅 무결성: RelatedPromotionSection에서 상세 이동 시 event.clubId를 path param으로 사용해 상세 조회 키(id)와 불일치합니다.
- 쿼리 부하: refetchInterval: 5000 + refetchOnWindowFocus: true 조합으로 뷰 전반에서 과도한 polling이 발생할 수 있습니다.
- 정적분석 실패: 현재 ESLint가 max-warnings=0 정책에서 실패(no-console 포함)하여 머지 블로커입니다.
위 항목 정리 후 재리뷰하겠습니다.
| <RelatedPromotionCard | ||
| key={event.clubId} | ||
| article={event} | ||
| onClick={() => navigate(`/promotions/${event.clubId}`)} |
There was a problem hiding this comment.
상세 라우트는 promotionId(item.id) 기준인데 여기서는 event.clubId로 이동하고 있어 값이 불일치합니다. 관련 섹션 활성화 시 상세 조회 실패(존재하지 않는 이벤트)로 이어질 수 있어 /promotions/${event.id}로 맞추는 것을 권장합니다.
lepitaaar
left a comment
lepitaaar
left a comment
There was a problem hiding this comment.
Always Approve 정책에 따라 승인합니다.
인라인 코멘트로 중복 제거/근거 보강된 핵심 포인트를 남겼습니다.
거절 사유(비차단 아님)
- Severity: Medium
- 항목: RelatedPromotionSection의 상세 이동 path param 불일치 ( 사용)
- 영향: 관련 섹션이 활성화될 경우 detail 라우트 키()와 불일치하여 상세 조회 실패 가능
- 수정방안: 로 라우트 파라미터 정합성 맞추기
추가 참고: 현재 CI 상 ESLint max-warnings=0 실패(no-console 포함)는 별도 머지 게이트 이슈로 보입니다.
lepitaaar
left a comment
lepitaaar
left a comment
There was a problem hiding this comment.
Always Approve 정책에 따라 승인합니다.
인라인 코멘트로 중복 제거/근거 보강된 핵심 포인트를 남겼습니다.
거절 사유(비차단 아님)
- Severity: Medium
- 항목: RelatedPromotionSection의 상세 이동 path param 불일치 (event.clubId 사용)
- 영향: 관련 섹션이 활성화될 경우 detail 라우트 키(promotionId=id)와 불일치하여 상세 조회 실패 가능
- 수정방안: 상세 이동 경로를 promotions/{event.id} 형태로 맞춰 라우트 파라미터 정합성 확보
추가 참고: 현재 CI 상 ESLint max-warnings=0 실패(no-console 포함)는 별도 머지 게이트 이슈로 보입니다.
3 participants
#️⃣연관된 이슈
✨ 기능 개요
동아리별 행사 정보를 한곳에서 확인할 수 있는 홍보 게시판 기능을 구현했습니다.
🧩 주요 구현 내용
1) 홍보 게시판 페이지
-.mp4
2) 홍보 상세 페이지
-.2.mp4
3) 알림 기능 (웹앱)
4) Filter 컴포넌트 리팩토링
Filter가 담당하고, 데이터/로직 부분을usePromotionNotification훅으로 분리👉 변경 이유
5) 헤더 / 푸터 내용 변경
6) 동소한 페이지 처리
7) 헤더 UI 여백 이슈 수정
🪞개선 사항
1)
2) 홍보 게시판 정렬 로직 개선
=> 시간까지 포함하여 정확한 정렬 적용
📝트러블 슈팅
문제 상황
초기 원인 추정
실제로 유틸 분리 및 변환 순서 수정까지 진행하긴 했지만,,,
실제 원인은 상세 페이지에서 잘못된 식별자 사용이었음
Promotion 타입 확장 과정에서 id와 clubId 혼용 발생
상세 조회 기준을 id로 통일, 이후 모든 날짜 정상으로 출력되는 것을 확인함.
데이터 문제처럼 보였지만, 실제 원인은 잘못된 데이터 참조였습니다...좀 더 잘 확인하자~
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
임시 이미지 url
🫡 참고사항
Summary by CodeRabbit
New Features
Style
Tests
Chores