🔗API & ✨Feat : 이벤트 페이지 api 연결 by KongMezu · Pull Request #123 · geulDa/FE

KongMezu · 2025-11-14T04:30:32Z

🔥 작업 내용

이벤트 페이지 api 연결

🤔 추후 작업 사항

마이페이지 - 저장한 행사 동기화
북마크 ui 동기화 확인
관련행사 ui 확인..

🔗 이슈

close #[api&feat] 행사페이지 api 연결 #114

PR Point (To Reviewer)

행사 페이지 api 연결

행사 페이지 & 저장한 행사 연결 완료했습니다.
상세 행사 페이지에서는 돌아가면 조회하던 날짜로 돌아가도록 해놨고
그외 관련 다음 행사 등 받아왔습니다. 작은 행사 카드 누르면 그 행사 상세 페이지로 넘어갑니다

다만.. 지금 영상보시면 압니다..
상세 페이지에서 북마크 UI를 반영하지 못합니다.. (마이페이지는 되는데)
그래서 이 부분 수정이 좀 필요해보이고 나머지는..정상 작동합니다.

📸 피그마 스크린샷 or 기능 GIF

-.Clipchamp.6.mp4

Summary by CodeRabbit

새로운 기능
- 행사 북마크 토글(로그인 유도 포함)과 북마크 상태 반영된 이벤트 카드
- 이벤트 목록/상세용 데이터 훅 및 서버 기반 이벤트/상세/북마크 API 연동
- 관련 행사 보완 로직(항목 부족 시 플레이스홀더 제공)
스타일
- 날짜 선택기 버튼/아이콘/색상 조정 및 이미지 접근성 개선(alt/플레이스홀더)
- 팝업·오버레이 z-인덱스 상향
리팩토링
- 정적 샘플 이벤트 제거 및 API 기반 렌더링 전환
- 이벤트 카드 공개 props 확장(eventId, liked, imageSrc 등)
기타
- 원격 이미지 로드 허용을 위한 이미지 설정 확장 (원격 호스트 추가)

…vent-api

vercel · 2025-11-14T04:30:38Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
af-fe	Ready	Preview	Comment	Nov 15, 2025 9:26am

coderabbitai · 2025-11-14T04:30:41Z

Walkthrough

이 PR은 이벤트 기능을 정적 데이터에서 API 기반 훅(조회·상세·북마크)과 타입·매퍼·유틸로 전환하고, EventCard에 북마크/로그인 흐름을 통합하며 Next.js 이미지 remotePatterns 및 일부 UI z-index를 조정합니다.

Changes

Cohort / File(s)	변경 사항
Next.js 이미지 설정 `next.config.ts`	`images.remotePatterns` 배열 추가(3개 호스트), `images.domains`에 `www.bucheon.go.kr`, `www.bcf.or.kr` 추가 및 포맷 조정
API 레이어 (events) `src/shared/api/events/event.ts`	이벤트 목록/상세/북마크 API 헬퍼 추가: `fetchEvents`, `fetchEventDetail`, `postBookmark`, `deleteBookmark`, `fetchBookmarkStatus` (per-item 상세 보강 포함)
React Query 훅 `src/shared/hooks/events/useEvents.ts`, `src/shared/hooks/events/useEventDetail.ts`, `src/shared/hooks/events/useBookmark.ts`	이벤트 목록/상세 조회 및 북마크 관리 훅 추가(쿼리키, 인증 분기, 캐시 무효화/재요청 포함)
타입·매퍼·유틸 `src/shared/types/eventtypes.ts`, `src/shared/hooks/events/EventMapper.ts`, `src/shared/utils/buildNextEventList.ts`	EventResponse/EventData/EventDetail 등 타입 추가, 응답→도메인 매핑 `mapEvent`, 관련 이벤트 리스트 길이 보정 유틸 `buildNextEventList` 추가
컴포넌트: EventCard `src/shared/components/container/EventCard.tsx`	props에 `eventId:number`, `liked?:boolean`, `onClick?:()` 추가. `useBookmark` 통합으로 북마크 토글·로그인 흐름과 카드 레이아웃·하트 토글 렌더링 변경
페이지 리팩토링: 이벤트 목록/상세 `src/pages/events/index.tsx`, `src/pages/events/[id].tsx`	정적 데이터 제거, `useEvents`/`useEventDetail` 훅으로 데이터 주입·로딩·에러·리다이렉트 로직 도입, EventCard에 `eventId`/`liked`/`imageSrc` 전달 및 날짜 쿼리 보존
페이지 리팩토링: 마이페이지 `src/pages/mypage/index.tsx`, `src/pages/mypage/events/[id].tsx`	북마크 이벤트 렌더링과 상세 페이지를 `useEventDetail` 기반으로 전환, EventCard prop 매핑 업데이트(imageSrc, liked 포함) 및 라우팅 동작 추가
정적 데이터 제거 `src/shared/constants/events/eventsData.ts`	기존 샘플 `EventData` 인터페이스와 `eventData` 상수 삭제
DatePicker / UI 조정 `src/shared/components/datePicker/DatePicker.tsx`	버튼 너비/색/아이콘 변경, 캘린더 날짜 비활성화 제약 주석 처리(제한 완화)
z-index 조정 `src/shared/components/set/PopupSet.tsx`, `src/shared/overlay/Overlay.tsx`	`PopupSet` z-index 50→100, `Overlay` z-index 40→99 변경
멤버 타입/쿼리 옵션 변경 `src/shared/types/membertypes.ts`, `src/shared/api/member.ts`	MyPage 응답 내 `bookmarkedEvents` 타입을 더 관대하게 변경, 일부 React Query `staleTime` 옵션 제거

Sequence Diagram(s)

sequenceDiagram
    autonumber
    participant User
    participant Page as "페이지 (목록/상세)"
    participant Hook as "useEvents / useEventDetail"
    participant RQ as "React Query"
    participant API as "Events API"
    participant BK as "useBookmark"

    User->>Page: 접근 (date 또는 eventId 포함)
    Page->>Hook: 요청 (date 또는 eventId)
    Hook->>RQ: useQuery 실행
    RQ->>API: fetchEvents / fetchEventDetail 호출
    API-->>RQ: 응답 반환
    RQ-->>Hook: 데이터 전달
    Hook-->>Page: 이벤트 데이터 제공
    Page->>Page: 렌더 (Image, EventCard, 관련 이벤트)

    alt 북마크 토글
        User->>Page: 북마크 클릭
        Page->>BK: toggleBookmark()
        BK->>API: postBookmark / deleteBookmark
        API-->>BK: 응답
        BK->>RQ: 캐시 무효화 ['events'], ['eventDetail', id], ['myPage']
        RQ->>API: 재요청
        API-->>RQ: 최신 응답
        RQ-->>Page: UI 업데이트
    end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45분

주의가 필요한 파일/영역:

