버튼

기본 사용법

<%- include(`${_src}/views/components/button/button.ejs`, { size: 'md', variant: 'primary', text: '버튼 텍스트' }) %>
* Button Component
*
* @param {string} size - xxl | xl | lg | md | sm | xs | xxs (필수, 기본값: 'md')
* @param {string} variant - primary | primary-soft | secondary | tertiary | outline-primary | outline-secondary | outline-tertiary (필수, 기본값: 'primary')
* @param {string} text - 버튼 텍스트
* @param {boolean} iconLeft - 좌측 아이콘 여부 (기본값: false)
* @param {boolean} iconRight - 우측 아이콘 여부 (기본값: false)
* @param {string} iconName - 아이콘 클래스명 (ex: 'ic-check')
* @param {boolean} disabled - 비활성 여부 (기본값: false)
* @param {string} type - button | submit | reset (기본값: 'button')
* @param {string} className - 추가 클래스명
* @param {string} attrs - 추가 _attrs 속성 (ex. data-toggle-btn , data-toggle-outside="true", data-toggle-group-except="true", data-toggle-target="panel", aria-expanded="false")
* ㄴ/g-ui/g-toggle.html 참고 
* [ 폰트 굵기 적용 ]
* <%- include(`${_src}/views/components/button/button.ejs`, { className: 'weight-r' }) %>
  ㄴ className으로 적용
*
* Button_semantic 
  ㄴ 사이즈 sm                        => default font-weight: 600
*
* Button_semantic 외 버튼
  ㄴ 사이즈 sm, md, lg, lg-p, xl, xxl => default font-weight: 700
  ㄴ 사이즈 xs, xxs                   => default font-weight: 400
*
* 폰트 굵기 설정 클래스:
  ㄴ weight-r(400), weight-m(500), weight-s(600), weight-b(700)

Button_sementic

<%- include(`${_src}/views/components/button/button.ejs`, { size: 'sm', variant: 'scoped-{}', text: '버튼 텍스트' }) %>

Primary Variant

<%- include(`${_src}/views/components/button/button.ejs`, { size: 'md', variant: 'primary', text: '버튼 텍스트' }) %>

Outline Variant

<%- include(`${_src}/views/components/button/button.ejs`, { size: 'md', variant: 'outline-primary', text: '버튼 텍스트' }) %>

아이콘 버튼

<%- include(`${_src}/views/components/button/button.ejs`, { size: 'md', variant: 'primary', text: '버튼 텍스트', iconLeft: true, iconName: 'ic-check' }) %>

크기 예시

<%- include(`${_src}/views/components/button/button.ejs`, { size: 'xxl', // xxl | xl | lg | md | sm | xs | xxs variant: 'primary', text: '버튼 텍스트' }) %>

상태 예시

<%- include(`${_src}/views/components/button/button.ejs`, { size: 'md', variant: 'primary', text: '버튼 텍스트', disabled: true, type: 'submit' }) %>

텍스트 링크 버튼

<!-- 
  components/text-link.ejs

  - 헤더/유틸 영역 등에서 사용하는 텍스트 링크(버튼 형태)
  - 입력: href(필수), label(필수), target(선택)
  - 동작: target 미지정 시 기본 동작(같은 탭), target='_blank'일 때 rel='noopener noreferrer' 자동 적용

  - 사용:
  < %- include(`${_src}/views/components/button/text-link.ejs`, { href: '/mypage/favorite', label: '즐겨찾기' }) 
  < %- include(`${_src}/views/components/button/text-link.ejs`, { href: 'https://external.site', label: '외부 링크', target: '_blank' }) 
-->

밑줄 텍스트 버튼

<!--
[사용 가능한 파라미터]
- text: string (필수) - 버튼 텍스트
- tag: 'button' | 'a' (기본: 'button') - HTML 태그
- href: string (기본: '#!') - tag가 'a'일 때 링크 URL
- fs: 'b3' | 'b2' (기본: '') - 폰트 사이즈 variant
- height: number (기본: '') - 높이값 (예: 18, 19, 21, 24)
- fc: string (기본: '') - 폰트 색상 (예: 'brand-sub')
- offset: number (기본: '') - 라인 간격 조정 클래스 (예: 2, 3, 5)
- className: string (기본: '') - 추가 클래스

[사용 예시]
<%- include('text-underline-button.ejs', {
  text: '도움말',
  fs: 'b3',
  height: 19
}) %>

<%- include('text-underline-button.ejs', {
  text: '자세히 보기',
  tag: 'a',
  href: '/help',
  fs: 'b2',
  height: 21,
  fc: 'brand',
}) %>
-->

텍스트 화살표 버튼

[사용 가능한 파라미터]
- text: string (필수)       - 버튼 텍스트
- href: string (필수)       - 링크 URL
- size: string (선택)       - 기본 14px, sm (font-size 12px)
- rootClass                - 컬러값, 굵기 등 추후 변경 시, 사용
                             ㄴ 예시 weight-?? color-?? 

* 기본 스타일: 컬러 #767676 / 굵기 400

[사용 예시]
<%- include(`${_src}/views/components/button/text-arrow-link.ejs`, { 
  href: '#!', 
  text: '내 정보',
  size: 'sm'
}) %>