SelectionTextfield 컴포넌트 #115
Conversation
Codecov ReportPatch coverage has no change and project coverage change:
Additional details and impacted files@@ Coverage Diff @@
## main #115 +/- ##
==========================================
- Coverage 98.23% 95.90% -2.33%
==========================================
Files 35 39 +4
Lines 226 244 +18
Branches 37 41 +4
==========================================
+ Hits 222 234 +12
- Misses 4 10 +6
☔ View full report in Codecov by Sentry. |
Bundle SizesCompared against 071cc5d Route: No significant changes found Dynamic import: None found. |
| value: string; | ||
| isFocused: boolean; | ||
|
|
||
| onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; |
There was a problem hiding this comment.
| onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; | |
| onChange: ChangeEventHandler<HTMLInputElement>; |
요건 어떤가용
There was a problem hiding this comment.
오 좋아요! 이런 방법도 있군여 ㅎㅎ 감사합니다
| const SelectTextFieldList = ({ inputs, basicCount, setInputs, isMultiChoice }: Props) => { | ||
| const [focusInput, setFocusInput] = useState<number | null>(null); | ||
|
|
||
| const onInputChange = (index: number) => (e: React.ChangeEvent<HTMLInputElement>) => { |
|
|
||
| const onItemDelete = (index: number) => { | ||
| if (inputs.length - 1 <= basicCount) { | ||
| alert(`최소 ${basicCount}개 이상의 옵션을 입력해주세요.`); |
There was a problem hiding this comment.
요 부분은 나중에 다른 요소(이쁜...) 걸로 대체하면 좋을 거 같네요!
There was a problem hiding this comment.
넵 맞습니다! 토스트 박스 만들면 그거로 대체할 예정이예요!
| inputs: string[]; | ||
| basicCount: number; | ||
|
|
||
| setInputs: (inputs: string[]) => void; |
There was a problem hiding this comment.
| setInputs: (inputs: string[]) => void; | |
| setInputs: Dispatch<SetStateAction<string[]>>; |
string[] 타입의 state의 set 함수를 요구하시길 원하신다면 이렇게 바꾸면 어떨까요 ??
There was a problem hiding this comment.
이 방식도 알고 있긴 했는데, 이게 나을까요..?
일단 변경하도록 할게요!
| const newInputs = [...inputs]; | ||
| newInputs.splice(index, 1); | ||
|
|
||
| setInputs(newInputs); |
There was a problem hiding this comment.
위 props Dispatch로 바꾸신다면
setInputs(prev => ... )이전 값을 보장해주는 방법으로 변경하면 어떨까요?
Deploying with
|
| Latest commit: |
71219ec
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://58f113c5.na-lab.pages.dev |
| Branch Preview URL: | https://feat-selectiontextfield.na-lab.pages.dev |
🤔 해결하려는 문제가 무엇인가요?
SelectionTextfield 구현
디자이너 분이 인스타 질문 생성 폼을 보고 만들었다고 합니다! 어떻게 구현하려 했는지, 밑의 동영상을 보면 이해가 쉬울 것 같아요.
참고링크 - 인스타 질문 생성
🎉 변경 사항
🙏 여기는 꼭 봐주세요!
🌄 스크린샷