yongveloper / lol-mbti Goto Github PK

기본 글씨체 -> 구글폰트 적용하기

현재 작동 방식은
html2canvas -> blob -> new link 인데,

전에 즉시 다운로드 가능하게 끔 했을 때는 모바일에서 대부분 지원이 안됐기 때문에 새로운 창이 열리도록 하는 작동 방식으로 했지만,
다시 좋은 다른 방법이 있다면 개선 해보자

현재 결과 저장하기 버튼 클릭 시 새로운 창에서 열리도록 해놨는데,
기본 브라우저 (Chrome, Safari등) 외에 카카오,페이스북 등 앱 브라우저로 실행 시 새로운 창이 안 열림.

현재 창에서 열리도록 개선 및 테스트 진행

• Next.js + Typescript + styled-components 환경 셋팅하기

1. 불필요한 파일 정리
2. styled-components 환경 셋팅

공유 시 미리 보기 이미지 추가 위함

메인 메인 화면 마크업 및 스타일링 하기

다크모드 설정 후 새로고침 시 깜빡이는 현상 해결하기

문제 화면 마크업&스타일링 하기

카카오 애드핏 재사용 컨테이너 생성 및 광고 추가

• 링크 복사하기 버튼 :클립보드 복사 기능 추가
• 카카오로 공유하기 기능 추가
• 공유를 위한 meta tag 추가
• 다시하기 기능 추가

1. 내부 데이터들로 어떻게 SSG 을 해야 하는 지 고민
2. dynamic routing
3. 마크업
4. 스타일링

• 문제의 답변 클릭 시 다음 화면으로 넘어감
• 문제 넘어갈 때마다 progressbar 진행
• 이전, 다음 버튼 활성화,비활성화
• 답변 유형 저장
• 답변 선택 시 backgroound-color 변경 (유지)
• 결과 보기 클릭시 결과 도출하여 해당 MBTI 페이지로 이동

마이그레이션 진행 이유

기존 styled-components의 문제

• 서버컴포넌트를 지원하지 않는다.
• 런타임 환경에서 실행하기 때문에 렌더링이 늦을 수 있다.
• 다크모드 설정 후 새로고침 시 깜빡이는 것과 같은 현상을 해결하는 데 어려움이 있다.

vanilla-extract 선택 이유

• 기존 CSS-In-JS 형식을 따라가면서 제로 런타임 환경에서 실행되는 이점
• 서버 컴포넌트 지원
• next.js에서 추천하는 tailwind-css를 사용하려 했으나 추가 문법을 의도치 않게 외워야 하는 상황 고려
• TypeScript와 잘 통합되어 있어, CSS 작성 시 타입 안전성을 제공합니다. 이는 버그를 줄이고, 코드의 품질을 향상 시킬 수 있음

얻을 수 있는 이점

• 서버컴포넌트 활용
• 렌더링 속도 향상

답변 버튼 클릭 시 본인이 선택했던 답변을 알 수 있게 클릭한 버튼의 background-color 변경

다크모드 기능 추가하기
미리 작업을 해둬야 나중에 스타일링 할 때 편할 것 같아서 미리 해 놓기

PC에서는 문제가 없으나

mobile 기준 safari 브라우저에서만 작동하고 나머지 브라우저에서는 작동을 안 함.

코드 내의 오타를 찾고 불필요한 리렌더링 되는 부분을 찾아서 개선하기

• Jest, RTL 설치
• Test 관련 ESLint
• 폴더 구조 변경

웹페이지가 검색에 좀 더 잘 노출될 수 있도록 하기 위함

• 메인 화면 SEO 최적화
• MBTI 결과 페이지들 SEO 최적화

• 결과 저장하기 클릭 시 해당 내용 이미지로 저장 기능

netlify vs varcel선택해서 프로젝트 배포하기