src/shared/hooks/events/useBookmark.ts: 인증(토큰) 분기, 에러 처리, React Query 캐시 무효화/재요청 검증
src/shared/api/events/event.ts: fetchEvents 내 per-item enrichment 동시성·성능·오류 처리
src/shared/components/container/EventCard.tsx: props 변경과 로그인 모달 연동 영향 점검
src/pages/events/*, src/pages/mypage/*: 라우터 쿼리(date) 동기화·리다이렉트 조건·쿼리 활성화 타이밍

Possibly related issues

[api&feat] 행사페이지 api 연결 #114 — 이벤트 페이지를 백엔드 API로 연결하는 작업 목표와 직접적으로 일치

Possibly related PRs

✨Feat : 상세 행사 페이지 #85 — 이벤트 상세 페이지 구현(정적 → 데이터 연동)과 중복/연계 가능성 높음
✨Feat : 행사 페이지 작업 #79 — 기존 mock 기반 이벤트 구현을 대체하는 변경과 직접 연관
Feat&Api: 마이페이지 postcard get api #121 — next.config.ts 이미지 설정(remotePatterns/domains) 변경과 코드 레벨 겹침

Suggested labels

feat

Suggested reviewers

skyblue1232
jjangminii

Poem

🐇
깡충깡충 API 길을 건너서,
하트는 북마크로 반짝이고,
훅이 손잡아 데이터를 전하니,
카드들이 새 옷을 입었네요,
깡충 — 배포를 축하해요!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.
Description check	❓ Inconclusive	PR 설명이 필수 섹션 대부분을 포함하고 있으나, 🔗 이슈 섹션의 형식이 올바르지 않고 📸 스크린샷 섹션이 불완전합니다.	이슈 번호 형식을 수정하고(현재: #https://... → 수정: #114), 📸 섹션에 실제 스크린샷이나 GIF를 첨부하거나 링크를 명확히 표기해주세요. 또한 미완료된 추후 작업 사항들에 대한 명확한 설명을 추가해주세요.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목이 '이벤트 페이지 api 연결'이라는 주요 변경 사항을 명확하게 반영하고 있으며, 실제 변경 내용(API 연결, 훅 추가, 데이터 페칭 등)과 관련이 있습니다.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch api/#114/event-api

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 · 2025-11-14T04:30:43Z

🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message.
Please verify that they are correct before merging.

github-actions · 2025-11-14T04:32:25Z

🏷️ Labeler has automatically applied labels based on your PR title, branch name, or commit message.
Please verify that they are correct before merging.

coderabbitai

Actionable comments posted: 5

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/shared/components/container/LocationCard.tsx (1)
24-28: 사용되지 않는 상태 제거 필요

liked 상태와 handleLikeClick 핸들러가 정의되어 있지만 더 이상 렌더링된 요소와 연결되어 있지 않습니다(Lines 90-103의 아이콘이 주석 처리됨). 사용하지 않는 코드는 제거하는 것이 좋습니다.
-  const [liked, setLiked] = useState(false);
-
-  const handleLikeClick = () => {
-    setLiked((prev) => !prev);
-  };

🧹 Nitpick comments (11)

src/shared/components/set/PopupSet.tsx (1)
27-27: LGTM! Overlay와의 z-index 계층 구조가 올바릅니다

PopupSet(z-100)이 Overlay(z-99) 위에 렌더링되도록 z-index가 올바르게 조정되었습니다. 하지만 유지보수성을 위해 Overlay.tsx와 동일한 z-index 상수를 공유하는 것을 권장합니다.

예시:
// 공유 상수 파일에서
import { Z_INDEX } from '@/shared/constants/z-index';

// PopupSet에서 사용
className={cn(
  `fixed inset-0 z-[${Z_INDEX.POPUP}]`,
  'flex items-center justify-center',
)}
src/shared/overlay/Overlay.tsx (1)
12-12: z-index 구조 개선 및 상수화 권장

z-index가 99로 변경되어 PopupSet(z-100)보다 아래에 위치하는 것이 확인되었습니다. 다만 다음 사항을 개선하는 것을 권장합니다:

Header와 PopupSet 충돌: 두 컴포넌트 모두 z-[100]을 사용하고 있어, 같은 스택 컨텍스트에서 예기치 않은 레이어링 문제가 발생할 수 있습니다.

상수화 부재: 현재 z-index 값들이 여러 파일에 하드코딩되어 있습니다(src/shared/components/header/Header.tsx, src/shared/components/set/PopupSet.tsx, src/shared/components/set/LocationBubbleSet.tsx 등). 일관성 있는 관리를 위해 다음과 같이 상수 파일을 생성하기를 권장합니다:
// src/shared/constants/zIndex.ts
export const Z_INDEX = {
  OVERLAY: 99,
  POPUP: 100,
  HEADER: 101,
  CONTROL_BAR: 50,
  LOCATION_BUBBLE: 50,
} as const;
이후 각 컴포넌트에서 하드코딩된 값 대신 상수를 참조하도록 업데이트하세요.
src/shared/components/container/LocationCard.tsx (1)

90-103: 북마크 기능 통합 고려 필요

하트 아이콘이 주석 처리되어 있습니다. PR의 다른 변경사항을 보면 EventCard에서 useBookmark 훅을 사용하여 북마크 기능을 구현하고 있는데, LocationCard에도 동일한 패턴을 적용하는 것을 고려해보세요. PR 설명의 "북마크 UI 동기화 확인 (todo)"와 관련이 있는 것으로 보입니다.

EventCard와 동일한 방식으로 북마크 기능을 통합하는 코드를 생성해드릴까요?
src/shared/hooks/events/useEventDetail.ts (1)
10-13: 에러 처리 추가 권장

API 호출 실패 시 더 나은 사용자 경험을 위해 에러 처리를 추가하는 것을 고려해보세요.
const fetchEventDetail = async (eventId: number): Promise<EventDetail> => {
  try {
    const res = await apiWithToken.get<EventDetailResponse>(`/api/events/${eventId}`);
    return res.data.data;
  } catch (error) {
    console.error('Failed to fetch event detail:', error);
    throw error;
  }
};
src/shared/hooks/events/useEvents.ts (1)
12-12: Non-null assertion 사용

Line 12에서 formattedDate!에 non-null assertion을 사용하고 있습니다. enabled: !!formattedDate 가드 덕분에 안전하지만, 더 명시적인 타입 체크를 선호한다면 다음과 같이 수정할 수 있습니다.
  const { data, isLoading, isError } = useQuery({
    queryKey: ['events', formattedDate],
-   queryFn: () => fetchEvents(formattedDate!),
+   queryFn: () => formattedDate ? fetchEvents(formattedDate) : Promise.resolve({ data: [] }),
    enabled: !!formattedDate,
  });
next.config.ts (1)
19-26: domains 설정을 remotePatterns로 마이그레이션 권장

Next.js 14부터 domains 옵션이 deprecated되었으며, remotePatterns는 protocol, hostname, port, path를 모두 제한할 수 있어 더 안전합니다. 일관성과 보안을 위해 모든 이미지 도메인을 remotePatterns로 마이그레이션하세요.
  images: {
-  domains: ['maps.googleapis.com'],
   remotePatterns: [
+    { protocol: 'https', hostname: 'maps.googleapis.com' },
     { protocol: 'https', hostname: 'mblogthumb-phinf.pstatic.net' },
     { protocol: 'https', hostname: 'blogfiles.pstatic.net' },
     { protocol: 'https', hostname: 'postfiles.pstatic.net' },
   ],
 },
src/shared/types/eventtypes.ts (1)

1-40: EventResponse ↔ EventData 필드 네이밍/필수 여부 정합성 확인 제안

EventResponse와 EventData 사이에 아래와 같이 의미가 같은데 이름/필수 여부가 다른 필드들이 있습니다 (Line 1–21):

title ↔ name

body ↔ description

isBookmarked? ↔ liked (필수)

address?, startDate?, endDate? ↔ address, startDate, endDate (필수)

매핑 유틸(예: mapEvent)에서 이 차이를 모두 의도적으로 처리하고 있는지 한 번만 더 확인해 주세요. 특히 API에서 필드가 누락될 수 있는 경우(주소/날짜/북마크 여부 등)에 프론트에서 안전하게 기본값을 넣고 있는지 체크해 두면 추후 런타임 에러를 줄일 수 있습니다.

src/pages/events/index.tsx (1)

38-48: DatePicker 접근성: label 연동 여부 확인 필요

Line 40–47에서 SR-only <label htmlFor='event-date'>를 두고 있는데, DatePicker에는 id나 inputId 같은 prop이 전달되지 않고 있습니다. DatePicker 내부에서 실제 <input>의 id가 'event-date'로 설정되지 않는다면 이 라벨은 스크린 리더와 연동되지 않습니다.

DatePicker가 id를 받도록 되어 있다면 이 페이지에서 id='event-date'를 넘겨 주세요.

그렇지 않다면 aria-labelledby 또는 aria-label만으로 처리하는 쪽으로 구조를 정리하는 것이 좋습니다.

접근성 보장을 위해 한 번 확인 부탁드립니다.
src/shared/hooks/events/useBookmark.ts (1)
1-36: 북마크 훅 상태 동기화 및 클라이언트 지시어 관련 제안

Line 1의 'use client'는 이 훅이 App Router 서버 컴포넌트에서 직접 import되는 상황이 아니라면 필요 없습니다. 현재 프로젝트가 Pages Router 기반이라면 제거해도 무방해 보입니다.

Line 8–10에서 initialState로 isBookmarked를 초기화하지만, 부모에서 내려주는 liked 값이 나중에 바뀌어도 내부 상태는 한 번 정해지면 그대로 유지됩니다. 동일 이벤트를 다른 화면에서 토글했을 때, 새로고침 없이 이 컴포넌트가 다시 마운트되지 않는다면 서버 상태와 UI 사이에 불일치가 생길 수 있습니다.

예를 들어 아래처럼 initialState 변경 시 동기화하는 useEffect를 추가하는 방식을 고려해 볼 수 있습니다.
useEffect(() => {
  setIsBookmarked(initialState);
}, [initialState]);
Line 28–29에서 React Query의 invalidateQueries로 ['events'], ['eventDetail', eventId]를 무효화하는 접근은 useEvents/useEventDetail 쿼리 키 구성과 잘 맞아 보입니다. 다만, 토글 실패 시 사용자에게 피드백이 없는 상태라 필요하다면 후속 작업(TODO) 정도는 남겨 두어도 좋겠습니다.
src/pages/events/[id].tsx (1)

31-39: 헤더 타이틀 및 로딩/에러 상태 UX 개선 제안

Line 35–37에서 Header의 title을 항상 '행사명'으로 넘기고 있습니다. 이미 Line 28–29에서 title을 구조 분해하고 있으므로, 실제 행사명을 보여주려면 title={title}로 사용하는 편이 자연스러울 것 같습니다.

현재는 if (!eventId) return null; 및 if (isError || !eventDetail) return null;로 인해 로딩/에러 상황에서 화면에 아무것도 렌더링되지 않습니다. 이미 useEffect로 /events로 리다이렉트는 하고 있지만, 네트워크가 느린 경우 사용자는 빈 화면만 잠깐 보게 됩니다.
간단한 로딩 스피너나 “행사 정보를 불러오는 중입니다” 정도의 텍스트를 추가해 주면 UX가 조금 더 좋아질 것 같습니다.

Also applies to: 79-97

src/shared/api/events/event.ts (1)

14-25: 목록 조회 시 이벤트별 상세 API N+1 호출로 인한 성능 이슈 가능성

현재 fetchEvents에서 res.data.data의 각 아이템마다 /api/events/{eventId}를 다시 호출하고 있어, 이벤트 수가 많을 때 N+1 패턴으로 네트워크 부하가 커질 수 있습니다. 필요한 imageUrl, isBookmarked를 목록 API에서 함께 내려받거나, 서버에 배치/요약용 엔드포인트를 추가하는 방향도 한 번 고려해 보시면 좋겠습니다.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 81659e0 and 389e160.

📒 Files selected for processing (17)

next.config.ts (1 hunks)
src/pages/events/[id].tsx (2 hunks)
src/pages/events/index.tsx (2 hunks)
src/shared/api/events/event.ts (1 hunks)
src/shared/api/instance.ts (1 hunks)
src/shared/components/container/EventCard.tsx (2 hunks)
src/shared/components/container/LocationCard.tsx (2 hunks)
src/shared/components/datePicker/DatePicker.tsx (3 hunks)
src/shared/components/set/PopupSet.tsx (1 hunks)
src/shared/constants/events/eventsData.ts (0 hunks)
src/shared/hooks/events/EventMapper.ts (1 hunks)
src/shared/hooks/events/useBookmark.ts (1 hunks)
src/shared/hooks/events/useEventDetail.ts (1 hunks)
src/shared/hooks/events/useEvents.ts (1 hunks)
src/shared/overlay/Overlay.tsx (1 hunks)
src/shared/types/eventtypes.ts (1 hunks)
src/shared/utils/buildNextEventList.ts (1 hunks)

💤 Files with no reviewable changes (1)

src/shared/constants/events/eventsData.ts

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-10-31T17:34:04.352Z

Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.

Applied to files:

src/pages/events/index.tsx
src/pages/events/[id].tsx

🧬 Code graph analysis (11)

src/shared/utils/buildNextEventList.ts (1)

src/shared/types/eventtypes.ts (1)

RelatedEvent (23-27)

src/shared/components/container/EventCard.tsx (5)

src/shared/hooks/events/useBookmark.ts (1)

useBookmark (8-36)

src/pages/mypage/components/LoginRequired.tsx (1)

LoginRequired (10-21)

src/shared/components/container/Card.tsx (1)

Card (32-48)

src/shared/lib/utils.ts (1)

cn (71-73)

src/shared/icons/components/icon.tsx (1)

Icon (58-130)

src/shared/api/instance.ts (1)

src/pages/auth/callback.tsx (2)

res (19-35)

AuthCallbackPage (7-41)

src/shared/hooks/events/useBookmark.ts (2)

src/shared/utils/token.ts (1)

getAccessToken (8-9)

src/shared/api/events/event.ts (2)

deleteBookmark (54-59)

postBookmark (46-51)

src/shared/components/datePicker/DatePicker.tsx (1)

src/shared/icons/components/icon.tsx (1)

Icon (58-130)

src/shared/hooks/events/useEventDetail.ts (3)

src/shared/api/events/event.ts (1)

fetchEventDetail (34-43)

src/shared/types/eventtypes.ts (2)

EventDetail (37-40)

EventDetailResponse (29-35)

src/shared/api/instance.ts (1)

apiAuth (20-23)

src/shared/api/events/event.ts (4)

src/shared/types/authtypes.ts (1)

ApiResponse (1-6)

src/shared/types/eventtypes.ts (2)

EventData (12-21)

EventResponse (1-11)

src/shared/api/instance.ts (1)

apiWithToken (14-17)

src/shared/hooks/events/EventMapper.ts (1)

mapEvent (3-12)

src/pages/events/index.tsx (1)

src/shared/hooks/events/useEvents.ts (1)

useEvents (7-21)

src/shared/hooks/events/useEvents.ts (2)

src/shared/utils/date.ts (1)

formatDateToISO (1-6)

src/shared/api/events/event.ts (1)

fetchEvents (7-31)

src/shared/hooks/events/EventMapper.ts (1)

src/shared/types/eventtypes.ts (2)

EventResponse (1-11)

EventData (12-21)

src/pages/events/[id].tsx (4)

src/shared/hooks/events/useEventDetail.ts (1)

useEventDetail (15-21)

src/shared/utils/buildNextEventList.ts (1)

buildNextEventList (3-11)

src/shared/lib/utils.ts (1)

cn (71-73)

src/pages/events/components/DateTag.tsx (1)

DateTag (24-44)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build-and-deploy

🔇 Additional comments (8)

src/shared/api/instance.ts (1)

95-95: 인증 실패 시 리다이렉트 경로 변경 확인됨

토큰 갱신 실패 시 /auth로 리다이렉트하도록 변경한 것이 auth callback 페이지의 에러 처리와 일치합니다.

src/shared/components/datePicker/DatePicker.tsx (2)

14-14: 접근성 개선

ariaLabel prop 추가로 접근성이 향상되었습니다.

88-89: 과거 날짜 선택 가능 여부 확인 필요

날짜 제한(disabled, fromDate)이 주석 처리되어 이제 과거 날짜 선택이 가능합니다. 이벤트 검색 시나리오에서 과거 이벤트 조회가 필요한 경우라면 의도된 변경이지만, 그렇지 않다면 제한을 유지하는 것이 좋습니다.

src/shared/hooks/events/EventMapper.ts (1)

3-12: LGTM!

EventResponse를 EventData로 변환하는 깔끔한 매핑 함수입니다. nullish coalescing을 사용한 기본값 처리도 적절합니다.

src/pages/events/index.tsx (1)

1-4: Pages Router 환경에서 'use client' 및 초기 상태 UX 점검 제안

Line 1의 'use client'는 Next.js Pages Router 페이지에서는 의미가 없고, 기존 학습 컨텍스트(이 프로젝트는 Pages Router에서 use client를 사용하지 않음)와도 맞지 않는 것 같습니다. 제거해도 동작에는 영향이 없으니, 컨벤션에 맞게 정리하는 것을 추천드립니다.

Line 18–20에서 const filteredEvents = events;로 별도 변수만 두고 있어 추가 필터링이 없다면 바로 events를 사용하는 편이 간결합니다.

현재 로직에서는 날짜를 아직 선택하지 않은 첫 진입 시에도 events가 빈 배열이라 곧바로 “행사가 없어요!” 빈 상태 UI(Line 81–95)가 표시됩니다. UX 상 “날짜를 먼저 선택해 주세요”와 같은 안내를 보여주거나, 날짜가 선택되었을 때만 빈 상태를 보여주는 조건(date 존재 여부)을 추가할지 한 번 고려해 보셔도 좋겠습니다.

Also applies to: 13-21
src/pages/events/[id].tsx (2)
55-77: 이미지 fallback 버그 및 관련 행사 아이템 타입 안전성
이미지 fallback에서 정의되지 않은 변수 사용
Line 71–75에서:
aria-label={`${name} 이미지가 제공되지 않습니다.`}
를 사용하고 있는데, 이 스코프에는 name 변수가 없습니다. TypeScript 기준으로는 컴파일 에러, JS 기준으로는 ReferenceError가 발생합니다. title을 사용하려던 의도로 보이므로 아래와 같이 수정해야 할 것 같습니다.
aria-label={${name} 이미지가 제공되지 않습니다.}
aria-label={${title} 이미지가 제공되지 않습니다.}
nextList 아이템의 isEmpty 프로퍼티 사용
Line 104–121에서 nextList.map 내부에서 item.isEmpty로 분기하고 있습니다. buildNextEventList 구현을 보면 실제 이벤트(RelatedEvent)와 { isEmpty: true }를 섞어서 반환하고 있기 때문에, 타입 상으로는 RelatedEvent | { isEmpty: boolean } 유니온이 됩니다.
현재처럼 단순히 item.isEmpty에 접근하면 TypeScript에서는 "Property 'isEmpty' does not exist on type 'RelatedEvent'" 에러가 날 수 있습니다.
타입을 아래처럼 정리하면 더 안전합니다.
type NextEventItem = RelatedEvent & { isEmpty?: boolean };

export const buildNextEventList = (nextEvents: RelatedEvent[]): NextEventItem[] => {
  const MAX = 2;
  if (nextEvents.length >= MAX) return nextEvents.slice(0, MAX);
  const emptyItems: NextEventItem[] = Array(MAX - nextEvents.length).fill({ isEmpty: true } as NextEventItem);
  return [...nextEvents, ...emptyItems];
};
그리고 사용처에서는 item.isEmpty를 그대로 쓰는 현재 코드가 타입 상으로도 안전해집니다.
Also applies to: 87-122

1-3: 데이터 페치/리다이렉트 로직 및 'use client' 사용 점검
Line 1의 'use client'는 이 파일이 Pages Router의 페이지 컴포넌트인 점을 고려하면 실질적인 효과가 없습니다. 기존 학습 내용(이 레포에서는 Pages Router에서 use client를 사용하지 않음)을 따르려면 제거하는 편이 일관될 것 같습니다.
Line 16–18에서 eventId = Number(id)로 변환한 뒤 useEventDetail(eventId)를 호출하고 있습니다. useEventDetail 내부 구현 상 fetchEventDetail이 API 래퍼 전체({ success, code, message, data, timestamp })를 반환하는지, 아니면 data만 반환하는지에 따라 Line 28–29의 구조 분해:
const { title, body, address, startDate, endDate, imageUrl, nextEvents } =
  eventDetail;
가 정상 동작할 수도 있고, 전부 undefined가 될 수도 있습니다. useEvents에서 data?.data || []를 쓰는 패턴을 보면 fetchEventDetail도 유사한 래퍼를 쓸 가능성이 높으므로, 이 부분은 실제 반환 타입을 한 번 더 확인해 주세요 (eventDetail.data에서 구조 분해해야 할 수도 있습니다).
Line 19–23의 useEffect에서 !isLoading && (isError || !eventDetail)이면 /events로 replace하는데, eventId가 숫자로 제대로 파싱되지 못한 경우(NaN)에도 enabled: !!eventId 때문에 쿼리가 비활성화되고, 그 결과 eventDetail이 항상 undefined라 곧바로 리스트 페이지로 튕길 수 있습니다.
필요하다면 id가 유효한 정수인지 먼저 검증한 뒤(if (!id || Array.isArray(id) || Number.isNaN(eventId))) 리다이렉트를 수행하는 방식을 고려해 보셔도 좋겠습니다.
Also applies to: 8-27
src/shared/api/events/event.ts (1)

45-67: 북마크 관련 API 래퍼 구현은 명확하고 일관적입니다

postBookmark, deleteBookmark, fetchBookmarkStatus 모두 REST 경로와 HTTP 메서드가 직관적으로 잘 매핑되어 있고, 반환 타입도 ApiResponse로 통일되어 있어 사용성이 좋아 보입니다.

coderabbitai · 2025-11-14T04:37:57Z

src/shared/api/events/event.ts

+export const fetchEventDetail = async (
+  eventId: number,
+): Promise<ApiResponse<EventData>> => {
+  const res = await apiWithToken.get(`/api/events/${eventId}`);
+
+  return {
+    ...res.data,
+    data: res.data.data,
+  };


⚠️ Potential issue | 🟠 Major

행사 상세 응답을 EventData로 매핑하지 않아 타입/필드 불일치 가능성

EventResponse와 EventData 타입 정의를 보면 목록 조회에서는 mapEvent로 필드명을 변환하지만, 상세 조회에서는 res.data.data를 그대로 EventData로 반환하고 있습니다. 백엔드에서 이미 EventData 모양으로 내려주지 않는다면, 상세 화면에서 id, name 등의 필드를 기대할 때 eventId, title만 존재해 깨질 수 있습니다.

아래처럼 상세 응답도 mapEvent를 거치도록 수정하는 쪽이 더 안전해 보입니다.

export const fetchEventDetail = async ( eventId: number, ): Promise<ApiResponse<EventData>> => { const res = await apiWithToken.get(`/api/events/${eventId}`); return { - ...res.data, - data: res.data.data, + ...res.data, + data: mapEvent(res.data.data as EventResponse), }; };

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

export const fetchEventDetail = async (

eventId: number,

): Promise<ApiResponse<EventData>> => {

const res = await apiWithToken.get(`/api/events/${eventId}`);

return {

...res.data,

data: res.data.data,

};

export const fetchEventDetail = async (

eventId: number,

): Promise<ApiResponse<EventData>> => {

const res = await apiWithToken.get(`/api/events/${eventId}`);

return {

...res.data,

data: mapEvent(res.data.data as EventResponse),

};

};

🤖 Prompt for AI Agents

In src/shared/api/events/event.ts around lines 34 to 42, the event detail response returns res.data.data directly which can mismatch EventData fields; update the function to map the returned event through mapEvent before returning (i.e., import mapEvent if missing and replace data: res.data.data with data: mapEvent(res.data.data)) so the detail response has the same normalized shape as the list endpoint.

coderabbitai · 2025-11-14T04:37:57Z

src/shared/components/container/EventCard.tsx

 const EventCard = ({
+  eventId,
  name,
  address,
  description,
  variant = 'gray',
  size = 'medium',
  imageSrc = '',
+   liked = false,
 }: EventCardProps) => {
-  const [liked, setLiked] = useState(false);
+  const { isBookmarked, toggleBookmark, requireLogin, setRequireLogin } =
+    useBookmark(eventId, liked);
+
+


⚠️ Potential issue | 🟠 Major

북마크 버튼 접근성(a11y) 보완 필요

중간/대형 카드에서 하트 아이콘 버튼(Line 104–123, 150–169)은 시각적으로는 명확하지만, <button> 안에 텍스트가 없고 aria-label도 없어 스크린 리더에서는 단순히 “버튼”으로만 읽힐 가능성이 높습니다. 현재 Icon 컴포넌트 기본값이 ariaHidden인 점을 고려하면 이름 없는 버튼이 됩니다.

버튼에 aria-label을 부여하거나,

혹은 버튼 내부에 sr-only 텍스트(북마크 추가, 북마크 해제 등)를 추가해 의미를 전달하는 것을 권장합니다.

예시:

<button className="cursor-pointer p-1" onClick={(e) => { e.stopPropagation(); toggleBookmark(); }} aria-label={isBookmarked ? '북마크 해제' : '북마크 추가'} > <Icon name="HeartStraight" size={20} color={isBookmarked ? 'red-400' : variant === 'mint' ? 'mint-400' : 'gray-300'} fillColor={isBookmarked ? 'red-300' : undefined} /> </button>

또한 동일한 하트 버튼 로직이 medium/large 카드에 중복되어 있으므로, 소규모라도 재사용 가능한 BookmarkButton 서브컴포넌트로 분리하면 유지보수가 더 쉬워질 것 같습니다.

Also applies to: 48-124, 137-180

🤖 Prompt for AI Agents

In src/shared/components/container/EventCard.tsx around lines 22 to 35 (and apply same changes at 48-124, 137-180), the heart bookmark buttons lack accessible names because the Icon is aria-hidden and the button has no aria-label or visible text; update the button to include an appropriate aria-label that reflects state (e.g., aria-label={isBookmarked ? '북마크 해제' : '북마크 추가'}) or add an sr-only text node inside the button, preserve existing onClick behavior (stopPropagation then toggleBookmark), and refactor the duplicated bookmark button markup into a small reusable BookmarkButton subcomponent that accepts isBookmarked, onToggle, variant props and handles aria-label/sr-only and styling so both medium and large card variants use the same accessible implementation.

src/shared/hooks/events/useEventDetail.ts

coderabbitai · 2025-11-14T04:37:58Z

src/shared/hooks/events/useEvents.ts

+export const useEvents = (date?: Date) => {
+  const formattedDate = formatDateToISO(date);
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['events', formattedDate],
+    queryFn: () => fetchEvents(formattedDate!),
+    enabled: !!formattedDate,
+  });
+
+  return {
+    events: data?.data || [],
+    isLoading,
+    isError,
+  };
+};


⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

fetchEvents의 N+1 쿼리 문제 확인 필요

관련 코드(src/shared/api/events/event.ts)를 보면 fetchEvents가 각 이벤트마다 개별적으로 상세 정보를 요청하고 있습니다(Lines 13-16). 이는 N+1 쿼리 문제를 야기하여 성능 저하를 일으킬 수 있습니다.

백엔드 API를 수정하여 이벤트 목록 조회 시 필요한 모든 정보(imageUrl, isBookmarked 포함)를 한 번에 반환하도록 하는 것이 좋습니다. 또는 GraphQL이나 배치 API를 사용하는 것을 고려해보세요.

다음 스크립트로 fetchEvents의 구현을 확인할 수 있습니다:

🏁 Script executed:

#!/bin/bash # fetchEvents 구현 확인 rg -A 20 "export const fetchEvents" --type ts

Length of output: 1201

fetchEvents에서 N+1 쿼리 문제 확인됨

확인된 바와 같이 src/shared/api/events/event.ts의 fetchEvents 함수는 이벤트 목록을 조회한 후, 각 이벤트마다 상세 정보(imageUrl, isBookmarked)를 개별적으로 요청하고 있습니다. 이는 N개의 이벤트가 있을 때 총 N+1개의 API 호출을 발생시키는 성능 문제입니다.

백엔드 API를 수정하여 초기 이벤트 목록 조회 응답에 필요한 모든 정보를 포함하거나, 배치 조회 엔드포인트를 제공하는 것을 권장합니다.

🤖 Prompt for AI Agents

In src/shared/hooks/events/useEvents.ts around lines 7-21, useQuery currently calls fetchEvents which (per review) issues per-event detail requests causing an N+1 API call problem; fix this by changing fetchEvents (src/shared/api/events/event.ts) to return all required fields in one network call (either by adding an includeDetails flag to the events endpoint or by introducing a batch-details endpoint that accepts an array of event IDs), update the queryFn here to call that new/updated fetchEvents signature (passing formattedDate and the include/details flag or performing a single batch-details request inside fetchEvents), and ensure the returned data structure already contains imageUrl and isBookmarked so useEvents no longer triggers per-event requests.

src/shared/utils/buildNextEventList.ts

coderabbitai

Actionable comments posted: 1

♻️ Duplicate comments (1)

src/pages/mypage/postcard/[id].tsx (1)
3-5: 엽서 상세 페이지가 플레이스홀더로 대체되었습니다.

PostcardPage 컴포넌트가 플레이스홀더 텍스트만 렌더링하여 /mypage/postcard/[id] 라우트가 제대로 작동하지 않습니다. 이전 리뷰에서도 지적된 것처럼, 다음 중 하나를 권장합니다:

정민님의 구현을 받기 전까지 이 파일 변경사항을 PR에서 제외

임시로 "준비중" 메시지를 보여주는 적절한 UI 컴포넌트 구현

해당 라우트로의 접근을 막는 로직 추가

임시 구현 예시:
 export default function PostcardPage() {
-  return <div>정민이거 받아오기</div>;
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <p className="text-gray-500">준비중입니다.</p>
+    </div>
+  );
 }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e730c25 and b2de4d1.

📒 Files selected for processing (1)

src/pages/mypage/postcard/[id].tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-10-31T17:34:04.352Z

Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.

Applied to files:

src/pages/mypage/postcard/[id].tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build-and-deploy

src/pages/mypage/postcard/[id].tsx

…vent-api

coderabbitai

Actionable comments posted: 6

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/pages/events/index.tsx (1)
1-1: Pages Router에서는 'use client' 지시자가 불필요합니다.

프로젝트가 Next.js Pages Router를 사용하고 있으므로 'use client' 지시자를 제거해야 합니다.

Based on learnings
-'use client';
-
 import { useState } from 'react';

♻️ Duplicate comments (1)

src/shared/api/events/event.ts (1)
41-50: 이전 리뷰 지적사항: fetchEventDetail에서 mapEvent를 사용하지 않아 타입 불일치 가능성이 있습니다.

fetchEventDetail이 EventData를 반환하도록 선언되어 있지만 mapEvent를 사용하지 않고 있습니다. 백엔드가 EventData 형식을 직접 반환하지 않는다면, eventId/title 같은 필드가 id/name으로 변환되지 않아 타입 불일치가 발생할 수 있습니다.
 export const fetchEventDetail = async (
   eventId: number,
 ): Promise<ApiResponse<EventData>> => {
   const res = await apiWithToken.get(`/api/events/${eventId}`);
 
   return {
     ...res.data,
-    data: res.data.data,
+    data: mapEvent(res.data.data as EventResponse),
   };
 };

🧹 Nitpick comments (2)

src/shared/hooks/events/useBookmark.ts (1)
13-15: 불필요한 useEffect를 제거하세요.

useState(initialState)가 이미 초기값을 설정하므로, useEffect로 다시 동기화하는 것은 중복입니다. initialState가 변경되는 경우에만 필요하지만, 일반적으로 props가 변경되면 컴포넌트가 재마운트됩니다.
-  useEffect(() => {
-    setIsBookmarked(initialState);
-  }, [initialState]);
src/pages/events/index.tsx (1)
21-21: 불필요한 변수 할당을 제거하세요.

filteredEvents가 단순히 events를 참조하고 있으며 실제 필터링 로직이 없습니다. 직접 events를 사용하거나 향후 필터링 로직을 추가할 예정이라면 TODO 주석을 남기세요.
-  const filteredEvents = events;
그리고 아래에서 events를 직접 사용:
-        {filteredEvents.length > 0 ? (
+        {events.length > 0 ? (
           <section
             aria-label='이벤트 목록'
             className={cn(
               'grid w-full mt-[1.4rem]',
               'grid-cols-2 gap-x-[1.4rem] gap-y-[1.4rem]',
             )}
           >
-             {filteredEvents.map((event: EventData) => (
+             {events.map((event: EventData) => (

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b2de4d1 and 6098283.

📒 Files selected for processing (8)

next.config.ts (1 hunks)
src/pages/events/[id].tsx (2 hunks)
src/pages/events/index.tsx (2 hunks)
src/shared/api/events/event.ts (1 hunks)
src/shared/hooks/events/EventMapper.ts (1 hunks)
src/shared/hooks/events/useBookmark.ts (1 hunks)
src/shared/types/eventtypes.ts (1 hunks)
src/shared/utils/buildNextEventList.ts (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (3)

src/shared/hooks/events/EventMapper.ts
next.config.ts
src/shared/utils/buildNextEventList.ts

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-10-31T17:34:04.352Z

Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.

Applied to files:

src/pages/events/index.tsx
src/pages/events/[id].tsx

🧬 Code graph analysis (4)

src/shared/hooks/events/useBookmark.ts (2)

src/shared/utils/token.ts (1)

getAccessToken (8-9)

src/shared/api/events/event.ts (2)

deleteBookmark (61-66)

postBookmark (53-58)

src/pages/events/index.tsx (3)

src/shared/hooks/events/useEvents.ts (1)

useEvents (7-21)

src/shared/components/datePicker/DatePicker.tsx (1)

DatePicker (17-97)

src/shared/types/eventtypes.ts (1)

EventData (12-21)

src/pages/events/[id].tsx (4)

src/shared/types/eventtypes.ts (1)

RelatedEventOrEmpty (42-42)

src/shared/hooks/events/useEventDetail.ts (1)

useEventDetail (15-21)

src/shared/utils/buildNextEventList.ts (1)

buildNextEventList (5-17)

src/pages/events/components/DateTag.tsx (1)

DateTag (24-44)

src/shared/api/events/event.ts (3)

src/shared/types/authtypes.ts (1)

ApiResponse (1-6)

src/shared/types/eventtypes.ts (2)

EventData (12-21)

EventResponse (1-11)

src/shared/api/instance.ts (1)

apiWithToken (14-17)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build-and-deploy

🔇 Additional comments (2)

src/shared/api/events/event.ts (1)

4-4: mapEvent를 import했지만 fetchEventDetail에서 사용하지 않습니다.

mapEvent를 import했지만 fetchEventDetail 함수에서는 사용하지 않고 있습니다. 위의 fetchEventDetail 수정사항을 적용하면 이 import가 활용됩니다.

src/shared/types/eventtypes.ts (1)

1-42: 타입 정의와 매핑 구현이 올바르게 되어 있습니다.

검증 결과, mapEvent 함수가 EventResponse의 optional 필드들을 EventData의 required 필드들로 정확하게 변환하고 있습니다:

address, startDate, endDate: 빈 문자열 기본값으로 안전하게 처리

imageSrc: thumbnailUrl을 우선으로, 없을 경우 imageUrl 사용 (명확한 폴백 로직)

liked: false 기본값으로 일관성 있게 처리

타입 구조와 구현 로직이 일관성 있고 안전합니다. 추가 수정이 필요하지 않습니다.

src/pages/events/[id].tsx

coderabbitai · 2025-11-15T06:17:18Z

src/pages/events/[id].tsx

+                    imageSrc={item.imageUrl}
+                    variant="gray"
+                    size="small"
+                    liked={false}


⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

관련 행사의 북마크 상태 확인이 필요합니다.

관련 행사의 liked 속성이 false로 하드코딩되어 있습니다. PR 목표에 "북마크 UI 동기화 확인 (todo)"가 언급되어 있으므로, 추후 작업으로 실제 북마크 상태를 반영해야 합니다.

현재 RelatedEvent 타입에 isBookmarked 필드가 없는지 확인하세요:

🏁 Script executed:

#!/bin/bash # RelatedEvent 타입 정의 확인 ast-grep --pattern $'interface RelatedEvent { $$$ }'

Length of output: 259

🏁 Script executed:

#!/bin/bash # Check the actual code context around line 123 in [id].tsx sed -n '115,130p' src/pages/events/[id].tsx

Length of output: 445

🏁 Script executed:

#!/bin/bash # Search for RelatedEvent component usage and bookmark-related props rg -n "liked\s*=" src/pages/events/[id].tsx -A 2 -B 2

Length of output: 313

🏁 Script executed:

#!/bin/bash # Check if there's an Event type with bookmark state that should be mapped to RelatedEvent rg -n "interface Event|type Event" src/shared/types/ -A 10

Length of output: 1937

RelatedEvent 타입에 isBookmarked 필드를 추가해야 합니다.

검증 결과:

RelatedEvent 인터페이스에 isBookmarked 필드가 실제로 없음 (src/shared/types/eventtypes.ts:23-27)

메인 행사는 eventDetail.isBookmarked로 올바르게 처리 (line 100)

관련 행사는 liked={false}로 하드코딩됨 (line 123)

필요한 작업:

src/shared/types/eventtypes.ts의 RelatedEvent 인터페이스에 isBookmarked?: boolean 필드 추가

API 응답에서 관련 행사의 북마크 상태 데이터 포함 확인

src/pages/events/[id].tsx:123의 liked={false}를 liked={item.isBookmarked ?? false}로 변경

이는 PR 목표인 "북마크 UI 동기화 확인 (todo)"를 완료하는 데 필수입니다.

🤖 Prompt for AI Agents

In src/pages/events/[id].tsx around line 123 and src/shared/types/eventtypes.ts around lines 23-27: RelatedEvent is missing an isBookmarked field and the related-event component is hardcoding liked to false; add an optional boolean isBookmarked? field to the RelatedEvent interface in src/shared/types/eventtypes.ts, ensure the API response for related events includes the bookmark state (update backend/serialization or mapper as needed), and replace the hardcoded liked={false} in src/pages/events/[id].tsx with a prop that uses the related item’s isBookmarked value with a safe fallback (use item.isBookmarked if present, otherwise false).

coderabbitai · 2025-11-15T06:17:18Z

src/shared/api/events/event.ts

+  const mapped = await Promise.all(
+    res.data.data.map(async (item: EventResponse) => {
+    const detail = await apiWithToken.get(`/api/events/${item.eventId}`);
+      const detailData = detail.data.data;
+
+      return {
+        id: item.eventId,
+        name: item.title,
+        description: item.body,
+        address: item.address ?? '',
+        startDate: item.startDate ?? '',
+        endDate: item.endDate ?? '',
+        imageSrc: detailData.imageUrl ?? '', 
+        liked: item.isBookmarked ?? false, 
+      } satisfies EventData;
+    }),
+  );


⚠️ Potential issue | 🔴 Critical

심각한 N+1 쿼리 문제가 발생합니다.

각 이벤트마다 개별적으로 상세 정보를 가져오기 위해 추가 API 호출을 수행합니다. 이벤트가 N개라면 총 N+1번의 API 호출이 발생하여 심각한 성능 저하를 초래합니다.

예시: 이벤트 50개 → 51번의 API 호출 (1번 목록 + 50번 상세)

백엔드 팀과 협의하여 다음 중 하나를 구현하세요:

목록 API 응답에 imageUrl과 isBookmarked 포함

일괄 상세 조회 API 추가 (예: POST /api/events/batch)

GraphQL 또는 필드 선택 쿼리 파라미터 지원

임시 해결책으로 클라이언트 측 캐싱이나 배치 요청을 고려할 수 있지만, 근본적인 해결은 백엔드 API 개선이 필요합니다.

// 임시 해결책 예시 (백엔드 변경이 우선) export const fetchEvents = async ( date: string, ): Promise<ApiResponse<EventData[]>> => { const res = await apiWithToken.get('/api/events', { params: { date }, }); // 상세 정보가 이미 포함되어 있다고 가정 const mapped = res.data.data.map((item: EventResponse) => ({ id: item.eventId, name: item.title, description: item.body, address: item.address ?? '', startDate: item.startDate ?? '', endDate: item.endDate ?? '', imageSrc: item.imageUrl ?? '', // 목록 API에서 제공 liked: item.isBookmarked ?? false, })); return { ...res.data, data: mapped, }; };

src/shared/hooks/events/useBookmark.ts

coderabbitai

Actionable comments posted: 2

🧹 Nitpick comments (1)

src/shared/types/membertypes.ts (1)
5-13: 타입 안정성 개선 제안

모든 필드(eventId 제외)가 optional로 정의되어 있어 타입 안정성이 약화됩니다. API 응답에서 항상 제공되는 필드는 required로 지정하는 것이 좋습니다.

또한, PR 요약에서 언급된 "북마크 UI 동기화"를 위해서는 liked 또는 isBookmarked 필드가 필요할 수 있습니다.

API 응답 스펙을 확인한 후, 다음과 같이 개선하는 것을 고려하세요:
bookmarkedEvents: {
  eventId: number;
  name: string;  // 항상 제공되면 required로
  address: string;
  description: string;
  imageSrc?: string;  // 선택적으로 제공되면 optional
  startDate?: string;
  endDate?: string;
  isBookmarked?: boolean;  // 북마크 상태 추적용
}[];

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6098283 and 1b116df.

📒 Files selected for processing (4)

src/pages/mypage/index.tsx (3 hunks)
src/shared/api/member.ts (0 hunks)
src/shared/hooks/events/useBookmark.ts (1 hunks)
src/shared/types/membertypes.ts (1 hunks)

💤 Files with no reviewable changes (1)

src/shared/api/member.ts

🚧 Files skipped from review as they are similar to previous changes (2)

src/shared/hooks/events/useBookmark.ts
src/pages/mypage/index.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

src/shared/types/membertypes.ts (3)

src/shared/constants/events/eventsData.ts (1)

EventData (1-9)

src/shared/components/container/EventCard.tsx (2)

EventCardProps (7-16)

EventCardProps (18-164)

src/pages/events/index.tsx (2)

EventPage (16-98)

event (59-74)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build-and-deploy

coderabbitai · 2025-11-15T06:34:50Z

src/shared/types/membertypes.ts

+   bookmarkedEvents: {
    eventId: number;
-    eventName: string;
-    eventImageUrl: string;
+    title?: string;
+    body?: string;
+    address?: string;
+    imageUrl?: string;
+    eventName?: string;
+    eventImageUrl?: string;
  }[];


⚠️ Potential issue | 🔴 Critical

중복되는 필드명으로 인한 혼란 가능성

동일한 개념을 나타내는 필드가 중복 정의되어 있습니다:

title과 eventName (lines 7, 11)

imageUrl과 eventImageUrl (lines 10, 12)

이는 소비하는 코드에서 어떤 필드를 사용해야 할지 혼란을 야기하고 버그의 원인이 될 수 있습니다.

다음 diff를 적용하여 중복 필드를 제거하고 EventData 인터페이스와 일관성을 유지하세요:

bookmarkedEvents: { eventId: number; - title?: string; - body?: string; + name?: string; + description?: string; address?: string; - imageUrl?: string; - eventName?: string; - eventImageUrl?: string; + imageSrc?: string; + startDate?: string; + endDate?: string; }[];

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

bookmarkedEvents: {

eventId: number;

eventName: string;

eventImageUrl: string;

title?: string;

body?: string;

address?: string;

imageUrl?: string;

eventName?: string;

eventImageUrl?: string;

}[];

bookmarkedEvents: {

eventId: number;

name?: string;

description?: string;

address?: string;

imageSrc?: string;

startDate?: string;

endDate?: string;

}[];

🤖 Prompt for AI Agents

In src/shared/types/membertypes.ts around lines 5 to 13, the bookmarkedEvents item defines duplicated fields (title vs eventName and imageUrl vs eventImageUrl) causing ambiguity; remove the duplicate fields so the shape matches the canonical EventData interface (pick the canonical names used elsewhere — e.g., eventName and eventImageUrl), keep eventId, address, body and optional canonical fields, and update any consuming code/tests to use the chosen names to maintain consistency.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

EventData 인터페이스와의 불일치

bookmarkedEvents의 필드명이 src/shared/constants/events/eventsData.ts의 EventData 인터페이스와 일치하지 않습니다:

body ↔ description

imageUrl/eventImageUrl ↔ imageSrc

eventId ↔ id

title/eventName ↔ name

또한 EventData에 있는 startDate와 endDate 필드가 누락되어 있습니다. 이 필드들은 src/pages/events/index.tsx의 이벤트 필터링 로직에서 사용되므로, 북마크된 이벤트를 동일한 방식으로 처리할 수 없게 됩니다.

다음 스크립트를 실행하여 EventData 타입의 정의와 사용처를 확인하세요:

🏁 Script executed:

#!/bin/bash # EventData 인터페이스 정의 확인 ast-grep --pattern 'interface EventData { $$$ }' # bookmarkedEvents 사용처 확인 rg -nP --type=ts --type=tsx -C3 'bookmarkedEvents'

Length of output: 548

Based on my verification of the EventData interface in the codebase, I can confirm the findings. The review comment correctly identifies field name mismatches, though it references the wrong file location. Here's the rewritten comment:

bookmarkedEvents 타입이 EventData와 호환되지 않음

EventData 인터페이스(src/shared/types/eventtypes.ts)의 필드 구조와 bookmarkedEvents의 필드명이 일치하지 않습니다. TypeScript의 구조적 타이핑에 따르면 필드명이 정확히 일치해야 하므로 다음 필드들을 수정해야 합니다:

eventId → id

title/eventName → name

body → description

imageUrl/eventImageUrl → imageSrc

누락: startDate, endDate, liked

src/shared/types/membertypes.ts의 bookmarkedEvents 타입을 EventData 인터페이스와 일치하도록 정렬하세요.

🤖 Prompt for AI Agents

In src/shared/types/membertypes.ts around lines 5 to 13, the bookmarkedEvents type does not match the EventData interface: rename eventId → id, title and eventName → name, body → description, imageUrl and eventImageUrl → imageSrc; add the missing fields startDate, endDate, and liked with the same types as in EventData; ensure the resulting bookmarkedEvents array type exactly mirrors the EventData interface (field names and types) defined in src/shared/types/eventtypes.ts.

coderabbitai

Actionable comments posted: 2

♻️ Duplicate comments (5)

src/pages/mypage/index.tsx (1)

78-78: 플레이스홀더 이벤트 ID 충돌 가능성

이전 리뷰에서 이미 지적된 사항입니다. 하드코딩된 ID(99, 98)가 실제 API 이벤트 ID와 충돌할 수 있으므로 음수 상수 사용을 권장합니다.
src/shared/components/container/EventCard.tsx (1)
107-126: 북마크 버튼 접근성 및 중복 코드

이전 리뷰에서 지적된 접근성 문제가 여전히 남아있습니다. 북마크 버튼에 aria-label이 없어 스크린 리더 사용자에게 불명확합니다.

추가로, medium(Lines 107-126)과 large(Lines 153-172) 카드의 북마크 버튼 로직이 거의 동일하게 중복되어 있습니다. 재사용 가능한 BookmarkButton 컴포넌트로 추출하는 것을 권장합니다:
const BookmarkButton = ({ 
  isBookmarked, 
  variant, 
  onToggle 
}: { 
  isBookmarked: boolean; 
  variant: 'gray' | 'mint'; 
  onToggle: () => void;
}) => (
  <button
    className="cursor-pointer p-1"
    onClick={(e) => {
      e.stopPropagation();
      onToggle();
    }}
    aria-label={isBookmarked ? '북마크 해제' : '북마크 추가'}
  >
    <Icon
      name="HeartStraight"
      size={20}
      color={
        isBookmarked
          ? 'red-400'
          : variant === 'mint'
          ? 'mint-400'
          : 'gray-300'
      }
      fillColor={isBookmarked ? 'red-300' : undefined}
    />
  </button>
);
src/pages/mypage/events/[id].tsx (3)
16-20: 리다이렉트로 인한 UI 깜빡임

이전 리뷰에서 지적된 사항입니다. 로딩 중 리다이렉트 로직이 초기 렌더링 시 깜빡임을 유발할 수 있습니다. 로딩 상태일 때 스켈레톤 UI를 표시하는 것이 더 나은 UX를 제공합니다.

55-61: Image 컴포넌트에 sizes 속성 누락

이전 리뷰에서 지적된 사항입니다. fill 속성을 사용하는 Image 컴포넌트에 sizes 속성이 없어 이미지 최적화가 제대로 이루어지지 않습니다.
  <Image
    src={imageUrl}
    alt={`${title} 이미지`}
    fill
+   sizes="(max-width: 354px) 100vw, 354px"
    className='object-cover rounded-[2rem]'
  />
86-86: 북마크 상태 폴백 로직 재검토 필요

이전 리뷰에서 지적된 사항입니다. eventDetail.isBookmarked ?? true는 isBookmarked가 undefined일 때 true로 폴백하므로, 저장한 행사 페이지라면 항상 true로 고정하거나 false로 폴백하는 것이 더 안전합니다.

🧹 Nitpick comments (1)

src/shared/components/container/EventCard.tsx (1)
1-1: 사용되지 않는 useEffect import 제거

useEffect가 import되었지만 컴포넌트에서 사용되지 않습니다. 불필요한 import는 제거하는 것이 좋습니다.
-import { useState, useEffect } from 'react';
+import { useState } from 'react';

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1b116df and 7a954e9.

📒 Files selected for processing (3)

src/pages/mypage/events/[id].tsx (4 hunks)
src/pages/mypage/index.tsx (5 hunks)
src/shared/components/container/EventCard.tsx (2 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-10-31T17:34:04.352Z

Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.

Applied to files:

src/pages/mypage/events/[id].tsx
src/pages/mypage/index.tsx

🧬 Code graph analysis (2)

src/shared/components/container/EventCard.tsx (4)

src/shared/hooks/events/useBookmark.ts (1)

useBookmark (8-47)

src/pages/mypage/components/LoginRequired.tsx (1)

LoginRequired (10-21)

src/shared/components/container/Card.tsx (1)

Card (32-48)

src/shared/icons/components/icon.tsx (1)

Icon (58-130)

src/pages/mypage/events/[id].tsx (3)

src/shared/hooks/events/useEventDetail.ts (1)

useEventDetail (15-21)

src/pages/events/index.tsx (2)

EventPage (16-98)

event (59-74)

src/pages/events/[id].tsx (3)

router (8-111)

router (25-25)

e (12-12)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build-and-deploy

🔇 Additional comments (4)

src/shared/components/container/EventCard.tsx (2)

34-35: 북마크 훅 통합이 올바르게 구현되었습니다.

useBookmark 훅을 통한 북마크 상태 관리가 적절하게 구현되었습니다. eventId와 liked props를 전달하고 필요한 상태 및 함수를 정확히 추출하고 있습니다.

40-41: 로그인 필수 처리가 적절하게 구현되었습니다.

북마크 액션에 대한 로그인 게이팅이 올바르게 구현되었습니다. requireLogin 상태에 따라 LoginRequired 컴포넌트를 조건부 렌더링하고, 닫기 시 상태를 초기화하는 로직이 적절합니다.

src/pages/mypage/events/[id].tsx (2)

13-14: API 훅 통합이 올바르게 구현되었습니다.

useEventDetail 훅을 사용한 이벤트 상세 정보 조회가 적절하게 구현되었습니다. 라우터 쿼리에서 eventId를 추출하고 훅에 전달하는 로직이 정확합니다.

25-25: 이벤트 상세 데이터 매핑이 적절합니다.

API 응답에서 필요한 필드들을 올바르게 추출하고 있으며, 컴포넌트 전반에 걸쳐 일관되게 사용되고 있습니다.

coderabbitai · 2025-11-15T07:55:37Z

src/pages/mypage/index.tsx

@@ -1,6 +1,7 @@
 'use client';


⚠️ Potential issue | 🟡 Minor

Pages Router에서는 'use client' 지시문이 필요하지 않습니다.

이 프로젝트는 Next.js Pages Router를 사용하므로 'use client' 지시문을 제거해야 합니다. 이 지시문은 App Router 전용입니다.

Based on learnings

다음과 같이 수정하세요:

-'use client'; - import React, { useEffect } from 'react';

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

'use client';

import React, { useEffect } from 'react';

🤖 Prompt for AI Agents

src/pages/mypage/index.tsx around lines 1 to 1: remove the top-level "'use client';" directive because this file is in the Next.js Pages Router where the directive is not needed; delete that line so the file does not include the App Router–specific client directive.

coderabbitai · 2025-11-15T07:55:37Z

src/pages/mypage/index.tsx

+                  eventId={event.eventId}
+                  name={event.title ?? event.eventName ?? ''}
+                  address={event.address ?? ''}
+                  description={event.body ?? ''}
                  variant='gray'
                  size='large'
-                  imageSrc={event.eventImageUrl}
+                  imageSrc={event.imageUrl}
+                  liked={true}
+                  onClick={() => router.push(`/mypage/events/${event.eventId}`)}


⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

북마크된 이벤트 데이터 매핑 확인

EventCard에 전달되는 props가 올바르게 매핑되었습니다. 다만 Line 104의 event.title ?? event.eventName ?? '' 폴백 체인은 API 응답의 필드명이 일관되지 않을 가능성을 시사합니다.

API 응답 구조를 확인하여 title과 eventName 필드가 모두 필요한지 검증하세요:

🏁 Script executed:

#!/bin/bash # 북마크 이벤트 API 응답 타입 정의 확인 rg -nP --type=ts "bookmarkedEvents|BookmarkedEvent" -A5 -B2

Length of output: 1728

event.eventName 필드가 타입 정의에 존재하지 않음

src/shared/types/membertypes.ts의 BookmarkedEvent 타입 정의에서 eventName 필드가 없습니다. Line 104의 폴백 체인에서 event.eventName을 참조하는 것은 불필요한 방어 코딩입니다.

타입 정의에 따르면 title 필드만 존재하므로, 다음과 같이 단순화하세요:

name={event.title ?? ''}

🤖 Prompt for AI Agents

In src/pages/mypage/index.tsx around lines 103 to 111, the fallback chain references event.eventName which is not defined in the BookmarkedEvent type; replace the name prop expression with only the typed field (name={event.title ?? ''}) and remove the unnecessary event.eventName fallback to match the type definition.

coderabbitai

Actionable comments posted: 2

♻️ Duplicate comments (3)

src/pages/events/[id].tsx (3)
1-12: Pages Router에서는 'use client'가 불필요합니다.

이 파일은 pages 라우터용 페이지라서 Line 1의 'use client'; 지시자는 의미가 없고 혼동만 줄 수 있습니다. 단순히 제거해도 동작에는 영향이 없습니다.
-'use client';
-
 import { useEffect } from 'react';
53-57: startDate!, endDate! non-null 단언은 제거하는 편이 안전합니다.

eventDetail의 startDate, endDate가 실제로 optional일 수 있는데, non-null 단언(!)을 쓰면 타입 체크에서 누락된 케이스를 숨길 수 있습니다. DateTag는 이미 undefined를 처리하고, 둘 다 없으면 null을 반환하도록 구현되어 있으므로(관련 파일 참고), 단언 없이 그대로 넘겨도 무방합니다. 기존 리뷰에서 지적된 내용과 동일합니다.
-          <DateTag startDate={startDate!} endDate={endDate!} />
+          <DateTag startDate={startDate} endDate={endDate} />
109-137: 관련 행사 카드: 북마크/키/클릭 처리 개선 여지

관련 행사 렌더링 전반은 잘 동작하겠지만, 몇 가지 보완 포인트가 있습니다.

북마크 상태 하드코딩

현재 관련 행사 카드에서 liked={false}로 고정되어 있어 실제 북마크 상태가 UI에 반영되지 않습니다.

PR 설명에도 “북마크 UI 동기화 확인: 미완료”가 있어서, 추후에는 관련 행사 타입/응답에 북마크 필드를 추가하고 여기서도 liked={item.isBookmarked ?? false} 형태로 연결하는 후속 작업이 필요해 보입니다. (기존 리뷰에서 언급된 내용과 같은 방향입니다.)

placeholder 카드의 onClick

빈 슬롯용 카드에 onClick={() => null}을 넘기고 있어, 겉으로는 클릭 가능해 보이는데 아무 동작을 하지 않습니다.

아예 onClick을 전달하지 않거나, 클릭을 비활성화하는 스타일을 주는 편이 더 명확할 수 있습니다.

index 기반 key

현재 key={idx}를 사용하고 있는데, 리스트 크기가 고정(2개)라 실제 문제는 크지 않지만, 가능하다면 isEmpty 여부와 eventId를 조합한 키를 쓰면 리렌더링 안정성이 조금 더 좋아집니다.

예시:
-            {nextList.map((item: RelatedEventOrEmpty, idx) => (
-              <div key={idx} className={cn('w-[17rem]')}>
+            {nextList.map((item: RelatedEventOrEmpty, idx) => (
+              <div
+                key={isEmptyItem(item) ? `empty-${idx}` : item.eventId}
+                className={cn('w-[17rem]')}
+              >
...
-                    liked={false}
-                    onClick={() => null}
+                    liked={false}

🧹 Nitpick comments (4)

src/pages/events/[id].tsx (2)
16-31: 잘못된 id 파라미터에 대한 처리 보완을 고려해보세요.

현재 로직에서는:

const eventId = Number(id);

if (!eventId) return null;

로 처리하고 있어, /events/abc처럼 숫자가 아닌 id로 접근하면 화면이 그냥 비어 있는 상태(null 렌더링)로 남습니다. 사용성을 위해 이런 경우에도 /events로 리다이렉트하거나 에러 상태를 노출하는 쪽이 더 낫습니다.

예를 들어:
-  const eventId = Number(id);
+  const eventId = Number(id);
+
+  if (!router.isReady) return null;
+  if (!Number.isFinite(eventId) || eventId <= 0) {
+    router.replace('/events');
+    return null;
+  }
-
-  if (!eventId) return null;
-  if (isError || !eventDetail) return null;
-  if (!router.isReady) return null;
+  if (isError || !eventDetail) return null;
처럼 router.isReady와 eventId 유효성을 먼저 검사하는 패턴을 고려해볼 수 있습니다.

39-43: 헤더 타이틀을 실제 행사명으로 교체하는 것을 고려해보세요.

현재 헤더 title이 하드코딩된 '행사명'이라, 상세에서 실제 행사명이 보이지 않습니다. Line 33에서 title을 이미 구조 분해하고 있으니, 다음처럼 바꾸면 UX가 더 자연스러울 것 같습니다.
-      <Header
-        title='행사명'
+      <Header
+        title={title}
         onClick={() => router.push(`/events${date ? `?date=${date}` : ''}`)}
src/pages/events/index.tsx (2)
1-14: Pages Router에서는 use client 지시어가 불필요합니다.

이 파일은 src/pages 하위의 Pages Router 페이지라 기본적으로 클라이언트 컴포넌트로 처리되므로, 최상단의 'use client';는 제거해도 동작에 변화가 없습니다. Pages Router 코드에만 이 지시어가 섞여 있으면 나중에 App Router 도입 시 혼동을 줄 수 있어 가급적 정리하는 편을 권장합니다. useRouter를 next/router에서 import하는 부분과 새로 추가된 useEvents/EventData import 구성은 현재 프로젝트 컨벤션과 잘 맞습니다.

Based on learnings

67-69: router.push에서 selectedDateString이 비어 있을 때를 방어해 두면 더 안전합니다.

현재 구현에서는 항상 /events/${event.id}?date=${selectedDateString} 형태로 이동합니다. 지금 구조상 카드가 노출되는 시점에는 date가 설정되어 있어 실제로 date=만 비어 있는 경우는 거의 없겠지만, 추후 기본 이벤트 목록을 로드하도록 변경될 경우 빈 쿼리(?date=)가 내려가면서 상세 페이지에서 date 파싱 시 edge case가 생길 여지가 있습니다.

간단히 클릭 핸들러 안에서 날짜가 있을 때만 쿼리를 붙이는 식으로 방어해 두는 걸 제안드립니다.
-                onClick={() =>
-                  router.push(`/events/${event.id}?date=${selectedDateString}`)
-                }
+                onClick={() => {
+                  if (selectedDateString) {
+                    router.push(
+                      `/events/${event.id}?date=${selectedDateString}`,
+                    );
+                  } else {
+                    router.push(`/events/${event.id}`);
+                  }
+                }}
필수 수정은 아니지만, 이후 요구사항 변경에 조금 더 견고하게 대응할 수 있을 것 같습니다.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7a954e9 and 27e232b.

📒 Files selected for processing (2)

src/pages/events/[id].tsx (1 hunks)
src/pages/events/index.tsx (3 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-10-31T17:34:04.352Z

Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.

Applied to files:

src/pages/events/index.tsx
src/pages/events/[id].tsx

🧬 Code graph analysis (2)

src/pages/events/index.tsx (4)

src/shared/hooks/events/useEvents.ts (1)

useEvents (7-21)

src/shared/components/datePicker/DatePicker.tsx (1)

DatePicker (17-97)

src/shared/types/eventtypes.ts (1)

EventData (12-21)

src/shared/components/container/EventCard.tsx (1)

EventCardProps (18-164)

src/pages/events/[id].tsx (5)

src/shared/types/eventtypes.ts (1)

RelatedEventOrEmpty (42-42)

src/shared/hooks/events/useEventDetail.ts (1)

useEventDetail (15-21)

src/shared/utils/buildNextEventList.ts (1)

buildNextEventList (5-17)

src/pages/events/components/DateTag.tsx (1)

DateTag (24-44)

src/shared/components/container/EventCard.tsx (3)

EventCardProps (18-164)

EventCardProps (7-16)

prev (29-29)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build-and-deploy

🔇 Additional comments (5)

src/pages/events/[id].tsx (4)

13-14: isEmptyItem 타입 가드 구현 좋습니다.

RelatedEventOrEmpty에서 { isEmpty: true } 케이스를 'isEmpty' in item으로 좁히는 방식이 명확하고, 이후 JSX 분기에서도 잘 활용되고 있습니다. 별다른 수정 의견 없습니다.

33-37: eventDetail 구조 분해와 buildNextEventList 사용은 일관성 있게 잘 정리되었습니다.

상세 정보에서 필요한 필드만 구조 분해한 뒤, buildNextEventList로 관련 행사 리스트를 2개 고정으로 맞추는 구조가 명확하고 재사용성도 좋아 보입니다. 이 부분은 그대로 유지해도 좋겠습니다.

61-82: 대표 이미지 섹션의 접근성 처리 좋습니다.

이미지가 있을 때는 alt={${title} 이미지}로, 없을 때는 role="img"와 aria-label로 대체 텍스트를 제공하는 패턴이 명확하고 접근성 측면에서도 적절합니다. Image 컴포넌트와 fallback div 높이/비율도 일관되어 UX가 안정적입니다.

92-101: 메인 행사 카드에 북마크 상태를 연결한 부분 좋습니다.

eventId, name, description에 더해 liked={eventDetail.isBookmarked ?? false}로 상세의 북마크 상태를 반영하고 있어, 북마크 UI와 데이터가 잘 싱크될 것으로 보입니다. 이 부분은 요구사항에 잘 맞는 구현 같습니다.

src/pages/events/index.tsx (1)

38-38: 상단 ControlBar를 fixed로 올린 변경은 UX 측면에서 좋아 보입니다.

스크롤 시에도 컨트롤 바가 항상 보이도록 되어 이벤트 날짜/필터 조작이 쉬워질 것 같고, z-index와 padding 설정도 다른 요소들과 충돌 없어 보입니다.

src/pages/events/index.tsx

coderabbitai

Actionable comments posted: 1

♻️ Duplicate comments (4)

src/pages/events/index.tsx (4)
57-102: 로딩/에러/날짜 미선택 상태가 빈 데이터와 구분되지 않습니다.

이전 리뷰 코멘트에서 지적된 내용이 아직 반영되지 않았습니다. 현재 filteredEvents.length > 0 조건만으로 분기하고 있어서 다음 상황들이 모두 동일하게 "선택하신 날은 행사가 없어요!" 메시지를 보여줍니다:

API 호출 중(로딩)

API 호출 실패(에러)

날짜를 아직 선택하지 않음

실제로 해당 날짜에 행사가 없음

20번 라인에서 isLoading, isError를 함께 구조 분해하고, 렌더링 로직을 다음과 같이 개선해 주세요:
         {/* 행사카드 & 빈화면 */}
