[Fix] 메인화면 게임모드 필터링 체크박스로 변경, 연습모드 버튼 추가

[loevray]

📋 Issue Number

close #318

💻 구현 내용

• 게임모드 필터링 버튼을 체크박스로 변경하였습니다.
• 연습모드 버튼을 추가하였습니다.
• 메인페이지 내부 컴포넌트 리턴문 최상단 article태그를 메인페이지로 꺼내었습니다.(스타일 변경 및 재사용성 up)
• 메인페이지 내 상수 폴더 생성후 이동하였습니다.
• Object.entries가 타입추론을 하지 못하여 유틸 타입인 EntriesType을 제작하였습니다.

📷 Screenshots

bandicam.2024-04-17.21-46-06-171.mp4

🤔 고민사항

고민1) 타입

//상태 타입
 const [checkedGameMode, setCheckedGameMode] = useState<CheckedGameModeType>({
    ALL: true,
    SENTENCE: true,
    CODE: true,
    WORD: true,
  });

//여기가 핵심
  const checkedGameModeList = (
    Object.entries(checkedGameMode) as EntriesType<CheckedGameModeType>
  )
    .filter(([mode, state]) => mode !== 'ALL' && state)
    .map(([mode]) => mode) as Exclude<keyof CheckedGameModeType, 'ALL'>[];

문제점은 대략 아래와 같습니다.

1. Object.entires가 타입을 추론하여 반환하지 않음. 모든 key가 string으로 반환됨.
2. filter메서드가 제거된 요소를 인식하지 못함. 위 코드에서 'ALL'을 명시적으로 제거했음에도 타입추론상 ALL이 반환되어있음.

위 문제를 해결하려고 as키워드를 두번 사용하게 되었습니다😱
타입가드, 유틸타입, 커스텀 타입등으로 해결하고싶은데 마땅한 방법이 떠오르질 않네요..ㅠㅠ

[yejinleee]

고민으로 적어주신 부분 저도 찾아보았을 때 as해결이 많네요 ..
그렇지만 as를 어떻게든 안써보겠다 하면,,

  const checkedGameModeList2 = [];
  let k: keyof typeof checkedGameMode;
  for (k in checkedGameMode) {
    if (k !== 'ALL' && checkedGameMode[k]) {
      checkedGameModeList2.push(k);
    }
  }

요런,,생각이 났습니다!

+

UI 적으로 체크박스 디자인은 이전과 똑같이 두는건 어떠신가요 ?
직접적인 체크박스(네모박스)가 없던 디자인이요!!
체크에 따라 빈 체크박스 <-> ✅ 이렇게 바뀌는거보다 기존처럼 네모 영역이 색이 칠해졌다 지워졌다 하는 등이 더 예쁜 것 같아요!
이부분은, 디자인 개선 얘기하면서 정해봅시다 ㅎㅎ

[dlsxjzld]

고생하셨습니다! 👍
type에서 assertion을 안쓰려면 예진님이 리뷰해주신 것처럼 for ... in 을 쓰는 구조가 제일 나을 것 같네요!!