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}