emoji-mart - GitLite

KO | EN

gitlite — search

#javascript #typescript #llm #golang #rust #nodejs #macos #windows #awesome #vue #pytorch #security #openai #open-source

emoji-mart

(★ 9,399)

🏪 One component to pick them all

파일 탐색기

최종 버전 다운로드 (.zip)

- - test.yml
- esm-transformer.js
- - LICENSE
  - package.json
  - README.md
- - build.js
  - index.d.ts
  - LICENSE
  - package.json
  - README.md
- - LICENSE
  - package.json
  - react.tsx
  - README.md
- - .posthtmlrc
  - example-categories.html
  - example-custom-font.html
  - example-custom-styles.html
  - example-dynamic-width.html
  - example-emoji-component.html
  - example-headless-search.html
  - example-slack-colors.html
  - examples.html
  - index.html
  - layout.html
  - package.json
  - styles.scss
.editorconfig
.gitignore
.node-version
.npmignore
.prettierignore
jest.config.js
LICENSE
package.json
README.md
tsconfig.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/missive/emoji-mart

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd emoji-mart

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

yarn add @emoji-mart/data

이 명령어를 터미널에 그대로 입력해 실행하세요.

'https://cdn.jsdelivr.net/npm/@emoji-mart/data',

이 명령어를 터미널에 그대로 입력해 실행하세요.

npm install --save emoji-mart @emoji-mart/data @emoji-mart/react

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

<script src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>

이 명령어를 터미널에 그대로 입력해 실행하세요.

yarn install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

**Emoji Mart**는 웹을 위한 커스텀 가능한  
이모지 피커 HTML 컴포넌트입니다.
  
