jhynsoo/HiPhone_FE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add ImageViewer component

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ImageViewer/index.jsx
View File

@ -18,10 +18,11 @@ function ImageViewer({ images, title }) {
/> />
<S.Images> <S.Images>
{images.map((image) => ( {images.map((image) => (
<img <S.Image
key={image} key={image}
src={image} src={image}
alt="이미지" alt="이미지"
$active={currentImage === image}
onClick={handleClick(image)} onClick={handleClick(image)}
/> />
))} ))}

21
src/styles/ImageViewer.style.js
View File

@ -18,12 +18,17 @@ export const Images = styled.div`
overflow-x: scroll; overflow-x: scroll;
margin-top: 20px; margin-top: 20px;
/* justify-content: center; */ /* justify-content: center; */
`;
img {
width: 64px; export const Image = styled.img`
height: 64px; width: 64px;
object-fit: cover; height: 64px;
border-radius: 8px; object-fit: cover;
cursor: pointer; border-radius: 8px;
} cursor: pointer;
border: 2px solid
${({ theme, $active }) =>
$active ? theme.colors.primary : theme.colors.gray50};
box-sizing: border-box;
`; `;