MoistNacho / RTS_DnD

RTS DnD

TypeScript를 연습하기 위해 만든 리액트 드래그앤드랍 리스트 예제입니다.

Demo

https://moistnacho.github.io/RTS_DnD/

Tools

• Google Chrome (동작환경)
• ReactJS
• TypeScript
• FontAwesome
• React-Beautiful-dnd
• PostCSS

Detailed description

• 페이지 좌측(or 상단)의 네비게이션에서 항목을 선택시 리스트추가 Form 팝업창이 나옵니다.
• 클릭한 항목의 컨텐츠 정보를 Form에 전달하여 해당하는 케이스를 반환하여 서로 다른 Form 화면을 출력 합니다.
• 추가된 리스트 Item 또한 컨텐츠에 따라 서로 다른 케이스를 반환하여 서로 다른 디자인을 출력 합니다.
• !) 만약 Image와 Video Form에 제대로된 URL정보를 전달 하지 않으면 기본값으로 지정된 URL을 보여줍니다.
• 각 리스트 아이템은 드래그앤드랍으로 위치를 바꿀 수 있습니다.

Preview

1. 예시 페이지

2. 드래그앤드랍

3. 이미지 추가

4. 비디오 추가

5. 노트 추가