📌 라이브러리를 다운 받아서 사용하시면 됩니다.

```bash
npm i pds-3-14
```

📌 Fnd ( Foundation ) Import 하여 사용

```jsx
import { Fnd } from 'pds-3-14';
```

📌 이미지파일 저장용 서버

> 📎 <a href='https://port-0-psd-asset-server-eg4e2alkf2i7md.sel4.cloudtype.app/'> 서버 URL </a>

적용 방법

전역에 **FoundationGlobalStyles 컴포넌트** 설정

```jsx
<Fnd.FoundationGlobalStyles />
```

Color

#### Font

Foundation 모듈에 전역적으로 Font 설정

#### Typography

| value | meaning |
| ------------------------------------------------------------ | -------------------------------------- |
| **Headline, Title1, Title2, Title3, Title4, Title5, Title6** | Headline 과 Title 타이포그래피 입니다. |
| **Body1, Body2, Body3, Body4, Caption1, Caption2** | Body 과 Caption 타이포그래피 입니다. |

```jsx
// ❗ 'Body1' 부분을 원하는 Value 값으로 지정하시면 됩니다.
<Fnd.TypographyStyles.Body1>{'Hello World'}</Fnd.TypographyStyles.Body1>
```

Typography

원하는 사이즈와 시스템 종류에 맞는 레이아웃이 도출이 됩니다.

| props | value | meaning |
| ---------- | ------------------------------------------- | ------------------------------------------------------------- |
| **size** | **'tablet','pc','phone' ( 기본 : tablet )** | 입력하면 해당 사이즈에 맞는 레이아웃이 지정됩니다. ( 필수❌ ) |
| **system** | **'android','ios' ( 기본 : android )** | 입력하면 해당 시스템에 맞는 레이아웃이 지정됩니다. ( 필수❌ ) |

```jsx
<Fnd.LayoutStyles size="tablet" system="android">
 Hello World
</Fnd.LayoutStyles>
```

Layout

지정된 아이콘을 불러온다면, 정상적으로 작동이 됩니다.

| props | value | meaning |
| ------------- | --------------------------- | ---------------------------------------------------------------------------------------- |
| **name** | **string** | 서버에 저장되어있는 아이콘 명을 입력하면 정상적으로 작동이 됩니다. ( 필수⭕ ) |
| **extension** | **string** ( 기본 : 'svg' ) | 서버에 저장되어있는 아이콘 명의 확장자명을 입력하면 정상적으로 작동이 됩니다. ( 필수❌ ) |
| **height** | **number** | 입력하면 해당 숫자만큼 높이가 지정됩니다. ( 필수❌ ) |
| **width** | **number** | 입력하면 해당 숫자만큼 너비가 지정됩니다. ( 필수❌ ) |

> 📎 <a href='https://port-0-psd-asset-server-eg4e2alkf2i7md.sel4.cloudtype.app/'>서버 URL</a> 

```jsx
<Fnd.IconStyles name={'add'} extension="svg" height={100} width={100} />
```

Icon

지정된 이미지을 불러온다면, 정상적으로 작동이 됩니다.

| props | value | meaning |
| -------------- | --------------------------- | ---------------------------------------------------------------------------------------- |
| **name** | **string** | 서버에 저장되어있는 이미지 명을 입력하면 정상적으로 작동이 됩니다. ( 필수⭕ ) |
| **extension** | **string ( 기본 : 'svg' )** | 서버에 저장되어있는 이미지 명의 확장자명을 입력하면 정상적으로 작동이 됩니다. ( 필수❌ ) |
| **areaHeight** | **number** | 입력하면 해당 숫자만큼 영역의 높이가 지정됩니다. ( 필수❌ ) |
| **areaWidth** | **number** | 입력하면 해당 숫자만큼 영역의 너비가 지정됩니다. ( 필수❌ ) |
| **imgHeight** | **number** | 입력하면 해당 숫자만큼 이미지의 높이가 지정됩니다. ( 필수❌ ) |
| **imgWidth** | **number** | 입력하면 해당 숫자만큼 이미지의 너비가 지정됩니다. ( 필수❌ ) |

```jsx
<Fnd.GraphicStyles
 name={'Album'}
 extension="svg"
 areaHeight={100}
 areaWidth={100}
 imgHeight={100}
 imgWidth={100}
/>
```

Graphic

체크박스 와 라디오 중 원하는 컨트롤러를 불러올 수 있습니다.

| props | value | meaning |
| ------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **inputAttr** | **{type : 'checkbox', 'radio' , }** | type 속성은 체크박스와 라디오 중 선택 가능합니다.( 필수⭕ ) 이외에 input 태그와 같은 속성값을 사용할 수 있습니다. ( 필수❌ ) |
| **labelAttr** | **{content : string , }** | content 속성에 문자열 입력 시 내용이 나타납니다. ( 필수❌ ) 이외에 label 태그와 같은 속성값을 사용할 수 있습니다. ( 필수❌ ) |

```jsx
<Fnd.SelectionControlsStyles
 inputAttr={{ type: 'checkbox', id: 'hello' }}
 labelAttr={{ content: '선택1', htmlFor: 'hello' }}
/>
```

SelectionControls

📌 라이브러리를 다운 받아서 사용하시면 됩니다.

