fix: 버그 수정 (#147)

[AndyH0ng]

📌 관련 이슈

• close fix: 파일 업로드 시 DOM 중첩 오류 #147 fix: 401 토스트 출력 로직 개선 #148 feat: 로그인 성공 후 화면 갱신 #149 feat: 로그인 여부 확인 후에 스켈레톤 렌더링 #150

✨ 변경 내용

• DropZone button DOM 중첩 해결
• 401 핸들링 개선
• 로그인 성공 후 갱신
• 비로그인 시 스켈레톤 렌더 방지

💡 참고 사항

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

[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은 사용자 경험과 애플리케이션 안정성을 향상시키기 위한 여러 버그 수정 및 개선 사항을 포함합니다. 주요 변경 사항으로는 DropZone 컴포넌트의 접근성 및 구조적 문제를 해결하고, 인증 만료 시의 에러 처리 로직을 보다 견고하게 만들었으며, 로그인 상태 변화에 따라 데이터가 적절히 갱신되도록 하여 비로그인 사용자를 위한 불필요한 데이터 요청 및 UI 렌더링을 최적화했습니다. 또한, 서비스 운영에 필요한 외부 스크립트 로드를 위해 보안 정책을 업데이트했습니다.

Highlights

• DropZone DOM 중첩 해결: DropZone 컴포넌트의 DOM 중첩 문제를 해결하여 접근성을 개선했습니다.
• 401 에러 핸들링 개선: 401 에러 발생 시 비로그인 상태에서는 불필요한 로그아웃 처리 및 토스트 메시지 표시를 방지하도록 로직을 개선했습니다.
• 로그인 성공 후 데이터 갱신: 로그인 성공 시 프레젠테이션 목록 데이터를 자동으로 갱신하도록 처리했습니다.
• 비로그인 시 스켈레톤 렌더링 방지: 비로그인 사용자의 경우 프레젠테이션 목록 스켈레톤 UI가 불필요하게 렌더링되는 것을 방지했습니다.
• CSP 정책 업데이트: Firebase의 Content-Security-Policy에 Cloudflare Insights 및 cdn.jsdelivr.net 도메인을 추가했습니다.

Changelog

• firebase.json
  • Cloudflare Insights 및 cdn.jsdelivr.net을 허용하도록 Content-Security-Policy의 script-src 및 connect-src를 업데이트했습니다.
• src/App.tsx
  • 로그인 상태(accessToken) 변경 시 presentations.lists 쿼리를 무효화하여 프레젠테이션 목록을 갱신하도록 useEffect 훅을 추가했습니다.
• src/api/errorHandler.ts
  • 401 에러 발생 시, 현재 로그인 상태인 경우에만 로그아웃 처리 및 토스트 메시지를 표시하도록 조건을 추가했습니다.
• src/components/common/FileDropzone.tsx
  • FileDropzone 컴포넌트의 루트 요소를 <button>에서 <div>로 변경하고 role="button" 및 키보드 이벤트를 추가하여 DOM 중첩 문제를 해결하고 접근성을 향상시켰습니다.
• src/hooks/queries/usePresentations.ts
  • usePresentationsWithFilters 훅에 enabled 옵션을 추가하여 쿼리 실행을 조건부로 제어할 수 있도록 했습니다.
• src/pages/HomePage.tsx
  • 로그인 상태(isLoggedIn)에 따라 usePresentations 및 usePresentationsWithFilters 훅의 enabled 옵션을 설정하여 비로그인 시 불필요한 데이터 요청 및 스켈레톤 렌더링을 방지했습니다.

Activity

• 현재까지 기록된 활동은 없습니다.

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은 여러 버그 수정과 개선 사항을 포함하고 있습니다. 주요 변경 사항으로는 DropZone 컴포넌트의 DOM 중첩 문제 해결, 401 에러 핸들링 개선, 로그인 성공 시 데이터 갱신, 그리고 비로그인 사용자에 대한 불필요한 스켈레톤 UI 렌더링 방지가 있습니다. 전반적으로 코드 품질과 사용자 경험을 향상시키는 좋은 변경이라고 생각합니다. 한 가지, HomePage.tsx에서 로딩 상태를 계산하는 로직을 조금 더 간결하게 만들 수 있는 부분을 제안드렸습니다.