#78 refactor: 개인 대시보드 없을때 챌린지 참여 방지

AJD-Archive · Sep 24, 2024 · 0d2eb4f · 0d2eb4f
1 parent f2a3ac6
commit 0d2eb4f
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 16 deletions.
diff --git a/src/components/JoinChallengeModal.tsx b/src/components/JoinChallengeModal.tsx
@@ -74,23 +74,40 @@ const JoinChallengeModal = ({ challengeId, onNoClick, fetchedData }: CustomModal
           챌린지를 추가할 대시보드를 선택해주세요.
         </SubTitle>
       </Flex>
-      <S.JoinSelect onChange={handleSelectChange}>
-        {data?.data.personalDashboardListResDto?.map((item: DashboardItem) => (
-          <option
-            key={item.dashboardId}
-            value={
-              item.dashboardId !== null && item.dashboardId !== undefined ? item.dashboardId : ''
-            }
-          >
-            {item.title}
-          </option>
-        ))}
-      </S.JoinSelect>
+      {data?.data.personalDashboardListResDto &&
+      data.data.personalDashboardListResDto.length > 0 ? (
+        <>
+          <S.JoinSelect onChange={handleSelectChange}>
+            {data?.data.personalDashboardListResDto?.map((item: DashboardItem) => (
+              <option
+                key={item.dashboardId}
+                value={
+                  item.dashboardId !== null && item.dashboardId !== undefined
+                    ? item.dashboardId
+                    : ''
+                }
+              >
+                {item.title}
+              </option>
+            ))}
+          </S.JoinSelect>
 
-      <Flex>
-        <BtnYes onClick={onNoClick}>취소</BtnYes>
-        <BtnNo onClick={submitJoin}>참여</BtnNo>
-      </Flex>
+          <Flex>
+            <BtnYes onClick={onNoClick}>취소</BtnYes>
+            <BtnNo onClick={submitJoin}>참여</BtnNo>
+          </Flex>
+        </>
+      ) : (
+        <>
+          <S.ErrorMessage>
+            참여할 수 있는 대시보드가 없어요. <br />
+            개인 대시보드를 생성하고 다시 시도해주세요!
+          </S.ErrorMessage>
+          <BtnYes onClick={onNoClick} style={{ margin: 0 }}>
+            취소
+          </BtnYes>
+        </>
+      )}
     </StyledModal>
   );
 };

diff --git a/src/styles/ChallengeStyled.tsx b/src/styles/ChallengeStyled.tsx
@@ -309,6 +309,14 @@ export const JoinSelect = styled.select`
     color: ${theme.color.lightGray};
   }
 `;
+
+export const ErrorMessage = styled.p`
+  color: ${theme.color.main};
+  font-size: 0.9rem;
+  text-align: center;
+  line-height: 1.3rem;
+`;
+
 export const SubmitBtn = styled.button`
   margin-top: 3rem;
   padding: 0.65rem 3rem;