```bash
npm i pds-3-14
```

📌 Cmp ( Component ) Import 하여 사용 , 전역에 글로벌 스타일 추가 필수!

```jsx
import { Cmp , Fnd } from 'pds-3-14';
...
 <Fnd.FoundationGlobalStyles/>
...
```

사용자가 원하는 크기와 상태를 지정하면, 그에 맞는 컴포넌트를 불러올 수 있습니다.

| props | value | meaning |
| ------------ | ----------------------------------------------------------------- | ---------------------------------------------------------------- |
| **size** | **'x-small' , 'small' , 'medium' , 'large' , 'x-large'** , 'full' | 지정된 사이즈 명을 입력하면 정상적으로 작동이 됩니다. ( 필수⭕ ) |
| **state** | **'normal' , 'enabled'** , 'disabled' | 지정된 상태를 입력하면 정상적으로 작동이 됩니다. ( 필수⭕ ) |
| **children** | **ReactNode** | 입력하면 해당 숫자만큼 높이가 지정됩니다. ( 필수⭕ ) |

1️⃣ Contained 스타일

```jsx
<Cmp.Button.Contained size="x-small" state="disabled">
 {'버튼'}
</Cmp.Button.Contained>
```

2️⃣ Outline 스타일

```jsx
<Cmp.Button.Outline size="x-small" state="disabled">
 {'버튼'}
</Cmp.Button.Outline>
```

Button

사용자가 원하는 컴포넌트 명을 지정하면, 그에 맞는 컴포넌트를 불러올 수 있습니다.

1️⃣ Member_1 스타일 컴포넌트

| props | value | meaning |
| ---------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
| **profImgUrl** | **string ( 기본 : "" )** | 프로필 이미지를 불러올 주소를 입력하면 정상적으로 불러옵니다. 정상적인 url 주소가 아니면, 기본 이미지가 렌더됩니다. ( 필수❌ ) |
| **name** | **string** | 환자의 이름을 입력합니다. ( 필수⭕ ) |
| **isMale** | **boolean** | true 의 값일경우, '남' 이 출력되고, 반대일 경우 '여' 가 출력됩니다. ( 필수⭕ ) |
| **membershipDuration** | **[number 6개]** | 배열안에 시작년도,시작월,시작일,종료년도,종료월,종료일 을 입력하면 '00.00.00 ~ 00.00.00'과 같은 형태로 렌더가 됩니다. ( 필수⭕ ) |
| **MembershipUses** | **[number 2개]** | 배열안에 남은진료횟수,총진료횟수를 입력하면, '0회 / 0회' 와 같은 형태로 렌더가 됩니다. ( 필수⭕ ) |
| **attendingPhysician** | **string** | 주치의 의 이름을 입력합니다. ( 필수⭕ ) |
| **publishDate** | **[number 3개]** | 배열안에 작성년도,작성월,작성일 을 입력하면, '2000-00-00' 와 같은 형태로 렌더가 됩니다. ( 필수⭕ ) |
| **isOutlined** | **boolean** | true 의 값일경우, 최상위 컴포넌트에 border 값이 렌더되고, 반대일 경우 출력되지 않습니다. ( 필수⭕ ) |

```jsx
<Cmp.Item.MemberOne
 publishDate={[2021, 10, 10]}
 membershipDuration={[2021, 10, 10, 2021, 10, 10]}
 membershipUses={[1, 10]}
 name={'이광렬'}
 attendingPhysician={'김철수'}
 isMale={true}
 isOutlined={true}
/>
```

2️⃣ Member_3 스타일 컴포넌트

| props | value | meaning |
| ---------------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
| **profImgUrl** | **string ( 기본 : "" )** | 프로필 이미지를 불러올 주소를 입력하면 정상적으로 불러옵니다. 정상적인 url 주소가 아니면, 기본 이미지가 렌더됩니다. ( 필수❌ ) |
| **name** | **string** | 환자의 이름을 입력합니다. ( 필수⭕ ) |
| **phoneNumber** | **string** | 번호를 - 없이 입력하면, '010-0000-0000' 와 같은 형태로 렌더가 됩니다. -> 한국에서 사용하는 국번아니면 에러발생 ( 필수⭕ ) |
| **starRating** | **number** | 별점을 입력하면 해당 별점에 맞는 이미지와 문자열이 출력됩니다. ( 필수⭕ ) |
| **attendingPhysician** | **string** | 주치의 의 이름을 입력합니다. ( 필수⭕ ) |
| **publishDate** | **[number 3개]** | 배열안에 작성년도,작성월,작성일 을 입력하면, '2000-00-00' 와 같은 형태로 렌더가 됩니다. ( 필수⭕ ) |
| **isOutlined** | **boolean** | true 의 값일경우, 최상위 컴포넌트에 border 값이 렌더되고, 반대일 경우 출력되지 않습니다. ( 필수⭕ ) |

```jsx
<Cmp.Item.MemberThree
 publishDate={[2021, 8, 1]}
 name={'이광렬'}
 phoneNumber={'01022223333'}
 starRating={4.5}
 attendingPhysician={'김철수'}
 isOutlined={true}
/>
```

3️⃣ Staff_1 스타일 컴포넌트

