[SP2] 프로젝트 탭 캐러셀 블러 스타일 수정 #266
Conversation
| ::after { | ||
| right: -1px; |
There was a problem hiding this comment.
right를 -1px로 준 이유는 0으로 주면 크롬 개발자 도구 반응형으로 봤을 때 끝 부분까지 덮이지 않는 것처럼 보이기 때문입니다.
There was a problem hiding this comment.
오호... 왜 안덮히는 걸까요...? 신기하네요..!
| gap: 24px; | ||
|
|
||
| @media (max-width: 899px) { | ||
| gap: 14px; |
There was a problem hiding this comment.
gap 숫자를 gapWidth를 props 로 받아서 넣어도 될 것 같아요!
gapWidth={isMobileSize ? 14 : 24}
There was a problem hiding this comment.
음 미디어쿼리로 할 수 있는데 프롭으로 넘겨야 하는 이유가 무엇인가요?
There was a problem hiding this comment.
gapWidth라는 값을 컴포넌트가 갖고 있어서 그렇군요 ..
그럼 확장성 생각했을 때에 gapWidth를 받아와도 좋을 것 같습니다!
There was a problem hiding this comment.
itemWidth 같은 것들도 props로 넘겨주고 있길래 통일성까지 고려해서 적용하였습니다!
| isSliding && | ||
| css` | ||
| opacity: 1; | ||
| transition: opacity 0.3s ease-out; |
There was a problem hiding this comment.
transition 속성은 조건문을 걸지 않아도 괜찮지 않나요 ..?
There was a problem hiding this comment.
화면 사이즈가 변동 되었을 때는 transition이 없었으면 해서 슬라이드 넘길 때만 적용했습니다!
Summary
Screenshot
[ 디자인 QA ]
피그마를 확인했을 때 캐러셀 옆이 블러 처리가 될 때가 슬라이드 아이템이 잘려서 보이는 경우 와 슬라이드를 넘길 때 라고 생각됩니다.
[ 기존 ]
2023-11-07.4.07.45.mov
[ 수정 후 ]
2023-11-07.4.12.21.mov
Comment