Codemate Component Style Guide

Button

src/components/DesignSystem/Button/Index.vue

Codemate 의 모든 버튼을 담당합니다.

Prop name	Type	Default	Required	Description
`color`	`string`	`red`		색깔 지정 가능 red, white, green, on, off
`shape`	`string`	`normal`		향테 지정 가능 normal, round

Event name	Type	Description
`click`	`null`	버튼 클릭했을 때 실행되는 이벤트

Slot	Description
`default`	버튼 안에 들어갈 내용을 적을 수 있는 기본 slot

버튼 디자인 예시입니다.

`primary`

옆으로 길어집니다.

xxxxxxxxxx
 
<div>  <Button color="red">옆으로 길어집니다.</Button>  <Button color="red" shape="round">옆으로 길어집니다.</Button>    </div>

`white`

코드메이트 버튼입니다.

xxxxxxxxxx
 
    <Button color="white">코드메이트 버튼입니다.</Button>    <Button color="white" shape="round">코드메이트 버튼입니다.</Button>  

`white-secondary`

확인

xxxxxxxxxx
 
  <Button color="white-secondary">확인</Button>

`black`

확인

xxxxxxxxxx
 
  <Button color="black">확인</Button>

`black-secondary`

확인

xxxxxxxxxx
 
  <Button color="black-secondary">확인</Button></div>

Card

src/components/DesignSystem/Card/Index.vue

코드메이트 기본 카드 모양입니다.

Prop name	Type	Default	Required	Description
`shadowDirection`	`string`	`down`		그림자 방향 down, right-down, right-up

Slot	Description
`default`	기본적으로 display:flex; flex-direction: column; 까지 적용되어있습니다.

기본적인 내부 padding 은 지정 되어있습니다.

Header

Sub header

Label

형식에 맞지 않습니다.

Label

형식에 맞지 않습니다.

이 컴포넌트는 기본적인 테두리를 정의하고 있습니다.

카드 안에 자유롭게 내용을 적을 수 있으며,

flex-direction 은 column 입니다.

이렇게 말입니다.

xxxxxxxxxx
 
<Card>  <Heading v-bind:rank="3">Header</Heading>  <Heading v-bind:rank="4">Sub header</Heading>  <ProfileImage  size="medium"/>  <Input label="Label" v-bind:validation="()=>false"/>  <TextArea label="Label" v-bind:validation="()=>false"/>  <div>이 컴포넌트는 기본적인 테두리를 정의하고 있습니다. </div>  <div>카드 안에 자유롭게 내용을 적을 수 있으며, </div>  <div>flex-direction 은 column 입니다.</div>  <Button shape="round">이렇게 말입니다.</Button></Card>

Heading

src/components/DesignSystem/Heading/Index.vue

Heading 만 필요한 순간이 있죠. :)

Prop name	Type	Default	Required	Description
`color`	`string`	`black`		색상 primary, black, white
`rank`	`number`	`0`		0 ~ 4 까지의 중요도. 0 = h1D. 4 = h4.

Slot	Description
`default`	내용을 적는 공간입니다.

h1D 큰 제목

h1 큰 제목

h2 큰 제목

h3 큰 제목

h4 큰 제목

xxxxxxxxxx
 
<div>  <Heading v-bind:rank="0">h1D 큰 제목</Heading>  <Heading v-bind:rank="1">h1 큰 제목</Heading>  <Heading v-bind:rank="2">h2 큰 제목</Heading>  <Heading v-bind:rank="3">h3 큰 제목</Heading>  <Heading v-bind:rank="4">h4 큰 제목</Heading></div>

Input

src/components/DesignSystem/Input/Index.vue

Prop name	Type	Default	Description
`errorMessage`	`string`	`형식에 맞지 않습니다.`	Validation 에 걸렸을 때 보여줄 에러 메세지
`label`	`string`		인풋의 제목 label
`placeholder`	`string`	`placeholder`	placeholder
`type`	`string`	`text`	기본 input 의 type 과 동일 text, number, date, password, email 등
`v-model`	`string`
`validation`	`func`	Function	값이 Valid 한지 판단하는 함수

Event name	Type	Description
`enter`	`unknown`	enter 눌렀을 때 이벤트

`width` 에 관한 주의

기본 너비는 grid system 에 따라 가장 자주 사용되는 328px 로 맞춰져있지만, 언제든 변경이 가능합니다.

다시 입력하세요.

xxxxxxxxxx
 
<Input v-bind:validation="()=>false" errorMessage="다시 입력하세요."/>

xxxxxxxxxx
 
<Input value="기본 값" v-bind:validation="()=>true" errorMessage="다시 입력하세요."/>

Question Title

xxxxxxxxxx
 
<Input label="Question Title" value="기본 값" v-bind:validation="()=>true" errorMessage="다시 입력하세요."/>

ProfileImage

src/components/DesignSystem/ProfileImage/Index.vue

User 의 Profile Image 컴포넌트입니다.

Prop name	Type	Default	Description
`isLoading`	`boolean`	`false`	이미지가 아직 로드중인지. 로드중이라면 기본 색상 보여줌.
`size`	`string`	`small`	이미지 크기 3종류 big, medium, small
`src`	`string`		의 src 를 포워딩. 아무것도 입력 안하면 기본 색상 보여줌

xxxxxxxxxx
 
<div><ProfileImage size="small" src=""></ProfileImage><ProfileImage size="medium" v-bind:isLoading="false"></ProfileImage><ProfileImage size="big"></ProfileImage></div>

Tag

src/components/DesignSystem/Tag/Index.vue

codemate 의 Tag component 입니다.

Prop name	Type	Default	Required	Description
`isRemovable`	`boolean`	`false`		지우기 버튼이 있는 태그인지

Slot	Description
`default`	태그 이름을 넣는 기본 슬롯입니다.

Default Example Usage

xxxxxxxxxx
 
<Tag>Default Example Usage</Tag>

TextArea

src/components/DesignSystem/TextArea/Index.vue

Prop name	Type	Default	Description
`errorMessage`	`string`	`형식에 맞지 않습니다.`	Validation 에 걸렸을 때 보여줄 에러 메세지
`label`	`string`		인풋의 제목 label
`placeholder`	`string`	`placeholder`	기본 textarea 의 placeholder 포워딩
`v-model`	`string`
`validation`	`func`	Function	값이 Valid 한지 판단하는 함수

Event name	Type	Description
`enter`	`unknown`	enter 눌렀을 때 이벤트

`width` 와 `height` 에 관한 주의

기본 너비는 grid system 에 따라 가장 자주 사용되는 328px 로 맞춰져있지만, 언제든 변경이 가능합니다. 기본 높이는 grid system 에 따라 가장 자주 사용되는 112px 로 맞춰져있지만, 언제든 변경이 가능합니다.

제목입니다.

xxxxxxxxxx
 
<TextArea label="제목입니다." />

무조건 틀리셨습니다.

xxxxxxxxxx
 
<TextArea v-bind:validation="()=>false" errorMessage="무조건 틀리셨습니다." />

primary

white

white-secondary

black

black-secondary

width 에 관한 주의

width 와 height 에 관한 주의