| props | value | meaning |
| --------------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
| **profImgUrl** | **string ( 기본 : "" )** | 프로필 이미지를 불러올 주소를 입력하면 정상적으로 불러옵니다. 정상적인 url 주소가 아니면, 기본 이미지가 렌더됩니다. ( 필수❌ ) |
| **name** | **string** | 스태프(주치의)의 이름을 입력합니다. ( 필수⭕ ) |
| **phoneNumber** | **string** | 번호를 - 없이 입력하면, '010-0000-0000' 와 같은 형태로 렌더가 됩니다. -> 한국에서 사용하는 국번아니면 에러발생 ( 필수⭕ ) |
| **starRating** | **number** | 별점을 입력하면 해당 별점에 맞는 문자열이 출력됩니다. ( 필수⭕ ) |
| **memberCount** | **number** | 담당환자의 수 를 입력합니다. ( 필수⭕ ) |
| **memo** | **string** | 메모할 텍스트를 입력합니다. ( 필수⭕ ) |
| **isOutlined** | **boolean** | true 의 값일경우, 최상위 컴포넌트에 border 값이 렌더되고, 반대일 경우 출력되지 않습니다. ( 필수⭕ ) |

```jsx
<Cmp.Item.StaffOne
 name={'이광렬'}
 phoneNumber={'01022223333'}
 starRating={4.5}
 memberCount={10}
 memo="메모"
 isOutlined={true}
/>
```

4️⃣ Record 스타일 컴포넌트

| props | value | meaning |
| ---------------------- | ---------------- | --------------------------------------------------------------------------------------------------- |
| **name** | **string** | 스태프(주치의)의 이름을 입력합니다. ( 필수⭕ ) |
| **publishDate** | **[number 3개]** | 배열안에 작성년도,작성월,작성일 을 입력하면, '2000-00-00' 와 같은 형태로 렌더가 됩니다. ( 필수⭕ ) |
| **templateName** | **string** | 템플릿 명을 입력합니다. ( 필수⭕ ) |
| **attendingPhysician** | **string** | 담당 주치의 이름을 입력합니다. ( 필수⭕ ) |
| **isOutlined** | **boolean** | true 의 값일경우, 최상위 컴포넌트에 border 값이 렌더되고, 반대일 경우 출력되지 않습니다. ( 필수⭕ ) |

```jsx
<Cmp.Item.Record
 publishDate={[2021, 10, 10]}
 templateName={'템플릿 이름'}
 attendingPhysician={'김철수'}
 isOutlined={true}
/>
```

5️⃣ TheraphyCenter 스타일 컴포넌트

| props | value | meaning |
| --------------- | ---------------- | --------------------------------------------------------------------------------------------------- |
| **publishDate** | **[number 3개]** | 배열안에 작성년도,작성월,작성일 을 입력하면, '2000-00-00' 와 같은 형태로 렌더가 됩니다. ( 필수⭕ ) |
| **videoName** | **string** | 비디오 명을 입력합니다. ( 필수⭕ ) |
| **uploadCount** | **number** | 업로드 비디오 횟수를 입력합니다. ( 필수⭕ ) |
| **isOutlined** | **boolean** | true 의 값일경우, 최상위 컴포넌트에 border 값이 렌더되고, 반대일 경우 출력되지 않습니다. ( 필수⭕ ) |

```jsx
<Cmp.Item.TheraphyCenter
 publishDate={[2021, 10, 10]}
 videoName="비디오 이름"
 uploadCount={10}
 isOutlined={true}
/>
```

6️⃣ Message 스타일 컴포넌트

| props | value | meaning |
| --------------- | ---------------- | --------------------------------------------------------------------------------------------------- |
| **publishDate** | **[number 3개]** | 배열안에 작성년도,작성월,작성일 을 입력하면, '2000-00-00' 와 같은 형태로 렌더가 됩니다. ( 필수⭕ ) |
| **text** | **string** | 후기 텍스트를 입력합니다. ( 필수⭕ ) |
| **starRating** | **number** | 별점을 입력하면 해당 별점에 맞는 이미지가 출력됩니다. ( 필수⭕ ) |
| **isOutlined** | **boolean** | true 의 값일경우, 최상위 컴포넌트에 border 값이 렌더되고, 반대일 경우 출력되지 않습니다. ( 필수⭕ ) |

```jsx
<Cmp.Item.Message
 publishDate={[2021, 10, 10]}
 text="메시지"
 starRating={4.5}
 isOutlined={true}
/>
```

Item

사용자가 최대 **4개의 아이템 리스트**를 넣으면, 그에 해당하는 컴포넌트가 출력됩니다.

| props | value | meaning |
| ----------------- | ------------------------------ | ----------------------------------------------------------------------------------------- |
| **$headerType** | **'NavigationBar' , 'AppBar'** | Display의 props 로, 상단에 어떤 header 가 존재하는지에 따라 마진값이 다릅니다. ( 필수❌ ) |
| **item** | **string** | List 의 props 로, 리스트 아이템 명 ( 필수⭕ ) |
| **[key: string]** | **any** | List 의 props 로, 리스트에 어떠한 속성도 내려줄수있다. ( 필수⭕ ) |

