[ 2주차 기본/심화 ] 웨비의 사진관 😋

[Yeonseo-Jo]

✨ 구현 기능 명세

⭐️기본 과제

• 1. 이미지 (첫번째 섹션만 해당)

  1. 이미지 호버시 백그라운드가 어둡게 처리되고, 해당 사진에 대한 제목과 설명이 나타납니다.

  2. 이미지에서 벗어나면 사라집니다.

     → 한번에 반드시 하나의 이미지의 설명만 나타납니다.

• 2. top버튼

  1. 최상단에서는 보이지 않고, 스크롤을 내림에 따라 점점 선명해집니다.

---

⭐️ 심화 과제

• 1. 이미지

  1. 3줄 이상인 설명은 말줄임표 처리와, 더보기 버튼이 나타납니다.

  2. 더보기 클릭시 설명이 모두 보입니다.

     → 설명은 넘치지 않도록 넣어주세요!

• 2. preview section

  1. 좌우로 화살표 버튼이 있습니다.
  2. 오른쪽 버튼 클릭시 가장 오른쪽 이미지로 scroll 됩니다. (왼쪽 버튼도 마찬가지)

💎 PR Point

1️⃣ 이미지 hover 시 설명 나타나도록 (기본) + 3줄 이상 말줄임표 , 더보기 버튼 (심화)

• 1. 이미지 hover시 설명 보이게 : css + js (show-describe 클래스 밑 설명만 보이게 css 처리)

//js

// 설명 보이기 -> show-describe 클래스 붙여주기
const showDescription = (event) => {
  event.target.classList.add("show-describe");
};

// 설명 안보이게 -> show-describe 클래스 제거
const delDescription = (event) => {
  event.target.classList.remove("show-describe");

  // 더보기 상태 초기화
  const detailContents = $$(".description__detail");
  detailContents.forEach((content) => (content.style.overflow = "hidden"));
  const moreBtns = $$(".detail__more-btn");
  moreBtns.forEach((btn) => (btn.style.display = "block"));
};

// 설명 보이게 하는 핸들러 함수
const handleShowDescription = () => {
  firstSectionImgCards.forEach((imgCard) =>
    imgCard.addEventListener("mouseenter", showDescription)
  );
  firstSectionImgCards.forEach((imgCard) =>
    imgCard.addEventListener("mouseleave", delDescription)
  );
};

• 2. 3줄 이상 말줄임표 + 더보기 버튼 (js + css) :
  • 3줄 이상 말줄임표는 css text-overflow : ellipsis, webkit-line-clamp: 3; 사용,
  • 더보기 버튼 클릭시 설명 보이게 하는 건 js로 구현
  • 양 사진, 제주공항 사진 부분에 더보기 버튼 있습니당!

// 더보기 버튼 보여주는 핸들러 함수

const handleshowMoreBtn = () => {
  const details = $$(".description__detail");
  details.forEach((detail) => {
    if (detail.innerHTML.length > 70) {
      const moreBtn = document.createElement("button");
      moreBtn.setAttribute("type", "button");
      moreBtn.classList.add("detail__more-btn");
      moreBtn.innerHTML = "더보기";

      detail.parentNode.appendChild(moreBtn);
    }
  });
};

// 설명 보이게 하는 함수
const showMoreDescription = (event) => {
  event.target.previousElementSibling.style.overflow = "visible";
  event.target.style.display = "none";
};

// 더보기 버튼 클릭시 설명 보이게 하는 핸들러 함수
const handleShowEllipsis = () => {
  const moreBtns = $$(".detail__more-btn");

  moreBtns.forEach((btn) => btn.addEventListener("click", showMoreDescription));
};

2️⃣ top Btn (기본)

• 스크롤 내림에 따라 선명해지게 => getBoundingClientRect() 활용

const handleTopBtnOpacity = () => {
  const topBtn = $(".to-top");
  //top 버튼과 뷰포트의 상대적인 위치 정보를 받아옴
  const topBtnHeight = topBtn.getBoundingClientRect().height;

  document.addEventListener("scroll", () => {
    topBtn.style.opacity = window.scrollY / topBtnHeight / 30;
  });
};

