Repository: EASYME-md/client
Branch: main
Commit: 39cbe63f7dcf
Files: 71
Total size: 72.8 KB

Directory structure:
gitextract_b5jnwai9/

├── .gitignore
├── .nvmrc
├── README.md
├── babel.config.js
├── jest.config.js
├── package.json
├── public/
│   ├── _redirects
│   ├── index.html
│   ├── robots.txt
│   └── sitemap.xml
└── src/
    ├── App.js
    ├── api/
    │   └── index.js
    ├── assets/
    │   └── fonts/
    │       └── font.css
    ├── components/
    │   ├── CustomToolbar.js
    │   ├── CustomTools/
    │   │   ├── CustomAllTextRemoval.js
    │   │   ├── CustomBlockQuote.js
    │   │   ├── CustomBold.js
    │   │   ├── CustomCodeBlock.js
    │   │   ├── CustomCodeInline.js
    │   │   ├── CustomContents.js
    │   │   ├── CustomEditorView.js
    │   │   ├── CustomFirstLetterUppercase.js
    │   │   ├── CustomFold.js
    │   │   ├── CustomFullScreen.js
    │   │   ├── CustomHeader.js
    │   │   ├── CustomHorizontalRule.js
    │   │   ├── CustomImageLink.js
    │   │   ├── CustomItalic.js
    │   │   ├── CustomLink.js
    │   │   ├── CustomLowercase.js
    │   │   ├── CustomMarkdownView.js
    │   │   ├── CustomOrderedList.js
    │   │   ├── CustomRedo.js
    │   │   ├── CustomShare.js
    │   │   ├── CustomStrikethrough.js
    │   │   ├── CustomTable.js
    │   │   ├── CustomUnOrderedList.js
    │   │   ├── CustomUnderline.js
    │   │   ├── CustomUndo.js
    │   │   └── CustomUppercase.js
    │   ├── Editor.js
    │   ├── Home.js
    │   ├── Loading.js
    │   ├── MarkdownView.js
    │   ├── ReactHelmet.js
    │   ├── SharingModal.js
    │   ├── TextScreen.js
    │   ├── Title.js
    │   ├── __test__/
    │   │   └── Title.test.js
    │   └── shared/
    │       ├── ErrorPage.js
    │       ├── SaveBox.js
    │       ├── SectionLine.js
    │       ├── TextScreenWrapper.js
    │       └── __test__/
    │           ├── Editor.test.js
    │           └── ErrorPage.test.js
    ├── constants/
    │   ├── index.js
    │   └── welcomeMessage.js
    ├── features/
    │   ├── saga.js
    │   └── slice.js
    ├── index.css
    ├── index.js
    ├── setupTests.js
    ├── store/
    │   └── index.js
    └── utils/
        ├── __test__/
        │   └── utils.test.js
        ├── addTypeBeforeAndAfter.js
        ├── addTypeCurrentPosition.js
        ├── addTypeCurrentRow.js
        ├── addTypeDraggedRows.js
        ├── draftStorage.js
        ├── shareDocument.js
        └── urlShare.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*


================================================
FILE: .nvmrc
================================================
16


================================================
FILE: README.md
================================================
![cartoon](public/assets/readme/cartoon.png)

# 😉 [EASYME.md](https://www.easy-me.com/)

