open-index/open-npm huggingface dataset:
npm package: @liner-fe/cdn
Description: Liner Static Resource CDN 관리 저장소입니다.
Latest version: 1.0.33

문제가 발생한다면 @doyle, @eliot에게 문의주세요.

## 📋 목차

- [개요](#개요)
- [Asset 추가 방법](#asset-추가-방법)
- [Asset 사용 방법](#asset-사용-방법)
- [주의사항](#주의사항)
- [개발 가이드](#개발-가이드)

## 개요

이 저장소는 Liner의 정적 리소스(이미지, 아이콘, 기타 미디어 파일)를 관리하고 CDN을 통해 제공하는 저장소입니다.

- **CDN URL**: https://assets.getliner.com
- **배포**: GitHub Actions를 통한 자동 배포
- **저장소**: Cloudflare R2

## Asset 추가 방법

### 1. 파일 명명 규칙

- **폴더명과 파일명 모두 kebab-case를 따릅니다**
- 예시: `my-file-name.png`, `lottie.json`

### 2. 배포 방법

1. `assets/` 디렉토리 내 적절한 폴더에 파일 추가
2. main에 즉시 push해도 되고, PR을 만들어도 됩니다.
3. main 브랜치에 변경사항이 생기면 자동으로 CDN에 배포됩니다

### 3. 폴더 구조 규칙

```
assets/
├── web/              # 웹 플랫폼
│   ├── welcome/
│   └── [feature]/
├── mobile/           # 모바일 플랫폼
│   ├── onboarding/
│   └── profile/
└── shared/           # 공통 리소스
    └── logos/
```

- depth1은 platform, depth2부터 feature로 구성합니다.
- depth1을 추가하기 전에 frontend 채널에서 논의해주세요.

## Asset 사용 방법

### 1. Typescript로 사용

Liner Frontend 패키지를 사용하여 타입 안전성을 보장할 수 있습니다:

```bash
yarn add @liner-fe/cdn
```

```typescript
import { CDN } from "@liner-fe/cdn";

<img src={CDN["web/welcome/desktop.webp"]} />;
```

### 2. 직접 URL 사용

```
https://assets.getliner.com/[폴더명]/[파일명]
```

**예시:**

- `https://assets.getliner.com/web/welcome/desktop.webp`

## 주의사항

### 1. SVG 파일 관리

- **문제**: SVG를 URL로 가져오는 경우 깜빡이는 이슈 발생
- **해결책**: HTML에 inline으로 관리하는 것을 권장

### 2. 파일 크기 최적화

- WebP, AVIF 등 최신 포맷 사용 권장

### 3. 커밋 작성 방식
- [feat] xxx, [chore] xxx 대신 feat: xxx, chore: xxx로 작성
npm package: @liner-fe/design-token
Description: ## Installation
Latest version: 3.0.2

# @liner-fe/design-token [![npm version](https://img.shields.io/npm/v/@liner-fe/design-token.svg?style=flat)](https://www.npmjs.com/package/@liner-fe/design-token)

## Installation

`yarn add @liner-fe/design-token`

## Documentation

**Prism**을 구성하는 원자단위의 토큰입니다.

문서는 Slack `dev_client_storybook` 채널을 확인해주세요.
npm package: @liner-fe/design-token-primitive
Description: design-token-primitive는 npm에 배포되지 않고 내부적으로 script를 통해 원하는 포맷으로 변경하기 위한 package입니다.
Latest version: 0.2.47

# design-token-primitive

design-token-primitive는 npm에 배포되지 않고 내부적으로 script를 통해 원하는 포맷으로 변경하기 위한 package입니다.
npm package: @liner-fe/figma-mcp
Description: ## 1. AI와 integration
Latest version: 1.0.13

# Figma MCP

## 1. AI와 integration

### Claude Code

```shell
claude mcp add PRISM pnpm dlx @liner-fe/figma-mcp@latest
```

### Cursor

```json
{
  "mcpServers": {
    "plugin": {
      "command": "pnpm",
      "args": ["dlx", "@liner-fe/figma-mcp@latest"]
    }
  }
}
```

## 2. Socket 서버 켜기

지금은 liner-web, liner-com에 dev 서버를 실행시키기 전에 실행됩니다.

```shell
pnpm dlx @liner-fe/figma-mcp@latest --socket
```

## 3. Figma Plugin을 통해 Figma와 연결하기

prism-figma-mcp-plugin를 켜고 connect 버튼을 눌러줍니다.
npm package: @liner-fe/illust
Description: ## 일러스트 추가하기
Latest version: 1.0.0

# @liner-fe/illust

## 일러스트 추가하기

새로운 일러스트를 추가하려면 다음 단계를 따르세요:

### 1. 이미지 파일 추가

- **형식**: [WebP exporter](https://www.figma.com/community/plugin/1181873200384736932/webp-exporter)를 활용해서 같은 이름으로 추가해주세요.
- **위치**:
  - 라이트 모드: `https://assets.getliner.com/common/illust/light/`
  - 다크 모드: `https://assets.getliner.com/common/illust/dark/`
  - CDN 링크: https://fe-admin.liner.space/cloud/buckets/liner-v1--assets/common/illust
npm package: @liner-fe/language-notion
Description: 라이너 언어포탈에 추가된 프로젝트의 로컬을 편리하게 붙여넣는 스크립트입니다.
Latest version: 1.0.7

# @liner-fe/language-notion

라이너 언어포탈에 추가된 프로젝트의 로컬을 편리하게 붙여넣는 스크립트입니다.

## 설치

```bash
pnpm install @liner-fe/language-notion
```

## 사용 방법

```typescript
import { pasteNotionDataToJson } from '@liner-fe/language-notion';

pasteNotionDataToJson({
  NOTION_DATABASE_ID: 'your-notion-database-id',
  NOTION_API_KEY: 'your-notion-api-key',
  SSR_GLOBAL_PATH: './messages/ssrGlobal.ts',
});
```

## 필요한 설정

- `NOTION_DATABASE_ID`: Notion 데이터베이스 ID
- `NOTION_API_KEY`: Notion API 키
- `SSR_GLOBAL_PATH`: 번역 파일 경로

## 동작 방식

1. 사용자로부터 제품 카테고리 입력을 받습니다
2. Notion 데이터베이스에서 해당 카테고리의 번역 데이터를 가져옵니다
3. 기존 `ssrGlobal.ts` 파일과 비교하여 새로운 항목만 추가합니다
4. 중복된 항목은 자동으로 스킵합니다
5. Prettier로 포맷팅 후 JSON 파일을 생성합니다
npm package: @liner-fe/prism
Description: ## Installation
Latest version: 3.0.12

# @liner-fe/prism [![npm version](https://img.shields.io/npm/v/@liner-fe/prism.svg?style=flat)](https://www.npmjs.com/package/@liner-fe/prism)

## Installation

`yarn add @liner-fe/prism`

## Documentation

문서는 Slack `dev_client_storybook` 채널을 확인해주세요.