3️⃣ 좌우 스크롤 좌/우 이동 버튼 (심화)

• scrollLeft 활용해서 js로 구현!

const handlePreviewArrow = () => {
  const leftArrowBtn = $(".preview__left-btn");
  const rightArrowBtn = $(".preview__right-btn");

  const previewSection = $(".preview-section");

  leftArrowBtn.addEventListener("click", () => {
    previewSection.scrollLeft = previewSection.offsetLeft;
  });
  rightArrowBtn.addEventListener(
    "click",
    () => (previewSection.scrollLeft = previewSection.scrollWidth)
  );
};

4️⃣ 기타 신경 쓴 부분

• 함수 캡슐화 : 의존성 최대한 제거하려고 노력했습니다! 한 함수에 두 개 이상의 기능을 하지 않으려고 구분해 함수화하여 구현했습니다

🥺 소요 시간, 어려웠던 점

• 3h
• 바닐라 자스 어렵다..!

🌈 구현 결과물

배포 링크

[SooY2]

이게 바로 우수과제mvp..✨

[SooY2]

이런 방법이... 가독성도 더 좋아지고 우리도 쓰기 편해서 넘 좋다!!

[SooY2]

getBoundingClientRect()메서드를 처음 알았어! 이번 과제 하면서 요소의 속성이랑 메서드가 진짜 다양하다는걸 깨닫는당..
언니가 prpoint에 올려준 링크 참고해서 리뷰 반영할 때 적절한 메서드 사용해봐야겠어!!

[SooY2]

함수 기능별로 나누는거 넘 좋은거같아!
이 함수에선 설명부분 foreach로 돌면서 길이 검사해서 더보기를 넣어주는거라고 이해했는데 이 방법은 어떤지 함 봐주라!
유진언니 코드에서 보니까 html에 제목이랑 설명을 태그로 넣어두지 않고 img에 속성으로 추가해놓고 js로 태그 만들어서 추가해주는 방법을 했더라구 이런 방법에선
검사하는 기능만 있는 함수를 만들고 설명태그 만들어주는 함수에서 검사하는 함수 불러다가 검사하는 방법으로 하면 함수 내부애 foreach가 없어서 함수가 더 최소한의 기능을 할 수 있을거같다는 생각이 들었어ㅎㅎㅎ!!

[SooY2]

태그안에 텍스트나 html넣어줄 때 innerHTML이랑 innerText, textContent중에 뭘 써야할지 궁금해서 찾아보다가
https://velog.io/@kim_unknown_/JavaScript-Difftext
잘 정리해둔 글이 있어서 공유하고 갑니다롱

[SooY2]

scrollLeft나 offsetLeft 이런 속성들도 되게 생소하다.. 과제할 때 기능을 위한 적절한 속성이 있는지 찾아보는 연습을 해봐야겠오

[nayujin-dev]

수고많았어!!! 코드 넘 이뻐 다 흡수해가야징 히히

[nayujin-dev]

와 나는 hover 될때마다 설명 요소에 직접 접근해서 요소.style.visibility="visible" 이런식으로 직접 제어하도록 했는데 연서가 한 방법이 속도 측면에서도 훨씬 좋을듯!!

[nayujin-dev]

그리고 결정적으로 코드도 깔끔해 ,,

[nayujin-dev]

초기화도 따로 함수로 빼니까 가독성이나 유지보수할때 훨씬 더 좋을거같다!!

[nayujin-dev]

나는 이거 button 대신 input type="button"으로 했어!! css 파일에서 input checked일때에 대해서 쉽게 조작하려고 한건데, 생각처럼 쉽게 안되길래 나도 그냥 onClick 이벤트 설정해줬어 키키

[nayujin-dev]

와 먼가 파이썬같아 깔끔해..!!
코드가 기능따라서 다 함수로 분리되어있으니까 보기 정말 편하다!!