카카오톡으로 공유하기를 했을때 공유 이미지가 계속 강의 속 이미지인 '소'로 뜹니다.

안녕하세요. 판다코딩님 덕분에 한층 발전해나가고 있는 학생입니다.

코딩을 처음 해보는데, 이렇게 멋진 홈페이지를 만들 수 있어서 정말 감사했습니다. :)

한 가지 문제가 있어서 문의드립니다.

"카카오톡으로 공유하기를 했을때 공유 이미지가 계속 강의 속 이미지인 '소'로 뜹니다."

<과정>

1. start 파일에서 기존 이미지들은 다 삭제하고, 제가 만든 이미지들을 4장 넣었습니다.

2. 다른 이미지들의 파일 이름을 image-0.png, image-1.png, image-2.png, image-3.png 로 했습니다.

3. image-0 / image-2 / image-3은 모두 제가 만든 이미지로 공유가 되는데, image-1만  이미지가 바뀌지 않고, 기존 강의에서 image-1.png였던 '소'로 뜹니다.

4. start파일에는 '소' 이미지를 삭제해서 없는데, 왜 계속 뜨는지 의문이 듭니다....

혹시 도움 부탁드려도 될까요..?

<코드>

[data.js]코드

/*

 아스트라제네카,0

 화이자,1

 모더나,2

 얀센,3

*/

const qnaList = [

  {

    q: '예방접종 맞은 코로나(COVID-19) 백신은 어떻게 되나요?',

    a: [

      { answer: '아스트라제네카', type: [0] },

      { answer: '화이자', type: [1] },

      { answer: '모더나', type: [2 ] },

      { answer: '얀센', type: [3 ] },

    ]

  },

  {

    q: '성별은 어떻게 되나요?',

    a: [

      { answer: '남성', type: [] },

      { answer: '여성', type: [] },

    ]

  },

  {

    q: '연령대는 어떻게 되나요?',

    a: [

      { answer: '18-29세', type: [] },

      { answer: '30-39세', type: [] },

      { answer: '40-49세', type: [] },

      { answer: '50-59세', type: [] },

      { answer: '60-69세', type: [] },

      { answer: '70-79세', type: [] },

      { answer: '80세 이상', type: [] },

    ]

  },

  {

    q: '몇차 접종인가요?',

    a: [

      { answer: '1차 ', type: [] },

      { answer: '2차 ', type: [] },

    ]

  },

  {

    q: '접종 후 열이 있었나요?',

    a: [

      { answer: '38.4℃ 이하', type: [] },

      { answer: '38.5-38.9℃', type: [] },

      { answer: '39.0-40℃', type: [] },

      { answer: '40.1℃ 이상', type: [] },

    ]

  },

  {

    q: '접종부위에 통증이 있었나요?',

    a: [

      { answer: '통증은 있으나 약 먹을 정도는 아님', type: [] },

      { answer: '1~2일 약을 먹어야 팔을 움직이는데 지장이 없음', type: [] },

      { answer: '3일 이상 통증이 지속되거나 약을 먹어도 통증조절이 안되어 팔을 움직이기 어려운 경우', type: [] },

      { answer: '없음', type: [] },

    ]

  },

  {

    q: '접종부위에 부기나 발적이 있었나요?',

    a: [

      { answer: '직경 5cm 이하', type: [] },

      { answer: '5.1~10cm 움직이기 불편', type: [] },

      { answer: '10cm 이상 활동 어려움', type: [] },

      { answer: '농양', type: [] },

      { answer: '없음', type: [] },

    ]

  },

  {

    q: '토하거나 메스꺼운 증상이 있었나요?',

    a: [

      { answer: '일상생활이 불편한 정도는 아님', type: [] },

      { answer: '하루(24시간)에 1~2회 발생', type: [] },

      { answer: '하루(24시간)에 3회 이상 발생', type: [] },

      { answer: '없음', type: [] },

    ]

  },

  {

    q: '두통, 관절통, 근육통 등 통증이 있었나요?',

    a: [

      { answer: '두통', type: [] },

      { answer: '관절통', type: [] },

      { answer: '근육통', type: [] },

      { answer: '없음', type: [] },

    ]

  },

  {

    q: '피로감이 있었나요?',

    a: [

      { answer: '있음', type: [] },

      { answer: '없음', type: [] },

    ]

  },

  {

    q: '알레르기 반응이 있었나요?(예: 두드러기, 발진, 손이나 얼굴 부기 등)',

    a: [

      { answer: '발진', type: [] },

      { answer: '두드러기', type: [] },

      { answer: '소양감(가려움증)', type: [] },

      { answer: '부기(얼굴, 입술)', type: [] },

      { answer: '없음', type: [] },

    ]

  },

  {

    q: '접종일-증상발생일 기간이 어떻게 되시나요?',

    a: [

      { answer: '0일', type: [] },

      { answer: '1일', type: [] },

      { answer: '2일', type: [] },

      { answer: '3일', type: [] },

      { answer: '4일', type: [] },

      { answer: '5일', type: [] },

      { answer: '6일', type: [] },

      { answer: '7일 이상', type: [] },

    ]

  },

]

