diff --git a/src/common/components/Checkbox/index.tsx b/src/common/components/Checkbox/index.tsx index 305f7677..8c4aafbe 100644 --- a/src/common/components/Checkbox/index.tsx +++ b/src/common/components/Checkbox/index.tsx @@ -33,6 +33,7 @@ const Checkbox = ({ })} type="checkbox" className={`amp-unmask ${hiddenCheckbox}`} + disabled {...checkboxElementProps} /> diff --git a/src/common/components/Checkbox/style.css.ts b/src/common/components/Checkbox/style.css.ts index 2d96d79d..16443f89 100644 --- a/src/common/components/Checkbox/style.css.ts +++ b/src/common/components/Checkbox/style.css.ts @@ -15,7 +15,6 @@ export const checkboxContainer = style({ gap: 6, position: 'relative', width: 'fit-content', - cursor: 'pointer', WebkitUserSelect: 'none', MozUserSelect: 'none', msUserSelect: 'none', @@ -38,6 +37,7 @@ const checkmarkBase = style({ width: 22, borderRadius: 5, transition: 'all 0.3s ease', + cursor: 'pointer', selectors: { /* Create the checkmark/indicator (hidden when not checked) */ @@ -48,7 +48,7 @@ const checkmarkBase = style({ }, /* 마우스 hover시 */ - [`${checkboxContainer}:hover input ~ &`]: { + [`${checkboxContainer}:hover input:enabled ~ &`]: { backgroundColor: theme.color.subBackground, }, @@ -58,7 +58,7 @@ const checkmarkBase = style({ backgroundColor: theme.color.primary, }, - [`${checkboxContainer} input:checked:hover ~ &`]: { + [`${checkboxContainer} input:checked:enabled:hover ~ &`]: { border: `1px solid ${theme.color.primaryDark}`, backgroundColor: theme.color.primaryDark, }, @@ -86,6 +86,11 @@ const checkmarkBase = style({ outline: `2px dotted ${theme.color.primary}`, outlineOffset: 2, }, + + /* ReviewPage에서는 disabled 처리 */ + [`${checkboxContainer} input:disabled ~ &`]: { + cursor: 'not-allowed', + }, }, }); diff --git a/src/common/components/Radio/components/Option/style.css.ts b/src/common/components/Radio/components/Option/style.css.ts index ec25f834..c4e46271 100644 --- a/src/common/components/Radio/components/Option/style.css.ts +++ b/src/common/components/Radio/components/Option/style.css.ts @@ -16,10 +16,6 @@ const inputBase = style({ transition: 'all 0.3s ease', cursor: 'pointer', - ':hover': { - backgroundColor: theme.color.subBackground, - }, - ':checked': { border: `6px solid ${theme.color.primary}`, }, @@ -29,7 +25,15 @@ const inputBase = style({ outlineOffset: 2, }, + ':disabled': { + cursor: 'not-allowed', + }, + selectors: { + '&:enabled:hover': { + backgroundColor: theme.color.subBackground, + }, + '&:checked:hover': { backgroundColor: theme.color.background, border: `6px solid ${theme.color.primaryDark}`, @@ -55,4 +59,10 @@ export const inputStyle = styleVariants({ export const labelStyle = style({ ...theme.font.BODY_2_16_M, cursor: 'pointer', + + selectors: { + [`${container} input:disabled ~ &`]: { + cursor: 'not-allowed', + }, + }, }); diff --git a/src/views/ApplyPage/components/BottomSection/index.tsx b/src/views/ApplyPage/components/BottomSection/index.tsx index 5ec96763..56def4b2 100644 --- a/src/views/ApplyPage/components/BottomSection/index.tsx +++ b/src/views/ApplyPage/components/BottomSection/index.tsx @@ -40,12 +40,20 @@ const BottomSection = ({ isReview, knownPath }: BottomSectionProps) => { ? 'SOPT makers의 행사 및 정기 모임은 일요일에 진행됩니다.' : 'SOPT의 행사 및 세미나는 매주 토요일에 진행됩니다.'}

- + 참석 가능합니다.
- + 개인정보 수집 ‧ 이용에 동의합니다. {PRIVACY_POLICY}