feat: 마이페이지 api 연동

[hyeeuncho]

유저 정보 불러오기

정보 입력받아 수정하기

Summary by CodeRabbit

• Refactor
  • 사용자 정보가 하드코딩 방식에서 동적으로 불러오는 방식으로 개선되었습니다.
  • 폼의 기본값과 입력란이 실제 사용자 데이터로 자동 초기화되고, 변경 시 자동 반영됩니다.
  • 저장 시 성공 및 실패 알림이 제공됩니다.

[coderabbitai]

Walkthrough

MyPage 컴포넌트가 리팩터링되어, 기존의 하드코딩된 사용자 정보 대신 사용자 데이터를 커스텀 훅(useUserInfo)을 통해 동적으로 가져오고 업데이트하도록 변경되었습니다. 폼의 기본값은 이제 가져온 사용자 정보로 초기화되며, 사용자 정보가 변경될 때마다 useEffect로 폼 필드가 갱신됩니다. 제출 핸들러가 onSubmit으로 이름이 변경되고, 제출 시 업데이트된 사용자 객체를 생성하여 updateUser 뮤테이션을 호출합니다. 성공 시 인증 스토어의 사용자 이름을 갱신하고 성공 알림을, 실패 시 실패 알림과 에러 로그를 출력합니다. 변경 감지 로직도 동적으로 수정되었습니다.

Changes

파일/경로	변경 요약
src/pages/menu/ui/MyPage.tsx	하드코딩된 사용자 정보 제거, useUserInfo 훅을 통한 동적 데이터 사용, 폼 초기값 및 제출 로직 리팩터링, 제출 핸들러 이름 변경 및 구현 수정, 로딩/에러 상태 UI 추가

Poem

🐰
폼의 이름, 이메일, 전화번호
이제는 동적으로 변해요
하드코딩은 안녕,
훅과 함께 춤을 춰요!
성공 알림이 반짝,
토끼도 기뻐 깡총깡총
사용자 정보, 이제 믿을 수 있죠!

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6b64742 and de3f1cd.

📒 Files selected for processing (1)

• src/pages/menu/ui/MyPage.tsx (4 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/pages/menu/ui/MyPage.tsx

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

📖storybook: https://677a88d1e04e06676106db14-gtsdcngqie.chromatic.com/

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

src/pages/menu/ui/MyPage.tsx (2)

42-51: API 오류 처리가 잘 구현되었습니다.

API 호출에 대한 성공 및 실패 콜백이 적절하게 구현되어 있습니다. 사용자에게 알림을 표시하고 오류를 로깅하는 것이 좋습니다.

다만, 네이티브 alert() 대신 더 사용자 친화적인 알림 컴포넌트를 사용하는 것을 고려해 보세요.

---

34-52: 폼 제출 중 로딩 상태 표시가 필요합니다.

현재 폼 제출 중에 로딩 상태가 표시되지 않아, 사용자는 업데이트가 진행 중인지 알 수 없습니다.

제출 버튼에 로딩 상태를 추가하는 것을 고려해보세요:

const [isSubmitting, setIsSubmitting] = useState(false);

const onSubmit: SubmitHandler<{ name: string; phone: string }> = (formData) => {
  setIsSubmitting(true);
  // ... 기존 코드
  updateUser(updatedData, {
    onSuccess: () => {
      // ... 기존 코드
      setIsSubmitting(false);
    },
    onError: (err) => {
      // ... 기존 코드
      setIsSubmitting(false);
    },
  });
  // ... 기존 코드
};

// 버튼 컴포넌트 부분
<TertiaryButton 
  label={isSubmitting ? "저장 중..." : "저장하기"} 
  disabled={isSubmitting}
  // ... 기존 props
/>

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8ac2b53 and 6b64742.

📒 Files selected for processing (1)

• src/pages/menu/ui/MyPage.tsx (4 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: storybook

🔇 Additional comments (5)

src/pages/menu/ui/MyPage.tsx (5)

1-1: 필요한 모듈과 훅이 적절하게 임포트 되었습니다.

사용자 데이터를 동적으로 관리하기 위한 모든 필수 요소들(useEffect, SubmitHandler, 사용자 정보 관련 커스텀 훅, 인증 스토어)이 잘 임포트되었습니다.

Also applies to: 5-5, 9-10

---

13-15: API 연동 구현이 잘 이루어졌습니다.

사용자 정보를 가져오고 업데이트하기 위한 커스텀 훅을 적절히 사용했습니다. 폼의 기본값도 API에서 가져온 데이터로 초기화하여 하드코딩을 제거했습니다.

Also applies to: 24-24

---

27-32: 데이터 변경 시 폼 필드 업데이트 로직이 적절합니다.

API에서 데이터가 로드될 때 폼 필드를 업데이트하는 useEffect가 잘 구현되어 있습니다.

---

54-60: 변경 감지 로직이 잘 업데이트되었습니다.

하드코딩된 값 대신 API에서 가져온 데이터를 사용하여 변경 사항을 감지하는 로직이 적절히 구현되었습니다.

---

73-73: UI가 동적 데이터를 활용하도록 적절히 업데이트되었습니다.

이메일 표시 및 폼 필드의 placeholder가 하드코딩된 값 대신 API에서 가져온 데이터를 사용하도록 변경되었습니다.

Also applies to: 76-76, 81-81, 91-91

[github-actions]

📖storybook: https://677a88d1e04e06676106db14-dzoummsgoo.chromatic.com/

[Yejiin21]

수고하셨습니다