-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[공통컴포넌트] Button 10가지 구현 #57
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
왕수고했어요! onClick: () => void;
에 대해서 찾아보고 있어요!
onClick 외에도 다양한 이벤트 핸들러 prop도 존재하고, 이를 잘 활용해보고 싶다는 생각이 들어서요! button 태그의 기본 props들을 확장하여 버튼 컴포넌트를 만들 수 있다면 좀 더 범용성이 넓은 컴포넌트를 만들 수 있을 것 같아요! 이 부분 더 공부해서 리뷰 남겨보도록 해볼게요!
import styled from 'styled-components'; | ||
|
||
export const Wrapper = styled.button` | ||
${({ theme: { mixin } }) => mixin.inlineFlexBox({ align: 'center', justify: 'center' })} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
해당 코드 리뷰는 아마 뒤늦게 정해진 부분에 대해서 불필요한 리소스가 든다고 했던게 아닌가 싶어요 !!! (또 다시 분류 해야하는 리소스를 의미하는 것이라고 생각되었습니다 !)
mixin 부분을 미리 의논해두었고, 반복 되어지는 간단한 부분들을 props로 조정할 수도 있도록 초반에 만들어 두었으니 저희는 지속해서 사용해도 될 거 같습니다 ;)
좋은 리프레쉬 감사해요 !!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
저도 덕분에 mixin 사용 목적에 대해 다시 고민해보는 좋은 기회가 되었어요! 감사합니다~!
return ( | ||
<S.Wrapper disabled={disabled} onClick={onClick}> | ||
{children} | ||
<IcRight style={{ width: '24px', height: '24px' }} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
요거 rem으로 하면 더 좋을거같아용
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
세상에 빠르게 수정하도록 하겠습니다 !!!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
고생하셨습니다. 저도 본받아서 얼렁 뷰 끝내볼게요!!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
공통 양이 많은데 정말 고생 많으셨어요!!!🥺 감사히 쓰겠습니다~!!
@@ -2,7 +2,7 @@ import type { SVGProps } from 'react'; | |||
const SvgIcEdit2 = (props: SVGProps<SVGSVGElement>) => ( | |||
<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' {...props}> | |||
<path | |||
stroke='#000' | |||
stroke='currentColor' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
트러블슈팅 공유 넘 감사했습니다!!
import styled from 'styled-components'; | ||
|
||
export const Wrapper = styled.button` | ||
${({ theme: { mixin } }) => mixin.inlineFlexBox({ align: 'center', justify: 'center' })} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
저도 덕분에 mixin 사용 목적에 대해 다시 고민해보는 좋은 기회가 되었어요! 감사합니다~!
type BtnChangeProps = ButtonHTMLAttributes<HTMLButtonElement> & { | ||
disabled?: boolean; | ||
children: React.ReactNode; | ||
onClick?: () => void; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
공통 섬세하게 만들어줘서 감사해요!!:)
|
머지 하겠습니다 !! : ) |
구현 사항
10가지 종류의 button 구현을 했습니다.
Need Review
특별히 받아야 하는 값이 있는 컴포넌트의 경우는 옵셔널 적용을 하지 않았습니다. interface를 잘 확인하고 사용해주세요!