[Demo](https://missiveapp.com/open/emoji-mart)
  
  
[![EmojiMart](https://user-images.githubusercontent.com/436043/163686169-766ef715-89b5-4ada-88d7-672623713bc0.png)](https://missiveapp.com/open/emoji-mart)
  
  
[![Missive | Team email, team chat, team tasks, one app](https://user-images.githubusercontent.com/436043/163655413-df22f8cc-99a7-4d8d-a5c1-105c435910d7.png)](https://missiveapp.com "Team email, team chat, team tasks, one app")
  
[Missive](https://missiveapp.com "Team email, team chat, team tasks, one app") 팀에서 제공합니다.

## 📖 목차
- [💾 Data](#-data)
- [🏪 Picker](#-picker)
- [🙃 Emoji component](#-emoji-component)
- [🕵️‍♀️ Headless search](#%EF%B8%8F%EF%B8%8F-headless-search)
- [🔬 Get emoji data from native](#-get-emoji-data-from-native)
- [🗺 Internationalization](#-internationalization)
- [📚 Examples](#-examples)
- [🤓 Built for modern browsers](#-built-for-modern-browsers)
- [🛠 Development](#-development)
## 💾 Data
Picker가 작동하는 데 필요한 데이터는 라이브러리에서 완전히 분리되었습니다. 이를 통해 개발자는 앱 번들 크기를 더 잘 제어할 수 있는 유연성을 갖게 되며, 이 데이터가 언제 어떻게 로드될지 선택할 수 있습니다. 데이터는 다음과 같은 방식으로 사용할 수 있습니다:
### 코드베이스에 직접 번들링하기
- \*\*장점:\*\* Picker가 즉시 렌더링되며, 오프라인에서도 데이터를 사용할 수 있습니다.
- \*\*단점:\*\* 초기 페이지 로드가 느려짐 (로드할 파일 크기가 커짐)
```sh
yarn add @emoji-mart/data
```
```js
import data from '@emoji-mart/data'
import { Picker } from 'emoji-mart'
new Picker({ data })
```
### 원격에서 가져오기 (Fetched remotely)
- \*\*장점:\*\* 필요할 때만 데이터를 가져오므로 앱 번들 크기에 영향을 주지 않습니다.
- \*\*단점:\*\* 네트워크 지연 발생, 오프라인에서 작동하지 않음 (ServiceWorker를 설정하지 않은 경우)
```js
import { Picker } from 'emoji-mart'
new Picker({
data: async () => {
const response = await fetch(
'https://cdn.jsdelivr.net/npm/@emoji-mart/data',
)
return response.json()
}
})
```
이 예제에서는 콘텐츠 전송 네트워크(CDN)에서 데이터를 가져오지만, 데이터를 직접 호스팅하려는 경우 자신의 도메인에서 가져올 수도 있습니다.
## 🏪 Picker
### React
```sh
npm install --save emoji-mart @emoji-mart/data @emoji-mart/react
```
```js
import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'
function App() {
return (
)
}
```
### Browser
```html
```
### 옵션 / Props
| 옵션 | 기본값 | 선택지 | 설명 |
| ---- | ------ | ------ | ---- |
| \*\*data\*\* | `{}` | | Picker에 사용할 데이터 |
| \*\*i18n\*\* | `{}` | | Picker에 사용할 현지화 데이터 |
| \*\*categories\*\* | `[]` | `frequent`, `people`, `nature`, `foods`, `activity`, `places`, `objects`, `symbols`, `flags` | Picker에 표시할 카테고리. 순서가 유지됩니다. |
| \*\*custom\*\* | `[]` | | [커스텀 이모지](#custom-emojis) |
| \*\*onEmojiSelect\*\* | `null` | | 이모지가 선택되었을 때의 콜백 |
| \*\*onClickOutside\*\* | `null` | | Picker 외부를 클릭했을 때의 콜백 |
| \*\*onAddCustomEmoji\*\* | `null` | | \*커스텀 이모지 추가\* 버튼을 클릭했을 때의 콜백. 이 콜백이 제공된 경우에만 버튼이 표시됩니다. 검색 결과가 없을 때 표시됩니다. |
| \*\*autoFocus\*\* | `false` | | Picker가 검색 입력창에 자동으로 포커스를 맞출지 여부 |
| \*\*categoryIcons\*\* | `{}` | | [커스텀 카테고리 아이콘](#custom-category-icons) |
| \*\*dynamicWidth\*\* | `false` | | 의 너비를 기준으로 `perLine`을 동적으로 계산할지 여부. 활성화되면 `perLine`은 무시됩니다. |
| \*\*emojiButtonColors\*\* | `[]` | 예: `#f00`, `pink`, `rgba(155,223,88,.7)` | 호버 배경색에 영향을 주는 색상 배열 |
| \*\*emojiButtonRadius\*\* | `100%` | 예: `6px`, `1em`, `100%` | 이모지 버튼의 모서리 둥글기 (Radius) |
| \*\*emojiButtonSize\*\* | `36` | | 이모지 버튼의 크기 |
| \*\*emojiSize\*\* | `24` | | 이모지의 크기 (버튼 내부) |
| \*\*emojiVersion\*\* | `14` | `1`, `2`, `3`, `4`, `5`, `11`, `12`, `12.1`, `13`, `13.1`, `14` | 사용할 이모지 데이터 버전. `@emoji-mart/data`에서 지원하는 최신 버전은 현재 [14](https://emojipedia.org/emoji-14.0)입니다. |
| \*\*exceptEmojis\*\* | `[]` | | Picker에서 제외할 이모지 ID 목록 |
| \*\*icons\*\* | `auto` | `auto`, `outline`, `solid` | Picker에 사용할 아이콘 유형. 라이트 테마에는 `outline`, 다크 테마에는 `solid`를 사용합니다. |
| \*\*locale\*\* | `en` | `en`, `ar`, `be`, `cs`, `de`, `es`, `fa`, `fi`, `fr`, `hi`, `it`, `ja`, `ko`, `nl`, `pl`, `pt`, `ru`, `sa`, `tr`, `uk`, `vi`, `zh` | Picker에 사용할 로케일 |
| \*\*maxFre

quentRows\*\* | `4` | | 표시할 자주 사용하는 행의 최대 개수입니다. `0`으로 설정하면 자주 사용하는 카테고리가 비활성화됩니다 |
| \*\*navPosition\*\* | `top` | `top`, `bottom`, `none` | 내비게이션 바의 위치입니다 |
| \*\*noCountryFlags\*\* | `false` | | 국가별 국기를 표시할지 여부입니다. 지정하지 않으면 자동으로 처리됩니다 (Windows는 국가별 국기를 지원하지 않습니다) |
| \*\*noResultsEmoji\*\* | `cry` | | 검색 결과가 없을 때 사용할 이모지의 ID입니다 |
| \*\*perLine\*\* | `9` | | 한 줄에 표시할 이모지 개수입니다 |
| \*\*previewEmoji\*\* | `point\_up` | | 이모지에 마우스를 올리지 않았을 때 미리보기로 사용할 이모지의 ID입니다. 미리보기 위치가 아래쪽이면 `point\_up`, 위쪽이면 `point\_down`이 됩니다. |
| \*\*previewPosition\*\* | `bottom` | `top`, `bottom`, `none` | 미리보기의 위치입니다 |
| \*\*searchPosition\*\* | `sticky` | `sticky`, `static`, `none` | 검색 입력창의 위치입니다 |
| \*\*set\*\* | `native` | `native`, `apple`, `facebook`, `google`, `twitter` | 피커에 사용할 이모지 셋입니다. `native`가 가장 성능이 뛰어나며, 나머지는 스프라이트 시트를 사용합니다. |
| \*\*skin\*\* | `1` | `1`, `2`, `3`, `4`, `5`, `6` | 이모지의 피부톤입니다 |
| \*\*skinTonePosition\*\* | `preview` | `preview`, `search`, `none` | 피부톤 선택기의 위치입니다 |
| \*\*theme\*\* | `auto` | `auto`, `light`, `dark` | 피커의 색상 테마입니다 |
| \*\*getSpritesheetURL\*\* | `null` | | 피커에 사용할 스프라이트 시트의 URL을 반환하는 함수입니다. 제공된 데이터와 호환되어야 합니다. |
### 커스텀 이모지
카테고리와 해당 이모지 배열을 제공하여 커스텀 이모지를 사용할 수 있습니다. 이모지는 여러 피부톤을 지원하며 GIF나 SVG일 수도 있습니다.
```js
import data from '@emoji-mart/data'
import Picker from '@emoji-mart/react'
const custom = [
{
id: 'github',
name: 'GitHub',
emojis: [
{
id: 'octocat',
name: 'Octocat',
keywords: ['github'],
skins: [{ src: './octocat.png' }],
},
{
id: 'shipit',
name: 'Squirrel',
keywords: ['github'],
skins: [
{ src: './shipit-1.png' }, { src: './shipit-2.png' }, { src: './shipit-3.png' },
{ src: './shipit-4.png' }, { src: './shipit-5.png' }, { src: './shipit-6.png' },
],
},
],
},
{
id: 'gifs',
name: 'GIFs',
emojis: [
{
id: 'party\_parrot',
name: 'Party Parrot',
keywords: ['dance', 'dancing'],
skins: [{ src: './party\_parrot.gif' }],
},
],
},
]
function App() {
return (
)
}
```
### 커스텀 카테고리 아이콘
카테고리 이름을 키로, 아이콘을 값으로 갖는 객체를 제공하여 커스텀 카테고리 아이콘을 사용할 수 있습니다. 현재 지원되는 형식은 `svg` 문자열과 `src`입니다. [예시](https://missiveapp.com/open/emoji-mart/example-categories.html)를 참조하세요.
```js
const customCategoryIcons = {
categoryIcons: {
activity: {
svg: '',
},
people: {
src: './people.png',
},
},
}
```
## 🙃 Emoji 컴포넌트
이모지 웹 컴포넌트 사용법은 어떤 라이브러리를 사용하든 동일합니다.
먼저 데이터가 초기화되었는지 확인해야 합니다. 페이지 로드당 한 번만 호출하면 됩니다. 이와 같이 `init`을 호출하는 경우, Picker props에 데이터를 반드시 포함할 필요는 없습니다. 포함하더라도 문제없으며 아무 동작도 하지 않습니다.
```js
import data from '@emoji-mart/data'
import { init } from 'emoji-mart'
init({ data })
```
그런 다음 HTML / JSX에서 이모지 컴포넌트를 사용할 수 있습니다.
```html

### Attributes / Props
| Attribute | Example | Description |
| --------- | ------- | ----------- |
| \*\*id\*\* | `+1` | 이모지 ID |
| \*\*shortcodes\*\* | `:+1::skin-tone-2:` | 이모지 숏코드 |
| \*\*native\*\* | `👍` | 네이티브 이모지 |
| \*\*size\*\* | `2em` | 인라인 요소 크기 |
| \*\*fallback\*\* | `:shrug:` | 이모지를 찾을 수 없을 때 렌더링할 문자열 |
| \*\*set\*\* | `native` | 이모지 셋: `native`, `apple`, `facebook`, `google`, `twitter` |
| \*\*skin\*\* | `1` | 이모지 피부 톤: `1`, `2`, `3`, `4`, `5`, `6` |
## 🕵️‍♀️ 헤드리스 검색
Picker 없이 검색을 수행할 수 있습니다. 이모지 컴포넌트와 마찬가지로 검색 인덱스를 사용하려면 먼저 `data`를 초기화해야 합니다.
```js
import data from '@emoji-mart/data'
import { init, SearchIndex } from 'emoji-mart'
init({ data })
async function search(value) {
const emojis = await SearchIndex.search(value)
const results = emojis.map((emoji) => {
return emoji.skins[0].native
})
console.log(results)
}
search('christmas') // => ['🎄', '🇨🇽', '🧑‍🎄', '🔔', '🤶', '🎁', '☃️', '❄️', '🎅', '⛄']
```
## 🔬 네이티브에서 이모지 데이터 가져오기
네이티브 이모지로부터 이모지 데이터를 가져올 수 있습니다. 이는 네이티브 이모지에서 이모지 ID를 얻고 싶을 때 유용합니다. 이모지 컴포넌트와 마찬가지로 이모지 데이터를 검색하려면 먼저 `data`를 초기화해야 합니다.
```js
import data from '@emoji-mart/data'
import { init, getEmojiDataFromNative } from 'emoji-mart'
init({ data })
getEmojiDataFromNative('🤞🏿').then(console.log)
/\* {
aliases: ['hand\_with\_index\_and\_middle\_fingers\_crossed'],
id: 'crossed\_fingers',
keywords: ['hand', 'with', 'index', 'and', 'middle', 'good', 'lucky'],
name: 'Crossed Fingers',
native: '🤞🏿',
shortcodes: ':crossed\_fingers::skin-tone-6:',
skin: 6,
unified: '1f91e-1f3ff',
} \*/
```
## 🗺 국제화
EmojiMart UI는 [다국어](https://github.com/missive/emoji-mart/tree/main/packages/emoji-mart-data/i18n)를 지원하며, 사용 중인 언어가 누락된 경우 자유롭게 PR을 열어주세요.
```js
import i18n from '@emoji-mart/data/i18n/fr.json'
i18n.search\_no\_results\_1 = 'Aucun emoji'
new Picker({ i18n })
```
파일 크기가 작기 때문에 영어는 기본으로 내장되어 있으며 별도로 제공할 필요가 없습니다.
## 📚 예제
- [카테고리](https://missiveapp.com/open/emoji-mart/example-categories.html)
- [커스텀 이모지 폰트](https://missiveapp.com/open/emoji-mart/example-custom-font.html)
- [커스텀 스타일](https://missiveapp.com/open/emoji-mart/example-custom-styles.html)
- [이모지 컴포넌트](https://missiveapp.com/open/emoji-mart/example-emoji-component.html)
- [헤드리스 검색](https://missiveapp.com/open/emoji-mart/example-headless-search.html)
- [Slack 색상](https://missiveapp.com/open/emoji-mart/example-slack-colors.html)
## 🤓 모던 브라우저용 빌드
EmojiMart는 다음 API에 의존하므로, 구형 브라우저를 지원해야 하는 경우 폴리필을 포함해야 할 수 있습니다:
- [Shadow DOM](https://caniuse.com/shadowdomv1) ([MDN](https://developer.mozilla.org/en-US/docs/Web/Web\_Components/Using\_shadow\_DOM))
- [Custom elements](https://caniuse.com/custom-elementsv1) ([MDN](https://developer.mozilla.org/en-US/docs/Web/Web\_Components/Using\_custom\_elements))
- [IntersectionObserver](https://caniuse.com/intersectionobserver) ([MDN](https://developer.mozilla.org/en-US/docs/Web/API/Intersection\_Observer\_API))
- [Async/Await](https://caniuse.com/async-functions) ([MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async\_function))
## 🛠 개발
```sh
yarn install
yarn dev
```