{"id":16872480,"url":"https://github.com/redgoose-dev/react-photo-layout-editor","last_synced_at":"2025-03-17T06:31:22.430Z","repository":{"id":57342434,"uuid":"92751014","full_name":"redgoose-dev/react-photo-layout-editor","owner":"redgoose-dev","description":"Photo layout editor for react","archived":false,"fork":false,"pushed_at":"2021-04-12T19:02:06.000Z","size":3115,"stargazers_count":123,"open_issues_count":0,"forks_count":17,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-02-27T18:56:36.319Z","etag":null,"topics":["grid","grid-layout","layout","photo","react","redux"],"latest_commit_sha":null,"homepage":"https://redgoose-dev.github.io/react-photo-layout-editor/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/redgoose-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-29T15:12:15.000Z","updated_at":"2024-10-21T07:21:35.000Z","dependencies_parsed_at":"2022-09-16T02:50:18.753Z","dependency_job_id":null,"html_url":"https://github.com/redgoose-dev/react-photo-layout-editor","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redgoose-dev%2Freact-photo-layout-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redgoose-dev%2Freact-photo-layout-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redgoose-dev%2Freact-photo-layout-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redgoose-dev%2Freact-photo-layout-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/redgoose-dev","download_url":"https://codeload.github.com/redgoose-dev/react-photo-layout-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243846978,"owners_count":20357297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grid","grid-layout","layout","photo","react","redux"],"created_at":"2024-10-13T15:14:59.890Z","updated_at":"2025-03-17T06:31:21.527Z","avatar_url":"https://github.com/redgoose-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-photo-layout-editor\n\n\u003cp style=\"text-align: center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/redgoose-dev/react-photo-layout-editor/master/assets/logo.jpg\" alt=\"logo\"\u003e\n\u003c/p\u003e\n\n사진 레이아웃을 편집하는 웹 프로그램입니다.  \nThis is photo layout editor for react\n\n예전 Instagram blog( http://blog.instagram.com/ )에 있는 정렬된 이미지의 모습에 매료되어 저런 모습을 직접 편집하여 게시물로 올렸으면 좋겠다는 생각이 들어 만들게 되었습니다.  \n블럭을 드래그 앤 드롭으로 위치와 크기를 편집하여 모던하게 정렬된 이미지나 레이아웃 만들 수 있습니다.\n\n\u003cp style=\"text-align: center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/redgoose-dev/react-photo-layout-editor/master/assets/play_mov.gif\" alt=\"logo\"\u003e\n\u003c/p\u003e\n\n\n## Demo\n\n다음 링크를 통하여 기능을 체험해볼 수 있습니다.\n\nhttps://redgoose-dev.github.io/react-photo-layout-editor/\n\n\n## Feature\n\nPLE는 이런 특징들을 가지고 있습니다.\n\n### Management Images\n\n사이드바에 이미지를 업로드하여 사진을 배치하기 전에 이미지를 담아둘 수 있습니다.\n\n![screen](https://raw.githubusercontent.com/redgoose-dev/react-photo-layout-editor/master/assets/screen_1.jpg)\n\n### Edit Blocks\n\n블럭의 갯수나 사이즈, 여백등을 조절할 수 있습니다.\n\n![grid editor](https://raw.githubusercontent.com/redgoose-dev/react-photo-layout-editor/master/assets/screen_2.jpg)\n\n### Drag \\\u0026 Drop\n\n이미지를 드래그하여 이미지를 블럭에 넣거나 블럭의 위치를 옮기거나 수정할 수 있습니다.\n\n### Edit image area\n\n블럭을 선택하고 펜 모양의 툴바(edit block)를 선택하면 편집창이 뜨면서 영역을 변경할 수 있습니다.\n\n![cropper](https://raw.githubusercontent.com/redgoose-dev/react-photo-layout-editor/master/assets/screen_4.jpg)\n\n### Change color\n\n블럭의 배경색을 바꿀 수 있습니다. 빈 블럭을 만들고 색상을 수정할 수 있습니다.\n\n![change color](https://raw.githubusercontent.com/redgoose-dev/react-photo-layout-editor/master/assets/screen_3.jpg)\n\n\n## Installation\n\ncli로 설치할 프로젝트에서 다음과 같은 명령을 실행합니다.\n\n### npm\n\n`npm install --save react-photo-layout-editor`\n\n### yarn\n\n`yarn add react-photo-layout-editor`\n\n\n## Usage\n\n원하는곳에 컴포넌트를 삽입합니다.  \n한페이지에 단독으로 사용하는것을 권장합니다.\n\n```\nimport PhotoLayoutEditor from 'react-photo-layout-editor';\n\n\u003cPhotoLayoutEditor ref={(r) =\u003e { ple = r }}/\u003e\n```\n\n\n## Properties\n\n컴포넌트를 마운트할때 설정값을 정의할 수 있습니다.\n\n| Name | default | Type | Description |\n| ---- | ------- | ---- | ----------- |\n| body | {} | `object` | 툴바와 그리드를 편집하는 영역. 아래 [body 항목](https://github.com/redgoose-dev/react-photo-layout-editor#body)을 참고 |\n| side | {} | `object` | 이미지를 관리하는 사이드 팔레트 영역. 아래 [side 항목](https://github.com/redgoose-dev/react-photo-layout-editor#side)을 참고 |\n| uploadScript | null | `string` | 이미지를 서버로 업로드 처리하는 주소 |\n| uploadParamsConvertFunc | null | `function` | 이미지를 서버로 업로드하고 그 결과값을 받아 `side.files`에 이미지를 등록할 수 있도록 값을 변경하는 콜백함수 |\n| updateStoreFunc | null | `function` | store 데이터가 변경될때마다 실행하는 콜백함수 |\n| callback | {} | `object` | 여러가지 행동에 대한 콜백 함수들의 모음 |\n\n### body\n\n툴바와 그리드 편집 영역\n\n| Name | default | Type | Description |\n| ---- | ------- | ---- | ----------- |\n| setting | {} | `object` | 그리드 편집기의 설정값. [setting 섹션](https://github.com/redgoose-dev/react-photo-layout-editor#bodysetting) 참고 |\n| blockColor | rgba(211,211,211,1) | `string` | 블럭 하나의 기본 배경색 |\n| grid | [] | `array` | 블럭 데이터값 목록 |\n\n#### body.setting\n\n그리드 편집 영역의 설정값\n\n| Name | default | Type | Description |\n| ---- | ------- | ---- | ----------- |\n| width | 100 | `number` | 기본 블럭 하나의 가로사이즈 |\n| height | 100 | `number` | 기본 블럭 하나의 세로사이즈 |\n| column | 5 | `number` | 한줄에 들어가는 기본 블럭의 갯수 |\n| outerMargin | 10 | `number` | 그리드 겉부분의 여백값 |\n| innerMargin | 10 | `number` | 블럭 사이의 여백값 |\n| bgColor | rgba(255,255,255,1) | `string` | 그리드 배경색 |\n\n### side\n\n이미지를 관리하는 사이드 팔레트 영역\n\n| Name | default | Type | Description |\n| ---- | ------- | ---- | ----------- |\n| files | [] | `array` | 이미지 목록 |\n| visible | true | `boolean` | 팔레트 표시유무 |\n\n### callback\n\n컴포넌트 콜백 함수들\n\n| Name | params | Description |\n| ---- | ------ | ----------- |\n| init |  | 컴포넌트가 초기화 되었을때 호출합니다. |\n| sideUploadStart |  | 사이드 영역 이미지를 업로드를 시작할때 호출합니다. |\n| sideUploadProgress | `loaded,total,percent` | 사이드 영역 이미지를 업로드중일때 호출합니다. |\n| sideUploadComplete | `res` | 사이드 영역 이미지 하나를 업로드가 끝나면 호출합니다. |\n| sideUploadCompleteAll | | 사이드 영역 모든 이미지 업로드를 완료하면 호출합니다. |\n| sideUploadFail | | 사이드 영역 이미지 업로드를 실패하면 호출합니다. |\n| sideRemove | `images` | 사이드 영역 이미지를 삭제할때 호출합니다. |\n\n\n## API\n\n`PhotoLayoutEditor`를 컨트롤할 수 있습니다. 먼저 컴포넌트를 접근할 수 있도록 인스턴스 변수로 만들어줍니다.  \n다음 컴포넌트와 같이 `ref`를 이용하여 `ple`이름의 변수를 이용하여 API를 사용할 수있습니다.\n\n```\nlet ple = null;\n\u003cPhotoLayoutEditor ref={(r) =\u003e { ple = r }}/\u003e\n```\n\n자세한 API의 내용은 다음 링크를 참고하세요.\n\n- [Side](https://github.com/redgoose-dev/react-photo-layout-editor/wiki/API.Side)\n- [Grid](https://github.com/redgoose-dev/react-photo-layout-editor/wiki/API.Grid)\n- [Cropper](https://github.com/redgoose-dev/react-photo-layout-editor/wiki/API.Cropper)\n- [Util](https://github.com/redgoose-dev/react-photo-layout-editor/wiki/API.Util)\n\n\n## Development\n\n이 프로그램을 개발하기 위하여 데모 페이지를 띄울 수 있습니다.  \n다음 과정을 통하여 브라우저에 개발에 사용되었던 데모 페이지를 열어볼 수 있습니다.\n\n1. `git clone https://github.com/redgoose-dev/react-photo-layout-editor.git`\n1. `cd react-photo-layout-editor`\n1. `yarn install`\n1. `yarn run dev`\n1. in your browser, connect `http://localhost:3000`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredgoose-dev%2Freact-photo-layout-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredgoose-dev%2Freact-photo-layout-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredgoose-dev%2Freact-photo-layout-editor/lists"}