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

[211011]

 

10월에 처음으로 무언가를 만들어보면서 간략하게 적었던 기록들이다. 티스토리 블로그를 개설하면서 그대로 옮긴 글. 이때도 열심히 좀 쓸걸 그랬다.

 

---

 

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

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

 

음악 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;
};