diff --git a/package.json b/package.json
index 6d2efb0b..4fa821ae 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet-async": "^2.0.4",
+ "react-responsive-carousel": "^3.2.23",
"react-router-dom": "^6.15.0",
"react-use": "^17.5.0",
"zustand": "^4.4.1"
diff --git a/src/pages/FeedDetail/FeedDetail.page.tsx b/src/pages/FeedDetail/FeedDetail.page.tsx
index 0d84af5e..1001da9d 100644
--- a/src/pages/FeedDetail/FeedDetail.page.tsx
+++ b/src/pages/FeedDetail/FeedDetail.page.tsx
@@ -3,6 +3,7 @@ import { Badge, Divider, Header, Spacer, Text, TextDivider, Flex, Box } from 'co
import { useNavigate, useParams } from 'react-router-dom';
import Comments from './components/Comments';
+import IdeaImageList from './components/IdeaImageList';
import ModifyDropdown from './components/ModifyDropdown';
import ProfileInfo from './components/ProfileInfo';
import ReactionBar from './components/ReactionBar';
@@ -39,6 +40,7 @@ const FeedDetailPage = () => {
owner,
ownerScrap,
ownerLike,
+ imageResponses,
} = useFeedDetailQuery(feedId);
const openConfirm = useConfirm();
const { deleteIdea } = useDeleteIdea();
@@ -95,6 +97,15 @@ const FeedDetailPage = () => {
+ {imageResponses.length > 0 && (
+ <>
+
+
+
+
+
+ )}
+
diff --git a/src/pages/FeedDetail/assets/leftArrow.svg b/src/pages/FeedDetail/assets/leftArrow.svg
new file mode 100644
index 00000000..dfedea2e
--- /dev/null
+++ b/src/pages/FeedDetail/assets/leftArrow.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/pages/FeedDetail/assets/rightArrow.svg b/src/pages/FeedDetail/assets/rightArrow.svg
new file mode 100644
index 00000000..7826ab67
--- /dev/null
+++ b/src/pages/FeedDetail/assets/rightArrow.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/pages/FeedDetail/components/IdeaImageList.tsx b/src/pages/FeedDetail/components/IdeaImageList.tsx
new file mode 100644
index 00000000..1d1181bd
--- /dev/null
+++ b/src/pages/FeedDetail/components/IdeaImageList.tsx
@@ -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(null);
+
+ const handleImageClick = (index: number) => {
+ setSelectedIndex(index);
+ };
+
+ const handleClose = () => {
+ setSelectedIndex(null);
+ };
+
+ return (
+
+
+ {imageResponses.map(({ id, imageUrl }, index) => (
+ - handleImageClick(index)}>
+
+
+ ))}
+
+ {selectedIndex !== null && (
+ response.imageUrl)}
+ initialIndex={selectedIndex}
+ onClose={handleClose}
+ />
+ )}
+
+ );
+};
+
+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;
+`;
diff --git a/src/pages/FeedDetail/components/ImageCarousel.tsx b/src/pages/FeedDetail/components/ImageCarousel.tsx
new file mode 100644
index 00000000..8ecc93d1
--- /dev/null
+++ b/src/pages/FeedDetail/components/ImageCarousel.tsx
@@ -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 (
+
+
+
+
+
+
+
+
+ 이미지 상세보기
+
+ (
+
+ {currentIndex + 1}
+
+
+ /{imageUrls.length}
+
+ )
+
+
+
+
+ e.stopPropagation()}>
+
+ hasPrev && (
+
+ )
+ }
+ renderArrowNext={(onClickHandler, hasNext, label) =>
+ hasNext && (
+
+ )
+ }
+ >
+ {imageUrls.map((imageUrl, index) => (
+
+
+