'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

aws s3에 있는 이미지 가져와서 make 이미지 할려 해당 CORS 메시지가 나오는데 해결방법 혹시 알수 있을까요?ㅎㅎ 그럼 감사합니다!! 수고하세요!

I have installed react-photo-layout-editor, and copied some code from dev folder. After configuring some loaders in webpack and other stuff, now everything works fine except the preview part of pictures.

As you can see, pics will be added successfully after I click it. But it just won't show up in the preview part. Could you help me? Thanks a loooot!

슬슬 좀 다시 다듬어야할때가 온것같다.

아마 전체적으로 손보면서 상태관리 라이브러리를 redux -> recoil로 변경시키면서 좀 공부해보고싶은데 이정도 되면 아마 재작업하면서 컴포넌트들을 전부 포팅해봐야하지 않을까 느껴진다.

이걸 작업하면서 요즘 react를 어떻게 작업해야하는지 감좀 잡을 수 있을거라는 기대감도 들고, 요즘 부쩍 이 프로젝트를 다듬어보고 싶어진다.

일단 할일목록에 추가하기 위하여 이슈로 남겨둔다.

This post was write by google translator.

In the react-photo-layout-editor, the" Text editor "function is out of range.

There are two ways.

1. Add a toolbar button similar to "Setting" function from the forked Repository.
2. Separate the text addition function and layout creation function.

Plan A

It's a difficult way.

Fork out react-photo-layout-editor and add text functionality. You need to add your own features.

You can add features without modifying react-photo-layout-editor.
Press Next step button to go toAdd textfunction.
You can create Add text function.

react-photo-layout-editor can be extracted in Canvas format.
https://github.com/RedgooseDev/react-photo-layout-editor/wiki/API.Util#export

새 버전에 맞는 API 재작성이 필요함.

• [x] 기능에 대한 정의 필요함
• [x] 메서드 목록 작성
• [x] 기능구현
• [ ] ~~문서 작성~~

API 메서드 목록

Side

• [x] api.side.add()
• [x] api.side.remove()
• [x] api.side.clear()
• [x] api.side.selection()
• [x] api.side.select()
• [x] api.side.toggleSelectAll()
• [x] api.side.attachToGrid()
• [x] api.side.getItems()
• [x] api.side.getImages()
• [x] api.side.getKeys()
• [x] api.side.upload()

Grid

• [x] api.grid.getKeys()
• [x] api.grid.getBlocks()
• [x] api.grid.shuffle()
• [x] api.grid.assignImages()
• [x] api.grid.assignImage()
• [x] api.grid.removeImages()
• [x] api.grid.update()
• [x] api.grid.add()
• [x] api.grid.remove()
• [x] api.grid.select()
• [x] api.grid.unselect()
• [x] api.grid.toggleSelectAll()
• [x] api.grid.duplicate()
• [x] api.grid.setPreference()
• [x] api.grid.getPreference()

Util

• [x] api.util.toggleSide()
• [x] api.util.export()
• [x] api.util.import()
• [x] api.util.makeImage()

side와 grid쪽의 목록이 Array형식으로 되어있는데 숫자키값을 가지고 있는 Object 형식으로 바꾸는게 더 좋아보인다. 왜냐하면 배열로 된 데이터에서 특정 항목에 대한 탐색을 하는데 코드가 번거롭고 중첩으로 for문을 돌려야 하는 상황이 많이 보여서 좀 불안해보인다.

만약 변경하게 되면 큰 작업이 될거 같아서 고민해볼 필요가 있음.

cropper가 열린 상태에서 스크롤을 내리거나 리사이즈를 할 때 위치가 틀어지는 현상이 발생한다. cropper에서 position: fixed를 absolute로 변경하면 스크롤은 해결할 수 있겠지만 리사이즈는 쉽게 해결이 불가능하다.

리사이즈 이벤트는 왠만하면 피하고 싶은데 피하려면 cropper 레이아웃을 변경해야할듯하다.