React
Typescript
Styled-Components
Bootstrap
[내가 짱구 속 인물이라면?]
주요 기능
- 간단한 심리 검사 12문항을 통해 MBTI 성향을 파악
- 짱구는 못말려의 인물들 중 성격이 비슷한 인물을 결과페이지에 보여주고 간단한 설명 출력
- 질문지의 진행 상황을 상단 Progress Bar로 표시
동적 쿼리값으로 결과지 생성
문항에 답할 때마다 변수에 응답값이 저장되고, 문항이 모두 끝났을 때 응답값을 종합아여 createSearchParams() 을 통해 동적으로 쿼리값을 생성합니다.
결과 페이지에서 랜더링 시 쿼리값을 가져오고, 그 쿼리값에 맞는 데이터로 이미지와 텍스트를 랜더링합니다.
결과 페이지에서 랜더링 시 쿼리값을 가져오고, 그 쿼리값에 맞는 데이터로 이미지와 텍스트를 랜더링합니다.
어려웠던 점
마지막 문항에서 질문지의 인덱스를 초과하여 데이터를 불러오게 되어, 데이터가 없다는 오류를 만나게 되었습니다.
이를 삼항 연산자의 조건식을 수정하여 문제를 해결했습니다.
React-Bootstrap 내의 Progress Bar를 불러와 사용했는데, transition 속성으로 인해 width값이 마저 채워지지도 않았는데 다음페이지로 넘어가는 것이 시각적으로 완료되지 않은 것처럼 보이는 문제가 있었습니다.
이를 setTimeout 메서드를 사용하여 Progress Bar의 애니메이션이 모두 끝난 시점에 useNavigate가 동작하도록 했습니다.
쿼리 값을 전달하는 방법에 대해서도 학습할 수 있던 프로젝트였습니다.
이를 삼항 연산자의 조건식을 수정하여 문제를 해결했습니다.
React-Bootstrap 내의 Progress Bar를 불러와 사용했는데, transition 속성으로 인해 width값이 마저 채워지지도 않았는데 다음페이지로 넘어가는 것이 시각적으로 완료되지 않은 것처럼 보이는 문제가 있었습니다.
이를 setTimeout 메서드를 사용하여 Progress Bar의 애니메이션이 모두 끝난 시점에 useNavigate가 동작하도록 했습니다.
쿼리 값을 전달하는 방법에 대해서도 학습할 수 있던 프로젝트였습니다.