Feature/issue 47/create coctail recipe #15
Conversation
| <Space direction="vertical" style={{ width: '90%' }}> | ||
| <Typography.Text>도수</Typography.Text> | ||
| <Space direction="horizontal"> | ||
| <Button onClick={() => onChangeVolume(0)} style={{ width: '70px' }}> | ||
| <div>무알콜</div> | ||
| </Button> | ||
| <InputNumber | ||
| style={{ width: '200px' }} | ||
| min={0} | ||
| max={40} | ||
| placeholder="도수를 입력해 주세요." | ||
| value={volume} | ||
| onChange={onChangeVolume} | ||
| /> | ||
| </Space> | ||
| </Space> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
디자인 확정되면 변경된 UI로 수정하겠습니닷~~
(현재 - 무알콜 + 도수 입력 input)
(변경 후 - 도수 slider )
|
|
||
| import { createGlobalStyle } from 'styled-components'; | ||
|
|
||
| RecoilEnv.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED = false; |
There was a problem hiding this comment.
facebookexperimental/Recoil#733
next와 recoil을 동시에 사용하면 ssr 환경으로 인해 발생하는 duplicated key error가 존재하여 해당 경우 recoil 레포에 제시된 해결방법으로 수정합니다.
| const debouncedOnChange = debounce((setState: Dispatch<SetStateAction<string | undefined>>, value: string) => { | ||
| setState(value); | ||
| }, 300); | ||
|
|
||
| const onChangeKoreanName = useCallback( | ||
| (e: ChangeEvent<HTMLInputElement>) => debouncedOnChange(setKoreanName, e.target.value), | ||
| [debouncedOnChange, setKoreanName], | ||
| ); | ||
|
|
||
| const onChangeEnglishName = useCallback( | ||
| (e: ChangeEvent<HTMLInputElement>) => debouncedOnChange(setEnglishName, e.target.value), | ||
| [debouncedOnChange, setEnglishName], | ||
| ); |
There was a problem hiding this comment.
lodash 의 debounce를 적용하여 입력 후 일정 시간(300ms) 이후에 한번만 setState가 발생하도록 함.
debounce, throttle 요약 정리 - https://www.notion.so/Throttle-Debounce-c38489643f9c4e028e03287d2814ff65?pvs=4
There was a problem hiding this comment.
아쉽게도 요약정리 링크가 권한이 없어 볼수가 없네여ㅠ
https://dmitripavlutin.com/react-throttle-debounce/ 여기에 설명되어있는 부분이랑 같은거같은데
lodash 오랜만에 봐서 반갑군여ㅋㅋㅋㅋ
There was a problem hiding this comment.
앗 https://bustling-basin-9fe.notion.site/Throttle-Debounce-c38489643f9c4e028e03287d2814ff65 이겁니다 ㅋㅎ 첨부해주신 내용이랑 같아요!
| seasonalStyle, | ||
| cocktailStyle, | ||
| volume, | ||
| koreanName, |
There was a problem hiding this comment.
칵테일 이름이 태그로 들어가는 디자인도 나왔었나요? 못본거 같아서,, 혹여나 하는 마음에 코멘트 남김니다
There was a problem hiding this comment.
요 부분 디자인이 확정이 아닌거 같아요 ㅠ 그래서 기획 + 디자인 확정되면 다시 수정할게요!
This comment was marked as duplicate.
This comment was marked as duplicate.
Sorry, something went wrong.
관련 issue [Cocktail-Recipe/issues#47] [Cocktail-Recipe/issues#48]
기획서 상의 조건을 기반으로 작업했으며, 추후 제한조건 API가 구체화 되면 추가적으로 수정할 예정입니다.