Button - FE14-Part4-Team5/reser-on-do GitHub Wiki

Button

๋ฒ„ํŠผ ๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ์ž…๋‹ˆ๋‹ค.


โœ… Props

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์œผ๋กœ ํ™•์žฅํ•˜๊ฒŒ๋” ์„ค๊ณ„ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๐Ÿงพ ์‚ฌ์šฉ ์˜ˆ์‹œ

image

    <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>
/>

etc.

2025 06 05 - ๋ฐ˜์‘ํ˜• ์ž‘์—…์„ ํ•˜๋‹ค๋ณด๋‹ˆ padding์„ props๋กœ ์ „๋‹ฌํ•ด์ฃผ๋Š” ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๋ฉด !important๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ฐ•์ œ๋กœ css ์ ์šฉ ์ˆœ์œ„๋ฅผ ์˜ฌ๋ ค์•ผ ํ•œ๋‹ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ css๋ฅผ className์œผ๋กœ ๊ด€๋ฆฌ ํ•˜๋Š” ๋ฐฉ์‹์ด ๊ถŒ์žฅ ์‚ฌํ•ญ์ด๋ผ๊ณ  ํ•˜๋„ค์š”..! ๊ทธ๋ž˜์„œ padding props๋ฅผ ์ œ๊ฑฐ ํ–ˆ์Šต๋‹ˆ๋‹ค!

โš ๏ธ **GitHub.com Fallback** โš ๏ธ