전제

• 기본적으로 공통 컴포넌트는 아래와 같은 명명 규칙을 갖는다.
  • CpInput.vue
  • Cp는 ChukaPoka의 축약
  • Cp뒤에는 해당 컴포넌트의 이름
• 공통 컴포넌트 등은 최대한 범용성, 확장성을 갖도록 만들자.
  • 사용되는 경우를 파악해서 최대한 많은 부분을 prop을 통해 제어할 수 있도록 만들자
• 기본적으로 컴포넌트는 element-plus의 컴포넌트를 커스텀하는 방식으로 개발하자
  • https://element-plus.org/en-US/component/button.html
  • https://github.com/Chukapoka/client/tree/ref/how-to-develop
  • 준비된 element-plus 컴포넌트 중 해당 컴포넌트에 활용할 수 있는 컴포넌트를 찾고, 그 컴포넌트를 커스텀하는 방식
• vue 파일과 함께 stories.ts 파일도 만들자
  • storybook으로 전체 컴포넌트를 한 눈에 확인할 수 있도록 하자
• 작업 중에 사용되는 아이콘, 컬러 등은 알아서 추가하도록 하자
  • src/assets/~~~
  • src/components/commons/images/~~~
    • 아이콘은 Iconography.stories.mdx 에 꼭 추가해주세요

1. CpButton (재형)

https://www.figma.com/file/6Tu7H514UE9JcZyPffyKjw/20231222_CHUKAPOKA?type=design&node-id=769-1920&mode=design&t=trTO31xZrcgdW0tm-4

• src/components/commons/CpButton.vue
  • 기존에 만들어진 상태
  • [x] icon 타입이 추가된 상태이나 icon button은 따로 컴포넌트화시킬 예정이므로 수정 필요
  • PR제출완료
    • https://github.com/Chukapoka/client/pull/25

2. CpIconCircleButton (은우)

https://www.figma.com/file/6Tu7H514UE9JcZyPffyKjw/20231222_CHUKAPOKA?type=design&node-id=790-2466&mode=design&t=trTO31xZrcgdW0tm-4

• src/components/commons/CpIconCircleButton.vue
• 고려사항

  • 버튼은 완전한 원 모양일 것

  • 제어 가능 요건(default값은 피그마 디자인을 따름)

    • 백그라운드 칼라, icon 칼라
    • 클릭 이벤트(@click)
    • width, height, 가능하다면,, svg(icon) width, height (100%)
      • default 값은 피그마의 디자인에 맞추자.
      • svg width, height는 default 100%

  • slot이나 prop을 이용해 아이콘을 지정할 수 있도록 할 것

    // slot
    <cp-icon-circle-button>
    	<icon-plus />
    </cp-icon-circle-button>
    
    // prop
    <cp-icon-circle-button :icon="IconPlus" />
    

3. CpIconButton (승연)

https://www.figma.com/file/6Tu7H514UE9JcZyPffyKjw/20231222_CHUKAPOKA?type=design&node-id=790-2663&mode=design&t=trTO31xZrcgdW0tm-4

https://www.figma.com/file/6Tu7H514UE9JcZyPffyKjw/20231222_CHUKAPOKA?type=design&node-id=304-528&mode=design&t=trTO31xZrcgdW0tm-4