Feat: #192 링크 수정 기능 구현

[Yoonyesol]

PR Type

What kind of change does this PR introduce?

• [Feat] 새로운 기능을 추가했어요.

Related Issues

• close 링크 수정 기능 구현 #192

What does this PR do?

• 링크 수정 네트워크 로직 작성
• 링크 수정 MSW 모킹 함수 작성
• 테스트

View

성공

오류

Other information

즉각적인 추가 / 삭제를 위해 추가적인 링크 추가 및 링크 삭제 API를 고려했었는데,
수정 API만으로도 UI 변경 없이 구현이 되더라고요!
거기다 마감 기한이 다가온 상황이라, 우선은 추가적인 API 없이 수정 API만으로 작업을 진행했습니다😂
백엔드 담당자 분과도 추후 리팩토링 할 때 추가 API, 삭제 API를 추가할지 이야기를 한번 더 나눠보기로 대화가 되어서, 우선은 수정 API만으로 기능을 구현했습니다!

[coderabbitai]

Walkthrough

LinkContainer 컴포넌트가 수정되어 새로운 page prop을 추가하고 비동기 작업을 관리하는 로딩 상태를 포함하도록 변경되었습니다. useUpdateLinks 훅이 추가되어 사용자 링크를 업데이트하는 기능이 구현되었으며, 사용자 링크 업데이트를 위한 새로운 API 엔드포인트가 추가되었습니다. 이 외에도 여러 컴포넌트에서 LinkContainer의 사용 방식이 변경되어, 사용자 설정 및 가입 페이지에서 링크 관리 기능이 향상되었습니다.

Changes

파일 경로	변경 요약
src/components/user/auth-form/LinkContainer.tsx	page prop 추가, 로딩 상태 관리 및 링크 업데이트 처리 로직 추가.
src/hooks/query/useUserQuery.ts	useUpdateLinks 훅 추가, 사용자 링크 업데이트를 위한 뮤테이션 로직 구현.
src/mocks/services/userServiceHandler.ts	사용자 링크 업데이트를 위한 새로운 API 엔드포인트 추가.
src/pages/setting/UserSettingPage.tsx	LinkContainer에 page="UserSetting" prop 추가.
src/pages/user/SignUpPage.tsx	LinkContainer에 page="SignUp" prop 추가.
src/services/userService.ts	사용자 링크 업데이트를 위한 updateLinks 함수 추가.
src/stores/useStore.ts	UserStore 타입 수정, editUserInfo 메서드에 새로운 입력 타입 추가.
src/types/UserType.tsx	EditUserLinksForm 타입 추가.
src/utils/queryKeyGenerator.ts	links 상수 및 generateLinksQueryKey 함수 추가.

Assessment against linked issues

