feat : 미리보기 좌우 스크롤 기능 구현

week2/aissgn1/script.js

@@ -71,6 +71,23 @@ const handleShowEllipsis = () => {
   moreBtns.forEach((btn) => btn.addEventListener("click", showMoreDescription));
 };
 
+// ***** 스크롤 이동 기능 구현 ***
+// 좌우 화살표 버튼 클릭시 가장 좌측/우측으로 이동되게 하는 핸들러 함수
+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)
+  );
+};
+
 //***** 최종 실행 함수(핸들러 함수) *****
 //이미지 hover시 설명 보이게 하는 기능
 handleShowDescription();
@@ -81,3 +98,6 @@ handleTopBtnOpacity();
 //더보기 버튼 클릭시 설명 전체 보이게 하는 기능
 handleshowMoreBtn();
 handleShowEllipsis();
+
+// 미리보기 좌우 화살표 클릭시 스크롤 이동 기능
+handlePreviewArrow();

week2/aissgn1/style.css

@@ -57,12 +57,13 @@ a:active {
   display: flex;
 
   width: 100%;
-  padding: 0 0.5rem;
+  padding: 0 1rem;
   gap: 1.5rem;
 
   /* 가로 스크롤 */
   overflow-x: scroll;
   white-space: nowrap;
+  scroll-behavior: smooth;
 }
 
 .preview-section > img {
@@ -94,10 +95,25 @@ a:active {
 
 .preview__left-btn,
 .preview__right-btn {
+  position: sticky;
+
   font-size: 2.5rem;
+  font-weight: 700;
+
   border: none;
 
   background-color: transparent;
+  color: #2f3542;
+
+  cursor: pointer;
+}
+
+.preview__left-btn {
+  left: 0;
+}
+
+.preview__right-btn {
+  right: 0;
 }
 
 /** 목차 navigation 부분**/