```jsx
function App() {
 return (
 <>
 <Cmp.PopupMenu.Display $headerType={'NavigationBar'}>
 <Cmp.PopupMenu.List item="List 1" onClick={() => alert('List 1')} />
 <Cmp.PopupMenu.List item="List 2" onClick={() => alert('List 2')} />
 <Cmp.PopupMenu.List item="List 3" onClick={() => alert('List 3')} />
 <Cmp.PopupMenu.List item="List 4" onClick={() => alert('List 4')} />
 </Cmp.PopupMenu.Display>
 </>
 );
}
```

PopupMenu

사용자가 **최대 10개의 탭메뉴**를 넣을수 있습니다.
선택된 tab 은 하나만 표시할수있습니다. 또한, 탭메뉴를 지정해두고 실제 UI 상에서 렌더될 탭메뉴도 필수로 선택해주셔야 합니다.

| props | value | meaning |
| --------------- | ----------------------------- | -------------------------------------------------------------------- |
| **tapList** | **(string 혹은 undefined)[]** | 최대 10개의 탭메뉴를 지정할 수 있습니다. ( 필수⭕ ) |
| **selected** | **number** | 선택될 탭메뉴 인덱스 번호를 선택합니다. ( 필수⭕ ) |
| **showMenuIdx** | **number[]** | 보여질 탭메뉴의 인덱스 번호를 선택하여 배열에 입력합니다. ( 필수⭕ ) |
| **onTabClick** | **(idx: number) => void** | onClick 함수를 내려줍니다. ( 필수⭕ ) |

```jsx
function App() {
 const tapList = ['Home', 'Profile', 'Settings'];
 const showMenuIdx = [0, 1, 2];
 const [selected, setSelected] = useState(0);
 const handleTabClick = (index: number) => {
 // index에 따라 특정 로직 수행
 switch (index) {
 }
 };
 return (
 <>
 <Fnd.FoundationGlobalStyles />
 <Fnd.LayoutStyles>
 <Cmp.Tabs
 tapList={tapList}
 selected={selected}
 showMenuIdx={showMenuIdx}
 onTabClick={handleTabClick} // 이벤트 핸들러 전달
 />
 </Fnd.LayoutStyles>
 </>
 );
}

export default App;
```

Tabs

원하는 페이지를 입력하면 형식에 맞는 네비게이션바가 나타납니다.

#### NavigationBottom

| props | value | meaning |
| ------------ | ----------- | ------------------------------------------------------------------------------------------------ |
| **selected** | **string** | 선택될 메뉴리스트 이름('home', 'reserve', 'member', 'center', 'mypage')을 입력합니다. ( 필수⭕ ) |
| **isLabel** | **boolean** | 메뉴 리스트의 라벨(이름)을 표시합니다. ( 필수⭕ ) |

```jsx
<Cmp.NavBarBottom selected={'home'} isLabel={true} />
```

Navigation Bottom

원하는 페이지를 입력하면 형식에 맞는 네비게이션바가 나타납니다.

#### NavBarTop

| props | value | meaning |
| -------------- | ------------------------ | ----------------------------------------------------------------- |
| **page** | **'default','menulist'** | 입력하면 해당 페이지에 맞는 네비게이션바가 지정됩니다. ( 필수⭕ ) |
| **menuList** | **string[]** | 메뉴 리스트를 등록할 수 있습니다. ( 필수❌ ) |
| **selected** | **number** | 선택될 메뉴리스트 인덱스 번호를 선택합니다. ( 필수❌ ) |
| **memberName** | **string** | 로그인 된 사용자의 이름을 입력합니다. ( 필수❌ ) |

```jsx
<Cmp.NavBarTop
 page="menulist"
 menuList={['내 정보', '공지사항', '앱 설정', '운영데이터']}
 selected={0}
 memberName="박관리자01"
/>
```

Navigation Top

원하는 사이즈와 타입에 따른 앱바가 나타납니다.

0️⃣ 공통 스타일

| props | value | meaning |
| ------------ | ---------------------------------------------- | ------------------------------------------------------------------------------------ |
| **size** | **'large','medium','full' ( 기본 : 'large' )** | 서버에 저장되어있는 아이콘 명을 입력하면 정상적으로 작동이 됩니다. ( 필수❌ ) |
| **pagename** | **string** | 원하는 페이지명을 입력하면 앱바에 나타납니다. ( 필수⭕ ) |
| **type** | **'icon', 'button', 'plain'** | 서버에 저장되어있는 아이콘 명을 입력하면 앱바 우측에 아이콘이 나타납니다. ( 필수❌ ) |

```jsx
<Cmp.AppBar.Wrapper size="full" pagename="페이지네임" type="button" />
```

1️⃣ Icon 스타일 컴포넌트

| props | value | meaning |
| -------- | ---------- | ----------------------------------------------------------------------------- |
| **name** | **string** | 서버에 저장되어있는 아이콘 명을 입력하면 정상적으로 작동이 됩니다. ( 필수⭕ ) |

```jsx
<Cmp.AppBar.Wrapper pagename="페이지네임" type="icon">
 <Cmp.AppBar.Icon name="add_24px" />
 <Cmp.AppBar.Icon name="bin_24px" />
</Cmp.AppBar.Wrapper>
```