Objective	Addressed	Explanation
링크 수정 네트워크 로직 작성 (#192)	✅
링크 수정 MSW 모킹 함수 작성 (#192)	❌	MSW 모킹 함수에 대한 구현이 포함되어 있지 않음.
테스트 (#192)	❓	테스트 관련 내용이 포함되어 있지 않아 불확실함.

Possibly related PRs

• Feat: #118 로그인 후 유저 정보 호출 기능 구현 #121: 사용자 정보 검색 기능과 관련된 사용자 링크 관리 변경 사항.
• Feat: #120 팀 설정 페이지 탈퇴 삭제 및 수락 거부 기능 구현 #126: 팀 관리와 관련된 PR로, 사용자 설정 처리와 연결될 수 있음.
• Feat: #123 로그아웃 기능 구현 #133: 사용자 상태 관리와 관련된 로그아웃 기능 PR.
• Feat: #137 아이디/비밀번호 찾기 기능 구현 #139: 사용자 데이터 처리와 관련된 사용자 ID 및 비밀번호 검색 프로세스 변경.
• Feat: #142 이메일 인증 기능 구현 #143: 사용자 관리와 관련된 이메일 인증 기능.
• Feat: #159 닉네임 중복 확인 API 및 회원가입 기능 구현 #171: 사용자 등록 기능과 관련된 닉네임 중복 체크.
• Feat: #175 유저 프로필 변경 페이지 기능 구현 #181: 사용자 정보 관리와 관련된 사용자 프로필 변경 페이지 구현.

Suggested labels

🎨 UI, 🛠️ Refactor

Suggested reviewers

• Seok93
• ice-bear98

🐰 변화의 바람이 불어와
링크가 새로워지는 날,
사용자 설정을 더 쉽게,
가입도 즐겁게,
모두 함께 링크를 관리해요! 🌟

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ 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 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.

[coderabbitai]

Actionable comments posted: 3

🧹 Outside diff range and nitpick comments (8)

src/hooks/query/useUserQuery.ts (1)

24-39: LGTM: useUpdateLinks 함수가 잘 구현되었습니다.

새로운 useUpdateLinks 함수가 useUpdateUserInfo와 일관된 패턴을 따르고 있어 좋습니다. 링크 수정 기능을 위한 적절한 에러 및 성공 메시지를 포함하고 있으며, 쿼리 무효화를 통해 UI가 업데이트된 링크를 반영할 수 있도록 하고 있습니다.

일관성을 위해 useUpdateUserInfo 함수와 마찬가지로 useUpdateLinks 함수 앞에도 빈 줄을 추가하는 것이 좋겠습니다:

 }

+
 export function useUpdateLinks() {
   const queryClient = useQueryClient();
   const { toastSuccess, toastError } = useToast();
   const linksQueryKey = generateLinksQueryKey();

src/services/userService.ts (2)

19-30: 새로운 updateLinks 함수가 잘 구현되었습니다.

함수의 구조와 문서화가 파일의 다른 함수들과 일관성을 유지하고 있습니다. authAxios를 사용하여 인증된 요청을 보내는 것이 적절합니다. PATCH 메서드를 사용하여 기존 리소스를 업데이트하는 것도 RESTful 원칙에 부합합니다.

다만, 에러 처리를 개선하는 것을 고려해 보시기 바랍니다. 예를 들어:

export async function updateLinks(links: EditUserLinksForm, axiosConfig: AxiosRequestConfig = {}) {
  try {
    return await authAxios.patch('/user/links', links, axiosConfig);
  } catch (error) {
    console.error('링크 업데이트 중 오류 발생:', error);
    throw error;
  }
}

이렇게 하면 에러 로깅이 가능하며, 필요한 경우 에러를 변환하거나 추가 처리를 할 수 있습니다.

---

Line range hint 1-30: PR 목표와 일치하는 변경사항입니다.

이 변경사항은 PR의 주요 목표인 링크 수정 기능 구현을 잘 달성하고 있습니다. updateLinks 함수의 추가로 사용자 프로필 설정 페이지에서 링크를 수정할 수 있는 네트워크 로직이 구현되었습니다.

코드 구조와 스타일이 기존 파일의 패턴을 잘 따르고 있어 일관성이 유지되고 있습니다. 또한, 이 구현은 향후 백엔드 팀과의 논의를 통해 추가 API(링크 추가 및 삭제)를 구현할 때도 쉽게 확장할 수 있는 구조를 가지고 있습니다.

향후 리팩토링 시 고려할 사항:

1. 링크 추가 및 삭제 기능을 위한 추가 API 구현
2. 에러 처리 및 로깅 강화
3. 단위 테스트 추가 (현재 PR에서 언급된 MSW 모킹 함수 활용)

src/utils/queryKeyGenerator.ts (1)

27-35: LGTM: generateLinksQueryKey 함수 추가, 작은 개선 제안

generateLinksQueryKey 함수의 추가는 적절해 보입니다. 기존 함수들과 일관된 패턴을 따르고 있으며, PR의 목적에 부합합니다.

한 가지 작은 제안: JSDoc 주석에 함수의 반환 값에 대한 더 구체적인 설명을 추가하면 좋을 것 같습니다.

JSDoc 주석을 다음과 같이 수정하는 것을 고려해보세요:

 /**
  * 유저 링크 queryKey 생성 함수
  *
  * @export
- * @returns {(string | number)[]}
+ * @returns {string[]} 유저 링크에 대한 queryKey 배열
  */

src/stores/useStore.ts (3)

23-23: UserStore 타입 변경 승인 및 개선 제안

editUserInfo 메서드의 시그니처 변경은 적절합니다. EditUserInfoRequest와 EditUserLinksForm 두 가지 타입을 모두 허용함으로써 사용자 정보 업데이트에 더 큰 유연성을 제공합니다.

타입 안전성을 더욱 높이기 위해, 다음과 같이 유니온 타입을 별도로 정의하는 것을 고려해 보세요:

type UserInfoUpdate = EditUserInfoRequest | EditUserLinksForm;

// 그리고 메서드 시그니처를 다음과 같이 변경:
editUserInfo: (newUserInfo: UserInfoUpdate) => void;

이렇게 하면 코드의 가독성과 유지보수성이 향상될 수 있습니다.

---

93-96: editUserInfo 메서드 구현 변경 승인 및 개선 제안

editUserInfo 메서드의 구현 변경은 적절합니다. EditUserInfoRequest와 EditUserLinksForm 두 가지 타입을 모두 처리할 수 있도록 하여 유연성을 제공합니다.

다만, 다음과 같이 업데이트 유형에 따라 다르게 처리하는 방법을 고려해 보세요:

editUserInfo: (newUserInfo: EditUserInfoRequest | EditUserLinksForm) =>
  set((state) => {
    if ('links' in newUserInfo) {
      // EditUserLinksForm 처리
      return {
        userInfo: { ...state.userInfo, links: newUserInfo.links },
      };
    } else {
      // EditUserInfoRequest 처리
      return {
        userInfo: { ...state.userInfo, ...newUserInfo },
      };
    }
  }),

이렇게 하면 각 업데이트 유형에 대해 더 명확하고 안전한 처리가 가능합니다.

---

Line range hint 1-146: 전체 리뷰 요약 및 PR 목표 달성 평가

이 PR은 링크 수정 기능 구현이라는 목표를 성공적으로 달성했습니다. 주요 변경 사항은 다음과 같습니다:

1. EditUserLinksForm 타입 추가로 링크 수정 기능 지원
2. editUserInfo 메서드의 시그니처 및 구현 변경으로 링크 수정 처리 가능

이러한 변경으로 사용자 프로필 설정 페이지에서 링크를 수정할 수 있는 기능이 구현되었습니다.

향후 개선 사항:

1. 타입 안전성 강화를 위한 유니온 타입 정의
2. 업데이트 유형에 따른 차별화된 처리 로직 구현
3. 링크 추가 및 삭제 API 구현 검토 (백엔드 팀과 협의 필요)

전반적으로 PR의 목표를 잘 달성했으며, 제안된 개선 사항을 적용하면 코드 품질과 유지보수성이 더욱 향상될 것입니다.

src/mocks/services/userServiceHandler.ts (1)

54-82: 구현이 전반적으로 양호하나 몇 가지 개선 사항이 있습니다.

링크 수정 API 엔드포인트의 구현이 전반적으로 잘 되어 있습니다. 인증 확인, 사용자 ID 추출, 사용자 유효성 검사, 링크 업데이트 등의 주요 기능이 포함되어 있습니다.

개선을 위한 제안:

1. 오류 처리를 더 구체화하세요. 예를 들어, 잘못된 링크 형식에 대한 검증을 추가할 수 있습니다.
2. 응답에 업데이트된 링크를 포함하여 클라이언트가 변경 사항을 확인할 수 있도록 하는 것을 고려해보세요.
3. 더미 토큰 로직에 대한 TODO 주석(62-66줄)을 기억하고 프로덕션 전에 반드시 제거하세요.

이러한 개선 사항을 구현하시겠습니까? 필요하다면 코드 예시를 제공해 드릴 수 있습니다.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 0728622 and 3f7cf1b.

📒 Files selected for processing (9)

• src/components/user/auth-form/LinkContainer.tsx (3 hunks)
• src/hooks/query/useUserQuery.ts (2 hunks)
• src/mocks/services/userServiceHandler.ts (2 hunks)
• src/pages/setting/UserSettingPage.tsx (1 hunks)
• src/pages/user/SignUpPage.tsx (1 hunks)
• src/services/userService.ts (2 hunks)
• src/stores/useStore.ts (3 hunks)
• src/types/UserType.tsx (1 hunks)
• src/utils/queryKeyGenerator.ts (2 hunks)

🧰 Additional context used

🔇 Additional comments (19)

src/hooks/query/useUserQuery.ts (2)

3-5: LGTM: 임포트 변경이 적절합니다.

새로운 useUpdateLinks 함수에 필요한 updateLinks와 generateLinksQueryKey를 임포트하고, EditUserLinksForm 타입을 추가한 것이 적절합니다.

---

Line range hint 1-39: 전반적인 변경 사항이 PR 목표와 잘 부합합니다.

이 PR의 주요 목표인 링크 수정 기능 구현이 useUpdateLinks 함수를 통해 잘 달성되었습니다. 이 함수는 기존의 useUpdateUserInfo 함수와 일관된 패턴을 따르고 있어, 코드의 일관성과 가독성을 유지하고 있습니다.

주요 변경 사항:

1. 필요한 임포트 추가
2. useUpdateLinks 함수 구현
3. 적절한 에러 처리 및 성공 메시지 포함
4. 쿼리 무효화를 통한 UI 업데이트 보장

이러한 변경 사항들은 사용자 프로필 설정 페이지에서 링크를 수정할 수 있게 하는 #192 이슈의 요구사항을 충족시키고 있습니다.

다음 스크립트를 실행하여 useUpdateLinks 함수가 다른 파일에서 올바르게 사용되고 있는지 확인해 보세요:

✅ Verification successful

전반적인 변경 사항이 PR 목표와 잘 부합합니다.

useUpdateLinks 함수가 LinkContainer.tsx에서 올바르게 임포트되고 사용되고 있음을 확인했습니다. 모든 사용 사례가 기대한 대로 구현되어 있으며, 코드의 일관성과 기능이 잘 유지되고 있습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify the usage of useUpdateLinks function

# Test: Search for the function usage
rg --type typescript 'useUpdateLinks'

Length of output: 72

---

Script:

#!/bin/bash
# Description: Verify the usage of useUpdateLinks function by searching in .ts and .tsx files

# Search for the function usage in TypeScript files
rg 'useUpdateLinks' -g '*.ts' -g '*.tsx'

Length of output: 321

src/types/UserType.tsx (1)

25-25: LGTM! 새로운 타입 정의가 PR 목표와 일치합니다.

EditUserLinksForm 타입의 추가는 링크 수정 기능 구현이라는 PR 목표에 부합합니다. 이 타입은 User 타입에서 links 속성만을 선택하여 사용자 링크 편집에 필요한 데이터를 정확히 표현합니다. 이는 타입스크립트의 모범 사례를 따르고 있으며, 코드의 타입 안정성을 향상시킵니다.

src/services/userService.ts (1)

3-3: import 문이 적절히 수정되었습니다.

EditUserLinksForm 타입이 추가되어 새로운 updateLinks 함수와 일관성을 유지하고 있습니다. 기존 import 패턴을 따르고 있어 코드의 일관성도 유지되고 있습니다.

src/utils/queryKeyGenerator.ts (2)

7-7: LGTM: queryKeys 객체에 links 추가

queryKeys 객체에 'links' 항목을 추가한 것은 적절해 보입니다. 이는 기존 구조와 일관성을 유지하면서 PR의 목적인 링크 수정 기능 구현과 잘 부합합니다.

---

Line range hint 1-35: 전반적인 변경 사항에 대한 평가: 잘 구현되었습니다

이 PR에서 추가된 변경 사항들은 전반적으로 잘 구현되었습니다:

1. queryKeys 객체에 'links' 항목 추가
2. generateLinksQueryKey 함수 구현

두 변경 사항 모두 기존 코드 구조와 스타일을 잘 따르고 있으며, PR의 목적인 링크 수정 기능 구현에 부합합니다. 코드는 일관성 있게 작성되었고, 새로운 기능을 위한 준비가 잘 되어 있습니다.

다만, JSDoc 주석에 대한 작은 개선 제안을 고려해 주시기 바랍니다.

src/stores/useStore.ts (1)

5-5: import 문 업데이트 승인

EditUserLinksForm 타입을 import 문에 추가한 것은 적절합니다. 이는 editUserInfo 메서드의 시그니처 변경과 일치하며, 링크 수정 기능 구현을 위해 필요한 변경사항입니다.

src/pages/setting/UserSettingPage.tsx (1)

116-116: 변경사항이 적절해 보입니다.

LinkContainer 컴포넌트에 page="UserSetting" prop이 추가되었습니다. 이는 PR의 목표인 링크 수정 기능 구현과 일치합니다.

다만, LinkContainer 컴포넌트가 이 새로운 prop을 올바르게 처리하는지 확인해 주세요. 다음 스크립트를 실행하여 LinkContainer 컴포넌트의 구현을 확인할 수 있습니다:

src/mocks/services/userServiceHandler.ts (1)

7-7: LGTM: 임포트 문 업데이트가 적절합니다.

EditUserLinksForm 타입을 임포트에 추가한 것은 새로운 링크 수정 API 엔드포인트와 일치하며 적절합니다.

src/pages/user/SignUpPage.tsx (1)

136-136: LinkContainer에 'page' prop 추가에 대한 검토

이 변경은 기능 구현의 일부로 보이며 승인됩니다. 그러나 몇 가지 고려사항이 있습니다:

1. PR 목표는 프로필 설정 페이지의 링크 수정 기능 구현을 언급하고 있습니다. 왜 이 변경이 회원가입 페이지에서 이루어졌는지 설명해 주실 수 있나요?

2. LinkContainer 컴포넌트가 사용되는 다른 페이지들에서도 유사한 변경이 필요한지 확인해 주세요. 일관성을 유지하는 것이 중요합니다.

다음 스크립트를 실행하여 LinkContainer 컴포넌트의 다른 사용 사례를 확인해 주세요:

✅ Verification successful

LinkContainer의 다른 사용 사례 검색을 위한 스크립트 수정 요청

이전 스크립트에서 --type typescript가 인식되지 않아 오류가 발생했습니다. 다음과 같이 수정된 스크립트를 실행해 주세요:

---

LinkContainer의 'page' prop 추가 검증 완료

LinkContainer에 'page' prop을 추가한 변경 사항은 다른 페이지들에서도 일관되게 사용되고 있음을 확인했습니다. 따라서 해당 변경은 승인됩니다.

• src/pages/setting/UserSettingPage.tsx에서도 page="UserSetting"으로 사용되고 있습니다.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# LinkContainer 컴포넌트의 다른 사용 사례 검색
rg --type typescript --type tsx "LinkContainer" -g '!src/pages/user/SignUpPage.tsx'

Length of output: 118

---

Script:

#!/bin/bash
# LinkContainer 컴포넌트의 다른 사용 사례 검색
rg "LinkContainer" --glob "*.ts" --glob "*.tsx" -g '!src/pages/user/SignUpPage.tsx'

Length of output: 525

src/components/user/auth-form/LinkContainer.tsx (9)

5-5: Spinner 컴포넌트 임포트 추가 확인

Spinner 컴포넌트를 올바르게 임포트하셨습니다.

---

7-9: 필요한 훅과 타입 임포트 추가

useUpdateLinks, useStore, EditUserLinksForm을 올바르게 임포트하셨습니다.

---

13-13: page 프로퍼티 추가로 인한 타입 업데이트

page 프로퍼티가 추가되어 LinkContainerProps 타입이 업데이트되었습니다.

다른 모든 LinkContainer 컴포넌트 사용 부분에서 page 프로퍼티가 올바르게 전달되고 있는지 확인해주세요.

---

16-16: LinkContainer 컴포넌트에 page 프로퍼티 추가

LinkContainer 컴포넌트에 page 프로퍼티가 추가되어 필요에 따라 다른 동작을 수행할 수 있게 되었습니다.

---

18-18: 스토어에서 editUserInfo 액션 가져오기

editUserInfo 액션을 스토어에서 올바르게 가져오셨습니다.

---

23-23: 로딩 상태 관리를 위한 isLoading 상태 추가

비동기 작업 중 로딩 상태를 관리하기 위한 isLoading 상태가 추가되었습니다.

---

25-25: updateLinksMutate 함수 사용 준비

링크 업데이트를 위한 updateLinksMutate 함수를 가져오셨습니다.

---

84-91: 로딩 스피너 및 오버레이 적용 확인

로딩 상태에서 화면에 오버레이와 스피너가 표시되도록 구현되었습니다.

---

129-129: 입력 필드와 버튼에 disabled 속성 추가

로딩 중에 입력 필드와 버튼이 비활성화되도록 disabled={isLoading} 속성이 추가되었습니다.

Also applies to: 138-138

[Seok93]

리뷰 완료했습니다. 궁금한 점 있으시면 편하게 말씀해주세요!

[Seok93]

수정하느라 고생 많으셨습니다!

[Yoonyesol]

@Seok93 리뷰 감사합니다!