[FE] 입금 상태를 관리하는 컴포넌트 DepositToggle 기능 구현 #555
Conversation
| justifyContent: 'center', | ||
| borderRadius: '0.5rem', | ||
| padding: ' 0.125rem 0 0 0', | ||
| zIndex: '10', |
There was a problem hiding this comment.
z index 나중에 상수화해도 좋을 것 같아요!
10이 어떤 기준인지에 대해 설명이 있으면 좋을 것 같아서요
There was a problem hiding this comment.
마자용. 작성하면서 z-index 상수화하면 좋을 것 같더라구용. 매번 생각했던건데... 흠. 함 시간 되면 따로 issue 만들어서 해볼게요!
| const {theme} = useTheme(); | ||
|
|
||
| return ( | ||
| <div css={depositToggleStyle({theme, isDeposit})} onClick={onToggle} role="button"> |
There was a problem hiding this comment.
role 속성 좋아요! 벌써부터 접근성까지 대소하
| transition: '0.2s', | ||
| transitionTimingFunction: 'cubic-bezier(0.7, 0.62, 0.62, 1.16)', |
There was a problem hiding this comment.
전반적으로 쓰는 Text 컴포넌트에 transition을 주게 됐을 때 다른 부작용은 없었나요?
There was a problem hiding this comment.
호.. 이 생각은 안 해봐서.. 쿠키 말처럼 페이지에 넣게 되면서 문제가 발생할 수도 있겠네요..!
일단 .toggle-background 클래스가 존재하는 태그에만 애니메이션이 적용되는 거긴 해요! 페이지에 DepositToggle을 저굥하면서 확인해볼게요! 좋은 코멘트 고마워용
| <Text size="caption" textColor={isDeposit ? `onTertiary` : 'gray'} className="completed"> | ||
| 입금 완료 | ||
| </Text> | ||
| <Text size="caption" textColor={isDeposit ? `gray` : 'error'} className="not-completed"> |
There was a problem hiding this comment.
className은 의미 상 넣어두신 걸까요?
There was a problem hiding this comment.
엌. 이전에는 저 class로 스타일을 적용했었어요! 아직 남아 있군요... 수정해둘게요!
| }, | ||
| args: { | ||
| isDeposit: false, | ||
| onToggle: () => alert('change toggle'), |
There was a problem hiding this comment.
스토리북에서 클릭하니까 이 얼러트가 뜨는데요. 스토리북에서 버튼클릭으로 값을 수정하는건 혹시 구조상 어려운걸까요..?
There was a problem hiding this comment.
스토리북에서도 DepositToggle을 클릭하면 focus가 변경되도록 반영해뒀어요!
| transition: '0.2s', | ||
| transitionTimingFunction: 'cubic-bezier(0.7, 0.62, 0.62, 1.16)', | ||
|
|
||
| transform: !isDeposit ? 'translateY(1.25rem)' : '', |
There was a problem hiding this comment.
저희팀 애니메이션에 진심이라 너무 좋아요좋아요.. 많이 배워갑니다..... 총총👍👍
| const {theme} = useTheme(); | ||
|
|
||
| return ( | ||
| <div css={depositToggleStyle({theme, isDeposit})} onClick={onToggle} role="button"> |
There was a problem hiding this comment.
role이라는 속성도 있었군요..? 그냥 소토쿠(스도쿠??????? !!!!!)다 먹고 천재하면 안될까요?
| onToggle: () => void; | ||
| } | ||
|
|
||
| export interface DepositToggleStylePropsWithTheme extends DepositToggleStyleProps { |
There was a problem hiding this comment.
사용처에서 WithTheme<DepositToggleStyleProps>로 사용하는건 별로일까요?
There was a problem hiding this comment.
오! 우리 프로젝트에 WithTheme이 존재하는 걸 몰랐어요! 웨디 덕분에 한결 편-안해진 코드.
issue
구현 사항
DepositToggle의 디자인 컴포넌트를 구현했습니다.
디자인 수정
issue에 올린 Toggle의 디자인은 Button 컴포넌트를 활용하여 디자인한 것입니다.
그러나, 해당 Toggle은 Button 컴포넌트를 활용해서는 만들 수 없습니다. 따라서, 이전에 Button 컴포넌트로 font 사이즈가 맞춰져 있던 것을 일반 Text 컴포넌트의 font 사이즈로 변경했습니다.
font 사이즈는 12px로 동일하나 line-height, padding을 변경해줬습니다.
div 태그에
role=”button”button 태그를 활용하려고 했으나, 퍼블리싱이 원하는 대로 동작하지 않는 이슈가 발생했습니다. 이는 아마도 모든 태그의 스타일을 초기화하기 때문이 아닐까.. 싶은...
따라서 div 태그를 활용하여 Toggle을 만들어줬습니다. 그러나 스크린 리더기에서는 해당 div가 버튼인지를 모를 것입니다. 그렇기에 div 태그에 role 속성을 추가해줬습니다.
role 속성을 button으로 지정해주면, 스크린 리더기에서 해당 div가 button임을 인지할 수 있습니다.
onToggle시 배경색 이동 애니메이션
onToggle된 값(입금 확인/미입금)에는 흰색 배경색이 들어갑니다. 이때, DepositToggle을 클릭하면 그 반대의 값 (true면 false, false면 true)으로 변경됩니다. 그러면서 흰 배경색도 해당 값으로 이동하게 됩니다. 이때, 이동하는 배경색에 애니메이션을 줬습니다. (대-토다리)
toggle-background라는 클래스 이름을 가진 div 태그는 흰색 배경색을 가집니다. 그리고 Text 컴포넌트는 zIndex 5를 가집니다. 이 흰색 배경은 isDeposit 값에 따라 위치가 변경됩니다.
_._.mov
🫡 참고사항
페이지까지 만들려고 했는데, 애니메이션에서 죽쒀서 못 만들어쒀여 ㅎ...