Ocean Road
가이드
컴포넌트
가이드
컴포넌트

설치 (Getting Started)

패키지 설치

# pnpm
pnpm add @coldsurf/ocean-road

# npm
npm install @coldsurf/ocean-road

# yarn
yarn add @coldsurf/ocean-road

Peer Dependencies 설치

필수

pnpm add @emotion/css @emotion/react @emotion/styled
패키지 버전 용도
@emotion/css ^11.10.6 CSS-in-JS 스타일링
@emotion/react ^11.10.6 Emotion React 통합
@emotion/styled ^11.10.6 styled 컴포넌트

진입점 (Entry Points)

진입점 import 경로 용도
기본 (웹) @coldsurf/ocean-road React 웹 컴포넌트
Next.js @coldsurf/ocean-road/next Next.js 전용 컴포넌트

빠른 시작

1. ColorSchemeProvider 설정

앱 최상단에서 ColorSchemeProvider로 트리를 감쌉니다.

import { ColorSchemeProvider } from '@coldsurf/ocean-road'

export default function App({ children }: { children: React.ReactNode }) {
  return (
    <ColorSchemeProvider colorScheme="light">
      {children}
    </ColorSchemeProvider>
  )
}
prop 타입 기본값 설명
colorScheme 'light' | 'dark' | 'userPreference' 'light' 초기 색상 테마

2. 컴포넌트 사용

import { Button, Text } from '@coldsurf/ocean-road'

export default function MyPage() {
  return (
    <>
      <Text weight="bold">Hello, Ocean Road</Text>
      <Button variant="indigo" onClick={() => alert('clicked!')}>
        시작하기
      </Button>
    </>
  )
}

3. Next.js 전용 컴포넌트 사용

./next 진입점의 컴포넌트는 반드시 해당 경로로 import해야 합니다.

import { AppHeader, RouteLoading } from '@coldsurf/ocean-road/next'
ON THIS PAGE