-        {filteredEvents.length > 0 ? (
+        {isLoading ? (
+          <div className='flex items-center justify-center mt-[15rem]'>
+            <p className='text-label-lg text-gray-500'>행사 목록을 불러오는 중입니다...</p>
+          </div>
+        ) : isError ? (
+          <div className='flex flex-col items-center justify-center text-center mt-[15rem]'>
+            <p className='text-label-lg text-gray-700'>
+              행사 정보를 불러오지 못했어요.
+              <br />
+              잠시 후 다시 시도해 주세요.
+            </p>
+          </div>
+        ) : date && filteredEvents.length > 0 ? (
           <section
             aria-label='이벤트 목록'
             className={cn(
@@ -83,7 +95,7 @@
               ))}
             </section>
-        ) : (
+        ) : date ? (
           <div
             className='flex flex-col items-center justify-center text-center mt-[15rem]'
             role='status'
@@ -99,6 +111,7 @@
               행사가 없어요!
             </p>
           </div>
+        ) : null}
         )}
또한 19번 라인의 date 초기값을 new Date()로 설정하면 사용자가 처음 진입할 때 오늘 날짜의 행사를 바로 볼 수 있어 UX가 더 좋아집니다.

19-21: 로딩/에러 상태를 구독하지 않고 있습니다.

