[React + Flask] 간단한 탑스터 웹페이지 (1)

[React + Flask] 간단한 탑스터 웹페이지 (1)

[211011]

배경 색상 / 행과 열의 수 / 앨범 간 간격과 테두리의 두께 를 정할 수 있다.

context api를 이용해 상태를 관리하고 있다.

앨범아트 이미지를 가져오는데는 last.fm의 api를 사용했다.

유튜브에서 크롤링해와서 만든 데이터들이라고 한다.

검색한 결과들이 두 줄로 가로로 보여진다. 드래그앤 드랍으로 탑스터에 옮겨 배치할 수 있다.

last.fm api에서 불러온 앨범아트 이미지들이 실제와 다르거나 없는 것들이 꽤 있었다.

현재는 Spotify api로 바꾸었다. Spotipy 라는 파이썬 라이브러리를 이용해서 백엔드에서 받아와 프론트로 넘겨준다.

드래그앤 드랍으로 파일을 보낼 땐 dataTransfer 메소드를 이용한다. 참고

드래그 중에 다른 타일 위로 지나갈 때의 애니메이션을 위해 onDragEnter 와 onDragLeave 이벤트에 대한 핸들러도 만들어주었다.

export const handleDragStart = (e, title) => { console.log("drag start"); let cardImg = e.target.style.backgroundImage; let albumTitle = e.target.id; console.log(albumTitle); e.dataTransfer.setData("card_img", cardImg); e.dataTransfer.setData("album_Title", albumTitle); }; export const handleDragOver = (e) => { e.preventDefault(); //이걸 해야 드롭이 된다!! }; export const handleDragEnter = (e) => { let dragNode = e.target.parentNode; dragNode.id = "dragover"; }; export const handleDragLeave = (e) => { let dragNode = e.target.parentNode; dragNode.id = ""; }; export const handleDrop = (e) => { let dragNode = e.target.parentNode; dragNode.id = ""; const card_img = e.dataTransfer.getData("card_img"); const album_Title = e.dataTransfer.getData("album_Title"); e.target.style.backgroundImage = card_img; e.target.id = album_Title; };

from http://9yujin.tistory.com/10 by ccl(A) rewrite - 2021-12-28 17:01:02