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 }) { /> {images.map((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; `;