25 button component

[nhistory]

No description provided.

[nhistory]

@DaleSeo 달레스터디에서와 같은 방식으로 적용했는데 borderRadius 적용이 계속 안되네요.

[nhistory]

@DaleSeo 버튼 컴포넌트의 varient에 필요한 요소들을 src/tokens/colors.ts 에 추가하는 방식으로 해서 작업했는데요. 이렇게 작업하는게 맞는지 궁금합니다. 일단 지금까지 작업이 맞다면 관련해서 테스트 코드도 작성해 볼려고 합니다. 생각보다 시간이 굉장히 많이 걸리네요.

[DaleSeo]

달레스터디에서와 같은 방식으로 적용했는데 borderRadius 적용이 계속 안되네요.

border-radius 속성은 적용되고 있는 것 같은데요? borderImage를 사용할 때 엣지 케이스 같은 게 있는 게 아닐까요? 판다가 예상하시는데로 각각의 속성을 모두 적용해주었는지 확인해보시면 어덜까요?

Shot.2025-01-19.at.18.35.11.mp4

[DaleSeo]

버튼 컴포넌트의 varient에 필요한 요소들을 src/tokens/colors.ts 에 추가하는 방식으로 해서 작업했는데요. 이렇게 작업하는게 맞는지 궁금합니다. 일단 지금까지 작업이 맞다면 관련해서 테스트 코드도 작성해 볼려고 합니다. 생각보다 시간이 굉장히 많이 걸리네요.

컴포넌트의 모든 varient에 대해서 디자인 토큰을 추가하시면 개발 생산성도 떨어지고 나중에 디자인 토큰 유지보수하기가 굉장히 힘들어질 겁니다. 여러 컴포넌트에 걸쳐서 재사용될 가능성이 높지 않은 varient에 대해서는 컴포넌트 내부에서 맵핑하시는 것을 추천드립니다.

dale-ui/src/components/Heading/Heading.tsx

Lines 60 to 67 in 87e77f6

	level: {
	1: { textStyle: "4xl" },
	2: { textStyle: "3xl" },
	3: { textStyle: "2xl" },
	4: { textStyle: "xl" },
	5: { textStyle: "lg" },
	6: { textStyle: "md" },
	},

[nhistory]

버튼 컴포넌트의 varient에 필요한 요소들을 src/tokens/colors.ts 에 추가하는 방식으로 해서 작업했는데요. 이렇게 작업하는게 맞는지 궁금합니다. 일단 지금까지 작업이 맞다면 관련해서 테스트 코드도 작성해 볼려고 합니다. 생각보다 시간이 굉장히 많이 걸리네요.

컴포넌트의 모든 varient에 대해서 디자인 토큰을 추가하시면 개발 생산성도 떨어지고 나중에 디자인 토큰 유지보수하기가 굉장히 힘들어질 겁니다. 여러 컴포넌트에 걸쳐서 재사용될 가능성이 높지 않은 varient에 대해서는 컴포넌트 내부에서 맵핑하시는 것을 추천드립니다.

dale-ui/src/components/Heading/Heading.tsx

Lines 60 to 67 in 87e77f6

	level: {
	1: { textStyle: "4xl" },
	2: { textStyle: "3xl" },
	3: { textStyle: "2xl" },
	4: { textStyle: "xl" },
	5: { textStyle: "lg" },
	6: { textStyle: "md" },
	},

'컴포넌트 내부에서 맵핑'하는 것이 아래와 같이 하는 걸 의미하시는 걸까요?

solid: {
        background: { base: "{colors.violet.10}", _dark: "{colors.violet.1}" },
        color: { base: "{colors.violet.1}", _dark: "{colors.violet.10}" },
        "&:active, &:hover": {
          background: { base: "{colors.violet.8}", _dark: "{colors.violet.3}" },
          outline: "0",
        },
      },

[nhistory]

달레스터디에서와 같은 방식으로 적용했는데 borderRadius 적용이 계속 안되네요.

