[#52] - 업로드 API 연동

[qq8721443]

📌 연관된 이슈 번호

close #52

🌱 주요 변경 사항

• axios, @tanstack/react-query 설치했습니다.
• 공통 axios 인스턴스 추가 및 queryClient 추가했습니다.
• 포트폴리오 API 연동했습니다.
  • postPortfolio API 호출 함수, useMutation 호출용 훅으로 나눠 구현했습니다. 개인적으로 이렇게 나누는 게 편해서 이렇게 작업했는데 이 부분 피드백 주시면 감사하겠습니다!
• FileUpload 컴포넌트를 래핑한 PortfolioUpload 컴포넌트 내부에서 API를 호출합니다.
  • 추후 FileUpload 컴포넌트를 범용 컴포넌트로 다시 작성하고, 업로드가 필요한 영역에서 래퍼 컴포넌트를 작성하려고 합니다.

🗣 리뷰어에게 할 말 (선택)

• form 내부 input 요소의 onChange 핸들러 내부에서 handleSubmit 함수를 실행하니까 깔끔하게 동작합니다..!
• 이후 FileUpload 공통 컴포넌트로 추출 작업 및 업로드 페이지 변경된 스타일 적용 작업 예정입니다!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
onepiece-fe	⬜️ Ignored (Inspect)	Visit Preview		Feb 23, 2025 7:02am

[Limgabi]

🚀 Storybook Deploy : https://67a21b40b49ad2ad0c08c418-bbeckhnhun.chromatic.com/

[Limgabi]

업로드 성공 로직을 TanStack Query에서 제공하는 onSuccess를 활용해도 좋을 거 같아요!

[qq8721443]

추후 mutateAsync 내부 onSuccess 콜백에서 처리하도록 하겠습니다!

[Limgabi]

API 호출 함수와 훅을 분리하니 깔끔한 거 같습니다! 해당 방식으로 구현하면 하나의 API 호출 훅을 만들 때마다 두 개의 파일이 생성되는 구조인가요?

[qq8721443]

API 호출 함수와 훅을 분리하니 깔끔한 거 같습니다! 해당 방식으로 구현하면 하나의 API 호출 훅을 만들 때마다 두 개의 파일이 생성되는 구조인가요?

@Limgabi API 호출 함수는 엔드포인트 하나마다 하나의 파일이 생성되고, react query 관련 파일은 단순히 queries.ts, mutations.ts 두 개로 분리하는 걸 생각했습니다!

[Limgabi]

🚀 Storybook Deploy : https://67a21b40b49ad2ad0c08c418-ufqliondtu.chromatic.com/

[Limgabi]

🚀 Storybook Deploy : https://67a21b40b49ad2ad0c08c418-lqjupujzuc.chromatic.com/