공통 컴포넌트 구현 (버튼, 진행 중인 미션 배너) (issue #94)

[chosim-dvlpr]

구현 요약

1. 진행 중인 미션 배너 api 연결
2. InProgress 컴포넌트에서 타이틀과 배너 분리
3. Completed 컴포넌트에서 타이틀과 card list 분리
4. 미션 현황 페이지 디자인 수정

연관 이슈

close #94

참고

코드 리뷰에 RCA 룰을 적용할 시 참고해주세요.

헤더	설명
R (Request Changes)	적극적으로 반영을 고려해주세요
C (Comment)	웬만하면 반영해주세요
A (Approve)	반영해도 좋고, 넘어가도 좋습니다. 사소한 의견입니다.

[brgndyy]

프룬 고생 많으셨어요~!

useSuspenseQuery 관련해서 코멘트 하나 남겨보았는데 확인해주시면 감사하겠습니다!

[brgndyy]

이 useSuspenseQuery 자체를 리턴해주면 사용하는 컴포넌트 단에서 선택적으로 필요한 부분을 골라서 사용할수 있을거 같은데요!?

useSuspenseQuery를 사용하면 자동으로 상위에서 감싸준 Suspense를 감지해서 isLoading 상태값 없이 선언적으로 표현해볼수 있을거 같아요 👍

const useMissionInProgress = () => {
  return useSuspenseQuery< MissionInProgress >({
    queryKey: ['inProgress'],
    queryFn: getMissionInProgress,
  });
};

- Component.tsx

export default function MyMissionInProgressBanner() {
  const { data: missionInProgress, isSuccess } = useMissionInProgress();

위처럼 isSuccess나 isError 등등 필요한 값들만 꺼내와서 사용할수 있어서 조금 더 확장성이 있지 않을까 하는데 어떻게 생각하세요 !?

[chosim-dvlpr]

오 이렇게 바로 작성하는 방법도 있군요! 감사합니다 버건디👍