refactor: 네트워크 요청 최적화 및 Prefetch 추가 (#313)#316
Conversation
Summary of ChangesHello @PeraSite, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 Pull Request는 애플리케이션의 전반적인 성능과 사용자 경험을 향상시키기 위해 API 호출을 최적화하고 데이터 캐싱 전략을 개선하는 데 중점을 둡니다. 특히, 영상 목록 관리, 슬라이드 대본 로딩, 공유 피드백 댓글 처리 방식에서 불필요한 네트워크 요청을 줄이고 데이터 동기화 로직을 효율화했습니다. 또한, 사용자 인터페이스의 시각적 개선과 함께 중요한 기능에 대한 회귀 방지 테스트를 도입하여 코드의 안정성을 강화했습니다. Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This PR is an important refactoring focused on optimizing API calls and improving cache strategy, including the introduction of the useProjectEntryPrefetch hook, addressing N+1 issues, and enhancing UI responsiveness with optimistic updates. However, instances were identified where untrusted URL parameters (like shareToken and sessionId) are used in API requests without proper URL encoding. This introduces risks of path traversal and query parameter injection. It is recommended to consistently use encodeURIComponent() for such variables interpolated into URL paths or query strings. Overall, the code quality is very high, and the changes are expected to significantly enhance application performance and user experience, despite a few minor maintainability improvement suggestions.
There was a problem hiding this comment.
Pull request overview
이 PR은 API 과호출을 줄이고 대본 캐시/프리패치를 최적화하여 사용자 경험을 개선하는 리팩토링 작업입니다. 프로젝트 진입 시 슬라이드와 대본을 미리 적재하고, 불필요한 폴링을 제거하며, 영상 목록의 쿼리 키를 표준화하여 캐시 관리를 개선했습니다. 또한 공유 피드백 댓글 조회를 단일 소스로 통합하고, 조건부 API 호출로 중복 요청을 제거했습니다.
Changes:
- 영상 목록 쿼리 키를
listPrefix/list(projectId, params)구조로 표준화하고 업데이트/삭제 시 optimistic updates 추가 useProjectEntryPrefetch훅으로 프로젝트 진입 시 슬라이드/대본 prefetch 구현useSlides기본 폴링 비활성화 및liveSync옵션 추가 (SlidePage만 15초 폴링 유지)- 공유 피드백 댓글을
useSharedComments단일 소스로 통합하고 타임라인/상세 API 조건부 호출 - 대본 UI 개선: floating 예상 시간 배지, 읽기 속도 슬라이더 테두리 스타일 조정
- 회귀 방지 테스트 추가
Reviewed changes
Copilot reviewed 24 out of 24 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
src/api/queryClient.ts |
영상 쿼리 키를 listPrefix/list 계층 구조로 변경, scripts 쿼리 키에 projects() 추가 |
src/api/queryClient.test.ts |
영상 쿼리 키 빌드 테스트 추가 |
src/hooks/queries/useSlides.ts |
enabled, liveSync, pollingIntervalMs 옵션 추가하여 폴링 제어 |
src/hooks/queries/useSlides.test.tsx |
useSlides 옵션 동작 테스트 추가 |
src/hooks/queries/useSharedComments.ts |
enabled, staleTime 옵션 추가 |
src/hooks/queries/useScript.ts |
enabled, staleTime 옵션 추가 및 캐시 업데이트 로직 추가 |
src/hooks/queries/useProjectEntryPrefetch.ts |
프로젝트 진입 시 슬라이드/대본 prefetch 훅 구현 |
src/hooks/useScriptBulkEdit.ts |
ensureQueryData로 대본 조회 최적화, enabled: false로 자동 재요청 방지 |
src/hooks/usePresentationVideos.ts |
표준화된 쿼리 키 사용 |
src/hooks/useInsightPageModel.ts |
useSlides liveSync: false 설정 |
src/pages/SlidePage.tsx |
useSlides liveSync: true, 15초 폴링 설정 |
src/pages/VideoDetailPage.tsx |
개별 getScript 호출 제거, useProjectScripts로 일괄 조회 |
src/pages/VideoRecordPage.tsx |
prefetch 훅 추가, listPrefix 쿼리 키 사용 |
src/pages/VideoListPage.tsx |
optimistic updates 구현, listPrefix 쿼리 키 사용 |
src/pages/FeedbackVideoPage.tsx |
variant="inverted" 제거 |
src/pages/feedback/useFeedbackVideo.ts |
useSharedComments 통합, 조건부 API 호출, invalidateQueries 패턴 적용 |
src/pages/feedback/useFeedbackVideo.test.tsx |
API 조건부 호출 및 댓글 invalidate 테스트 추가 |
src/pages/feedback/useFeedbackSlide.ts |
useSharedComments 통합, invalidateQueries 패턴 적용 |
src/pages/requestOptimizationRegression.test.ts |
API 과호출 회귀 방지 테스트 추가 |
src/components/common/layout/Gnb.tsx |
prefetch 훅 추가 |
src/components/video/RecordingSection.tsx |
useProjectScripts로 대본 일괄 조회, 개별 useScript 제거 |
src/components/slide/SlideWorkspace.tsx |
프로젝트 대본 우선 조회 후 개별 대본 fallback 구조 |
src/components/slide/script/ScriptBoxContent.tsx |
floating 예상 시간 배지 스타일 변경, textarea 패딩 조정 |
src/components/slide/script/ScriptReadingSpeedModal.tsx |
슬라이더 테두리 및 스타일 개선 |
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
PeraSite
changed the title
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
📌 관련 이슈
✨ 변경 내용
queryKeys.videos.listPrefix/list(projectId, params)로 표준화하고, 업로드/수정/삭제 후 invalidation 대상을 정리했습니다.slides/project scriptsprefetch를 추가하고(useProjectEntryPrefetch), 대본 조회 경로를 캐시 우선으로 통합해 중복 요청을 줄였습니다.useSlides를 옵션 기반으로 개편해 기본 non-polling으로 전환하고, SlidePage만 15초 라이브 동기화를 유지했습니다.useSharedComments단일 소스로 통합하고, 타임라인/상세 API 조건부 호출로 불필요 요청을 제거했습니다./share비디오 대본 active 표시 교정.requestOptimizationRegression,useSlides,useFeedbackVideo,queryKeys).💡 참고 사항
npm run type-checknpm run test -- src/api/queryClient.test.ts src/hooks/queries/useSlides.test.tsx src/pages/feedback/useFeedbackVideo.test.tsx src/pages/requestOptimizationRegression.test.ts