Skip to content

uoslife/uoslife-library

Repository files navigation

Uoslife-library

  • 시대생 프로덕트에서 공통적으로 사용하는 Design System, custom react hook, webview 등의 기능을 관리하는 라이브러리입니다.

Stack

Installing Dependencies

$ pnpm install

소개

Design-system

  • 시대생팀에서 만드는 모든 서비스에서 사용자에게 일관된 경험을 제공하기 위해 만들어진 디자인 시스템을 제공합니다.

React

  • 시대생팀 프로덕트에서 자주 사용하는 유용한 hooks를 관리합니다.

Webview

  • Native와 Webview 서비스 간 정보 통신을 위한 Bridge 환경설정을 제공하는 라이브러리입니다.

배포 및 사용

배포 방법

  1. 관련 이슈를 해당 repository에 등록합니다. 접두어는 다음과 같습니다.
    • [Common], [Design-system], [React], [Webview]
  2. 해당 이슈명으로 branch를 생성한 다음 작업합니다.
    • develop branch에서 새 feature branch를 생성합니다.
    • 브랜치 명은 다음과 같이 작성합니다.
    • (예시) feat/common_#(이슈번호)
  3. (Design-system 작업의 경우) 작업시 아래 명령어로 스토리북을 확인할 수 있습니다.
$ lerna run storybook --scope @uoslife/design-system
  1. 작업 PR을 올리고 review를 request합니다. PR의 target branch는 'publish' branch입니다.
  2. approve되었다면 publish branch에 자동으로 배포가 진행됩니다.
  3. 성공적으로 배포가 완료되었다면 publish branch에서 main branch로 병합합니다.
  4. (Design-system) chromatic 배포 CI가 자동으로 진행됩니다.
  • 배포 완료된 패키지는 이 곳에서 확인할 수 있습니다.

사용 방법

Design system

  • 사용 예시는 아래와 같습니다.
import { Txt, colors } from '@uoslife/design-system' // native 환경
import { Txt, colors } from '@uoslife/design-system/web' // web 환경

webview

  • webview 프로젝트에서 아래 코드를 작성하여 사용할 수 있습니다.
import { installUoslifeDriver, makeUoslifeBridge } from "@uoslife/webview";

const { driver } = installUoslifeDriver();
export const uoslifeBridge = makeUoslifeBridge({ driver });