• Stars
    star
    121
  • Rank 293,924 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Photo layout editor for react

react-photo-layout-editor

logo

์‚ฌ์ง„ ๋ ˆ์ด์•„์›ƒ์„ ํŽธ์ง‘ํ•˜๋Š” ์›น ํ”„๋กœ๊ทธ๋žจ์ž…๋‹ˆ๋‹ค.
This is photo layout editor for react

์˜ˆ์ „ Instagram blog( http://blog.instagram.com/ )์— ์žˆ๋Š” ์ •๋ ฌ๋œ ์ด๋ฏธ์ง€์˜ ๋ชจ์Šต์— ๋งค๋ฃŒ๋˜์–ด ์ €๋Ÿฐ ๋ชจ์Šต์„ ์ง์ ‘ ํŽธ์ง‘ํ•˜์—ฌ ๊ฒŒ์‹œ๋ฌผ๋กœ ์˜ฌ๋ ธ์œผ๋ฉด ์ข‹๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์–ด ๋งŒ๋“ค๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
๋ธ”๋Ÿญ์„ ๋“œ๋ž˜๊ทธ ์•ค ๋“œ๋กญ์œผ๋กœ ์œ„์น˜์™€ ํฌ๊ธฐ๋ฅผ ํŽธ์ง‘ํ•˜์—ฌ ๋ชจ๋˜ํ•˜๊ฒŒ ์ •๋ ฌ๋œ ์ด๋ฏธ์ง€๋‚˜ ๋ ˆ์ด์•„์›ƒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

logo

Demo

๋‹ค์Œ ๋งํฌ๋ฅผ ํ†ตํ•˜์—ฌ ๊ธฐ๋Šฅ์„ ์ฒดํ—˜ํ•ด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

https://redgoose-dev.github.io/react-photo-layout-editor/

Feature

PLE๋Š” ์ด๋Ÿฐ ํŠน์ง•๋“ค์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

Management Images

์‚ฌ์ด๋“œ๋ฐ”์— ์ด๋ฏธ์ง€๋ฅผ ์—…๋กœ๋“œํ•˜์—ฌ ์‚ฌ์ง„์„ ๋ฐฐ์น˜ํ•˜๊ธฐ ์ „์— ์ด๋ฏธ์ง€๋ฅผ ๋‹ด์•„๋‘˜ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

screen

Edit Blocks

๋ธ”๋Ÿญ์˜ ๊ฐฏ์ˆ˜๋‚˜ ์‚ฌ์ด์ฆˆ, ์—ฌ๋ฐฑ๋“ฑ์„ ์กฐ์ ˆํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

grid editor

Drag & Drop

์ด๋ฏธ์ง€๋ฅผ ๋“œ๋ž˜๊ทธํ•˜์—ฌ ์ด๋ฏธ์ง€๋ฅผ ๋ธ”๋Ÿญ์— ๋„ฃ๊ฑฐ๋‚˜ ๋ธ”๋Ÿญ์˜ ์œ„์น˜๋ฅผ ์˜ฎ๊ธฐ๊ฑฐ๋‚˜ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Edit image area

๋ธ”๋Ÿญ์„ ์„ ํƒํ•˜๊ณ  ํŽœ ๋ชจ์–‘์˜ ํˆด๋ฐ”(edit block)๋ฅผ ์„ ํƒํ•˜๋ฉด ํŽธ์ง‘์ฐฝ์ด ๋œจ๋ฉด์„œ ์˜์—ญ์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

cropper

Change color

๋ธ”๋Ÿญ์˜ ๋ฐฐ๊ฒฝ์ƒ‰์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋นˆ ๋ธ”๋Ÿญ์„ ๋งŒ๋“ค๊ณ  ์ƒ‰์ƒ์„ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

์ด ํ”„๋กœ๊ทธ๋žจ์„ ๊ฐœ๋ฐœํ•˜๊ธฐ ์œ„ํ•˜์—ฌ ๋ฐ๋ชจ ํŽ˜์ด์ง€๋ฅผ ๋„์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋‹ค์Œ ๊ณผ์ •์„ ํ†ตํ•˜์—ฌ ๋ธŒ๋ผ์šฐ์ €์— ๊ฐœ๋ฐœ์— ์‚ฌ์šฉ๋˜์—ˆ๋˜ ๋ฐ๋ชจ ํŽ˜์ด์ง€๋ฅผ ์—ด์–ด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. git clone https://github.com/redgoose-dev/react-photo-layout-editor.git
  2. cd react-photo-layout-editor
  3. yarn install
  4. yarn run dev
  5. in your browser, connect http://localhost:3000