-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat : 공유 컴포넌트 버튼 개발 * chore : 버튼 폰트 스타일 수정
- Loading branch information
1 parent
6ad6c0d
commit ac2b770
Showing
3 changed files
with
119 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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') | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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에 따른 배경색 | ||
}}; | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |