react-photo-layout-editor
์ฌ์ง ๋ ์ด์์์ ํธ์งํ๋ ์น ํ๋ก๊ทธ๋จ์
๋๋ค.
This is photo layout editor for react
์์ Instagram blog( http://blog.instagram.com/ )์ ์๋ ์ ๋ ฌ๋ ์ด๋ฏธ์ง์ ๋ชจ์ต์ ๋งค๋ฃ๋์ด ์ ๋ฐ ๋ชจ์ต์ ์ง์ ํธ์งํ์ฌ ๊ฒ์๋ฌผ๋ก ์ฌ๋ ธ์ผ๋ฉด ์ข๊ฒ ๋ค๋ ์๊ฐ์ด ๋ค์ด ๋ง๋ค๊ฒ ๋์์ต๋๋ค.
๋ธ๋ญ์ ๋๋๊ทธ ์ค ๋๋กญ์ผ๋ก ์์น์ ํฌ๊ธฐ๋ฅผ ํธ์งํ์ฌ ๋ชจ๋ํ๊ฒ ์ ๋ ฌ๋ ์ด๋ฏธ์ง๋ ๋ ์ด์์ ๋ง๋ค ์ ์์ต๋๋ค.
Demo
๋ค์ ๋งํฌ๋ฅผ ํตํ์ฌ ๊ธฐ๋ฅ์ ์ฒดํํด๋ณผ ์ ์์ต๋๋ค.
https://redgoose-dev.github.io/react-photo-layout-editor/
Feature
PLE๋ ์ด๋ฐ ํน์ง๋ค์ ๊ฐ์ง๊ณ ์์ต๋๋ค.
Management Images
์ฌ์ด๋๋ฐ์ ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋ํ์ฌ ์ฌ์ง์ ๋ฐฐ์นํ๊ธฐ ์ ์ ์ด๋ฏธ์ง๋ฅผ ๋ด์๋ ์ ์์ต๋๋ค.
Edit Blocks
๋ธ๋ญ์ ๊ฐฏ์๋ ์ฌ์ด์ฆ, ์ฌ๋ฐฑ๋ฑ์ ์กฐ์ ํ ์ ์์ต๋๋ค.
Drag & Drop
์ด๋ฏธ์ง๋ฅผ ๋๋๊ทธํ์ฌ ์ด๋ฏธ์ง๋ฅผ ๋ธ๋ญ์ ๋ฃ๊ฑฐ๋ ๋ธ๋ญ์ ์์น๋ฅผ ์ฎ๊ธฐ๊ฑฐ๋ ์์ ํ ์ ์์ต๋๋ค.
Edit image area
๋ธ๋ญ์ ์ ํํ๊ณ ํ ๋ชจ์์ ํด๋ฐ(edit block)๋ฅผ ์ ํํ๋ฉด ํธ์ง์ฐฝ์ด ๋จ๋ฉด์ ์์ญ์ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค.
Change color
๋ธ๋ญ์ ๋ฐฐ๊ฒฝ์์ ๋ฐ๊ฟ ์ ์์ต๋๋ค. ๋น ๋ธ๋ญ์ ๋ง๋ค๊ณ ์์์ ์์ ํ ์ ์์ต๋๋ค.
Installation
cli๋ก ์ค์นํ ํ๋ก์ ํธ์์ ๋ค์๊ณผ ๊ฐ์ ๋ช ๋ น์ ์คํํฉ๋๋ค.
npm
npm install --save react-photo-layout-editor
yarn
yarn add react-photo-layout-editor
Usage
์ํ๋๊ณณ์ ์ปดํฌ๋ํธ๋ฅผ ์ฝ์
ํฉ๋๋ค.
ํํ์ด์ง์ ๋จ๋
์ผ๋ก ์ฌ์ฉํ๋๊ฒ์ ๊ถ์ฅํฉ๋๋ค.
import PhotoLayoutEditor from 'react-photo-layout-editor';
<PhotoLayoutEditor ref={(r) => { ple = r }}/>
Properties
์ปดํฌ๋ํธ๋ฅผ ๋ง์ดํธํ ๋ ์ค์ ๊ฐ์ ์ ์ํ ์ ์์ต๋๋ค.
Name | default | Type | Description |
---|---|---|---|
body | {} | object |
ํด๋ฐ์ ๊ทธ๋ฆฌ๋๋ฅผ ํธ์งํ๋ ์์ญ. ์๋ body ํญ๋ชฉ์ ์ฐธ๊ณ |
side | {} | object |
์ด๋ฏธ์ง๋ฅผ ๊ด๋ฆฌํ๋ ์ฌ์ด๋ ํ๋ ํธ ์์ญ. ์๋ side ํญ๋ชฉ์ ์ฐธ๊ณ |
uploadScript | null | string |
์ด๋ฏธ์ง๋ฅผ ์๋ฒ๋ก ์ ๋ก๋ ์ฒ๋ฆฌํ๋ ์ฃผ์ |
uploadParamsConvertFunc | null | function |
์ด๋ฏธ์ง๋ฅผ ์๋ฒ๋ก ์
๋ก๋ํ๊ณ ๊ทธ ๊ฒฐ๊ณผ๊ฐ์ ๋ฐ์ side.files ์ ์ด๋ฏธ์ง๋ฅผ ๋ฑ๋กํ ์ ์๋๋ก ๊ฐ์ ๋ณ๊ฒฝํ๋ ์ฝ๋ฐฑํจ์ |
updateStoreFunc | null | function |
store ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค ์คํํ๋ ์ฝ๋ฐฑํจ์ |
callback | {} | object |
์ฌ๋ฌ๊ฐ์ง ํ๋์ ๋ํ ์ฝ๋ฐฑ ํจ์๋ค์ ๋ชจ์ |
body
ํด๋ฐ์ ๊ทธ๋ฆฌ๋ ํธ์ง ์์ญ
Name | default | Type | Description |
---|---|---|---|
setting | {} | object |
๊ทธ๋ฆฌ๋ ํธ์ง๊ธฐ์ ์ค์ ๊ฐ. setting ์น์ ์ฐธ๊ณ |
blockColor | rgba(211,211,211,1) | string |
๋ธ๋ญ ํ๋์ ๊ธฐ๋ณธ ๋ฐฐ๊ฒฝ์ |
grid | [] | array |
๋ธ๋ญ ๋ฐ์ดํฐ๊ฐ ๋ชฉ๋ก |
body.setting
๊ทธ๋ฆฌ๋ ํธ์ง ์์ญ์ ์ค์ ๊ฐ
Name | default | Type | Description |
---|---|---|---|
width | 100 | number |
๊ธฐ๋ณธ ๋ธ๋ญ ํ๋์ ๊ฐ๋ก์ฌ์ด์ฆ |
height | 100 | number |
๊ธฐ๋ณธ ๋ธ๋ญ ํ๋์ ์ธ๋ก์ฌ์ด์ฆ |
column | 5 | number |
ํ์ค์ ๋ค์ด๊ฐ๋ ๊ธฐ๋ณธ ๋ธ๋ญ์ ๊ฐฏ์ |
outerMargin | 10 | number |
๊ทธ๋ฆฌ๋ ๊ฒ๋ถ๋ถ์ ์ฌ๋ฐฑ๊ฐ |
innerMargin | 10 | number |
๋ธ๋ญ ์ฌ์ด์ ์ฌ๋ฐฑ๊ฐ |
bgColor | rgba(255,255,255,1) | string |
๊ทธ๋ฆฌ๋ ๋ฐฐ๊ฒฝ์ |
side
์ด๋ฏธ์ง๋ฅผ ๊ด๋ฆฌํ๋ ์ฌ์ด๋ ํ๋ ํธ ์์ญ
Name | default | Type | Description |
---|---|---|---|
files | [] | array |
์ด๋ฏธ์ง ๋ชฉ๋ก |
visible | true | boolean |
ํ๋ ํธ ํ์์ ๋ฌด |
callback
์ปดํฌ๋ํธ ์ฝ๋ฐฑ ํจ์๋ค
Name | params | Description |
---|---|---|
init | ์ปดํฌ๋ํธ๊ฐ ์ด๊ธฐํ ๋์์๋ ํธ์ถํฉ๋๋ค. | |
sideUploadStart | ์ฌ์ด๋ ์์ญ ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋๋ฅผ ์์ํ ๋ ํธ์ถํฉ๋๋ค. | |
sideUploadProgress | loaded,total,percent |
์ฌ์ด๋ ์์ญ ์ด๋ฏธ์ง๋ฅผ ์ ๋ก๋์ค์ผ๋ ํธ์ถํฉ๋๋ค. |
sideUploadComplete | res |
์ฌ์ด๋ ์์ญ ์ด๋ฏธ์ง ํ๋๋ฅผ ์ ๋ก๋๊ฐ ๋๋๋ฉด ํธ์ถํฉ๋๋ค. |
sideUploadCompleteAll | ์ฌ์ด๋ ์์ญ ๋ชจ๋ ์ด๋ฏธ์ง ์ ๋ก๋๋ฅผ ์๋ฃํ๋ฉด ํธ์ถํฉ๋๋ค. | |
sideUploadFail | ์ฌ์ด๋ ์์ญ ์ด๋ฏธ์ง ์ ๋ก๋๋ฅผ ์คํจํ๋ฉด ํธ์ถํฉ๋๋ค. | |
sideRemove | images |
์ฌ์ด๋ ์์ญ ์ด๋ฏธ์ง๋ฅผ ์ญ์ ํ ๋ ํธ์ถํฉ๋๋ค. |
API
PhotoLayoutEditor
๋ฅผ ์ปจํธ๋กคํ ์ ์์ต๋๋ค. ๋จผ์ ์ปดํฌ๋ํธ๋ฅผ ์ ๊ทผํ ์ ์๋๋ก ์ธ์คํด์ค ๋ณ์๋ก ๋ง๋ค์ด์ค๋๋ค.
๋ค์ ์ปดํฌ๋ํธ์ ๊ฐ์ด ref
๋ฅผ ์ด์ฉํ์ฌ ple
์ด๋ฆ์ ๋ณ์๋ฅผ ์ด์ฉํ์ฌ API๋ฅผ ์ฌ์ฉํ ์์์ต๋๋ค.
let ple = null;
<PhotoLayoutEditor ref={(r) => { ple = r }}/>
์์ธํ API์ ๋ด์ฉ์ ๋ค์ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ์ธ์.
Development
์ด ํ๋ก๊ทธ๋จ์ ๊ฐ๋ฐํ๊ธฐ ์ํ์ฌ ๋ฐ๋ชจ ํ์ด์ง๋ฅผ ๋์ธ ์ ์์ต๋๋ค.
๋ค์ ๊ณผ์ ์ ํตํ์ฌ ๋ธ๋ผ์ฐ์ ์ ๊ฐ๋ฐ์ ์ฌ์ฉ๋์๋ ๋ฐ๋ชจ ํ์ด์ง๋ฅผ ์ด์ด๋ณผ ์ ์์ต๋๋ค.
git clone https://github.com/redgoose-dev/react-photo-layout-editor.git
cd react-photo-layout-editor
yarn install
yarn run dev
- in your browser, connect
http://localhost:3000