✨ import한 zustand store 타입 지정하기

1) useModalStore() 의 타입을 지정할때는
❌ useModalStore()
zustand의 create 함수를 사용하여 만든 상태 관리 함수이므로 제네릭을 직접 전달하는 방식이 지원되지 않습니다.
Zustand의 create() 함수는 이미 상태 관리 스토어의 타입을 정의하는 방식으로 사용되기 때문에, 추가적인 제네릭 인자를 받을 수 없습니다.

✅ const { closeModal }: CloseModalType = useModalStore();
useModalStore()가 ModalStore 타입을 기반으로 생성되었고, 그 안에서 필요한 속성(closeModal)만 구조 분해 할당 후, 타입을 별도로 지정했기 때문

✨ 구현할 기능 예습

1) AT, RT (access token, refresh token)

• RT는 일반적으로 httpOnly 쿠키에 저장 (보안 이슈)
• 주로 클라이언트가 RT를 직접 다루지 않음
• 흐름 : AT 유효기간이 만료되면 axios interceptors response.use 사용해서 AT 만료되어 401에러 떴을때 RT에게 자동으로 AT새로 발급해달라고 요청보내기!
• RT를 이용해 새로 AT를 발급받는것도 서버를 변경? 하는거랑 같은 맥락이라서 POST 메서드를 쓴다.

2) pdf파일 전송 방식

• formData를 사용해서 업로드
• 백엔드에서는 pdf파일 자체는 클라우드나 서버 디스크에 저장, 파일이 저장된 경로를 DB에 또 따로 저장
• 프론트에서는 DB에 저장된 경로를 가져다가 사용하게 됨

3) pdf파일 업로드 진행률 보여주는 progress bar

• axios에 onUploadProgress 옵션이 있음
  프론트에서 백엔드로 넘어가는 진행률을 보여줌
  -> onUploadProgress가 100%이 됐더라도 백엔드에서 db에 제대로 저장됐는지는 알수 없다.

• 백엔드에서 db에 제대로 저장됐는지, 저장되고있는 진행률 이런거는 onUploadProgress로는 알수 없다. 그건 백엔드에서 보내줘야됨
  (백엔드의 추가 처리 시간이 길어지면, 유저가 "왜 멈췄지?" 또는 "오류인가?"라고 생각할 가능성이 큼.)

• 해결책 gpt 제시
  -> 유저가 100%라고 보기 전에 모든 작업이 완료되도록, 네트워크 전송과 백엔드 처리를 합쳐 단일 진행률로 표시.
  예:
  네트워크 전송 = 전체의 70%.
  백엔드 처리 = 전체의 30%.

const calculateTotalProgress = (uploadProgress: number, backendProgress: number) => {
  const uploadWeight = 0.7; // 네트워크 전송 비율
  const backendWeight = 0.3; // 백엔드 처리 비율

  return Math.round(uploadProgress * uploadWeight + backendProgress * backendWeight);
};

• UI 동작
  onUploadProgress로 네트워크 전송률(uploadProgress) 추적.
  백엔드의 처리 진행률(backendProgress) API로 가져옴.
  위 두 값을 합산해 단일 진행률을 계산 후 표시.

-> 백엔드의 진행률만 보여주는 방법도 있음

const [progress, setProgress] = useState(0); 
  const [status, setStatus] = useState("uploading"); 

  // "uploading" | "processing" | "done" // 진행률 확인 
const checkProgress = async () => { 
  try { const response = await axios.get("/upload/status"); 
  setProgress(response.data.progress); 
  setStatus(response.data.status); } 
  catch (error) { 
  console.error("진행 상태를 확인하는 중 에러 발생:", error); } }; 
  
  useEffect(() => { const interval = setInterval(() => {
  checkProgress(); }, 1000); 
  // 1초마다 진행 상태 확인 return () => clearInterval(interval); 
  // 컴포넌트 언마운트 시 정리 }, []);