const infoList = [

  {

    name: '당신의 증상 비율(%)는 다음과 같습니다.',

    desc: '※아스트라제네카 백신 접종 후, 이상반응 신고자(78,058명)에서의 증상 비율입니다. ※코로나19 예방접종 후 이상반응으로 의심되어 신고된 건으로 의료기관에서 신고한 정보를 기반으로 산출하였으며, 백신과 이상반응 간 인과성을 제시하는 것은 아닙니다. 신고 현황 분류는 새로운 정보 추가시 변경 될 수 있습니다. [출처 : 질병관리청 코로나19예방접종대응추진단 이상반응관리팀]'

  },

  {

    name: '당신의 증상 비율(%)는 다음과 같습니다.',

    desc: '※화이자 백신 접종 후, 이상반응 신고자(37,813명)에서의 증상 비율입니다. ※코로나19 예방접종 후 이상반응으로 의심되어 신고된 건으로 의료기관에서 신고한 정보를 기반으로 산출하였으며, 백신과 이상반응 간 인과성을 제시하는 것은 아닙니다. 신고 현황 분류는 새로운 정보 추가시 변경 될 수 있습니다. [출처 : 질병관리청 코로나19예방접종대응추진단 이상반응관리팀]'

  },

  {

    name: '당신의 증상 비율(%)는 다음과 같습니다.',

    desc: '※모더나 백신 접종 후, 이상반응 신고자(4,766명)에서의 증상 비율입니다. ※코로나19 예방접종 후 이상반응으로 의심되어 신고된 건으로 의료기관에서 신고한 정보를 기반으로 산출하였으며, 백신과 이상반응 간 인과성을 제시하는 것은 아닙니다. 신고 현황 분류는 새로운 정보 추가시 변경 될 수 있습니다. [출처 : 질병관리청 코로나19예방접종대응추진단 이상반응관리팀]'

  },

  {

    name: '당신의 증상 비율(%)는 다음과 같습니다.',

    desc: '※얀센 백신 접종 후, 이상반응 신고자(7,577명)에서의 증상 비율입니다. ※코로나19 예방접종 후 이상반응으로 의심되어 신고된 건으로 의료기관에서 신고한 정보를 기반으로 산출하였으며, 백신과 이상반응 간 인과성을 제시하는 것은 아닙니다. 신고 현황 분류는 새로운 정보 추가시 변경 될 수 있습니다. [출처 : 질병관리청 코로나19예방접종대응추진단 이상반응관리팀]'

  },

]

[share.js]코드

const url = 'https://mycorona1.netlify.app/';

function setShare(){

  var resultImg = document.querySelector('#resultImg');

  var resultAlt = resultImg.firstElementChild.alt;

  const shareTitle = '코로나(COVID-19) 백신 예방접종 후 건강상태 결과';

  const shareDes = infoList[resultAlt].name;

  const shareImage = url + 'img/image-' + resultAlt + '.png';

  const shareURL = url + 'page/result-' + resultAlt + '.html';

  Kakao.Link.sendDefault({

    objectType: 'feed',

    content: {

      title: shareTitle,

      description: shareDes,

      imageUrl: shareImage,

      link: {

        mobileWebUrl: shareURL,

        webUrl: shareURL

      },

    },

    buttons: [

      {

        title: '결과확인하기',

        link: {

          mobileWebUrl: shareURL,

          webUrl: shareURL,

        },

      },

    ]

  });

}

