Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat/#333 refactor custom hook #334

Open
wants to merge 17 commits into
base: release/2.1.1
Choose a base branch
from
Open

Feat/#333 refactor custom hook #334

Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
05c5b0d
[ refactor ] useShowByQuery to useCardType
ilmerry Sep 26, 2023
300f4cb
[ etc ] remove useShowByQuery
ilmerry Sep 26, 2023
2beb678
[ etc ] move useRecentlyBookmarked and useCardsByGender
ilmerry Sep 26, 2023
fb6e963
[ refactor ] useDraggableYContainer to useDraggingContainer
ilmerry Sep 27, 2023
903cc2d
[ fix ] mobile undragging error
ilmerry Sep 28, 2023
6a60f14
[ refactor ] eventHandler using SyntheicEvent
ilmerry Sep 28, 2023
8cce380
[ fix ] unDragging problem caused by gradient
ilmerry Sep 28, 2023
4b16682
[ refactor ] rename handlers
ilmerry Sep 28, 2023
5ff0135
[ refactor ] add event mapper
ilmerry Sep 28, 2023
c1b1a1c
[ refactor ] add getPageByEventType
ilmerry Sep 28, 2023
a5e073f
[ fix ] active gradient
ilmerry Sep 28, 2023
a2e5c18
[ etc ] remove useDraggableYContainer
ilmerry Sep 28, 2023
6c7b179
[ refactor ] useDrawer
ilmerry Oct 1, 2023
15bf514
[ refactor ] page, client 통일
ilmerry Oct 1, 2023
54bf17c
[ refactor ] 중복타이핑 제거 및 변수명 변경
ilmerry Oct 6, 2023
902fc59
[ refactor ] MouseHandler와 TouchHandler 분리하기
ilmerry Oct 6, 2023
16547fb
[ refactor ] handler 함수명 재변경
ilmerry Oct 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 27 additions & 35 deletions src/@components/@common/hooks/useDraggingContainer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,57 +5,53 @@ type DragDirectionType = "X" | "Y";
export default function useDraggingContainer(dragDirection: DragDirectionType) {
const containerRef = useRef<HTMLElement | null>(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<HTMLElement, MouseEvent>) {
function handleMouseDown(event: React.SyntheticEvent) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아예 터치 핸들러 따로 만드는 게 좀 더 적절하지 않을까 하는 생각?

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<HTMLElement>) {
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) {
setDragged(0);
standardRef.current = standard;
}

function handleMouseMove(event: React.MouseEvent<HTMLElement, 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<HTMLElement>) {
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) {
Expand All @@ -69,10 +65,6 @@ export default function useDraggingContainer(dragDirection: DragDirectionType) {
reset();
}

function handleTouchEndOrCancel() {
reset();
}

function reset() {
setIsStartDragging(false);
currentRef.current = 0;
Expand All @@ -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,
};
Expand Down