Skip to content

Conversation

@kim3360
Copy link
Contributor

@kim3360 kim3360 commented Feb 2, 2026

🚀 PR 제목을 여기에 적어주세요

📝 변경사항

  • 여기에 변경된 내용을 적어주세요.

✅ 체크리스트

  • 코드 리뷰를 받았습니다
  • 테스트를 완료했습니다
  • 린터 에러가 없습니다
  • 타입 에러가 없습니다
  • 브라우저에서 테스트를 완료했습니다
  • 모바일에서 테스트를 완료했습니다 (해당되는 경우)

📸 스크린샷

UI 변경 사항이 있다면 이미지를 드래그해서 넣어주세요!

💬 리뷰어 전달사항

  • 리뷰어가 특별히 확인해야 할 사항이 있다면 적어주세요.

Summary by CodeRabbit

릴리스 노트

  • New Features

    • 회의 상태 실시간 확인(10초 자동 갱신) 및 참가자 입장/퇴장 처리 추가
    • 출발지 등록 및 참가자 입장 API 연동으로 동적 참가자 표시
  • UI/Style

    • 슬라이드 애니메이션을 전역으로 이동하고 will-change 및 호버로 일시정지 지원
    • 모달 및 공유 페이지에 최적화된 이미지 렌더링 적용
    • 툴팁/콘텐츠 레이아웃 재구성
  • Chores

    • API 요청에 인증 정보 포함 및 메타데이터(제목/설명) 업데이트
  • Docs/Types

    • API 응답 타입 보강

@vercel
Copy link

vercel bot commented Feb 2, 2026

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

Project Deployment Actions Updated (UTC)
mingling-frontend Ready Ready Preview, Comment Feb 2, 2026 8:48pm

@coderabbitai
Copy link

coderabbitai bot commented Feb 2, 2026

Warning

Rate limit exceeded

@kim3360 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 22 minutes and 44 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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.

Walkthrough

회의 페이지를 정적 모의 데이터에서 API 기반 흐름으로 전환하고, 참가자 입장/출발 mutation 훅을 추가했으며 이미지 컴포넌트를 여러 모달 및 공유 페이지에 도입하고 전역 CSS 애니메이션 규칙을 조정했습니다. 메타데이터와 API fetch 옵션도 변경되었습니다.

Changes

Cohort / File(s) Summary
CSS 애니메이션 변경
app/globals.css
.animate-slide-smooth를 레이어 바깥으로 이동, will-change: transform 추가, 호버 시 애니메이션 일시정지 처리(클래스와 키프레임 위치 변경).
회의 화면 및 UI 업데이트
app/meeting/[id]/page.tsx
모의 데이터 제거 후 useCheckMeeting/useSetDeparture 통합, 로컬 저장소 이름 사용, 서버 데이터와 로컬 참가자 병합, 역 선택 시 즉시 UI 업데이트 및 departure mutation 트리거, 결과 라우팅 변경 등 API 기반으로 전환.
참가 입장 훅 리네임
app/join/[id]/page.tsx, hooks/api/mutation/useEnterParticipant.ts
useParticipantEnteruseEnterParticipant로 훅 이름/임포트 경로 변경(호출부 갱신).
새로운 훅 추가 (쿼리/뮤테이션)
hooks/api/query/useCheckMeeting.ts, hooks/api/mutation/useSetDeparture.ts
useCheckMeeting(meetingId) 추가(회의 상태 조회, 10초 간격 리패치). useSetDeparture(meetingId) 추가(출발지 등록 POST mutation).
공유/결과 관련 변경
hooks/api/query/useShareMeeting.ts, app/share/[id]/page.tsx
useShareMeeting API 호출 제네릭/엔드포인트 정리. 공유 페이지 플레이스홀더를 Next.js Image로 교체.
모달 이미지 추가
components/modal/nudgeModal.tsx, components/modal/shareModal.tsx
두 모달의 플레이스홀더를 Next.js Image로 대체(이미지 파일 삽입).
타입 확장
types/api.ts
MeetingLinkData/Response, SetDepartureData/Response, MeetingStatusData/Response 등 API 응답용 타입/타입별칭 추가(내보냄).
전역 설정 및 유틸 변경
app/layout.tsx, lib/api.ts, app/page.tsx
앱 메타데이터(제목/설명)를 한글로 변경. apiFetchcredentials: 'include' 추가. 홈 페인포인트 슬라이더를 두 세트로 분리하고 애니메이션 클래스명에 변화(잠재적 오타: hover:paused]).

