불필요 파일 제거
This commit is contained in:
focp212@naver.com
@@ -1,2 +1 @@
|
||||
export { useAppBridge } from './useAppBridge';
|
||||
export { useScrollDirection } from './useScrollDirection';
|
||||
|
||||
@@ -1,119 +0,0 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
|
||||
export const useScrollDirection = () => {
|
||||
const [scrollDirection, setScrollDirection] = useState<'up' | 'down'>('up');
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
const [translateY, setTranslateY] = useState(0);
|
||||
const [isScrollingState, setIsScrollingState] = useState(false);
|
||||
|
||||
const lastScrollY = useRef(0);
|
||||
const scrollAccumulator = useRef(0);
|
||||
const isScrolling = useRef(false);
|
||||
const scrollTimeout = useRef<NodeJS.Timeout | null>(null);
|
||||
const lastScrollDirection = useRef<'up' | 'down'>('up');
|
||||
|
||||
useEffect(() => {
|
||||
let ticking = false;
|
||||
|
||||
const updateScrollDirection = () => {
|
||||
const scrollY = window.scrollY;
|
||||
const scrollDiff = scrollY - lastScrollY.current;
|
||||
|
||||
// 스크롤 차이가 너무 작으면 무시
|
||||
if (Math.abs(scrollDiff) < 2) {
|
||||
ticking = false;
|
||||
return;
|
||||
}
|
||||
|
||||
isScrolling.current = true;
|
||||
setIsScrollingState(true);
|
||||
|
||||
// 스크롤 방향 설정 및 마지막 방향 저장
|
||||
if (scrollDiff > 0) {
|
||||
setScrollDirection('down');
|
||||
lastScrollDirection.current = 'down';
|
||||
} else {
|
||||
setScrollDirection('up');
|
||||
lastScrollDirection.current = 'up';
|
||||
}
|
||||
|
||||
// 스크롤 누적량 계산 (최대 100px까지) - 부드러운 보간
|
||||
const dampingFactor = 0.8; // 댐핑 팩터로 부드러운 움직임
|
||||
scrollAccumulator.current += scrollDiff * dampingFactor;
|
||||
scrollAccumulator.current = Math.max(-100, Math.min(100, scrollAccumulator.current));
|
||||
|
||||
// 드래그 중에는 스크롤 누적량에 비례하여 탭바 위치 조정
|
||||
let newTranslateY = 0;
|
||||
if (scrollAccumulator.current > 0) {
|
||||
// 아래로 스크롤: 0 ~ 100px 사이에서 부드럽게 조정
|
||||
newTranslateY = Math.min(100, scrollAccumulator.current);
|
||||
} else {
|
||||
// 위로 스크롤: 0px 고정하고 누적량도 0으로 리셋
|
||||
newTranslateY = 0;
|
||||
scrollAccumulator.current = Math.max(0, scrollAccumulator.current);
|
||||
}
|
||||
|
||||
// 부드러운 업데이트를 위한 RAF 사용
|
||||
requestAnimationFrame(() => {
|
||||
setTranslateY(newTranslateY);
|
||||
});
|
||||
|
||||
lastScrollY.current = scrollY > 0 ? scrollY : 0;
|
||||
|
||||
// 스크롤 종료 감지
|
||||
if (scrollTimeout.current) {
|
||||
clearTimeout(scrollTimeout.current);
|
||||
}
|
||||
|
||||
scrollTimeout.current = setTimeout(() => {
|
||||
isScrolling.current = false;
|
||||
setIsScrollingState(false);
|
||||
|
||||
// 스크롤 종료 시 마지막 드래그 방향에 따라 최종 위치 결정
|
||||
if (Math.abs(scrollAccumulator.current) > 15) {
|
||||
// 충분한 스크롤이 있었을 때만 방향에 따라 결정
|
||||
if (lastScrollDirection.current === 'down') {
|
||||
// 아래로 스크롤했으면 탭바 숨기기
|
||||
setTranslateY(100);
|
||||
setIsVisible(false);
|
||||
scrollAccumulator.current = 100;
|
||||
} else {
|
||||
// 위로 스크롤했으면 탭바 보이기
|
||||
setTranslateY(0);
|
||||
setIsVisible(true);
|
||||
scrollAccumulator.current = 0;
|
||||
}
|
||||
} else {
|
||||
// 스크롤이 미미할 때는 현재 상태 유지
|
||||
if (isVisible) {
|
||||
setTranslateY(0);
|
||||
scrollAccumulator.current = 0;
|
||||
} else {
|
||||
setTranslateY(100);
|
||||
scrollAccumulator.current = 100;
|
||||
}
|
||||
}
|
||||
}, 150);
|
||||
|
||||
ticking = false;
|
||||
};
|
||||
|
||||
const onScroll = () => {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(updateScrollDirection);
|
||||
ticking = true;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('scroll', onScroll);
|
||||
if (scrollTimeout.current) {
|
||||
clearTimeout(scrollTimeout.current);
|
||||
}
|
||||
};
|
||||
}, [isVisible]);
|
||||
|
||||
return { scrollDirection, isVisible, translateY, isScrollingState };
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
/* eslint-disable @cspell/spellchecker */
|
||||
/**
|
||||
* 은행에서 사용하는 코드 모음
|
||||
*/
|
||||
|
||||
export type YN = 'Y' | 'N';
|
||||
|
||||
/**
|
||||
* 은행코드
|
||||
*/
|
||||
export const enum BankCode {
|
||||
A = '011',
|
||||
B = '004',
|
||||
}
|
||||
|
||||
/**
|
||||
* 은행이름
|
||||
*/
|
||||
export const enum BankName {
|
||||
A = 'A은행',
|
||||
B = 'B은행',
|
||||
}
|
||||
|
||||
export const enum BankValue {
|
||||
A = 'NHB',
|
||||
B = 'KBB',
|
||||
}
|
||||
|
||||
/**
|
||||
* 은행코드로 어떤 은행인지 확인
|
||||
*/
|
||||
export const isBankA = (bkcd: BankCode) => bkcd === BankCode.A;
|
||||
export const isBankB = (bkcd: BankCode) => bkcd === BankCode.B;
|
||||
@@ -1,9 +0,0 @@
|
||||
/* eslint-disable @cspell/spellchecker */
|
||||
export interface MyWalletQRCode {
|
||||
walletAddr: string;
|
||||
bankCode: string;
|
||||
}
|
||||
|
||||
export interface MyPaymentQRcode extends MyWalletQRCode {
|
||||
exptime: string; // 'YYYY-MM-DD H:m:s';
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { render, RenderOptions } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { FC, ReactElement, useEffect } from 'react';
|
||||
import { MemoryRouter, Route, Routes } from 'react-router';
|
||||
|
||||
import { RecoilRoot } from 'recoil';
|
||||
import { SubLayout } from '@/widgets/sub-layout';
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
retry: false,
|
||||
throwOnError: true,
|
||||
refetchOnWindowFocus: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
interface RouterParams {
|
||||
path?: string;
|
||||
entry?: string;
|
||||
state?: any;
|
||||
}
|
||||
|
||||
const AllTheProviders: FC<{ children: React.ReactNode; routerParams?: RouterParams }> = ({
|
||||
children,
|
||||
routerParams,
|
||||
}) => {
|
||||
const { path = '/', entry = '/', state } = routerParams ?? {};
|
||||
const initialEntry = { pathname: entry, state };
|
||||
useEffect(() => {
|
||||
return () => queryClient.clear();
|
||||
}, []);
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<MemoryRouter initialEntries={[initialEntry]}>
|
||||
<Routes>
|
||||
<Route element={<SubLayout />}>
|
||||
<Route path={path} element={<>{children}</>} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</MemoryRouter>
|
||||
</QueryClientProvider>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
const user = userEvent.setup();
|
||||
const customRender = (ui: ReactElement, routerParams?: RouterParams, options?: Omit<RenderOptions, 'wrapper'>) => {
|
||||
return render(ui, { wrapper: (props) => <AllTheProviders {...props} routerParams={routerParams} />, ...options });
|
||||
};
|
||||
|
||||
export * from '@testing-library/react';
|
||||
export { customRender as render, user };
|
||||
Reference in New Issue
Block a user