guesung/client-ver2.0

인공지능을 활용한 성격 유형별 취미 추천 메타콘텐츠

client-ver2.0's Issues

로딩 상태 전역 관리

🤷 이슈 내용

질문 페이지 -> 서버로부터 결과를 받고 결과 페이지로 넘어가는 과정에서 로딩이 길다. 3D파일의 용량이 크기 때문이다. 그래서 이 과정에서의 loading처리를 해주어야 한다. isLoading을 질문 페이지와 결과 페이지에서 각각 useState로 상태관리를 하니 중간에 loading화면이 끊기는 현상이 있었다. 그래서 useRecoil을 이용하여 loading상태를 관리하고자 한다.

localStorage is not defined

// src/pages/question.tsx
export default function question({ data }: { data: QuestionDataType[] }) {
 ...
  const nickname = localStorage.getItem('nickname') || '';
 ...
}

컴포넌트 안에서 localStorage를 사용했는데 not defined가 발생한다.

기존 getStaticProps를 사용하지 않을 때는 발생하지 않던 오류이다. 즉슨, 서버 측에서 페이지를 미리 생성해서 보내주는데, 서버 측에는 localStorage가 존재하지 않아서 뜨는 오류이다.

Originally posted by @guesung in holllang#3 (comment)

라우팅 넘어갈 때 로딩 화면 구현

1. 처음 result페이지에 이동할 때만 <ResultLoading />이 보이도록 구현
2. 그 이외에는 <Loading />이 보이도록 구현

반응형 개선

기존 화면

반응형형이 조금 있긴 있으나 아직 많이 부족하다.

답변 페이지 성능 개선

기존 화면

로딩 속도가 느리다. 더 개선할 수 있는 방법이 있을까?