deploy: 2.1.0 배포

[AndyH0ng]

📌 관련 이슈

• close deploy: 2.1.0 배포 #154

💡 참고 사항

스크린샷, 참고 링크, 추가 설명 등 (없으면 생략 가능)

[gemini-code-assist]

Summary of Changes

Hello @AndyH0ng, I'm Gemini Code Assist¹! 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!

이 PR은 사용자 인증 및 데이터 관리 기능을 강화하고, 전반적인 사용자 경험을 개선하는 데 중점을 둡니다. 로그인 상태에 따른 UI 변화와 회원 탈퇴 기능을 도입하여 사용자 편의성을 높였으며, 인증 관련 에러 처리와 데이터 갱신 로직을 최적화하여 애플리케이션의 안정성을 향상시켰습니다. 또한, 실시간 피드백 알림을 지능적으로 관리하고 파일 업로드 컴포넌트의 접근성을 개선하는 등 다양한 부분에서 사용자 인터페이스와 내부 로직을 다듬었습니다.

Highlights

• 로그인/회원 탈퇴 기능 개선: 로그인 버튼이 로그인 상태에 따라 사용자 프로필과 이름으로 변경되며, 드롭다운 메뉴를 통해 로그아웃 및 회원 탈퇴 기능을 제공합니다. 회원 탈퇴 시 확인 모달이 표시됩니다.
• 인증 관련 사용자 경험 개선: 로그인 시 발표 목록 쿼리를 즉시 무효화하여 최신 데이터를 반영하고, 401 에러 발생 시 비로그인 상태에서는 불필요한 토스트 메시지와 로그아웃 처리를 방지합니다. 또한, 슬라이드 폴링 중 401 에러 발생 시 폴링을 중단하도록 개선했습니다.
• 실시간 피드백 알림 최적화: 웹소켓을 통한 새 댓글 및 리액션 알림이 본인 활동일 경우 토스트 메시지를 표시하지 않도록 변경하여 불필요한 알림을 줄였습니다. 댓글 삭제 시 토스트 메시지는 제거되었습니다.
• 파일 드롭존 접근성 및 타입 개선: 파일 드롭존 컴포넌트의 드래그 이벤트 핸들러 타입을 수정하고, HTML 버튼 대신 role="button"을 가진 div 요소를 사용하여 키보드 접근성(Enter/Space 키로 파일 선택)을 추가했습니다.
• Content Security Policy (CSP) 업데이트: firebase.json 파일의 CSP 설정에 Cloudflare Insights 스크립트 소스와 CDN 연결 소스를 추가하여 보안 정책을 확장했습니다.
• 데이터 변환 상태 상세화: API 응답에서 사용되는 ConversionStatus 타입에 'queued'와 'partial_done' 상태를 추가하여 파일 변환 진행 상황을 더 세분화하여 추적할 수 있도록 했습니다.

Changelog

• firebase.json
  • Content Security Policy(CSP)에 Cloudflare Insights 및 CDN 도메인을 추가했습니다.
• src/App.tsx
  • 로그인 시 발표 목록 쿼리를 무효화하는 useEffect 훅을 추가했습니다.
  • useQueryClient 및 queryKeys를 임포트했습니다.
• src/api/errorHandler.ts
  • 401 에러 발생 시 로그인 상태일 때만 로그아웃 및 토스트 메시지를 표시하도록 로직을 수정했습니다.
• src/assets/icons/icon-logout.svg
  • SVG 아이콘의 stroke 속성 값을 currentColor로 변경하여 테마에 맞게 색상이 적용되도록 했습니다.
• src/components/common/FileDropzone.tsx
  • 드래그 이벤트 핸들러의 이벤트 타입(React.DragEvent)을 HTMLButtonElement에서 HTMLDivElement로 수정했습니다.
  • 컴포넌트의 루트 요소를 <button>에서 role="button"을 가진 <div>로 변경하고 tabIndex 및 aria-disabled 속성을 추가했습니다.
  • Enter 또는 Space 키를 눌러 파일 선택 대화상자를 열 수 있도록 onKeyDown 핸들러를 추가하여 키보드 접근성을 개선했습니다.
