Refactor/toast: Toast 커스텀 훅 정의 및 duration Props 추가 #75
Conversation
Toast 컴포넌트를 사용하는 곳에서 Toast 의 열림 여부를 다루는 Toast 훅을 추가합니다.
버튼을 눌렀을 때 Toast 가 열리고 x 버튼을 누르면 Toast 가 닫히는 스토리를 추가합니다.
Toast가 떠 있는 duration을 외부에서 주입받고 해당 시간 이후 useToast의 open을 변경하는 함수를 실행합니다.
There was a problem hiding this comment.
useToast 훅은 진짜 너무 멋있네요 bb 사용 방법이 너무 깔끔해요
onChangeOpen은 어떤 함수인가요? open 상태가 변경되었을 때 작동하는 함수(제 추측)가 맞다면 onKeyDown의 형태처럼 onOpenChange 또는 다른 직관적인 이름이었으면 좋을 것 같아요.
하고 싶은 말은 이게 아니라, hooks를 사용하지 않는 스토리에서 계속 이 함수가 undefined라는 오류가 콘솔에 찍혀서, 필수 props가 맞다면 넣어 주는 게 좋을 것 같아요.
너무너무 멋있어요 이제 자요 우리~~
기존에는 Toast 컴포넌트의 open Props 에 default 값으로 false 를 주었습니다. 이러한 방식은 스토리를 확인할 때, 1. open 값을 true 로 전달하여 Toast 컴포넌트를 렌더링해야 하지만 2. 해당 값을 변경하는 핸들러가 없기 때문에 onClose Props 를 비워두게 됩니다. 필수적으로 들어가야 하는 Props 를 전달하지 못하는 문제가 생기기 때문에 커스텀 훅에서 초기값을 받도록 변경합니다. 따라서 아무런 액션을 하지 않고도 Toast 를 보여주고 싶은 상황에서는 useToast(true) 처럼 사용할 수 있습니다. 더불어 useToast 내부에 있는 함수들의 이름도 onVerb 형식으로 변경합니다.
|
Toast 컴포넌트에서 받는 Props 이름을 onClose 라고 변경했어요. 닫기 버튼을 누를 때에만 실행할 함수를 받는 위치이기 때문에 Close 라고 이름에 못 박아두었어요. 또한 useToast 내부에 있는 함수들도 onVerb 형태로 이름을 변경했어요. 나중에 사용하는 곳에서
그리고 onClose Props 를 전달하지 않았던 부분은 open Props 의 defalut 가 false 로 설정되어 있는 상태에서 스토리를 렌더링하기 위해 open 값을 강제로 true로 넣어주었지만 open 값을 변경하는 useState 를 선언하자니 'Toast 렌더링 여부를 결정하는 useToast 가 이미 있는데 굳이?' 라는 생각을 했어요. 가져다가 사용하려고 보니까 useToast 내부 state의 기본값도 false 로 고정되어 있어서 버튼을 눌러서 띄우는 (= useToast가 적용된) 스토리 이전의 스토리에서는 Toast 의 다른 Props들만 확인할 수 있게 하면 되겠다 싶었어요. 말씀해주신 부분을 참고하여 useToast 훅이 초기값을 매개변수로 받을 수 있도록 설정함과 동시에 모든 스토리에서 useToast 훅을 사용하는 방식으로 변경하여 kind, title, message 등의 Props 가 주가 되는 스토리에서 변경 이후에도 오류가 발생하는지 확인해주시면 감사하겠습니다~! |
There was a problem hiding this comment.
open Props 의 defalut 가 false 로 설정되어 있는 상태에서 스토리를 렌더링하기 위해 open 값을 강제로 true로 넣어주었지만
실제 usecase에서는 항상 useToast 훅을 같이 사용해야 하기 때문에 발생하지 않는 오류라고 이해하면 될까요?
그리고 핸들러 네이밍 컨벤션 말인데, 지금은 onVerb 형태로 동사만이 명시되어 있지만 onOpenToast처럼 목적어(주어든 목적어든 암튼)가 같이 들어가는 경우가 많을 것 같은데, 여기까지 명확하게 정하면 좋을 것 같아요. 지금 현빈님이 사용하신 형태로 괜찮은지 다들 의견 부탁드려요!
그리고.. 노션에 있는 컨벤션 레포지토리에 이슈로 올려서 pin 해놓으면 어떨까 하는 생각이 들어요. 지금 열기 너무 번거로워요 ㅋㅋ..
|
현재 useToast 훅을 반드시 사용해야만 한다는 강제성이 없긴 하지만, Props를 넘겨주지 않으면 오류가 발생하긴 할테니까 개발 단계에서 useState나 useToast를 써서 값을 전달할 것 같아요. 컨벤션 페이지는 내용을 위키에 클론해놓거나 하면 좋을 것 같긴하네요. 전반적으로 문서 정리를 날 잡아서 해놔야 할 것 같아요.. |
useToast 에서 사용하는 boolean 상태에 대한 이름을 isOpen 으로 변경합니다. 커스텀 훅이 반환하는 함수명도 이벤트 핸들러 형식이 아닌 일반 함수처럼 변경합니다. Toast에서 필요한 값을 Object로 묶어서 반환합니다.
kind props 에 default 값을 넣어주기 위해서 ToastKind 타입alert 값을 추가했습니다. color.ts 에 alert 색상을 추가했습니다.
🤠 개요
💫 설명
useToast.ts 에 open 상태를 제어할 수 있는 커스텀 훅을 만들었습니다.
WithToastHook 스토리에서 확인할 수 있듯이 커스텀 훅에서 제공하는 함수를 이벤트 핸들러로 등록하여 Toast 를 띄울 수 있습니다.
이를 위해서 추가적으로 open 과 onChangeOpen 을 Props 에 추가했습니다.
Toast 컴포넌트가 자동으로 꺼질 수 있도록 duration Props 를 받습니다. ( default = 3000 = 3초 )
Toast 내부 닫는 버튼 (CloseButton) 에 Button 컴포넌트를 사용하려고 했지만, 수정해야 하는 스타일이 많을 것 같아서
내부에서 스타일 컴포넌트를 정의해서 사용했습니다.
그 외 사소한 스타일 변경을 했습니다.
Toast 컴포넌트의 배경색을 명시적으로 부여했습니다.
기존에는 mainColor의 default 값이 빈 문자열이었는데, black 값을 주도록 변경했습니다.
Toast 애니메이션 딜레이가 너무 늦어서 0.1초로 변경하여 이제 더 빨리 동작합니다.
📷 스크린샷 (Optional)
2023-03-24.01.23.01.mov