✨feat: 버튼 컴포넌트 구현 + 스토리북 #14
Conversation
|
@jeschun is attempting to deploy a commit to the projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
sohyun0
left a comment
sohyun0
left a comment
There was a problem hiding this comment.
고생 많으셨습니다 ! 코멘트 확인부탁드립니다 :)
src/components/ui/button/button.tsx
Outdated
| variantClass = 'bg-[#EA3C12] text-white hover:bg-[#d63810]'; | ||
| } else if (variant === 'secondary') { | ||
| variantClass = 'bg-white text-[#EA3C12] border border-[#EA3C12] hover:bg-[#fff5f2]'; | ||
| } else if (variant === 'approve') { | ||
| variantClass = | ||
| 'bg-white text-[#0080FF] border border-[#0080FF] hover:bg-[#0080FF] hover:text-white'; | ||
| } else if (variant === 'reject') { | ||
| variantClass = | ||
| 'bg-white text-[#EA3C12] border border-[#EA3C12] hover:bg-[#EA3C12] hover:text-white'; | ||
| } else if (variant === 'disabled') { | ||
| variantClass = 'bg-[#A9A7AE] text-white cursor-not-allowed'; |
There was a problem hiding this comment.
EA3C12 컬러는 red-500 으로 tailwind config 등록이 되어있습니다 :)
혹시 나머지 컬러에 대해서도 globals.css , tailwind config 에 등록해주실 수 있나요??
하드코딩된 컬러값은 다크모드에서 반전할 수가 없어서 버튼컬러 변경이 안될것 같습니다 🥲
disabled 의 A9A7AE 컬러는 gray-400 으로 피그마로 보여지고 있는데 혹시 다른컬러를 선정한 이유가 있으실까요!?
만약 있다면 이것도 450 으로 선언부탁드립니다!
There was a problem hiding this comment.
A9A7AE 는 gray-400으로 설정하겠습니다! 그리고 전체적으로 globals.css에 있는걸 적용해서 다시 고쳤습니다 제가 처음에 고려를 못했었습니다
| @@ -0,0 +1,52 @@ | |||
| import type { Meta, StoryObj } from '@storybook/react'; | |||
There was a problem hiding this comment.
기본으로 설치된 스토리북 패키지가 nextjs인데 react 여서 아마 lint 에서 오류가 난것 같습니다!
There was a problem hiding this comment.
네 맞아요 ㅜ 빨간줄로 안떠서 확인을 차마 못했네요
There was a problem hiding this comment.
아마 린트에서 패키지 다른거 오류잡는거 off 해놓아서 그런것 같습니다 ~!
There was a problem hiding this comment.
맞습니다 제가 .eslintrc.js 에서 'storybook/no-renderer-packages': 'off', 이거 설정 해놨었습니다..
src/components/ui/button/button.tsx
Outdated
| } | ||
|
|
||
| /* 3) 공통 */ | ||
| const baseClass = 'inline-flex items-center justify-center rounded-lg font-medium transition'; |
There was a problem hiding this comment.
컴포넌트 렌더링 시점에 계산되는 값이 아닌건 컴포넌트 바깥으로 제외할 수 있을것 같아요!
There was a problem hiding this comment.
1,2번 스타일도 바깥으로 제외한 뒤 객체로 만들 수 있을것 같습니다!
export const VARIANT_CLASS = {
primary: 스타일~
secondary: 스타일~
} as const;
사용할때는 VARIANT_CLASS[variant]
이런 방식으로도 리팩토링이 가능할것 같습니다 ! 참고해주세요 :)
sohyun0
left a comment
sohyun0
left a comment
There was a problem hiding this comment.
수정 고생많으셨습니다~! 머지하겠습니다 :)
2 participants
📝 작업 개요 (필수)
✨ 작업 내용 (필수)
📸 스크린샷
🧐 해결해야 하는 문제
🤔 리뷰어 확인 필요 사항
스토리북 열어서 보시면 더 자세히 참고하실 수 있을겁니다.
🔗 관련 이슈
Related to [Feature] 공통 컴포넌트 - 버튼 #12
🛠️ 후속 작업
✅ 체크리스트 (필수)