[ Feat ] OCR 검증 과정 로딩 상태 가시화

[lydiacho]

#️⃣ Related Issue

Closes #324

✅ Done Task

• 졸업증명서 OCR 로딩 스피너 추가
• 명함 사진 OCR 로딩 스피너 추가

💎 PR Point

우선 아래와 같은 이유로 기디에게 제안을 드렸고 오케이 해주신 디자인대로 작업 진행했습니다!

3번 선택지로 구현하기 위해서 어두운 배경 + 기존 스피너 가 필요했는데요!
기존 코드에서 최대한 수정 / 추가 작업 없이 어떻게 변형을 줄 수 있을까... 고민해봤는데
원래 있던 Loading 공통 컴포넌트를 살짝 확장시켜주었습니다

const Loading = ({ isTransparent = false }: { isTransparent?: boolean }) => {

이렇게 optional prop 하나를 추가해줬고, (default: false)

<Wrapper $isTransparent={isTransparent}>

최상위 Wrapper에 스타일 컴포넌트 prop을 넘겨줘서

background-color: ${({ $isTransparent, theme }) =>
    $isTransparent ? theme.colors.transparentBlack_65 : theme.colors.grayScaleWhite};

이렇게 스타일컴포넌트에서 isTransparent 불리언값에 따라
어두운반투명배경을 깔지 or 기존의 흰배경을 깔지 조건부 스타일링 되도록 수정했어요!
당연히 optional이기 때문에 기존 로딩뷰가 사용된 모든 곳에는 지장 없고,
앞으로 모달이 뜨기 전까지 들어가야 하는 로딩뷰 가 필요한 곳이 있다면, 아래와 같이 isTransparent 속성 넣어서 공컴 사용하시면 됩니당

{mutation.isPending && <Loading isTransparent />}

📸 Screenshot

i.e.e.e.2024-10-31.i.i.2.38.24.mov

[se0jinYoon]

완 굿
저희 서버 응답 받아오는 거 좀 느린 곳들이 몇 군데 있는데 이거 추가하면 되겠네요!!!! 너무너무너무너무 좋습니다.

[ijieun]

lgtm!!