✨ 좋아요 및 좋아요 취소 API

[BangDori]

작업 이유

• 좋아요 Mocking API 중복 상태 처리
• 좋아요 및 좋아요 취소 API
• 좋아요 API 테스트 코드 작성
• 옵저버 위치 수정

작업 사항

1️⃣ 좋아요 Mocking API 중복 상태 처리

기존에 좋아요 API 및 좋아요 취소 API에서 중복 상태에 대한 처리가 존재하지 않아서, 중복 상태에 대한 에러 상태를 반환하도록 추가하였습니다.

// 이미 좋아요 누른 경우
if (likeInfo.isLiked) {
    return createHttpErrorResponse('0000'); // 에러 메시지는 임의로 0000으로 설정하였습니다.
}

2️⃣ 좋아요 및 좋아요 취소 API

1. 좋아요 및 좋아요 취소 API의 경우 API Method만 다를 뿐 유사한 동작을 한다고 생각하여 MutationFn을 조건부로 설정

const { mutate: handleLikeFeed, isPending } = useMutation({
  mutationFn: () =>
    isLiked ? requestUnlikeFeed(feedId) : requestLikeFeed(feedId),
  // ...
})

2. 좋아요 및 좋아요 취소 API의 경우 중요 데이터가 아니라고 판단하여, mutate가 호출되었을 때 낙관적 업데이트가 진행되도록 설정
3. Mutation 성공 및 실패에 따른 Query 상태 처리 추가

3️⃣ 좋아요 API 테스트 코드 작성

훅스 자체를 테스트하기 위해, 커스텀 훅 자체만을 렌더링할 수 있는 createQueryClientWrapper 컴포넌트를 생성하였습니다.

src/shared/tests/setup.tsx

// hooks를 사용하는 컴포넌트를 테스트할 때 필요한 wrapper를 생성하는 함수
// from https://tkdodo.eu/blog/testing-react-query#for-custom-hooks
export const createQueryClientWrapper = () => {
  const queryClient = generateQueryClient();
  return ({ children }: PropsWithChildren) => (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
};

// ...

UI를 테스트하기 보다는 실제 비즈니스 로직의 정상 동작 여부에 대한 테스트를 진행하는 것이 맞다고 생각하였습니다. 그래서 API 함수들에 대한 스파이를 추가하여, 해당 함수들이 호출되고 있는지를 확인하였습니다.

4️⃣ 옵저버 위치 수정

좋아요 API를 진행하는 도중, 무한 스크롤 관련하여 다음과 같은 문제가 발생하였습니다.

• 스켈레톤 UI가 보임에도 불구하고 fetching을 진행하지 않는다.
• 다음 페이지를 받아올 때, next 페이지를 fetching 한 이후 바로 next + 1 페이지까지 fetching 한다.

이에 옵저버 위치를 수정하고 조건부를 추가하여 해결하였습니다.

해당 문제는 실제로 PR과는 큰 관련이 없지만, 단순한 문제라고 생각하여 해결하였습니다. 다음부터는 이러한 이슈가 발생하였을 때 빠르게 의찬님에게 공유하고, 해당 PR에서 작업을 진행할 것인지 이슈로 등록할 것 인지에 대해 이야기를 나누도록 하겠습니다!! (죄송합니다 ㅠ)

리뷰어가 중점적으로 확인해야 하는 부분

FE

• useLikes hook 에서 개선할 부분이 있나요?
• useLikes hook 에서 추가로 고려해야 할 점이 있나요?
• 좋아요 및 좋아요 취소 API가 정상적으로 동작하고 있나요?
• 발생한 이슈에 대해 인지하셨나요?

PM

• 좋아요 및 좋아요 API가 정상적으로 동작하고 있나요?

발견한 이슈

1. 현실적인 환경 구축을 위해 Mocking Service Worker에 등록된 모든 API에 대해 delay를 설정해 주어야 할 것 같습니다.
2. 현재 네트워크 불안정 토스트 메시지가 무한 스크롤 관련 에러에서만 발생하고 있습니다. 해당 문제를 해결하기 위해 에러를 중앙화하여 관리하여야 할 것 같습니다.
3. public api가 제대로 적용되어 있지 않은 부분이 곳곳이 보여서 해결할 예정입니다.

[aws-amplify-ap-northeast-2]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-42.d37mn03xh3qyyz.amplifyapp.com

[Legitgoons]

이슈에 대해서 인지하였고, 동작도 정상적으로 이뤄지고 있습니다. 병합하셔도 좋습니다!

[psychology50]

기능 정상 동작하는 것 확인했습니다~~~

코드가 이해가 안 돼서 어디서 처리하고 있는 지 못 찼겠지만
다시 상기시켜드리면, 좋아요를 누를 땐 PUT, 취소할 때는 DELETE 별도의 API가 호출된 다는 것만 기억해주시면 될 것 같습니다.