• src/components/common/layout/LoginButton.tsx
  • 로그인 상태에 따라 '로그인' 버튼 또는 사용자 프로필/이름을 표시하도록 컴포넌트를 재구성했습니다.
  • 로그인 상태일 때 로그아웃 및 회원 탈퇴 옵션을 제공하는 드롭다운 메뉴를 추가했습니다.
  • 회원 탈퇴 확인 모달과 실제 회원 탈퇴 API 호출 로직을 구현했습니다.
  • apiClient, LogoutIcon, Dropdown, Modal, showToast를 임포트했습니다.
• src/hooks/queries/usePresentations.ts
  • usePresentationsWithFilters 훅에 enabled 옵션을 추가했습니다.
  • useUpdatePresentation 훅에서 발표 업데이트 성공 시 발표 목록 캐시를 즉시 업데이트하도록 로직을 추가했습니다.
• src/hooks/queries/useSlides.ts
  • isAxiosError를 임포트하고 useQuery에 retry: false 옵션을 추가했습니다.
  • 슬라이드 목록 폴링(refetchInterval) 중 401 에러 발생 시 폴링을 중단하도록 로직을 수정했습니다.
• src/hooks/useAutoSaveScript.ts
  • 스크립트 자동 저장 성공 시 표시되는 토스트 메시지를 더 구체적으로 변경했습니다.
• src/hooks/useFeedbackWebSocket.ts
  • useRef와 useAuthStore를 임포트했습니다.
  • 새 댓글 및 리액션 알림 토스트가 본인 활동일 경우 표시되지 않도록 로직을 추가했습니다.
  • 댓글 삭제 알림 토스트를 제거했습니다.
  • 웹소켓 연결 성공 및 연결 끊김 알림 토스트 메시지를 간소화했습니다.
• src/hooks/useSlideCommentsActions.ts
  • 댓글 목록을 생성 시간순(오래된 -> 최신)으로 정렬하도록 로직을 추가했습니다.
  • 로컬 및 서버 댓글 삭제 성공 시 토스트 메시지를 추가했습니다.
• src/hooks/useVideoComments.ts
  • 비디오 댓글 삭제 시 targetComment.serverId 유효성 검사 로직을 제거했습니다.
• src/pages/HomePage.tsx
  • useAuthStore를 임포트하고 사용자 로그인 상태에 따라 발표 목록 쿼리를 조건부로 활성화하도록 변경했습니다.
• src/types/api.ts
  • ConversionStatus 타입에 'queued'와 'partial_done' 상태를 추가했습니다.

Using Gemini Code Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

이번 PR은 2.1.0 배포를 위한 다양한 개선 사항을 포함하고 있습니다. 주요 변경 사항으로는 로그인/로그아웃 기능 강화, 콘텐츠 보안 정책(CSP) 개선, 웹소켓 알림 최적화, 그리고 여러 UI/UX 개선 및 버그 수정이 있습니다.

전반적으로 코드 품질을 높이는 좋은 변경들이 많습니다. 특히 로그인 상태에 따라 UI와 데이터 로딩을 다르게 처리하고, 불필요한 토스트 알림을 줄여 사용자 경험을 개선한 점이 인상적입니다.

제시된 두 가지 개선 사항(CSP 설정에서 style-src의 보안 강화 및 댓글 삭제 로직의 엣지 케이스 방어 코드 추가)은 여전히 유효하며, 검토 후 반영해주시면 감사하겠습니다.

[gemini-code-assist]

버그를 수정한 것은 좋지만, targetComment.serverId가 없는 경우에 대한 처리가 누락되어 deleteVideoComment(undefined)가 호출될 수 있습니다. 이는 API 오류를 유발할 수 있습니다. serverId가 있을 때만 API를 호출하도록 방어 코드를 추가하는 것이 좋습니다. 이렇게 하면 로컬에서만 생성된 댓글도 정상적으로 (낙관적 업데이트를 통해) 삭제 처리됩니다.

      if (targetComment.serverId) {
        await deleteVideoComment(targetComment.serverId);
      }

[gemini-code-assist]

Content-Security-Policy에서 script-src의 'unsafe-inline'과 'unsafe-eval'을 제거하여 보안을 강화한 점은 매우 좋습니다. 하지만 style-src에는 여전히 'unsafe-inline'이 남아있습니다. 이는 인라인 스타일을 허용하여 잠재적인 Cross-Site Scripting (XSS) 공격의 경로가 될 수 있습니다. 가능하다면 이 지시문을 제거하고 클래스 기반 스타일링을 사용하거나, 스타일을 위한 nonce 또는 hash를 사용하는 것을 고려해 보세요.