feat : 공유 컴포넌트 버튼 개발 (#34)

* feat : 공유 컴포넌트 버튼 개발

* chore : 버튼 폰트 스타일 수정

src/shared/ui/Button/Button.stories.tsx

@@ -0,0 +1,48 @@
+// src/shared/ui/Button/Button.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
+
+const meta: Meta<typeof Button> = {
+    title: 'Shared/Button',
+    component: Button,
+    tags: ['autodocs']
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+    args: {
+        children: '로그인',
+        isActive: true,
+        hasBorder: false,
+        height: '44px',
+        width: '300px',
+        fontSize: '16px',
+        onClick: () => console.log('Button clicked')
+    }
+};
+
+export const HasBorder: Story = {
+    args: {
+        children: '회원가입',
+        isActive: true,
+        hasBorder: true,
+        height: '44px',
+        width: '300px',
+        fontSize: '16px',
+        onClick: () => console.log('Button clicked')
+    }
+};
+
+export const DeActive: Story = {
+    args: {
+        children: '다음',
+        isActive: false,
+        hasBorder: false,
+        height: '44px',
+        width: '300px',
+        fontSize: '16px',
+        onClick: () => console.log('Button clicked')
+    }
+};

src/shared/ui/Button/Button.styled.tsx

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import { ButtonProps } from './Button';
+
+export const StyledButton = styled.button<ButtonProps>`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(props) => {
+        if (!props.isActive) {
+            return '#BCBCBC'; // isActive, 활성이 false인 경우
+        }
+        return props.hasBorder ? '#FFFFFF' : '#FF480E'; // hasBorder에 따른 배경색
+    }};
+    border: ${(props) =>
+        props.hasBorder && props.isActive ? '1px solid #FF480E' : 'none'};
+    color: ${(props) =>
+        props.hasBorder && props.isActive ? '#FF480E' : '#FFFFFF'};
+    font-size: ${(props) => props.fontSize};
+    font-family: 'Pretendard', sans-serif;
+    height: ${(props) => props.height};
+    width: ${(props) => props.width};
+    border-radius: 10px;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+        cursor: pointer;
+        background-color: ${(props) => {
+            if (!props.isActive) {
+                return 'none'; // isActive, 활성이 false인 경우
+            }
+            return props.hasBorder ? '#FFF4F1' : '#E13600'; // hasBorder에 따른 배경색
+        }};
+    }
+`;

src/shared/ui/Button/Button.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyledButton } from './Button.styled';
+
+export interface ButtonProps {
+    children: React.ReactNode;
+    fontSize: string;
+    isActive: boolean;
+    hasBorder: boolean;
+    height: string;
+    width: string;
+    onClick: () => void;
+}
+
+const Button = ({
+    children,
+    isActive = true,
+    hasBorder = false,
+    height,
+    width,
+    fontSize,
+    onClick
+}: ButtonProps) => {
+    return (
+        <StyledButton
+            isActive={isActive}
+            hasBorder={hasBorder}
+            height={height}
+            width={width}
+            fontSize={fontSize}
+            onClick={onClick}
+        >
+            {children}
+        </StyledButton>
+    );
+};
+
+export default Button;