Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Aug 16, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b917c40
fix: Checkbox isReview일 경우 클릭 막기
lydiacho Aug 16, 2024
799d5cc
fix: disabled 시 hover 효과 막기
lydiacho Aug 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/common/components/Checkbox/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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']} />
Expand Down
11 changes: 8 additions & 3 deletions src/common/components/Checkbox/style.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ export const checkboxContainer = style({
gap: 6,
position: 'relative',
width: 'fit-content',
cursor: 'pointer',
WebkitUserSelect: 'none',
MozUserSelect: 'none',
msUserSelect: 'none',
Expand All @@ -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) */
Expand All @@ -48,7 +48,7 @@ const checkmarkBase = style({
},

/* 마우스 hover시 */
[`${checkboxContainer}:hover input ~ &`]: {
[`${checkboxContainer}:hover input:enabled ~ &`]: {
backgroundColor: theme.color.subBackground,
},

Expand All @@ -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,
},
Expand Down Expand Up @@ -86,6 +86,11 @@ const checkmarkBase = style({
outline: `2px dotted ${theme.color.primary}`,
outlineOffset: 2,
},

/* ReviewPage에서는 disabled 처리 */
[`${checkboxContainer} input:disabled ~ &`]: {
cursor: 'not-allowed',
},
},
});

Expand Down
18 changes: 14 additions & 4 deletions src/common/components/Radio/components/Option/style.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}`,
},
Expand All @@ -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}`,
Expand All @@ -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',
},
},
});
12 changes: 10 additions & 2 deletions src/views/ApplyPage/components/BottomSection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down