[result-0.html]코드

<!DOCTYPE html>

<html lang="ko" dir="ltr">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name"author" content="My Corona">

    <meta name"keywords" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기">

    <meta name"description" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기">

    <!-- sns share -->

    <meta property="og:url" content="https://mycorona1.netlify.app" />

    <meta property="og:title" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기" />

    <meta property="og:type" content="website" />

    <meta property="og:image" content="../img/메인 사진.jpg" />

    <meta property="og:description" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기" />

    <!--favicon-->

    <link rel="shortcut icon" href="../img/favicon.ico">

    <link rel="apple-touch-icon-precomposed" href="../img/favicon.ico"/>

    <title>코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="../css/default.css">

    <link rel="stylesheet" href="../css/result.css">

  </head>

  <body>

    <section id="shareResult" class="mx-auto my-5 pb-5 px-3">

      <h4 class="pt-5">당신의 결과는?</h4>

      <div class="resultname">

        <p>당신의 증상 비율(%)는 다음과 같습니다.</p>

      </div>

      <div id="resultImg" class="my-3 col-lg-6 col-md-8 col-sm-10 col-12 mx-auto">

        <img src="../img/image-0.png" alt="0" class="img-fluid">

      </div>

      <div class="resultDesc">

        <p>※아스트라제네카 백신 접종 후, 이상반응 신고자(78,058명)에서의 증상 비율입니다. ※코로나19 예방접종 후 이상반응으로 의심되어 신고된 건으로 의료기관에서 신고한 정보를 기반으로 산출하였으며, 백신과 이상반응 간 인과성을 제시하는 것은 아닙니다. 신고 현황 분류는 새로운 정보 추가시 변경 될 수 있습니다. [출처 : 질병관리청 코로나19예방접종대응추진단 이상반응관리팀]</p>

      </div>

      <script type="text/javascript">

        function moveHome(){

          location.href = "/index.html";

        }

      </script>

      <button type="button" class="gohome mt-3 py-2 px-3" onclick="js:moveHome()">나도 검사해보기</button>

    </section>

  </body>

</html>

[문제의 result-1.html]코드

<!DOCTYPE html>

<html lang="ko" dir="ltr">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name"author" content="My Corona">

    <meta name"keywords" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기">

    <meta name"description" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기">

    <!-- sns share -->

    <meta property="og:url" content="https://mycorona1.netlify.app" />

    <meta property="og:title" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기" />

    <meta property="og:type" content="website" />

    <meta property="og:image" content="../img/메인 사진.jpg" />

    <meta property="og:description" content="코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기" />

    <!--favicon-->

    <link rel="shortcut icon" href="../img/favicon.ico">

    <link rel="apple-touch-icon-precomposed" href="../img/favicon.ico"/>

    <title>코로나(COVID-19) 백신 예방접종 후 건강상태 확인하기</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

    <link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="../css/default.css">

    <link rel="stylesheet" href="../css/result.css">

  </head>

  <body>

    <section id="shareResult" class="mx-auto my-5 pb-5 px-3">

      <h4 class="pt-5">당신의 결과는?</h4>

      <div class="resultname">

        <p>당신의 증상 비율(%)는 다음과 같습니다.</p>

      </div>

      <div id="resultImg" class="my-3 col-lg-6 col-md-8 col-sm-10 col-12 mx-auto">

        <img src="../img/image-1.png" alt="1" class="img-fluid">

      </div>

      <div class="resultDesc">

        <p>※화이자 백신 접종 후, 이상반응 신고자(37,813명)에서의 증상 비율입니다. ※코로나19 예방접종 후 이상반응으로 의심되어 신고된 건으로 의료기관에서 신고한 정보를 기반으로 산출하였으며, 백신과 이상반응 간 인과성을 제시하는 것은 아닙니다. 신고 현황 분류는 새로운 정보 추가시 변경 될 수 있습니다. [출처 : 질병관리청 코로나19예방접종대응추진단 이상반응관리팀]</p>

      </div>

      <script type="text/javascript">

        function moveHome(){

          location.href = "/index.html";

        }

      </script>

      <button type="button" class="gohome mt-3 py-2 px-3" onclick="js:moveHome()">나도 검사해보기</button>

    </section>

  </body>

</html>