2️⃣ Button 스타일 컴포넌트

| props | value | meaning |
| --------- | ---------- | ----------------------------------------------------- |
| **text** | **string** | 원하는 버튼명을 입력합니다. ( 필수⭕ ) |
| **count** | **string** | 카운트 되는 숫자를 문자 형태로 넣어줍니다. ( 필수❌ ) |

```jsx
<>
 <Cmp.AppBar.Wrapper pagename="페이지네임" type="button">
 <Cmp.AppBar.Button text="버튼1" />
 <Cmp.AppBar.Button text="버튼2" />
 </Cmp.AppBar.Wrapper>

 <Cmp.AppBar.Wrapper pagename="페이지네임" type="button">
 <Cmp.AppBar.Button text="버튼" count="10" />
 </Cmp.AppBar.Wrapper>
</>
```

AppBar

원하는 레이아웃 스타일, 텍스트 타입, 텍스트/이미지의 위치를 설정한 배너를 만들수 있습니다.

| props | value | meaning |
| -------------- | -------------------------------------- | ----------------------------------------------------------------------------- |
| **type** | **'fill','outline' ( 기본 : 'fill' )** | 서버에 저장되어있는 아이콘 명을 입력하면 정상적으로 작동이 됩니다. ( 필수❌ ) |
| **normalText** | **string** | 텍스트를 입력하면 일반 두께의 텍스트가 나타납니다. ( 필수❌ ) |
| **boldText** | **string** | 텍스트를 입력하면 두꺼운 두께의 텍스트가 나타납니다. ( 필수❌ ) |
| **src** | **string** | 원하는 이미지 주소를 입력하면 이미지가 나타납니다. ( 필수❌ ) |
| **$reverse** | **boolean ( 기본 : false )** | true값을 넣으면 텍스트와 이미지의 위치가 좌우로 반전됩니다. ( 필수❌ ) |
| **$manual** | **boolean ( 기본 : true )** | false값을 넣으면 이미지를 배너의 크기에 맞춰 넣을 수 있습니다. ( 필수❌ ) |

```jsx
<Cmp.Banners
 normalText="시리어스 근적외선"
 boldText="대량구매 특별할인 최대 40%"
 src={이미지파일}
/>
```

Banners

유형의 비디오/이미지의 썸네일을 만들수 있습니다.

#### 1️⃣ VideoThumbnail

| props | value | meaning |
| --------------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
| **state** | **'normal', 'delete', 'select', 'video_play', 'error' ( 기본 : 'normal' )** | 원하는 유형의 상태를 입력하면 해당 유형의 스타일이 썸네일에 적용됩니다. ( 필수❌ ) |
| **src** | **string** | 원하는 이미지 주소를 입력하면 이미지가 나타납니다. ( 필수❌ ) |
| **runningtime** | **number** | **ms**단위로 숫자가 입력되면 **분:초**의 형태로 썸네일 우측 하단에 표시됩니다. 값이 없을경우 **0:00** 으로 표시됩니다. ( 필수❌ ) |

```jsx
<Cmp.VideoThumbnail src={이미지주소} state="normal" runningtime={65200} />
```

#### 2️⃣ ImageThumbnail

| props | value | meaning |
| --------- | ------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
| **state** | **'normal', 'delete', 'select', 'error' ( 기본 : 'normal' )** | 원하는 유형의 상태를 입력하면 해당 유형의 스타일이 썸네일에 적용됩니다. ( 필수❌ ) |
| **src** | **string** | 원하는 이미지 주소를 입력하면 이미지가 나타납니다. ( 필수⭕ ) |

```jsx
<Cmp.ImageThumbnail src={이미지주소} state="error" />
```

Thumbnails

지정된 너비와 텍스트에 따라 가변 높이값을 가지는 **Dialog**를 사용할 수 있습니다. 
넘치는 텍스트의 경우 말줄임 스타일을 주어 일정 높이를 벗어나지 못합니다.(마우스 오버시 모든 내용을 확인할 수 있습니다.) 
**Dialog**의 버튼을 사용하여, 유저가 커스텀 이벤트를 발생시킬 수 있습니다. 
우측 상단의 닫기버튼을 클릭 시 실행할 로직은 함수의 형태로 넘겨주어야 합니다.

| props | value | meaning |
| ----------------- | -------------- | --------------------------------------------------------------- |
| **title** | **string** | 볼드체의 텍스트가 표시됩니다.( 필수⭕ ) |
| **description** | **string** | **title** 밑으로 텍스트가 표시됩니다.( 필수❌ ) |
| **onCloseEffect** | **() => void** | 우측 상단에 닫기 버튼을 누르면 실행됩니다.( 필수⭕ ) |
| **isOpen** | **boolean** | 해당 상태에 따라 다이얼로그의 렌더 여부가 결정됩니다.( 필수⭕ ) |

```jsx
<Cmp.Dialog.Display
 isOpen={BooleanState}
 title={'Title'}
 description={'Description'}
 onCloseEffect={onCloseDialog} // Custom Function
>
 <Cmp.Dialog.GrayButton onClick={...something custom logic...}>GrayBtn</Cmp.Dialog.GrayButton>
 <Cmp.Dialog.PriButton>PriBtn</Cmp.Dialog.PriButton>
</Cmp.Dialog.Display>
```