Sequence Diagram(s)

sequenceDiagram
    participant Browser as Browser (Client)
    participant Storage as LocalStorage/Session
    participant MeetingPage as Meeting Page Component
    participant API as API Server

    Browser->>Storage: myName 조회
    Storage-->>Browser: myName 반환
    MeetingPage->>API: GET /api/meeting/{id}/status (useCheckMeeting)
    API-->>MeetingPage: meetingData (참가자, 상태)
    Note over MeetingPage,API: 회의 상태 10초 간격 갱신
    Browser->>MeetingPage: 역 선택 (클릭)
    MeetingPage->>MeetingPage: myParticipant 구성 (useMemo)
    MeetingPage->>API: POST /api/meeting/{id}/departure (useSetDeparture)
    API-->>MeetingPage: SetDepartureResponse
    MeetingPage->>Browser: /result/{id}로 라우팅
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

🚥 Pre-merge checks | ✅ 1 | ❌ 2
❌ Failed checks (2 warnings)
Check name Status Explanation Resolution
Description check ⚠️ Warning PR 설명은 템플릿 형식만 포함되어 있고, 실제 변경사항, 체크리스트 항목, 스크린샷, 리뷰어 전달사항이 모두 작성되지 않았습니다. 변경사항 섹션에 구체적인 내용을 작성하고, 체크리스트 항목을 완료하며, 필요시 스크린샷과 리뷰어 전달사항을 추가해주세요.
Docstring Coverage ⚠️ Warning Docstring coverage is 12.50% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목은 변경사항의 주요 내용과 관련이 있습니다. 제목이 '모임 참여 현황 조회 api'이고, 실제로 모임 상태 확인(useCheckMeeting), 출발 지점 등록(useSetDeparture) 등 API 관련 기능이 추가되었습니다.

✏️ 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/api-departure

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.

Copy link

@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: 4

🤖 Fix all issues with AI agents
In `@app/meeting/`[id]/page.tsx:
- Around line 87-107: The useMemo for allParticipants references id inside
getRandomHexColor(id) but id is missing from the dependency array, causing stale
values; update the dependency array of the useMemo that defines allParticipants
(the memo that uses meetingData, myParticipant, myName) to also include id so
allParticipants is recomputed when id changes (ensure you reference the same id
variable used in getRandomHexColor).
- Around line 41-45: The effect reads persisted 'userId' from
localStorage/sessionStorage and calls setMyName inside useEffect, which ESLint
flags; instead initialize the state directly by passing an initializer function
to useState that reads localStorage.getItem('userId') ||
sessionStorage.getItem('userId') (remove the useEffect block), so update the
declaration that defines myName/setMyName to use a lazy initializer and delete
the useEffect that contains storedName and setMyName.

In `@app/page.tsx`:
- Around line 134-147: Remove the invalid Tailwind token "hover:paused]" from
the className on the scrolling container (the div using "animate-slide-smooth
..."), leaving "animate-slide-smooth" and the other utility classes intact;
because globals.css already implements ".animate-slide-smooth:hover {
animation-play-state: paused; }", no additional hover utility is needed—update
the className on the element that renders the PainPointTooltip sets (the div
containing the two PAIN_POINTS map blocks) to remove the erroneous token.

In `@lib/api.ts`:
- Around line 8-12: The fetch call currently forces credentials: 'include' and
overwrites any caller-provided value; update the call that creates response to
respect options.credentials by using the caller value if present and otherwise
applying a sensible default (e.g., options.credentials ?? 'same-origin' or
similar) so that passing credentials on the options object (or omitting it)
behaves correctly; locate the fetch invocation that spreads options and headers
(the line creating response) and change the credentials assignment to use
options.credentials when defined rather than always setting 'include'.
🧹 Nitpick comments (2)
hooks/api/query/useCheckMeeting.ts (1)

5-14: enabled 옵션 추가를 권장합니다.

meetingId가 빈 문자열이거나 undefined일 때 불필요한 API 호출을 방지하기 위해 enabled 옵션을 추가하는 것이 좋습니다. 또한 queryKey를 더 구체적으로 지정하면 캐시 관리에 도움이 됩니다.