이전 리뷰 코멘트에서 지적된 내용이 아직 반영되지 않았습니다. useEvents 훅은 isLoading과 isError를 반환하는데, 현재는 events만 구조 분해하고 있어서 로딩 중이거나 에러가 발생했을 때도 동일하게 빈 상태 UI가 노출됩니다.

다음과 같이 수정해 주세요:
-  const { events } = useEvents(date);
+  const { events, isLoading, isError } = useEvents(date);
그리고 렌더링 로직에서 이 상태들을 활용해야 합니다(아래 별도 코멘트 참조).

46-53: label의 htmlFor가 실제 DOM 요소와 매칭되지 않습니다.

이전 리뷰 코멘트에서 지적된 내용이 아직 반영되지 않았습니다. htmlFor='event-date'로 지정되어 있지만, DatePicker는 id prop을 받지 않아서 실제 DOM에 id="event-date"인 요소가 존재하지 않습니다.

다음 중 하나를 선택해 주세요:

간단한 방법: label을 제거하고 ariaLabel만 유지
-          <label htmlFor='event-date' className='sr-only'>
-            행사 날짜 선택
-          </label>
           <DatePicker
             ariaLabel='행사 날짜 선택'
완전한 방법: DatePicker 컴포넌트를 확장해 id prop을 받도록 수정하고, 여기서 id='event-date'를 전달

