From 23738335df72106643197a6abf21e3b35034111c Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Wed, 25 Oct 2023 18:19:42 +0900
Subject: [PATCH] feat: Add ImageViewer component

---
 src/components/ImageViewer/index.jsx |  3 ++-
 src/styles/ImageViewer.style.js      | 21 +++++++++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/ImageViewer/index.jsx b/src/components/ImageViewer/index.jsx
index 74734e7..33df95a 100644
--- a/src/components/ImageViewer/index.jsx
+++ b/src/components/ImageViewer/index.jsx
@@ -18,10 +18,11 @@ function ImageViewer({ images, title }) {
       />
       <S.Images>
         {images.map((image) => (
-          <img
+          <S.Image
             key={image}
             src={image}
             alt="이미지"
+            $active={currentImage === image}
             onClick={handleClick(image)}
           />
         ))}
diff --git a/src/styles/ImageViewer.style.js b/src/styles/ImageViewer.style.js
index 18a4958..78cef12 100644
--- a/src/styles/ImageViewer.style.js
+++ b/src/styles/ImageViewer.style.js
@@ -18,12 +18,17 @@ export const Images = styled.div`
   overflow-x: scroll;
   margin-top: 20px;
   /* justify-content: center; */
-
-  img {
-    width: 64px;
-    height: 64px;
-    object-fit: cover;
-    border-radius: 8px;
-    cursor: pointer;
-  }
+`;
+
+export const Image = styled.img`
+  width: 64px;
+  height: 64px;
+  object-fit: cover;
+  border-radius: 8px;
+  cursor: pointer;
+  border: 2px solid
+    ${({ theme, $active }) =>
+      $active ? theme.colors.primary : theme.colors.gray50};
+
+  box-sizing: border-box;
 `;