🔥Debug

互換性flexプロパティ

携帯電話でサイトを確認したところ、リスト型とアルバム型のボタンの表示位置が希望の位置と異なることがわかりました.

コードに問題はなく、オンラインでは良いのですが、携帯電話の互換性に問題があると判断し、確認するとflexの属性に左、右のcani useが正しく認識されていないことがわかりました.

addEventListenerは適用されません

このようにボタンを並べて入力する部分があります.htmlにボタンを作成するのではなく、JSで中間の注目ボタンを変更するので、これらのボタンを包むdivをcreateElementとして作成し、innerhtmlを使用して2つのボタンを入れます.

const profileBtns = document.createElement("div") // <div></div>
  profileBtns.classList.add("buttons") // <div class = "buttons"></div>
  profileBtns.innerHTML = `<img class="img-comment" src="../src/message-btn.png" alt="댓글 버튼">`

  let followBtn = document.createElement("button") // <button/>
  followBtn.setAttribute("type", "button") //<button type="button"/>
  followBtn.classList.add("btn-button", "btn-small", "btn-follow")

  if (json.profile.follower.includes(localStorage.getItem("id"))) {
    followBtn.classList.add("btn-disabled")
    followBtn.textContent = "언팔로우"
    followBtn.addEventListener("click", (e) => {
      Unfollow(e, json.profile.accountname)
    })
  } else {
    followBtn.classList.remove("btn-disabled")
    followBtn.textContent = "팔로우"
    followBtn.addEventListener("click", (e) => {
      Follow(e, json.profile.accountname)
    })
  }
  profileBtns.appendChild(followBtn)

profileBtns.innerHTML += `<img class="img-share" src="../src/share-btn.png" alt="공유 버튼">`

しかし、このように入力すると、イベントが機能しないと判断できます.innerHtmlのボタンが再生されると、上に入力したイベントは適用されないようです.
イベントの宣言セクションを変更したり、innerHtmlを使用して要素を生成しない方法がありますが、innerHtmlを使用しない方法が選択されています.

  const profileBtns = document.createElement("div") // <div></div>
  profileBtns.classList.add("buttons") // <div class = "buttons"></div>
  profileBtns.innerHTML = `<img class="img-comment" src="../src/message-btn.png" alt="댓글 버튼">`

  let followBtn = document.createElement("button") // <button/>
  followBtn.setAttribute("type", "button") //<button type="button"/>
  followBtn.classList.add("btn-button", "btn-small", "btn-follow")

  if (json.profile.follower.includes(localStorage.getItem("id"))) {
    followBtn.classList.add("btn-disabled")
    followBtn.textContent = "언팔로우"
    followBtn.addEventListener("click", (e) => {
      Unfollow(e, json.profile.accountname)
    })
  } else {
    followBtn.classList.remove("btn-disabled")
    followBtn.textContent = "팔로우"
    followBtn.addEventListener("click", (e) => {
      Follow(e, json.profile.accountname)
    })
  }
  profileBtns.appendChild(followBtn)

  const shareBtn = document.createElement("img")
  shareBtn.classList.add("img-share")
  shareBtn.src = "../src/share-btn.png"
  shareBtn.alt = "공유버튼"
  profileBtns.appendChild(shareBtn)
  profiles.appendChild(profileBtns)

配置

提供されるサーバはHTTPサーバであり、HTTPのセキュリティ上の問題によりgithub page、netlify、vercelは導入されていません.

httpsサーバに配備できるようになりました.
https://likelion-snsproject-b421cjpg4-deli-ght.vercel.app/