[Feature] word cloud

[leve68]

🎯 이슈 번호

• [Feature] Main Screen 구현 #53

💡 작업 내용

• 워드 클라우드 라이브러리 설치
• 워드 클라우드
• footer

💡 자세한 설명

2024-08-15.4.48.35.mov

echarts-wordcloud

• 예제 참고 : Github
• 이미지 형태가 맞지 않아 흰색 배경을 추가해줌

maskImg.onload = function () {
      const option = {
        series: [
          {
            type: "wordCloud",
            gridSize: 8,
            sizeRange: [16, 120],
            rotationRange: [0, 0],
            shape: "circle",
            maskImage: maskImg,
            textStyle: {
              fontFamily: "Kia-Signature-Regular",
              color: function () {
                const colors = ["#4B7C83", "#4C7DC4", "#C9C9C9"];
                return colors[Math.floor(Math.random() * colors.length)];
              },
            },
            data: data,
          },
        ],
      };

• option 을 설정할 때 onload 를 추가해 이미지를 찾지 못한 상태에서 랜더링을 시도해 랜더링이 되지 않던 문제 해결
• 디자인에는 0, 90 도로 글자들이 배치되어 있지만 라이브러리 구조상 0, 90 으로 설정이 불가능
  • 0, 90 설정 시 45도 각도로도 글자가 돌아가게 되어 있음

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

• PR 제목을 형식에 맞게 작성했나요?
• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (master/main이 아닙니다.)
• Reviewers, Labels, Projects를 등록했나요?
• 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
• 테스트는 잘 통과했나요?
• 불필요한 코드는 제거했나요?