[Feat] 타임블록 파일 업로드 모달 구현

[namdaeun]

해당 이슈 번호

closed #448

---

체크리스트

• 🔀 PR 제목의 형식을 잘 작성했나요? e.g. [feat] PR을 등록한다.
• 💯 테스트는 잘 통과했나요?
• 🏗️ 빌드는 성공했나요?
• 🧹 불필요한 코드는 제거했나요?
• ✅ 컨벤션을 지켰나요?
• 💭 이슈는 등록했나요?
• 🏷️ 라벨은 등록했나요?
• 💻 git rebase를 사용했나요?
• 🙇‍♂️ 리뷰어를 지정했나요?
• ✨ 저는 shared로 분리했어요.

---

💎 PR Point

기존에 타임블록 생성할 때 있던 파일 업로드 모달 세 개를 빼서 새로운 Funnel 구조를 만들었습니다.

BrowseFileModal (기존에 업로드된 파일 중에서 파일을 선택하는 모달)은 재사용이 가능해보이는데 ,, 리소스 부족으로 shared에 파일을 새로 팠습니다. 리팩할 때 하나로 통합할게요 !

useTimeBlockUploadFlow.tsx

퍼널 구조는 다음과 같습니다.

이미 업로드된 파일들이 있는 경우에는 BrowseFileModal을 띄워주며, 그렇지 않은 경우 NewFileImportModal을 띄웁니다.
파일을 선택한 이후 SelectedFileModal을 통해 선택된 파일들을 확인합니다

SelectedFileModal의 완료 버튼에 대한 핸들러는 handleComplete로 넘겨주면 됩니다 !

    <>
      <FunnelStep step={1}>
        {isAddingFiles ? (
          <NewFileImportModal
            size="large"
            onUploadFile={handleFilesConfirmed}
            onPrev={() => {
              setIsAddingFiles(false);
            }}
            onNext={() => {
              nextStep();
            }}
          />
        ) : (
          <BrowseFileModal
            files={fileData?.data?.documents || []}
            selectedFiles={files}
            onShowBlockAdd={() => setIsAddingFiles(true)}
            onConfirmFile={handleFilesConfirmed}
          />
        )}
      </FunnelStep>
      <FunnelStep step={2}>
        <SelectedFilesModal selectedFiles={files} onComplete={handleComplete} />
      </FunnelStep>
    </>

---

📌스크린샷 (선택)

[github-actions]

🚀 Storybook 확인하기 🚀

• Build
• Preview

[rtttr1]

고생하셨습니다~~!! 모달은 이제 뚝딱하면 만들어내는 장인이네요!

[rtttr1]

친히 연결까지 너무 감사합니다!!

[Bowoon1216]

LGTM 모달 두개를 동시에!! 수고하셨습니다