feat: Add ImageViewer component

This commit is contained in:
jhynsoo 2023-10-25 18:19:42 +09:00
parent 148b59a082
commit 23738335df
2 changed files with 15 additions and 9 deletions

View File

@ -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)}
/>
))}

View File

@ -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;
`;