롤에서 알아보는 MBTI 테스트

🌟소개

😁LOL(게임) 상황 속에서 알아보는 MBTI와 해당 유형에 적합한 포지션을 추천해주는 서비스😁

배포: https://lol-mbti.vercel.app

개발 배경에서 개발 중 시행착오, 설계 등 확인할 수 있습니다.

❗ What I Earned

• 개발 전 와이어프레임, 기능명세서 작성의 필요성
• 기능 단위 Issue 작성 후 Issue 단위로 개발 진행
• 컴포넌트 구조 설계하기
• 함수형 컴포넌트의 사용
• 반응형 웹 디자인 적용
• useState와 useEffect 사용
• TypeScript 기본적인 사용 및 이해
• Next.js의 getStaticProps에 대한 SSG 이해
• SEO 최적화
• Styled-Component 사용 및 이해
• ThemProvider를 이용한 다크모드 지원
• Google Analytics 적용
• 오픈 API(카카오톡 공유) 적용 및 이해
• html2canvas + file-saver로 DOM 캡쳐, 저장 기능 구현 및 이해

✅ styled-components ➡️ vanilla-extract 마이그레이션 (2024년 2월 25일)

관련포스팅

• 강제적인 클라이언트 컴포넌트 문제 해결

• CSS 런타임 환경 ➡️ 제로 런타임

• 번들 크기 10% 감소

• 시스템 색상에 따른 다크모드 추가

✅ Next.js 11 ➡️ 14 (app) 마이그레이션 (2024년 12월 18일)

관련 포스팅

• 관련 종속성 업데이트
  • React 17.0.2 -> 18.2.0
  • styled-components 5.3.0 -> 6.1.1
  • TypeScript 4.3.5 -> 4.5.2
• Link 태그 하위 태그로 a태그 있던 것 제거
• 최신 app router 구조로 변경
  • styled-components 적용 로직 추가
  • 구글 애널리틱스 코드 변경
  • styled-components 코드 변경
  • 카카오톡 공유하기 코드 변경
• getStaticPaths -> generateStaticParams
• 폰트 최적화: @fontsource -> next/font
• metadata 적용법 변경

🌟 주요 기능 및 페이지

SEO

• SEO 최적화로 인해 '롤 MBTI', '롤 MBTI 테스트' 등 관련 검색어로 검색하면 1순위로 보여지고 있습니다. (구글, 네이버, 다음, 빙 등)

테마(다크모드)

• styled-component를 사용한 custom hook을 활용해서 상단에서 다크모드를 설정할 수 있습니다.
• vanilla-extract와 next-themes를 활용했습니다.
• 사용자의 로컬 모드와 로컬 스토리지를 확인하여 다크모드를 적용할 수 있습니다.

카카오톡 공유하기

• 카카오 API를 활용해서 카카오톡으로 해당 페이지를 공유할 수 있습니다.

문제 답변 페이지

• 상단 화살표 버튼으로 문제를 전, 후로 이동할 수 있습니다.
• 답변 클릭 시 다음 문제로 넘어가며 총 12문제 입니다.
• Hash 자료구조를 활용해서 답변 클릭 시 답변에 맞는 MBTI 유형을 누적해서 도출하는 식으로 구성했습니다.

결과 보기

• 결과 보기 클릭 시 결과 로딩 모달창 컴포넌트를 불러오며 setTimeOut으로 결과 페이지로 넘겨줍니다.

결과 페이지

• 해당 유형의 특징을 보여줍니다.
• 결과 저장하기 클릭 시 결과 내용을 html2canvas + file-saver를 사용해서 이미지로 저장할 수 있습니다.
• 링크 복사하기 클릭 시 해당 링크를 클립보드로 복사할 수 있습니다.

📚 기술 스택

💻 프로젝트 실행 방법

1. .gitignore 파일

/* .env 파일 */
NEXT_PUBLIC_KAKAO_API_KEY=카카오 API Key

2. 개발 환경 실행

yarn dev

3. 배포 환경 실행

1. yarn build
2. yarn start