Implement button atom component/#19 #24

gahyuun · 2024-02-16T05:56:47Z

📌 작업 내용

구현 내용 및 작업 했던 내역

button component 구현 및 stories 생성

피그마에 있는 button 디자인이랑 서비스에 있는 button 디자인이 차이가 있어서 서비스에 있는 button을 보고 구현했습니다.

🤔 고민 했던 부분

1. button children vs label

처음에는 button의 text를 children으로 받는 걸로 구현했습니다. 하지만 구현하다 보니, 유경이 언니 의견처럼 디자인 시스템이 구축되어있는 상태에서는 유연하게 가져가지 못하도록 개발하는 게 더 적절할 것 같다고 생각해서 label로 변경했습니다

children 사용했을 때 장점

직관적임 ( props이 많아졌을 때 label과 달리 가독성에서 문제가 생기지 않음)
추후 icon button이 생겼을 때 수정 할 필요가 없음\

label 사용했을 때 장점

유연하게 가져가는 걸 막기에 button을 사용하는 곳에서 style을 마음대로 지정하는 걸 막을 수 있음
ref) https://blog.stackademic.com/understanding-react-components-children-prop-vs-attribute-props-66942acc4cf3

compound pattern

select가 compoun pattern으로 적용된 걸 확인하고, view component를 일관되게 compound pattern을 적용하는 게 낫지 않을까? 생각을 했는데 Button component에서 compound pattern을 적용 할 필요성을 느끼지 못해서 적용하지 않았습니다

color

코드 확인해보면 color name을 지정하지 않고 hex로 작성한 코드가 있습니다
피그마에 존재하는 color 들을 theme에 지정하려 했는데 네이밍을 그대로 가져가기엔 아쉬운 부분이 있어서
일단 hex로 작성했습니다 이 부분은 추후 리팩토링 할 예정입니다!

github-actions · 2024-02-16T05:58:27Z

🚀storybook: https://65ccb85d5afe55a024495bc0-wnlqutmubb.chromatic.com/

seonghunYang · 2024-02-16T10:00:34Z

app/ui/view/atom/button/button.tsx

+        primary: 'bg-primary rounded-[100px] text-white border-0',
+        secondary: 'bg-white rounded-[100px] border-solid border-[1px] border-gray',
+        text: '',
+        delete: 'py-[7px] px-[14px] bg-[#35353559] rounded-[7px] text-white leading-5 font-medium text-[18px]',


[request change]

기존 졸부보다 UX를 개선하기 위해 버튼이 hover 되었을 때 속성을 추가하면 좋겠습니다. 제가 자주 사용하는 방식 공유할게요

primary hover 상태일 때 background와 border color는 원색보다 shade가 200 정도 높게 지정합니다.

secondary는 background color를 원색에 투명도 20%를 주는 방식을 사용합니다.

text는 text color를 원색보다 shade를 200정도 높게 설정합니다.

저희가 컬러 팔레트가 따로 없는 것으로 알고 있는데, theme 설정에 대해 논의를 해봐야겠네요. 작성하는 메시지를 보니 color에 대해서 고민하신 것 같은데, 좋은 의견이나 생각하신 방안이 있으면 의견 나누면 좋을 것 같아요!

hover 적용했습니다! 77241e9
secondary는 button 사용하는 컴포넌트의 배경색이 white인 경우가 있어서 투명도를 주었을 때 아무런 효과가 없어보일 것 같아 따로 색을 지정해줬습니다!
팔레트 같은 경우 내일 회의 때 간단히 얘기해봐도 좋을 것 같아요!

확인했습니다. 스토리북 있으니까 확인하기 너무 좋네요

seonghunYang · 2024-02-16T10:04:11Z

app/ui/view/atom/button/button.tsx