24-28: 쿼리 파라미터로부터 파싱한 날짜의 유효성 검증이 없습니다.

dateQuery를 new Date(String(dateQuery))로 변환할 때, 잘못된 날짜 문자열이 들어오면 Invalid Date 객체가 생성될 수 있습니다. 이 경우 UI가 의도치 않게 동작할 수 있습니다.

날짜 유효성을 검증하도록 개선해 주세요:
   useEffect(() => {
     if (router.isReady && dateQuery) {
-      setDate(new Date(String(dateQuery)));
+      const parsed = new Date(String(dateQuery));
+      if (!Number.isNaN(parsed.getTime())) {
+        setDate(parsed);
+      }
     }
   }, [router.isReady, dateQuery]);

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 27e232b and dc6070d.

📒 Files selected for processing (1)

src/pages/events/index.tsx (3 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-10-31T17:34:04.352Z

Learnt from: jjangminii
Repo: geulDa/FE PR: 64
File: src/pages/map/result/components/ResultMap.tsx:3-3
Timestamp: 2025-10-31T17:34:04.352Z
Learning: The geulDa/FE project uses Next.js Pages Router (not App Router), so components should import useRouter from 'next/router' and should not use the 'use client' directive.

Applied to files:

src/pages/events/index.tsx

🧬 Code graph analysis (1)

src/pages/events/index.tsx (4)

src/shared/hooks/events/useEvents.ts (1)

useEvents (7-21)

src/shared/utils/date.ts (1)

formatDateToISO (1-6)

src/shared/components/datePicker/DatePicker.tsx (1)

DatePicker (17-97)

src/shared/types/eventtypes.ts (1)

EventData (12-21)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build-and-deploy

🔇 Additional comments (1)

src/pages/events/index.tsx (1)

39-39: z-50 z-index 값은 적절합니다.

검증 결과, 프로젝트의 z-index 계층 구조는 다음과 같습니다:

z-50: ControlBar 및 고정 헤더 (의도된 배치)

z-[99]: Overlay 컴포넌트

z-[100]: PopupSet, Header (최상위)

ControlBar의 z-50은 모달과 팝업(z-[99], z-[100])보다 아래에 위치하도록 의도적으로 설정되었으며, 이는 고정 헤더의 올바른 동작입니다. UI 요소 간 레이어 충돌이 없습니다.

coderabbitai · 2025-11-15T09:06:50Z

src/pages/events/index.tsx

@@ -1,6 +1,6 @@
 'use client';


⚠️ Potential issue | 🔴 Critical

Pages Router에서는 'use client' 지시어가 필요하지 않습니다.

현재 프로젝트는 Next.js Pages Router를 사용하고 있는데, 'use client' 지시어는 App Router 전용입니다. Pages Router의 pages/ 디렉토리 내 파일들은 기본적으로 클라이언트 측에서 하이드레이션되므로 이 지시어가 불필요하며, 오히려 혼란을 줄 수 있습니다.

다음과 같이 제거해 주세요:

-'use client'; - import { useState, useEffect } from 'react';

Based on learnings

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

'use client';

import { useState, useEffect } from 'react';

🤖 Prompt for AI Agents

In src/pages/events/index.tsx lines 1-1, remove the top-level 'use client' directive (delete that first line). If this file relies on client-only hooks or browser APIs, move those parts into a separate client component under pages/events or convert the specific components to client components (with 'use client') inside a subfile; otherwise simply delete the directive so the page uses the Pages Router default behavior.

coderabbitai

Actionable comments posted: 0

♻️ Duplicate comments (1)

src/shared/components/container/EventCard.tsx (1)
105-124: 북마크 버튼 a11y 보완 및 중복 코드 정리 권장 (이전 리뷰와 동일 이슈)

Line [105]~~[124], [151]~~[170]의 하트 북마크 버튼은 시각적으로는 명확하지만, 현재 <button>에 aria-label이 없고, 내부 Icon 컴포넌트는 기본적으로 ariaHidden이기 때문에 스크린 리더에서 “이 버튼이 무엇을 하는지” 알 수 없습니다. 이전 리뷰에서도 지적되었던 부분인데 아직 반영되지 않은 것으로 보입니다.

접근성(a11y) 측면 필수 수정 제안

각 버튼에 상태에 따라 달라지는 aria-label을 부여하면 스크린 리더에서 의미를 파악할 수 있습니다. 동시에 type='button'을 명시해 추후 form 내에 들어갈 가능성까지 방어하는 편이 안전합니다.

예시 diff:
-              <button
-                className='cursor-pointer p-1'
-                onClick={(e) => {
-                  e.stopPropagation();
-                  toggleBookmark();
-                }}
-              >
+              <button
+                type='button'
+                className='cursor-pointer p-1'
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleBookmark();
+                }}
+                aria-label={isBookmarked ? '북마크 해제' : '북마크 추가'}
+              >
@@
-                <Icon
+                <Icon
                   name='HeartStraight'
                   size={20}
                   color={
                     isBookmarked
                       ? 'red-400'
                       : variant === 'mint'
                       ? 'mint-400'
                       : 'gray-300'
                   }
                   fillColor={isBookmarked ? 'red-300' : undefined}
                 />
               </button>
