chore : 공유-컴포넌트-버튼-border-radius-속성-추가 (#58)

prgrms-fe-devcourse · Oct 29, 2024 · 0566f3f · 0566f3f
1 parent 7264e9f
commit 0566f3f
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/src/shared/ui/Button/Button.stories.tsx → src/shared/ui/Button/Button.stories.ts b/src/shared/ui/Button/Button.stories.tsx → src/shared/ui/Button/Button.stories.ts
@@ -1,4 +1,3 @@
-// src/shared/ui/Button/Button.stories.tsx
 import type { Meta, StoryObj } from '@storybook/react';
 import Button from './Button';
 
@@ -16,6 +15,7 @@ export const Default: Story = {
         children: '로그인',
         isActive: true,
         hasBorder: false,
+        borderradius: '10px',
         height: '44px',
         width: '300px',
         fontSize: '16px',

diff --git a/src/shared/ui/Button/Button.styled.tsx → src/shared/ui/Button/Button.styled.ts b/src/shared/ui/Button/Button.styled.tsx → src/shared/ui/Button/Button.styled.ts
@@ -21,7 +21,7 @@ export const StyledButton = styled.button.withConfig({
     font-family: 'Pretendard', sans-serif;
     height: ${(props) => props.height};
     width: ${(props) => props.width};
-    border-radius: 10px;
+    border-radius: ${(props) => props.borderradius};
     transition: background-color 0.2s ease;
 
     &:hover {

diff --git a/src/shared/ui/Button/Button.tsx b/src/shared/ui/Button/Button.tsx
@@ -6,6 +6,7 @@ const Button = ({
     children,
     isActive = true,
     hasBorder = false,
+    borderradius = '10px',
     height,
     width,
     fontSize,
@@ -15,6 +16,7 @@ const Button = ({
         <StyledButton
             isActive={isActive}
             hasBorder={hasBorder}
+            borderradius={borderradius}
             height={height}
             width={width}
             fontSize={fontSize}

diff --git a/src/shared/ui/Button/Button.types.ts b/src/shared/ui/Button/Button.types.ts
@@ -1,8 +1,9 @@
 export interface ButtonProps {
     children: React.ReactNode;
     fontSize: string;
-    isActive: boolean;
-    hasBorder: boolean;
+    isActive?: boolean;
+    hasBorder?: boolean;
+    borderradius?: string;
     height: string;
     width: string;
     onClick: () => void;