guesung/client-ver2.0

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

홀랑: 인공지능 기반 취미 추천 메타 콘텐츠 서비스

📖 소개

'홀랑'은 인공지능 기반의 개인화된 취미 추천 서비스입니다. 사용자의 특성과 선호, 현재 상태를 이해하고 분석하여 가장 적합한 취미를 추천합니다. 또한, 취미에 대한 상세 정보, 실제 취미 수행을 위한 가이드라인, 관련 커뮤니티 소개 등 메타 콘텐츠를 제공하여, 사용자가 취미를 시작하고 이어나가는 데 필요한 모든 정보와 지원을 제공합니다.

🚀 서비스를 기획하게 된 계기

많은 사람들이 새로운 취미를 찾거나 이해하는데 어려움을 겪고 있습니다. 기존의 취미 추천 서비스들은 사용자의 개인적인 선호나 필요를 충분히 고려하지 못하고 있었습니다. 이러한 문제를 해결하고자 '홀랑'을 기획하게 되었습니다. 홀랑은 취미의 세계를 탐색하고 새로운 가능성을 발견하는 여정을 도와주는 가이드 역할을 수행하려 합니다.

🌱 팀 문화

우리 팀은 서로에게 적극적으로 피드백을 주고받는 환경을 추구하며, GitFlow를 통해 체계적인 브랜치 전략을 적용하고 있습니다.

🛠 기술 스택

Frontend React NextJS Typescript React-Query

Backend Java Spring Boot

Database MySQL

Infra AWS EC2 AWS RDS

client-ver2.0's Issues

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

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

답변 페이지 성능 개선

기존 화면

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

로딩 상태 전역 관리

🤷 이슈 내용

질문 페이지 -> 서버로부터 결과를 받고 결과 페이지로 넘어가는 과정에서 로딩이 길다. 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)

반응형 개선

기존 화면

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