[Fix] ReviewPage 클릭 비활성화 처리 (#404)

* fix: Checkbox isReview일 경우 클릭 막기 * fix: disabled 시 hover 효과 막기
sopt-makers · Aug 16, 2024 · 85ade7f · 85ade7f
1 parent dee5d40
commit 85ade7f
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 9 deletions.
diff --git a/src/common/components/Checkbox/index.tsx b/src/common/components/Checkbox/index.tsx
@@ -33,6 +33,7 @@ const Checkbox = <T extends FieldValues>({
  })}
  type="checkbox"
  className={`amp-unmask ${hiddenCheckbox}`}
+ disabled
  {...checkboxElementProps}
  />
  <span className={checkmark[errors && errors[name] ? 'error' : 'default']} />

diff --git 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
@@ -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
@@ -40,12 +40,20 @@ const BottomSection = ({ isReview, knownPath }: BottomSectionProps) => {
  ? 'SOPT makers의 행사 및 정기 모임은 일요일에 진행됩니다.'
  : 'SOPT의 행사 및 세미나는 매주 토요일에 진행됩니다.'}
  </p>
- <Checkbox checked={isReview ? true : undefined} name="attendance" required>
+ <Checkbox
+ checked={isReview ? true : undefined}
+ name="attendance"
+ required
+ disabled={isReview ? true : undefined}>
  참석 가능합니다.
  </Checkbox>
  </div>
  <div>
- <Checkbox checked={isReview ? true : undefined} required name="personalInformation">
+ <Checkbox
+ checked={isReview ? true : undefined}
+ required
+ name="personalInformation"
+ disabled={isReview ? true : undefined}>
  개인정보 수집 ‧ 이용에 동의합니다.
  </Checkbox>
  <Contentbox>{PRIVACY_POLICY}</Contentbox>