[Feat/#18] Button component #19

minjeoong · 2025-01-11T22:16:47Z

🔥 Related Issues

close [Feat] Button 컴포넌트 구현 (SOLID, OUTLINE) #18

✅ 작업 리스트

버튼 컴포넌트 구현

🔧 작업 내용

[ 버튼 variant ]
버튼 종류 입니다. 지금현재 디자인으로는 3개입니다.
solidPrimary | solidNeutral | outlinePrimary
-> 피그마 기준 네이밍 진행했습니다.
variant 로 입력하면 적용 됩니다.

[ 버튼 size ]

버튼 사이즈 총 3개 입니다.
마찬가지로 size props 주면 적용 됩니다. small | medium | large

[ 버튼 disabled ]

총 3개의 디자인은 disabled 된 디자인이 조금씩 다릅니다.
그래서 지금으로서는 disabled 이 outline 만 디자인이 달라서
예외로 적용하도록 구현했는데, 추후 디자인이 더 생긴다면 코드 변동이 필요할 수 있을 것 같아요!

[ 버튼 interaction ]

해당 버튼들 색깔이 안 뜨더라구요 4개가 색이 다른데 다 가장 밝은 색으로 나와 있어서
우선은 코멘트 달아뒀습니다,,!!

📣 리뷰어에게 어떠신가요?

📸 스크린샷 / GIF / Link

ocahs9

조건부 스타일링이 너무 많아서 머리 아팠을 법도 한데 잘 반영했네... 고생했어 🥺
논의해보고 싶은 내용, 개선해볼 수 있을만한 부분들은 코멘트로 남겨뒀으니 한번 확인해줘!!

ocahs9 · 2025-01-12T17:51:27Z

src/common/component/Button/index.tsx

+    <button
+      className={clsx(
+        styles.button,
+        styles[size],
+        disabled && styles.disabled,
+        !disabled && variants[variant],
+        disabled && variant === "outlinePrimary" && styles.disabledOutline
+      )}
+      disabled={disabled}
+    >


p3) 버튼의 경우의 수가 정말 많아서 이를 편리하게 조건부로 결합하기 위해 clsx를 사용하신 것 같아요!
잘못된 방법은 절대 아니지만 @vanilla-extract/recipes 에서는 recipe 라는 함수를 제공하여 좀 더 편리하게 다양한 조건부를 고려하여 스타일을 동적으로 적용할 수 있도록 돕고 있는데, 시간이 된다면 recipe로 코드를 구성해보는 건 어떨까요?

만약 recipe 함수를 적용한다면, 위의 코드는 아래와 같이 변할 수 있습니다!

// css.ts 에서 button 함수(recipe)을 import 해와야함, 밑의 다른 코멘트에서 추가 설명 예정 export const Button: React.FC<ButtonProps> = ({ label = "Button", leftIcon, rightIcon, size = "medium", variant = "solidPrimary", disabled = false, }) => { return ( <button className={button({ size, variant, disabled })} disabled={disabled} > {leftIcon && <div className={icon}>{leftIcon}</div>} {label} {rightIcon && <div className={icon}>{rightIcon}</div>} </button> ); };

훨씬 보기 편하지 않나요?!

그래요 이것이었습니다.. 제가 바라던 혜안이요
감사합니다 ㅠ 광명 찾았네요 수정하겠습니다

ocahs9 · 2025-01-12T17:52:17Z

src/common/component/Button/index.tsx

+/**
+ * Button 공통 컴포넌트
+ * @param label
+ * @param leftIcon 왼쪽 아이콘
+ * @param rightIcon 오른쪽 아이콘
+ * @param size 버튼 사이즈 small | medium | large
+ * @param variant 버튼 종류 solidPrimary | solidNeutral | outlinePrimary
+ * @param disabled 비활성화 여부
+ * @constructor minjeoong
+ */


p5) 깔끔한 주석 좋네요! 굳이 지우진 않아도 될 거 같습니다 :)
근데 혹시 이런 주석은 일일히 타이핑하시는건가요? 아니면 플러그인 같은게 있는건가요? (형식이 잡혀 있는거 같아서 여쭤봅니다)

JSDoc(JavaScript Documentation) 입니다.
Webstorm 기준, 컴포넌트 상단에서 "/**" + enter 키 누르면 자동 생성됩니다.
VSCode 도 해당 사항 가능하다고 알고 있습니다

