refactor: BoxButton / TextButton 속성명 수정

src/components/BoxButton/BoxButton.mdx

@@ -28,17 +28,17 @@ import { BoxButton } from '@yourssu/design-system-react';
 ```
 
 ```tsx
-<BoxButton size="large" hierarchy="primary">
-  Primary/Large
+<BoxButton size="large" variant="filledPrimary">
+  filledPrimary/Large
 </BoxButton>
 ```
 
 <Canvas of={BoxButtonStories.Sizes} withSource="none" />
 
-필수 프로퍼티인 `hierarchy`를 사용하여 BoxButton의 위계를 설정해주세요.<br />
-지원하는 종류는 `primary`, `secondary`, `tertiary` 입니다.
+필수 프로퍼티인 `variant`를 사용하여 BoxButton의 위계를 설정해주세요.<br />
+지원하는 종류는 `filledPrimary`, `filledSecondary`, `outlined` 입니다.
 
-<Canvas of={BoxButtonStories.Hierarchies} withSource="none" />
+<Canvas of={BoxButtonStories.Variants} withSource="none" />
 
 이외의 프로퍼티들은 하단의 예시에서 확인할 수 있습니다.
 
@@ -49,8 +49,8 @@ import { BoxButton } from '@yourssu/design-system-react';
 `BoxButton`을 클릭할 수 없게 막습니다.
 
 ```tsx
-<BoxButton size="large" hierarchy="primary" disabled={true}>
-  Primary/Disabled/Large
+<BoxButton size="large" variant="filledPrimary" disabled={true}>
+  filledPrimary/Disabled/Large
 </BoxButton>
 ```
 
@@ -62,8 +62,8 @@ import { BoxButton } from '@yourssu/design-system-react';
 단, `children` 콘텐츠 크기보다 작은 값을 입력할 경우 적용되지 않습니다.
 
 ```tsx
-<BoxButton size="large" hierarchy="primary" width="500px">
-  Primary/Large/500px
+<BoxButton size="large" variant="filledPrimary" width="500px">
+  filledPrimary/Large/500px
 </BoxButton>
 ```
 
@@ -75,7 +75,7 @@ import { BoxButton } from '@yourssu/design-system-react';
 아이콘과 텍스트는 동일한 색상으로 스타일링되어 있으므로, 별도의 색상을 지정하지 말아 주세요.
 
 ```tsx
-<BoxButton size="large" hierarchy="primary" leftIcon={<IcExternalLinkLine />}>
+<BoxButton size="large" variant="filledPrimary" leftIcon={<IcExternalLinkLine />}>
   with leftIcon
 </BoxButton>
 ```
@@ -89,7 +89,7 @@ import { BoxButton } from '@yourssu/design-system-react';
 ```tsx
 <BoxButton
   size="large"
-  hierarchy="primary"
+  variant="filledPrimary"
   onClick={() => {
     alert('BoxButton을 클릭했습니다');
   }}

src/components/BoxButton/BoxButton.stories.tsx

