[fix] createApplicationSSE import 분리#1071
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning
|
| Cohort / File(s) | 요약 |
|---|---|
SSE 함수 분리 frontend/src/apis/clubSSE.ts |
EventSource를 통한 실시간 지원자 상태 업데이트 기능을 새로운 전용 모듈로 추가. Authorization 헤더 주입, 토큰 관리, applicant-status-changed 이벤트 핸들링 포함 |
기존 모듈 정리 frontend/src/apis/club.ts |
createApplicantSSE 함수 및 관련 import 제거 (53줄) |
import 경로 업데이트 frontend/src/context/AdminClubContext.tsx |
createApplicantSSE import 경로를 @/apis/club에서 @/apis/clubSSE로 변경 |
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~10 minutes
Possibly related PRs
- [feat] 지원자 상태 변경 SSE 실시간 동기화 구현 #1062 —
createApplicantSSE및 관련 SSE 타입의 구현을 추가/변경하는 PR로, 본 PR과 동일한 기능에 대한 모듈 재배치와 직접 관련 - [Feature] 지원자의 지원서 상태를 실시간으로 공유한다. #791 — 백엔드 SSE 지원(ApplicantStatusEvent, SSE 엔드포인트, applicant-status-changed 이벤트)을 도입한 PR로, 본 PR의 프론트엔드 클라이언트 구현과 상응
Suggested labels
📬 API
Suggested reviewers
- lepitaaar
- Zepelown
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | 제목은 createApplicantSSE를 새로운 clubSSE 모듈로 분리하는 주요 변경사항을 명확하게 설명하고 있습니다. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing touches
- 📝 Generate docstrings
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.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/src/context/AdminClubContext.tsx (1)
41-41: EventSource 타입 불일치 수정 필요
AdminClubContext.tsx41번 줄의eventSourceRef는 브라우저의 전역EventSource타입으로 선언되어 있지만,createApplicantSSE는eventsource라이브러리에서 임포트한EventSource타입을 반환합니다.
eventSourceRef.current = createApplicantSSE(...)에서eventsource라이브러리의EventSource를 브라우저의EventSource타입 ref에 할당하고 있어 타입 불일치가 발생합니다.
AdminClubContext.tsx에서import { EventSource } from 'eventsource';를 추가하고 ref 선언 타입을 일치시켜야 합니다.
🧹 Nitpick comments (2)
frontend/src/apis/clubSSE.ts (2)
12-53: 사용되지 않는 변수와 불필요한connect함수 래핑
eventSource변수(라인 12)와connect함수가 선언되어 있지만, 현재 구조에서는connect()가 한 번만 호출되고 즉시 반환됩니다. 재연결 로직이 이 함수 내부에 없다면 코드를 단순화할 수 있습니다.♻️ 단순화된 코드 제안
export const createApplicantSSE = ( applicationFormId: string, eventHandlers: ApplicantSSECallbacks, ): EventSource | null => { - let eventSource: EventSource | null = null; - - const connect = (): EventSource | null => { - const accessToken = localStorage.getItem('accessToken'); - if (!accessToken) return null; + const accessToken = localStorage.getItem('accessToken'); + if (!accessToken) return null; - const source = new EventSource( - `${API_BASE_URL}/api/club/applicant/${applicationFormId}/sse`, - { - fetch: (input, init) => - fetch(input, { - ...init, - headers: { - ...init?.headers, - Authorization: `Bearer ${accessToken}`, - }, - credentials: 'include', - }), - }, - ); + const source = new EventSource( + `${API_BASE_URL}/api/club/applicant/${applicationFormId}/sse`, + { + fetch: (input, init) => + fetch(input, { + ...init, + headers: { + ...init?.headers, + Authorization: `Bearer ${accessToken}`, + }, + credentials: 'include', + }), + }, + ); - source.addEventListener('applicant-status-changed', (e) => { - try { - const eventData: ApplicantStatusEvent = JSON.parse(e.data); - eventHandlers.onStatusChange(eventData); - } catch (parseError) { - console.error('SSE PARSING ERROR:', parseError); - } - }); + source.addEventListener('applicant-status-changed', (e) => { + try { + const eventData: ApplicantStatusEvent = JSON.parse(e.data); + eventHandlers.onStatusChange(eventData); + } catch (parseError) { + console.error('SSE PARSING ERROR:', parseError); + } + }); - source.onerror = (error) => { - source.close(); - eventHandlers.onError( - new Error(error?.message || 'SSE connection error'), - ); - }; + source.onerror = (error) => { + source.close(); + eventHandlers.onError( + new Error(error?.message || 'SSE connection error'), + ); + }; - return source; - }; - - eventSource = connect(); - return eventSource; + return source; };
37-39: 파싱 에러 시 사용자에게 피드백 누락JSON 파싱 에러가 발생해도
console.error만 호출하고eventHandlers.onError를 호출하지 않습니다. 이로 인해 잘못된 데이터 수신 시 호출자가 인지하지 못할 수 있습니다.♻️ 에러 핸들러 호출 추가
source.addEventListener('applicant-status-changed', (e) => { try { const eventData: ApplicantStatusEvent = JSON.parse(e.data); eventHandlers.onStatusChange(eventData); } catch (parseError) { console.error('SSE PARSING ERROR:', parseError); + eventHandlers.onError(new Error('Failed to parse SSE event data')); } });
2 participants
#️⃣연관된 이슈
📝작업 내용
중점적으로 리뷰받고 싶은 부분(선택)
논의하고 싶은 부분(선택)
🫡 참고사항