[Final Project] 8/25 (수)

오늘 작업 내용

• 검색창에서 화면 이동 수정
• 모바일 검색 UI 디자인
• wordcloud 제작

검색창에서 화면 이동 수정

검색창에서 방향키로 이동 시 현재 선택된 아이템이 화면상에서 가장 마지막 아이템일 경우에만 한칸씩 이동하도록 수정했다.
위로 갈때도 마찬가지다.

검색 컴포넌트 하나 만드는데 꽤 많은 시간이 걸렸지만 정말 편리하게 만들어서 개발하면서 검색하는데 너무 편리하다.

모바일 검색 UI 디자인

다음이나 네이버, 멜론같은 사이트를 참고하면서 디자인했다.
보통 검색 아이콘을 누르면 화면 전체를 차지하는 검색 화면이 뜬다.

wordcloud 제작

react-d3-cloud 라이브러리를 사용했다.

오랜만에 수학 지식을 총동원했다.

먼저 해쉬태그 개수에 따른 가중치를 적용했다. 분수함수 $y = 1/x$ 를 이용하여 해쉬태그가 많아질수록 개별 해쉬태그의 글자크기가 상대적으로 줄어든다. 이는 같은 크기의 공간 안에 해쉬태그의 개수가 적든 크든 적절하게 공간을 채우기 위함이다.

또한 로그함수 $y = log_2x$ 를 이용하여 word 의 value 값이 커질수록 크기도 커지도록 만들었다.

// 해쉬태그 개수에 따른 가중치 (해쉬태그가 많아질수록 개별 해쉬태그의 글자크기가 상대적으로 줄어듦)
function wordCountValue(wordCount) {
  // 10개이하: 2, 10개이상: 30/wordCount (y = 30/x 그래프)
  return wordCount <= 10 ? 2 : 30 / wordCount;
}

// 글자 크기
function fontSizeMapper(word) {
  // word.value 의 평균값이 작을수록 글자 크기가 커짐.
  if (windowWidth <= 768) { // 모바일 화면일 경우
    // y = 14 * log2(value) + 1 그래프
    return 14 * (Math.log2(word.value) + 1) * wordCountValue(wordCount);
  } else { 
    // y = 20 * log2(value) + 1 그래프
    return 20 * (Math.log2(word.value) + 1) * wordCountValue(wordCount);
  }
}