Feature: 온보딩 페이지 API 연동#12
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @jeongsarang-0701, 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!
I've implemented the API integration for the onboarding pages, allowing user profile data to be collected and sent to the backend. This involves creating a dedicated hook for API calls, integrating it into the onboarding flow, and providing visual feedback to the user during the process. Additionally, I've addressed some minor data handling and naming inconsistencies, and configured a development proxy for seamless API communication.
Highlights
- New API Integration Hook: I've introduced a new React hook,
useUpdateUserProfile, which leverages@tanstack/react-queryto handle the API integration for updating user profiles during the onboarding process. This hook encapsulates the logic for making PATCH requests to the/api/usersendpoint. - Onboarding Data Submission: The onboarding data, including user details and social links, is now collected and submitted to the backend API upon completion of the relevant onboarding steps. This ensures that user information is persisted.
- Enhanced User Feedback and Loading States: I've implemented UI feedback using
react-hot-toastto provide clear success or error messages to the user after profile updates. Additionally, the submit button inOnboardingStep3now displays a loading state ('저장 중...') and is disabled while the API call is in progress, improving the user experience. - Variable Name Correction: To ensure consistency and correctness, I've renamed the
linkedinproperty tolinkedInacross theOnboardingDatainterface and related components (OnboardingPage.tsx,OnboardingStep3.tsx). This aligns with common camelCase conventions. - Frontend Proxy Setup: A proxy configuration has been added to
vite.config.tsto redirect/apirequests tohttp://localhost:3000/. This is crucial for handling API calls during local development, preventing CORS issues. - Minor Bug Fixes in Onboarding Step 1: Minor adjustments were made in
OnboardingStep1.tsxto refine the age validation logic, specifically removing redundantNumber()casts, making the code cleaner and more robust.
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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| 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 issue 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 or fill out our survey to provide feedback.
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
-
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. ↩
There was a problem hiding this comment.
Code Review
온보딩 페이지 API 연동을 위한 PR 잘 보았습니다. 전반적으로 react-query를 사용한 비동기 상태 관리가 잘 적용되었습니다. 다만, 몇 가지 개선점과 수정이 필요한 부분이 보입니다. 특히 온보딩 마지막 단계로 넘어가는 로직에 버그가 있어 사용자가 최종 완료 화면을 볼 수 없습니다. 이 부분을 수정해야 합니다. 또한, 스타일 가이드에서는 모든 코드에 대한 자동화 테스트를 요구하고 있으나, 새로 추가된 useOnboarding 훅에 대한 테스트 코드가 누락되었습니다. 코드의 안정성을 높이기 위해 테스트 코드를 추가하는 것을 고려해 주세요. 자세한 내용은 각 파일에 남긴 코멘트를 확인해주세요.
| setStep((prev) => prev + 1); | ||
| } else { | ||
| console.log("최종 데이터:", newData); | ||
| updateUserProfile(newData as OnboardingData); |
There was a problem hiding this comment.
현재 updateUserProfile을 호출하면 useOnboarding 훅에 정의된 onSuccess가 실행되어 바로 홈페이지('/')로 이동합니다. 이 때문에 온보딩 완료 화면(4단계)이 보이지 않는 문제가 있습니다. react-query의 mutate 함수는 두 번째 인자로 개별 호출에 대한 콜백을 지정할 수 있습니다. 이를 사용하여 온보딩 플로우에서는 onSuccess 시 setStep(4)를 호출하도록 덮어쓰는 것을 제안합니다.
updateUserProfile(newData as OnboardingData, {
onSuccess: () => {
setStep(4);
},
});| if (!payload.email) delete payload.email; | ||
| if (!payload.linkedIn) delete payload.linkedIn; | ||
| if (!payload.instagram) delete payload.instagram; | ||
| if (!payload.blog) delete payload.blog; |
There was a problem hiding this comment.
선택적 필드를 페이로드에서 제거하는 로직이 반복적으로 작성되어 있습니다. forEach 루프를 사용하여 이 로직을 더 간결하게 만들 수 있습니다. 이렇게 하면 나중에 다른 선택적 필드를 추가할 때 더 쉽게 확장할 수 있습니다.
| if (!payload.email) delete payload.email; | |
| if (!payload.linkedIn) delete payload.linkedIn; | |
| if (!payload.instagram) delete payload.instagram; | |
| if (!payload.blog) delete payload.blog; | |
| (['email', 'linkedIn', 'instagram', 'blog'] as const).forEach((key) => { | |
| if (!payload[key]) { | |
| delete payload[key]; | |
| } | |
| }); |
| /* | ||
| createRoot(document.getElementById("root")!).render( | ||
| <StrictMode> | ||
| <QueryClientProvider client={queryClient}> | ||
| <RouterProvider router={router} /> | ||
| </QueryClientProvider> | ||
| </StrictMode> | ||
| ); | ||
| */ No newline at end of file |
There was a problem hiding this comment.
주석 처리된 코드가 남아있습니다. 사용하지 않는 코드는 혼란을 줄 수 있으므로 제거하는 것이 좋습니다.
|
로그인 완료
|
|
👍확인했습니다. 일부 설정이 달라 충돌 가능성 보여서 merge는 하지 않고 코드 일부 발췌해서 쓰겠습니다. 고생하셨습니다. |
2 participants
📌 PR 종류 (PR Type)
📝 요약 (Summary)
온보딩 페이지에 api 연동했습니다
🔍 상세 내용 (Describe your changes)
📸 스크린샷 (필수)
✅ 확인 사항 (CheckList)
💬 기타 참고사항 (Optional)
데이터 넘긴 후 401 오류가 해결이 어려워서 온보딩 4페이지까지 넘어가는건 아직 확인하지 못했습니다 ㅠㅠ