✨ 피드 숨기기 API 연동

[BangDori]

작업 이유

• 피드 숨기기 API 연동

작업 사항

1️⃣ 피드 숨기기 API MSW 등록

• Hide API Specification에 작성한 피드 숨기기를 기반으로 API를 추가하였습니다.
• 기존에 피드 조회에서 피드 숨기기가 처리된 부분에 대해서는 피드 조회가 되지 않도록 반영하였습니다.

2️⃣ 피드 숨기기 API

• 피드 숨기기가 성공한 Mutation의 경우 피드 아이디에 hiddenFeeds Map 객체에 추가됩니다.
• 피드 숨기기 이후 취소 버튼을 누르면, hiddenFeeds Map 객체에서 Visible 상태로 변하게 되고 피드가 다시 보이게 됩니다.

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

• 피드 숨기기 및 취소 API가 제대로 구현되어 있나요?
• 아래 발생한 이슈에 대해 인지하셨나요?
• 피드 신고 및 숨김 처리에 대한 통합 테스트는 신고하기 UI가 완료된 이후에 신고하기와 함께 PR 올리겠습니다!

발견한 이슈

export const useHiddenFeedStore = create<HiddenFeedState>()(
  devtools(
    (): HiddenFeedState => ({
      hiddenFeeds: new Map<number, boolean>(),
    }),
    { name: 'feed-hidden-store' },
  ),
);

/**
 * 숨김 피드 목록에 피드를 추가합니다.
 * @param feedId 피드 아이디
 */
export function addHiddenFeed(feedId: number) {
  useHiddenFeedStore.setState(
    ({ hiddenFeeds: prevHiddenFeeds }) => ({
      hiddenFeeds: new Map(prevHiddenFeeds).set(feedId, HIDDEN),
    }),
    false,
    'feed/addHiddenFeed',
  );
}

export function cancleHiddenFeed(feedId: number) {
  useHiddenFeedStore.setState(
    ({ hiddenFeeds: prevHiddenFeeds }) => ({
      hiddenFeeds: new Map(prevHiddenFeeds).set(feedId, VISIBLE),
    }),
    false,
    'feed/cancleHiddenFeed',
  );
}

zustand를 위와 같이 선언해두고, 그냥 addHiddenFeed와 cancelHiddenFeed 만을 호출하여서 리렌더링이 발생하지 않았습니다! 단순히 리렌더링을 필요로하는 컴포넌트에서 useHiddenFeedStore 훅스를 가져와서 사용하여 해결하였습니다.

import { useHiddenFeedStore } from '@/entitites/feed';

export const FeedMainList = () => {
  const { hiddenFeeds } = useHiddenFeedStore();

  // ...
}

• reference: https://www.reddit.com/r/reactjs/comments/v5l6f5/zustand_how_does_it_work_how_does_it_cause_a/

[aws-amplify-ap-northeast-2]

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

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

[Legitgoons]

수고하셨습니다. 간단한 질문이 있는데 답변 후 병합해주시면 됩니다!