Dialog

유저의 클릭이벤트와 상호작용하는 **Dropdown** 컴포넌트입니다. 
두가지 유형의 **Dropdown** 컴포넌트를 사용할 수 있습니다.

- **Dropdown**

 | props | value | meaning |
 | --------------- | ---------------------------- | --------------------------------------------------------------------------------- |
 | **value** | **string** | 유저가 선택한 값과 바인딩되는 값입니다.( 필수⭕ ) |
 | **items** | **string[]** | 선택해야하는 목록의 값들 입니다.( 필수⭕ ) |
 | **title** | **string** | 어떤 드롭다운인지 설명해주는 상단에 표시되는 텍스트입니다.( 필수⭕ ) |
 | **placeholder** | **string** | 초기에 표시 될 텍스트입니다. **value**가 있다면 **value**가 표시됩니다.( 필수⭕ ) |
 | **onChange** | **(params: string) => void** | 리스트를 클릭 시 해당 값을 인자로 받는 함수입니다.( 필수⭕ ) |
 | **width** | **string** | 사용자가 지정해주는 너비값입니다.( 필수⭕ ) |
 | **disabled** | **boolean** | 사용가능 여부를 나타내는 값입니다. **true**이면 스타일도 바뀝니다.( 필수❌ ) |

```jsx
<Cmp.Dropdown
 title={'title'}
 placeholder={'placeholder'}
 value={value}
 items={items}
 onChange={(selected) => setValue(selected)}
 width="30rem"
 disabled={false}
></Cmp.Dropdown>
```

Dropdown General

유저의 클릭이벤트와 상호작용하는 Dropdown 컴포넌트입니다. 
두가지 유형의 Dropdown 컴포넌트를 사용할 수 있습니다.

- **ListDropdown**

 | props | value | meaning |
 | ------------ | ---------------------------- | ----------------------------------------------------------------------------- |
 | **category** | **string** | 좌측에 표시 될 대분류를 알려주는 텍스트입니다.( 필수⭕ ) |
 | **items** | **string[]** | 좌측에 표시 된 대분류에 속하는 값들입니다.( 필수⭕ ) |
 | **value** | **string** | 유저가 선택한 값과 바인딩되는 값입니다.( 필수⭕ ) |
 | **width** | **string** | 사용자가 지정해주는 너비값입니다.( 필수⭕ ) |
 | **onChange** | **(params: string) => void** | 리스트를 클릭 시 해당 값을 인자로 받는 함수입니다.( 필수⭕ ) |
 | **onClose** | **(params: string) => void** | 우측의 닫기 버튼 클릭 시 해당 리스트의 값을 인자로 받는 함수입니다.( 필수⭕ ) |

```jsx
<Cmp.ListDropdown
 category={'오른쪽 다리'}
 items={itemList}
 value={value}
 onChange={(selected) => onSelect(selected)}
 onClose={(selected) => onClose(selected)}
 width="31.3rem"
></Cmp.ListDropdown>
```

Dropdown List

사용자에게 알림사항을 하단에서 표시해주는 **Snackbar** 컴포넌트 입니다. 
제공되는 커스텀 훅인 **useSnackbar**와 함께 사용해야 합니다.(인자로는 **duration**을 받습니다) 

```ts
/**
 * 사용자가 스낵바 컴포넌트를 쉽게 쓸 수 있도록 만든 커스텀 훅입니다
 * Cmp에 같이 export되니 Cmp.useSnackbar로 사용할 수 있습니다
 * @param {number} ms - 스낵바의 알림 지속시간 입니다
 * @returns {[string, (string) => void]} [snackbarMessage, setSnackbarMessage] - [렌더할 메세지, 문자열을 입력받는 세터함수]
 */
function useSnackbar(ms) {}
```

컴포넌트에 제공되는 **duration**과 **useSnackbar**의 인자는 같은 값을 가져야 예상대로 동작합니다. 
**setSnackbarMessage**는 **string**을 인자로 받습니다. 
스낵바 UI의 렌더링 트리거는 **setSnackbarMessage**함수의 실행입니다.

| props | value | meaning |
| ------------ | ----------- | -------------------------------------------------------------------------------------------- |
| **message** | **string** | 유저에게 알려야 할 내용을 가진 텍스트입니다.( 필수⭕ ) |
| **duration** | **number** | 알림 지속시간 입니다. 단위는 **ms**입니다. 지속시간 뒤에 스낵바가 언마운트 됩니다.( 필수⭕ ) |
| **isAppbar** | **boolean** | **true**이면 하단과 **12px** 여백을 가지고, 아니면 **24px** 여백을 가집니다.( 필수⭕ ) |
| **width** | **string** | 스낵바가 가지는 너비값입니다. 설정이 없다면 **1024px**을 가집니다.( 필수❌ ) |

```jsx
import { Cmp } from 'pds-3-14';

// 사용자애 따라서 destructuring을 사용하여도 좋습니다
// const { Snackbar, useSnackbar } = Cmp;

// 안전한 렌더를 위한 전역상수 선언을 권고합니다
const SNACKBAR_DURATION = 5000;

const App = () => {
 const [snackbarMessage, setSnackbarMessage] =
 Cmp.useSnackbar(SNACKBAR_DURATION);

 return (
 <Cmp.Snackbar
 message={snackbarMessage}
 duration={SNACKBAR_DURATION}
 isAppbar={false}
 />
 );
};
```