@@ -12,7 +12,7 @@ const meta: Meta<typeof BoxButton> = {
   },
   argTypes: {
     size: { description: 'BoxButton의 크기를 결정하는 속성' },
-    hierarchy: { description: 'BoxButton의 모양을 결정하는 속성' },
+    variant: { description: 'BoxButton의 위계를 결정하는 속성' },
     leftIcon: { description: 'BoxButton의 왼쪽에 들어갈 아이콘' },
     children: { description: 'BoxButton의 내용' },
     rightIcon: { description: 'BoxButton의 오른쪽에 들어갈 아이콘' },
@@ -25,68 +25,68 @@ type Story = StoryObj<typeof BoxButton>;
 
 export const Primary: Story = {
   args: {
-    children: 'Primary/Large',
+    children: 'filledPrimary/Large',
     size: 'large',
-    hierarchy: 'primary',
+    variant: 'filledPrimary',
     disabled: false,
   },
 };
 
 export const Sizes: Story = {
   render: () => (
     <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-      <BoxButton size="xlarge" hierarchy="primary">
+      <BoxButton size="xlarge" variant="filledPrimary">
         xlarge
       </BoxButton>
-      <BoxButton size="large" hierarchy="primary">
+      <BoxButton size="large" variant="filledPrimary">
         large
       </BoxButton>
-      <BoxButton size="medium" hierarchy="primary">
+      <BoxButton size="medium" variant="filledPrimary">
         medium
       </BoxButton>
-      <BoxButton size="small" hierarchy="primary">
+      <BoxButton size="small" variant="filledPrimary">
         small
       </BoxButton>
-      <BoxButton size="xsmall" hierarchy="primary">
+      <BoxButton size="xsmall" variant="filledPrimary">
         xsmall
       </BoxButton>
-      <BoxButton size="xxsmall" hierarchy="primary">
+      <BoxButton size="xxsmall" variant="filledPrimary">
         xxsmall
       </BoxButton>
     </div>
   ),
 };
 
-export const Hierarchies: Story = {
+export const Variants: Story = {
   render: () => (
     <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-      <BoxButton size="large" hierarchy="primary">
-        primary
+      <BoxButton size="large" variant="filledPrimary">
+        filledPrimary
       </BoxButton>
-      <BoxButton size="large" hierarchy="secondary">
-        secondary
+      <BoxButton size="large" variant="filledSecondary">
+        filledSecondary
       </BoxButton>
-      <BoxButton size="large" hierarchy="tertiary">
-        tertiary
+      <BoxButton size="large" variant="outlined">
+        outlined
       </BoxButton>
     </div>
   ),
 };
 
 export const Disabled: Story = {
   args: {
-    children: 'Primary/Disabled/Large',
+    children: 'filledPrimary/Disabled/Large',
     size: 'large',
-    hierarchy: 'primary',
+    variant: 'filledPrimary',
     disabled: true,
   },
 };
 
 export const Width: Story = {
   args: {
-    children: 'Primary/Large/500px',
+    children: 'filledPrimary/Large/500px',
     size: 'large',
-    hierarchy: 'primary',
+    variant: 'filledPrimary',
     disabled: false,
     width: '500px',
   },
@@ -96,7 +96,7 @@ export const Click: Story = {
   args: {
     children: 'Click me!',
     size: 'large',
-    hierarchy: 'primary',
+    variant: 'filledPrimary',
     disabled: false,
     onClick: () => {
       alert('BoxButton을 클릭했습니다');
@@ -107,10 +107,10 @@ export const Click: Story = {
 export const WithIcon: Story = {
   render: () => (
     <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-      <BoxButton size="large" hierarchy="primary" leftIcon={<IcExternalLinkLine />}>
+      <BoxButton size="large" variant="filledPrimary" leftIcon={<IcExternalLinkLine />}>
         with leftIcon
       </BoxButton>
-      <BoxButton size="large" hierarchy="primary" disabled rightIcon={<IcExternalLinkLine />}>
+      <BoxButton size="large" variant="filledPrimary" disabled rightIcon={<IcExternalLinkLine />}>
         with rightIcon
       </BoxButton>
     </div>

src/components/BoxButton/BoxButton.style.ts

@@ -1,18 +1,18 @@
 import { css, styled } from 'styled-components';
 
-import { BoxButtonProps, BoxButtonSize, BoxButtonHierarchy } from './BoxButton.type';
+import { BoxButtonProps, BoxButtonSize, BoxButtonVariant } from './BoxButton.type';
 
 interface StyledBoxButtonProps {
   $size: BoxButtonSize;
-  $hierarchy: BoxButtonHierarchy;
+  $variant: BoxButtonVariant;
   $width?: BoxButtonProps['width'];
 }
 
-const getHierarchyStyle = ($hierarchy: BoxButtonHierarchy) => {
-  switch ($hierarchy) {
-    case 'primary':
+const getVariantStyle = ($variant: BoxButtonVariant) => {
+  switch ($variant) {
+    case 'filledPrimary':
       return css`
-        background-color: ${({ theme }) => theme.semantic.color.buttonBoxPrimaryEnabled};
+        background-color: ${({ theme }) => theme.semantic.color.buttonFilledPrimaryEnabled};
         color: ${({ theme }) => theme.semantic.color.textBasicWhite};
         border: none;
 
@@ -22,12 +22,12 @@ const getHierarchyStyle = ($hierarchy: BoxButtonHierarchy) => {
 
         &:hover {
           cursor: pointer;
-          background-color: ${({ theme }) => theme.semantic.color.buttonBoxPrimaryPressed};
+          background-color: ${({ theme }) => theme.semantic.color.buttonFilledPrimaryPressed};
         }
       `;
-    case 'secondary':
+    case 'filledSecondary':
       return css`
-        background-color: ${({ theme }) => theme.semantic.color.buttonBoxSecondaryEnabled};
+        background-color: ${({ theme }) => theme.semantic.color.buttonFilledSecondaryEnabled};
         color: ${({ theme }) => theme.semantic.color.textBrandSecondary};
         border: none;
 
@@ -37,12 +37,12 @@ const getHierarchyStyle = ($hierarchy: BoxButtonHierarchy) => {
 
         &:hover {
           cursor: pointer;
-          background-color: ${({ theme }) => theme.semantic.color.buttonBoxSecondaryPressed};
+          background-color: ${({ theme }) => theme.semantic.color.buttonFilledSecondaryPressed};
         }
       `;
-    case 'tertiary':
+    case 'outlined':
       return css`
-        background-color: ${({ theme }) => theme.semantic.color.buttonBoxTertiaryEnabled};
+        background-color: ${({ theme }) => theme.semantic.color.buttonOutlinedEnabled};
         color: ${({ theme }) => theme.semantic.color.textBasicPrimary};
         border: 1px solid ${({ theme }) => theme.semantic.color.lineBasicMedium};
 
@@ -52,7 +52,7 @@ const getHierarchyStyle = ($hierarchy: BoxButtonHierarchy) => {
 
         &:hover {
           cursor: pointer;
-          background-color: ${({ theme }) => theme.semantic.color.buttonBoxTertiaryPressed};
+          background-color: ${({ theme }) => theme.semantic.color.buttonOutlinedPressed};
         }
       `;
   }
@@ -129,21 +129,21 @@ const getSizeStyle = ($size: BoxButtonSize) => {
   }
 };
 
-const getDisabledStyle = ($hierarchy: BoxButtonHierarchy) => {
-  switch ($hierarchy) {
-    case 'primary':
+const getDisabledStyle = ($variant: BoxButtonVariant) => {
+  switch ($variant) {
+    case 'filledPrimary':
       return css`
-        background-color: ${({ theme }) => theme.semantic.color.buttonBoxPrimaryDisabled};
+        background-color: ${({ theme }) => theme.semantic.color.buttonFilledPrimaryDisabled};
         border: none;
       `;
-    case 'secondary':
+    case 'filledSecondary':
       return css`
-        background-color: ${({ theme }) => theme.semantic.color.buttonBoxSecondaryDisabled};
+        background-color: ${({ theme }) => theme.semantic.color.buttonFilledSecondaryDisabled};
         border: none;
       `;
-    case 'tertiary':
+    case 'outlined':
       return css`
-        background-color: ${({ theme }) => theme.semantic.color.buttonBoxTertiaryDisabled};
+        background-color: ${({ theme }) => theme.semantic.color.buttonOutlinedDisabled};
         border: 1px solid ${({ theme }) => theme.semantic.color.lineBasicMedium};
       `;
   }
@@ -155,13 +155,13 @@ export const StyledBoxButton = styled.button<StyledBoxButtonProps>`
   justify-content: center;
   gap: 4px;
 
-  ${({ $hierarchy }) => getHierarchyStyle($hierarchy)}
+  ${({ $variant }) => getVariantStyle($variant)}
   ${({ $size }) => getSizeStyle($size)}
   min-width: fit-content;
   width: ${({ $width }) => $width};
 
   &:disabled {
-    ${({ $hierarchy }) => getDisabledStyle($hierarchy)}
+    ${({ $variant }) => getDisabledStyle($variant)}
     color: ${({ theme }) => theme.semantic.color.textBasicDisabled};
     cursor: not-allowed;
 

src/components/BoxButton/BoxButton.tsx

@@ -5,13 +5,13 @@ import { StyledBoxButton } from './BoxButton.style';
 import { BoxButtonProps } from '.';
 
 export const BoxButton = forwardRef<HTMLButtonElement, BoxButtonProps>(
-  ({ size, hierarchy, width, leftIcon, children, rightIcon, ...props }, ref) => {
+  ({ size, variant, width, leftIcon, children, rightIcon, ...props }, ref) => {
     return (
       <StyledBoxButton
         ref={ref}
         disabled={props.disabled}
         $size={size}
-        $hierarchy={hierarchy}
+        $variant={variant}
         $width={width}
         {...props}
       >

src/components/BoxButton/BoxButton.type.ts

@@ -1,9 +1,9 @@
 export type BoxButtonSize = 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall' | 'xxsmall';
-export type BoxButtonHierarchy = 'primary' | 'secondary' | 'tertiary';
+export type BoxButtonVariant = 'filledPrimary' | 'filledSecondary' | 'outlined';
 
 export interface BoxButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   size: BoxButtonSize;
-  hierarchy: BoxButtonHierarchy;
+  variant: BoxButtonVariant;
   leftIcon?: React.ReactNode;
   children?: React.ReactNode;
   rightIcon?: React.ReactNode;

src/components/Snackbar/Snackbar.stories.tsx

@@ -60,7 +60,7 @@ const SnackbarComponent = (args: SnackbarProps) => {
 
   return (
     <div>
-      <BoxButton size="small" hierarchy="primary" onClick={addSnackbar}>
+      <BoxButton size="small" variant="filledPrimary" onClick={addSnackbar}>
         {buttonLabel}
       </BoxButton>
     </div>

src/components/TextButton/TextButton.mdx

@@ -28,17 +28,17 @@ import { TextButton } from '@yourssu/design-system-react';
 ```
 
 ```tsx
-<TextButton size="medium" hierarchy="primary">
-  Primary/Medium
+<TextButton size="medium" variant="textPrimary">
+  textPrimary/Medium
 </TextButton>
 ```
 
 <Canvas of={TextButtonStories.Sizes} withSource="none" />
 
-필수 프로퍼티인 `hierarchy`를 사용하여 TextButton의 위계를 설정해주세요.<br />
-지원하는 종류는 `primary`, `secondary` 입니다.
+필수 프로퍼티인 `variant`를 사용하여 TextButton의 위계를 설정해주세요.<br />
+지원하는 종류는 `textPrimary`, `textSecondary` 입니다.
 
-<Canvas of={TextButtonStories.Hierarchies} withSource="none" />
+<Canvas of={TextButtonStories.Variants} withSource="none" />
 
 이외의 프로퍼티들은 하단의 예시에서 확인할 수 있습니다.
 
@@ -49,8 +49,8 @@ import { TextButton } from '@yourssu/design-system-react';
 `TextButton`을 클릭할 수 없게 막습니다.
 
 ```tsx
-<TextButton size="medium" hierarchy="primary" disabled={true}>
-  Primary/Disabled/Medium
+<TextButton size="medium" variant="textPrimary" disabled={true}>
+  textPrimary/Disabled/Medium
 </TextButton>
 ```
 
@@ -62,8 +62,8 @@ import { TextButton } from '@yourssu/design-system-react';
 단, `children` 콘텐츠 크기보다 작은 값을 입력할 경우 적용되지 않습니다.
 
 ```tsx
-<TextButton size="medium" hierarchy="primary" width="500px">
-  Primary/Medium/500px
+<TextButton size="medium" variant="textPrimary" width="500px">
+  textPrimary/Medium/500px
 </TextButton>
 ```
 
@@ -75,7 +75,7 @@ import { TextButton } from '@yourssu/design-system-react';
 아이콘과 텍스트는 동일한 색상으로 스타일링되어 있으므로, 별도의 색상을 지정하지 말아 주세요.
 
 ```tsx
-<TextButton size="medium" hierarchy="primary" leftIcon={<IcExternalLinkLine />}>
+<TextButton size="medium" variant="textPrimary" leftIcon={<IcExternalLinkLine />}>
   with leftIcon
 </TextButton>
 ```
@@ -89,7 +89,7 @@ import { TextButton } from '@yourssu/design-system-react';
 ```tsx
 <TextButton
   size="medium"
-  hierarchy="primary"
+  variant="textPrimary"
   onClick={() => {
     alert('TextButton을 클릭했습니다');
   }}