[11/19] 유틸리티 타입 활용 #56
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mlnwns
approved these changes
Dec 27, 2023
loopy-lim
approved these changes
Dec 27, 2023
Comment on lines
+7
to
+21
| export interface CheckBoxProps extends InputHTMLAttributes<HTMLInputElement> { | ||
| className?: string; | ||
| labelClassName?: string; | ||
| label?: string; | ||
| type: "checkbox"; | ||
| size?: keyof typeof sizeType; | ||
| color?: keyof typeof colorType; | ||
| } | ||
|
|
||
| const colorType = { | ||
| primary: | ||
| "border-[#16ADEA] bg-[#16ADEA] text-[#FFFFFF] focus:shadow-[0px_0px_4rem_.5rem_#A0C5FF7F] hover:border-[#1678EA7F] active:bg-[#0255D5] disabled:bg-[#A0C5FF7F] disabled:border-none disabled:cursor-not-allowed", | ||
| secondary: | ||
| "border-[#1D1D1D] bg-[#1D1D1D] text-[#E7E7E7] focus:shadow-[0px_0px_4rem_.5rem_#A0C5FF7F] hover:border-[#16ADEA] active:bg-[#0255D5] disabled:bg-[#A0C5FF7F] disabled:border-none disabled:cursor-not-allowed", | ||
| }; |
|
|
||
| 이렇게 숫자를 할당하면 오류가 사라지는 걸 볼 수 있다. | ||
|
|
||
| 하지만 css프레임워크를 사용해 미리 사이즈를 정해놓는 방식이라면 string으로 지정해야 빠른 설정이 가능한데 다른 방법이 없는지 생각해보자. |
There was a problem hiding this comment.
주제에 논점이 흐려지긴 하지만....
tailwind라면 작동이 안될꺼에요!! (왜 그런지 찾아보면 tailwind가 어떻게 동작하느지 더 잘 알 수 있지 않을까요?)
Comment on lines
+100
to
+102
| size의 할당 때문에 오류가 나는 경우이기 때문에 size를 제외해 인터페이스를 재정의 해주는 것이 맞는 방법인 것 같다. | ||
|
|
||
| 이 외에도 폼과 같이 비슷한 컴포넌트를 재사용할 때에도 유용할 것 같다..! |
There was a problem hiding this comment.
마자요!! 그러면 여기서 문제!! InputHTMLAttributes의 size는 어떤 옵션일까요?
과연 저렇게 막 바꾸어도 괜찮을까요?
bada308
approved these changes
Dec 27, 2023
| ### 2. Omit | ||
|
|
||
| ```tsx | ||
| export interface CheckBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> { |
There was a problem hiding this comment.
오오 InputHTMLAttributes 에 유틸리티 타입을 적용할 생각을 못해서 extends를 안 하고 그냥 interface를 만들었는데,,,, Omit을 사용하면 되군요!!!!
지금 프로젝트에도 적용을 해봐야겠어요~~
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
최근 프로젝트를 진행하면서 알게된 유틸리티 타입을 컴포넌트에서 쓰는 간단한 예시를 가져왔습니다.