Snackbar

사용자에게 입력을 받는 커스텀 **input** 컴포넌트 요소입니다. 
아래에 적힌 **props**를 제외하고도 **HTML input element**의 속성들을 모두 **props**로 내려줄 수 있습니다. 
(예시: **placeholder**, **onBlur**, **onChange**등 **input**의 기본속성들)

| props | value | meaning |
| ------------------- | ----------- | ---------------------------------------------------------------------------------------------- |
| **labelText** | **string** | 좌측 상단에 설명이 표시됩니다. 클릭 시 포커스 됩니다.( 필수⭕ ) |
| **inactiveMessage** | **string** | 부가설명의 내용을 가지고 하단에 회색으로 표시되는 텍스트입니다.( 필수❌ ) |
| **errorMessage** | **string** | 하단에 빨간색으로 표시되는 텍스트입니다. **isError**가 **true**일 때만 렌더됩니다.( 필수❌ ) |
| **successMessage** | **string** | 하단에 초록색으로 표시되는 텍스트입니다. **isSuccess**가 **true**일 때만 렌더됩니다.( 필수❌ ) |
| **isError** | **boolean** | 우측 상단에 닫기 버튼을 누르면 실행됩니다.( 필수❌ ) |
| **isSuccess** | **boolean** | 회색 버튼을 누르면 실행됩니다.( 필수❌ ) |

```js
<>
 <Cmp.TextField
 placeholder="이름을 입력해주세요"
 labelText="이름"
 value={userName}
 inactiveMessage={'10자 이상의 이름를 입력해주세요'}
 successMessage={'Success Message'}
 onBlur={(e) => setIsSuccess(validator(e.target.value))}
 onChange={(e) => setUserName(e.target.value)}
 isSuccess={isSuccess}
 />
</>
```

TextField

사용자가 시작날짜와 마지막날짜를 선택할수있는 캘린더 컴포넌트 요소입니다. 

| props | value | meaning |
| ------------ | ---------------------------------- | ---------------------------------------------------------------- | --- |
| **dates** | **[Date , Date ]** | 시작일과 종료일의 현재상태입니다.( useState 로 관리 ) ( 필수⭕ ) |
| **setDates** | **(dates: [Date, Date] ) => void** | dates 의 Setter 함수입니다.( useState 로 관리 ) ( 필수⭕ ) | |

```js
function App() {
 // 데이트의 상태관리
 const [dates, setDates] =
 (useState < [Date | null, Date | null]) | (null > [null, null]);

 return (
 <>
 <Fnd.FoundationGlobalStyles />
 <Fnd.LayoutStyles>
 <Cmp.CalendarStyle.CalendarWrapper>
 <Cmp.CalendarStyle.Calendar dates={dates} setDates={setDates} />
 <Cmp.CalendarStyle.ButtonWrapper>
 <Cmp.Button.Contained state="normal" size="medium">
 {'취소'}
 </Cmp.Button.Contained>
 <Cmp.Button.Contained state="enabled" size="medium">
 {'완료'}
 </Cmp.Button.Contained>
 </Cmp.CalendarStyle.ButtonWrapper>
 </Cmp.CalendarStyle.CalendarWrapper>
 </Fnd.LayoutStyles>
 </>
 );
}
```

Date Picker

선택하고 싶은 시간을 지정하여 사용할 수 있는 컴포넌트 입니다.

| props | value | meaning |
| ------------------ | --------------------------- | ----------------------------------------------------------------- |
| **onClickEffect** | **() => void** | 확인 버튼을 클릭 시 해당 값을 인자로 받는 함수입니다.( 필수:o: ) |
| **onCancelEffect** | **() => void** | 취소 버튼을 클릭 시 해당 값을 인자로 받는 함수입니다.( 필수:o: ) |
| **onChangeHour** | **(param: number) => void** | 시간을 변경하면 해당 숫자 값을 인자로 받는 함수입니다.( 필수:o: ) |
| **onChangeMinute** | **(param: number) => void** | 분을 변경하면 해당 숫자 값을 인자로 받는 함수입니다.( 필수:o: ) |

```jsx
<Cmp.TimeStyle
 onClickEffect={() => console.log('Clicked')}
 onCancelEffect={() => console.log('Clicked')}
 onChangeHour={(hour) => console.log(hour)}
 onChangeMinute={(minute) => console.log(minute)}
/>
```

Time Picker

두가지 스타일의 Floating Action Button을 선택하여 사용할 수 있습니다.

| props | value | meaning |
| ----------------- | -------------- | ---------------------------------------------------------- |
| **onClickEffect** | **() => void** | 버튼을 클릭 시 해당 값을 인자로 받는 함수입니다.( 필수⭕ ) |

1️⃣ Circle 스타일

```jsx
<Cmp.ButtonFAB.Circle
 onClickEffect={() => void}
/>
```

2️⃣ Round 스타일

```jsx
<Cmp.ButtonFAB.Round onClickEffect={() => void}>
 { '버튼' }
</Cmp.ButtonFAB.Round>
```