ocahs9 · 2025-01-12T18:04:44Z

src/common/component/Button/styles.css.ts

+import { style, styleVariants } from "@vanilla-extract/css";
+import { color, font } from "@style/styles.css.ts";
+
+export const styles = {
+  button: style([
+    font.body01,
+    {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "0.6rem",
+      borderRadius: "8px",
+      border: "none",
+      cursor: "pointer",
+      transition: "background-color 0.3s",
+      ":focus": {
+        outline: "none",
+      },
+    },
+  ]),
+  small: style({
+    height: "3.2rem",
+
+    padding: "0.6rem 1.4rem",
+  }),
+  medium: style({
+    height: "3.6rem",
+
+    padding: "0.8rem 2rem",
+  }),
+  large: style({
+    height: "4.4rem",
+    padding: "1.2rem 2.8rem",
+  }),
+  disabled: style({
+    background: color.gray.gray300,
+    color: color.gray.gray500,
+    pointerEvents: "none",
+  }),
+  disabledOutline: style({
+    background: "transparent",
+    border: `1px solid ${color.gray.gray300}`,
+    color: color.gray.gray400,
+  }),
+  icon: style({
+    height: "2rem",
+    display: "flex",
+    alignItems: "center",
+  }),
+};
+
+export const variants = styleVariants({
+  solidPrimary: {
+    backgroundColor: color.primary.blue600,
+    color: "#fff",
+    ":hover": {
+      backgroundColor: color.primary.blue800,
+    },
+  },
+  solidNeutral: {
+    backgroundColor: color.gray.gray100,
+    color: color.gray.gray700,
+    ":hover": {
+      backgroundColor: color.gray.gray300,
+    },
+    ":active": {
+      backgroundColor: color.gray.gray400,
+    },
+  },
+  outlinePrimary: {
+    border: `0.1rem solid ${color.primary.blue500}`,
+    backgroundColor: "transparent",
+    color: color.gray.gray700,
+    ":hover": {
+      backgroundColor: color.gray.gray100,
+    },
+    ":active": {
+      backgroundColor: color.primary.blue300,
+      border: `0.1rem solid ${color.primary.blue500}`,
+    },
+    ":focus": {
+      border: `0.1rem solid ${color.primary.blue500}`,
+    },
+  },
+});


p3) 위에서 언급한 recipe를 사용한다면, 아래와 같은 형식으로 코드가 변할 수 있을 것 같아요!
(제가 직접 작성해보긴 했지만, 놓친 부분이 있을 수 있으니 잘 체크해주세요..!)

import { recipe } from "@vanilla-extract/recipes"; import { color, font } from "@style/styles.css.ts"; export const button = recipe({ base: [ font.body01, { display: "flex", alignItems: "center", justifyContent: "center", gap: "0.6rem", borderRadius: "8px", border: "none", cursor: "pointer", transition: "background-color 0.3s", ":focus": { outline: "none", }, }, ], variants: { size: { small: { height: "3.2rem", padding: "0.6rem 1.4rem", }, medium: { height: "3.6rem", padding: "0.8rem 2rem", }, large: { height: "4.4rem", padding: "1.2rem 2.8rem", }, }, variant: { solidPrimary: { backgroundColor: color.primary.blue600, color: "#fff", ":hover": { backgroundColor: color.primary.blue800, }, }, solidNeutral: { backgroundColor: color.gray.gray100, color: color.gray.gray700, ":hover": { backgroundColor: color.gray.gray300, }, ":active": { backgroundColor: color.gray.gray400, }, }, outlinePrimary: { border: `0.1rem solid ${color.primary.blue500}`, backgroundColor: "transparent", color: color.gray.gray700, ":hover": { backgroundColor: color.gray.gray100, }, ":active": { backgroundColor: color.primary.blue300, border: `0.1rem solid ${color.primary.blue500}`, }, ":focus": { border: `0.1rem solid ${color.primary.blue500}`, }, }, }, disabled: { true: { backgroundColor: color.gray.gray300, color: color.gray.gray500, pointerEvents: "none", }, outlinePrimary: { backgroundColor: "transparent", border: `1px solid ${color.gray.gray300}`, color: color.gray.gray400, pointerEvents: "none", }, false: {}, }, }, compoundVariants: [ { variants: { disabled: true, variant: "outlinePrimary" }, style: { backgroundColor: "transparent", border: `1px solid ${color.gray.gray300}`, color: color.gray.gray400, }, }, ], defaultVariants: { size: "medium", variant: "solidPrimary", disabled: false, }, }); export const icon = style({ height: "2rem", display: "flex", alignItems: "center", });