♻️ 개선 제안
 export const useCheckMeeting = (meetingId: string) => {
   return useQuery({
-    queryKey: ['meeting', meetingId],
+    queryKey: ['meeting', meetingId, 'status'],
     queryFn: async () => {
       return apiGet<MeetingStatusResponse>(`/api/meeting/${meetingId}/status`);
     },
+    enabled: !!meetingId,
     // 10초마다 갱신 (선택사항: 다른 사람이 들어오는걸 실시간으로 보고 싶다면)
     refetchInterval: 10000,
   });
 };
app/meeting/[id]/page.tsx (1)

98-98: 호선 정보 하드코딩 문제

line: '2호선'이 하드코딩되어 있습니다. 서버에서 호선 정보를 제공하지 않는다면, 로컬 STATION_DATA에서 역 이름으로 조회하여 정확한 호선 정보를 표시하는 것이 좋습니다.

♻️ 개선 제안
       .map((p, index) => {
+        const stationInfo = STATION_DATA.find((s) => s.name === p.stationName);
         return {
           id: `other-${index}`,
           name: p.userName,
           station: p.stationName,
-          line: '2호선', // 서버에서 호선 정보가 없다면 임의값 혹은 추가 로직 필요
+          line: stationInfo?.line || '알 수 없음',
           latitude: p.latitude,
           longitude: p.longitude,
           status: 'done',
           hexColor: getRandomHexColor(id),
         };
       });

Comment on lines +134 to +147
<div className="w-full overflow-hidden opacity-80 md:mt-[62px] md:mb-[62px]">
<div className="animate-slide-smooth hover:paused] flex w-max items-center will-change-transform">
{/* 첫 번째 세트 */}
<div className="flex shrink-0 gap-7.5 pr-7.5">
{PAIN_POINTS.map((text, index) => (
<PainPointTooltip key={`original-${index}`} text={text} />
))}
</div>
{/* 두 번째 세트 */}
<div className="flex shrink-0 gap-7.5 pr-7.5">
{PAIN_POINTS.map((text, index) => (
<PainPointTooltip key={`copy-${index}`} text={text} />
))}
</div>
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

hover:paused]는 잘못된 Tailwind 클래스입니다.

Line 135에서 hover:paused]는 유효하지 않은 클래스명입니다. 닫는 대괄호 ]가 포함되어 있고, Tailwind에는 paused라는 유틸리티가 없습니다.

globals.css에서 이미 .animate-slide-smooth:hover { animation-play-state: paused; }가 정의되어 있으므로 해당 클래스를 제거하면 됩니다.

🐛 수정 제안
-          <div className="animate-slide-smooth hover:paused] flex w-max items-center will-change-transform">
+          <div className="animate-slide-smooth flex w-max items-center will-change-transform">
🤖 Prompt for AI Agents
In `@app/page.tsx` around lines 134 - 147, Remove the invalid Tailwind token
"hover:paused]" from the className on the scrolling container (the div using
"animate-slide-smooth ..."), leaving "animate-slide-smooth" and the other
utility classes intact; because globals.css already implements
".animate-slide-smooth:hover { animation-play-state: paused; }", no additional
hover utility is needed—update the className on the element that renders the
PainPointTooltip sets (the div containing the two PAIN_POINTS map blocks) to
remove the erroneous token.

Copy link

@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

🤖 Fix all issues with AI agents
In `@app/meeting/`[id]/page.tsx:
- Around line 82-103: The participants list sets line to a hardcoded '2호선' and
seeds hexColor with only meeting id, causing identical lines/colors; update the
allParticipants mapping so each participant derives line from their station (use
a helper like mapStationToLine(stationName) or consult meetingData.station
mapping) and seed colors per user (e.g., pass a unique seed such as
`${id}-${p.userId}` or p.userName into getRandomHexColor) instead of just id;
adjust references in the mapping where serverParticipants, p.stationName,
getRandomHexColor, and id are used and ensure myParticipant keeps its own
correct line/color generation using the same helpers.

@kangdy25 kangdy25 merged commit 3820681 into main Feb 2, 2026
3 of 8 checks passed
@kangdy25 kangdy25 deleted the feature/api-departure branch February 3, 2026 11:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants