From cf368a6700a567cd4e021d9959d6dd9e2af7d6bb Mon Sep 17 00:00:00 2001
From: Yeonseo-Jo <jys073190@gmail.com>
Date: Thu, 26 Oct 2023 13:34:22 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0?=
 =?UTF-8?q?=20=EC=A2=8C=EC=9A=B0=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 week2/aissgn1/script.js | 20 ++++++++++++++++++++
 week2/aissgn1/style.css | 18 +++++++++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/week2/aissgn1/script.js b/week2/aissgn1/script.js
index 033c6e4..377b9f3 100644
--- a/week2/aissgn1/script.js
+++ b/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();
diff --git a/week2/aissgn1/style.css b/week2/aissgn1/style.css
index d2f4a85..7ea6d93 100644
--- a/week2/aissgn1/style.css
+++ b/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 부분**/