# mobile-ui-component

> 이 프로젝트는 react-native-cli를 바탕으로 제작됐습니다.
> 현재 myhyundai-ui-components로 배포 중 입니다.
>
> > 2022-03-21 batman update

## Getting Started

```
npm install myhyundai-ui-components
```

```javascript
import { Button } from 'myhyundai-ui-components';

const App = () => {
  <View>
    <Button/>
  </View>>
};
```

### Font

- 현재 HyundaiSansText, HyundaiSansHead 폰트를 사용하고 있습니다.
- project root 경로에 react-native.config.js 파일을 생성 후 아래 코드를 복사 붙여넣기 후 저장합니다.

```javascript
module.exports = {
  assets: ['./node_modules/myhyundai-ui-components/src/assets/font'],
};
```

- 터미널 project root 경로에서 아래 coomand를 실행합니다.

```
npx react-native link
```

- 아래 스크린샷과 같은 결과가 나오면 폰트 적용이 끝났습니다.

![font](https://user-images.githubusercontent.com/101547326/159271293-b7f420ec-cf5a-43a8-8988-cdc48da219d0.png)

## Folder Structure

```bash
└─src
   ├─assets
   ├─components
   ├─utils
   └─styles.js
```

### assets

- image, font 등의 assets 파일을 관리하는 폴더입니다. (icon image는 components/icon/img 안에 있습니다.)

### components

- component를 관리하는 폴더입니다.

### utils

- component 구성에 필요한 유틸을 보관하는 폴더입니다.

### styles.js

- global style을 관리하는 파일입니다.

## Component

### atoms

- [Avatar](#avatar)
- [BottomSheet](#bottomsheet)
- [Button](#button)
- [Calendar](#calendar)
- [CheckBox](#checkbox)
- [Container](#container)
  - Rowcontainer
- [Divider](#divider)
  - Divider
  - TimeDivider
  - DottedDivider
- [Icon](#icon)
- [Input](#input)
- [Modal](#modal)
- [Radio](#radio)
- [Screen](#screen)
- [TabBar](#tabbar)
- [Text](#text)
- [Toggle](#toggle)
- [TopNavigation](#topnavigation)

---

#### Avatar

#### BottomSheet

#### Button

#### Calendar

#### CheckBox

#### Container

#### Divider

#### Icon

#### Input

#### Modal

#### Radio

#### Screen

#### TabBar

#### Text

#### Toggle

#### TopNavigation

---

dependency

```
"dependencies": {
    "lottie-ios": "^3.2.3",
    "lottie-react-native": "^5.0.1",
    "moment": "^2.29.1",
    "react": "17.0.2",
    "react-native": "0.67.5",
    "react-native-confirmation-code-field": "^7.3.0",
    "react-native-device-info": "^10.3.0",
    "react-native-fast-image": "^8.6.1",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-shimmer-placeholder": "^2.0.9",
    "react-native-iphone-screen-helper": "^2.1.1"
  }
```