[GGFE-48] 슬롯 스타일 적용 #826
[GGFE-48] 슬롯 스타일 적용 #826
Conversation
components/match/MatchBoard.tsx
Outdated
| open: radioMode === 'RANK' ? styles.rank : styles.normal, | ||
| match: radioMode === 'RANK' ? styles.rank : styles.normal, | ||
| close: | ||
| event === 'match' && match[0].startTime === startTime |
There was a problem hiding this comment.
match 3개까지 잡을 수 있어서 match리스트에 있는 애들 다 비교하는 식으로 바꿔야 할 듯 합니다! Both 3개 등록했더니 1개만 초록색이고 나머지 두개는 close 2/2로 뜹니다.
styles/match/MatchBoard.module.scss
Outdated
| } | ||
|
|
||
| &.disabled { | ||
| background: linear-gradient(to bottom, $gray, rgba(217, 217, 217, 0.6)); | ||
| background: linear-gradient(to bottom, #636671, #424550); | ||
| cursor: default; |
There was a problem hiding this comment.
다른 분들 의견도 들어봐야하는데, 저는 disabled일 때는 cursor: not-allowed 해도 괜찮을 거 같아요.
There was a problem hiding this comment.
이미 지난 슬롯이기 때문에 클릭이 안된다는 것을 확실히 표현하기 위해서라면 cursor: not-allowed로 하는것도 좋은 생각인 것 같아요
| opacity: 0.7; | ||
| pointer-events: none; | ||
| animation: spin 1s infinite; | ||
| cursor: not-allowed; |
There was a problem hiding this comment.
리로드했을 때 cursor: not-allowed가 적용 안되는 거 같은데 왜 적용안되는지 이유를 모르겠네요 ㅠ
There was a problem hiding this comment.
찾아보니까 pointer-events가 none이기 때문에 cursor 역시 적용이 안되는 것 같네여 (참고 : twbs/bootstrap#16088) 참고 링크에 나온대로 pointers-events: all로 수정해주니까 cursor: not-allowed가 적용되더라구요.
There was a problem hiding this comment.
오 감사합니다 disabled 슬롯은 cursor: not-allowed 적용시켰어요
styles/match/match.module.scss
Outdated
| 100% { | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
| // .title { |
📌 개요
💻 작업사항
✅ 변경로직