포켓몬 마스터가 되겠어!

3번째 개인과제 : 포겟몬 도감 만들기

프로젝트 실행 방법

yarn dev

필수 구현사항

1.페이지 라우팅 설정하여 Home페이지와 Dex페이지 구성하기

react-router-dom 설치 후 Router.jsx파일에서 Home과 Dex페이지의 라우팅을 설정

주소값이 바뀌며 제대로 적용 된 모습

2. 컴포넌트 분리하여 작성하기

- Dashboard : 상단 동행바 컴포넌트

- PokemonCard : PokemonList에 개별적으로 뿌려질 카드 컴포넌트

- PokemonDetail : 포켓몬 상세페이지 컴포넌트

- PokemonList : mock.jsx에서 받아온 포켓몬 배열을 리스트화 하는 컴포넌트

3. 상태 관리와 포켓몬 선택 기능 구현하기

• 포켓몬 카드 하단 동행시키기 버튼 입력 시 동행포켓몬 등록
• 상단 동행 포켓몬 카드의 몬스터볼에 넣기 버튼 입력 시 동행바에서 제거

4. 알림 기능 구현

• 동일한 포켓몬 선택 시 알람

• 빈 동행칸이 없을 때 포켓몬 선택 시 알림

5. 디테일 페이지 구현

• 포켓몬 카드 클릭 시 해당 포켓몬의 디테일 페이지로 이동

• 뒤로가기 클릭 시 Dex 페이지로 이동

6. Context API로 리팩터링하기

트러블슈팅

필수 구현사항은 아니지만 포켓몬별 각 타입을 받아 디테일페이지의 카드 배경 컬러를 따로 적용하였다.

Type.jsx파일을 별개로 만들어 각 타입에 해당하는 컬러의 hex코드를 swich문으로 만들고, 디테일 페이지에서 props를 통해 각 포켓몬별 타입을 넘겨준다. 그 후 타입의 갯수에 따라 출력되는 컬러값이 다르기때문에 삼항 연상자를 통해 이를 구분해주어 컬러값을 반환해 출력한다.

이 과정에서 컬러값이 2개 이상 일 경우 배경색을 그라데이션으로 출력해야하는데, 타입값을 제대로 받아오지 못하거나, 2개 중 1개(첫번째 값)만을 반환하여 코드가 의도대로 작동하지 않았다.

해당 부분의 코드이다

 <DetailContainer color={targetPokemon.types}>
 const DetailContainer = styled.div`
 // 디테일 카드 호버 시 스타일 변경
    &:hover {
     background: ${(props) => {
      if (props.color.length > 1) {
       return `linear-gradient(45deg, ${Type(props.color[0]> )},${Type(
     props.color[1]
                )} )`;
         } else {
          return Type(props.color[0]);
   }}}};`

처음엔 Type(targetPokemon.types)로 타입을 받아왔는데 이를 props로 넘겼을 때 값을 제대로 읽지 못하거나, 첫번째 값만을 읽어왔었다. 그래서 targetPokemon.types 값 전체를 넘겨주고 아래 css 부분에서 Type으로 감싸 hex코드값을 가져왔다! 외에도 사소한 오타나 괄호, `등의 위치가 잘못되어 사소한 오류들이 많았었다. 코드가 길어지면 길어질수록 사소하고 자잘한 오류들이 많이 생기게 되는것같다.

컴포넌트 분리가 너무 힘들었다. 늘상 하나의 파일에서 모든걸 작성하다보니 막상 컴포넌트를 분리하려 했을 때 어떻게 분리를 해야하는지, 어느 기준으로 분리를 해야하는지, 어디까지 분리를 해야하는지 등이 정리가 잘 되지 않아 꽤 많은 시간을 잡아먹었다.

컴포넌트 분리는 사실 아직도 헷갈리는 부분들이 많다. 자주 연습을 하면서 빠르게 익혀야 할 것 같다.

love my team 이창현 님 장종호 님 류지원 님 김태흔 님

도움을 주신 분들 정수희 님 노용철 님 권다정 님 박준호 님 신희범 님 외 다수

모두들 감사합니다