Large 카드 쪽 버튼(Line [151]~[170])에도 동일하게 type='button'과 aria-label을 추가해 주시면 좋겠습니다.

중복된 버튼 마크업은 소규모 서브컴포넌트로 추출 권장

medium/large 카드에서 버튼 마크업과 색상 로직이 거의 동일하게 반복되고 있어, 추후 스타일 변경 시 중복 수정이 필요합니다. 필수는 아니지만, 예를 들어 BookmarkButton 같은 소규모 서브컴포넌트로 뽑아서

isBookmarked, variant, onToggle 정도를 props로 받고

내부에서 stopPropagation, aria-label 처리와 색상/Icon 렌더링을 공통화

하는 형태로 정리하면 유지보수가 더 수월해질 것 같습니다.

Also applies to: 151-170

🧹 Nitpick comments (1)

src/shared/components/container/EventCard.tsx (1)

49-75: small 카드에서 북마크 미노출이 기획과 맞는지만 확인 부탁드립니다

Line [49]~[75]의 small 카드 레이아웃에는 이미지와 제목만 있고, medium/large 카드에 있는 하트(북마크) 버튼은 배치되어 있지 않습니다. 기획상 small 카드는 북마크를 지원하지 않는 디자인이라면 그대로 두어도 되지만, 카드 사이즈에 관계없이 일관된 북마크 경험을 원하는 요구사항이라면 이 부분도 추후 확장 대상이 될 수 있습니다.