FAB Button

사용자가 원하는 스타일의 Cards 컴포넌트를 지정하여 불러와 사용합니다.

1️⃣ CalendarData

| props | value | meaning |
| ------------------ | ---------- | -------------------------------------------------------------- |
| **month** | **string** | Data의 해당 달을 표기합니다.( 필수⭕ ) |
| **name** | **string** | 고객의 이름을 표기합니다.( 필수⭕ ) |
| **totalschadule** | **number** | 고객의 해당 달의 총 스케쥴 건을 표기합니다.( 필수⭕ ) |
| **cancelschadule** | **number** | 고객의 해당 달의 총 스케쥴 취소 건을 표기합니다.( 필수⭕ ) |
| **cancel** | **number** | 고객의 해당 달의 총 스케쥴 취소 퍼센트를 표기합니다.( 필수⭕ ) |

```jsx
<Cmp.Cards.CalendarData
 month="이번 달"
 name="홍길동"
 totalschadule={100}
 cancelschadule={100}
 cancel={100}
/>
```

2️⃣ LinkLarge

| props | value | meaning |
| ----------------- | -------------- | -------------------------------------------------------------- |
| **title** | **string** | 볼드체의 텍스트가 표시됩니다.( 필수⭕ ) |
| **description** | **string** | **title** 밑으로 텍스트가 표시됩니다.( 필수⭕ ) |
| **thumbnail** | **string** | 썸네일에 사용될 이미지 주소 값을 넣어줍니다.( 필수⭕ ) |
| **onClickEffect** | **() => void** | LinkCard를 클릭 시 해당 값을 인자로 받는 함수입니다.( 필수⭕ ) |

```jsx

<Cmp.Cards.LinkLarge
 title='제목'
 description='설명'
 thumbnail='이미지 링크 주소'
 onClickEffect={() => void}
/>

```

3️⃣ LinkMedium

| props | value | meaning |
| ----------------- | -------------- | -------------------------------------------------------------- |
| **description** | **string** | 텍스트가 표시됩니다.( 필수⭕ ) |
| **thumbnail** | **string** | 썸네일에 사용될 이미지 주소 값을 넣어줍니다.( 필수⭕ ) |
| **onClickEffect** | **() => void** | LinkCard를 클릭 시 해당 값을 인자로 받는 함수입니다.( 필수⭕ ) |

```jsx

<Cmp.Cards.LinkMedium
 description='설명'
 thumbnail='이미지 링크 주소'
 onClickEffect={() => void}
/>

```

4️⃣ LinkMediumDel

| props | value | meaning |
| ----------------- | -------------- | -------------------------------------------------------------- |
| **description** | **string** | 텍스트가 표시됩니다.( 필수⭕ ) |
| **thumbnail** | **string** | 썸네일에 사용될 이미지 주소 값을 넣어줍니다.( 필수⭕ ) |
| **onClickEffect** | **() => void** | LinkCard를 클릭 시 해당 값을 인자로 받는 함수입니다.( 필수⭕ ) |
| **onDelEffect** | **() => void** | 닫기버튼을 클릭 시 해당 값을 인자로 받는 함수입니다.( 필수⭕ ) |

```jsx

<Cmp.Cards.LinkMediumDel
 description='설명'
 thumbnail='이미지 링크 주소'
 onClickEffect={() => void}
 onDelEffect={() => void}
/>

```

5️⃣ OptionIn

| props | value | meaning |
| --------------- | ---------- | ----------------------------------------------- |
| **title** | **string** | 볼드체의 텍스트가 표시됩니다.( 필수⭕ ) |
| **description** | \*\*string | title\*\* 밑으로 텍스트가 표시됩니다.( 필수⭕ ) |

```jsx
<Cmp.Cards.OptionIn title="제목" description="설명" />
```

6️⃣ OptionAc

| props | value | meaning |
| --------------- | ---------- | ----------------------------------------------- |
| **title** | **string** | 볼드체의 텍스트가 표시됩니다.( 필수⭕ ) |
| **description** | \*\*string | title\*\* 밑으로 텍스트가 표시됩니다.( 필수⭕ ) |

```jsx
<Cmp.Cards.OptionAc title="제목" description="설명" />
```

Cards

사용자가 원하는 모양과 색깔을 지정하여 Label 컴포넌트를 불러와 사용할 수 있습니다.

| props | value | meaning |
| ------------- | -------------------------------------- | ------------------------------------- |
| **type** | **Rectangle**, **Round** | 라벨의 모양을 선택합니다.( 필수⭕ ) |
| **bgcolor** | **Blue**, **Gray**, **Green** | 라벨의 배경색을 선택합니다.( 필수⭕ ) |
| **fontcolor** | **Blue**, **Gray**, **Green**, **Red** | 라벨의 글씨색을 선택합니다.( 필수⭕ ) |

1️⃣ Rectangle 스타일

```jsx
<Cmp.Label type="Rectangle" bgcolor="Blue" fontcolor="Blue">
 {'라벨'}
</Cmp.Label>
```

2️⃣ Round 스타일

```jsx
<Cmp.Label type="Round" bgcolor="Blue" fontcolor="Blue">
 {'라벨'}
</Cmp.Label>
```