Revert "Revert "팔로워,팔로잉-유저-확인기능-추가""

[jobkaeHenry]

Reverts #84

[github-actions]

위의 코드 패치에 대한 간단한 코드 리뷰를 도와드리겠습니다.

1. use client는 임포트가 누락되어 있으므로 추가해야 합니다.
2. CustomAppbar 및 CustomContainer 컴포넌트를 임포트하는 것은 올바릅니다.
3. useMyInfoQuery 훅을 사용하여 데이터를 가져오는 것도 올바른 접근방식입니다.
4. FollowListLayoutProps 타입에 대한 정의가 필요한데, ReactNode를 사용하고 있습니다. 이는 자식 요소들이 React 컴포넌트여야 함을 의미합니다.
5. myInfo?.nickname??'닉네임'은 좋은 방법으로 보입니다. myInfo가 존재하지 않거나 nickname이 없을 경우 '닉네임'을 제공합니다.
6. 코드 자체적으로는 문제가 보이지 않습니다.

개선할 점:

• 이 코드가 외부 모듈과 상호작용하기 때문에 예외 처리를 하는 것이 좋습니다. 예를 들어, useMyInfoQuery 훅에서 발생할 수 있는 오류에 대한 처리를 추가하는 것이 좋습니다.
• 타입에 대한 명확한 정의를 추가하여 코드의 가독성을 향상시킬 수 있습니다.

위의 사항을 고려하여 코드를 변경할 수 있습니다.

[github-actions]

이 코드는 리액트 애플리케이션의 팔로우 목록 페이지를 구현한 것으로 보입니다. 주요 내용을 요약하면 다음과 같습니다:

1. @mui/material에서 Box 컴포넌트 및 커스텀 토글 버튼 그룹인 CustomToggleButtonGroup 를 가져옵니다.
2. 팔로잉 목록(FollowingList)과 팔로워 목록(FollowerList) 컴포넌트를 가져옵니다.
3. useState를 사용하여 현재 선택된 뷰(currentView)를 추적합니다.
4. CustomToggleButtonGroup 컴포넌트를 사용하여 팔로잉과 팔로워 간에 전환할 수 있는 버튼 그룹을 만듭니다. 이 버튼 그룹은 상단 고정 위치로 높이가 appbarHeight 인 값을 가집니다.
5. '팔로잉'을 선택한 경우 팔로잉 목록을, '팔로워'를 선택한 경우 팔로워 목록을 렌더링합니다.
6. Suspense 컴포넌트를 사용하여 데이터 로딩 중에 스켈레톤 UI(FollowingUserCardSkeleton)를 표시합니다.

이 코드에는 주요한 결함은 없어보이며, 성능상 개선 가능한 부분도 없어 보입니다. 하지만 컴포넌트와 UI 요소가 적절히 동작하는지 테스트하는 것이 좋습니다. 또한, 코드의 다른 부분과 일관성을 유지하기 위해 코드 스타일 가이드를 준수하는 것도 권장됩니다.

[github-actions]

이 코드 패치에 대해 간단한 코드 리뷰를 도와드리겠습니다. 버그 위험 및 개선 제안 사항을 환영합니다:

1. 코드 수정 사항:

   • src/const/uiSizes.js 파일에서 appbarHeight를 가져왔습니다.
   • UserInfoPageLayout 컴포넌트의 Container 요소에 mt: appbarHeight를 추가하여 커스텀 앱바의 높이만큼 여백을 만들었습니다.

2. 개선 사항:

   • 코드 상 활용되지 않은 "use client"; import 문을 제거하는 것이 좋습니다.
   • Stack 컴포넌트에 gap 속성을 부여했는데, 이를 원하는 형태로 수정할 수 있습니다.
   • 컴포넌트 또는 함수에 대한 주석 (JSDoc)을 추가하면 코드를 이해하기 쉬워집니다.

만일 위 내용에 대해 추가 설명이 필요하시다면 얼마든지 말씀해주세요!