From 63639283d948e1bb16bfb99dc13db0dcacaab6ff Mon Sep 17 00:00:00 2001 From: Sinji Date: Thu, 22 Aug 2024 18:28:18 +0900 Subject: [PATCH 1/7] =?UTF-8?q?refactor:=20=EA=B0=84=EB=8B=A8=ED=95=9C=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=EB=A6=AC=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 현재 간단한 것들만 반영하였으며, 변수 네이밍 및 상태 관리 등은 이후 커밋에 반영하겠습니다. --- .../main/components/carousel/Carousel.tsx | 51 ++++++++++++++----- 1 file changed, 39 insertions(+), 12 deletions(-) diff --git a/src/pages/main/components/carousel/Carousel.tsx b/src/pages/main/components/carousel/Carousel.tsx index bd223544..2d88b2f9 100644 --- a/src/pages/main/components/carousel/Carousel.tsx +++ b/src/pages/main/components/carousel/Carousel.tsx @@ -30,11 +30,42 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { const carouselRef = useRef(null); + const promotionListTest = [ + { + isExternal: false, + performanceId: 56, + promotionId: 5, + promotionPhoto: + "https://beat-dev-bucket.s3.ap-northeast-2.amazonaws.com/poster/8a8efe39-83bf-47b6-b40d-256164928ce7-poster-1723813907142", + redirectUrl: null, + }, + { + isExternal: true, + performanceId: 57, + promotionId: 6, + promotionPhoto: + "https://avatars.githubusercontent.com/u/58854041?s=400&u=fdb4a8dbf5b7ec8d7f327954a4ca97e064b560ee&v=4", + redirectUrl: "https://github.com/pepperdad", + }, + { + isExternal: true, + performanceId: 58, + promotionId: 7, + promotionPhoto: "https://avatars.githubusercontent.com/u/66528589?v=4", + redirectUrl: "https://github.com/sinji2102", + }, + ]; + useEffect(() => { - const carouselTempList = promotionList.map((promotion) => promotion.promotionPhoto || ""); - const carouselItemList = promotionList.map((promotion) => promotion.performanceId || null); - const externalList = promotionList.map((promotion) => promotion.isExternal || null); - const redirectUrlList = promotionList.map((promotion) => promotion.redirectUrl || null); + // const carouselTempList = promotionList.map((promotion) => promotion.promotionPhoto || ""); + // const carouselItemList = promotionList.map((promotion) => promotion.performanceId || null); + // const externalList = promotionList.map((promotion) => promotion.isExternal || null); + // const redirectUrlList = promotionList.map((promotion) => promotion.redirectUrl || null); + + const carouselTempList = promotionListTest.map((promotion) => promotion.promotionPhoto || ""); + const carouselItemList = promotionListTest.map((promotion) => promotion.performanceId || null); + const externalList = promotionListTest.map((promotion) => promotion.isExternal || null); + const redirectUrlList = promotionListTest.map((promotion) => promotion.redirectUrl || null); setCarouselId(carouselItemList); setCarouselList(carouselTempList); @@ -42,11 +73,7 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { setRedirectUrl(redirectUrlList); // 항목이 하나만 들어온 경우 - if (carouselTempList.length === 1) { - setIsSingleItem(true); // 항목이 하나인 경우 상태 변경 - } else { - setIsSingleItem(false); // 여러 개일 경우 상태 리셋 - } + setIsSingleItem(promotionList.length === 0); }, [promotionList]); // 인덱스 번호 변경 @@ -61,14 +88,14 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { // 슬라이드 이동할 때 무한 + 어색하지 않도록 처음과 끝 반복 useEffect(() => { - if (!isSingleItem && carouselList.length !== 0) { + if (isSingleItem) { + setCurrList(carouselList); + } else { const startData = carouselList[0]; const endData = carouselList[carouselList.length - 1]; const newList = [endData, ...carouselList, startData]; setCurrList(newList); - } else if (isSingleItem) { - setCurrList(carouselList); } }, [carouselList, isSingleItem]); From c5a5df17e2fa4881b8b7fd32293e7d1d0c768e54 Mon Sep 17 00:00:00 2001 From: Sinji Date: Fri, 23 Aug 2024 16:18:30 +0900 Subject: [PATCH 2/7] =?UTF-8?q?delete:=20=EC=BA=90=EB=9F=AC=EC=85=80=20?= =?UTF-8?q?=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/domains/bookings/api.ts | 1 - .../main/components/carousel/Carousel.tsx | 36 +------------------ 2 files changed, 1 insertion(+), 36 deletions(-) diff --git a/src/apis/domains/bookings/api.ts b/src/apis/domains/bookings/api.ts index 116c1271..99839b33 100644 --- a/src/apis/domains/bookings/api.ts +++ b/src/apis/domains/bookings/api.ts @@ -77,7 +77,6 @@ export const getMemberBookingList = async () => { const response: AxiosResponse> = await get( "/bookings/member/retrieve" ); - console.log(response); return response.data.data; } catch (error) { diff --git a/src/pages/main/components/carousel/Carousel.tsx b/src/pages/main/components/carousel/Carousel.tsx index 2d88b2f9..5f17982d 100644 --- a/src/pages/main/components/carousel/Carousel.tsx +++ b/src/pages/main/components/carousel/Carousel.tsx @@ -145,36 +145,6 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { } }; - const handleTouchStart: TouchEventHandler = (e) => { - if (!isSingleItem) { - touchStartX = e.touches[0].clientX; - } - }; - - const handleTouchMove: TouchEventHandler = (e) => { - if (!isSingleItem) { - const currTouchX = e.nativeEvent.changedTouches[0].clientX; - - if (carouselRef.current !== null) { - carouselRef.current.style.transform = `translateX(calc(-${currIndex}00% - ${ - (touchStartX - currTouchX) * 2 || 0 - }px))`; - } - } - }; - - const handleTouchEnd: TouchEventHandler = (e) => { - if (!isSingleItem) { - touchEndX = e.changedTouches[0].clientX; - - if (touchStartX >= touchEndX) { - handleSwipe(1); - } else { - handleSwipe(-1); - } - } - }; - return ( {isSingleItem ? ( @@ -188,11 +158,7 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { ) : ( - + {currList?.map((image, idx) => { const key = `${image}-${idx}`; From 8af204d38bf7e1cf5bec1443ad158f6d237b392b Mon Sep 17 00:00:00 2001 From: Sinji Date: Fri, 23 Aug 2024 16:20:56 +0900 Subject: [PATCH 3/7] =?UTF-8?q?delete:=20=EC=BA=90=EB=9F=AC=EC=85=80=20?= =?UTF-8?q?=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/main/components/carousel/Carousel.tsx | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/src/pages/main/components/carousel/Carousel.tsx b/src/pages/main/components/carousel/Carousel.tsx index 5f17982d..ec08e379 100644 --- a/src/pages/main/components/carousel/Carousel.tsx +++ b/src/pages/main/components/carousel/Carousel.tsx @@ -130,21 +130,6 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { } }, [currIndex, isSingleItem]); - const handleSwipe = (direction: number) => { - const newIndex = currIndex + direction; - - if (newIndex === carouselList.length + 1) { - moveToNthSlide(1); - } else if (newIndex === 0) { - moveToNthSlide(carouselList.length); - } - - setCurrIndex((prev) => prev + direction); - if (carouselRef.current !== null) { - carouselRef.current.style.transition = "all 0.5s ease-in-out"; - } - }; - return ( {isSingleItem ? ( From ed1a4f1652bf09729d600004a00d9a4e9c605ce0 Mon Sep 17 00:00:00 2001 From: Sinji Date: Fri, 23 Aug 2024 16:25:22 +0900 Subject: [PATCH 4/7] =?UTF-8?q?chore:=20=EC=BA=90=EB=9F=AC=EC=85=80=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20set=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/components/carousel/Carousel.tsx | 29 +++++++++---------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/src/pages/main/components/carousel/Carousel.tsx b/src/pages/main/components/carousel/Carousel.tsx index ec08e379..f8973489 100644 --- a/src/pages/main/components/carousel/Carousel.tsx +++ b/src/pages/main/components/carousel/Carousel.tsx @@ -30,6 +30,13 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { const carouselRef = useRef(null); + const createCarouselData = (list) => ({ + photo: list.map((promotion) => promotion.promotionPhoto || ""), + id: list.map((promotion) => promotion.performanceId || null), + isExternal: list.map((promotion) => promotion.isExternal || null), + redirectUrl: list.map((promotion) => promotion.redirectUrl || null), + }); + const promotionListTest = [ { isExternal: false, @@ -57,22 +64,12 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { ]; useEffect(() => { - // const carouselTempList = promotionList.map((promotion) => promotion.promotionPhoto || ""); - // const carouselItemList = promotionList.map((promotion) => promotion.performanceId || null); - // const externalList = promotionList.map((promotion) => promotion.isExternal || null); - // const redirectUrlList = promotionList.map((promotion) => promotion.redirectUrl || null); - - const carouselTempList = promotionListTest.map((promotion) => promotion.promotionPhoto || ""); - const carouselItemList = promotionListTest.map((promotion) => promotion.performanceId || null); - const externalList = promotionListTest.map((promotion) => promotion.isExternal || null); - const redirectUrlList = promotionListTest.map((promotion) => promotion.redirectUrl || null); - - setCarouselId(carouselItemList); - setCarouselList(carouselTempList); - setIsExternal(externalList); - setRedirectUrl(redirectUrlList); - - // 항목이 하나만 들어온 경우 + const { photo, id, isExternal, redirectUrl } = createCarouselData(promotionListTest); + + setCarouselList(photo); + setCarouselId(id); + setIsExternal(isExternal); + setRedirectUrl(redirectUrl); setIsSingleItem(promotionList.length === 0); }, [promotionList]); From d59fba87769c90eb44f7712590f560cbae98e653 Mon Sep 17 00:00:00 2001 From: Sinji Date: Fri, 23 Aug 2024 16:37:29 +0900 Subject: [PATCH 5/7] =?UTF-8?q?rename:=20=ED=95=A8=EC=88=98=20=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/components/carousel/Carousel.tsx | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/src/pages/main/components/carousel/Carousel.tsx b/src/pages/main/components/carousel/Carousel.tsx index f8973489..21584c1e 100644 --- a/src/pages/main/components/carousel/Carousel.tsx +++ b/src/pages/main/components/carousel/Carousel.tsx @@ -20,11 +20,12 @@ let touchEndX: number; const Carousel = ({ promotionList }: PromotionComponentProps) => { const navigate = useNavigate(); + // 현재 인덱스 const [currIndex, setCurrIndex] = useState(1); const [currList, setCurrList] = useState(); - const [carouselList, setCarouselList] = useState([]); - const [carouselId, setCarouselId] = useState([]); const [isSingleItem, setIsSingleItem] = useState(false); + const [promotionImg, setPromotionImg] = useState([]); + const [promotionId, setPromotionId] = useState([]); const [isExternal, setIsExternal] = useState([]); const [redirectUrl, setRedirectUrl] = useState([]); @@ -66,8 +67,8 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { useEffect(() => { const { photo, id, isExternal, redirectUrl } = createCarouselData(promotionListTest); - setCarouselList(photo); - setCarouselId(id); + setPromotionImg(photo); + setPromotionId(id); setIsExternal(isExternal); setRedirectUrl(redirectUrl); setIsSingleItem(promotionList.length === 0); @@ -86,15 +87,15 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { // 슬라이드 이동할 때 무한 + 어색하지 않도록 처음과 끝 반복 useEffect(() => { if (isSingleItem) { - setCurrList(carouselList); + setCurrList(promotionImg); } else { - const startData = carouselList[0]; - const endData = carouselList[carouselList.length - 1]; - const newList = [endData, ...carouselList, startData]; + const startData = promotionImg[0]; + const endData = promotionImg[promotionImg.length - 1]; + const newList = [endData, ...promotionImg, startData]; setCurrList(newList); } - }, [carouselList, isSingleItem]); + }, [promotionImg, isSingleItem]); // idx 변경되면 위치 이동 useEffect(() => { @@ -109,10 +110,10 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { const time = setTimeout(() => { const newIndex = currIndex + 1; - if (newIndex === carouselList.length + 1) { + if (newIndex === promotionImg.length + 1) { moveToNthSlide(1); } else if (newIndex === 0) { - moveToNthSlide(carouselList.length); + moveToNthSlide(promotionImg.length); } setCurrIndex((prev) => prev + 1); @@ -133,10 +134,10 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { { - isExternal[0] ? window.open(`${redirectUrl[0]}`) : navigate(`/gig/${carouselId[0]}`); + isExternal[0] ? window.open(`${redirectUrl[0]}`) : navigate(`/gig/${promotionId[0]}`); }} > - carousel-img + carousel-img ) : ( @@ -151,7 +152,7 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { onClick={() => { isExternal[idx - 1] ? window.open(`${redirectUrl[idx - 1]}`) - : navigate(`/gig/${carouselId[idx - 1]}`); + : navigate(`/gig/${promotionId[idx - 1]}`); }} > carousel-img @@ -161,7 +162,7 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { {!isSingleItem && ( - {carouselList.map((_, idx) => ( + {promotionImg.map((_, idx) => ( ))} From 4fecbb9b9108191d7533a7c4d8bd526c2b5c1d29 Mon Sep 17 00:00:00 2001 From: Sinji Date: Fri, 23 Aug 2024 17:18:08 +0900 Subject: [PATCH 6/7] =?UTF-8?q?chore:=20Test=EC=9A=A9=20=EC=BD=94=EB=93=9C?= =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/components/carousel/Carousel.tsx | 28 +------------------ 1 file changed, 1 insertion(+), 27 deletions(-) diff --git a/src/pages/main/components/carousel/Carousel.tsx b/src/pages/main/components/carousel/Carousel.tsx index 21584c1e..b9e64b5d 100644 --- a/src/pages/main/components/carousel/Carousel.tsx +++ b/src/pages/main/components/carousel/Carousel.tsx @@ -38,34 +38,8 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { redirectUrl: list.map((promotion) => promotion.redirectUrl || null), }); - const promotionListTest = [ - { - isExternal: false, - performanceId: 56, - promotionId: 5, - promotionPhoto: - "https://beat-dev-bucket.s3.ap-northeast-2.amazonaws.com/poster/8a8efe39-83bf-47b6-b40d-256164928ce7-poster-1723813907142", - redirectUrl: null, - }, - { - isExternal: true, - performanceId: 57, - promotionId: 6, - promotionPhoto: - "https://avatars.githubusercontent.com/u/58854041?s=400&u=fdb4a8dbf5b7ec8d7f327954a4ca97e064b560ee&v=4", - redirectUrl: "https://github.com/pepperdad", - }, - { - isExternal: true, - performanceId: 58, - promotionId: 7, - promotionPhoto: "https://avatars.githubusercontent.com/u/66528589?v=4", - redirectUrl: "https://github.com/sinji2102", - }, - ]; - useEffect(() => { - const { photo, id, isExternal, redirectUrl } = createCarouselData(promotionListTest); + const { photo, id, isExternal, redirectUrl } = createCarouselData(promotionList); setPromotionImg(photo); setPromotionId(id); From 3d62e88e67a29505c31b24ad6bbfd3f7b263921c Mon Sep 17 00:00:00 2001 From: Sinji Date: Fri, 23 Aug 2024 17:33:12 +0900 Subject: [PATCH 7/7] =?UTF-8?q?chore:=20=EC=95=84=EC=9D=B4=ED=85=9C=20?= =?UTF-8?q?=EA=B0=9C=EC=88=98=200=20>>=201=EC=9C=BC=EB=A1=9C=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/main/components/carousel/Carousel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/main/components/carousel/Carousel.tsx b/src/pages/main/components/carousel/Carousel.tsx index b9e64b5d..659da730 100644 --- a/src/pages/main/components/carousel/Carousel.tsx +++ b/src/pages/main/components/carousel/Carousel.tsx @@ -45,7 +45,7 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => { setPromotionId(id); setIsExternal(isExternal); setRedirectUrl(redirectUrl); - setIsSingleItem(promotionList.length === 0); + setIsSingleItem(promotionList.length === 1); }, [promotionList]); // 인덱스 번호 변경