Button - FE14-Part4-Team5/reser-on-do GitHub Wiki
๋ฒํผ ๊ณตํต ์ปดํฌ๋ํธ์ ๋๋ค.
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
children: React.ReactNode;
icon?: React.ReactNode;
variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'filter-white' | 'filter-black';
padding?: string;
isActive?: boolean;
className?: string;
marginRight?: string;
}
- ๋ฒํผ์ ๊ธฐ๋ณธ์ ์ผ๋ก
variant
์ ๋ฐ๋ผ ์คํ์ผ์ด ๊ฒฐ์ ๋ฉ๋๋ค. -
isActive
๊ฐfalse
์ผ ๊ฒฝ์ฐ ๋ฒํผ์disabled
์ฒ๋ฆฌ๋์ด ํด๋ฆญ์ด ๋ถ๊ฐ๋ฅํ๋ฉฐ, ์คํ์ผ๋ ๋นํ์ฑํ ์ํ๋ก ๋ณ๊ฒฝ๋ฉ๋๋ค. -
isActive
๊ฐtrue
์ผ ๊ฒฝ์ฐ ๋ฒํผ์ ํ์ฑ ์ํ๋ก ํ์๋๊ณ ,variant
์ ๋ง๋ ์คํ์ผ์ด ์ ์ฉ๋ฉ๋๋ค. -
icon
prop์ด ์กด์ฌํ๋ฉด ๋ฒํผ ๋ด ์์ด์ฝ์ด ํ ์คํธ ์ผ์ชฝ์ ํจ๊ป ๋ ๋๋ง๋ฉ๋๋ค. -
className
์ผ๋ก ์ถ๊ฐ ์คํ์ผ๋ง ๋ฐ ๋ ์ด์์ ์กฐ์ ์ด ๊ฐ๋ฅํฉ๋๋ค.text color
๋gap
๋ฑ์ ์ ๋์ ์ธ ์ ์ง์ ์ด๋ ์ถํ ๋ฐ์ํ์ ๊ณ ๋ คํ์ฌclassName
์ผ๋ก ํ์ฅํ๊ฒ๋ ์ค๊ณ ํ์์ต๋๋ค.
<Button
variant="secondary"
isActive={true}
icon={
<img
src="https://cdn-icons-png.flaticon.com/512/25/25231.png"
alt="github"
width={16}
height={16}
/>
}
padding="0.5rem 1.5rem"
marginRight="0.6rem"
>
์ด๋ฏธ์ง ์์ด์ฝ
</Button>
/>
2025 06 05 - ๋ฐ์ํ ์์
์ ํ๋ค๋ณด๋ padding์ props๋ก ์ ๋ฌํด์ฃผ๋ ๋ฐฉ์์ ์ฌ์ฉํ๋ฉด !important
๋ฅผ ์ฌ์ฉํด์ ๊ฐ์ ๋ก css ์ ์ฉ ์์๋ฅผ ์ฌ๋ ค์ผ ํ๋ค๊ณ ํฉ๋๋ค. ๊ทธ๋์ css๋ฅผ className์ผ๋ก ๊ด๋ฆฌ ํ๋ ๋ฐฉ์์ด ๊ถ์ฅ ์ฌํญ์ด๋ผ๊ณ ํ๋ค์..! ๊ทธ๋์ padding props๋ฅผ ์ ๊ฑฐ ํ์ต๋๋ค!