[Wizard of oz] 심리 테스트 사이트 개발

심리 테스트 사이트 개발 프로젝트

Skill Stack

• Frond-end : react, react-hook
• Back-end : firebase

협업 Tool

• Github : 버전 관리
• Notion : 기획 및 일정 관리

프로젝트 인원

• 프론트엔드 2명, 백엔드 2명

총 프로젝트 기간

• 기획: 2월 28일 ~ 3월 2일
• 제작: 3월 3일~ 3월 7일

Github

https://github.com/leeseung-ah/wizard_of_oz

호스팅 페이지

https://fluffy-parfait-861a02.netlify.app/

구현기능

• 페이지 레이아웃 (메인페이지, 문답 페이지, 결과페이지)
• 참여자 수 체크
• 프로그레스 바 기능
• 문항 선택에 따른 결과 연산 알고리즘
• 테스트 결과 카카오톡, sns 공유하기
• 로딩 페이지 애니메이션
• 사이트 배포

내가 담당한 기능

카카오톡 외 sns 공유하기

Kakao Developers(https://developers.kakao.com)접속> 계정 생성 > 내 애플리케이션을 추가 > 플랫폼을 등록> 발급 받은 Javascript key를 입력

  const currentUrl = window.location.href.replace();

  const status = useScript("https://developers.kakao.com/sdk/js/kakao.js");
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    if (status === "ready" && window.Kakao) {
      // 중복 initialization 방지
      if (!window.Kakao.isInitialized()) {
        // 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
        window.Kakao.init("852a9e4a5acf3e0a673805852a1cf45b");
      }
    }
  }, [status]);
  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 2500);
  }, []);

  const shareKakao = () => {
    window.Kakao.Link.sendCustom({
      templateId: 89972,
    });
  };

  const handleKakaoButton = () => {
    window.Kakao.Link.sendScrap({
      requestUrl: currentUrl,
    });
  };
  

현재 URL을 가져와 currentUrl에 저장. useScript함수를 호출하여, 카카오 API를 사용할 수 있는 스크립트를 사용. shareKakao 함수는 Kakao.Link.sendCustom 함수를 호출하여, Kakao Developers에서 생성한 메시지 템플릿을 이용하여 카카오톡 메시지를 전송.
handleKakaoButton에 Kakao.Link.sendScrap 함수를 호출하여, 현재 URL을 카카오톡 스크랩을 보내 웹페이이지 미리보기를 포함한 결과페이지를 카카오톡으로 전송 가능.

방문자 수 카운트

const [total, setTotal] = useState(0);

 const getData = async () => {
    const docRef = doc(db, 'users', 'count');
    const docSnap = await getDoc(docRef);
    const count = docSnap.data().count;
    setTotal(count);
 };
 useEffect(() => {
    getData();
    console.log('total' + total);
 }, [total]);

 const handleClick = e => {
    const target = e.target.value;
    console.log(target);
    setDoc(doc(db, 'users', 'count'), {
       count: total + 1,
    });
 };

Firebase 데이터베이스 연동해서 유저 수를 저장하고 체크하는 기능을 구현. useState 훅을 사용해서 total 변수 선언하고 초기값을 0으로 설정. Firebase의users/count 문서를 가져온 후 해당 문서의 count 값을 total에 저장. handleClick 함수의 버튼이 클릭 될 때 마다 방문자수 체크 실행