[DEV] 회원 탈퇴 api 연동

[sejeong223]

💡 Related Issue

closed #265

✅ Summary

회원 탈퇴 api를 연결했습니다.

📝 Description

• 탈퇴 요청 성공 시 캐시를 초기화하고 메인 페이지로 이동하도록 처리했습니다.
• 탈퇴 요청 중 중복 클릭으로 인한 다중 요청을 방지하기 위해 isPending을 활용해 버튼을 비활성화했습니다.

💬 리뷰 요구 사항

[gemini-code-assist]

Summary of Changes

Hello @sejeong223, 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은 회원 탈퇴 기능을 완전히 통합하여 사용자가 안전하고 효율적으로 계정을 삭제할 수 있도록 합니다. 백엔드 API 연동부터 프론트엔드 로직 처리, 그리고 사용자 인터페이스 개선까지 전반적인 탈퇴 프로세스를 구현하여, 중복 요청을 방지하고 성공적인 탈퇴 후 적절한 상태 관리 및 페이지 이동을 보장합니다.

Highlights

• 회원 탈퇴 API 연동: 회원 탈퇴를 위한 새로운 API 엔드포인트(DELETE /members/withdraw)를 frontend/src/api/user.ts 파일에 추가하여 백엔드와의 통신을 구현했습니다.
• 탈퇴 로직 구현: useWithdrawSettings 훅을 새로 생성하여 회원 탈퇴 요청 성공 시 캐시 초기화, 인증 정보 삭제, 메인 페이지로 이동하는 등 프론트엔드에서의 전체 탈퇴 처리 로직을 구현했습니다.
• 중복 요청 방지 및 UI 개선: 탈퇴 요청 중 isPending 상태를 활용하여 버튼을 비활성화함으로써 사용자의 중복 클릭으로 인한 다중 요청을 방지하고, 사용자 경험을 개선했습니다.
• 모달 컴포넌트 리팩토링: 탈퇴 확인 모달 컴포넌트의 파일명과 컴포넌트명을 WithdrawlModal에서 WithdrawModal로 변경하고, isPending prop을 추가하여 버튼 비활성화 기능을 연동했습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

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

회원 탈퇴 API 연동을 위한 PR 잘 보았습니다. 전반적으로 API 연동, 상태 관리, UI 업데이트 로직이 잘 구현되었습니다. 몇 가지 개선점을 제안드립니다. useWithdrawSettings 훅에서 에러 처리를 위해 alert 대신 토스트 메시지를 사용하는 것을 고려해보세요. 또한, 회원 탈퇴 요청이 진행 중일 때 모달이 닫히지 않도록 수정하여 사용자 혼란을 방지하는 것이 좋겠습니다. 자세한 내용은 각 파일의 리뷰 코멘트를 참고해주세요.

[gemini-code-assist]

사용자 경험을 위해 alert 대신 토스트나 스낵바와 같은 UI 컴포넌트를 사용하여 에러 메시지를 표시하는 것을 고려해보세요. alert는 브라우저의 기본 기능을 사용하여 사용자 인터페이스의 일관성을 해치고, 사용자 경험을 저해할 수 있습니다.