From a0d9fadee289e111543be6ad7cc2c85c3ae3334e Mon Sep 17 00:00:00 2001 From: Jeongeun Lee Date: Tue, 14 Jul 2026 23:05:25 +0900 Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=9D=98=20=EC=99=84=EB=A3=8C=ED=95=9C=20?= =?UTF-8?q?=EC=B1=8C=EB=A6=B0=EC=A7=80=20=EC=B9=B4=EB=93=9C=EB=A5=BC=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=ED=95=98=EB=A9=B4=20=ED=95=B4=EB=8B=B9=20?= =?UTF-8?q?=EC=B1=8C=EB=A6=B0=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CompletedChallengeCard.tsx | 36 ++++++++++++++++--- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx b/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx index 28fe57c6..6ff8a156 100644 --- a/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx +++ b/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx @@ -1,9 +1,11 @@ import styled from '@emotion/styled'; +import { useNavigate } from '@tanstack/react-router'; import CertificateModal from './CertificateModal'; import { MEDAL_COLORS } from '../../constants/challenge'; import Button from '@/components/Button/Button'; import useModal from '@/components/Modal/useModal'; import type { MyCompletedChallenge } from '@/apis/members/members.api'; +import type { MouseEvent } from 'react'; import MedalBronzeIcon from '#/assets/svg/medal-bronze.svg'; import MedalGoldIcon from '#/assets/svg/medal-gold.svg'; import MedalSilverIcon from '#/assets/svg/medal-silver.svg'; @@ -28,14 +30,30 @@ const CompletedChallengeCard = ({ challenge }: CompletedChallengeCardProps) => { const { challengeId, title, startDate, endDate, attendanceRate, grade } = challenge; const { modalRef, isOpen, openModal, closeModal } = useModal(); + const navigate = useNavigate(); - const medalGrade = grade != null && grade !== 'FAIL' ? grade : null; + const isFail = grade === 'FAIL'; + const medalGrade = grade != null && !isFail ? grade : null; const MedalIcon = medalGrade ? MEDAL_ICON[medalGrade] : null; const gradeColor = medalGrade ? GRADE_COLOR[medalGrade] : null; + const handleCardClick = () => { + if (isFail) return; + + navigate({ + to: '/challenge/$challengeId/dashboard', + params: { challengeId: String(challengeId) }, + }); + }; + + const handleCertButtonClick = (e: MouseEvent) => { + e.stopPropagation(); + openModal(); + }; + return ( <> - + {MedalIcon ? ( @@ -56,7 +74,11 @@ const CompletedChallengeCard = ({ challenge }: CompletedChallengeCardProps) => { {grade === 'FAIL' && (탈락)} {grade !== 'FAIL' && ( - + 수료증 확인 )} @@ -79,7 +101,7 @@ const CompletedChallengeCard = ({ challenge }: CompletedChallengeCardProps) => { export default CompletedChallengeCard; -const Container = styled.div` +const Container = styled.div<{ disabled?: boolean }>` width: 100%; padding: 12px 16px; border: 1px solid ${({ theme }) => theme.colors.stroke}; @@ -89,7 +111,11 @@ const Container = styled.div` gap: 12px; align-items: center; + background-color: ${({ theme, disabled }) => + disabled ? theme.colors.disabledBackground : theme.colors.white}; + box-sizing: border-box; + cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; `; const Content = styled.div` @@ -108,7 +134,7 @@ const MedalCircle = styled.div<{ gradeColor: string | null }>` justify-content: center; background-color: ${({ theme, gradeColor }) => - gradeColor ? `${gradeColor}20` : theme.colors.dividers}; + gradeColor ? `${gradeColor}20` : theme.colors.stroke}; `; const MedalPlaceholder = styled.div` From 665c3474854e6f168fe05364254baf7e6cf60f63 Mon Sep 17 00:00:00 2001 From: Jeongeun Lee Date: Tue, 14 Jul 2026 23:41:56 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=EC=B1=8C=EB=A6=B0=EC=A7=80=20id?= =?UTF-8?q?=EA=B0=80=20=EC=97=86=EC=9D=84=EB=95=8C=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EB=A1=9C=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EB=90=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/MyChallengeSection/CompletedChallengeCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx b/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx index 6ff8a156..1a615c3d 100644 --- a/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx +++ b/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx @@ -38,7 +38,7 @@ const CompletedChallengeCard = ({ challenge }: CompletedChallengeCardProps) => { const gradeColor = medalGrade ? GRADE_COLOR[medalGrade] : null; const handleCardClick = () => { - if (isFail) return; + if (isFail || !challengeId) return; navigate({ to: '/challenge/$challengeId/dashboard', From 1a8564c6ee70742c713210e50c1dab67fe277080 Mon Sep 17 00:00:00 2001 From: Jeongeun Lee Date: Tue, 14 Jul 2026 23:43:17 +0900 Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20=EC=99=84=EB=A3=8C=ED=95=9C=20?= =?UTF-8?q?=EC=B1=8C=EB=A6=B0=EC=A7=80=20=EC=B9=B4=EB=93=9C=EB=A5=BC=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=83=9C=EA=B7=B8=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/MyChallengeSection/CompletedChallengeCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx b/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx index 1a615c3d..82d9066a 100644 --- a/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx +++ b/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx @@ -101,7 +101,7 @@ const CompletedChallengeCard = ({ challenge }: CompletedChallengeCardProps) => { export default CompletedChallengeCard; -const Container = styled.div<{ disabled?: boolean }>` +const Container = styled.button<{ disabled?: boolean }>` width: 100%; padding: 12px 16px; border: 1px solid ${({ theme }) => theme.colors.stroke}; From aaf5476ba11751abe128d901d569b050417722ee Mon Sep 17 00:00:00 2001 From: Jeongeun Lee Date: Tue, 14 Jul 2026 23:52:45 +0900 Subject: [PATCH 4/5] =?UTF-8?q?design:=20=EC=B9=B4=EB=93=9C=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MyChallengeSection/CompletedChallengeCard.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx b/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx index 82d9066a..551e98e1 100644 --- a/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx +++ b/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx @@ -119,8 +119,14 @@ const Container = styled.button<{ disabled?: boolean }>` `; const Content = styled.div` + width: 100%; min-width: 0; + + display: flex; + gap: 4px; flex: 1; + flex-direction: column; + align-items: flex-start; `; const MedalCircle = styled.div<{ gradeColor: string | null }>` @@ -152,11 +158,13 @@ const MedalPlaceholder = styled.div` `; const Info = styled.div` + width: 100%; min-width: 0; display: flex; gap: 4px; flex-direction: column; + align-items: flex-start; `; const Title = styled.h3` @@ -193,6 +201,8 @@ const FailBadge = styled.span` `; const BottomRow = styled.div` + width: 100%; + display: flex; align-items: center; justify-content: space-between; From a268861902c42185f7ab4864219ec047a2359b26 Mon Sep 17 00:00:00 2001 From: Jeongeun Lee Date: Wed, 15 Jul 2026 00:09:00 +0900 Subject: [PATCH 5/5] =?UTF-8?q?refactor:=20=EC=B9=B4=EB=93=9C=EB=A5=BC=20b?= =?UTF-8?q?utton=EC=97=90=EC=84=9C=20div=20as=20button=EC=9C=BC=EB=A1=9C?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CompletedChallengeCard.tsx | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx b/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx index 551e98e1..4f8ae566 100644 --- a/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx +++ b/web/src/pages/my-page/components/MyChallengeSection/CompletedChallengeCard.tsx @@ -5,7 +5,7 @@ import { MEDAL_COLORS } from '../../constants/challenge'; import Button from '@/components/Button/Button'; import useModal from '@/components/Modal/useModal'; import type { MyCompletedChallenge } from '@/apis/members/members.api'; -import type { MouseEvent } from 'react'; +import type { KeyboardEvent, MouseEvent } from 'react'; import MedalBronzeIcon from '#/assets/svg/medal-bronze.svg'; import MedalGoldIcon from '#/assets/svg/medal-gold.svg'; import MedalSilverIcon from '#/assets/svg/medal-silver.svg'; @@ -51,9 +51,22 @@ const CompletedChallengeCard = ({ challenge }: CompletedChallengeCardProps) => { openModal(); }; + const handleCardKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + handleCardClick(); + } + }; + return ( <> - + {MedalIcon ? ( @@ -101,7 +114,7 @@ const CompletedChallengeCard = ({ challenge }: CompletedChallengeCardProps) => { export default CompletedChallengeCard; -const Container = styled.button<{ disabled?: boolean }>` +const Container = styled.div<{ disabled?: boolean }>` width: 100%; padding: 12px 16px; border: 1px solid ${({ theme }) => theme.colors.stroke};