현재 PR 목적(이벤트 페이지 API 연동) 관점에서는 blocker는 아니지만, 기획/디자인과 의도된 동작이 맞는지만 한 번 확인해 보시면 좋겠습니다.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fcbaee2 and cdc4f5c.

📒 Files selected for processing (1)

src/shared/components/container/EventCard.tsx (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/shared/components/container/EventCard.tsx (4)

src/shared/hooks/events/useBookmark.ts (1)

useBookmark (8-47)

src/pages/mypage/components/LoginRequired.tsx (1)

LoginRequired (10-21)

src/shared/components/container/Card.tsx (1)

Card (32-48)

src/shared/icons/components/icon.tsx (1)

Icon (58-130)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

GitHub Check: build-and-deploy

🔇 Additional comments (3)

src/shared/components/container/EventCard.tsx (3)

9-35: EventCard props 확장 및 useBookmark 연동 구조는 무난합니다

Line [9]~[35]에서 eventId, liked, onClick를 props로 확장하고, useBookmark(eventId, liked)로 북마크 상태를 위임한 구조가 전체 이벤트/상세/마이페이지 캐시 전략과 잘 맞습니다. liked 기본값을 false로 둔 것도 API 응답이 지연되거나 누락될 때의 초기 렌더 안정성 측면에서 괜찮아 보입니다.

별도 이슈는 없어 보입니다.

38-48: 로그인 요구 플로우와 Card 래핑 방식 적절

Line [38]~[48]에서 requireLogin이 true일 때 LoginRequired를 렌더하고, onClose={() => setRequireLogin(false)}로 상태를 정리한 뒤 Card를 감싸는 구조는 깔끔합니다.

Card에 onClick을 그대로 넘기되, 북마크 아이콘 쪽에서 stopPropagation을 쓰고 있어서 카드 전체 클릭 액션과 북마크 토글이 잘 분리될 것으로 보입니다.

41-47: Card의 size/customHeight 조합에서 small 처리만 한 번 확인 필요

Line [41]~[47]에서 size === 'small' ? undefined : size로 Card에 size를 넘기지 않고, 대신 customHeight로만 높이를 제어하고 있습니다. Card 내부에서 size가 undefined일 때 어떤 스타일을 기본값으로 사용하는지에 따라 small 카드가 medium 스타일을 일부 물려받을 수도 있으니, 디자인 의도와 실제 카드 스타일이 일치하는지만 한 번 눈으로 확인해 주세요.

기능적인 문제는 없어 보이고, 필요하다면 Card 쪽 cardStyle 설정만 재검토하면 될 것 같습니다.

skyblue1232

피드백 반영 수고하셨습니다!

KongMezu added 18 commits November 12, 2025 21:19

stlye : 데이터 피커 디자인 수정

b001f51

api : 행사 api 연동

dc661e4

Merge branch 'develop' of https://github.com/cukCS/FE into api/#114/e…

aa595f2

…vent-api

fix : 헤더 패딩값 고침

2ad0b18

feat : api 조회 성공

ac01835

api : 행사 조회

b1fe18a

remove : 불필요한 import 제거

cc14c8e

feat : 오버레이 z-index 수정

a1badcd

remove: 목업 데이터 제거

118f98c

Merge branch 'develop' of https://github.com/cukCS/FE into api/#114/e…

0ae7073

…vent-api

feat : 상세 페이지 조회 api 연결

921aa3f

feat : 전체목록 사진 조회

99bab3f

Merge branch 'develop' of https://github.com/cukCS/FE into api/#114/e…

e97ecf6

…vent-api

fix : instance 오류

2119aa6

fix : 불필요한 로딩 제거

0969058

feat : 북마크 상태 조회

13eed95

feat : 관련 행사들 클릭

7359e55

feat : event 북마크 동기화

389e160

KongMezu requested review from jjangminii and skyblue1232 as code owners November 14, 2025 04:30

KongMezu self-assigned this Nov 14, 2025

KongMezu linked an issue Nov 14, 2025 that may be closed by this pull request

[api&feat] 행사페이지 api 연결 #114

Closed

github-actions bot added api api 연결 comment 필요한 주석 추가 및 변경 labels Nov 14, 2025

coderabbitai bot reviewed Nov 14, 2025

View reviewed changes

feat : 마이페이지 적용

e730c25

coderabbitai bot reviewed Nov 14, 2025

View reviewed changes

src/pages/mypage/postcard/[id].tsx Show resolved Hide resolved

KongMezu added 6 commits November 14, 2025 17:10

feat : instance 수저

5c8cf5d

Merge branch 'develop' of https://github.com/cukCS/FE into api/#114/e…

bc38265

…vent-api

Merge branch 'develop' of https://github.com/cukCS/FE into api/#114/e…

2a5017a

…vent-api

Merge branch 'develop' of https://github.com/cukCS/FE into api/#114/e…

0d34fb2

…vent-api

fix : 북마크 동기화

c46fc31

feat : 북마크 동기화 완료

6098283

vercel bot deployed to Preview November 15, 2025 06:14 View deployment

coderabbitai bot reviewed Nov 15, 2025

View reviewed changes

feat : 마이페이지 연결 완료

1b116df

vercel bot had a problem deploying to Preview November 15, 2025 06:31 Failure

coderabbitai bot reviewed Nov 15, 2025

View reviewed changes

feat : 마이페이지 상세 연결

7a954e9

vercel bot had a problem deploying to Preview November 15, 2025 07:52 Failure

coderabbitai bot reviewed Nov 15, 2025

View reviewed changes

feat : 이전 누르면 날짜 쿼리 가지고 돌아가기

27e232b

vercel bot had a problem deploying to Preview November 15, 2025 08:14 Failure

coderabbitai bot reviewed Nov 15, 2025

View reviewed changes

src/pages/events/index.tsx Show resolved Hide resolved

src/pages/events/index.tsx Show resolved Hide resolved

fix : 날짜 돌아가기

dc6070d

vercel bot had a problem deploying to Preview November 15, 2025 09:03 Failure

fix : build error

fcbaee2

vercel bot deployed to Preview November 15, 2025 09:06 View deployment

coderabbitai bot reviewed Nov 15, 2025

View reviewed changes

feat : 이벤트 카드

cdc4f5c

vercel bot deployed to Preview November 15, 2025 09:19 View deployment

coderabbitai bot reviewed Nov 15, 2025

View reviewed changes

feat : 코드 래빗 피드백

a28d795

vercel bot deployed to Preview November 15, 2025 09:26 View deployment

skyblue1232 approved these changes Nov 15, 2025

View reviewed changes

KongMezu merged commit 239afb3 into develop Nov 15, 2025
6 checks passed

Conversation

KongMezu commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔥 작업 내용

🤔 추후 작업 사항

🔗 이슈

PR Point (To Reviewer)

행사 페이지 api 연결

📸 피그마 스크린샷 or 기능 GIF

Summary by CodeRabbit

Uh oh!

vercel bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related issues

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

github-actions bot commented Nov 14, 2025

Uh oh!

github-actions bot commented Nov 14, 2025

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot Nov 15, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 15, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 15, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 15, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Nov 15, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

KongMezu commented Nov 14, 2025 •

edited

Loading

vercel bot commented Nov 14, 2025 •

edited

Loading

coderabbitai bot commented Nov 14, 2025 •

edited

Loading

skyblue1232 left a comment •

edited

Loading