fix: 이미지 캐러셀 버튼을 누르면 이미지 전체보기가 됨 (#272)

price-offer · Feb 1, 2024 · 859fff4 · 859fff4
2 parents fd2246d + 6ca5939
commit 859fff4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/src/pages/post/[postId]/index.tsx b/src/pages/post/[postId]/index.tsx
@@ -48,6 +48,7 @@ const PostDetailPage = ({ postId }: Props): ReactElement => {
 
   const router = useRouter()
   const [tradeStatus, setTradeStatus] = useState<TradeStatusCodes>()
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0)
 
   const tradeStatusDialog = useModal()
   const deleteModal = useModal()
@@ -80,18 +81,22 @@ const PostDetailPage = ({ postId }: Props): ReactElement => {
     return <></>
   }
 
+  const handleChangeIndicator = (idx: number) => {
+    setSelectedImageIndex(idx)
+  }
+
   return (
     <>
       <Layout>
         <Main>
-          <div onClick={imageModal.openModal}>
-            <Carousel
-              images={postImages}
-              isArrow
-              name="post-carousel"
-              selectedIndex={0}
-            />
-          </div>
+          <Carousel
+            images={postImages}
+            isArrow
+            name="post-carousel"
+            selectedIndex={0}
+            onChangeIndicator={handleChangeIndicator}
+            onClickImage={imageModal.openModal}
+          />
           <Content>
             <div>
               <ProductCondition>
@@ -179,6 +184,7 @@ const PostDetailPage = ({ postId }: Props): ReactElement => {
         images={postImages}
         isOpen={imageModal.isOpen}
         name="post-detail"
+        selectedIndex={selectedImageIndex}
         onClose={imageModal.closeModal}
       />
       <CommonModal

diff --git a/src/pages/post/index.tsx b/src/pages/post/index.tsx
@@ -189,7 +189,7 @@ const PostPage = ({ type, editPostId }: Props): ReactElement => {
               onChange={e => handleUpdatePostForm('title', e.target.value)}
             />
             <StyledTitleLength styleType="subtitle01M">
-              {postForm.title?.length}/40
+              {postForm.title?.length || 0}/40
             </StyledTitleLength>
           </StyledTitleWrapper>
           <div>