[refactor] tanstackQuery 최적화 및 활동사진 컴포넌트 리팩토링

[seongwon030]

#️⃣연관된 이슈

ex) #236

📝작업 내용

useMutation 최적화

변경 전

export const useUpdateClubDescription = () => {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (updatedData: ClubDescription) =>
      updateClubDescription(updatedData),

    onSuccess: async () => {
      await queryClient.invalidateQueries({
        queryKey: ['clubDetail'],
      });
    },

    onError: (error) => {
      console.error('Error updating club detail:', error);
    },

변경 후

export const useUpdateClubDescription = () => {
  return useMutation({
    mutationFn: (updatedData: ClubDescription) =>
      updateClubDescription(updatedData),

    onError: (error) => {
      console.error('Error updating club detail:', error);
    },
  });
};

변경 이유

1. GET 요청으로 항상 최신 상태를 보장하고 있음

   • invalidateQueries(['clubDetail'])는 클럽 상세 데이터를 다시 불러오는 역할인데,
   • 상세페이지에서 get 으로 항상 최신의 상태를 보장합니다.

2. queryKey는 invalidateQueries에서만 사용됨

   • queryKey는 특정 캐시 데이터를 무효화할 때 사용되므로,
   • invalidateQueries를 제거하면 queryKey도 필요 없습니다.

타입 분리 b3b4c8f

활동사진 컴포넌트 리팩토링 54c851a

중점적으로 리뷰받고 싶은 부분(선택)

• useMutation 최적화가 적절한지?

논의하고 싶은 부분(선택)

• import 순서가 일관성이 없어 정리해야 할 것 같네요. react 라이브러리 -> 컴포넌트 -> hooks -> utils -> types 으로 생각했는데 다른 의견있으면 편하게 말씀해주세요!
• 특정 파일 내에서만 사용되는 interface는 따로 분리해야 할까요?

🫡 참고사항

[coderabbitai]

Summary by CodeRabbit

• Refactor
  • 관리자 인터페이스의 이미지 관련 기능이 통합되어 일관성이 강화되었습니다.
  • 업데이트 처리 흐름이 최적화되어 인터페이스 반응성이 개선되었습니다.
• Style
  • 이미지 편집 영역의 레이아웃 간격이 축소되어 보다 컴팩트한 화면 구성이 제공됩니다.
  • 이미지 편집 제목의 계층 구조가 재조정되어 콘텐츠 구성이 개선되었습니다.

Walkthrough

이번 PR에서는 클럽 관련 훅에서 사용되던 useQueryClient와 이를 통한 onSuccess 성공 핸들러(쿼리 무효화 로직)를 제거하였습니다. 또한, 이미지 미리보기와 업로드 컴포넌트의 props 타입 선언을 인라인 정의에서 @/types/club에 정의된 별도 타입(ImagePreviewProps, ImageUploadProps)으로 리팩토링하여 타입 관리의 일관성을 확보했습니다. 그 외 RecruitEditTab과 ClubDetailPage의 import 순서 및 상태/상수 선언 재정리, RecruitEditTab 내 스타일 수정, 그리고 새로운 타입 인터페이스 추가 등의 변경이 이루어졌습니다.

Changes

파일(s)	변경 내용
frontend/src/hooks/queries/club/useUpdateClubDescription.ts frontend/src/hooks/queries/club/useUpdateClubDetail.ts	useQueryClient 사용 및 onSuccess 콜백(쿼리 무효화) 제거, 에러 핸들링은 유지됨
frontend/src/pages/AdminPage/components/ImagePreview/ImagePreview.tsx frontend/src/pages/AdminPage/components/ImageUpload/ImageUpload.tsx	인라인으로 정의된 props 타입을 @/types/club에 정의된 ImagePreviewProps와 ImageUploadProps로 변경
frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx	import 순서 및 상태/상수 선언 재배치, 제목 태그 수정, CSS에서 gap 값 축소 및 margin-top 제거
frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx	불필요한 import 정리 및 순서 변경 (로직에는 영향 없음)
frontend/src/types/club.ts	새 인터페이스 ImageUploadProps와 ImagePreviewProps 추가

Assessment against linked issues

Objective	Addressed	Explanation
tanstckQuery 최적화 (FE-46)	✅

✨ Finishing Touches

• 📝 Generate Docstrings

---

🪧 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 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.

[netlify]

✅ Deploy Preview for moadong ready!

Name	Link
🔨 Latest commit	54c851a
🔍 Latest deploy log	https://app.netlify.com/sites/moadong/deploys/67e1045755ab9f000884dd08
😎 Deploy Preview	https://deploy-preview-237--moadong.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[seongwon030]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

🪧 Tips

@coderabbitai review

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

frontend/src/hooks/queries/club/useUpdateClubDescription.ts (1)

1-14: useMutation 최적화가 괜찮아 보입니다만 이점과 주의사항이 있습니다.

useQueryClient와 invalidateQueries 호출을 제거함으로써 코드가 더 간결해졌습니다. 이 최적화는 상세 페이지에서 GET 요청을 통해 최신 상태를 보장한다는 가정 하에 유효합니다.

주의할 점:

• 이 변경 후에는 mutation 성공 시 자동으로 캐시가 무효화되지 않습니다.
• 사용자가 클럽 설명을 업데이트한 후 캐시된 데이터를 보게 될 수 있으므로, UI 흐름이 사용자가 항상 새로운 GET 요청을 트리거하는 페이지로 이동하도록 설계되어 있는지 확인하세요.

성능 측면에서는 불필요한 리페치를 줄여 최적화가 있지만, 데이터 일관성을 유지하는 책임이 프론트엔드 흐름에 더 많이 의존하게 됩니다.

📜 Review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 292975a and 54c851a.

📒 Files selected for processing (8)

• frontend/src/hooks/queries/club/useUpdateClubDescription.ts (1 hunks)
• frontend/src/hooks/queries/club/useUpdateClubDetail.ts (1 hunks)
• frontend/src/pages/AdminPage/components/ImagePreview/ImagePreview.tsx (1 hunks)
• frontend/src/pages/AdminPage/components/ImageUpload/ImageUpload.tsx (2 hunks)
• frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts (1 hunks)
• frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx (3 hunks)
• frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (2 hunks)
• frontend/src/types/club.ts (1 hunks)

🧰 Additional context used

🧬 Code Definitions (3)

frontend/src/pages/AdminPage/components/ImageUpload/ImageUpload.tsx (1)

frontend/src/types/club.ts (1)

• ImageUploadProps (27-30)

frontend/src/pages/AdminPage/components/ImagePreview/ImagePreview.tsx (1)

frontend/src/types/club.ts (1)

• ImagePreviewProps (32-35)

frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx (3)

frontend/src/types/club.ts (1)

• ClubDetail (12-20)

frontend/src/apis/updateFeedImages.ts (1)

• updateFeedImages (3-19)

frontend/src/hooks/queries/club/useUpdateFeedImages.ts (1)

• useUpdateFeedImages (4-9)

🔇 Additional comments (12)

frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.styles.ts (1)

105-105: 간격 조정에 대한 적절한 변경이네요.

이미지 컨테이너의 gap을 37px에서 15px로 줄여 보다 콤팩트한 레이아웃을 만들었네요. 시각적으로 더 조밀한 UI를 만드는 데 도움이 될 것 같습니다.

frontend/src/hooks/queries/club/useUpdateClubDetail.ts (1)

1-14: useUpdateClubDescription와 동일한 방식으로 잘 최적화되었습니다.

useUpdateClubDescription 훅과 일관된 방식으로 useQueryClient와 invalidateQueries 호출을 제거하셨네요. 코드 일관성 측면에서 좋은 접근입니다.

이 훅도 마찬가지로 다음 사항을 고려해야 합니다:

• 클럽 상세 정보 업데이트 후 자동 캐시 무효화가 더 이상 발생하지 않습니다.
• 사용자가 항상 새로운 GET 요청을 트리거하는 페이지 흐름을 유지해야 최신 데이터를 보장할 수 있습니다.

두 개의 관련 훅에서 동일한 패턴을 적용한 점이 좋습니다. 이렇게 하면 코드베이스 전체에서 일관된 데이터 관리 전략을 유지할 수 있습니다.

frontend/src/types/club.ts (1)

27-35: 타입 분리가 잘 이루어졌습니다.

ImageUploadProps와 ImagePreviewProps 인터페이스를 추가하여 컴포넌트의 props 타입을 중앙화한 접근법이 좋습니다. 이렇게 하면 다음과 같은 이점이 있습니다:

1. 타입 일관성 유지
2. 여러 컴포넌트에서 재사용 가능
3. 코드 가독성 향상
4. 유지보수 용이성 증가

PR 설명에서 언급하신 "특정 파일에서만 사용되는 인터페이스 분리"에 대해서는, 현재 접근법이 적절합니다. 이미지 업로드/미리보기는 클럽 기능과 밀접하게 관련되어 있으므로 club.ts에 정의하는 것이 논리적입니다.

단일 파일에서만 사용되는 인터페이스라 하더라도, 관련 도메인 타입과 함께 그룹화하면 전체 코드베이스의 일관성과 유지보수성이 향상됩니다.

frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx (1)

3-12: 컴포넌트 임포트 구조가 개선되었습니다.

임포트 순서를 재배치하여 코드 가독성이 개선되었습니다. Styled 컴포넌트와 훅의 임포트 순서를 조정한 것은 일관성 측면에서 좋은 변화입니다.

frontend/src/pages/AdminPage/components/ImagePreview/ImagePreview.tsx (1)

3-5: 타입 정의 분리가 효과적으로 이루어졌습니다.

인라인 타입 정의 대신 @/types/club에서 정의된 ImagePreviewProps 인터페이스를 활용함으로써 코드의 일관성과 유지보수성이 향상되었습니다. 이는 PR 목표 중 하나인 타입 분리에 부합하는 좋은 변경사항입니다.

frontend/src/pages/AdminPage/components/ImageUpload/ImageUpload.tsx (2)

5-10: 타입 정의 분리 및 사용이 일관되게 적용되었습니다.

인라인 타입 정의 대신 @/types/club에서 정의된 ImageUploadProps 인터페이스를 사용하여 코드 구조가 개선되었습니다. 이러한 접근 방식은 ImagePreview 컴포넌트와 일관되게 적용되어 전체적인 코드 품질이 향상되었습니다.

---

40-40: 기본 내보내기 추가로 일관성이 개선되었습니다.

명명된 내보내기(export const) 외에도 기본 내보내기(export default)를 추가하여 다른 컴포넌트들과의 일관성을 유지하고 있습니다. 이는 컴포넌트 임포트 방식의 유연성을 높이는 좋은 접근법입니다.

frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx (5)

2-15: 임포트 순서 재구성이 효과적으로 이루어졌습니다.

임포트 구문의 순서를 논리적으로 재구성하여 코드 가독성이 향상되었습니다. 특히 ImageUpload와 ImagePreview 컴포넌트를 함께 그룹화한 것은 관련 컴포넌트들의 연관성을 명확히 해주는 좋은 방식입니다.

---

17-18: 상수 선언 위치 개선이 이루어졌습니다.

MAX_IMAGES와 TEMP_CLUB_ID 상수를 컴포넌트 상단으로 이동한 것은 코드 가독성과 유지보수성을 높이는 좋은 변화입니다. 이렇게 함으로써 중요한 설정값들을 한눈에 확인할 수 있게 되었습니다.

---

23-31: 상태 관리 로직 배치가 개선되었습니다.

updateFeedImages mutation과 imageList 상태 선언을 컴포넌트 상단 부근으로 이동한 것은 관련 코드 블록을 더 논리적으로 그룹화하는 좋은 리팩토링입니다. 이를 통해 코드 흐름을 더 쉽게 파악할 수 있게 되었습니다.

---

135-135: 명확한 FIXME 주석이 추가되었습니다.

// [x]FIXME: div 컴포넌트 수정 주석은 향후 개선이 필요한 부분을 명확히 표시하고 있습니다. 이런 주석은 코드의 다음 개선 단계를 계획하는 데 도움이 됩니다.

이 FIXME 주석이 가리키는 구체적인 개선 내용을 명확히 하는 것이 좋을 것 같습니다. 어떤 div 컴포넌트를 어떻게 수정할 계획인지 더 상세한 설명을 추가하면 다른 개발자들이 이해하는 데 도움이 될 것입니다.

---

211-211: 제목 태그 일관성이 개선되었습니다.

활동 사진 편집 섹션의 제목 태그를 <h2>에서 <h3>로 변경한 것은 다른 섹션의 제목 태그와의 일관성을 유지하는 좋은 변화입니다. 이는 전체 UI의 일관성과 접근성을 향상시킵니다.

[oesnuj]

리팩토링 수고하셨습니다👍