open-index/open-npm huggingface dataset:
npm package: @naver-maps/react
Description: NaverMaps Component For React or Next
Author: Dongkyuuuu
Latest version: 1.0.0

# @naver-maps/react

NaverMaps Component for React. If you want to more detail, check this [Docs](https://naver-maps-docs.vercel.app)

## Install

```sh
yarn add @naver-maps/react
```
npm package: @naver-maps/vue
Description: NaverMaps Component For Vue or Nuxt
Author: Dongkyuuuu
Latest version: 1.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @naver-maps/vue

NaverMaps Component for Vue(v3). If you want to more detail, check this [Docs](https://naver-maps-docs.vercel.app)

## Install

```sh
yarn add @naver-maps/vue
```
npm package: @naverpay/biome-config
Description: Biome configuration for NaverPay projects
Author: NaverPay Frontend
Latest version: 0.0.1

# @naverpay/biome-config

네이버페이 스타일 가이드에 맞게 Biome formatter 설정을 커스텀하여 제공합니다.

> eslint 를 대체 하기에는 eslint 플러그인이 너무 방대하여, `@naverpay/biome-config`는 formatting 역할을 하는 prettier 만 대체하도록 설계되어 있습니다.

## 설치 방법

```bash
npm install @naverpay/biome-config @biomejs/biome -D
```

## 사용 방법

biome.json 파일을 생성하고 `@naverpay/biome-config` 패키지를 추가합니다.

```json
{
  "$schema": "https://biomejs.dev/schemas/2.2.6/schema.json",
  "extends": ["@naverpay/biome-config"],
  "files": {
    "includes": ["**", "!scripts/**", "!apps/web/public/**", "!apps/web/src/assets/lottie/applyCharge.json"]
  }
}

```

> ignore 설정이 없기 때문에, `includes`의 `!`로 무시하고 싶은 파일을 설정해주세요.

## CLI

package.json에 스크립트를 추가하여 format 검사를 할 수 있습니다.

```jsonc
// package.json
{
    "scripts": {
        "format": "biome check .",
        "format:fix": "biome check --write ."
    },
}
```

> [lefthook](https://github.com/evilmartians/lefthook)을 사용해서 commit 또는 push 전에 스타일 확인을 자동화할 것을 권장합니다.

## 차이점

- [biome 에서 제공하는 assist](https://biomejs.dev/assist/javascript/actions/) 가 기본으로 활성화 되어 있습니다. 따라서 prettier 를 대체한다면 jsx elements 의 순서가 정렬되거나, js 객체의 키가 정렬될 수 있습니다. 해당 옵션을 원치 않는다면 반드시 꺼주세요.  
  - [organizeImports](https://biomejs.dev/assist/actions/organize-imports/) 규칙은 eslint 의  `import/order` 와 충돌하여 기본적으로 꺼져있습니다. 다음 major 버전 때 biome 로 대체될 예정입니다.

```jsonc
// biome.json
{
    "$schema": "https://biomejs.dev/schemas/2.2.6/schema.json",
    "assist": {
        "actions": {
            "source": {
                "organizeImports": "off"
            }
        }
    }
}
```

## Integrating with IDE

- code-style에서는 **Formatting을 위해 Biome**를, **Code-quality를 위해 ESLint**를 사용하고 있습니다.
- IDE에서 autofix 하기 위해 아래 설정이 필요합니다.

### VSCode

1. [Biome Extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)을 설치합니다.
2. IDE에서 Command Palette(CMD/CTRL + Shift + P)를 열고 `settings.json`을 입력하여 설정파일을 오픈합니다.
3. 아래 설정을 추가하면 파일 저장시 Biome config에 맞게 autofix 할 수 있습니다.

```json
{
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.biome": "explicit"
    }
}
```

### WebStorm

Settings > Languages & Frameworks > JavaScript > Prettier 에서 Prettier를 비활성화하고, [Biome Plugin](https://plugins.jetbrains.com/plugin/22761-biome)을 설치하여 사용할 수 있습니다.
npm package: @naverpay/code-style-cli
Description: NaverPay code-style CLI tool
Author: @NaverPayDev/frontend
Latest version: 0.1.0

# @naverpay/code-style-cli

네이버페이 코드 스타일 패키지를 쉽게 설치하고 설정할 수 있는 CLI 도구입니다.

> pnpm v10+에서는 보안상의 이유로 postinstall 스크립트가 기본적으로 실행되지 않습니다. 이 CLI를 사용하면 패키지 설치와 설정 파일 생성을 한 번에 처리할 수 있습니다.

## 사용 방법

프로젝트 루트에서 실행합니다.

```bash
npx @naverpay/code-style-cli
```

1. 패키지 매니저를 자동으로 감지합니다. (npm, yarn, pnpm)
2. 설치할 패키지를 선택합니다.
3. 선택한 패키지가 설치되고 설정 파일이 자동으로 생성됩니다.

## 지원 패키지

| 패키지 | 설정 파일 |
|--------|-----------|
| [@naverpay/eslint-config](../eslint-config/README.md) | - |
| [@naverpay/eslint-plugin](../eslint-plugin/README.md) | - |
| [@naverpay/prettier-config](../prettier-config/README.md) | `.prettierrc` |
| [@naverpay/stylelint-config](../stylelint-config/README.md) | `stylelint.config.mjs` |
| [@naverpay/markdown-lint](../markdown-lint/README.md) | `.markdownlint.jsonc` |
| [@naverpay/editorconfig](../editorconfig/README.md) | `.editorconfig` |
| [@naverpay/oxlint-config](../oxlint-config/README.md) | `.oxlintrc.json` |
| [@naverpay/biome-config](../biome-config/README.md) | `biome.json` |
| [oxfmt](#oxfmt-가이드) | `.oxfmtrc.json` |

> eslint-config, eslint-plugin은 설정이 복잡하여 설정 파일을 자동 생성하지 않습니다.

## 설치 후 설정

CLI는 기본 설정 파일만 생성합니다. 추가 설정이 필요한 경우:

- **설정 변경**: 생성된 설정 파일을 직접 수정하세요.
- **CLI 명령어**: 각 패키지 README의 "CLI" 섹션을 참고하세요.
- **IDE 설정**: 각 패키지 README의 "Integrating with IDE" 섹션을 참고하세요.

## 주의 사항

- 프로젝트 루트에 `package.json`이 있어야 합니다.
- 이미 설정 파일이 존재하는 경우 덮어쓰지 않습니다.

---

## oxfmt 가이드

> oxfmt는 Prettier 호환 포매터로, Rust로 작성되어 빠른 속도를 제공합니다.
>
> **Note:** oxfmt는 현재 **alpha** 단계입니다. VSCode Extension 지원도 experimental 상태입니다.

oxfmt는 현재 `extends` 옵션을 지원하지 않아 별도 config 패키지가 없습니다. CLI에서 네이버페이 권장 설정이 포함된 `.oxfmtrc.json`을 생성합니다.

### 설정

필요에 따라 `ignorePatterns`를 추가합니다.

```json
{
    "$schema": "./node_modules/oxfmt/configuration_schema.json",
    "singleQuote": true,
    "semi": false,
    "useTabs": false,
    "tabWidth": 4,
    "endOfLine": "lf",
    "bracketSpacing": false,
    "arrowParens": "always",
    "bracketSameLine": false,
    "printWidth": 120,
    "trailingComma": "all",
    "ignorePatterns": ["dist", "pnpm-lock.yaml", ".github"]
}
```

### CLI

package.json에 스크립트를 추가하여 format 검사를 할 수 있습니다.

```json
{
    "scripts": {
        "format": "oxfmt",
        "format:check": "oxfmt --check"
    }
}
```

### Integrating with IDE

#### VSCode

> **Warning:** oxfmt의 VSCode 지원은 현재 **experimental** 단계입니다.

1. [oxc Extension](https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode)을 설치합니다.
2. `settings.json`에 아래 설정을 추가합니다.

```json
{
    "oxc.enable": true,
    "oxc.fmt.experimental": true,
    "editor.defaultFormatter": "oxc.oxc-vscode",
    "editor.formatOnSave": true,
    "[typescript]": {
        "editor.defaultFormatter": "oxc.oxc-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "oxc.oxc-vscode"
    }
}
```

#### WebStorm

[oxc-intellij-plugin](https://plugins.jetbrains.com/plugin/27061-oxc) (v0.0.21 이상)을 설치하여 사용할 수 있습니다.
npm package: @naverpay/device-info
Description: Device information
Author: NaverPay Frontend team
Latest version: 1.1.0

# @naverpay/device-info

> A library for converting device IDs to user-friendly model names

## Installation

```bash
npm install @naverpay/device-info
# or
yarn add @naverpay/device-info
# or
pnpm add @naverpay/device-info
```

## Quick Start

```javascript
import { ios, aos } from "@naverpay/device-info";

console.log(ios["iPhone15,4"]); // 'iPhone 15'
console.log(aos["SM-S901B"]); // 'Galaxy S22'
```

## API

### `ios`

Object containing iOS device identifier to model name mappings.

- **Type**: `Record<string, string>`
- **Example**: `iPhone14,2` → `iPhone 13 Pro`

### `aos`

Object containing Android device model to marketing name mappings.

- **Type**: `Record<string, string>`
- **Example**: `SM-G991B` → `Galaxy S21 5G`

## Examples

### Basic Usage

```javascript
import { ios, aos } from "@naverpay/device-info";

// iOS
const iosModel = ios["iPhone14,2"] || "Unknown iPhone";

// Android
const androidModel = aos["SM-G991B"] || "Unknown Android";
```

### With Fallback

```javascript
function getDeviceName(deviceId, platform) {
  if (platform === "ios") {
    return ios[deviceId] || `Unknown iOS (${deviceId})`;
  } else if (platform === "android") {
    return aos[deviceId] || `Unknown Android (${deviceId})`;
  }
  return "Unknown Device";
}
```

## FAQ

**Q: How often is the data updated?**  
A: Device data is updated weekly (every Monday) from official sources.

**Q: What if a device ID is not found?**  
A: The library returns `undefined`. Always provide a fallback value.

**Q: Where does the data come from?**  
A:

- iOS: [The Apple Wiki](https://theapplewiki.com/wiki/Models)
- Android: [Google Play Supported Devices](https://storage.googleapis.com/play_public/supported_devices.html)

## License

MIT
npm package: @naverpay/editorconfig
Description: editorconfig for naverpay
Author: @NaverPayDev/frontend
Latest version: 2.0.0

# @naverpay/editorconfig

다양한 IDE에 일정한 포맷을 적용하기 위한 config

## 설치 방법

[`@naverpay/code-style-cli`](../code-style-cli/README.md)를 사용하여 설치하는 것을 권장합니다.

```bash
npx @naverpay/code-style-cli
```

또는 직접 설치 후 설정 파일을 복사할 수 있습니다.

```bash
npm install @naverpay/editorconfig -D
cp node_modules/@naverpay/editorconfig/.editorconfig .editorconfig
```
npm package: @naverpay/eslint-config
Description: eslint config for naverpay
Author: @NaverPayDev/frontend
Latest version: 2.4.2

# @naverpay/eslint-config

네이버페이 스타일 가이드에 맞게 lint rule을 커스텀하여 제공합니다.

## 사용 방법

```bash
npm install @naverpay/eslint-config -D
```

프로젝트 환경에 알맞는 config를 import해 사용합니다.

- `node` - JS로 작성된 node 환경에서 사용
- `typescript` - TS로 작성된 환경에서 사용  
    [Note: `@typescript-eslint` 룰 중 일부는 `yaml`룰과 충돌할 수 있으니 유의하시기 바랍니다.](https://github.com/NaverPayDev/code-style/commit/948890376bb250d975e50d5f82e418a3eb50bb7c#diff-d6e0200228324b775c1bd5390161c9d64f8a4581b542d5e93463abe457cd73caR6-R15)
- `react` - TS로 작성된 react17+ 환경에서 사용
- `strict` - 보다 엄격한 룰을 원하는 환경에서 위 config와 함께 사용
- `packageJson` - package.json 파일에서 사용하는 룰을 추가

예시 `eslint.config.js`

```js
import naverpay from '@naverpay/eslint-config'

export default [
    {
        ignores: ['**/dist/**'],
    },
    ...naverpay.configs.node,
    ...naverpay.configs.typescript,
    ...naverpay.configs.strict,
    ...naverpay.configs.packageJson
]
```

## CLI

package.json에 스크립트를 추가하여 lint 검사를 할 수 있습니다.

```jsonc
// package.json
{
    "scripts": {
        "lint": "eslint '**/*.{js,jsx,ts,tsx,yaml,yml}'",
        "lint:fix": "eslint '**/*.{js,jsx,ts,tsx,yaml,yml}' --fix",
    }
}
```

> [lefthook](https://github.com/evilmartians/lefthook)을 사용해서 commit 또는 push 전에 스타일 확인을 자동화할 것을 권장합니다.

## Integrating with IDE

- code-style에서는 **Formatting을 위해 Prettier**를, **Code-quality를 위해 ESLint**를 사용하고 있습니다. ([Prettier vs. Linters](https://prettier.io/docs/en/comparison))
- Prettier는 [여기](../prettier-config/README.md)를 참고해주세요.
- IDE에서 AutoFix 하기 위해 아래 설정이 필요합니다.

### VSCode

1. [ESLint Extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)을 설치합니다.
2. IDE에서 Command Palette(CMD/CTRL + Shift + P)를 열고 `settings.json`을 입력하여 설정파일을 오픈합니다.
3. 아래 설정을 추가하면 파일 저장시 ESLint rule에 맞게 autofix 할 수 있습니다.

```json
{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    },
}
```

#### Typescript Configuration (Recommended)

`@naverpay/eslint-config/typescript` 사용 시, 아래의 설정을 활성화하여 `import type`을 자동화할 것을 권장합니다.

```json
{
    "typescript.preferences.preferTypeOnlyAutoImports": true
}
```

### WebStorm

Settings > Language > JavaScript > Code Quality > ESLint > Automatic ESLint configuration 을 설정합니다.
npm package: @naverpay/eslint-plugin
Description: eslint plugin for naverpay
Author: @NaverPayDev/frontend
Latest version: 2.3.1

# @naverpay/eslint-plugin

네이버페이 스타일 가이드에 추가 기능을 제공하는 플러그인 패키지

## 설치 방법

```shell
npm install @naverpay/eslint-plugin -D
```

## 사용 방법

사용하고 싶은 rule이 있다면 eslint.config.js에 아래와 같이 설정해주세요:

1. plugins에 @naverpay/eslint-plugin을 추가합니다.
2. rules에 사용하고 싶은 규칙을 설정합니다.

```js
// eslint.config.js
import naverpay from "@naverpay/eslint-plugin";

export default [
    {
        plugins: {
            naverpay
        },
        rules: {
            // react 패키지에 대해 default import를 금지하는 규칙
            "naverpay/prevent-default-import": ["error", {"packages": ["react"]}]
        }
    }
];
```

## 규칙

🔧: [`--fix` CLI option](https://eslint.org/docs/user-guide/command-line-interface#--fix)을 통해 자동 수정이 가능합니다.

| Name                                                             | Description                                     | 🔧  |
| :--------------------------------------------------------------- | :---------------------------------------------- | :-- |
| [memo-react-components](docs/memo-react-components.md)     | 주어진 경로의 React 컴포넌트들을 자동으로 memoize 합니다.             | 🔧  |
| [optimize-svg-components](docs/optimize-svg-components.md)     | 주어진 경로의 svg 컴포넌트들을 [svgo](https://github.com/svg/svgo) 기반으로 최적화합니다.             | 🔧  |
| [prevent-default-import](docs/prevent-default-import.md)                       | 패키지 목록을 받아, 해당 패키지 default import를 금지합니다.                      | 🔧  |
| [sort-exports](docs/sort-exports.md)                       | 파일에 있는 모든 export 문을 정렬합니다.                      | 🔧  |
| [svg-unique-id](docs/svg-unique-id.md)                       | 주어진 경로의 SVG 컴포넌트들에 고유한 id를 부여하는 HOC를 추가합니다.                     | 🔧  |
| [import-server-only](docs/import-server-only.md)                       | 주어진 경로의 파일에 server-only 패키지를 포함하도록 강제합니다.                     | 🔧  |
| [peer-deps-in-dev-deps](docs/peer-deps-in-dev-deps.md)                       | `package.json`에서 동작하는 규칙으로, `peerDependencies` 에 있는 패키지가 `devDependencies` 에 선언되어 있지 않다면 에러를 발생시킵니다.                     |   |
| [cognitive-complexity](docs/cognitive-complexity.md)                       | 함수의 Cognitive Complexity가 임계값을 초과하면 라인별 점수 상세와 리팩토링 제안을 포함하여 보고합니다.                     |   |
npm package: @naverpay/oxlint-config
Description: oxlint configuration for NaverPay projects
Author: @NaverPayDev/frontend
Latest version: 0.0.1

# @naverpay/oxlint-config

네이버페이 스타일 가이드에 맞게 oxlint 설정을 제공합니다.

> oxlint는 ESLint 호환 린터로, Rust로 작성되어 빠른 속도를 제공합니다.

## 설치 방법

```bash
npm install @naverpay/oxlint-config oxlint -D
```

## 사용 방법

> **Note:** oxlint의 `extends`는 설정 파일 위치 기준으로 경로를 해석합니다. ([공식 문서](https://oxc.rs/docs/guide/usage/linter/config-file-reference))

프로젝트 루트에 `.oxlintrc.json` 파일을 생성하고 아래와 같이 설정합니다.

### Node.js 프로젝트

```json
{
    "$schema": "./node_modules/oxlint/configuration_schema.json",
    "extends": ["./node_modules/@naverpay/oxlint-config/node/.oxlintrc.json"]
}
```

필요에 따라 `ignorePatterns`를 추가합니다.

```json
{
    "$schema": "./node_modules/oxlint/configuration_schema.json",
    "extends": ["./node_modules/@naverpay/oxlint-config/node/.oxlintrc.json"],
    "ignorePatterns": ["dist", "node_modules"]
}
```

## CLI

package.json에 스크립트를 추가하여 lint 검사를 할 수 있습니다.

```json
{
    "scripts": {
        "lint": "oxlint"
    }
}
```

`--report-unused-disable-directives` 옵션을 추가하면 불필요한 `eslint-disable` 주석을 감지합니다. 필요에 따라 사용합니다.

```json
{
    "scripts": {
        "lint": "oxlint --report-unused-disable-directives"
    }
}
```

> [lefthook](https://github.com/evilmartians/lefthook)을 사용해서 commit 또는 push 전에 lint 검사를 자동화할 것을 권장합니다.

## Integrating with IDE

### VSCode

1. [oxc Extension](https://marketplace.visualstudio.com/items?itemName=oxc.oxc-vscode)을 설치합니다.
2. IDE에서 Command Palette(CMD/CTRL + Shift + P)를 열고 `settings.json`을 입력하여 설정파일을 오픈합니다.
3. 아래 설정을 추가합니다.

```json
{
    "oxc.enable": true
}
```

#### oxfmt와 함께 사용 시

```json
{
    "oxc.enable": true,
    "oxc.fmt.experimental": true,
    "editor.defaultFormatter": "oxc.oxc-vscode",
    "editor.formatOnSave": true,
    "[typescript]": {
        "editor.defaultFormatter": "oxc.oxc-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "oxc.oxc-vscode"
    }
}
```

### WebStorm

[oxc-intellij-plugin](https://plugins.jetbrains.com/plugin/27061-oxc)을 설치하여 사용할 수 있습니다.