빠른 시작

orbit-core 사용하기

import { createSafeContext, SwitchCase, Divided } from '@liner-engineering/orbit-core';
import { getCdnUrl } from '@liner-engineering/orbit-core';
import { overlay } from '@liner-engineering/orbit-core';

React 유틸리티 예시

import { SwitchCase } from '@liner-engineering/orbit-core';

function StatusBadge({ status }: { status: 'active' | 'inactive' | 'pending' }) {
  return (
    <SwitchCase
      value={status}
      caseBy={{
        active: <span style={{ color: 'green' }}>활성</span>,
        inactive: <span style={{ color: 'gray' }}>비활성</span>,
        pending: <span style={{ color: 'orange' }}>대기중</span>,
      }}
    />
  );
}

orbit-app 사용하기

import { TenantRouter, Tenant } from '@liner-engineering/orbit-app/tenant';
import { useLinerTouchLog } from '@liner-engineering/orbit-app/analytics';

테넌트 라우팅 예시

import { TenantRouter, Tenant } from '@liner-engineering/orbit-app/tenant';

const tenantRouter = new TenantRouter({
  appHostname: 'app.liner.com',
  scholarHostname: 'scholar.liner.com',
});

// Scholar로 이동
tenantRouter.push(Tenant.Scholar, {
  path: '/search',
  query: { q: 'machine learning' },
  gatewayLogParams: {
    /* ... */
  },
});

orbit-kit 사용하기

import { Responsive } from '@liner-engineering/orbit-kit';

반응형 컴포넌트 예시

import { Responsive } from '@liner-engineering/orbit-kit';

function Layout() {
  return (
    <>
      <Responsive.Mobile>
        <MobileHeader />
      </Responsive.Mobile>
      <Responsive.Desktop>
        <DesktopHeader />
      </Responsive.Desktop>
    </>
  );
}