간단하게 코드 설명 드리면, 다음과 같습니다.

recipe의 인자로 들어가는 객체의 첫번째 prop인 base는 기본적으로 적용될 style들을 정의해둡니다.

두번째 prop인 variants 는 다양한 prop에 따라, 렌더링할 css를 정의합니다. 이 경우에는 총 3가지의 prop이 정의되어 있습니다. (size, variant, disabled) 그리고 이 3가지의 prop은 가질 수 있는 값들이 각각 정의되어 있습니다. 예를 들어, size prop의 경우에는 "small", "medium", "large" 를 가질 수 있고, 이에 따라 적용되는 css도 달라집니다.

여기서 핵심은 세번째 prop인 compoundVariants 입니다. 민정님이 구현한 버튼 컴포넌트에서는 반드시 사용할 수 밖에 없습니다. 왜냐하면 variants들의 prop 중 disabled: true, variant: "outlinePrimary" 일 경우에는 특정한 css를 적용해야하기 때문입니다. (제가 잘 이해했다면, 저 조건 2개가 and 연산으로 묶였을 때 적용하는 스타일이 다른거 같더라구요)

그래서

compoundVariants: [ { variants: { disabled: true, variant: "outlinePrimary" }, style: { borderColor: "gray", backgroundColor: "transparent", color: "gray", }, }, ],

과 같은 형식으로, 조건들의 조합을 variants에 넣고 그때 적용할 css를 style에 적어넣으면 됩니다. (코드만 봐도 이해하실거라 믿고 더 자세한 설명은 생략하겠습니다)

여튼.. 제가 recipe 이용해서 작성해본 코드인데 한번 살펴보시고, recipe로 변경해도 동일하게 작동한다고 판단된다면
recipe로 변경해보는 것도 좋을 것 같아요! (바쁘면 나중에 합시다)

참고 ) https://vanilla-extract.style/documentation/packages/recipes/

아... 이렇게도 되는군요
감사합니다. 수정해서 PUSH 했습니다 :)

ocahs9 · 2025-01-12T18:12:18Z

src/common/component/TextField/styles.css.ts

+  wrapper: style({
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+    gap: "1rem",
+    alignItems: "center",
+    padding: "1rem 2rem",
+    border: `0.1rem solid ${color.gray.gray200}`,
+    borderRadius: "8px",
+  }),
+  input: base,
+  error: style([base, { border: `0.1rem solid ${color.red.warning_red200}` }]),
+  disabledWrapper: style({
+    background: color.gray.gray300,
+    pointerEvents: "none",
+  }),
+  disabledInput: style([
+    base,
+    {
+      background: color.gray.gray300,
+      color: color.gray.gray500,
+    },
+  ]),
+  icon: style({
+    height: "2rem",
+    alignContent: "center",
+  }),
+};


p5) 문득 든 생각인데, 저는 wrapper, input, error ... 등등을 하나 하나 export const 한 뒤,
import * as styles from "./어쩌구저쩌구" 방식으로 가져와서 styles.wrapper , styles.input 등으로 사용했었는데

민정이가 사용한 방법은 import { styles } from "@common/component/TextField/styles.css.ts";
로 가져올 수 있으니까 좀 더 빠르고 쉽게 import 구문을 작성할 수 있다는 장점이 있긴 하네!
근데 가독성 측면에서는 뭐가 더 나은지 간단하게라도 논의해보고 싶은데, 나중에 내 PR 확인해보고 코멘트 남겨줘 !
(가독성도 비슷해보인다면, 나도 민정이 방식대로 하나의 큰 style 객체를 정의하는 방식으로 하려고!)

가독성 측면에서는 이렇게 묶는 게 좋다고 생각해요
근데 너무 상관 없이 묶어버리는 건 또 안 좋을 것 같아서, 또 따로 있어야 하는 건 필요할 것 같습니다

ocahs9 · 2025-01-12T18:13:06Z

src/common/component/TextField/index.tsx

+    <div
+      className={clsx(
+        styles.wrapper,
+        !active && styles.disabledWrapper,
+        state === "error" && styles.error
+      )}
+    >
+      <input
+        type="text"
+        className={clsx(styles.input, !active && styles.disabledInput)}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        disabled={!active}
+      />
+      {icon && <div className={styles.icon}>{icon}</div>}


