kyngmn / mbti_fish

바다 속 나의 모습은? | 도시어부

바다 속 나의 모습은 어떨지 지금 바로 확인해보세요! 👉🏻 테스트하러 GO!

🐟 개요

• 개발기간: 2021.06.29 ~ 2021.07.30
• 개발 인원: FrontEnd(최경민, 조형석, 고정원)
• 내용: MBTI 테스트 사이트 개발
• 클라이언트: 도시어부팀(채널A)

📢 도시어부 유튜브 채널, 도시어부 Grrr에서도 확인 가능해요!

🎮 Tools

- ReactJS, React-Router, Styled-components(view)
- Redux-toolkit (State Management)
- Create React App (Build Tool)
- ESLint, Prettier (Code Quality Tool)
- Firebase (DB, Hosting, Storage)
- Other Tools (Git, Github, notion, Slack etc.)

👽 기능

1. 사용자의 답안 선택에 따른 MBTI 유형 결과출력

2. 공유하기

• 공유하기 시 특이사항 : react는 결과물 공유(SEO)에 적합하지 않음

- react helmet으로 동적 라우팅(?)은 가능
- 결과별 SEO 대안: helmet + snap 또는 loadable-component

• 카카오톡 공유

- kakao developers의 API 중 메시지 > 카카오링크 JS 이용
- API alt 1) 'sendScrap'은 검색엔진과 같은 원리, SEO가 필요
- API alt 2) 'createDefaultButoon': 공유할 때 정보를 실어 보냄. SEO 필요 X. 그러나 버튼을 클릭할 때 버튼을 생성 => 한번 더 클릭해야 전송이 가능하므로 두번 클릭해야하는 문제가 있었음
- API alt 3) 'sendDefault': 눌렀을때 동적으로 버튼을 생성하는게 아니라, 렌더링시 만들어지므로, 공유 O & 한번클릭 O

• 페이스북 공유

- a 태그를 활용하여 비교적 간단한 공유가 가능
- SEO 필요. 카카오톡의 sendScrap API와 같은 원리

• 일반 공유

- 버튼 클릭시 가상의 input 객체를 만들어 text를 넣고, 복사 후 만들었던 input 객체를 지워준다.

3. 반응형처리

🏄🏻‍♂️바다 속 나는 어떤 모습일까요? 지금 바로 확인 해보세요! 👉🏻 테스트하러 GO!