✨ [SCRUM-33] FE 프로필 API 연동

[Kristyn-Yoon]

Explain this Pull Request 🙏

• Jira Ticket : SCRUM-33
• Figma URL: https://www.figma.com/design/3jOOTGVA7NqLIWRyvKJuR5/Proto?node-id=0-1&t=oLiOrgMJuNzkxbxG-1

What has changed? 🤔

• 프로필 API 연동!
  • get /api/v1/users/{user_id} : 유저의 레벨, 경험치, 완료한 투두들, 이름, 이메일
  • put /api/v1/users/{user_id} : 유저가 입력한 정보
  • put /api/v1/users/{user_id}/characters/ : 도감

Whether needed review 🖍

• 🙋🏻 리뷰가 필요합니다!
• 🙅🏻 리뷰가 필요하지 않습니다!

Document🗒️ (Optional)

Screenshot 📸 (Optional)

api.mp4

Test Checklist ✅ (Optional)

[gemini-code-assist]

Hello @Kristyn-Yoon, 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!

Summary of Changes

This pull request focuses on integrating the profile API with the frontend. It includes fetching user profile data (level, experience, completed todos, name, email) and character collection data, as well as updating user information via PUT requests. The changes involve creating new API functions, modifying components to use the fetched data, and updating the profile modal to handle user input and data submission.

Highlights

• API Integration: Integrates profile and character APIs to fetch user data and display it on the profile page.
• Data Display: Modifies components like ProfileHeaderContent, UserStats, and CharacterGrid to display data fetched from the API.
• Profile Update: Implements functionality to update user data (sex, age, job) through a modal form.

Changelog

Click here to see the changelog

• apis/character.ts
  • Defines CharacterResponse type.
  • Implements getCharacterItems function to fetch character collection data for a user.
• apis/profile.ts
  • Defines ProfileResponse and ProfileRequest types.
  • Implements getProfileItems function to fetch user profile data.
  • Implements updateUserData function to update user profile information.
• components/service/profile/CharacterCard.tsx
  • Updates Image component src to accept direct image links instead of local paths.
  • Adds conditional styling to display locked characters in grayscale.
• components/service/profile/CharacterGrid.tsx
  • Updates the characters prop type definition to include name.
• components/service/profile/CharacterGridHeader.tsx
  • Accepts characterCount as a prop to display the number of collected characters.
  • Updates the display to show the dynamic characterCount.
• components/service/profile/Profile.tsx
  • Fetches profile and character data using getProfileItems and getCharacterItems.
  • Uses useState and useEffect hooks to manage profile and character data.
  • Passes fetched data to child components for display.
• components/service/profile/ProfileHeaderContent.tsx
  • Accepts id, name, and email as props to display user information.
  • Passes id and email props to the ProfileModal component.
• components/service/profile/ProfileModal/ProfileModal.tsx
  • Accepts id and email as props.
  • Implements form submission logic to update user data using updateUserData.
  • Adds loading state and error handling for the form submission.
  • Displays the user's email as the ID in the modal.
• components/service/profile/UserStats.tsx
  • Accepts level, exp, and completedTodoCount as props to display user statistics.
  • Updates the component to display dynamic user statistics.
• next.config.ts
  • Configures image domains to allow images from 'gugitsa.blob.core.windows.net'.

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 is currently in preview and 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 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.

---

APIs connect,
Data flows, a profile shown,
Users now update.

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

This pull request introduces the profile API integration, including fetching and updating user profile information and character data. The changes involve creating new API functions, updating components to use the new API data, and modifying the profile modal to allow users to update their information. Overall, the code is well-structured and addresses the intended functionality.

Summary of Findings

• Error Handling in API Calls: The API calls in apis/profile.ts and apis/character.ts have similar error handling blocks. Consider creating a reusable function to handle API errors consistently across the application. This will reduce code duplication and improve maintainability.
• Data Validation Before API Call: In ProfileModal.tsx, there's a check for isNaN(ageValue) || ageValue <= 0 before calling saveProfile. It would be better to rely on the zod schema validation to handle this, rather than doing it manually.
• Loading State Management: The loading state in Profile.tsx could be improved by providing a more informative loading message or a skeleton UI to enhance the user experience.

Merge Readiness

The pull request is almost ready for merging. Addressing the error handling and data validation suggestions would improve the code quality and robustness. I am unable to directly approve the pull request, and recommend that others review and approve this code before merging. At a minimum, the high severity comments should be addressed before merging.

[Yoonsoyoung02]

/lgtm