p4) 위에서 실컷 언급한 clsx.. recipe로 개선 가능하다면 개선해보는건 어떨까요?

text field 는 해당 PR 내에 수정해서 올리겠습니다

ocahs9 · 2025-01-12T21:09:17Z

src/common/component/Button/index.tsx

+interface TextFieldProps {
+  label?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  size?: "small" | "medium" | "large";
+  variant?: "solidPrimary" | "solidNeutral" | "outlinePrimary";
+  disabled?: boolean;
+}


p1) 엇 다시보니까 오타 발견! ButtonProps로 바꿔야할 것 같아요!
+) 원하는 동작이 있을 수도 있으니까 onClick 함수도 prop으로 넘겨줄 수 있어야 할 것 같아요!

수정해서 올렸습니다!

ocahs9

코리 반영 확인했습니다 ~! 충돌만 해결하고 머지해주세요!

minjeoong added 6 commits January 12, 2025 05:23

feat : textfield 만들다가 오류 발견 커밋

89274d2

feat : 스타일 만들다가 글로벌 오류 발견

0efdad0

Merge remote-tracking branch 'origin/develop' into feat/#15/textfield

e49aca7

feat: textfield 컴포넌트 구현

2ae4711

feat: button 컴포넌트 초기 세팅

ba10fe8

feat: 아이콘 없이 버튼 구현

444e41a

minjeoong self-assigned this Jan 11, 2025

github-actions bot requested review from Leeyoonji23, ocahs9 and yarimu January 11, 2025 22:16

feat: 에러 수정

f5498d4

minjeoong added ✨ feat 기능 구현 💄 style 기능에 영향을 주지 않는 커밋, 코드 순서, css등의 포맷에 관한 커밋 labels Jan 11, 2025

ocahs9 approved these changes Jan 12, 2025

View reviewed changes

ocahs9 reviewed Jan 12, 2025

View reviewed changes

minjeoong added 2 commits January 13, 2025 23:52

fix: style 리펙터링 (compoundVariants 적용)

c157802

fix: 오타 수정

e164cfd

Leeyoonji23 approved these changes Jan 13, 2025

View reviewed changes

minjeoong added 2 commits January 14, 2025 01:10

fix: disabled outlinePrimary 제거

9223046

fix: 안쓰는 import 제거

518131f

yarimu approved these changes Jan 13, 2025

View reviewed changes

ocahs9 approved these changes Jan 13, 2025

View reviewed changes

minjeoong and others added 2 commits January 14, 2025 01:46

fix: button 컴포넌트 variant 수정

3983580

Merge branch 'develop' into feat/#18/ButtonComponent

10fdb68

minjeoong merged commit b020f49 into develop Jan 13, 2025
1 check passed

minjeoong changed the title ~~[Feat] Button component~~ [Feat/#18] Button component Jan 14, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat/#18] Button component #19

[Feat/#18] Button component #19

minjeoong commented Jan 11, 2025 •

edited

Loading

ocahs9 left a comment

ocahs9 Jan 12, 2025

minjeoong Jan 12, 2025

ocahs9 Jan 12, 2025

minjeoong Jan 12, 2025 •

edited

Loading

ocahs9 Jan 12, 2025

minjeoong Jan 13, 2025

ocahs9 Jan 12, 2025

minjeoong Jan 13, 2025 •

edited

Loading

ocahs9 Jan 12, 2025

minjeoong Jan 13, 2025 •

edited

Loading

ocahs9 Jan 12, 2025

minjeoong Jan 13, 2025

ocahs9 left a comment

[Feat/#18] Button component #19

[Feat/#18] Button component #19

Conversation

minjeoong commented Jan 11, 2025 • edited Loading

🔥 Related Issues

✅ 작업 리스트

🔧 작업 내용

📣 리뷰어에게 어떠신가요?

📸 스크린샷 / GIF / Link

ocahs9 left a 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

minjeoong Jan 12, 2025 • 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

minjeoong Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

minjeoong Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ocahs9 left a comment

Choose a reason for hiding this comment

minjeoong commented Jan 11, 2025 •

edited

Loading

minjeoong Jan 12, 2025 •

edited

Loading

minjeoong Jan 13, 2025 •

edited

Loading

minjeoong Jan 13, 2025 •

edited

Loading