members.js

const members = [
  {
    name: "☃️ 김예지",
    link: "https://skwldwld.github.io/p0",
    github: "https://github.com/skwldwld",
    image: "img/김예지.jpg",
    title: "Just do it",
    githuNickname: "skwldwld",
    selfPR:
      "일단 그냥 해보는 개발자, 김예지입니다.\n어렵고 힘들어보여도 하고 싶은 일이라면\n겁먹고 포기하기보다는 도전해보는 편입니다.\n아직 많이 부족하지만, 멋사에서 다양한 경험을 하며\n여러분들과 함께 성장하고 싶습니다!😝",
    linkColor: "rgba(0, 85, 255, 0.4)",
    githuNicknameColor: "rgba(120, 195, 255, 0.5)",
    titlCcolor: "rgba(229, 249, 128, 0.4)",
  },
  {
    name: "🤖 장한성",
    link: "https://bit.ly/423tfqk",
    github: "https://github.com/HansungJang",
    image: "img/장한성.jpg",
    title: "Every dog has his days",
    githuNickname: "HansungJang",
    selfPR:
      "말하는 것과 음식을 좋아하는 개발자 장한성입니다.\n퀵커머스와 시니어 비즈니스와 관련된 주제에\n 관심이 많고 또, 자료조사에 뛰어나고 열정이 많습니다.\n 멋쟁이사자처럼에서 다양한 개발 경험을 쌓기를 희망하고 있어요!",
    linkColor: "rgba(0, 140, 255, 0.5)",
    githuNicknameColor: "rgba(120, 195, 255, 0.5)",
    titlCcolor: "rgba(249, 239, 128, 0.6)",
  },
  {
    name: "🐼 이한나",
    link: "https://leehannaa.github.io/likeLion-profile/", // 추후 배포한 사이트 링크
    github: "https://github.com/LeeHannaa",
    image: "img/이한나.png",
    title: "Think different",
    githuNickname: "Leehannaa",
    selfPR:
      "다른 생각으로 발전해나가는 개발자, 이한나입니다. \n3주간의 기간 동안 협력하여 우리만의 프로젝트를 완성시켜 나가겠습니다.🔥\n‘당당한 개발자, 새로운 개발자’ 모습에 한 발자국 더 가까워져 있는 모습을 기대합니다.👊🏻",
    linkColor: "rgba(0, 85, 255, 0.4)",
    githuNicknameColor: "rgba(120, 195, 255, 0.5)",
    titlCcolor: "rgba(219, 249, 128, 0.4)",
  },
  {
    name: "🌊 심성환",
    link: "https://hwan129.github.io/myprofile/",
    github: "https://github.com/hwan129",
    image: "img/심성환.jpg",
    title: "Never know until you try",
    githuNickname: "hwan129",
    selfPR:
      "포기하지 않고 개발하는 심성환입니다!\n아직 많이 부족하지만, 궁금한 것을 넘어가지 않고, 막히더라도 끝까지 도전하여 포기하지 않고 배워서 \n성장한 모습 보여드리겠습니다!😤",
    linkColor: "rgba(0, 140, 255, 0.5)",
    githuNicknameColor: "rgba(120, 195, 255, 0.5)",
    titlCcolor: "rgba(243, 249, 128, 0.6)",
  },
  {
    name: "🍓 임종현",
    link: "https://dkrehd0519.github.io/ll-test/",
    github: "https://github.com/dkrehd0519",
    image: "img/임종현.jpg",
    title: "Don't dream, Be it",
    githuNickname: "dkrehd0519",
    selfPR:
      "상상력이 풍부한 개발자 임종현입니다😄\n끊임없이 기본을 다지고 효율적인 방법을 모색해서\n더 나은 개발자가 되려고 노력하겠습니다!💻\n꿈을 꾸기만 하는 것이 아니라\n현실로 이뤄내는 사람이 되겠습니다. 😎",
    linkColor: "rgba(0, 85, 255, 0.4)",
    githuNicknameColor: "rgba(120, 195, 255, 0.5)",
    titlCcolor: "rgba(249, 239, 128, 0.4)",
  },
  {
    name: "🎀 김하은",
    link: "https://haeoii.github.io/basic-setting/",
    github: "https://github.com/HAEOII",
    image: "img/김하은.jpg",
    title: "Simple and happy",
    githuNickname: "HAEOII",
    selfPR:
      "단순하고 행복하게! 개발자 김하은입니다.\n깊게 생각하고 스트레스 받고 고민하기보다는\n좋아하는 일에 무모하게 뛰어들어 부딪치고 싶어요!\n최선을 다해 또 행복하게 몰두하고 싶습니다😎\n멋쟁이 사자에서, 해내는 아기사자 되겠습니다💥",
    linkColor: "rgba(0, 85, 255, 0.4)",
    githuNicknameColor: "rgba(120, 195, 255, 0.5)",
    titlCcolor: "rgba(249, 227, 128, 0.4)",
  },
  {
    name: "⚽️ 한선규",
    link: "https://sungyu0309.github.io/Profile/",
    github: "https://github.com/sungyu0309",
    image: "img/한선규.jpg",
    title: "Grind hard, Shine hard",
    githuNickname: "sungyu0309",
    selfPR:
      "끊임없이 노력하는 개발자, 한선규입니다.\n목표를 달성하기 위해, 문제를 해결하기 위해\n부딪히고 노력하며 결국 누구보다 빛나는 개발자가 되고 싶습니다!\n변화에 적응하기 위해 끊임없이 배워나가는 프론트엔드 개발자가 되겠습니다!",
    linkColor: "rgba(0, 140, 255, 0.5)",
    githuNicknameColor: "rgba(120, 195, 255, 0.5)",
    titlCcolor: "rgba(239, 249, 128, 0.6)",
  },
  {
    name: "🐥 최예라",
    link: "https://yearachoi.github.io/Introduction-Mini-Project/",
    github: "https://github.com/YearaChoi",
    image: "img/최예라.jpg",
    title: "Full of passion",
    githuNickname: "YearaChoi",
    selfPR:
      "열정으로 가득차 있는 개발자, 최예라입니다.\n멋사에서 프로젝트를 진행하며\n'why?'라는 질문을 던지고,\n호기심을 해결하는 과정에서 더 성장하고 싶습니다!\n프론트 뉴비인만큼 언제든지\n새로운 것을 배워나갈 준비가 되어있답니다 🫡",
    linkColor: "rgba(0, 85, 255, 0.4)",
    githuNicknameColor: "rgba(120, 195, 255, 0.5)",
    titlCcolor: "rgba(223, 249, 128, 0.4)",
  },
  {
    name: "🐿️ 박은주 ",
    link: "https://ejpark43.github.io/likeLion_assignment1/",
    github: "https://github.com/ejPark43",
    image: "img/박은주.jpg",
    title: "Believe in yourself ",
    githuNickname: "ejPark43",
    selfPR:
      "매사에 시간을 많이 쏟는 개발자 박은주 입니다.\n프로젝트를 할 때 생각보다 더 많은 시간을 투자하는 편이라 진행 속도가 느리지만, 계속해서 코드를 짜고 공부하면서 익숙하고 빠르게 코드를 짜는\n개발자가 되기 위해 노력할 것입니다.🙌",
    linkColor: "rgba(0, 85, 255, 0.4)",
    githuNicknameColor: "rgba(120, 195, 255, 0.5)",
    titlCcolor: "rgba(241, 249, 128, 0.5)",
  },
  {
    name: "🎵 김하영",
    link: "https://hayoung04.github.io/Self-introduction/",
    github: "https://github.com/Hayoung04",
    image: "img/김하영.jpg",
    title: "Practice makes perfect.",
    githuNickname: "Hayoung04",
    selfPR:
      "안녕하세요, 열심히 노력하는 개발자 김하영입니다.\n계속해서 질문하고, 공부하다 보면\n결국 제가 해결하고자 하는 문제를\n해결할 수 있다고 생각합니다.\n이제는 노력을 넘어\n실력도 쌓아가는 아기 사자가 되겠습니다! 🫡",
    linkColor: "rgba(0, 140, 255, 0.5)",
    githuNicknameColor: "rgba(120, 195, 255, 0.5)",
    titlCcolor: "rgba(241, 249, 128, 0.5)",
  },
];

