팀 프로젝트 - 포메이션 판 개발방향 변경

변경 전

원래는 각 선수요소를 클릭해서 원하는 위치에 가져다놓고 변경하고 저장하는 식으로 진행을 했다

저장을 하고 시간이 지난 후 다시 들어왔을 때 저장한 위치를 그대로 사용하기 위해선 x,y좌표값을 저장시켜야 했다

근데 문제가 발생했다

반응형으로 만들기 위해서 vh vw로 컴포넌트 크기를 주었는데

모니터 크기에 따라 x,y 좌표가 달라지는 이슈가 생겼다

해결방법을 찾아보았는데 마땅한 결과가 없었고 결국은 개발 방향을 틀기로 하였다

변경 후

여기있는 예제를 기반으로 변경하기로 하였다

위에 드롭다운을 클릭하면 선택한 포메이션 대로 위치가 옮겨지게 하는 방향을 변경했다

원래도 그런 기능은 있었는데 그때는 draggable 을 사용해서 했었다

변경을 위해서 그때도 x, y좌표를 받아와서 변경하는 방식이어서 그 방식을 그대로 사용할 수 없었다

그래서 아예 새로운 예제를 찾아서 변경하기로 하였다

지금은 저 예제에서 어떤 파일이 어떤 역할을 하는지

어떤 css가 어디에 해당되고 어떤 기능을 하는지 하나씩 쪼개서 분석하고 있다

분석이 끝나면 우리 입맛대로 변경해야한다