Favor-Eat : 으른 입맛 테스트

으른 입맛 테스트는 어쩌다가 나왔나

팀원들과 사용자 유입을 어떻게 하면 좋을까 하다가
지인들에게 공유할 수 있는 간단한 테스트를 구현해보는게 어떻냐는 결론이 나왔다.

서버와 통신할 내용도 없고 테스트 구성도 우리가 정하면 되는지라 추가기능으로 분류하고
주요 기능 다 구현한 후에 마음 편히 재밌게 구현하기로 했던 기능이다.

주요 기능을 끝내고 식단일기와 재밌는 테스트 두 개가 남아서 역할 분담을 할 때
개인적으로 카카오톡 공유 기능을 구현해보고 싶어서 내가 맡게 되었다.

아이디어 회의

결과물

순대, 닭발, 콩국수, 오메기떡, 산낙지, 홍어, 추어탕, 번데기, 성게-멍게, 천엽-생간 으로
총 10개의 음식을 선택했다.

이렇게 10개로 호불호룰 검사해 아기 입맛, 청소년 입맛, 어른 입맛
총 3가지 타입의 결과를 확인할 수 있도록 했다.

카카오톡 공유 구현

1. kakao developer에 가서 key를 발급받는다

javascript 키를 사용하면 된다

2. 공유 버튼의 handler 구현

if (!window.Kakao.isInitialized())
  window.Kakao.init(kakao-javascript-key);


const kakao = window.Kakao;
const url = service-url;


kakao.Share.sendDefault({
  objectType: "feed", // 카카오 링크 공유 여러 type들 중 feed라는 타입 -> 자세한 건 카카오에서 확인
  content: {
    title: "나는 으른 입맛일까?",
    description: "나의 입맛 연령 테스트 결과를 구경해보세요",
    imageUrl: image-url,       //무조건 url 형태여야하는거 같다
    link: {
      webUrl: url,
    },
  },
  buttons: [
    {
      title: "웹으로 구경하기",
      link: {
        webUrl: `${url}/share/result?like=${likedCount}`,
        mobileWebUrl: `${url}/share/result?like=${likedCount}`,
      },
    },
  ],
});

3. 카카오톡 공유 결과

+a로,

kakao developers에서 메세지 템플릿을 설정할 수 있는데
query string으로 값을 넘겨주어야 하는데 메세지 템플릿에서 매개변수를 설정할 수 있는거 같은데
직접 했을때는 안되길래 급해서 일단은 메세지 템플릿을 직접 설정하는 방법으로 구현했다.

설정 다 해놨는데 안됨 ㅠㅠ