🐭 메인페이지 설명해줘

메인 페이지

챔피언 리스트와 현재 패치 버전에서 2인으로 게임을 진행했을 때 포지션별 가장 승률이 높은 순위를 보여 주는 리스트가 있습니다.

• 챔피언 리스트
• 듀오 승률 리스트
• 유저 피드백
• 이슈

챔피언 리스트

- 검색 기능

챔피언을 검색할 수 있습니다. onChange 함수를 사용해 사용하는 검색 이벤트는 반복적인 이벤트가 발생하므로 lodash debounce를 활용해 onChange가 발생하는 0.3ms 동안은 함수를 호출되지 않도록 막아 이벤트 횟수를 줄였습니다.

const [value, setValue] = useRecoilState(ChampionSearch);
  useEffect(() => {
    setValue("");
  }, []);
  const onChange = _.debounce((e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  }, 300);

듀오 승률 리스트

- 듀오 리스트 필터

각 라인별 듀오 승률 리스트를 보여주는 페이지고 각 리스트에 라인 애니메이션을 추가해 해당 리스트가 어떤 포지션인지 보다 명확하게 보여줬습니다

// tailwind.config.js
keyframes: {
        lgLine: {
          "0%": { width: 0 },
          "100%": { width: "140px" },
        },
      },
      animation: {
        lgLine: "lgLine 0.4s both",
      },

유저 피드백

- 챔피언 선택 직관화

이번 챔피언 리스트를 선택할 때 아무 이벤트가 없어 내가 정확히 눌렀는지 직접 확인하기 어렵다는 피드백이 있었습니다. 해당 부분은 이미지에 border 처리를 해 보다 눈에 보기 쉽게 스타일 했습니다

<Image
    alt={`${data.champNameEn}`}
    src={`https://ddragon.leagueoflegends.com/cdn/12.16.1/img/champion/${data.champNameEn}.png`}
    width={56}
    height={56}
    priority
    placeholder="blur"
    blurDataURL={`https://ddragon.leagueoflegends.com/cdn/12.16.1/img/champion/${data.champNameEn}.png`}
    className={`hover:border-[1px] hover:border-solid ${
      color === 1
        ? "hover:border-blue-100"
        : color === 2
        ? "hover:border-[#5F99FF]"
        : color === 3
        ? "hover:border-[#00D39E]"
        : color === 4
        ? "hover:border-[#FF7637]"
        : "hover:border-gray-700"
    }`}

이슈

1. 배경 이미지 로딩 속도 이슈

메인 배경 사진이 reload시 깜빡이는 증상이 있었다. 이유는 Next/image는 default로 lazy loading이 있어 특별한 설정이 없으면 다운로드가 끝나기 전까지 아무 화면이 보이지 않는다
1. blur 처리?
메인 배경 화면에 blur를 넣는 건 그다지 좋은 UI라고 생각하지 않았다
2. lazy loading 제거?
loading = "eager" 옵션을 추가하면 lazy loading 기능을 취소하고 이미지를 불러올 수 있다

• 이슈 코드

2. PC 버전 지원

현재 서비스는 PC 유저만 사용할 수 있게 제작되었다 해당 게임은 PC 게임으로 PC 이용자가 월등히 높다고 생각해 PC에 최적화했고 다른 기기에서는 접속을 차단하기 위해 페이지 핸들링을 진행했습니다

const [isWindows, setIsWindows] = useState<boolean>(true);
  useEffect(() => {
    const window = navigator.userAgent.includes("Windows");
    setIsWindows(Boolean(window));
  }, []);

• 이슈 코드