전역상태 zustand store로 리펙토링

[Sang-minKIM]

Related issue

#673

Result

context를 store로 바꾸는 작업입니다.
작업을 하다보니 상태 하나씩 작업해서 PR을 올릴 수 없을 것 같아, 부득이하게 하나의 PR에 많은 코드 변경이 있을 것 같습니다....
커밋별로 보시고 리뷰해주시면 정말 감사하겠습니다🥹🥹

Work list

• filteredRange context
• branch 관련 context
• repo context
• owner context
• data 관련 context

Discussion

1. type 수정하면서 BranchListPayload의 위치가 고민입니다.
   현재는 store쪽에 선언하고 IDESentEvents에서 import 해서 쓰도록 했는데 이렇게 해도 괜찮을지 의견주시면 감사하겠습니다~~

2. Dispatch<SetStateAction>
   기존에는 set 함수에 위의 타입을 사용했는데 zustand의 액션함수에 해당 타입을 사용하려면 아래와 같은 로직이 필요합니다.

type RepoStore = {
  repo: string;
  setRepo: Dispatch<SetStateAction<string>>;
};

export const useRepoStore = create<RepoStore>((set) => ({
  repo: "",
  setRepo: (repo) => set((state) => ({ repo: typeof repo === 'function' ? repo(state.repo) : repo })),
}));

위의 방식으로 Dispatch<SetStateAction>을 쓰는게 아래와 같은 방법으로 함수 타입을 설정하는 것보다 좋은점이 있는지 궁금합니다.

type RepoStore = {
  repo: string;
  setRepo: (repo: string) => void;
};

export const useRepoStore = create<RepoStore>((set) => ({
  repo: '',
  setRepo: (repo) => set({ repo }),
}));

[Sang-minKIM]

AS-IS

TO-BE

Context API를 Zustand Store로 바꾸는 작업 완료했습니다.
Summary의 항목을 클릭해서 커밋 내용 상세보기를 했을 때를 비교해보니 리렌더링이 줄어든걸 확실히 볼 수 있네요!
#684 에서 useShallow와 선택적 구독에 대한 내용 알려주신 @taboowiths 님 정말 감사합니다!

[xxxjinn]

LGGGGTM 입니다!!!!!👍👍🥰🥰🥰

[shgusgh12]

LGTM입니다!!!!👍👍👍👍

[pcwadarong]

LGTM입니다!!!!👍👍👍👍❗❗❗❗

[joonwonBaek]

LGTM 입니다!!

[ytaek]

정말 고생많으셨습니다!! 💯 💯💯💯💯💯

자잘한 커멘트들 남겨놓았고,
전반적인 틀을 바꿔버린 만큼,
추후 테스트 (매뉴얼하게라도)도 좀 여러 방면으로 다 해보면 좋을 것 같습니다!!

(UI Test case들이 많이 올라오면 좋겠네요!!)