+  href?: string;
+}
+export function Button({ label, variant = 'primary', size = 'default', href, ...props }: ButtonProps) {
+  const ButtonVariants = cva(`flex justify-center items-center px-[6px] py-[1px]`, {


[comment]

CVA를 사용해보진 않았지만, variant 관리가 편리해 보이네요. 좋습니다~

seonghunYang · 2024-02-16T10:10:29Z

app/ui/view/atom/button/button.tsx

+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'default';
+  href?: string;
+}
+export function Button({ label, variant = 'primary', size = 'default', href, ...props }: ButtonProps) {


[request change]

재사용 가능한 컴포넌트라면, forwardRef를 사용하여 ref를 prop으로 받을 수 있도록 해야 할 것 같습니다!

저도 forwardRef를 사용해야할까? 라는 고민을 했었는데, input은 focus할 때 사용이 되지만 button은 ref를 사용할 일이 딱히 떠오르지 않아서 사용하지 않았습니다!
통일성 때문인지, 확장 가능성 때문인지, 아니면 ref를 쓸 일이 정말 많기 때문인지 추가적으로 설명해주시면 감사하겠습니다~!

확장성과 완성도 때문이라고 생각합니다. ref가 지금 당장 필요하지 않은 부분에 사용되는 것처럼 보일 수 있지만, button과 같이 재사용 가능성이 높은 최하위 컴포넌트의 경우 ref를 사용할 수 있도록 지원해야 한다고 생각해요.

ref는 실제 DOM에 접근할 수 있도록 해주는 기능이므로, 실제 DOM 태그를 사용하는 가장 기본적인 컴포넌트는 이를 지원해야지, 나중에 이 컴포넌트를 재사용할 때 오해가 생기지 않을 것 같습니다

앗 그렇군요 감사합니다 수정했습니다~!
8323010

seonghunYang · 2024-02-16T10:17:25Z

app/ui/view/atom/button/button.tsx

+        xs: 'w-[116px] h-[47px] text-lg font-medium leading-5',
+        sm: 'w-[144px] h-10 text-sm font-medium leading-3',
+        md: 'w-[198px] h-12 text-lg font-medium leading-3',
+        lg: 'w-[396px] h-20 text-3xl font-medium leading-9',
+      },


[comment]

버튼의 크기를 설정할 때는 기본적으로 두 가지 방식이 있다고 생각하는데요. 1. 넓이를 지정하는 방식, 2. 패딩과 폰트 크기를 지정하는 방식입니다.

기존 디자인 시스템에 맞추기 위해 넓이 지정 방식을 선택한 것 같아 보입니다. 하지만 제 개인적으로 기존 디자인 시스템을 따르는게 올바른 선택인가에 대한 의문이 있습니다. 저번 개발 때도 디자인 시스템을 디자이너 분들이 공식적으로 만든 것이 아니라 개발 과정에서 문제가 많았기 때문입니다.

넓이를 직접 지정하는 방식을 사용하면 다양한 유스케이스를 커버하기 어렵다는 단점이 있다고 생각합니다. 이에 대해 나중에 고민이 필요할 것 같습니다.

수정 요청은 아니고, 이전 개발 당시에 이슈가 있었다는 점을 공유하고, 나중에 수정이 필요하다면 논의를 하기 위해 지식 공유 차 의견 남깁니다.지식 공유를 합니다.

감사합니다! 수정할 때 참고하겠습니다!

seonghunYang · 2024-02-16T10:18:11Z

app/ui/view/atom/button/button.stories.tsx

+export const PrimaryButton: StoryObj<typeof Button> = {
+  args: {
+    size: 'md',
+    variant: 'primary',
+    label: '수강현황 자세히보기',
+  },
+  render: (args) => <Button {...args} />,
+};
+
+export const SecondaryButton: StoryObj<typeof Button> = {
+  args: {
+    size: 'xs',
+    variant: 'secondary',
+    label: '커스텀하기',
+  },
+  render: (args) => <Button {...args} />,
+};
+
+export const DeleteButton: StoryObj<typeof Button> = {
+  args: {
+    size: 'default',
+    variant: 'delete',
+    label: '삭제',
+  },
+  render: (args) => <Button {...args} />,
+};


[comment]

text 타입이 빠진 것 같은데 이유가 있었나요?

처음에는 text를 label이 아닌 children으로 받았기에 지정해주는 별 다른 스타일이 없었고 스토리북에 굳이 작성핧 필요가 없다고 생각해서 작성하지 않았습니다!
하지만 text를 label prop으로 받는 걸로 변경해서,,,, 추가적으로 작성해서 커밋했습니다!
e76ded8

seonghunYang · 2024-02-16T10:23:07Z

app/ui/view/atom/button/button.stories.tsx

[comment]
스토리북 확인했는데 생각보다 훨씬 멋있네요!! 너무 좋습니다. 확인 후 질문과 의견을 남깁니다.

문서화를 위해 meta의 description과 argtype을 상세하게 작성해주신 것 같습니다. 그런데 이 과정에서 컴포넌트를 두 번 개발한다는 느낌이 들었거나, 시간이 너무 오래 걸리지 않았나요?

만약 불편함을 느꼈다면, 문서화는 개발 단계가 안정화되었을 때 진행하는 것은 어떨까요? 초반에는 atom 컴포넌트라도 변경사항이 많을 것으로 예상되므로, 문서화를 동시에 진행하게 되면 작업 부담이 너무 커질 것 같아 걱정이 됩니다.

정리하면 스토리북은 개발(시각화 도구)과 테스트를 위해서 사용하고 docs위한 세팅은 개발이 안정되었을 때 하는게 어떨까요?

button component를 개발하면서 느끼진 못했지만 결국 언젠가 storybook 작성이 부담이 될 것 같긴합니다

그래서 저도 개발이 안정되기 전까지는 스토리북을 시각적 테스트를 위해서 사용하는 거 좋습니다

다만 description은 굳이 개발을 하면서 작성할 필요는 없지만 , argType은 개발할 때 작성을 해야 control 하면서 props 값에 따른 렌더링 변화를 확인하며 시각적 테스트를 할 수 있지 않을까요?!

argtype이 있어야 conrol 애드온 사용이 가능한 건가요? 그런거라면 필요할 듯 하네요

관련 부분은 제가 스토리북을 좀 더 연구해보고 추후 어떻게 하면 가장 잘 사용할 수 있을지 의견 공유하도록 하겠습니다!

seonghunYang · 2024-02-16T10:27:03Z

app/layout.tsx

+      <head>
+        <link
+          href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css"
+          rel="stylesheet"
+        />
+      </head>
+      <body>{children}</body>


[comment]

next에서 font 최적화를 위한 방법을 제공하는 것으로 아는데 해당 방식을 사용한 이유가 있을까요?

개발을 위한 임시용도라면 괜찮으나 아니라면 수정이 필요할 것 같습니다

next에서 font 최적화를 제공해주는 지 몰랐습니다
추후 수정하겠습니다! 감사합니다

넵 참고 링크 첨부해놓겠습니다
https://nextjs.org/docs/app/building-your-application/optimizing/fonts

github-actions · 2024-02-16T16:24:25Z

🚀storybook: https://65ccb85d5afe55a024495bc0-wuaddhnobk.chromatic.com/

yougyung · 2024-02-16T16:34:14Z

app/ui/view/atom/button/button.tsx

+        xs: 'w-[116px] h-[47px] text-lg font-medium leading-5',
+        sm: 'w-[144px] h-10 text-sm font-medium leading-3',
+        md: 'w-[198px] h-12 text-lg font-medium leading-3',
+        lg: 'w-[396px] h-20 text-3xl font-medium leading-9',


반응형에 따른 크기 조정이 가능한가요?

일단은 width를 padding으로 변경한 상태입니다! breakpoint에 따른 조정이 필요하다면 개발 진행하면서 리팩토링 하겠습니다
43a32f3

yougyung · 2024-02-16T16:37:33Z

app/ui/view/atom/button/button.tsx

+  href?: string;
+}
+export function Button({ label, variant = 'primary', size = 'default', href, ...props }: ButtonProps) {
+  const ButtonVariants = cva(`flex justify-center items-center px-[6px] py-[1px]`, {


모르고 있던 방법인데 덕분에 배워갑니다 👍

github-actions · 2024-02-18T07:07:18Z

🚀storybook: https://65ccb85d5afe55a024495bc0-yepzipjbho.chromatic.com/

seonghunYang

수고하셨습니다.

gahyuun added 11 commits February 15, 2024 19:21

setting: install cva

be42996

feat: button component variant, size 구현

306b87a

chore: color theme 추가

a935a7b

feat: button atom component 구현

9aec13e

chore: default variant 제거

0308ea8

fix: children -> label prop

35957d3

chore: button style 수정

ff59271

chore: conflict 해결

1766af6

setting: storybook font 및 style 설정

0d372c8

style: font 설정

4352042

feat: button stories 구현

0f5a644

gahyuun self-assigned this Feb 16, 2024

gahyuun requested review from yougyung and seonghunYang as code owners February 16, 2024 05:56

seonghunYang requested changes Feb 16, 2024

View reviewed changes

gahyuun added 2 commits February 17, 2024 01:21

style: hover style 적용

77241e9

feat: text button story 작성

e76ded8

yougyung reviewed Feb 16, 2024

View reviewed changes

gahyuun added 3 commits February 18, 2024 15:39

refactor: add button ref

8323010

style: button width -> padding

43a32f3

chore: story book href 삭제

1d6594e

seonghunYang approved these changes Feb 18, 2024

View reviewed changes

yougyung approved these changes Feb 18, 2024

View reviewed changes

gahyuun merged commit b19a151 into main Feb 18, 2024
3 checks passed

gahyuun deleted the implement-button-atom-component/#19 branch February 18, 2024 07:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement button atom component/#19 #24

Implement button atom component/#19 #24

gahyuun commented Feb 16, 2024

github-actions bot commented Feb 16, 2024

seonghunYang Feb 16, 2024

gahyuun Feb 16, 2024

seonghunYang Feb 17, 2024

seonghunYang Feb 16, 2024

seonghunYang Feb 16, 2024

gahyuun Feb 16, 2024

seonghunYang Feb 17, 2024

gahyuun Feb 18, 2024

seonghunYang Feb 16, 2024

gahyuun Feb 16, 2024

seonghunYang Feb 16, 2024

gahyuun Feb 16, 2024

seonghunYang Feb 16, 2024

gahyuun Feb 16, 2024 •

edited

Loading

seonghunYang Feb 17, 2024 •

edited

Loading

seonghunYang Feb 16, 2024

gahyuun Feb 16, 2024

seonghunYang Feb 17, 2024

github-actions bot commented Feb 16, 2024

yougyung Feb 16, 2024

gahyuun Feb 18, 2024

yougyung Feb 16, 2024

github-actions bot commented Feb 18, 2024

seonghunYang left a comment

Implement button atom component/#19 #24

Implement button atom component/#19 #24

Conversation

gahyuun commented Feb 16, 2024

📌 작업 내용

🤔 고민 했던 부분

1. button children vs label

compound pattern

color

github-actions bot commented Feb 16, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gahyuun Feb 16, 2024 • edited Loading

Choose a reason for hiding this comment

seonghunYang Feb 17, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Feb 16, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Feb 18, 2024

seonghunYang left a comment

Choose a reason for hiding this comment

gahyuun Feb 16, 2024 •

edited

Loading

seonghunYang Feb 17, 2024 •

edited

Loading