![Generic badge](https://img.shields.io/badge/version-0.1.0-green.svg)
[![Netlify Status](https://api.netlify.com/api/v1/badges/e4b6f69b-eaaf-465e-8a50-218a405dca2f/deploy-status)](https://app.netlify.com/sites/easymemd/deploys)   
<a href="https://www.buymeacoffee.com/oneahan">
  <img src="public/assets/readme/bmac.webp" alt="Buy Me a Coffee" width="220" />
</a>


`#README` `#Markdown` `#리드미` `#빠르고쉽게` `#에디터`   

README.md를 쉽게 작성하는 방법! **EASYME.md**   

**사이트 바로 가기 👉 [클릭!](https://www.easy-me.com/)**

---

![cover](public/assets/readme/cover.png)

Markdown 문법, 알고는 있는데.. README.md 작성할 때만 되면 버벅거리는 당신.   
지금 'Markdown 사용법'이라고 검색하고 계신 거 아니죠? 🤭   
이젠 더 이상 그럴 필요가 없어요. **EASYME.md를 통해 쉽게 Markdown을 작성할 수 있거든요.**   
왼쪽 화면에 글을 작성하면 오른쪽 화면에 실시간으로 Markdown이 적용된 글을 확인할 수 있어요. Markdown 문법이 잘 기억나지 않는다고요? 괜찮아요! 🙂 툴바창에 다양한 기능을 적용하면 자동으로 Markdown 문법이 적용되니까요.   
어때요? 이제 쉽게 README.md를 작성할 수 있겠죠?   

*(🤙 지금 이 글도 EASYME.md를 통해 작성하였답니다)*

<br>

# 📖 Contents

- [😉 EASYME.md](#-easymemd)
- [📖 Contents](#-contents)
- [🌈 Background](#-background)
- [🔗 Link](#-link)
  - [Github Repositories](#github-repositories)
- [🔍 Preview](#-preview)
- [🛠 Features](#-features)
- [📈 Release Note](#-release-note)
- [⚠️ Requirement](#️-requirement)
- [⚙️ Installation](#️-installation)
  - [Setup](#setup)
  - [Client](#client)
  - [Server](#server)
- [🪃 Skills](#-skills)
  - [Client](#client-1)
  - [Server](#server-1)
  - [Test](#test)
- [🪛 Project Control](#-project-control)
- [🚀 Deployment](#-deployment)
- [🧗 Challenges](#-challenges)
  - [1. React Quill을 선택, 그리고 그 안에서 도전](#1-react-quill을-선택-그리고-그-안에서-도전)
    - [1) 에디터에 HTML문법이 자동으로 적용되는 현상](#1-에디터에-html문법이-자동으로-적용되는-현상)
    - [2) GET 요청을 통해 데이터를 받아올 때 적용이 되지 않는 현상](#2-get-요청을-통해-데이터를-받아올-때-적용이-되지-않는-현상)
  - [2. React Quill을 걷어내다](#2-react-quill을-걷어내다)
  - [3. Redo, Undo가 작동하지 않다](#3-redo-undo가-작동하지-않다)
- [🙏 마무리하며..](#-마무리하며)

<br>

# 🌈 Background
팀 프로젝트 때, README를 작성하면서 겪었던 불편함을 해소하기 위해 시작한 프로젝트입니다. Markdown 문법은 알고 있지만 자주 쓰지 않기에 그때 그때 찾아야 하는 번거로움이 있습니다. 이와 비슷한 불편함이 다른 개발자들도 분명 있을거라 생각이 되었습니다.

EASYME.md를 통해 조금이라도 개발자들이 README를 작성하는데 겪는 불편함이 해소되길 바라는 마음으로 만들게 되었습니다.

<br>

# 🔗 Link

- [https://www.easy-me.com](https://www.easy-me.com/)

## Github Repositories

- Client: [https://github.com/EASYME-md/client](https://github.com/EASYME-md/client)
- Server: [https://github.com/EASYME-md/server](https://github.com/EASYME-md/server)

<br>

# 🔍 Preview

![title](public/assets/readme/preview.gif)

<br>

# 🛠 Features
- Screen
    - 왼쪽 화면은 직접 텍스트를 작성할 수 있는 Editor입니다.
    - 오른쪽 화면은 왼쪽 텍스트 작성에 따라 Markdown 문법이 적용된 Preview를 확인할 수 있습니다.
    - 상단에 Custom Toolbar를 통해 텍스트 Style을 Markdown 문법으로 적용할 수 있습니다.

- Custom Toolbar
    - 커서 위치, 텍스트 드래그를 기준으로 Markdown 기능이 적용됩니다.
    - 드래그한 영역을 대소문자로 변형을 해줍니다.
    - 드래그한 영역을 리스트로 만들어줍니다.
    - 접기, 목차, 테이블 등의 템플릿을 제공합니다.
    - Editor 화면만 보기, Markdown 화면만 보기, Full Screen 모드를 제공합니다.

- 공유하기 / 저장하기
    - 공유하기 아이콘 버튼을 클릭하면 작성한 글이 저장되며 링크가 생성됩니다.
    - 작성한 글을 저장하고 다른 사람에 공유할 수 있습니다.
    - 작성 도중 단축키 `Ctrl+S(Command+S)`로 글을 저장할 수도 있습니다.

<br>

# 📈 Release Note
| version | log |
| --- | --- |
| 0.1.0 | 툴바에 텍스트 전체 삭제 기능 추가, Tab Key 기능 추가 |
| ~ 0.0.1 | 기능 적용시 스크롤 최상단으로 가는 현상 개선, 저장 및 공유 기능 개선 |

<br>

# ⚠️ Requirement

최신 Chrome Browser 사용을 권장합니다.

<br>

# ⚙️ Installation

## Setup

- Local 환경에서 실행하기 위해 아래 사전 준비가 필요합니다.
    - [MongoDB Address](https://www.mongodb.com/ko-kr/cloud/atlas/efficiency)
    - [Google Analytics Tracking ID](https://analytics.google.com/analytics/web)

## Client

```
git clone https://github.com/EASYME-md/client
cd client
npm install
npm start
```

- root 디렉토리에 `.env` 파일을 생성하고 `<>`에 환경변수를 입력 후 저장해주세요.

```
REACT_APP_SERVER_URI=https://api.easy-me.com
REACT_APP_CLIENT_URI=https://easy-me.com
REACT_APP_TRACKING_ID=<GA Tracking ID>
```

## Server

```
git clone https://github.com/EASYME-md/server
cd server
npm install
npm start
```

- root 디렉토리에 `.env` 파일을 생성하고 `<>`에 환경변수를 입력 후 저장해주세요.

```
MONGODB_ADDRESS=<mongoDB address>
CLIENT_URI=https://easy-me.com
```

<br>

# 🪃 Skills

## Client

- ES2015+
- React
- React Router
- React Helmet
- Redux Toolkit
- Redux Saga
- Google Analytics
- Emotion

## Server

- ES2015+
- Node.js
- Express
- MongoDB Atlas
- Mongoose

## Test

- Client: Jest, Testing Library
- Server: Mocha, Chai, Supertest

<br>

# 🪛 Project Control

- Version Control: Git, Github
- Task Control: Notion, Figma

<br>

# 🚀 Deployment

- Client: Netlify
- Server: AWS Elastic Beanstalk

<br>

# 🧗 Challenges

2주 동안 기능 개발을 하면서 겪은 어려움 또는 도전은 아래와 같습니다.

<br>

## 1. React Quill을 선택, 그리고 그 안에서 도전

초기 에디터 구현은 현재 작업이 완료된 `<textarea>`가 아닌 `React Quill`이라는 에디터 라이브러리를 사용했습니다. 그 당시 에디터 라이브러리를 선택할 때 스스로 몇 가지 기준을 두었습니다.

Markdown을 미리 볼 수 있어야하기 때문에 **Markdown Preview와 연동이 원활해야 할 것**, Tool의 기능들은 직접 구현할 것이기 때문에 **Markdown 문법을 직접 제공하는 에디터는 피할 것(또는 있어도 사용하지 말 것)**, 즉 **Toolbar를 Custom하게 작업할 수 있는 라이브러리를 선택**할 것. 그 외에도 npm trends를 통해 라이브러리의 크기, 이용자 수, 이슈, 업데이트 등을 확인하였고 가장 적합하다고 판단한 `React Quill`을 선택하게 되었습니다.

### 1) 에디터에 HTML문법이 자동으로 적용되는 현상

Quill 에디터에서 텍스트를 작성하면 자동으로 HTML문법이 적용됩니다. 예를 들어 `안녕하세요`라는 글자를 작성하면 에디터에는 보이지 않지만 내부적으로 `<p>안녕하세요</p>` 라고 적용이 되는 것이죠. 이렇게 되면 문제는 Markdown Preview에서 Markdown 문법이 제대로 보이지 않고 HTML Tag가 그대로 보여집니다. 이를 해결하기 위해 텍스트 value를 Quill의 메서드 `getText()`안에 넣어주면 HTML Tag를 제외하고 오직 텍스트만 적용됩니다. 그러나 이렇게 할 경우 또 다른 문제가 발생하였는데요.

`getText()`를 사용할 경우 기존에 잘 작성되던 텍스트가 1글자만 쳐진다는 것이었습니다. 이 문제는 Quill 컴포넌트의 속성 `value`를 `defaultValue`로 변경해주니 해결할 수 있었습니다. 하지만 이때까지만 해도 또 다른 문제가 발생할 것이라고는 상상하지 못했습니다.

### 2) GET 요청을 통해 데이터를 받아올 때 적용이 되지 않는 현상

그렇습니다. 바로 이것이 위와 연결되는 문제입니다. `defaultValue`를 적용할 경우 서버에 저장된 데이터를 받아올 때 해당 데이터가 적용되지 않았습니다. `defaultValue`라는 이름과 걸맞게 기존에 세팅해둔 텍스트 value만 나올 뿐 새로 받아온 텍스트 value는 적용되지 않았던 것입니다. 되돌아가서 `defaultValue`라는 속성을 `value`로 바꾸니 잘 적용이 되었지만 역시 위에서 설명한 것처럼 1글자만 쳐지는 현상이 생겼고 이 대립의 상황에 전전긍긍했습니다.

**아, 상태!** 떠올랐습니다. 텍스트 value는 모두 상태에서 관리하고 공유됩니다. GET 요청으로 받아온 데이터 역시 상태에 저장되고 공유받습니다. 그렇다면 `defaultValue`에 값을 넣기 전에 상태를 확인하고 유무에 따라 값을 제어하면 되지 않을까요? 맞습니다. 처음에 화면이 렌더링 될 때 로딩 상태로 두고 로딩 상태일 때 화면을 보여주지 않기로 합니다. 로딩 상태일 때 GET 요청을 통해 데이터를 받고 요청이 성공 여부에 따라 화면을 보여주기로 했습니다. 결과는 성공적이었습니다.

이로써 문제는 해결할 수 있었고, 유한상태기계라는 개념을 숙지할 수 있었던 계기가 되었습니다.

<br>

## 2. React Quill을 걷어내다

Quill에서 제공하는 기본 메서드와 Custom Toolbar 등으로 작업을 시작한 1주 차에 기능 구현이 거의 마무리가 되었습니다. 생각보다 일찍 기능 구현이 끝났기 때문에 스스로에게도 고민이 생겼습니다. 기능 외의 것들을 더 신경 쓸 수 있는 시간이 확보되었다는 것은 긍정적인 사실이나, **'기술적인 도전과 성장'에 초점을 두었을 때 스스로 이로운 방향은 아닐 수도 있겠다는 생각이 들었습니다.** 그래서 과감하게 Quill을 걷어내고 기본으로 제공하는 `<textarea>`를 사용하기로 했습니다.

결론적으로, `<textarea>`를 사용했을 때 오히려 이로운 점이 많았습니다. 기존에 Quill을 사용했을 때는 Quill에 의존하여 제한적인 부분이 많았습니다. Quill에서는 module과 format을 세팅해야 하는 번거로움이 있었고, module안에 Custom Toolbar의 Event Handling을 구현할 때 각각 Component로 구현하는 것이 아닌 Event Handling 함수를 직접 넣어줘야 했습니다. 그래서 각각의 Tool을 보여주는 Component를 만들고 그 안에 해당 기능을 동작하는 Event Handling 함수를 넣는 것이 아니라 따로 바깥에 만들어주고 export 시켜준 함수를 import 받아서 module에 적용해야만 했습니다. 폴더 구조나 코드가 복잡해진다는 단점도 존재했습니다.

`<textarea>`로 변경한 후에 훨씬 유연해졌습니다. 각 기능과 동작을 Component 안에서 모두 해결할 수 있었습니다. Component도 훨씬 깔끔해졌습니다. Quill 내부에 값들을 `console.log`를 통해 확인해가며 기능을 적용했던 경험이 `<textarea>`에서도 고스란히 도움이 되었습니다. 커서의 위치, 드래그 영역 계산, 드래그가 여러 행일 경우 각 행의 첫 번째 index를 찾는 것 등 `<textarea>`가 Quill에 비해 잘 정제되어 있지는 않았지만 보다 내부 메서드나 value가 방대했고 잘 적용하기만 한다면 제한적인 부분이 덜했기 때문에 `<textarea>`로 이전한 것은 좋은 결정이었다고 생각합니다.

<br>

## 3. Redo, Undo가 작동하지 않다

`<textarea>`를 사용할 경우 큰 문제점이 하나 있었습니다. 바로 redo, undo(`Ctrl/Command+Z` 포함)가 작동되지 않는다는 것입니다. textarea의 current.value 값을 찾아서 직접 변경해주기 때문에 이전 값을 기억하지 못하는 것으로 생각되었습니다.

이에 대해 `document.execCommand()`를 사용하여 해결할 수 있었습니다. 하지만 MDN에 따르면 해당 메서드는 더 이상 사용하지 않으며 권장하지 않는 방법이라고 명시되어 있었습니다. 오랜 시도와 도전 끝에 '변경된 값을 그대로 `return`하는 게 아니라 `return`하기 전에 replace를 해주면 되지 않을까?'라는 아이디어가 떠 올랐고 `replace()`를 사용했지만 끝내 실패했습니다.

해결책을 마련하기 위해 여러 차례 방법을 모색하던중 `text-field-edit`이라는 라이브러리를 알게 되었습니다. 해당 라이브러리는 자체적으로 텍스트를 다른 텍스트로 감싸주거나 insertText 기능 등 Markdown 문법을 적용하기에 훨씬 수월하게 설계되어 있었던 라이브러리였습니다. **하지만 단순히 라이브러리로 쉽게 적용하는 것은 스스로 성장에도 도움이 되지 않을 거라 판단했고,** textarea 안에 요소들을 토대로 직접 구현하는 게 더 의미가 있다고 생각했습니다. 대신에 해당 라이브러리의 `replace` 기능만 활용하기로 했습니다. 초기에 생각했던 아이디어의 가능여부를 확인하고 싶었기 때문입니다. 결국 `replace`를 사용하여 redo, undo가 작동되는 것을 확인할 수 있었습니다.

내 아이디어가 어느 정도 증명되었다는 것에서 뿌듯함을 느낀 것은 사실이지만 라이브러리의 도움 없이 직접 구현해보고 싶었던 마음이었기에 내심 아쉬움도 있습니다. 이 부분은 여기서 끝내지 않고 스스로가 더 성장할 수 있도록 직접 구현에 도전할 예정입니다.

<br>

# 🙏 마무리하며..

"가능할까? 가능하다!"   

개발자로 전향을 마음먹기 전, 스타트업 회사에서 마케터로 3년 가까이 있었습니다. 고객들의 불편함을 해소해주는 일들을 옆에서 지켜보고 동참하면서 언젠간 '내가 직접 만든 제품이 고객들의 불편함을 조금이나마 해소해줄 수 있다면 좋겠다'는 생각을 했습니다.   

그 첫 시작이 이 프로젝트라고 생각합니다. 스스로 고객(여기서는 수많은 개발자 중 한 명이겠죠)이 되어 README를 작성할 때 겪었던 불편함을 개선해보고 싶었습니다. 단순히 머릿속에 둥둥 떠다니는 아이디어가 '가능할까?'라는 호기심 어린 물음에서 '가능하다!'라는 마침표를 찍었다는 점에서 의미가 깊습니다.   

이 프로젝트를 시작으로 새로운 마침표들을 하나둘씩 찍어가는 개발자가 되고 싶습니다 🙂   


================================================
FILE: babel.config.js
================================================
module.exports = {
  'presets': [
    '@babel/preset-env',
    [
      '@babel/preset-react',
      {
        'runtime': 'automatic',
      }
    ]
  ],
};


================================================
FILE: jest.config.js
================================================
module.exports = {
  moduleFileExtensions: ['js', 'json', 'jsx'],
  transform: {
    '^.+\\.(js|jsx)?$': 'babel-jest',
  },
  moduleNameMapper: {
    '^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
  },
  testMatch: [
    '<rootDir>/**/*.test.(js|jsx)'
  ],
  transformIgnorePatterns: [
    '<rootDir>/node_modules/(?!text-field-edit)'
  ],
  'setupFilesAfterEnv': ['<rootDir>/src/setupTests.js'],
};


================================================
FILE: package.json
================================================
{
  "name": "easyme",
  "homepage": "https://www.easy-me.com",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@reduxjs/toolkit": "^1.6.1",
    "@uiw/react-markdown-preview": "^3.3.3",
    "lz-string": "^1.5.0",
    "nanoid": "^3.1.28",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-ga": "^3.3.0",
    "react-helmet-async": "^1.1.2",
    "react-icons": "^4.2.0",
    "react-redux": "^7.2.5",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "redux-saga": "^1.1.3",
    "text-field-edit": "^3.1.1"
  },
  "devDependencies": {
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "jest-environment-jsdom": "^27.2.5",
    "jest-transform-stub": "^2.0.0",
    "redux-logger": "^3.0.6"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest --watchAll",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}


================================================
FILE: public/_redirects
================================================
/.well-known/*  /.well-known/:splat  200!
/*              /index.html          200


================================================
FILE: public/index.html
================================================
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#2E3341" />

    <title>EASYME.md | 누구나 쉬운 README·리드미 온라인 마크다운 실시간 미리보기 에디터</title>
    <meta name="description" content="EASYME.md(이지미)는 README와 Markdown 문법에 익숙하지 않아도 편하게 글을 작성할 수 있는 웹 에디터입니다. 툴바로 서식 적용, 실시간 미리보기, 링크 한 번으로 공유까지 지원합니다." />
    <meta name="keywords" content="easyme, readme, 리드미, 이지미, markdown, markdownsite, 마크다운, 마크다운작성사이트, 마크다운에디터, 실시간 미리보기" />
    <meta name="robots" content="index, follow" />
    <meta name="google-site-verification" content="sioQswZ6K0vzDLaveDWBachAp5y9pCFuv_2widqDXc4" />
    <meta name="naver-site-verification" content="59a8659d9d6fce0d75c4e70921609fad75cd54fa" />

    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <link rel="canonical" href="https://www.easy-me.com/" />

    <meta property="og:type" content="website" />
    <meta property="og:locale" content="ko_KR" />
    <meta property="og:site_name" content="EASYME.md" />
    <meta property="og:title" content="EASYME.md | 누구나 쉬운 README·리드미 온라인 마크다운 실시간 미리보기 에디터" />
    <meta property="og:description" content="EASYME.md(이지미)는 README와 Markdown 문법에 익숙하지 않아도 편하게 글을 작성할 수 있는 웹 에디터입니다. 툴바로 서식 적용, 실시간 미리보기, 링크 한 번으로 공유까지 지원합니다." />
    <meta property="og:url" content="https://www.easy-me.com/" />
    <meta property="og:image" content="https://www.easy-me.com/preview.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="EASYME.md | 누구나 쉬운 README·리드미 온라인 마크다운 실시간 미리보기 에디터" />
    <meta name="twitter:description" content="EASYME.md(이지미)는 README와 Markdown 문법에 익숙하지 않아도 편하게 글을 작성할 수 있는 웹 에디터입니다. 툴바로 서식 적용, 실시간 미리보기, 링크 한 번으로 공유까지 지원합니다." />
    <meta name="twitter:image" content="https://www.easy-me.com/preview.png" />
  </head>
  <body>
    <noscript>이 사이트를 이용하려면 JavaScript를 활성화해주세요.</noscript>
    <div id="root"></div>
  </body>
</html>


================================================
FILE: public/robots.txt
================================================
Sitemap: https://www.easy-me.com/sitemap.xml
User-agent: *
Allow: /


================================================
FILE: public/sitemap.xml
================================================
<?xml version="1.0" encoding="UTF-8"?>
<urlset
      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">

<url>
  <loc>https://www.easy-me.com</loc>
  <lastmod>2026-04-15</lastmod>
  <changefreq>weekly</changefreq>
  <priority>1.0</priority>
</url>
<url>
  <loc>https://www.easy-me.com/d</loc>
  <lastmod>2026-04-15</lastmod>
  <changefreq>weekly</changefreq>
  <priority>0.8</priority>
</url>

</urlset>


================================================
FILE: src/App.js
================================================
import React from 'react';
import ReactGA from 'react-ga';
import { createBrowserHistory } from 'history';
import { Router, Route, Redirect, Switch } from 'react-router-dom';

import Home from './components/Home';
import ErrorPage from './components/shared/ErrorPage';
import ReactHelmet from './components/ReactHelmet';

const App = () => {
  const TRACKING_ID = process.env.REACT_APP_TRACKING_ID;
  const history = createBrowserHistory();
  const pathName = window.location.pathname;

  ReactGA.initialize(TRACKING_ID);

  history.listen(() => {
    ReactGA.set({ page: pathName });
    ReactGA.pageview(pathName);
  });

  return (
    <Router history={history}>
      <ReactHelmet />
      <Switch>
        <Route exact path='/d' component={Home} />
        <Route path='/d/:linkId' component={Home} />
        <Route>
          <ErrorPage message='404 Not Found' />
        </Route>
      </Switch>
      <Route exact path='/'>
        <Redirect to={{ pathname: '/d', hash: window.location.hash }} />
      </Route>
    </Router>
  );
};

export default App;


================================================
FILE: src/api/index.js
================================================
const SERVER_URI = process.env.REACT_APP_SERVER_URI;

export const fetchContents = async (linkId) => {
  try {
    if (!linkId) {
      return;
    }

    const response = await fetch(`${SERVER_URI}/d/${linkId}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
    });

    const { message, code, text } = await response.json();

    if (message === 'NOT_FOUND') {
      throw new Error(`${code} Not Found`);
    }

    if (message === 'OK') {
      return text;
    }
  } catch (err) {
    throw err.message;
  }
};

export const saveContents = async (linkId, text) => {
  try {
    const response = await fetch(`${SERVER_URI}/d/${linkId}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
      body: JSON.stringify({ linkId, text }),
    });

    const { code, message } = await response.json();

    if (message !== 'OK') {
      throw Error(`${code} Internal Server Error`);
    }

  } catch (err) {
    throw err.message;
  }
};


================================================
FILE: src/assets/fonts/font.css
================================================
@font-face {
  font-family: 'Rubik';
  font-display: fallback;

  src: local('Rubik'),
      url('./Rubik-ExtraBold.eot?iefix') format('embedded-opentype'),
      url('./Rubik-ExtraBold.woff2') format('woff2'),
      url('./Rubik-ExtraBold.woff') format('woff'),
      url('./Rubik-ExtraBold.ttf') format('truetype');

  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans KR';
  font-display: fallback;

  src: local('Noto Sans KR'),
      url('./NotoSansKR-Regular.eot?iefix') format('embedded-opentype'),
      url('./NotoSansKR-Regular.woff2') format('woff2'),
      url('./NotoSansKR-Regular.woff') format('woff'),
      url('./NotoSansKR-Regular.ttf') format('truetype');

  font-style: normal;
}


================================================
FILE: src/components/CustomToolbar.js
================================================
import React from 'react';
import styled from '@emotion/styled';

import CustomUndo from './CustomTools/CustomUndo';
import CustomRedo from './CustomTools/CustomRedo';
import CustomHeader from './CustomTools/CustomHeader';
import CustomBold from './CustomTools/CustomBold';
import CustomItalic from './CustomTools/CustomItalic';
import CustomStrikethrough from './CustomTools/CustomStrikethrough';
import CustomUnderline from './CustomTools/CustomUnderline';
import CustomHorizontalRule from './CustomTools/CustomHorizontalRule';
import CustomBlockQuote from './CustomTools/CustomBlockQuote';
import CustomFold from './CustomTools/CustomFold';
import CustomFirstLetterUppercase from './CustomTools/CustomFirstLetterUppercase';
import CustomUppercase from './CustomTools/CustomUppercase';
import CustomLowercase from './CustomTools/CustomLowercase';
import CustomContents from './CustomTools/CustomContents';
import CustomUnOrderedList from './CustomTools/CustomUnOrderedList';
import CustomOrderedList from './CustomTools/CustomOrderedList';
import CustomLink from './CustomTools/CustomLink';
import CustomImageLink from './CustomTools/CustomImageLink';
import CustomCodeInline from './CustomTools/CustomCodeInline';
import CustomCodeBlock from './CustomTools/CustomCodeBlock';
import CustomTable from './CustomTools/CustomTable';
import CustomEditorView from './CustomTools/CustomEditorView';
import CustomMarkdownView from './CustomTools/CustomMarkdownView';
import CustomFullScreen from './CustomTools/CustomFullScreen';
import CustomAllTextRemoval from './CustomTools/CustomAllTextRemoval';
import CustomShare from './CustomTools/CustomShare';
import SectionLine from './shared/SectionLine';

const CustomToolbar = () => {
  return (
    <ToolbarWrapper>
      <CustomRedo />
      <CustomUndo />
      <CustomAllTextRemoval />
      <SectionLine />
      <CustomHeader />
      <SectionLine />
      <CustomBold />
      <CustomItalic />
      <CustomStrikethrough />
      <CustomUnderline />
      <CustomHorizontalRule />
      <CustomBlockQuote />
      <CustomFold />
      <SectionLine />
      <CustomFirstLetterUppercase />
      <CustomUppercase />
      <CustomLowercase />
      <SectionLine />
      <CustomContents />
      <CustomUnOrderedList />
      <CustomOrderedList />
      <CustomLink />
      <CustomImageLink />
      <CustomCodeInline />
      <CustomCodeBlock />
      <CustomTable />
      <SectionLine />
      <CustomEditorView />
      <CustomMarkdownView />
      <CustomFullScreen />
      <SectionLine />
      <CustomShare />
    </ToolbarWrapper>
  );
};

const ToolbarWrapper = styled.div`
  button {
    cursor: pointer;
    vertical-align: middle;
    border: none;
    background: none;
  }

  svg {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
  }

  select {
    font-weight: 600;
    font-family: inherit;
    padding: 3px;
    width: 120px;
    border: 1px solid #dddddd;

    :focus {
      outline: none;
    }
  }
`;

export default CustomToolbar;


================================================
FILE: src/components/CustomTools/CustomAllTextRemoval.js
================================================
import React from 'react';
import { FaEraser } from 'react-icons/fa';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import { replace } from 'text-field-edit';

const CustomAllTextRemoval = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const emptyText = '';

    replace(textArea, textArea.value, emptyText);
    textArea.focus();
    dispatch(addText(emptyText));
  };

  return (
    <button title='Remove all text' onClick={handleButton}>
      <FaEraser />
    </button>
  );
};

export default CustomAllTextRemoval;


================================================
FILE: src/components/CustomTools/CustomBlockQuote.js
================================================
import React from 'react';
import { FaQuoteLeft } from 'react-icons/fa';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeCurrentRow from '../../utils/addTypeCurrentRow';

const CustomBlockQuote = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const resultValue = addTypeCurrentRow(textArea, '>');

    dispatch(addText(resultValue));
  };

  return (
    <button title='Block quote' onClick={handleButton}>
      <FaQuoteLeft />
    </button>
  );
};

export default CustomBlockQuote;


================================================
FILE: src/components/CustomTools/CustomBold.js
================================================
import React from 'react';
import { FaBold } from 'react-icons/fa';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeBeforeAndAfter from '../../utils/addTypeBeforeAndAfter';

const CustomBold = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const resultValue = addTypeBeforeAndAfter(textArea, '**');

    dispatch(addText(resultValue));
  };

  return (
    <button title='Bold' onClick={handleButton}>
      <FaBold />
    </button>
  );
};

export default CustomBold;


================================================
FILE: src/components/CustomTools/CustomCodeBlock.js
================================================
import React from 'react';
import { GoFileCode } from 'react-icons/go';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeBeforeAndAfter from '../../utils/addTypeBeforeAndAfter';

const CustomCodeBlock = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const resultValue = addTypeBeforeAndAfter(textArea, '\n```\n', '\n```\n');

    dispatch(addText(resultValue));
  };

  return (
    <button title='Code block' onClick={handleButton}>
      <GoFileCode />
    </button>
  );
};

export default CustomCodeBlock;


================================================
FILE: src/components/CustomTools/CustomCodeInline.js
================================================
import React from 'react';
import { FaCode } from 'react-icons/fa';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeBeforeAndAfter from '../../utils/addTypeBeforeAndAfter';

const CustomCodeInline = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const resultValue = addTypeBeforeAndAfter(textArea, '`', '`');

    dispatch(addText(resultValue));
  };

  return (
    <button title='Code inline' onClick={handleButton}>
      <FaCode />
    </button>
  );
};

export default CustomCodeInline;


================================================
FILE: src/components/CustomTools/CustomContents.js
================================================
import React from 'react';
import { CgListTree } from 'react-icons/cg';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeCurrentPosition from '../../utils/addTypeCurrentPosition';

const CustomContents = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const resultValue = addTypeCurrentPosition(textArea, '1. [title1](#write-title-here!)   \n2. [title2](#only-lowercase)   \n3. [title3](#use"-"instead-of-spacing-words)   \n4. [title4](#example)   \n    - [❓ EASYME.md가 뭐예요?](#-easymemd가-뭐예요)   \n    - [🛠 기능 엿보기](#-기능-엿보기)');

    dispatch(addText(resultValue));
  };

  return (
    <button title='Table of contents' onClick={handleButton}>
      <CgListTree />
    </button>
  );
};

export default CustomContents;


================================================
FILE: src/components/CustomTools/CustomEditorView.js
================================================
import React from 'react';
import { MdSpeakerNotes, MdSpeakerNotesOff } from 'react-icons/md';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { toggleEditor } from '../../features/slice';

const CustomEditorView = () => {
  const dispatch = useDispatch();
  const { fullEditor } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    dispatch(toggleEditor());
  };

  return (
    <button title='Only editor preview' onClick={handleButton}>
      {fullEditor
        ? <MdSpeakerNotesOff />
        : <MdSpeakerNotes />}
    </button>
  );
};

export default CustomEditorView;


================================================
FILE: src/components/CustomTools/CustomFirstLetterUppercase.js
================================================
import React from 'react';
import { IoText } from 'react-icons/io5';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
import { insert } from 'text-field-edit';

import { addText } from '../../features/slice';

const CustomFirstLetterUppercase = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const startPosition = textArea.selectionStart;
    const endPosition = textArea.selectionEnd;
    if (startPosition === endPosition) return;

    const scroll = textArea.scrollTop;
    const draggedText = textArea.value.substring(startPosition, endPosition);
    const firstLetter = draggedText.substring(0, 1).toUpperCase();
    const restLetters = draggedText.substring(1).toLowerCase();
    const transformed = firstLetter + restLetters;

    textArea.focus();
    insert(textArea, transformed);
    textArea.setSelectionRange(startPosition, endPosition);
    textArea.scrollTop = scroll;

    dispatch(addText(textArea.value));
  };

  return (
    <button
      title='Convert first letter to uppercase'
      onClick={handleButton}
    >
      <IoText />
    </button>
  );
};

export default CustomFirstLetterUppercase;


================================================
FILE: src/components/CustomTools/CustomFold.js
================================================
import React from 'react';
import { AiOutlineCaretRight } from 'react-icons/ai';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeBeforeAndAfter from '../../utils/addTypeBeforeAndAfter';

const CustomFold = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const resultValue = addTypeBeforeAndAfter(textArea, '\n<details><summary>', '\n</summary>\n\n*Write here!*\n</details>\n');

    dispatch(addText(resultValue));
  };

  return (
    <button title='Fold' onClick={handleButton}>
      <AiOutlineCaretRight />
    </button>
  );
};

export default CustomFold;


================================================
FILE: src/components/CustomTools/CustomFullScreen.js
================================================
import React from 'react';
import { BsArrowsFullscreen, BsFullscreenExit } from 'react-icons/bs';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { toggleFullScreen } from '../../features/slice';

const CustomFullScreen = () => {
  const dispatch = useDispatch();
  const { fullScreen } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    dispatch(toggleFullScreen());
  };

  return (
    <button title='Full screen' onClick={handleButton}>
      {fullScreen
        ? <BsFullscreenExit />
        : <BsArrowsFullscreen />}
    </button>
  );
};

export default CustomFullScreen;


================================================
FILE: src/components/CustomTools/CustomHeader.js
================================================
import React from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeCurrentRow from '../../utils/addTypeCurrentRow';

const CustomHeader = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = (e) => {
    const targetValue = e.target.value;
    let header = '';

    for (let i = 0; i < targetValue; i++) {
      header += '#';
    }

    header += ' ';

    const resultValue = addTypeCurrentRow(textArea, header);

    dispatch(addText(resultValue));
    e.target.value = 0;
  };

  return (
    <select onChange={handleButton}>
      <option value={0}>Select Header</option>
      <option value={1}># Heading</option>
      <option value={2}>## Heading</option>
      <option value={3}>### Heading</option>
      <option value={4}>#### Heading</option>
      <option value={5}>##### Heading</option>
      <option value={6}>###### Heading</option>
    </select>
  );
};

export default CustomHeader;


================================================
FILE: src/components/CustomTools/CustomHorizontalRule.js
================================================
import React from 'react';
import { AiOutlineLine } from 'react-icons/ai';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeCurrentPosition from '../../utils/addTypeCurrentPosition';

const CustomHorizontalRule = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const resultValue = addTypeCurrentPosition(textArea, '\n---\n');

    dispatch(addText(resultValue));
  };

  return (
    <button title='Horizontal rule' onClick={handleButton}>
      <AiOutlineLine />
    </button>
  );
};

export default CustomHorizontalRule;


================================================
FILE: src/components/CustomTools/CustomImageLink.js
================================================
import React from 'react';
import { FaRegImage } from 'react-icons/fa';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeCurrentPosition from '../../utils/addTypeCurrentPosition';

const CustomImageLink = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const link = prompt('Enter the Image URL', 'http://');

    if (link) {
      const resultValue = addTypeCurrentPosition(textArea, `![title](${link})   \n`);

      dispatch(addText(resultValue));
    }
  };

  return (
    <button title='image' onClick={handleButton}>
      <FaRegImage />
    </button>
  );
};

export default CustomImageLink;


================================================
FILE: src/components/CustomTools/CustomItalic.js
================================================
import React from 'react';
import { FaItalic } from 'react-icons/fa';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeBeforeAndAfter from '../../utils/addTypeBeforeAndAfter';

const CustomItalic = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const resultValue = addTypeBeforeAndAfter(textArea, '*');

    dispatch(addText(resultValue));
  };

  return (
    <button title='Italic' onClick={handleButton}>
      <FaItalic />
    </button>
  );
};

export default CustomItalic;


================================================
FILE: src/components/CustomTools/CustomLink.js
================================================
import React from 'react';
import { FaLink } from 'react-icons/fa';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeCurrentPosition from '../../utils/addTypeCurrentPosition';

const CustomLink = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const link = prompt('Enter the URL', 'http://');

    if (link) {
      const resultValue = addTypeCurrentPosition(textArea, `[title](${link})   \n`);

      dispatch(addText(resultValue));
    }
  };

  return (
    <button title='Link' onClick={handleButton}>
      <FaLink />
    </button>
  );
};

export default CustomLink;


================================================
FILE: src/components/CustomTools/CustomLowercase.js
================================================
import React from 'react';
import { FaAmilia } from 'react-icons/fa';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
import { insert } from 'text-field-edit';

import { addText } from '../../features/slice';

const CustomLowercase = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const startPosition = textArea.selectionStart;
    const endPosition = textArea.selectionEnd;
    if (startPosition === endPosition) return;

    const scroll = textArea.scrollTop;
    const draggedText = textArea.value.substring(startPosition, endPosition).toLowerCase();

    textArea.focus();
    insert(textArea, draggedText);
    textArea.setSelectionRange(startPosition, endPosition);
    textArea.scrollTop = scroll;

    dispatch(addText(textArea.value));
  };

  return (
    <button title='Lowercase' onClick={handleButton}>
      <FaAmilia />
    </button>
  );
};

export default CustomLowercase;


================================================
FILE: src/components/CustomTools/CustomMarkdownView.js
================================================
import React from 'react';
import { BsEyeFill, BsFillEyeSlashFill } from 'react-icons/bs';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { toggleMarkdown } from '../../features/slice';

const CustomMarkdownView = () => {
  const dispatch = useDispatch();
  const { fullMarkdown } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    dispatch(toggleMarkdown());
  };

  return (
    <button title='Only markdown preview' onClick={handleButton}>
      {fullMarkdown
        ? <BsFillEyeSlashFill />
        : <BsEyeFill />}
    </button>
  );
};

export default CustomMarkdownView;


================================================
FILE: src/components/CustomTools/CustomOrderedList.js
================================================
import React from 'react';
import { FaListOl } from 'react-icons/fa';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeDraggedRows from '../../utils/addTypeDraggedRows';

const CustomOrderedList = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const resultValue = addTypeDraggedRows(textArea, false);

    dispatch(addText(resultValue));
  };

  return (
    <button title='Ordered list' onClick={handleButton}>
      <FaListOl />
    </button>
  );
};

export default CustomOrderedList;


================================================
FILE: src/components/CustomTools/CustomRedo.js
================================================
import React from 'react';
import { FaRedoAlt } from 'react-icons/fa';

const CustomRedo = () => {
  const handleButton = () => {
    document.execCommand('redo');
  };

  return (
    <button title='Redo' onClick={handleButton}>
      <FaRedoAlt />
    </button>
  );
};

export default CustomRedo;


================================================
FILE: src/components/CustomTools/CustomShare.js
================================================
import React from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
import { FaShareSquare } from 'react-icons/fa';

import shareDocument from '../../utils/shareDocument';

const CustomShare = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => shareDocument(textArea, dispatch);

  return (
    <button title='Share link (Cmd/Ctrl+S)' onClick={handleButton}>
      <FaShareSquare />
    </button>
  );
};

export default CustomShare;


================================================
FILE: src/components/CustomTools/CustomStrikethrough.js
================================================
import React from 'react';
import { FaStrikethrough } from 'react-icons/fa';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeBeforeAndAfter from '../../utils/addTypeBeforeAndAfter';

const CustomStrikethrough = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const resultValue = addTypeBeforeAndAfter(textArea, '<s>', '</s>');

    dispatch(addText(resultValue));
  };

  return (
    <button title='Strikethrough' onClick={handleButton}>
      <FaStrikethrough />
    </button>
  );
};

export default CustomStrikethrough;


================================================
FILE: src/components/CustomTools/CustomTable.js
================================================
import React from 'react';
import { FaTable } from 'react-icons/fa';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeCurrentPosition from '../../utils/addTypeCurrentPosition';

const CustomTable = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const resultValue = addTypeCurrentPosition(textArea, '\n\n| title1 | title2 | title3 |\n| --- | --- | --- |\n| 1 | 2 | 3 |\n| 4 | 5 | 6 |\n| 7 | 8 | 9 |\n');

    dispatch(addText(resultValue));
  };

  return (
    <button title='Table' onClick={handleButton}>
      <FaTable />
    </button>
  );
};

export default CustomTable;


================================================
FILE: src/components/CustomTools/CustomUnOrderedList.js
================================================
import React from 'react';
import { FaListUl } from 'react-icons/fa';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeDraggedRows from '../../utils/addTypeDraggedRows';

const CustomUnOrderedList = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const resultValue = addTypeDraggedRows(textArea, '- ');

    dispatch(addText(resultValue));
  };

  return (
    <button title='Unordered list' onClick={handleButton}>
      <FaListUl />
    </button>
  );
};

export function handleUnOrderedList() {
  if (this.quill.getSelection()) {
    const cursorPosition = this.quill.getSelection().index;
    const lastCursorPosition = this.quill.selection.getRange()[0].length;
    const offset = this.quill.selection.getRange()[1].start.offset;
    const draggedRow = this.quill.getLines(cursorPosition, lastCursorPosition + 1);
    const draggedRowLength = draggedRow.length;
    let startingPosition = cursorPosition - offset;

    for (let i = 0; i < draggedRowLength; i++) {
      if (i === 0) {
        this.quill.insertText(startingPosition, '- ');
        continue;
      }

      const nextRow = draggedRow[i - 1].cache.length;
      startingPosition += nextRow;

      this.quill.insertText(startingPosition, '- ');
    }
  }
};

export default CustomUnOrderedList;


================================================
FILE: src/components/CustomTools/CustomUnderline.js
================================================
import React from 'react';
import { FaUnderline } from 'react-icons/fa';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText } from '../../features/slice';
import addTypeBeforeAndAfter from '../../utils/addTypeBeforeAndAfter';

const CustomUnderline = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const resultValue = addTypeBeforeAndAfter(textArea, '<u>', '</u>');

    dispatch(addText(resultValue));
  };

  return (
    <button title='Underline' onClick={handleButton}>
      <FaUnderline />
    </button>
  );
};

export default CustomUnderline;


================================================
FILE: src/components/CustomTools/CustomUndo.js
================================================
import React from 'react';
import { FaUndoAlt } from 'react-icons/fa';

const CustomUndo = () => {
  const handleButton = () => {
    document.execCommand('undo');
  };

  return (
    <button title='Undo' onClick={handleButton}>
      <FaUndoAlt />
    </button>
  );
};

export default CustomUndo;


================================================
FILE: src/components/CustomTools/CustomUppercase.js
================================================
import React from 'react';
import { FaFont } from 'react-icons/fa';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
import { insert } from 'text-field-edit';

import { addText } from '../../features/slice';

const CustomUppercase = () => {
  const dispatch = useDispatch();
  const { textArea } = useSelector((state) => state.contents, shallowEqual);

  const handleButton = () => {
    const startPosition = textArea.selectionStart;
    const endPosition = textArea.selectionEnd;
    if (startPosition === endPosition) return;

    const scroll = textArea.scrollTop;
    const draggedText = textArea.value.substring(startPosition, endPosition).toUpperCase();

    textArea.focus();
    insert(textArea, draggedText);
    textArea.setSelectionRange(startPosition, endPosition);
    textArea.scrollTop = scroll;

    dispatch(addText(textArea.value));
  };

  return (
    <button title='Uppercase' onClick={handleButton}>
      <FaFont />
    </button>
  );
};

export default CustomUppercase;


================================================
FILE: src/components/Editor.js
================================================
import React, { useEffect, useRef, useState } from 'react';
import styled from '@emotion/styled';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import { addText, addTextArea } from '../features/slice';
import addTypeBeforeAndAfter from '../utils/addTypeBeforeAndAfter';
import addTypeCurrentPosition from '../utils/addTypeCurrentPosition';
import shareDocument from '../utils/shareDocument';
import { saveDraft } from '../utils/draftStorage';
import { keyType } from '../constants';

const DISPATCH_DEBOUNCE_MS = 150;

const Editor = () => {
  const inputText = useRef();
  const dispatch = useDispatch();
  const { text, fullEditor, fullMarkdown } = useSelector((state) => state.contents, shallowEqual);

  const [localText, setLocalText] = useState(text);
  const debounceTimer = useRef();

  useEffect(() => {
    dispatch(addTextArea(inputText.current));
  }, [dispatch]);

  useEffect(() => {
    setLocalText((prev) => (prev === text ? prev : text));
  }, [text]);

  useEffect(() => () => clearTimeout(debounceTimer.current), []);

  const flushDispatch = (value) => {
    clearTimeout(debounceTimer.current);
    dispatch(addText(value));
    saveDraft(value);
  };

  const onChangeText = (e) => {
    const value = e.target.value;
    setLocalText(value);
    clearTimeout(debounceTimer.current);
    debounceTimer.current = setTimeout(() => {
      dispatch(addText(value));
      saveDraft(value);
    }, DISPATCH_DEBOUNCE_MS);
  };

  const handleKeyDown = async (e) => {
    const isMetaKey = e.metaKey || e.ctrlKey;

    if (e.keyCode === keyType.TAB) {
      e.preventDefault();
      const resultValue = addTypeCurrentPosition(inputText.current, '  ');

      setLocalText(resultValue);
      flushDispatch(resultValue);
    }

    if (e.keyCode === keyType.S && isMetaKey) {
      e.preventDefault();
      shareDocument(inputText.current, dispatch);
    }

    if (e.keyCode === keyType.B && isMetaKey) {
      const resultValue = addTypeBeforeAndAfter(inputText.current, '**');

      setLocalText(resultValue);
      flushDispatch(resultValue);
    }

    if (e.keyCode === keyType.I && isMetaKey) {
      const resultValue = addTypeBeforeAndAfter(inputText.current, '*');

      setLocalText(resultValue);
      flushDispatch(resultValue);
    }

    if (e.keyCode === keyType.D && isMetaKey) {
      e.preventDefault();
      const resultValue = addTypeBeforeAndAfter(inputText.current, '<s>', '</s>');

      setLocalText(resultValue);
      flushDispatch(resultValue);
    }

    if (e.keyCode === keyType.U && isMetaKey) {
      e.preventDefault();
      const resultValue = addTypeBeforeAndAfter(inputText.current, '<u>', '</u>');

      setLocalText(resultValue);
      flushDispatch(resultValue);
    }
  };

  const handleClassName = () => {
    if (fullEditor) {
      return 'full-editor';
    }

    if (fullMarkdown) {
      return 'none-editor';
    }

    return '';
  };

  return (
    <TextArea
      id='textarea'
      className={handleClassName()}
      value={localText}
      onChange={onChangeText}
      onKeyDown={handleKeyDown}
      ref={inputText}
      spellCheck='false'
    />
  );
};

const TextArea = styled.textarea`
  resize: none;
  box-sizing: border-box;
  font-family: 'Noto Sans KR';
  font-size: 16px;
  padding: 20px;
  border: none;
  border-right: 1px solid #dddddd;
  width: 50%;

  :focus {
    outline: none;
  }

  ${({ className }) => {
    if (className === 'full-editor') {
      return `
        width: 100% !important;
      `;
    }

    if (className === 'none-editor') {
      return `
        display: none;
      `;
    }
  }};

  @media (max-width: 768px) {
    width: 100%;
    height: 50%;
    border-right: none;
    border-bottom: 1px solid #dddddd;
    padding: 12px;
    font-size: 15px;
  }
`;

export default Editor;


================================================
FILE: src/components/Home.js
================================================
import React, { useEffect } from 'react';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
import { useLocation } from 'react-router-dom';

import Title from './Title';
import TextScreen from './TextScreen';
import ErrorPage from './shared/ErrorPage';
import Loading from './Loading';
import { load, loadSuccess, resetError } from '../features/slice';
import { parseShareHash } from '../utils/urlShare';
import { loadDraft } from '../utils/draftStorage';

const Home = () => {
  const dispatch = useDispatch();
  const { pathname } = useLocation();
  const { isLoading, error } = useSelector((state) => state.contents, shallowEqual);

  useEffect(() => {
    dispatch(resetError());

    const hashText = parseShareHash(window.location.hash);
    if (hashText) {
      dispatch(loadSuccess(hashText));
      return;
    }

    let link = pathname.replace('/d/', '');

    if (link === '/d') {
      link = '';
    }

    if (!link) {
      const draft = loadDraft();
      if (draft) {
        dispatch(loadSuccess(draft));
        return;
      }
    }

    dispatch(load(link));
  }, [dispatch, pathname]);

  if (error) {
    return <ErrorPage message={error} />;
  }

  return (
    <>
      <Title />
      {isLoading
        ? <Loading />
        : <TextScreen />
      }
    </>
  );
};

export default Home;


================================================
FILE: src/components/Loading.js
================================================
import React from 'react';
/** @jsxImportSource @emotion/react */
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';

import TextScreenWrapper from './shared/TextScreenWrapper';

const Loading = () => {
  return (
    <TextScreenWrapper>
      <LoadingWrapper>
        <Spinner />
      </LoadingWrapper>
    </TextScreenWrapper>
  );
};

const LoadingWrapper = styled.div`
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
`;

const loadingSpinner = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const Spinner = styled.div`
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 65px;
  height: 65px;
  margin-top: -32px;
  margin-left: -32px;
  border-radius: 50%;
  border: 8px solid transparent;
  border-top-color: #7f8eaa;
  border-bottom-color: #7f8eaa;
  animation: ${loadingSpinner} .8s ease infinite;
`;

export default Loading;


================================================
FILE: src/components/MarkdownView.js
================================================
import React from 'react';
import styled from '@emotion/styled';
import { useSelector, shallowEqual } from 'react-redux';
import MarkdownPreview from '@uiw/react-markdown-preview';

const MarkdownView = () => {
  const { text, fullEditor, fullMarkdown } = useSelector((state) => state.contents, shallowEqual);

  const handleClassName = () => {
    if (fullEditor) {
      return 'none-preview';
    }

    if (fullMarkdown) {
      return 'full-preview';
    }

    return '';
  };

  return (
    <Markdown
      className={handleClassName()}
      source={text}
    />
  );
};

const Markdown = styled(MarkdownPreview)`
  overflow: scroll;
  box-sizing: border-box;
  background-color: white;
  padding: 20px;
  padding-bottom: 70px;
  border: none;
  width: 50%;

  ${({ className }) => {
    if (className === 'full-preview') {
      return `
        width: 100% !important;
      `;
    }

    if (className === 'none-preview') {
      return `
        display: none;
      `;
    }
  }};

  @media (max-width: 768px) {
    width: 100%;
    height: 50%;
    padding: 12px;
    padding-bottom: 40px;
  }
`;

export default React.memo(MarkdownView);


================================================
FILE: src/components/ReactHelmet.js
================================================
import React from 'react';
import { Helmet } from 'react-helmet-async';

const SITE_URL = 'https://www.easy-me.com';
const TITLE = 'EASYME.md | 누구나 쉬운 README·리드미 온라인 마크다운 실시간 미리보기 에디터';
const DESCRIPTION = 'EASYME.md(이지미)는 README와 Markdown 문법에 익숙하지 않아도 편하게 글을 작성할 수 있는 웹 에디터입니다. 툴바로 서식 적용, 실시간 미리보기, 링크 한 번으로 공유까지 지원합니다.';
const IMAGE_URL = `${SITE_URL}/preview.png`;

const ReactHelmet = () => {
  return (
    <Helmet>
      <html lang='ko' />
      <title>{TITLE}</title>

      <meta charSet='utf-8' />
      <meta name='viewport' content='width=device-width, initial-scale=1.0' />
      <meta name='description' content={DESCRIPTION} />
      <meta name='keywords' content='easyme, readme, 리드미, 이지미, markdown, markdownsite, 마크다운, 마크다운작성사이트, 마크다운에디터, 실시간 미리보기' />
      <meta name='robots' content='index, follow' />
      <meta name='google-site-verification' content='sioQswZ6K0vzDLaveDWBachAp5y9pCFuv_2widqDXc4' />
      <meta name='naver-site-verification' content='59a8659d9d6fce0d75c4e70921609fad75cd54fa' />

      <link rel='icon' href='/favicon.ico' />
      <link rel='canonical' href={SITE_URL} />

      <meta property='og:type' content='website' />
      <meta property='og:locale' content='ko_KR' />
      <meta property='og:site_name' content='EASYME.md' />
      <meta property='og:title' content={TITLE} />
      <meta property='og:description' content={DESCRIPTION} />
      <meta property='og:url' content={SITE_URL} />
      <meta property='og:image' content={IMAGE_URL} />
      <meta property='og:image:width' content='1200' />
      <meta property='og:image:height' content='630' />

      <meta name='twitter:card' content='summary_large_image' />
      <meta name='twitter:title' content={TITLE} />
      <meta name='twitter:description' content={DESCRIPTION} />
      <meta name='twitter:image' content={IMAGE_URL} />
    </Helmet>
  );
};

export default ReactHelmet;


================================================
FILE: src/components/SharingModal.js
================================================
import React, { useRef, useState } from 'react';
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { AiOutlineLink } from 'react-icons/ai';
import PropTypes from 'prop-types';

const SharingModal = ({ url, updateModal }) => {
  const linkValue = useRef();
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(url);
    } catch (err) {
      linkValue.current.select();
      document.execCommand('copy');
    }
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  return (
    <div css={link}>
      <Background onClick={() => updateModal(false)} />
      <ModalWrapper>
        <ModalWindow>
          <IconWrapper onClick={handleCopy}>
            <AiOutlineLink css={icon} />
          </IconWrapper>
          <InputWrapper>
            <input
              type='text'
              value={url}
              ref={linkValue}
              readOnly
              onMouseDown={(e) => e.preventDefault()}
              onDragStart={(e) => e.preventDefault()}
              onContextMenu={(e) => e.preventDefault()}
            />
            <button onClick={handleCopy}>{copied ? '복사됨' : '복사'}</button>
          </InputWrapper>
        </ModalWindow>
      </ModalWrapper>
    </div>
  );
};

SharingModal.propTypes = {
  url: PropTypes.string.isRequired,
  updateModal: PropTypes.func.isRequired,
};

const link = css`
  cursor: default;
`;

const icon = css`
  font-size: 30px !important;
  color: #ffffff;
`;

const Background = styled.div`
  position: fixed;
  z-index: 3000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
`;

const ModalWrapper = styled.div`
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3100;
`;

const ModalWindow = styled.div`
  width: 400px;
  height: 160px;
  padding: 40px;
  text-align: center;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
`;

const IconWrapper = styled.div`
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #2E3341;
`;

const InputWrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  width: 100%;
  height: 40px;
  background-color: #f9f9f9;

  input {
    width: 65%;
    border: none;
    background-color: #f9f9f9;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
  }

  button {
    cursor: pointer;
    font-weight: 700;
    text-align: right;
    color: #2E3341;
    width: 25%;
    height: 100%;
    border: none;
    background-color: #f9f9f9;
  }
`;

export default SharingModal;


================================================
FILE: src/components/TextScreen.js
================================================
import React from 'react';
import styled from '@emotion/styled';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';

import CustomToolbar from './CustomToolbar';
import MarkdownView from './MarkdownView';
import Editor from './Editor';
import SaveBox from './shared/SaveBox';
import SharingModal from './SharingModal';
import { setShareUrl } from '../features/slice';

import TextScreenWrapper from './shared/TextScreenWrapper';

const TextScreen = () => {
  const dispatch = useDispatch();
  const { isSaved, fullScreen, shareUrl } = useSelector(
    (state) => state.contents,
    shallowEqual,
  );

  return (
    <>
      {isSaved && <SaveBox />}
      {shareUrl && (
        <SharingModal url={shareUrl} updateModal={() => dispatch(setShareUrl(''))} />
      )}
      <Header className={fullScreen ? 'full-screen' : ''}>
        <CustomToolbar />
      </Header>
      <TextScreenWrapper>
        <Main>
          <Editor />
          <MarkdownView />
        </Main>
      </TextScreenWrapper>
    </>
  );
};

const Header = styled.div`
  position: relative;
  box-sizing: border-box;
  padding: 5px;
  width: 90%;
  margin: 0 auto;
  z-index: 2000;
  background-color: white;
  border-radius: 5px 5px 0px 0px;
  border-bottom: 1px solid #dddddd;

  ${({ className }) => {
    if (className === 'full-screen') {
      return `
        position: fixed;
        width: 100%;
        top: 0;
      `;
    }
  }};

  @media (max-width: 768px) {
    width: 96%;
    padding: 4px;
  }
`;

const Main = styled.div`
  display: flex;
  width: 100%;
  height: 100%;

  @media (max-width: 768px) {
    flex-direction: column;
  }
`;

export default TextScreen;


================================================
FILE: src/components/Title.js
================================================
import React from 'react';
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { useRouteMatch } from 'react-router';

import character from '../assets/images/easyme.png';

const Title = () => {
  const { url } = useRouteMatch();

  const handleTitle = () => {
    window.location.href = url;
  };

  return (
    <Wrapper>
      <ClickWrapper onClick={handleTitle}>
        <img src={character} css={image} alt='easyme' />
        <div css={title}>EASYME.md</div>
      </ClickWrapper>
    </Wrapper>
  );
};

const Wrapper = styled.div`
  font-family: 'Rubik';
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 30px;

  @media (max-width: 768px) {
    margin-top: 16px;
    margin-bottom: 16px;
  }
`;

const ClickWrapper = styled.div`
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
`;

const image = css`
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 4px 6px 10px rgba(33, 40, 56, 0.1);
  -ms-user-drag: none;
  -moz-user-drag: none;
  -webkit-user-drag: none;

  @media (max-width: 768px) {
    width: 60px;
    height: 60px;
  }
`;

const title = css`
  position: relative;
  padding-left: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  color: white;
  font-size: 4rem;
  text-shadow: 4px 6px 10px rgba(33, 40, 56, 0.2);

  @media (max-width: 768px) {
    font-size: 2.2rem;
    padding-left: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
`;

export default Title;


================================================
FILE: src/components/__test__/Title.test.js
================================================
/** * @jest-environment jsdom */
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { render } from '@testing-library/react';

import Title from '../Title';

describe('<Title />', () => {
  it('should match the title', () => {
    const { getByText } = render(
      <Router>
        <Title />
      </Router>
    );

    const title = getByText('EASYME.md');

    expect(title).toBeInTheDocument();
    expect(title).toHaveTextContent('EASYME.md');
  });

  it('should match image', () => {
    const { getByAltText } = render(
      <Router>
        <Title />
      </Router>
    );

    const image = getByAltText('easyme');

    expect(image).toHaveAttribute('src');
  });
});


================================================
FILE: src/components/shared/ErrorPage.js
================================================
import React from 'react';
import styled from '@emotion/styled';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';

const ErrorPage = ({ message }) => {
  const NOT_FOUND = '404 Not Found';

  return (
    <Wrapper>
      <State>
        {message === NOT_FOUND
          ? message
          : '일시적인 오류가 발생했습니다.'
        }</State>
      <Message>
        {message === NOT_FOUND
          ? <>
            <div>요청한 페이지를 찾을 수 없습니다. 공유되지 않은 주소입니다.</div>
            <div>공유를 원할 경우, 툴바 가장 오른쪽에 공유 버튼을 눌러주세요.</div>
          </>
          : <>
            <div>잠시 후에 다시 시도해주세요.</div>
          </>
        }
      </Message>
      <Button to='/'>홈으로 돌아가기</Button>
    </Wrapper>
  );
};

ErrorPage.propTypes = {
  message: PropTypes.string.isRequired,
};

const Wrapper = styled.div`
  position: absolute;
  padding-top: 10%;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: white;
`;

const State = styled.div`
  margin-bottom: 10px;
  font-size: 30px;
`;

const Message = styled.div`
  div {
    margin-bottom: 10px;
  }
`;

const Button = styled(Link)`
  display: flex;
  margin: 0 auto;
  cursor: pointer;
  width: 160px;
  margin-top: 20px;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
  background-color: #7f8eaa;
  justify-content: center;
  text-decoration-line: none;
  padding: 20px;
  color: white;
`;

export default ErrorPage;


================================================
FILE: src/components/shared/SaveBox.js
================================================
import React, { useEffect } from 'react';
/** @jsxImportSource @emotion/react */
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { useDispatch } from 'react-redux';

import { saveText } from '../../features/slice';

const SaveBox = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    setTimeout(() => {
      dispatch(saveText());
    }, 700);
  }, [dispatch]);

  return (
    <BoxWrapper>
      <Box>저장되었습니다.</Box>
    </BoxWrapper>
  );
};

const transition = keyframes`
  20%, 70% {
    opacity: 100;
    transform: translateY(-5px);
  }
  80% {
    opacity: 0;
    transform: translateY(-5px);
  }
`;

const BoxWrapper = styled.div`
  position: absolute;
  left: 50%;
  top: 90%;
  transform: translate(-50%, -50%);
  z-index: 5000;
`;

const Box = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  top: 90%;
  left: 50%;
  padding: 10px 20px;
  width: 120px;
  height: 30px;
  background-color: white;
  border-radius: 10px;
  opacity: 0;
  font-weight: 600;
  box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.1);
  animation: ${transition} 1s 0.1s linear;
  animation-iteration-count: 1;
`;

export default SaveBox;


================================================
FILE: src/components/shared/SectionLine.js
================================================
import React from 'react';
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const SectionLine = () => {
  return (
    <span css={line}></span>
  );
};

const line = css`
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  margin-right: 5px;
  border-left: 1px solid #dddddd;
  height: 25px;
`;

export default SectionLine;


================================================
FILE: src/components/shared/TextScreenWrapper.js
================================================
import React from 'react';
import styled from '@emotion/styled';
import { useSelector, shallowEqual } from 'react-redux';

const TextScreenWrapper = ({ children }) => {
  const { fullScreen } = useSelector((state) => state.contents, shallowEqual);

  return (
    <Wrapper>
      <ScreenWrapper className={fullScreen ? 'full-screen' : ''}>
        {children}
      </ScreenWrapper>
    </Wrapper>
  );
};

const Wrapper = styled.div`
  width: 90%;
  margin: 0 auto;

  @media (max-width: 768px) {
    width: 96%;
  }
`;

const ScreenWrapper = styled.div`
  position: relative;
  overflow: hidden;
  height: 70vh;
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 5px 5px;
  z-index: 1000;

  ${({ className }) => {
    if (className === 'full-screen') {
      return `
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 300;
        top: 2rem;
        left: 0;
        background: white;
      `;
    }
  }};

  @media (max-width: 819px) {
    top: 7%;
  }

  @media (max-width: 768px) {
    height: 78vh;
  }

  @media (max-width: 333px) {
    top: 9%;
  }
`;

export default TextScreenWrapper;


================================================
FILE: src/components/shared/__test__/Editor.test.js
================================================
/** * @jest-environment jsdom */
import React from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom';
import { render, fireEvent } from '@testing-library/react';

import Editor from '../../Editor';
import createStore from '../../../store';

const store = createStore();

describe('<Editor />', () => {
  const text = 'EASYME.md를 방문해주셔서 감사합니다!';

  it('should display when adding text', () => {
    render(
      <Provider store={store}>
        <Router>
          <Editor />
        </Router>
      </Provider>
    );

    const textArea = document.querySelector('#textarea');

    fireEvent.change(textArea, { target: { value: text } });

    expect(textArea).toBeEnabled();
    expect(textArea).toHaveDisplayValue(text);
  });
});


================================================
FILE: src/components/shared/__test__/ErrorPage.test.js
================================================
/** * @jest-environment jsdom */
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { render } from '@testing-library/react';

import ErrorPage from '../ErrorPage';

describe('<ErrorPage />', () => {
  const notFoundMessage = '요청한 페이지를 찾을 수 없습니다. 공유되지 않은 주소입니다.';
  const errorMessage = '잠시 후에 다시 시도해주세요.';

  it('should render 404 Not Found', () => {
    const { getByText } = render(
      <Router>
        <ErrorPage message='404 Not Found' />
      </Router>
    );

    const state = getByText('404 Not Found');
    const message = getByText(notFoundMessage);
    const homeButton = getByText('홈으로 돌아가기');

    expect(state).toBeInTheDocument();
    expect(message).toBeInTheDocument();
    expect(homeButton).toBeInTheDocument();

    expect(state).toHaveTextContent('404 Not Found');
    expect(message).toHaveTextContent(notFoundMessage);
    expect(message).not.toHaveTextContent(errorMessage);
  });

  it('should render error message other than 404 Not Found', () => {
    const { getByText } = render(
      <Router>
        <ErrorPage message='500 Internal server error' />
      </Router>
    );

    const state = getByText('일시적인 오류가 발생했습니다.');
    const message = getByText(errorMessage);

    expect(state).toBeInTheDocument();
    expect(message).toBeInTheDocument();

    expect(state).toHaveTextContent('일시적인 오류가 발생했습니다.');
    expect(message).toHaveTextContent(errorMessage);
    expect(message).not.toHaveTextContent(notFoundMessage);
  });
});


================================================
FILE: src/constants/index.js
================================================
export const keyType = {
  TAB: 9,
  B: 66,
  D: 68,
  I: 73,
  S: 83,
  U: 85
};


================================================
FILE: src/constants/welcomeMessage.js
================================================
const WELCOME_MESSAGE = `## 🙌 안녕하세요. EASYME.md를 만든 원아입니다!
![easyme](/assets/readme/cartoon.png)   

## ❓ EASYME.md가 뭐예요?   
- **EASYME.md**는 **<u>개발자가 README.md를 좀 더 쉽게 작성할 수 있도록</u>** 하기 위해 만들었어요.   
- 블로그에서 글을 쓰는 것처럼 쉽게 글을 작성하고 스타일을 적용하면 오른쪽(👉)에 미리보기로 확인하실 수 있어요.   
- 스타일을 적용하면 마크다운 문법 및 md 파일에서 인식할 수 있는 소스코드가 자동으로 적용돼요.   
- 커서 위치, 드래그한 영역 등에 따라 스타일을 적용할 수 있으니 자유롭게 사용해보세요!
- 복사하기를 통해 본문 내용을 복사하고 여러분의 README에 적용해보세요.   

## 🙋‍♀️ 좀 더 구체적으로 가르쳐주세요!   
1. 왼쪽 공간에서 블로그에 글을 쓰는 것처럼 README를 작성해주세요!   
2. 👆 위에 툴바창에 보이는 다양한 스타일을 적용해보세요!   
3. 다 작성하셨나요? 예쁘게 잘 나왔는지 오른쪽 미리보기 화면에서 확인해보세요.   
4. 오른쪽에 작성한 글 전체를 복사하세요!   
(저장을 원할 경우 \`Ctrl + S\` / \`Command + S\` 또는 툴바창 제일 오른쪽에 \`공유하기 아이콘\`을 클릭해주세요.)   
5. 이제 여러분의 **README.md** 에 붙여넣으세요!   
(저장 또는 공유를 할 경우 링크를 다른 사람에게 전달할 수 있어요! 😀)  

## 🛠 기능 엿보기   

1. [❓ EASYME.md가 뭐예요?  ](#-easymemd가-뭐예요)
2. [🙋‍♀️ 좀 더 구체적으로 가르쳐주세요!](#-좀-더-구체적으로-가르쳐주세요)
3. [🛠 기능 엿보기](#-기능-엿보기)
    - [Header](#header)   
    - [Text Style1](#text-style1)   
    - [Text Stlye2](#text-style2)   
    - [List](#list)      
    - [Link](#link)   
    - [Code Block](#code-block)   
    - [Table](#table)   
   
## Header
- # H1 Header   
- ## H2 Header   
- ### H3 Header   
- #### H4 Header   
- ##### H5 Header   
- ###### H6 Header   

<br>   

## Text Style1
- **진하게** (\`Ctrl(Command) + B\`)   
- *기울이기* (\`Ctrl(Command) + I\`)   
- <s>취소선</s> (\`Ctrl(Command) + D\`)   
- <u>밑줄</u> (\`Ctrl(Command) + U\`)   

<br>   
   
## Text Style2

>인용문   
   
<details><summary>접고 펴는 기능
</summary>

*Write here!*
</details>

- EASYME.md를 드래그하고 상단에 \`Aa\` 아이콘을 누르면? 👉 Easyme.md   
- EASYME.md를 드래그하고 상단에 \`A\` 아이콘을 누르면? 👉 EASYME.MD   
- EASYME.md를 드래그하고 상단에 \`a\` 아이콘을 누르면? 👉 easyme.md   
   
<br>   
   
## List   
### Table of contents
1. [title1](#write-title-here!)   
2. [title2](#only-lowercase)   
3. [title3](#use"-"instead-of-spacing-words)   
4. [title4](#example)   
    - [❓ EASYME.md가 뭐예요?](#-easymemd가-뭐예요)   
    - [🛠 기능 엿보기](#-기능-엿보기)
   
### Unordered list   
- unordered list1   
- unordered list2   
- unordered list3   
- unordered list4   
   
### Ordered list   
1. ordered list1   
2. ordered list2   
3. ordered list3   
4. ordered list4   
   
<br>   
   
## Link   
### General link
- [🚗 Visit EASYME.md's Repo](https://github.com/EASYME-md/client)   
- [🙋‍♂️ Visit ONE:A's Github](https://github.com/onealog)

### Image link
![onealog](/assets/readme/easyme.png)   
   
<br>   
   
## Code Block   
### Code inline
- \`console.log('Hello EASYME.md!');\`   
   
### Code block
\`\`\`js
function makeDeveloper(name, language) {
  if (name === 'ONE:A' && language === 'JavaScript') {
    return 'perfect!';
  }

  return false;
}

makeDeveloper('ONE:A', 'JavaScript');
\`\`\`

<br>   
   
## Table   


| title1 | title2 | title3 |
| --- | --- | --- |
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |


<br>   

`;

export default WELCOME_MESSAGE;


================================================
FILE: src/features/saga.js
================================================
import { call, put, takeLatest } from 'redux-saga/effects';

import { load, loadSuccess, loadFail } from './slice';
import { fetchContents } from '../api';

function* handleContentsLoad(action) {
  const linkId = action.payload;

  try {
    const text = yield call(() => fetchContents(linkId));

    yield put(loadSuccess(text));
  } catch (err) {
    yield put(loadFail(err));
  }
}

export function* watchContents() {
  yield takeLatest(load, handleContentsLoad);
}


================================================
FILE: src/features/slice.js
================================================
import { createSlice } from '@reduxjs/toolkit';

import WELCOME_MESSAGE from '../constants/welcomeMessage';

const initialState = {
  isLoading: false,
  isSaved: false,
  linkId: '',
  text: '',
  textArea: null,
  fullEditor: false,
  fullMarkdown: false,
  fullScreen: false,
  error: null,
  shareUrl: '',
};

const reducers = {
  addLinkId: (state, action) => {
    state.linkId = action.payload;
  },
  addText: (state, action) => {
    state.text = action.payload;
  },
  addTextArea: (state, action) => {
    state.textArea = action.payload;
  },
  resetError: (state) => {
    state.error = null;
  },
  addError: (state, action) => {
    state.error = action.payload;
  },
  toggleEditor: (state) => {
    state.fullEditor = !state.fullEditor;
  },
  toggleMarkdown: (state) => {
    state.fullMarkdown = !state.fullMarkdown;
  },
  toggleFullScreen: (state) => {
    state.fullScreen = !state.fullScreen;
  },
  saveText: (state) => {
    state.isSaved = !state.isSaved;
  },
  setShareUrl: (state, action) => {
    state.shareUrl = action.payload;
  },
  load: (state) => {
    state.isLoading = true;
  },
  loadSuccess: (state, action) => {
    state.isLoading = false;
    state.text = action.payload || WELCOME_MESSAGE;
  },
  loadFail: (state, action) => {
    state.isLoading = false;
    state.error = action.payload;
  },
};

const name = 'contents';
const slice = createSlice({
  name, initialState, reducers,
});

export const contents = slice.name;
export const {
  addLinkId, addText, addTextArea, resetError, addError,
  toggleEditor, toggleMarkdown, toggleFullScreen,
  saveText, setShareUrl, load, loadSuccess, loadFail } = slice.actions;

export default slice.reducer;


================================================
FILE: src/index.css
================================================
body {
  margin: 0;
  background-color: #7f8eaa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


================================================
FILE: src/index.js
================================================
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { HelmetProvider } from 'react-helmet-async';

import './index.css';
import './assets/fonts/font.css';
import createStore from './store';
import App from './App';

const store = createStore();

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <HelmetProvider>
        <App />
      </HelmetProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);


================================================
FILE: src/setupTests.js
================================================
import '@testing-library/jest-dom';
import '@babel/polyfill';


================================================
FILE: src/store/index.js
================================================
import { combineReducers, configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import { all } from 'redux-saga/effects';

import contentsReducer, { contents } from '../features/slice';
import { watchContents } from '../features/saga';

export const rootReducer = combineReducers({
  [contents]: contentsReducer,
});

const sagaMiddleware = createSagaMiddleware();
function* rootSaga() {
  yield all([
    watchContents()
  ]);
}

const createStore = () => {
  const store = configureStore({
    reducer: rootReducer,
    devTools: true,
    middleware: [sagaMiddleware],
  });

  sagaMiddleware.run(rootSaga);

  return store;
};

export default createStore;


================================================
FILE: src/utils/__test__/utils.test.js
================================================
/** * @jest-environment jsdom */
import { unmountComponentAtNode } from 'react-dom';

import addTypeCurrentPosition from '../addTypeCurrentPosition';
import addTypeBeforeAndAfter from '../addTypeBeforeAndAfter';
import addTypeCrrentRow from '../addTypeCurrentRow';
import addTypeDraggedRows from '../addTypeDraggedRows';

let textArea = null;

beforeEach(() => {
  document.execCommand = jest.fn();
  textArea = document.createElement('textarea');
  document.body.appendChild(textArea);
  textArea.textContent = 'EASYME.md입니다.';
  textArea.selectionStart = 0;
  textArea.selectionEnd = 9;
});

afterEach(() => {
  unmountComponentAtNode(textArea);
  textArea.remove();
  textArea = null;
});

describe('utils function', () => {
  it('01. addTypeCurrentPosition test', () => {
    expect(addTypeCurrentPosition(textArea, '현재 텍스트 뒤에 추가되는 것은 ')).toEqual('현재 텍스트 뒤에 추가되는 것은 EASYME.md입니다.');
  });

  it('02. addTypeBeforeAndAfter test', () => {
    expect(addTypeBeforeAndAfter(textArea, '**')).toEqual('**EASYME.md**입니다.');
  });

  it('03. addTypeCrrentRow test', () => {
    expect(addTypeCrrentRow(textArea, '- ')).toEqual('- EASYME.md입니다.');
  });

  it('04. addTypeDraggedRows test', () => {
    textArea.textContent = 'EASYME.md입니다.\n쉽고 빠르게 리드미를 작성해보세요!';
    textArea.selectionEnd = 34;

    expect(addTypeDraggedRows(textArea, '- ')).toEqual('- EASYME.md입니다.\n- 쉽고 빠르게 리드미를 작성해보세요!');
  });
});


================================================
FILE: src/utils/addTypeBeforeAndAfter.js
================================================
import { wrapSelection } from 'text-field-edit';

const addTypeBeforeAndAfter = (textArea, typeA, typeB = typeA) => {
  const scroll = textArea.scrollTop;

  textArea.focus();
  wrapSelection(textArea, typeA, typeB);
  textArea.scrollTop = scroll;

  return textArea.value;
};

export default addTypeBeforeAndAfter;


================================================
FILE: src/utils/addTypeCurrentPosition.js
================================================
import { insert } from 'text-field-edit';

const addTypeCurrentPosition = (textArea, type) => {
  const scroll = textArea.scrollTop;

  textArea.focus();
  insert(textArea, type);
  textArea.scrollTop = scroll;

  return textArea.value;
};

export default addTypeCurrentPosition;


================================================
FILE: src/utils/addTypeCurrentRow.js
================================================
import { insert } from 'text-field-edit';

const addTypeCurrentRow = (textArea, type) => {
  const scroll = textArea.scrollTop;
  const startPosition = textArea.selectionStart;
  const beforeCursor = textArea.value.substring(0, startPosition);
  const rowStart = beforeCursor.lastIndexOf('\n') + 1;

  textArea.focus();
  textArea.setSelectionRange(rowStart, rowStart);
  insert(textArea, type);

  const newPosition = startPosition + type.length;
  textArea.setSelectionRange(newPosition, newPosition);
  textArea.scrollTop = scroll;

  return textArea.value;
};

export default addTypeCurrentRow;


================================================
FILE: src/utils/addTypeDraggedRows.js
================================================
import { insert } from 'text-field-edit';

const addTypeDraggedRows = (textArea, type) => {
  const scroll = textArea.scrollTop;
  const selStart = textArea.selectionStart;
  const selEnd = textArea.selectionEnd;
  const value = textArea.value;

  const beforeSelection = value.substring(0, selStart);
  const firstRowStart = beforeSelection.lastIndexOf('\n') + 1;

  const affectedText = value.substring(firstRowStart, selEnd);
  const rows = affectedText.split('\n');

  const prefixedRows = type
    ? rows.map((row) => type + row)
    : rows.map((row, i) => `${i + 1}. ${row}`);
  const newText = prefixedRows.join('\n');

  textArea.focus();
  textArea.setSelectionRange(firstRowStart, selEnd);
  insert(textArea, newText);

  const lengthDiff = newText.length - affectedText.length;
  textArea.setSelectionRange(selStart + (type ? type.length : '1. '.length), selEnd + lengthDiff);
  textArea.scrollTop = scroll;

  return textArea.value;
};

export default addTypeDraggedRows;


================================================
FILE: src/utils/draftStorage.js
================================================
const DRAFT_KEY = 'easyme:draft';

export const loadDraft = () => {
  try {
    return localStorage.getItem(DRAFT_KEY);
  } catch (err) {
    return null;
  }
};

export const saveDraft = (text) => {
  try {
    if (text) {
      localStorage.setItem(DRAFT_KEY, text);
    } else {
      localStorage.removeItem(DRAFT_KEY);
    }
  } catch (err) {
    // localStorage may be unavailable (private mode, quota) — silently ignore
  }
};

export const clearDraft = () => {
  try {
    localStorage.removeItem(DRAFT_KEY);
  } catch (err) {
    // ignore
  }
};


================================================
FILE: src/utils/shareDocument.js
================================================
import { setShareUrl } from '../features/slice';
import { buildShareUrl } from './urlShare';

const shareDocument = async (textArea, dispatch) => {
  const text = textArea ? textArea.value : '';
  const url = buildShareUrl(text);

  try {
    await navigator.clipboard.writeText(url);
  } catch (err) {
    // clipboard unavailable (insecure origin, permission denied) — modal still shows the URL
  }

  dispatch(setShareUrl(url));
};

export default shareDocument;


================================================
FILE: src/utils/urlShare.js
================================================
import LZString from 'lz-string';

export const HASH_PREFIX = '#s=';

export const encodeForShare = (text) => {
  if (!text) return '';
  return LZString.compressToEncodedURIComponent(text);
};

export const decodeFromShare = (compressed) => {
  if (!compressed) return '';
  try {
    return LZString.decompressFromEncodedURIComponent(compressed) || '';
  } catch (err) {
    return '';
  }
};

export const parseShareHash = (hash) => {
  if (!hash || !hash.startsWith(HASH_PREFIX)) return '';
  return decodeFromShare(hash.slice(HASH_PREFIX.length));
};

export const buildShareUrl = (text) => {
  const compressed = encodeForShare(text);
  return `${window.location.origin}/d${HASH_PREFIX}${compressed}`;
};