From 05c5b0d408203b533aba79afd12b9d5c2f735429 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Tue, 26 Sep 2023 20:40:18 +0900 Subject: [PATCH 01/17] [ refactor ] useShowByQuery to useCardType --- .../Card/LastCard/index.tsx | 26 ++++++++++++------- .../Card/MenuModal/index.tsx | 13 ++++++++-- 2 files changed, 27 insertions(+), 12 deletions(-) diff --git a/src/@components/CardCollectionPage/Card/LastCard/index.tsx b/src/@components/CardCollectionPage/Card/LastCard/index.tsx index 4c062ca0..aa2e3a5d 100644 --- a/src/@components/CardCollectionPage/Card/LastCard/index.tsx +++ b/src/@components/CardCollectionPage/Card/LastCard/index.tsx @@ -1,28 +1,30 @@ -import React, { forwardRef, useEffect } from "react"; +import React, { forwardRef, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { IcCongratPiickle } from "../../../../asset/icon"; import { routePaths } from "../../../../core/routes/path"; import { LocationType } from "../../../../types/cardCollection"; import { GTM_CLASS_NAME } from "../../../../util/const/gtm"; -import useShowByCardType from "../../../@common/hooks/useShowByQuery"; +import useCardType from "../../../@common/hooks/useCardType"; import useToast from "../../../@common/Toast/hooks/useToast"; import * as St from "./style"; const TOAST_SESSON_KEY = "showToast"; +const locationTypesNoReplay = [ + LocationType.BEST, + LocationType.MEDLEY, + LocationType.RECENT, + LocationType.BOOKMARK, + LocationType.MALE, + LocationType.FEMALE, +]; const LastCard = forwardRef(function LastCard(_, ref: React.ForwardedRef) { const navigate = useNavigate(); const { showToast } = useToast(); + const { cardType } = useCardType(); + const [isReplayBtnShow, setIsReplayBtnShow] = useState(false); const showToastFlag = !!sessionStorage.getItem(TOAST_SESSON_KEY); - const { isShow: isReplayBtnShow } = useShowByCardType([ - LocationType.BEST, - LocationType.MEDLEY, - LocationType.RECENT, - LocationType.BOOKMARK, - LocationType.MALE, - LocationType.FEMALE, - ]); useEffect(() => { if (showToastFlag) { @@ -31,6 +33,10 @@ const LastCard = forwardRef(function LastCard(_, ref: React.ForwardedRef { + cardType && setIsReplayBtnShow(!locationTypesNoReplay.includes(cardType)); + }, [cardType]); + const reloadForSimilarTopic = () => { sessionStorage.setItem(TOAST_SESSON_KEY, "true"); window.location.reload(); diff --git a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx index 776c1def..6c990c88 100644 --- a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx +++ b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx @@ -1,6 +1,8 @@ +import { useEffect, useState } from "react"; + import { LocationType } from "../../../../types/cardCollection"; import { GTM_CLASS_NAME } from "../../../../util/const/gtm"; -import useShowByCardType from "../../../@common/hooks/useShowByQuery"; +import useCardType from "../../../@common/hooks/useCardType"; import Modal from "../../../@common/Modal"; import useToast from "../../../@common/Toast/hooks/useToast"; import { handleClickBlacklistType } from "../../hooks/useBlacklist"; @@ -23,11 +25,18 @@ type ModalItem = { gtmClassName: string; }; +const locationTypesNoBlock = [LocationType.BEST, LocationType.MEDLEY]; + export default function MenuModal(props: MenuModalProps) { const { currentCardId, closeHandler, autoSlide, handleClickAddBlacklist, handleClickCancelBlacklist } = props; const { showToast, blackoutToast } = useToast(); - const { isShow: isBlockShow } = useShowByCardType([LocationType.BEST, LocationType.MEDLEY]); + const { cardType } = useCardType(); + const [isBlockShow, setIsBlockShow] = useState(false); + + useEffect(() => { + cardType && setIsBlockShow(!locationTypesNoBlock.includes(cardType)); + }, [cardType]); const onSuccessAddBlacklist = () => { closeHandler(); From 300f4cb1b727e905ca90974bd6e6a3530332af9f Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Tue, 26 Sep 2023 20:42:44 +0900 Subject: [PATCH 02/17] [ etc ] remove useShowByQuery --- src/@components/@common/hooks/useShowByQuery.ts | 17 ----------------- 1 file changed, 17 deletions(-) delete mode 100644 src/@components/@common/hooks/useShowByQuery.ts diff --git a/src/@components/@common/hooks/useShowByQuery.ts b/src/@components/@common/hooks/useShowByQuery.ts deleted file mode 100644 index 4d2240a7..00000000 --- a/src/@components/@common/hooks/useShowByQuery.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { useEffect, useState } from "react"; -import { useSearchParams } from "react-router-dom"; - -import { LocationType } from "../../../types/cardCollection"; - -// 파라미터로 보이지 않아야할 locationType 전달 -export default function useShowByCardType(locationTypes: LocationType[]) { - const [isShow, setIsShow] = useState(false); - const [searchParams] = useSearchParams(); - - useEffect(() => { - const cardType = searchParams.get("type"); - setIsShow(!locationTypes.includes((cardType as LocationType) || "")); - }, [locationTypes]); - - return { isShow }; -} From 2beb678ad4a3844cce6215ba5883a444526c6119 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Tue, 26 Sep 2023 20:46:59 +0900 Subject: [PATCH 03/17] [ etc ] move useRecentlyBookmarked and useCardsByGender --- .../BestPiicklePage/BestPiickleRecommend/index.tsx | 4 ++-- .../{BestPiickleRecommend => }/hooks/useCardsByGender.ts | 8 ++++---- .../hooks/useRecentlyBookmarked.ts | 0 src/@components/MainPage/Banner/index.tsx | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) rename src/@components/BestPiicklePage/{BestPiickleRecommend => }/hooks/useCardsByGender.ts (56%) rename src/@components/{@common => BestPiicklePage}/hooks/useRecentlyBookmarked.ts (100%) diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx index 165429ee..74131313 100644 --- a/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRecommend/index.tsx @@ -1,8 +1,8 @@ import { CardList, LocationType } from "../../../types/cardCollection"; import { HeadingTitle } from "../../../util/main/headingTitles"; import HeadingTitleContainer from "../../@common/HeadingTitleContainer"; -import { useRecentlyBookmarked } from "../../@common/hooks/useRecentlyBookmarked"; -import { useCardsByGender } from "./hooks/useCardsByGender"; +import { useCardsByGender } from "../hooks/useCardsByGender"; +import { useRecentlyBookmarked } from "../hooks/useRecentlyBookmarked"; import RecommendItem from "./RecommendItem"; import * as St from "./style"; diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/hooks/useCardsByGender.ts b/src/@components/BestPiicklePage/hooks/useCardsByGender.ts similarity index 56% rename from src/@components/BestPiicklePage/BestPiickleRecommend/hooks/useCardsByGender.ts rename to src/@components/BestPiicklePage/hooks/useCardsByGender.ts index 3d11add8..4656a7d9 100644 --- a/src/@components/BestPiicklePage/BestPiickleRecommend/hooks/useCardsByGender.ts +++ b/src/@components/BestPiicklePage/hooks/useCardsByGender.ts @@ -1,9 +1,9 @@ import useSWR from "swr"; -import { realReq } from "../../../../core/api/common/axios"; -import { PATH } from "../../../../core/api/common/constants"; -import { CardList } from "../../../../types/cardCollection"; -import { PiickleSWRResponse } from "../../../../types/remote/swr"; +import { realReq } from "../../../core/api/common/axios"; +import { PATH } from "../../../core/api/common/constants"; +import { CardList } from "../../../types/cardCollection"; +import { PiickleSWRResponse } from "../../../types/remote/swr"; export function useCardsByGender(gender: "남" | "여") { const { data } = useSWR>( diff --git a/src/@components/@common/hooks/useRecentlyBookmarked.ts b/src/@components/BestPiicklePage/hooks/useRecentlyBookmarked.ts similarity index 100% rename from src/@components/@common/hooks/useRecentlyBookmarked.ts rename to src/@components/BestPiicklePage/hooks/useRecentlyBookmarked.ts diff --git a/src/@components/MainPage/Banner/index.tsx b/src/@components/MainPage/Banner/index.tsx index c58cfa88..695365f7 100644 --- a/src/@components/MainPage/Banner/index.tsx +++ b/src/@components/MainPage/Banner/index.tsx @@ -8,7 +8,7 @@ import { LocationType } from "../../../types/cardCollection"; import { externalLinks } from "../../../util/const/externalLinks"; import { GTM_CLASS_NAME } from "../../../util/const/gtm"; import { newBannerImages, newBannerType } from "../../../util/main/banner"; -import { useRecentlyBookmarked } from "../../@common/hooks/useRecentlyBookmarked"; +import { useRecentlyBookmarked } from "../../BestPiicklePage/hooks/useRecentlyBookmarked"; import useBannerSwiper from "../hooks/useBannerSwiper"; import { useRecentlyUpdated } from "../hooks/useRecentlyUpdated"; import Slide from "./Slide"; From fb6e9630735b4613e879b18bbe4885856956d55b Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Wed, 27 Sep 2023 16:17:57 +0900 Subject: [PATCH 04/17] [ refactor ] useDraggableYContainer to useDraggingContainer --- .../@common/hooks/useDraggableYContainer.ts | 2 +- .../@common/hooks/useDraggingContainer.ts | 41 +++++++++++-------- .../RecommendItem/index.tsx | 2 +- .../Card/CommentModal/index.tsx | 6 +-- .../MainPage/BestPiickle/index.tsx | 2 +- src/@components/MainPage/Medley/index.tsx | 2 +- 6 files changed, 31 insertions(+), 24 deletions(-) diff --git a/src/@components/@common/hooks/useDraggableYContainer.ts b/src/@components/@common/hooks/useDraggableYContainer.ts index 4fd27299..ff50d8eb 100644 --- a/src/@components/@common/hooks/useDraggableYContainer.ts +++ b/src/@components/@common/hooks/useDraggableYContainer.ts @@ -8,7 +8,7 @@ export default function useDraggableYContainer() { const [startY, setStartY] = useState(0); const [movedY, setMovedY] = useState(0); - const touchSensitivity = 0.7; // 이동 감도 조절 값 (조절할 수 있음) + const touchSensitivity = 10; // 이동 감도 조절 값 (조절할 수 있음) function handleTouchStart(event: React.TouchEvent) { setIsStartDragging(true); diff --git a/src/@components/@common/hooks/useDraggingContainer.ts b/src/@components/@common/hooks/useDraggingContainer.ts index 42e107ea..5e37be8c 100644 --- a/src/@components/@common/hooks/useDraggingContainer.ts +++ b/src/@components/@common/hooks/useDraggingContainer.ts @@ -1,25 +1,28 @@ import { useRef, useState } from "react"; -export default function useDraggingContainer() { +type DragDirectionType = "X" | "Y"; + +export default function useDraggingContainer(dragDirection: DragDirectionType) { const containerRef = useRef(null); const [isStartDragging, setIsStartDragging] = useState(false); - const currentX = useRef(0); + const currentRef = useRef(0); - const standardX = useRef(0); - const [draggedX, setDraggedX] = useState(0); + const standardRef = useRef(0); + const [dragged, setDragged] = useState(0); function handleMouseDown(event: React.MouseEvent) { setIsStartDragging(true); - currentX.current = event.pageX; + const page = dragDirection === "X" ? event.pageX : event.pageY; + currentRef.current = page; - initializeForDraggedX(event.pageX); + initializeForDragged(page); } - function initializeForDraggedX(standartX: number) { - setDraggedX(0); - standardX.current = standartX; + function initializeForDragged(standard: number) { + setDragged(0); + standardRef.current = standard; } function handleMouseMove(event: React.MouseEvent) { @@ -27,14 +30,18 @@ export default function useDraggingContainer() { if (!container) return; if (!isStartDragging) return; - moveContainerByCurrentX(container, event.pageX); + const page = dragDirection === "X" ? event.pageX : event.pageY; + + moveContainerByCurrent(container, page); - setDraggedX(Math.abs(event.pageX - standardX.current)); + setDragged(Math.abs(page - standardRef.current)); } - function moveContainerByCurrentX(container: HTMLElement, movedMouseX: number) { - container.scrollLeft += currentX.current - movedMouseX; - currentX.current = movedMouseX; + function moveContainerByCurrent(container: HTMLElement, movedMouseX: number) { + dragDirection === "X" + ? (container.scrollLeft += currentRef.current - movedMouseX) + : (container.scrollTop += currentRef.current - movedMouseX); + currentRef.current = movedMouseX; } function handleMouseUpOrLeave() { @@ -43,8 +50,8 @@ export default function useDraggingContainer() { function reset() { setIsStartDragging(false); - currentX.current = 0; - standardX.current = 0; + currentRef.current = 0; + standardRef.current = 0; } return { @@ -55,6 +62,6 @@ export default function useDraggingContainer() { onMouseUp: handleMouseUpOrLeave, onMouseLeave: handleMouseUpOrLeave, }, - isDragging: draggedX > 10, + isDragging: dragged > 10, }; } diff --git a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx index 2faa4972..0789a859 100644 --- a/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx +++ b/src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx @@ -11,7 +11,7 @@ const BEST_PIICKLE_TOTAL_COUNT = 4; export default function RecommendItem(props: RecommendProps) { const { recommendList } = props; - const { scrollableContainerProps, isDragging } = useDraggingContainer(); + const { scrollableContainerProps, isDragging } = useDraggingContainer("X"); return ( diff --git a/src/@components/CardCollectionPage/Card/CommentModal/index.tsx b/src/@components/CardCollectionPage/Card/CommentModal/index.tsx index 17f447c4..6350bf7f 100644 --- a/src/@components/CardCollectionPage/Card/CommentModal/index.tsx +++ b/src/@components/CardCollectionPage/Card/CommentModal/index.tsx @@ -1,7 +1,7 @@ import { useState } from "react"; import IcSubmitBtn from "../../../../asset/icon/IcSubmitBtn"; -import useDraggableYContainer from "../../../@common/hooks/useDraggableYContainer"; +import useDraggingContainer from "../../../@common/hooks/useDraggingContainer"; import useDrawer from "../../../@common/hooks/useDrawer"; import Modal from "../../../@common/Modal"; import { CommentList, handleCommentController } from "../../hooks/useComments"; @@ -16,7 +16,7 @@ interface CommentModalProps { export default function CommentModal(props: CommentModalProps) { const { cardId, comments, onClickBackground, handleSubmitComment } = props; - const { scrollableContainerProps, isScrollEnd } = useDraggableYContainer(); + const { scrollableContainerProps } = useDraggingContainer("Y"); const { drawerProps, knobRef } = useDrawer(onClickBackground); const [answer, setAnswer] = useState(""); @@ -46,7 +46,7 @@ export default function CommentModal(props: CommentModalProps) { ))} - {!isScrollEnd && } + {/* {!isScrollEnd && } */} diff --git a/src/@components/MainPage/Medley/index.tsx b/src/@components/MainPage/Medley/index.tsx index 74c2a4fd..c7e4e593 100644 --- a/src/@components/MainPage/Medley/index.tsx +++ b/src/@components/MainPage/Medley/index.tsx @@ -4,7 +4,7 @@ import MedleyCard from "./MedleyCard"; import * as St from "./style"; export default function Medley() { - const { scrollableContainerProps, isDragging } = useDraggingContainer(); + const { scrollableContainerProps, isDragging } = useDraggingContainer("X"); const { randomMedleyLists } = useMedleyLists(); return ( From 903cc2d7e8f27cfda5943f0102084a90cce69461 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Thu, 28 Sep 2023 12:34:15 +0900 Subject: [PATCH 05/17] [ fix ] mobile undragging error --- .../@common/hooks/useDraggingContainer.ts | 37 +++++++++++++++++-- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/src/@components/@common/hooks/useDraggingContainer.ts b/src/@components/@common/hooks/useDraggingContainer.ts index 5e37be8c..1ad34e03 100644 --- a/src/@components/@common/hooks/useDraggingContainer.ts +++ b/src/@components/@common/hooks/useDraggingContainer.ts @@ -20,6 +20,15 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { initializeForDragged(page); } + function handleTouchStart(event: React.TouchEvent) { + setIsStartDragging(true); + + const page = dragDirection === "X" ? event.touches[0].clientX : event.touches[0].clientY; + currentRef.current = page; + + initializeForDragged(page); + } + function initializeForDragged(standard: number) { setDragged(0); standardRef.current = standard; @@ -27,27 +36,43 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { function handleMouseMove(event: React.MouseEvent) { const container = containerRef.current; + if (!container) return; if (!isStartDragging) return; const page = dragDirection === "X" ? event.pageX : event.pageY; + moveContainerByCurrent(container, page); + + setDragged(Math.abs(page - standardRef.current)); + } + + function handleTouchMove(event: React.TouchEvent) { + const container = containerRef.current; + + if (!container) return; + if (!isStartDragging) return; + const page = dragDirection === "X" ? event.touches[0].clientX : event.touches[0].clientY; moveContainerByCurrent(container, page); setDragged(Math.abs(page - standardRef.current)); } - function moveContainerByCurrent(container: HTMLElement, movedMouseX: number) { + function moveContainerByCurrent(container: HTMLElement, movedMouse: number) { dragDirection === "X" - ? (container.scrollLeft += currentRef.current - movedMouseX) - : (container.scrollTop += currentRef.current - movedMouseX); - currentRef.current = movedMouseX; + ? (container.scrollLeft += currentRef.current - movedMouse) + : (container.scrollTop += currentRef.current - movedMouse); + currentRef.current = movedMouse; } function handleMouseUpOrLeave() { reset(); } + function handleTouchEndOrCancel() { + reset(); + } + function reset() { setIsStartDragging(false); currentRef.current = 0; @@ -61,6 +86,10 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { onMouseMove: handleMouseMove, onMouseUp: handleMouseUpOrLeave, onMouseLeave: handleMouseUpOrLeave, + onTouchStart: handleTouchStart, + onTouchMove: handleTouchMove, + onTouchEnd: handleMouseUpOrLeave, + onTouchCancel: handleTouchEndOrCancel, }, isDragging: dragged > 10, }; From 6a60f14f3db5f969554148e7ff66e9db458c097c Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Thu, 28 Sep 2023 13:23:27 +0900 Subject: [PATCH 06/17] [ refactor ] eventHandler using SyntheicEvent --- .../@common/hooks/useDraggingContainer.ts | 62 ++++++++----------- 1 file changed, 27 insertions(+), 35 deletions(-) diff --git a/src/@components/@common/hooks/useDraggingContainer.ts b/src/@components/@common/hooks/useDraggingContainer.ts index 1ad34e03..cd68323d 100644 --- a/src/@components/@common/hooks/useDraggingContainer.ts +++ b/src/@components/@common/hooks/useDraggingContainer.ts @@ -5,28 +5,27 @@ type DragDirectionType = "X" | "Y"; export default function useDraggingContainer(dragDirection: DragDirectionType) { const containerRef = useRef(null); - const [isStartDragging, setIsStartDragging] = useState(false); const currentRef = useRef(0); - const standardRef = useRef(0); + + const [isStartDragging, setIsStartDragging] = useState(false); const [dragged, setDragged] = useState(0); - function handleMouseDown(event: React.MouseEvent) { + function handleMouseDown(event: React.SyntheticEvent) { setIsStartDragging(true); - const page = dragDirection === "X" ? event.pageX : event.pageY; - currentRef.current = page; + if (event.nativeEvent instanceof TouchEvent) { + const page = dragDirection === "X" ? event.nativeEvent.touches[0].clientX : event.nativeEvent.touches[0].clientY; + currentRef.current = page; - initializeForDragged(page); - } + initializeForDragged(page); + } + if (event.nativeEvent instanceof MouseEvent) { + const page = dragDirection === "X" ? event.nativeEvent.pageX : event.nativeEvent.pageY; + currentRef.current = page; - function handleTouchStart(event: React.TouchEvent) { - setIsStartDragging(true); - - const page = dragDirection === "X" ? event.touches[0].clientX : event.touches[0].clientY; - currentRef.current = page; - - initializeForDragged(page); + initializeForDragged(page); + } } function initializeForDragged(standard: number) { @@ -34,28 +33,25 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { standardRef.current = standard; } - function handleMouseMove(event: React.MouseEvent) { + function handleMouseMove(event: React.SyntheticEvent) { const container = containerRef.current; if (!container) return; if (!isStartDragging) return; - const page = dragDirection === "X" ? event.pageX : event.pageY; - moveContainerByCurrent(container, page); + if (event.nativeEvent instanceof TouchEvent) { + const page = dragDirection === "X" ? event.nativeEvent.touches[0].clientX : event.nativeEvent.touches[0].clientY; + moveContainerByCurrent(container, page); - setDragged(Math.abs(page - standardRef.current)); - } + setDragged(Math.abs(page - standardRef.current)); + } - function handleTouchMove(event: React.TouchEvent) { - const container = containerRef.current; - - if (!container) return; - if (!isStartDragging) return; + if (event.nativeEvent instanceof MouseEvent) { + const page = dragDirection === "X" ? event.nativeEvent.pageX : event.nativeEvent.pageY; + moveContainerByCurrent(container, page); - const page = dragDirection === "X" ? event.touches[0].clientX : event.touches[0].clientY; - moveContainerByCurrent(container, page); - - setDragged(Math.abs(page - standardRef.current)); + setDragged(Math.abs(page - standardRef.current)); + } } function moveContainerByCurrent(container: HTMLElement, movedMouse: number) { @@ -69,10 +65,6 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { reset(); } - function handleTouchEndOrCancel() { - reset(); - } - function reset() { setIsStartDragging(false); currentRef.current = 0; @@ -86,10 +78,10 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { onMouseMove: handleMouseMove, onMouseUp: handleMouseUpOrLeave, onMouseLeave: handleMouseUpOrLeave, - onTouchStart: handleTouchStart, - onTouchMove: handleTouchMove, + onTouchStart: handleMouseDown, + onTouchMove: handleMouseMove, onTouchEnd: handleMouseUpOrLeave, - onTouchCancel: handleTouchEndOrCancel, + onTouchCancel: handleMouseUpOrLeave, }, isDragging: dragged > 10, }; From 8cce38030f3cd2391a6630211f5fb5055b0a6779 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Thu, 28 Sep 2023 13:28:57 +0900 Subject: [PATCH 07/17] [ fix ] unDragging problem caused by gradient --- src/@components/CardCollectionPage/Card/CommentModal/style.ts | 2 ++ src/@components/CardCollectionPage/style.ts | 1 + 2 files changed, 3 insertions(+) diff --git a/src/@components/CardCollectionPage/Card/CommentModal/style.ts b/src/@components/CardCollectionPage/Card/CommentModal/style.ts index 9fc6a75e..1058c405 100644 --- a/src/@components/CardCollectionPage/Card/CommentModal/style.ts +++ b/src/@components/CardCollectionPage/Card/CommentModal/style.ts @@ -102,6 +102,8 @@ export const Gradient = styled.div` height: 8rem; background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%); + + pointer-events: none; `; export const InputWrapper = styled.div` diff --git a/src/@components/CardCollectionPage/style.ts b/src/@components/CardCollectionPage/style.ts index d2ba81e6..72ee7f63 100644 --- a/src/@components/CardCollectionPage/style.ts +++ b/src/@components/CardCollectionPage/style.ts @@ -20,6 +20,7 @@ export const EventCoach = styled.div` background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%); + pointer-events: none; z-index: 10; `; From 4b166826263fd24200e7358b6ea2ab470945892f Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Thu, 28 Sep 2023 13:33:32 +0900 Subject: [PATCH 08/17] [ refactor ] rename handlers --- .../@common/hooks/useDraggingContainer.ts | 23 ++++++++++--------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/@components/@common/hooks/useDraggingContainer.ts b/src/@components/@common/hooks/useDraggingContainer.ts index cd68323d..4e1a4e6b 100644 --- a/src/@components/@common/hooks/useDraggingContainer.ts +++ b/src/@components/@common/hooks/useDraggingContainer.ts @@ -11,7 +11,7 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { const [isStartDragging, setIsStartDragging] = useState(false); const [dragged, setDragged] = useState(0); - function handleMouseDown(event: React.SyntheticEvent) { + function handleTriggerDown(event: React.SyntheticEvent) { setIsStartDragging(true); if (event.nativeEvent instanceof TouchEvent) { @@ -33,7 +33,7 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { standardRef.current = standard; } - function handleMouseMove(event: React.SyntheticEvent) { + function handleTriggerMove(event: React.SyntheticEvent) { const container = containerRef.current; if (!container) return; @@ -61,7 +61,7 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { currentRef.current = movedMouse; } - function handleMouseUpOrLeave() { + function handleTriggerEnd() { reset(); } @@ -74,14 +74,15 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { return { scrollableContainerProps: { ref: containerRef, - onMouseDown: handleMouseDown, - onMouseMove: handleMouseMove, - onMouseUp: handleMouseUpOrLeave, - onMouseLeave: handleMouseUpOrLeave, - onTouchStart: handleMouseDown, - onTouchMove: handleMouseMove, - onTouchEnd: handleMouseUpOrLeave, - onTouchCancel: handleMouseUpOrLeave, + onMouseDown: handleTriggerDown, + onMouseMove: handleTriggerMove, + onMouseUp: handleTriggerEnd, + onMouseLeave: handleTriggerEnd, + + onTouchStart: handleTriggerDown, + onTouchMove: handleTriggerMove, + onTouchEnd: handleTriggerEnd, + onTouchCancel: handleTriggerEnd, }, isDragging: dragged > 10, }; From 5ff01352bbe2d5c28fe503ef6856c6494359f0a6 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Thu, 28 Sep 2023 13:48:48 +0900 Subject: [PATCH 09/17] [ refactor ] add event mapper --- .../@common/hooks/useDraggingContainer.ts | 32 ++++++++++++++++--- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/src/@components/@common/hooks/useDraggingContainer.ts b/src/@components/@common/hooks/useDraggingContainer.ts index 4e1a4e6b..5cf97ca4 100644 --- a/src/@components/@common/hooks/useDraggingContainer.ts +++ b/src/@components/@common/hooks/useDraggingContainer.ts @@ -2,6 +2,26 @@ import { useRef, useState } from "react"; type DragDirectionType = "X" | "Y"; +type EventMapperType = { + [key in DragDirectionType]: { + touch: "clientX" | "clientY"; + mouse: "pageX" | "pageY"; + }; +}; + +const eventMapper: EventMapperType = { + X: { + touch: "clientX", + mouse: "pageX", + }, + Y: { + touch: "clientY", + mouse: "pageY", + }, +}; + +const FIRST_TOUCH = 0; + export default function useDraggingContainer(dragDirection: DragDirectionType) { const containerRef = useRef(null); @@ -15,13 +35,15 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { setIsStartDragging(true); if (event.nativeEvent instanceof TouchEvent) { - const page = dragDirection === "X" ? event.nativeEvent.touches[0].clientX : event.nativeEvent.touches[0].clientY; + const mapper = eventMapper[dragDirection].touch; + const page = event.nativeEvent.touches[FIRST_TOUCH][mapper]; currentRef.current = page; initializeForDragged(page); } if (event.nativeEvent instanceof MouseEvent) { - const page = dragDirection === "X" ? event.nativeEvent.pageX : event.nativeEvent.pageY; + const mapper = eventMapper[dragDirection].mouse; + const page = event.nativeEvent[mapper]; currentRef.current = page; initializeForDragged(page); @@ -40,14 +62,16 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { if (!isStartDragging) return; if (event.nativeEvent instanceof TouchEvent) { - const page = dragDirection === "X" ? event.nativeEvent.touches[0].clientX : event.nativeEvent.touches[0].clientY; + const mapper = eventMapper[dragDirection].touch; + const page = event.nativeEvent.touches[FIRST_TOUCH][mapper]; moveContainerByCurrent(container, page); setDragged(Math.abs(page - standardRef.current)); } if (event.nativeEvent instanceof MouseEvent) { - const page = dragDirection === "X" ? event.nativeEvent.pageX : event.nativeEvent.pageY; + const mapper = eventMapper[dragDirection].mouse; + const page = event.nativeEvent[mapper]; moveContainerByCurrent(container, page); setDragged(Math.abs(page - standardRef.current)); From c1b1a1ca5120e3ef6b35e2451ce4e38d54f62e83 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Thu, 28 Sep 2023 14:07:54 +0900 Subject: [PATCH 10/17] [ refactor ] add getPageByEventType --- .../@common/hooks/useDraggingContainer.ts | 42 +++++++------------ 1 file changed, 16 insertions(+), 26 deletions(-) diff --git a/src/@components/@common/hooks/useDraggingContainer.ts b/src/@components/@common/hooks/useDraggingContainer.ts index 5cf97ca4..cf36228d 100644 --- a/src/@components/@common/hooks/useDraggingContainer.ts +++ b/src/@components/@common/hooks/useDraggingContainer.ts @@ -31,23 +31,24 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { const [isStartDragging, setIsStartDragging] = useState(false); const [dragged, setDragged] = useState(0); - function handleTriggerDown(event: React.SyntheticEvent) { + function handleTriggerDown(event: React.SyntheticEvent) { setIsStartDragging(true); - if (event.nativeEvent instanceof TouchEvent) { - const mapper = eventMapper[dragDirection].touch; - const page = event.nativeEvent.touches[FIRST_TOUCH][mapper]; - currentRef.current = page; + const page = getPageByEventType(event); + currentRef.current = page; + initializeForDragged(page); + } - initializeForDragged(page); + function getPageByEventType(event: React.SyntheticEvent): number { + if (event.nativeEvent instanceof TouchEvent) { + const eventType = eventMapper[dragDirection].touch; + return event.nativeEvent.touches[FIRST_TOUCH][eventType]; } if (event.nativeEvent instanceof MouseEvent) { - const mapper = eventMapper[dragDirection].mouse; - const page = event.nativeEvent[mapper]; - currentRef.current = page; - - initializeForDragged(page); + const eventType = eventMapper[dragDirection].mouse; + return event.nativeEvent[eventType]; } + return 0; } function initializeForDragged(standard: number) { @@ -55,27 +56,16 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { standardRef.current = standard; } - function handleTriggerMove(event: React.SyntheticEvent) { + function handleTriggerMove(event: React.SyntheticEvent) { const container = containerRef.current; if (!container) return; if (!isStartDragging) return; - if (event.nativeEvent instanceof TouchEvent) { - const mapper = eventMapper[dragDirection].touch; - const page = event.nativeEvent.touches[FIRST_TOUCH][mapper]; - moveContainerByCurrent(container, page); - - setDragged(Math.abs(page - standardRef.current)); - } + const page = getPageByEventType(event); + moveContainerByCurrent(container, page); - if (event.nativeEvent instanceof MouseEvent) { - const mapper = eventMapper[dragDirection].mouse; - const page = event.nativeEvent[mapper]; - moveContainerByCurrent(container, page); - - setDragged(Math.abs(page - standardRef.current)); - } + setDragged(Math.abs(page - standardRef.current)); } function moveContainerByCurrent(container: HTMLElement, movedMouse: number) { From a5e073fc47c72389620a85d9acaa72881e0a0284 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Thu, 28 Sep 2023 14:27:14 +0900 Subject: [PATCH 11/17] [ fix ] active gradient --- .../@common/hooks/useDraggingContainer.ts | 30 ++++++++++++++----- .../Card/CommentModal/index.tsx | 4 +-- 2 files changed, 25 insertions(+), 9 deletions(-) diff --git a/src/@components/@common/hooks/useDraggingContainer.ts b/src/@components/@common/hooks/useDraggingContainer.ts index cf36228d..c2ba8dda 100644 --- a/src/@components/@common/hooks/useDraggingContainer.ts +++ b/src/@components/@common/hooks/useDraggingContainer.ts @@ -28,8 +28,9 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { const currentRef = useRef(0); const standardRef = useRef(0); - const [isStartDragging, setIsStartDragging] = useState(false); - const [dragged, setDragged] = useState(0); + const [isStartDragging, setIsStartDragging] = useState(false); + const [isArrivedEnd, setIsArrivedEnd] = useState(false); + const [dragged, setDragged] = useState(0); function handleTriggerDown(event: React.SyntheticEvent) { setIsStartDragging(true); @@ -64,15 +65,29 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { const page = getPageByEventType(event); moveContainerByCurrent(container, page); + handleArrivedEnd(container); setDragged(Math.abs(page - standardRef.current)); } - function moveContainerByCurrent(container: HTMLElement, movedMouse: number) { - dragDirection === "X" - ? (container.scrollLeft += currentRef.current - movedMouse) - : (container.scrollTop += currentRef.current - movedMouse); - currentRef.current = movedMouse; + function moveContainerByCurrent(container: HTMLElement, movedTrigger: number) { + const delta = currentRef.current - movedTrigger; + if (dragDirection === "X") { + container.scrollLeft += delta; + } + if (dragDirection === "Y") { + container.scrollTop += delta; + } + currentRef.current = movedTrigger; + } + + function handleArrivedEnd(container: HTMLElement) { + if (dragDirection === "X") { + setIsArrivedEnd(container.scrollWidth - container.scrollLeft === container.clientWidth); + } + if (dragDirection === "Y") { + setIsArrivedEnd(container.scrollHeight - container.scrollTop === container.clientHeight); + } } function handleTriggerEnd() { @@ -99,5 +114,6 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { onTouchCancel: handleTriggerEnd, }, isDragging: dragged > 10, + isArrivedEnd, }; } diff --git a/src/@components/CardCollectionPage/Card/CommentModal/index.tsx b/src/@components/CardCollectionPage/Card/CommentModal/index.tsx index 6350bf7f..873d3762 100644 --- a/src/@components/CardCollectionPage/Card/CommentModal/index.tsx +++ b/src/@components/CardCollectionPage/Card/CommentModal/index.tsx @@ -16,7 +16,7 @@ interface CommentModalProps { export default function CommentModal(props: CommentModalProps) { const { cardId, comments, onClickBackground, handleSubmitComment } = props; - const { scrollableContainerProps } = useDraggingContainer("Y"); + const { scrollableContainerProps, isArrivedEnd } = useDraggingContainer("Y"); const { drawerProps, knobRef } = useDrawer(onClickBackground); const [answer, setAnswer] = useState(""); @@ -46,7 +46,7 @@ export default function CommentModal(props: CommentModalProps) { ))} - {/* {!isScrollEnd && } */} + {!isArrivedEnd && } Date: Thu, 28 Sep 2023 14:27:55 +0900 Subject: [PATCH 12/17] [ etc ] remove useDraggableYContainer --- .../@common/hooks/useDraggableYContainer.ts | 55 ------------------- 1 file changed, 55 deletions(-) delete mode 100644 src/@components/@common/hooks/useDraggableYContainer.ts diff --git a/src/@components/@common/hooks/useDraggableYContainer.ts b/src/@components/@common/hooks/useDraggableYContainer.ts deleted file mode 100644 index ff50d8eb..00000000 --- a/src/@components/@common/hooks/useDraggableYContainer.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { useRef, useState } from "react"; - -export default function useDraggableYContainer() { - const containerRef = useRef(null); - - const [isStartDragging, setIsStartDragging] = useState(false); - const [isScrollEnd, setIsScrollEnd] = useState(false); - const [startY, setStartY] = useState(0); - const [movedY, setMovedY] = useState(0); - - const touchSensitivity = 10; // 이동 감도 조절 값 (조절할 수 있음) - - function handleTouchStart(event: React.TouchEvent) { - setIsStartDragging(true); - setStartY(event.touches[0].clientY); // 터치 시작 지점 저장 - setMovedY(0); - } - - function handleTouchMove(event: React.TouchEvent) { - if (!isStartDragging) return; - - const deltaY = event.touches[0].clientY - startY; - - // 이동 감도에 따라 이동 거리 조절 - const adjustedDeltaY = deltaY / touchSensitivity; - - setMovedY(adjustedDeltaY); - moveContainer(adjustedDeltaY); - } - - function moveContainer(deltaY: number) { - const container = containerRef.current; - if (!container) return; - - container.scrollTop -= deltaY; - - // 컨테이너 끝에 도달했는지 여부 확인 - setIsScrollEnd(container.scrollHeight - container.scrollTop === container.clientHeight); - } - - function handleTouchEnd() { - setIsStartDragging(false); - } - - return { - scrollableContainerProps: { - ref: containerRef, - onTouchStart: handleTouchStart, - onTouchMove: handleTouchMove, - onTouchEnd: handleTouchEnd, - }, - isDragging: Math.abs(movedY) > 10, // 이동 거리에 따라 드래그 여부 결정 - isScrollEnd, - }; -} From 6c7b179297426d860fb4a4be16af96b26b2a7bc9 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Sun, 1 Oct 2023 19:30:25 +0900 Subject: [PATCH 13/17] [ refactor ] useDrawer --- src/@components/@common/hooks/useDrawer.ts | 130 +++++++++++---------- 1 file changed, 71 insertions(+), 59 deletions(-) diff --git a/src/@components/@common/hooks/useDrawer.ts b/src/@components/@common/hooks/useDrawer.ts index e5d7af9a..98c4cc2f 100644 --- a/src/@components/@common/hooks/useDrawer.ts +++ b/src/@components/@common/hooks/useDrawer.ts @@ -1,85 +1,94 @@ -import { useCallback, useRef, useState } from "react"; +import { SyntheticEvent, useRef, useState } from "react"; const thresholds = { - offset: 150, // 이 이상 내려야 drawer 닫힘 - transitionTime: 0.2, // 애니메이션 지속 시간 + OFFSET: 150, + ANIMATION_TRANSITION_TIME: 0.2, }; +const FIRST_TOUCH = 0; + export default function useDrawer(closeModal: () => void) { const knobRef = useRef(null); const containerRef = useRef(null); - const [isDragging, setIsDragging] = useState(false); - const [dragStart, setDragStart] = useState({ y: 0 }); - const [yOffset, setYOffset] = useState(0); + const currentRef = useRef(0); + const standardRef = useRef(0); + + const [isStartDragging, setIsStartDragging] = useState(false); + const [dragged, setDragged] = useState(0); + + function handleMouseDown(event: React.SyntheticEvent) { + const knob = knobRef.current; + if (!knob) return; + if (isNode(event.target) && !knob.contains(event.target)) return; + setIsStartDragging(true); + + const page = getPageByEventType(event); + currentRef.current = page; + initializeForDragged(page); + } - const handleMouseDown = useCallback((e: React.MouseEvent) => { - if (knobRef.current && knobRef.current.contains(e.target as Node)) { - setIsDragging(true); - setDragStart({ - y: e.clientY, - }); + function isNode(target: EventTarget): target is Node { + return (target as Node) !== undefined; + } + + function getPageByEventType(event: React.SyntheticEvent): number { + if (event.nativeEvent instanceof TouchEvent) { + return event.nativeEvent.touches[FIRST_TOUCH].pageY; + } + if (event.nativeEvent instanceof MouseEvent) { + return event.nativeEvent.pageY; } - }, []); + return 0; + } - const handleMouseMove = useCallback( - (e: React.MouseEvent) => { - if (!isDragging) return; + function initializeForDragged(standard: number) { + setDragged(0); + standardRef.current = standard; + } - const offset = Math.max(0, e.clientY - dragStart.y); + function handleMouseMove(event: SyntheticEvent) { + const container = containerRef.current; - // 모달을 드래그한 만큼 이동 - const container = containerRef.current; - if (!container) return; - container.style.transform = `translateY(${offset}px)`; - setYOffset(offset); - }, - [dragStart.y, isDragging], - ); + if (!container) return; + if (!isStartDragging) return; + + const page = getPageByEventType(event); + currentRef.current = page; + moveDrawerByCurrent(container, page); + + setDragged(Math.abs(page - standardRef.current)); + } + + function moveDrawerByCurrent(container: HTMLElement, movedTrigger: number) { + const offset = Math.max(0, movedTrigger - standardRef.current); + container.style.transform = `translateY(${offset}px)`; + currentRef.current = movedTrigger; + } - const handleMouseUp = useCallback(() => { + function handleMouseUp() { const container = containerRef.current; if (!container) return; - if (yOffset > 150) { - container.style.transition = `transform ${thresholds.transitionTime}s ease-in-out`; + if (dragged > thresholds.OFFSET) { + container.style.transition = `transform ${thresholds.ANIMATION_TRANSITION_TIME}s ease-in-out`; container.style.transform = "translateY(100%)"; setTimeout(() => { closeModal(); - }, thresholds.transitionTime * 1000 + 50); + }, thresholds.ANIMATION_TRANSITION_TIME * 1000 + 50); } else { - container.style.transition = `transform ${thresholds.transitionTime / 2}s ease-out`; + container.style.transition = `transform ${thresholds.ANIMATION_TRANSITION_TIME / 2}s ease-out`; container.style.transform = "translateY(0)"; } - setIsDragging(false); - }, [yOffset, closeModal]); - - /** - * For Mobile - * */ - - const handleTouchStart = useCallback((e: React.TouchEvent) => { - if (knobRef.current && knobRef.current.contains(e.target as Node)) { - setIsDragging(true); - setDragStart({ - y: e.touches[0].clientY, - }); - } - }, []); - - const handleTouchMove = useCallback( - (e: React.TouchEvent) => { - if (!isDragging) return; - const offset = Math.max(0, e.touches[0].clientY - dragStart.y); + reset(); + } - const container = containerRef.current; - if (!container) return; - container.style.transform = `translateY(${offset}px)`; - setYOffset(offset); - }, - [dragStart.y, isDragging], - ); + function reset() { + setIsStartDragging(false); + currentRef.current = 0; + standardRef.current = 0; + } return { drawerProps: { @@ -87,9 +96,12 @@ export default function useDrawer(closeModal: () => void) { onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, - onTouchStart: handleTouchStart, - onTouchMove: handleTouchMove, + onMouseLeave: handleMouseUp, + + onTouchStart: handleMouseDown, + onTouchMove: handleMouseMove, onTouchEnd: handleMouseUp, + onTouchCancel: handleMouseUp, }, knobRef, }; From 15bf5145f4468bfee2b22408f852b13bf01ab3ea Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Sun, 1 Oct 2023 19:52:58 +0900 Subject: [PATCH 14/17] =?UTF-8?q?[=20refactor=20]=20page,=20client=20?= =?UTF-8?q?=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@common/hooks/useDraggingContainer.ts | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) diff --git a/src/@components/@common/hooks/useDraggingContainer.ts b/src/@components/@common/hooks/useDraggingContainer.ts index c2ba8dda..5deec7bd 100644 --- a/src/@components/@common/hooks/useDraggingContainer.ts +++ b/src/@components/@common/hooks/useDraggingContainer.ts @@ -3,21 +3,12 @@ import { useRef, useState } from "react"; type DragDirectionType = "X" | "Y"; type EventMapperType = { - [key in DragDirectionType]: { - touch: "clientX" | "clientY"; - mouse: "pageX" | "pageY"; - }; + [key in DragDirectionType]: "pageX" | "pageY"; }; const eventMapper: EventMapperType = { - X: { - touch: "clientX", - mouse: "pageX", - }, - Y: { - touch: "clientY", - mouse: "pageY", - }, + X: "pageX", + Y: "pageY", }; const FIRST_TOUCH = 0; @@ -41,12 +32,11 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { } function getPageByEventType(event: React.SyntheticEvent): number { + const eventType = eventMapper[dragDirection]; if (event.nativeEvent instanceof TouchEvent) { - const eventType = eventMapper[dragDirection].touch; return event.nativeEvent.touches[FIRST_TOUCH][eventType]; } if (event.nativeEvent instanceof MouseEvent) { - const eventType = eventMapper[dragDirection].mouse; return event.nativeEvent[eventType]; } return 0; From 54bf17c1cf472bae09deca51a5e173ff5570d1b3 Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Fri, 6 Oct 2023 09:54:43 +0900 Subject: [PATCH 15/17] =?UTF-8?q?[=20refactor=20]=20=EC=A4=91=EB=B3=B5?= =?UTF-8?q?=ED=83=80=EC=9D=B4=ED=95=91=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20?= =?UTF-8?q?=EB=B3=80=EC=88=98=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@common/hooks/useDraggingContainer.ts | 20 +++++++++---------- src/@components/@common/hooks/useDrawer.ts | 18 ++++++++--------- .../Card/LastCard/index.tsx | 8 ++++---- .../Card/MenuModal/index.tsx | 8 ++++---- 4 files changed, 27 insertions(+), 27 deletions(-) diff --git a/src/@components/@common/hooks/useDraggingContainer.ts b/src/@components/@common/hooks/useDraggingContainer.ts index 5deec7bd..75d4a4be 100644 --- a/src/@components/@common/hooks/useDraggingContainer.ts +++ b/src/@components/@common/hooks/useDraggingContainer.ts @@ -11,7 +11,7 @@ const eventMapper: EventMapperType = { Y: "pageY", }; -const FIRST_TOUCH = 0; +const FIRST_TOUCH_EVENT_IDX = 0; export default function useDraggingContainer(dragDirection: DragDirectionType) { const containerRef = useRef(null); @@ -19,22 +19,22 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { const currentRef = useRef(0); const standardRef = useRef(0); - const [isStartDragging, setIsStartDragging] = useState(false); - const [isArrivedEnd, setIsArrivedEnd] = useState(false); - const [dragged, setDragged] = useState(0); + const [isStartDragging, setIsStartDragging] = useState(false); + const [isArrivedEnd, setIsArrivedEnd] = useState(false); + const [draggedDistance, setDraggedDistance] = useState(0); function handleTriggerDown(event: React.SyntheticEvent) { setIsStartDragging(true); const page = getPageByEventType(event); currentRef.current = page; - initializeForDragged(page); + initializeForDraggedDistance(page); } function getPageByEventType(event: React.SyntheticEvent): number { const eventType = eventMapper[dragDirection]; if (event.nativeEvent instanceof TouchEvent) { - return event.nativeEvent.touches[FIRST_TOUCH][eventType]; + return event.nativeEvent.touches[FIRST_TOUCH_EVENT_IDX][eventType]; } if (event.nativeEvent instanceof MouseEvent) { return event.nativeEvent[eventType]; @@ -42,8 +42,8 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { return 0; } - function initializeForDragged(standard: number) { - setDragged(0); + function initializeForDraggedDistance(standard: number) { + setDraggedDistance(0); standardRef.current = standard; } @@ -57,7 +57,7 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { moveContainerByCurrent(container, page); handleArrivedEnd(container); - setDragged(Math.abs(page - standardRef.current)); + setDraggedDistance(Math.abs(page - standardRef.current)); } function moveContainerByCurrent(container: HTMLElement, movedTrigger: number) { @@ -103,7 +103,7 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { onTouchEnd: handleTriggerEnd, onTouchCancel: handleTriggerEnd, }, - isDragging: dragged > 10, + isDragging: draggedDistance > 10, isArrivedEnd, }; } diff --git a/src/@components/@common/hooks/useDrawer.ts b/src/@components/@common/hooks/useDrawer.ts index 98c4cc2f..e9c44f3d 100644 --- a/src/@components/@common/hooks/useDrawer.ts +++ b/src/@components/@common/hooks/useDrawer.ts @@ -5,7 +5,7 @@ const thresholds = { ANIMATION_TRANSITION_TIME: 0.2, }; -const FIRST_TOUCH = 0; +const FIRST_TOUCH_EVENT_IDX = 0; export default function useDrawer(closeModal: () => void) { const knobRef = useRef(null); @@ -14,8 +14,8 @@ export default function useDrawer(closeModal: () => void) { const currentRef = useRef(0); const standardRef = useRef(0); - const [isStartDragging, setIsStartDragging] = useState(false); - const [dragged, setDragged] = useState(0); + const [isStartDragging, setIsStartDragging] = useState(false); + const [draggedDistance, setDraggedDistance] = useState(0); function handleMouseDown(event: React.SyntheticEvent) { const knob = knobRef.current; @@ -25,7 +25,7 @@ export default function useDrawer(closeModal: () => void) { const page = getPageByEventType(event); currentRef.current = page; - initializeForDragged(page); + initializeForDraggedDistance(page); } function isNode(target: EventTarget): target is Node { @@ -34,7 +34,7 @@ export default function useDrawer(closeModal: () => void) { function getPageByEventType(event: React.SyntheticEvent): number { if (event.nativeEvent instanceof TouchEvent) { - return event.nativeEvent.touches[FIRST_TOUCH].pageY; + return event.nativeEvent.touches[FIRST_TOUCH_EVENT_IDX].pageY; } if (event.nativeEvent instanceof MouseEvent) { return event.nativeEvent.pageY; @@ -42,8 +42,8 @@ export default function useDrawer(closeModal: () => void) { return 0; } - function initializeForDragged(standard: number) { - setDragged(0); + function initializeForDraggedDistance(standard: number) { + setDraggedDistance(0); standardRef.current = standard; } @@ -57,7 +57,7 @@ export default function useDrawer(closeModal: () => void) { currentRef.current = page; moveDrawerByCurrent(container, page); - setDragged(Math.abs(page - standardRef.current)); + setDraggedDistance(Math.abs(page - standardRef.current)); } function moveDrawerByCurrent(container: HTMLElement, movedTrigger: number) { @@ -70,7 +70,7 @@ export default function useDrawer(closeModal: () => void) { const container = containerRef.current; if (!container) return; - if (dragged > thresholds.OFFSET) { + if (draggedDistance > thresholds.OFFSET) { container.style.transition = `transform ${thresholds.ANIMATION_TRANSITION_TIME}s ease-in-out`; container.style.transform = "translateY(100%)"; setTimeout(() => { diff --git a/src/@components/CardCollectionPage/Card/LastCard/index.tsx b/src/@components/CardCollectionPage/Card/LastCard/index.tsx index aa2e3a5d..bcd9f64d 100644 --- a/src/@components/CardCollectionPage/Card/LastCard/index.tsx +++ b/src/@components/CardCollectionPage/Card/LastCard/index.tsx @@ -10,7 +10,7 @@ import useToast from "../../../@common/Toast/hooks/useToast"; import * as St from "./style"; const TOAST_SESSON_KEY = "showToast"; -const locationTypesNoReplay = [ +const noReplayLocationTypes = [ LocationType.BEST, LocationType.MEDLEY, LocationType.RECENT, @@ -23,7 +23,7 @@ const LastCard = forwardRef(function LastCard(_, ref: React.ForwardedRef(false); + const [isReplayBtnVisible, setIsReplayBtnVisible] = useState(false); const showToastFlag = !!sessionStorage.getItem(TOAST_SESSON_KEY); useEffect(() => { @@ -34,7 +34,7 @@ const LastCard = forwardRef(function LastCard(_, ref: React.ForwardedRef { - cardType && setIsReplayBtnShow(!locationTypesNoReplay.includes(cardType)); + cardType && setIsReplayBtnVisible(!noReplayLocationTypes.includes(cardType)); }, [cardType]); const reloadForSimilarTopic = () => { @@ -50,7 +50,7 @@ const LastCard = forwardRef(function LastCard(_, ref: React.ForwardedRef끊임없는 대화를 위해 버튼을 선택해주세요 - {isReplayBtnShow && ( + {isReplayBtnVisible && ( 비슷한 주제 계속 보기 diff --git a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx index 6c990c88..f9175d2a 100644 --- a/src/@components/CardCollectionPage/Card/MenuModal/index.tsx +++ b/src/@components/CardCollectionPage/Card/MenuModal/index.tsx @@ -25,17 +25,17 @@ type ModalItem = { gtmClassName: string; }; -const locationTypesNoBlock = [LocationType.BEST, LocationType.MEDLEY]; +const noBlockLocationTypes = [LocationType.BEST, LocationType.MEDLEY]; export default function MenuModal(props: MenuModalProps) { const { currentCardId, closeHandler, autoSlide, handleClickAddBlacklist, handleClickCancelBlacklist } = props; const { showToast, blackoutToast } = useToast(); const { cardType } = useCardType(); - const [isBlockShow, setIsBlockShow] = useState(false); + const [isBlockVisible, setIsBlockVisible] = useState(false); useEffect(() => { - cardType && setIsBlockShow(!locationTypesNoBlock.includes(cardType)); + cardType && setIsBlockVisible(!noBlockLocationTypes.includes(cardType)); }, [cardType]); const onSuccessAddBlacklist = () => { @@ -88,7 +88,7 @@ export default function MenuModal(props: MenuModalProps) { {ModalItems.map(({ emoji, title, isNeedLogin, handleClickItem, gtmClassName }, idx) => { - if (idx === 1 && !isBlockShow) { + if (idx === 1 && !isBlockVisible) { return null; } else { return ( From 902fc599957e42f33bfa7caf4cdd49835a94df8a Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Fri, 6 Oct 2023 10:35:06 +0900 Subject: [PATCH 16/17] =?UTF-8?q?[=20refactor=20]=20MouseHandler=EC=99=80?= =?UTF-8?q?=20TouchHandler=20=EB=B6=84=EB=A6=AC=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@common/hooks/useDraggingContainer.ts | 49 +++++++++++---- src/@components/@common/hooks/useDrawer.ts | 62 ++++++++++++++++--- 2 files changed, 89 insertions(+), 22 deletions(-) diff --git a/src/@components/@common/hooks/useDraggingContainer.ts b/src/@components/@common/hooks/useDraggingContainer.ts index 75d4a4be..78079e35 100644 --- a/src/@components/@common/hooks/useDraggingContainer.ts +++ b/src/@components/@common/hooks/useDraggingContainer.ts @@ -23,7 +23,15 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { const [isArrivedEnd, setIsArrivedEnd] = useState(false); const [draggedDistance, setDraggedDistance] = useState(0); - function handleTriggerDown(event: React.SyntheticEvent) { + function handleMouseDown(event: React.MouseEvent) { + setIsStartDragging(true); + + const page = getPageByEventType(event); + currentRef.current = page; + initializeForDraggedDistance(page); + } + + function handleTouchDown(event: React.TouchEvent) { setIsStartDragging(true); const page = getPageByEventType(event); @@ -47,7 +55,20 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { standardRef.current = standard; } - function handleTriggerMove(event: React.SyntheticEvent) { + function handleMouseMove(event: React.MouseEvent) { + const container = containerRef.current; + + if (!container) return; + if (!isStartDragging) return; + + const page = getPageByEventType(event); + moveContainerByCurrent(container, page); + handleArrivedEnd(container); + + setDraggedDistance(Math.abs(page - standardRef.current)); + } + + function handleTouchMove(event: React.TouchEvent) { const container = containerRef.current; if (!container) return; @@ -80,7 +101,11 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { } } - function handleTriggerEnd() { + function handleMouseEnd() { + reset(); + } + + function handleTouchEnd() { reset(); } @@ -93,15 +118,15 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { return { scrollableContainerProps: { ref: containerRef, - onMouseDown: handleTriggerDown, - onMouseMove: handleTriggerMove, - onMouseUp: handleTriggerEnd, - onMouseLeave: handleTriggerEnd, - - onTouchStart: handleTriggerDown, - onTouchMove: handleTriggerMove, - onTouchEnd: handleTriggerEnd, - onTouchCancel: handleTriggerEnd, + onMouseDown: handleMouseDown, + onMouseMove: handleMouseMove, + onMouseUp: handleMouseEnd, + onMouseLeave: handleMouseEnd, + + onTouchStart: handleTouchDown, + onTouchMove: handleTouchMove, + onTouchEnd: handleTouchEnd, + onTouchCancel: handleTouchEnd, }, isDragging: draggedDistance > 10, isArrivedEnd, diff --git a/src/@components/@common/hooks/useDrawer.ts b/src/@components/@common/hooks/useDrawer.ts index e9c44f3d..d48947cc 100644 --- a/src/@components/@common/hooks/useDrawer.ts +++ b/src/@components/@common/hooks/useDrawer.ts @@ -1,4 +1,4 @@ -import { SyntheticEvent, useRef, useState } from "react"; +import { useRef, useState } from "react"; const thresholds = { OFFSET: 150, @@ -17,7 +17,18 @@ export default function useDrawer(closeModal: () => void) { const [isStartDragging, setIsStartDragging] = useState(false); const [draggedDistance, setDraggedDistance] = useState(0); - function handleMouseDown(event: React.SyntheticEvent) { + function handleMouseDown(event: React.MouseEvent) { + const knob = knobRef.current; + if (!knob) return; + if (isNode(event.target) && !knob.contains(event.target)) return; + setIsStartDragging(true); + + const page = getPageByEventType(event); + currentRef.current = page; + initializeForDraggedDistance(page); + } + + function handleTouchDown(event: React.TouchEvent) { const knob = knobRef.current; if (!knob) return; if (isNode(event.target) && !knob.contains(event.target)) return; @@ -47,7 +58,20 @@ export default function useDrawer(closeModal: () => void) { standardRef.current = standard; } - function handleMouseMove(event: SyntheticEvent) { + function handleMouseMove(event: React.MouseEvent) { + const container = containerRef.current; + + if (!container) return; + if (!isStartDragging) return; + + const page = getPageByEventType(event); + currentRef.current = page; + moveDrawerByCurrent(container, page); + + setDraggedDistance(Math.abs(page - standardRef.current)); + } + + function handleTouchMove(event: React.TouchEvent) { const container = containerRef.current; if (!container) return; @@ -66,7 +90,25 @@ export default function useDrawer(closeModal: () => void) { currentRef.current = movedTrigger; } - function handleMouseUp() { + function handleMouseEnd() { + const container = containerRef.current; + if (!container) return; + + if (draggedDistance > thresholds.OFFSET) { + container.style.transition = `transform ${thresholds.ANIMATION_TRANSITION_TIME}s ease-in-out`; + container.style.transform = "translateY(100%)"; + setTimeout(() => { + closeModal(); + }, thresholds.ANIMATION_TRANSITION_TIME * 1000 + 50); + } else { + container.style.transition = `transform ${thresholds.ANIMATION_TRANSITION_TIME / 2}s ease-out`; + container.style.transform = "translateY(0)"; + } + + reset(); + } + + function handleTouchEnd() { const container = containerRef.current; if (!container) return; @@ -95,13 +137,13 @@ export default function useDrawer(closeModal: () => void) { ref: containerRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, - onMouseUp: handleMouseUp, - onMouseLeave: handleMouseUp, + onMouseUp: handleMouseEnd, + onMouseLeave: handleMouseEnd, - onTouchStart: handleMouseDown, - onTouchMove: handleMouseMove, - onTouchEnd: handleMouseUp, - onTouchCancel: handleMouseUp, + onTouchStart: handleTouchDown, + onTouchMove: handleTouchMove, + onTouchEnd: handleTouchEnd, + onTouchCancel: handleTouchEnd, }, knobRef, }; From 16547fb948722c7ad3007daee972c8655d52baaa Mon Sep 17 00:00:00 2001 From: Eunhyung Choi Date: Fri, 6 Oct 2023 12:34:52 +0900 Subject: [PATCH 17/17] =?UTF-8?q?[=20refactor=20]=20handler=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=EB=AA=85=20=EC=9E=AC=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@common/hooks/useDraggingContainer.ts | 16 ++++++++-------- src/@components/@common/hooks/useDrawer.ts | 16 ++++++++-------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/@components/@common/hooks/useDraggingContainer.ts b/src/@components/@common/hooks/useDraggingContainer.ts index 78079e35..91993f28 100644 --- a/src/@components/@common/hooks/useDraggingContainer.ts +++ b/src/@components/@common/hooks/useDraggingContainer.ts @@ -31,7 +31,7 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { initializeForDraggedDistance(page); } - function handleTouchDown(event: React.TouchEvent) { + function handleTouchStart(event: React.TouchEvent) { setIsStartDragging(true); const page = getPageByEventType(event); @@ -101,11 +101,11 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { } } - function handleMouseEnd() { + function handleMouseUpOrLeave() { reset(); } - function handleTouchEnd() { + function handleTouchEndOrCancel() { reset(); } @@ -120,13 +120,13 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) { ref: containerRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, - onMouseUp: handleMouseEnd, - onMouseLeave: handleMouseEnd, + onMouseUp: handleMouseUpOrLeave, + onMouseLeave: handleMouseUpOrLeave, - onTouchStart: handleTouchDown, + onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, - onTouchEnd: handleTouchEnd, - onTouchCancel: handleTouchEnd, + onTouchEnd: handleTouchEndOrCancel, + onTouchCancel: handleTouchEndOrCancel, }, isDragging: draggedDistance > 10, isArrivedEnd, diff --git a/src/@components/@common/hooks/useDrawer.ts b/src/@components/@common/hooks/useDrawer.ts index d48947cc..49c42ca7 100644 --- a/src/@components/@common/hooks/useDrawer.ts +++ b/src/@components/@common/hooks/useDrawer.ts @@ -28,7 +28,7 @@ export default function useDrawer(closeModal: () => void) { initializeForDraggedDistance(page); } - function handleTouchDown(event: React.TouchEvent) { + function handleTouchStart(event: React.TouchEvent) { const knob = knobRef.current; if (!knob) return; if (isNode(event.target) && !knob.contains(event.target)) return; @@ -90,7 +90,7 @@ export default function useDrawer(closeModal: () => void) { currentRef.current = movedTrigger; } - function handleMouseEnd() { + function handleMouseUpOrLeave() { const container = containerRef.current; if (!container) return; @@ -108,7 +108,7 @@ export default function useDrawer(closeModal: () => void) { reset(); } - function handleTouchEnd() { + function handleTouchEndOrCancel() { const container = containerRef.current; if (!container) return; @@ -137,13 +137,13 @@ export default function useDrawer(closeModal: () => void) { ref: containerRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, - onMouseUp: handleMouseEnd, - onMouseLeave: handleMouseEnd, + onMouseUp: handleMouseUpOrLeave, + onMouseLeave: handleMouseUpOrLeave, - onTouchStart: handleTouchDown, + onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, - onTouchEnd: handleTouchEnd, - onTouchCancel: handleTouchEnd, + onTouchEnd: handleTouchEndOrCancel, + onTouchCancel: handleTouchEndOrCancel, }, knobRef, };