diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 1bf9f2d..4d7e9bc 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -1,2 +1 @@ export { useAppBridge } from './useAppBridge'; -export { useScrollDirection } from './useScrollDirection'; diff --git a/src/hooks/useScrollDirection.tsx b/src/hooks/useScrollDirection.tsx deleted file mode 100644 index 54d6bea..0000000 --- a/src/hooks/useScrollDirection.tsx +++ /dev/null @@ -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(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 }; -}; \ No newline at end of file diff --git a/src/shared/@types/banking-code.ts b/src/shared/@types/banking-code.ts deleted file mode 100644 index 9574810..0000000 --- a/src/shared/@types/banking-code.ts +++ /dev/null @@ -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; diff --git a/src/shared/@types/qrcode.ts b/src/shared/@types/qrcode.ts deleted file mode 100644 index afd225c..0000000 --- a/src/shared/@types/qrcode.ts +++ /dev/null @@ -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'; -} diff --git a/src/shared/configs/test/render.tsx b/src/shared/configs/test/render.tsx deleted file mode 100644 index 6e619a9..0000000 --- a/src/shared/configs/test/render.tsx +++ /dev/null @@ -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 ( - - - - - }> - {children}} /> - - - - - - ); -}; -const user = userEvent.setup(); -const customRender = (ui: ReactElement, routerParams?: RouterParams, options?: Omit) => { - return render(ui, { wrapper: (props) => , ...options }); -}; - -export * from '@testing-library/react'; -export { customRender as render, user };