const membersNode = document.querySelector("div.members");
const originNode = document.querySelector("div.member-card");
const modalNode = document.querySelector("div.modal");

// 멤버 데이터 요소마다 반복
members.map((memberData) => {
  const node = originNode.cloneNode(true); // 기존 template 클론
  node.classList.remove("template"); // template 클래스를 삭제하여 display: none 해제
  node.querySelector(".info-name").innerText = memberData.name; // 이름 변경
  node
    .querySelector(".info-github > a")
    .setAttribute("href", memberData.github); // 깃헙주소 변경
  node.querySelector(".info-github > a").innerText = memberData.githuNickname; // 각자 githubnickname에 github주소걸기
  node.querySelector(".info-introduce > p").innerText = memberData.title; // title 변경
  node
    .querySelector(".card-banner > img")
    .setAttribute("src", memberData.image);

  // 각 member 별로 color 지정하기
  node.querySelector(".info-link > a").style.backgroundColor =
    memberData.linkColor;
  node.querySelector(".info-github > a").style.backgroundColor =
    memberData.githuNicknameColor;
  node.querySelector(".info-introduce > p").style.backgroundColor =
    memberData.titlCcolor;

  node
    .querySelector(".card-banner")
    .addEventListener("click", () => openModal(memberData));

  // 사이트 주소 링크(href) 와 Text 를 바꾸기 위해
  // .link-a 태그를 모두 가져옴.
  node.querySelectorAll(".link-a").forEach((el) => {
    el.setAttribute("href", memberData.link);
    // 하위 노드 개수가 1개이고 하위 노드가 텍스트 노드일경우 텍스트도 변경
    if (
      el.childNodes.length == 1 &&
      el.childNodes[0].nodeType === Node.TEXT_NODE
    )
      el.innerText = "#자기소개";
  });

  membersNode.appendChild(node); // 만들어진 node 를 다시 추가
});

function openModal(memberData) {
  document.body.style.overflow = "hidden";
  const modal = document.querySelector(".modal");
  modal.querySelector(".modal_img > img").setAttribute("src", memberData.image);
  modal.querySelector(".modal_title").innerText = memberData.title;
  modal.querySelector(".modal_selfPR").innerText = memberData.selfPR;
  console.log("click");
  modal.style.display = "flex";
}

function closeModal() {
  modalNode.style.display = "none";
  document.body.style.overflow = "auto";
}

window.addEventListener("click", (e) => {
  e.target === modalNode
    ? ((modalNode.style.display = "none"),
      (document.body.style.overflow = "auto"))
    : false;
});