Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 146 additions & 0 deletions apps/landing/src/app/(detail)/docs/installation/page.ko.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
export const metadata = {
title: '설치',
alternates: {
canonical: '/ko/docs/installation',
languages: {
en: '/docs/installation',
ko: '/ko/docs/installation',
'x-default': '/docs/installation',
},
},
}

# 설치

## @devup-ui/react 설치

프로젝트 디렉터리에서 npm으로 패키지를 설치합니다.

```bash
npm install @devup-ui/react
```

### Next.js에서 Devup UI 사용하기

Next.js를 사용한다면 Next.js 플러그인을 설치합니다.

```bash
npm install @devup-ui/next-plugin
```

플러그인을 설치한 후 Next.js 프로젝트에 다음과 같이 적용합니다.

```js
// next.config.js

import { DevupUI } from '@devup-ui/next-plugin'

export default DevupUI({})
```

### Vite에서 Devup UI 사용하기

Vite를 사용한다면 Vite 플러그인을 설치합니다.

```bash
npm install @devup-ui/vite-plugin
```

플러그인을 설치한 후 Vite 프로젝트에 다음과 같이 적용합니다.

```ts
import { DevupUI } from '@devup-ui/vite-plugin'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
plugins: [react(), DevupUI()],
})
```

Devup UI로 UI 라이브러리를 개발하는 경우, 라이브러리 모드를 사용할 수 있습니다.

```ts
import { DevupUI } from '@devup-ui/vite-plugin'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
plugins: [
react(),
DevupUI({
// CSS를 추출하지 않습니다
extractCss: false,
}),
],
})
```

### Rsbuild에서 Devup UI 사용하기

Rsbuild를 사용한다면 Rsbuild 플러그인을 설치합니다.

```bash
npm install @devup-ui/rsbuild-plugin
```

플러그인을 설치한 후 Rsbuild 프로젝트에 다음과 같이 적용합니다.

```js
// rsbuild.config.mjs

import { DevupUIRsbuildPlugin } from '@devup-ui/rsbuild-plugin'
import { defineConfig } from '@rsbuild/core'
import { pluginReact } from '@rsbuild/plugin-react'

export default defineConfig({
plugins: [pluginReact(), DevupUIRsbuildPlugin()],
})
```

### Webpack에서 Devup UI 사용하기

Webpack을 직접 사용한다면 Webpack 플러그인을 설치합니다.

```bash
npm install @devup-ui/webpack-plugin
```

Webpack 설정에 플러그인을 추가합니다.

```js
// webpack.config.js

import { DevupUIWebpackPlugin } from '@devup-ui/webpack-plugin'

export default {
plugins: [new DevupUIWebpackPlugin()],
}
```

### Bun에서 Devup UI 사용하기

Bun을 번들러로 사용한다면 Devup UI와 함께 Bun 플러그인을 설치합니다.

```bash
bun add @devup-ui/react @devup-ui/bun-plugin
```

Bun 빌드를 실행하기 전에 플러그인을 import하여 Bun에 등록합니다.

```ts
// build.ts

import '@devup-ui/bun-plugin'

await Bun.build({
entrypoints: ['./src/index.tsx'],
outdir: './dist',
})
```

## 프로젝트 예제

- [Next.js 예제](https://github.com/dev-five-git/devup-ui/tree/main/apps/next)
- [Vite 예제](https://github.com/dev-five-git/devup-ui/tree/main/apps/vite)
- [Vite 기반 라이브러리 예제](https://github.com/dev-five-git/devup-ui/tree/main/apps/vite-lib)
5 changes: 5 additions & 0 deletions apps/landing/src/app/(detail)/docs/installation/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@ export const metadata = {
title: "Installation",
alternates: {
canonical: '/docs/installation',
languages: {
en: '/docs/installation',
ko: '/ko/docs/installation',
'x-default': '/docs/installation',
},
}

}
Expand Down
4 changes: 4 additions & 0 deletions apps/landing/src/i18n/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,8 @@ export const translatedPages: Record<string, TranslatedPage | undefined> = {
load: () => import('@/app/(detail)/docs/overview/page.ko.mdx'),
Layout: DocsLayout,
},
'/docs/installation': {
load: () => import('@/app/(detail)/docs/installation/page.ko.mdx'),
Layout: DocsLayout,
},
}