border-radius 속성은 적용되고 있는 것 같은데요? borderImage를 사용할 때 엣지 케이스 같은 게 있는 게 아닐까요? 판다가 예상하시는데로 각각의 속성을 모두 적용해주었는지 확인해보시면 어덜까요?

Shot.2025-01-19.at.18.35.11.mp4

button 클래스 안에 bdr_10px이 들어가 있는 걸로 봐서 적용은 되어 있는 것 같은데 실제 border에는 굴곡이 들어가지 않는 상황입니다. borderRadius: "10px !important"로 해봐도 변화가 없는 걸 보니 뭔가 충돌이 있는건가 싶기도 하네요.

[DaleSeo]

'컴포넌트 내부에서 맵핑'하는 것이 아래와 같이 하는 걸 의미하시는 걸까요?

아니요. 색상 팔레트에 직접 접근하시기 보다는 시멘틱 토큰을 쓰셔야 할 것 같아요. 그러면 굳이 base와 _dark를 구분지어 명시할 일이 없어서 효율적입니다.

제가 아래 텍스트 컴포넌트에 맵핑한 코드를 보시면 좀 더 이해하시는 도움이 될 것 같습니다.

dale-ui/src/components/Text/Text.tsx

Lines 50 to 93 in 9bd715c

	const styles = cva({
	compoundVariants: [
	{
	muted: false,
	tone: "neutral",
	css: { color: "text" },
	},
	{
	muted: false,
	tone: "accent",
	css: { color: "text.accent" },
	},
	{
	muted: false,
	tone: "danger",
	css: { color: "text.danger" },
	},
	{
	muted: false,
	tone: "warning",
	css: { color: "text.warning" },
	},
	{
	muted: true,
	tone: "neutral",
	css: { color: "text.muted" },
	},
	{
	muted: true,
	tone: "accent",
	css: { color: "text.muted.accent" },
	},
	{
	muted: true,
	tone: "danger",
	css: { color: "text.muted.danger" },
	},
	{
	muted: true,
	tone: "warning",
	css: { color: "text.muted.warning" },
	},
	],
	});

[DaleSeo]

button 클래스 안에 bdr_10px이 들어가 있는 걸로 봐서 적용은 되어 있는 것 같은데 실제 border에는 굴곡이 들어가지 않는 상황입니다. borderRadius: "10px !important"로 해봐도 변화가 없는 걸 보니 뭔가 충돌이 있는건가 싶기도 하네요.

저도 원인지 뭔지 잘 모르겠네요... 😓 우리 여기에 너무 몰두하지 말고, gradient 지원은 별도의 티겟으로 빼서 나중에 구현하면 어떨까요?

[DaleSeo]

단일 속성으로 너무 다양한 종류의 버튼을 �표현하려고 하면 나중에 속성값의 개수가 폭발적으로 증가할 수 있으며 속성값의 이름을 짓는 것도 골치거리가 될 수 있습니다. 다음과 같이 두 개의 속성으로 분리하는 것을 제안드리고 싶습니다.

variant: "outline" | "solid" | "transparent";
tone?: "netural" | "accent" | "danger" | "warning" | "gradient";

[DaleSeo]

button 클래스 안에 bdr_10px이 들어가 있는 걸로 봐서 적용은 되어 있는 것 같은데 실제 border에는 굴곡이 들어가지 않는 상황입니다. borderRadius: "10px !important"로 해봐도 변화가 없는 걸 보니 뭔가 충돌이 있는건가 싶기도 하네요.

저도 원인지 뭔지 잘 모르겠네요... 😓 우리 여기에 너무 몰두하지 말고, gradient 지원은 별도의 티겟으로 빼서 나중에 구현하면 어떨까요?

[DaleSeo]

요거는 자치샇면 일관성을 해칠 수 있는 독이 될 수도 있을 것 같은데, 우선은 제외하시는 게 어떠실까요?