[#74] Feat/공통컴포넌트 새로고침

[eunkyung01]

#️⃣ Issue

• close Feat : [공통 컴포넌트] fetch실패시 보여줄 새로고침 컴포넌트 작업 #74

📝 Description

fetch실패시 에러메세지 대신, 해당 컴포넌트의 데이터 fetch를 다시 시도할 수 있도록
새로고침 버튼을 보여주는 컴포넌트를 제작했습니다!

필수 prop으로 handleLoad에 데이터를 fetch하는 함수를 연결해주셔야합니다.
선택적 prop으로는 디자인을 커스텀할 수 있도록 className을 string으로 전달해줄 수 있도록 했습니다.

boxStyle?: string;
요소가 차지할 면적이나 박스 스타일을 className으로 전달할 수 있습니다.
gap을 주면 버튼과 글씨 사이의 간격 조정이 가능합니다.
기본값은 'gap-[10px]'입니다.

iconSize?: string;
아이콘 사이즈를 className으로 전달할 수 있습니다.
기본값은 'h-[136px] w-[136px]' 설정되어 있습니다.

iconTextGap?: string;
gap을 주면 아이콘과 글씨 사이의 간격 조정이 가능합니다.
기본값은 'gap-[10px]'입니다.

buttonStyle?: string;
버튼의 px값과 py값을 className으로 전달해줄 수 있습니다.
기본값은 'px-[30px] py-[10px]'입니다.

현재 내프로필페이지에 적용상태입니다.
요청 api주소가 이상하거나 fetch 실패시 아래처럼 뜹니다!

src/app/(with-header)/myprofile/_components/MyReviewListContainer.tsx
에서 getMyReview함수에서 fetch하고 있는 주소를 잘못된 주소로 하면 잘 보입니다.

다양한 디자인이 보고싶으시다면 해당 MyReviewListContainer에서
에러처리하는 부분에 적용해보세요!

  if (error)
    return (
      <div>
        <Refresh handleLoad={getMyReview} />
        <Refresh handleLoad={getMyReview} buttonStyle='px-[20px] py-[8px]' iconSize='w-[100px] h-[100px]' boxStyle='gap-[30px]' />
        <Refresh handleLoad={getMyReview} buttonStyle='px-[20px] py-[8px] font-normal' iconSize='w-[50px] h-[50px]' iconTextGap='gap-[30px]' boxStyle='gap-[30px]' />
      </div>
    );

🌀 PR Type

어떤 변경 사항이 있나요?

• 새로운 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 코드에 영향을 주지 않는 변경사항 (오타 수정, 탭 사이즈 변경, 변수명 변경)
• 코드 리팩토링
• 주석 추가 및 수정
• 문서 수정
• 테스트 추가, 테스트 리팩토링
• 빌드 부분 혹은 패키지 매니저 수정
• 파일 혹은 폴더명 수정
• 파일 혹은 폴더 삭제

✅ Checklist

PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• Branch Convention 확인

  feat/ 피쳐, fix/ 버그 수정, refactor/ 개선

• Base Branch 확인
• 커밋 메시지 컨벤션 준수
• 적절한 Label 지정
• Assignee 및 Reviewer 지정

Test Checklist

• 로컬 작동 확인

Additional Notes

• (없음)

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
wine	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 14, 2025 1:59pm

[LMS10]

로컬 테스트 완료했습니다! 수고하셨습니다 ~👍🏻