React Native UI

닥터차 앱을 위한 React Native UI 컴포넌트 라이브러리 입니다.

업데이트

• v1.0.0 : 2021.06.21
• v1.1.0 : 2021.06.25
  • 닥터차 2.0용 UI 업데이트 (1차)
• v1.2.0 : 2021.07.22
  • 신규 컴포넌트 구현
    • Toast
    • LoadingDots
    • Alert
    • Tooltip
  • 기존 컴포넌트 수정
    • Button, Icon, Typography
    • TextInput
  • 사용하지 않는 컴포넌트 제거
• v1.2.1 : 2021.07.28
  • import, export 구조 정리
  • 코드 리팩터링
• v1.2.2 : 2021.08.04
  • Tooltip 업데이트
• v1.2.3 : 2021.08.16
  • 1차 QA 수정사항 반영
• v1.2.4 : 2021.08.24
  • RNDebugger 관련 이슈 해결 (dependency 문제)
  • 사용하지 않는 아이콘 제거
• v2.0.0 : 2021.10.13
  • Markdown 업데이트
  • TextInput 업데이트
• v2.0.2 : 2021.10.14
  • Markdown 링크 연결 이슈 해결
  • Toast 컴포넌트 제거
• v2.0.3 : 2021.10.14
  • ProgressiveImage refresh 기능 추가
• v2.0.4 : 2021.11.30
  • ProgressiveImage source변경시 리렌더 처리 추가
• v2.0.5 : 2021.12.28
  • Tooltip color, textStyle prop 추가
• v2.0.6 : 2022.06.20
  • Markdown 업데이트(Heading, Italic, Link, Mention, Hashtag 지원)
• v2.0.7 : 2022.06.21
  • lib 배포 이슈 핫픽스
• v2.0.8 : 2022.08.03
  • Markdown 업데이트(PhoneNumber 0507, 1588 번호 지원)
• v2.1.0 : 2022.09.07
  • Message Atom 삭제
  • NotoSans KR 폰트 삭제 (Pretendard 본 앱 반영을 위한 삭제)
  • 사용하지 않는 라이브러리 삭제

사용 가이드라인

React Native UI를 사용할 프로젝트에서 설정하세요.

1. 구글 Fonts에서 NotoSansKR 폰트를 다운로드합니다. (우측 상단 Download family)
2. src/assets/fonts폴더에 다운로드한 폰트파일을 넣습니다.
3. react-native.config.js을 다음과 같이 설정합니다.

module.exports = {
  assets: ['./src/assets/fonts/'],
};

4. react-native link 명령어를 실행합니다.

개발 가이드라인

이 가이드라인은 당신이 React Native 개발 환경을 정상적으로 구동시킬 수 있다고 가정합니다.

총 3개의 터미널 탭이 필요합니다.

첫번째 탭에 하단의 명령어를 실행하세요.

git clone https://github.com/Autopedia/react-native-ui.git
cd react-native-ui
yarn install
npx react-native link
cd ios
npx pod-install
cd ..
yarn storybook

성공적으로 실행되었다면, 브라우저에 storybook UI가 열립니다.

두번째 탭에 다음과 같이 명령어를 실행하세요.

yarn start

해당 명령어는 React Native metro 서버를 실행합니다.

마지막 탭에 다음과 같이 명령어를 실행하세요.

yarn ios #IOS
yarn android #Android

이 명령어는 프로젝트를 빌드하여 시뮬레이터에 storybook UI를 실행합니다.

테스트 가이드라인

모든 테스트 코드를 실행하려면,

yarn test

특정한 테스트 코드를 실행하려면,

yarn test path/to/test/file

테스트 스냅샷을 업데이트 하려면,

yarn test -u

코드 커버리지를 보려면,

yarn test --coverage

규칙

• master/develop 브랜치에 직접 커밋 금지. 반드시 다른 브랜치에 작업하시고 PR을 만들어주세요.
• 반드시 개발 후에 테스트 해주세요. 테스트 코드를 업데이트하지 않는 한, 모든 테스트를 통과해야합니다.
• 코드 커버리지는 반드시 이전 이상이어야 합니다. 불가피한 경우가 생겼을 경우, PR에 기술해주세요.
• 만일 테스트 코드를 업데이트 했다면 어떤 테스트를 수정했는지, 왜 수정했는지를 PR에 기술해주세요.