리프레쉬 토큰 오류 코드 추가, 지원한 서포터 없을 경우 버튼 비활성화 (#572)

* feat: 로그인 만료 오류코드 추가 * feat: 지원한 서포터 없을 경우 버튼 숨기기
woowacourse-teams · Sep 20, 2023 · a41699b · a41699b
1 parent 093417c
commit a41699b
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 7 deletions.
diff --git a/frontend/src/components/MyPage/MyPagePostButton/MyPagePostButton.tsx b/frontend/src/components/MyPage/MyPagePostButton/MyPagePostButton.tsx
@@ -14,10 +14,18 @@ interface Props {
   reviewStatus: ReviewStatus;
   isRunner: boolean;
   supporterId?: number;
+  applicantCount: number;
   handleDeletePost: (handleDeletePost: number) => void;
 }
 
-const MyPagePostButton = ({ runnerPostId, reviewStatus, isRunner, supporterId, handleDeletePost }: Props) => {
+const MyPagePostButton = ({
+  runnerPostId,
+  reviewStatus,
+  isRunner,
+  supporterId,
+  applicantCount,
+  handleDeletePost,
+}: Props) => {
   const { goToSupportSelectPage, goToSupporterFeedbackPage } = usePageRouter();
 
   const { isMobile } = useViewport();
@@ -78,6 +86,7 @@ const MyPagePostButton = ({ runnerPostId, reviewStatus, isRunner, supporterId, h
             fontWeight={700}
             width={isMobile ? '100%' : '180px'}
             height="40px"
+            disabled={applicantCount < 1}
             onClick={isRunner ? handleClickSupportSelectButton : handleClickCancelReviewButton}
           >
             {isRunner ? '서포터 선택하기' : '리뷰 제안 취소'}

diff --git a/frontend/src/components/MyPage/MyPagePostItem/MyPagePostItem.tsx b/frontend/src/components/MyPage/MyPagePostItem/MyPagePostItem.tsx
@@ -65,6 +65,7 @@ const MyPagePostItem = ({
 
         <MyPagePostButton
           handleDeletePost={handleDeletePost}
+          applicantCount={applicantCount}
           runnerPostId={runnerPostId}
           isRunner={isRunner}
           reviewStatus={reviewStatus}

diff --git a/frontend/src/components/common/Button/Button.tsx b/frontend/src/components/common/Button/Button.tsx
@@ -14,27 +14,27 @@ interface Props extends React.HTMLProps<HTMLButtonElement> {
 const Button = ({
   colorTheme,
   children,
-  width,
-  height,
   type,
   fontSize,
   fontWeight,
   onClick,
   ariaLabel,
   dataType,
+  disabled,
+  ...buttonProps
 }: Props) => {
   return (
     <S.ButtonWrapper>
       <S.Button
         data-type={dataType}
-        $width={width}
-        $height={height}
         $colorTheme={colorTheme}
         type={type}
+        $disabled={disabled}
         $fontSize={fontSize}
         $fontWeight={fontWeight}
         onClick={onClick}
         aria-label={ariaLabel}
+        {...buttonProps}
       >
         {children}
       </S.Button>
@@ -57,6 +57,7 @@ const S = {
     $height?: string | number;
     $fontSize?: string | number;
     $fontWeight?: number;
+    $disabled?: boolean;
   }>`
     ${({ $colorTheme }) => themeStyles[$colorTheme]}
 
@@ -68,6 +69,8 @@ const S = {
     font-size: ${({ $fontSize }) => $fontSize || '18px'};
     font-weight: ${({ $fontWeight }) => $fontWeight || '400'};
 
+    visibility: ${({ $disabled }) => ($disabled ? 'hidden' : 'visible')};
+
     @media (max-width: 768px) {
       width: ${({ $width }) => $width || '180px'};
       height: 100%;

diff --git a/frontend/src/hooks/useFetch.ts b/frontend/src/hooks/useFetch.ts
@@ -22,7 +22,7 @@ export const useFetch = () => {
 
             showErrorToast({
               title: ERROR_TITLE.NO_PERMISSION,
-              description: ['JW007', 'JW008', 'JW009'].includes(apiError.errorCode)
+              description: ['JW007', 'JW008', 'JW009', 'JW010'].includes(apiError.errorCode)
                 ? ERROR_DESCRIPTION.TOKEN_EXPIRATION
                 : ERROR_DESCRIPTION.NO_TOKEN,
             });

diff --git a/frontend/src/mocks/data/myPagePost/myPagePostList.json b/frontend/src/mocks/data/myPagePost/myPagePostList.json
@@ -6,7 +6,7 @@
       "deadline": "2020-10-13T11:30",
       "tags": ["java", "JAVA"],
       "reviewStatus": "NOT_STARTED",
-      "applicantCount": 4,
+      "applicantCount": 0,
       "watchedCount": 125,
       "supporterId": 1
     },