[Feature] Button 컴포넌트 구현 #62
Conversation
hamo-o
requested review from
ghdtjgus76,
eugene028,
SeieunYoo and
kongnayeon
as code owners
There was a problem hiding this comment.
섀도우 토큰까지 추가해주셔서 감사합니당 🥰
LinkButton은 제 생각을 첨언해보자면...
HTML에서 제공하고 있는 <a> 태그의 속성을 가진 버튼을 만들면 React에서 호환 가능하지 않을까 싶어요! (물론 Next.js에서 제공하는 <Link> 컴포넌트와 달라지겠지만요)
Next.js에서는 저희의 디자인 시스템에서 제공하는 <Link> 태그를 사용하기보다는 그쪽에서 제공하는 <Link> 내장API를 그대로 쓰는쪽이 어떨까 싶습니다!
디자인 시스템에서 제공하는 것을 1차원적인 기능이면 충분하지 않을까 싶어요!
리뷰 남긴 부분만 봐주세용~ 수고하셨습니다!
| * @param {ComponentPropsWithRef<T>["ref"]} ref 렌더링된 요소 또는 컴포넌트에 연결할 ref. | ||
| */ | ||
|
|
||
| export interface CustomButtonProps { |
There was a problem hiding this comment.
P5;
CustomButtonProps에 요 type extend 해보는 것도 어떠실지..살짝..놓고갑니닷...ㅎㅎ
ButtonProps 타입 바로가기
hamo-o
force-pushed
the
feature/button-component
branch
from
ccfe40d to
d9f371a
Compare
|
| disabled?: boolean; | ||
| size?: "lg" | "sm"; | ||
| onKeyUp?: () => void; | ||
| onKeyDown?: () => void; | ||
| onMouseLeave?: () => void; | ||
| onPointerDown?: () => void; | ||
| onPointerUp?: () => void; | ||
| style?: CSSProperties; | ||
| className?: string; |
There was a problem hiding this comment.
p4;
Button 의 props 와 겹치는 부분이 많은 것 같은데 공통 props 로 겹치는 부분들을 빼는 건 어떨까요?!
| <Component | ||
| aria-disabled={disabled} | ||
| aria-pressed={pressed} | ||
| className={TextButtonStyle} | ||
| disabled={disabled} | ||
| ref={ref} | ||
| onKeyDown={handleKeyDown} | ||
| onKeyUp={handleKeyUp} | ||
| onMouseLeave={handleMouseLeave} | ||
| onPointerDown={handlePointerDown} | ||
| onPointerUp={handlePointerUp} | ||
| {...rest} | ||
| > | ||
| <styled.span | ||
| textDecoration="underline" | ||
| textStyle={size === "lg" ? "label1" : "label2"} | ||
| > | ||
| {label} | ||
| </styled.span> | ||
| </Component> |
There was a problem hiding this comment.
p3;
Button 과 TextButton 의 공통된 로직이 많은 것 같은데 공통된 부분을 모아서 Component 영역을 BaseButton 같은 컴포넌트로 추상화 시키면 어떨까욥?!
<BaseButton className={TextButtonStyle} {...rest}>
<styled.span
textDecoration="underline"
textStyle={size === "lg" ? "label1" : "label2"}
>
{label}
</styled.span>
</BaseButton>There was a problem hiding this comment.
요거 그러면 common 이라든지 다른 폴더에서 공통 컴포넌트 관리하려고 하는데 어떻게 생각하시나유,,
얘도 같이 빌드해서 배포하면 혼동이 있을 것 같아서요. 쌓이게 되면 base끼리 따로 모아서 배포하는것도 좋을 것 같아요
There was a problem hiding this comment.
아항 좋아요 components 외부에 폴더를 두면 좋을 것 같네욥
나중에 빌드에 포함시키고 싶지 않지만 개발 상에서 쓰이는 컴포넌트 파일이 필요한 경우가 생길 것 같은데 어떻게 빌드에 포함시키지 않을 지 고민해보아야 겠네용,,🤔
(스크립트에서 제외시키고 싶은 파일 제목에 대한 배열을 만들어서 제외를 하는 방법 등등,,)
|
아래 이슈에서 나머지 리뷰들 반영하겠습니다! |
🎉 변경 사항
Button,TextButton컴포넌트를 구현했습니다.ButtonTextButtonLinkButton에서의 공통 로직을useButtonhook으로 분리했습니다.피그마의
shadows토큰 등록했습니다.disabled일 때나,pressed일 때hover상태의 스타일이 적용되는 문제가 있어panda config에 아래 내용 추가했습니다.🚩 관련 이슈
🙏 여기는 꼭 봐주세요!
codegen에서 오류가 발생하여codegen/package.json에 아래 내용 추가했습니다. 문제가 된다면 말씀주세요!LinkButton은 더 알아보고 추가적으로 구현하겠습니다!