-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: 게시글 이미지 렌더링 컴포넌트 추가
GET /ideas/{id} api에 맞게 수정
* feat: 게시글 이미지 클릭 시 캐러셀 보여주는 기능 추가
- react-responsive-carousel 이용
- useFeedDetailQuery는 임시
* feat: 아이폰 SE 환경에서 이미지 리스트 좌우 스크롤바 제거
* style: 이미지 리스트 원래 비율 유지하도록 수정
---------
Co-authored-by: semnil5202 <[email protected]>- Loading branch information
1 parent
4e5d997
commit f93c708
Showing
9 changed files
with
259 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import styled from '@emotion/styled'; | ||
| import { Box } from 'concept-be-design-system'; | ||
| import { useState } from 'react'; | ||
|
|
||
| import ImageCarousel from './ImageCarousel'; | ||
| import { ImageResponse } from '../types'; | ||
|
|
||
| interface Props { | ||
| imageResponses: ImageResponse[]; | ||
| } | ||
|
|
||
| const IdeaImageList = ({ imageResponses }: Props) => { | ||
| const [selectedIndex, setSelectedIndex] = useState<number | null>(null); | ||
|
|
||
| const handleImageClick = (index: number) => { | ||
| setSelectedIndex(index); | ||
| }; | ||
|
|
||
| const handleClose = () => { | ||
| setSelectedIndex(null); | ||
| }; | ||
|
|
||
| return ( | ||
| <Box margin="0 0 0 22px"> | ||
| <Wrapper> | ||
| {imageResponses.map(({ id, imageUrl }, index) => ( | ||
| <Item key={id} onClick={() => handleImageClick(index)}> | ||
| <Image src={imageUrl} alt={`Thumbnail ${index}`} /> | ||
| </Item> | ||
| ))} | ||
| </Wrapper> | ||
| {selectedIndex !== null && ( | ||
| <ImageCarousel | ||
| imageUrls={imageResponses.map((response) => response.imageUrl)} | ||
| initialIndex={selectedIndex} | ||
| onClose={handleClose} | ||
| /> | ||
| )} | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default IdeaImageList; | ||
|
|
||
| const Wrapper = styled.div` | ||
| display: flex; | ||
| overflow-x: auto; | ||
| flex-wrap: nowrap; | ||
| gap: 8px; | ||
| &::-webkit-scrollbar { | ||
| display: none; | ||
| } | ||
| `; | ||
|
|
||
| const Item = styled.div` | ||
| flex: 0 0 auto; | ||
| `; | ||
|
|
||
| const Image = styled.img` | ||
| object-fit: cover; | ||
| width: 120px; | ||
| height: 120px; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import styled from '@emotion/styled'; | ||
| import { Flex, Header, SVGHeaderClose24, Spacer, Text } from 'concept-be-design-system'; | ||
| import { CSSProperties, useState } from 'react'; | ||
| import { Carousel } from 'react-responsive-carousel'; | ||
| import 'react-responsive-carousel/lib/styles/carousel.min.css'; | ||
| import { useLockBodyScroll } from 'react-use'; | ||
|
|
||
| import { ReactComponent as SVGLeftArrow } from '../assets/leftArrow.svg'; | ||
| import { ReactComponent as SVGRightArrow } from '../assets/rightArrow.svg'; | ||
|
|
||
| interface Props { | ||
| imageUrls: string[]; | ||
| initialIndex: number; | ||
| onClose: () => void; | ||
| } | ||
| const arrowStyles: CSSProperties = { | ||
| position: 'absolute', | ||
| zIndex: 2, | ||
| top: 'calc(50% - 20px)', | ||
| width: 40, | ||
| height: 48, | ||
| cursor: 'pointer', | ||
| background: 'rgba(0, 0, 0, 0.15)', | ||
| }; | ||
|
|
||
| const ImageCarousel = ({ imageUrls, initialIndex, onClose }: Props) => { | ||
| const [currentIndex, setCurrentIndex] = useState(initialIndex); | ||
|
|
||
| const handleChange = (index: number) => { | ||
| setCurrentIndex(index); | ||
| }; | ||
|
|
||
| useLockBodyScroll(); | ||
|
|
||
| return ( | ||
| <ModalOverlay onClick={onClose}> | ||
| <Header> | ||
| <Header.Item> | ||
| <button onClick={onClose}> | ||
| <SVGHeaderClose24 /> | ||
| </button> | ||
| </Header.Item> | ||
| <Header.Item> | ||
| <Flex> | ||
| <Text font="suit16sb" color="b4"> | ||
| 이미지 상세보기 | ||
| </Text> | ||
| ( | ||
| <Text font="suit16sb" color="c1"> | ||
| {currentIndex + 1} | ||
| </Text> | ||
| <Text font="suit16sb" color="b4"> | ||
| /{imageUrls.length} | ||
| </Text> | ||
| ) | ||
| </Flex> | ||
| </Header.Item> | ||
| <Spacer size={24} /> | ||
| </Header> | ||
| <ModalContent onClick={(e) => e.stopPropagation()}> | ||
| <Carousel | ||
| selectedItem={initialIndex} | ||
| showIndicators={false} | ||
| showThumbs={false} | ||
| showStatus={false} | ||
| onChange={handleChange} | ||
| renderArrowPrev={(onClickHandler, hasPrev, label) => | ||
| hasPrev && ( | ||
| <button type="button" onClick={onClickHandler} title={label} style={{ ...arrowStyles, left: 0 }}> | ||
| <SVGLeftArrow /> | ||
| </button> | ||
| ) | ||
| } | ||
| renderArrowNext={(onClickHandler, hasNext, label) => | ||
| hasNext && ( | ||
| <button type="button" onClick={onClickHandler} title={label} style={{ ...arrowStyles, right: 0 }}> | ||
| <SVGRightArrow /> | ||
| </button> | ||
| ) | ||
| } | ||
| > | ||
| {imageUrls.map((imageUrl, index) => ( | ||
| <div key={index}> | ||
| <img src={imageUrl} alt={`${index}번째 이미지`} /> | ||
| </div> | ||
| ))} | ||
| </Carousel> | ||
| </ModalContent> | ||
| </ModalOverlay> | ||
| ); | ||
| }; | ||
|
|
||
| export default ImageCarousel; | ||
|
|
||
| const ModalOverlay = styled.div` | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| z-index: 10; | ||
| background: rgba(0, 0, 0, 0.6); | ||
| `; | ||
|
|
||
| const ModalContent = styled.div` | ||
| display: flex; | ||
| position: relative; | ||
| align-items: center; | ||
| max-width: 420px; | ||
| height: 100%; | ||
| background: rgba(0, 0, 0, 1); | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters