Merge branch 'feature/shareKakaoFaceBook' into develop

+Kakao.init('fill your own key');
+const APP_ID = 'fill your own ID';
+const APP_KEY = 'fill your own key';
 var caloriesLimit=9999;
 function getCheckboxValue(event)  {
   if(event.target.checked)  {
@@ -7,11 +10,9 @@ function getCheckboxValue(event)  {
   }
 
 }
-
 const searchForm = document.querySelector('form');
 const searchResultDiv = document.querySelector('.search-result')
-const APP_ID = 'fill your own ID';
-const APP_KEY = 'fill your own key';
+
 searchForm.addEventListener('submit', function(event){
   if(document.getElementById('name').value.length === 0){
     alert('한글자 이상 입력해주세요');
@@ -27,19 +28,33 @@ searchForm.addEventListener('submit', function(event){
     fetchAPI();
   }
 });
-function shareRecipe(sns,urlInfo) {
-  console.log(urlInfo);
-  var thisUrl = document.URL;
-  var snsWrite = "요리 레시피 공유하기"+urlInfo;
+function shareRecipe(sns,urlInfo,foodImage,foodLabel) {
+  var documentUrl = document.URL;
+  var snsWrite = "친구에게 요리 레시피 추천! 같이 요리 해먹자~"+urlInfo;
   if( sns == 'facebook' ) {
-      var url = "http://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(thisUrl);
+      var url = "http://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(urlInfo);
       window.open(url, "", "width=600, height=4060");
   }
   else if( sns == 'twitter' ) {
-      var url = "http://twitter.com/share?url="+encodeURIComponent(thisUrl)+"&text="+encodeURIComponent(snsWrite);
+      var url = "http://twitter.com/share?url="+encodeURIComponent(documentUrl)+"&text="+encodeURIComponent(snsWrite);
       window.open(url, "tweetPop", "width=600, height=400,scrollbars=yes");
+  }else if(sns=='kakaotalk'){
+    Kakao.Link.createDefaultButton({
+      container:'#buttonkakao',
+      objectType:'feed',
+      content:{
+        title:"친구에게 요리 레시피 추천!",
+        description:foodLabel+" 같이 요리 해먹자~",
+        imageUrl:foodImage,
+        link:{
+          mobileWebUrl:urlInfo,
+          webUrl:urlInfo
+        },
+      },
+    });
   }
 }
+
 async function fetchAPI(){
   const recipeURL = `https://api.edamam.com/search?q=${searchQuery}&app_id=${APP_ID}&app_key=${APP_KEY}`;
   const response = await fetch(recipeURL);
@@ -60,10 +75,7 @@ function boxinfo(results){
   else{
     boxsinfo +=
     `
-    <style>
-    
-    </style>
-   
+ 
     <div class="item">
       <img src="${result.recipe.image}" alt="">
       <div class="flex-container">
@@ -71,13 +83,16 @@ function boxinfo(results){
         <a href="${result.recipe.url}" target="_blank">View Recipe</a>
         <!--result.recipe.labe에 + home + recipe 한 검색결과 페이지를 버튼에 링크시켜놓음-->
         <a href="https://www.youtube.com/results?search_query=${result.recipe.label}+home+recipe" target="_blank">View Videos</a>
-        <ul class="sns">
-    <li class="facebook">
-    <a href="#n" onclick="shareRecipe('facebook','${result.recipe.url}'');return false;" class="facebook" target="_self" title="페이스북 공유"><span class="skip">페이스북</span></a>
-    </li>
-    <li class="twitter">
-    <a href="#n" onclick="shareRecipe('twitter','${result.recipe.url}');return false;" class="twitter" target="_self" title="트위터 공유"><span class="skip">트위터</span></a>
-    </li>
+    <ul class="sns">
+      <li class="facebook">
+        <a href="#n" onclick="shareRecipe('facebook','${result.recipe.url}');return false;" class="facebook" target="_self" title="페이스북 공유"><span class="skip">페이스북</span></a>
+      </li>
+      <li class="twitter">
+        <a href="" onclick="shareRecipe('twitter','${result.recipe.url}');return false;" class="twitter" target="_self" title="트위터 공유"><span class="skip">트위터</span></a>
+      </li>
+      <li class="kakaotalk">
+        <a href="javascript:shareRecipe('kakaotalk','${result.recipe.url}','${result.recipe.image}','${result.recipe.label}')" id="buttonkakao" onclick="shareRecipe('kakaotalk','${result.recipe.url}','${result.recipe.image}','${result.recipe.label}');return false;" class="kakaotalk" target="_self" title="카카오톡 새창열림"><span class="skip">카카오톡</span></a>
+      </li>
     </ul>
 
       </div>