api 상태의 따른 FullSizeSpinner 사용하기

api 상태값에 따른 spinner 관리

1. api 진행에 따른 spinner
2. api 진행 상황은 redux-saga로 통해 관리함
3. api 현황에 따른 spinner 노출
4. api 작업 진행시 spinner display
5. api 완료시 spinner disout

import { Spin } from "antd";
import { useTheme } from "hooks";
import { FC } from "react";
import * as S from "./style";
interface FullsizeSpinnerContainerProps {
  text?: string;
}

const FullsizeSpinnerContainer: FC<FullsizeSpinnerContainerProps> = ({
  text,
  children,
}) => {
  return <S.FullScreenSpinner>{children}</S.FullScreenSpinner>;
};

const FullSizeSpinner = ({
  size,
  theme,
}: {
  size: "small" | "default" | "large" | undefined;
  theme?: string;
}) => {
  const { currentTheme } = useTheme();

  return (
    <FullsizeSpinnerContainer>
      <Spin size={size} style={{ color: currentTheme }} />
    </FullsizeSpinnerContainer>
  );
};

export { FullSizeSpinner };

ui 라이브러리 활용 antd 채택

antd로 간단하게 spinner 활용
{dataFetching && }

데이터 fetching시 spinner를 활용