next-channel-lib v0.0.43

사용 방법

app 라우터 layout.tsx 파일 설정

import ClientInitializer, { Spinner } from 'next-channel-lib';

  return (
    ...
    <ClientInitializer spinner={<Spinner size={100} />}>
      ...
        {children}
      ...
    </ClientInitializer>
    ...
  )

  또는

  return (
    ...
    <ClientInitializer>
      ...
        {children}
      ...
    </ClientInitializer>
    ...
  )

플랫폼 구분 출력

심플한 플랫폼 구분

import { PlatformDesktop, PlatformMobile } from 'next-channel-lib/components';


  return (
    ...
    <PlatformDesktop>
      <p>PC에서만 보이는 컴포넌트</p>
    </PlatformDesktop>
    <PlatformMobile>
      <p>모바일에서만 보이는 컴포넌트</p>
    </PlatformMobile>
    ...
  )

카테고리 플랫폼 구분

import {
  PlatformCatetoryPC,
  PlatformCategoryMobileWeb,
  PlatformCategoryMobileApp
} from 'next-channel-lib/components';


  return (
    ...
    <PlatformCatetoryPC>
        <p>PC에서만 보이는 컴포넌트</p>
    </PlatformCatetoryPC>
    <PlatformCategoryMobileWeb>
      <p>모바일 웹에서만 보이는 컴포넌트</p>
    </PlatformCategoryMobileWeb>
    <PlatformCategoryMobileApp>
      <p>모바일 앱에서만 보이는 컴포넌트</p>
    </PlatformCategoryMobileApp>
    ...
  )

구체적인 플랫폼 구분

import {
  PlatformAppIos,
  PlatformAppAndroid,
  PlatformWebIos,
  PlatformWebAndroid,
  PlatformWebPcWindows,
  PlatformWebPcEtc
} from 'next-channel-lib/components';


  return (
    ...
      <PlatformAppIos>
        <p>App IOS</p>
      </PlatformAppIos>
      <PlatformAppAndroid>
        <p>App Android</p>
      </PlatformAppAndroid>
      <PlatformWebIos>
        <p>Web IOS</p>
      </PlatformWebIos>
      <PlatformWebAndroid>
        <p>Web Android</p>
      </PlatformWebAndroid>
      <PlatformWebPcWindows>
        <p>Web PC Windows</p>
      </PlatformWebPcWindows>
      <PlatformWebPcEtc>
        <p>Web PC Etc</p>
      </PlatformWebPcEtc>
    ...
  )

플랫폼 API 사용법

준비중