feat: Add ImageViewer component
This commit is contained in:
parent
148b59a082
commit
23738335df
@ -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)}
|
||||
/>
|
||||
))}
|
||||
|
@ -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;
|
||||
`;
|
||||
|
Loading…
Reference in New Issue
Block a user