🔨 refactor: alias 적용

jest.config.ts

@@ -8,6 +8,7 @@ const config: JestConfigWithTsJest = {
   },
   moduleNameMapper: {
     '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+    '^@/(.*)$': '<rootDir>/src/$1',
   },
   setupFiles: ['jest-canvas-mock', './src/mocks/mockWorker.ts'],
   setupFilesAfterEnv: ['./jest.setup.ts'],

src/hooks/useAsyncTasks/useAsyncTasks.ts

@@ -6,7 +6,7 @@ import {
   PromiseCircularityError,
 } from 'async-wave';
 
-import { delayExecution } from '../../utils';
+import { delayExecution } from '@/utils';
 
 type Task<R> = R | ((input: R) => R | Promise<R> | void | Promise<void>);
 

src/hooks/useClipboard/useClipboard.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { imgToBlob } from '../../utils';
+import { imgToBlob } from '@/utils';
 
 interface UseClipboardProps {
   resetTime?: number;

src/hooks/useConfirm/useConfirm.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ConfirmContext as context } from '../../context/ConfirmContext';
+import { ConfirmContext as context } from '@/context/ConfirmContext';
 
 /**
  * 컨펌 다이얼로그를 구현할 때 사용하는 훅.

src/hooks/useDetectDevice/test.ts

@@ -1,6 +1,6 @@
 import { renderHook } from '@testing-library/react';
 import useDetectDevice from './useDetectDevice';
-import * as utils from '../../utils';
+import * as utils from '@/utils';
 
 const mockUserAgent = (userAgent: string) => {
   Object.defineProperty(navigator, 'userAgent', {

src/hooks/useDetectDevice/useDetectDevice.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { isClient } from '../../utils';
+import { isClient } from '@/utils';
 
 interface UseDeviceDetectReturns {
   isMobile: boolean;

src/hooks/useDetectInactivity/test.ts

@@ -1,7 +1,7 @@
 import { act, renderHook } from '@testing-library/react';
 import useDetectInactivity from './useDetectInactivity';
-import { useTimer } from '../useTimer';
-import { isTouchDevice } from '../../utils';
+import { useTimer } from '@/hooks/useTimer';
+import { isTouchDevice } from '@/utils';
 
 jest.mock('../useTimer');
 

src/hooks/useDetectInactivity/useDetectInactivity.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useTimer } from '../useTimer';
-import { isTouchDevice, throttle } from '../../utils';
+import { useTimer } from '@/hooks/useTimer';
+import { isTouchDevice, throttle } from '@/utils';
 
 type Fn = () => void;
 

src/hooks/useEventListener/test.tsx

@@ -1,7 +1,7 @@
 import { cleanup, fireEvent, render, renderHook } from '@testing-library/react';
 import useEventListener from './useEventListener';
 import { act, useRef } from 'react';
-import * as utils from '../../utils';
+import * as utils from '@/utils';
 
 describe('useEventListener', () => {
   let handler: jest.Mock;

src/hooks/useEventListener/useEventListener.ts

@@ -1,5 +1,5 @@
 import { RefObject, useEffect, useRef } from 'react';
-import { isClient } from '../../utils';
+import { isClient } from '@/utils';
 
 type EventMap = {
   window: WindowEventMap;

src/hooks/useIntersectionObserver/test.ts

@@ -3,7 +3,7 @@ import useIntersectionObserver from './useIntersectionObserver';
 import {
   MockIntersectionObserver,
   mockIntersectionObserver,
-} from '../../mocks/mockIntersectionObserver';
+} from '@/mocks/mockIntersectionObserver';
 
 describe('useIntersectionObserver', () => {
   let rootElement: Element;

src/hooks/useInterval/useInterval.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
-import { Fn } from '../../types';
+
+type Fn = () => void;
 
 /**
  * 지정된 시간 간격만큼 반복적으로 콜백 함수를 호출하는 훅

src/hooks/useLocalStorage/useLocalStorage.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { validators } from '../../utils';
-import { ValueResolver } from '../../types';
+import { validators } from '@/utils';
+
+type ValueResolver<T> = T | ((prevPayload: T) => T);
 
 /**
  * 로컬 스토리지와 동기화된 상태를 관리하는 훅

src/hooks/useLocalStorage/useLongPress.test.ts → src/hooks/useLongPress/test.ts

@@ -1,5 +1,5 @@
 import { act, renderHook } from '@testing-library/react';
-import useLongPress from '../useLongPress/useLongPress';
+import useLongPress from './useLongPress';
 
 const callback = jest.fn();
 const defaultDelay = 500;

src/hooks/useLongPress/useLongPress.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Fn } from '../../types';
+
+type Fn = () => void;
 
 /**
  * 사용자가 요소를 길게 눌렀을 때 콜백 함수를 호출하는 훅

src/hooks/useMousePosition/useMousePosition.ts

@@ -6,7 +6,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import { throttle } from '../../utils';
+import { throttle } from '@/utils';
 
 interface MousePosOptions {
   delayTime?: number;

src/hooks/useOnlineStatus/useOnlineStatus.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
-import { Fn } from '../../types';
-import { hasNavigator } from '../../utils';
+import { hasNavigator } from '@/utils';
+
+type Fn = () => void;
 
 interface useOnlineStatusProps {
   onlineCallback?: Fn;

src/hooks/usePrefersColorScheme/usePrefersColorScheme.ts

@@ -1,6 +1,7 @@
 import { useSyncExternalStore } from 'react';
-import { Fn } from '../../types';
-import { isClient } from '../../utils';
+import { isClient } from '@/utils';
+
+type Fn = () => void;
 
 interface UsePrefersColorSchemeProps {
   serverSnapshot?: ColorSchemeType;

src/hooks/useScrollLock/useScrollLock.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { isClient } from '../../utils';
+import { isClient } from '@/utils';
 
 /**
  * 페이지의 스크롤을 잠그거나 해제하여 사용자가 스크롤할 수 없도록 하는 훅

src/hooks/useScrollY/useScrollY.ts

@@ -1,7 +1,8 @@
 import { useCallback, useEffect } from 'react';
-import { Fn } from '../../types';
-import { debounce } from '../../utils/debounce';
-import { useLocalStorage } from '../useLocalStorage';
+import { debounce } from '@/utils';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+
+type Fn = () => void;
 
 const useScrollY = (): { moveTrigger: Fn } => {
   const isClient = typeof window !== 'undefined';

src/hooks/useTimer/useTimer.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react';
 
-import { type CancelToken, delayExecution } from '../../utils';
-import useUnmountEffect from '../useUnmountEffect/useUnmountEffect';
+import { type CancelToken, delayExecution } from '@/utils';
+import { useUnmountEffect } from '@/hooks/useUnmountEffect';
 
 type Callback = () => void;
 

src/hooks/useTranslation/test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import useTranslation from './useTranslation';
-import { TranslationProvider } from '../../context/TranslationContext';
+import { TranslationProvider } from '@/context/TranslationContext';
 
 const translations = {
   en: {

src/hooks/useTranslation/useTranslation.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { TranslationContext } from '../../context/TranslationContext';
+import { TranslationContext } from '@/context/TranslationContext';
 
 const DYNAMIC_VALUE_PATTERN = /\$\{(.*?)\}/g;
 

src/hooks/useWindowSize/useWindowSize.ts

@@ -1,5 +1,11 @@
 import { useEffect, useState } from 'react';
-import { PositiveInteger } from '../../types/number';
+
+export type PositiveInteger<T extends number> = `${T}` extends
+  | `-${string}`
+  | `${string}.${string}`
+  | '0'
+  ? never
+  : T;
 
 interface WindowSize {
   width: number | null;

src/hooks/useWorker/test.tsx

@@ -6,7 +6,7 @@ import {
   mockPostMessage,
   mockTerminate,
   mockWorkerScript,
-} from '../../mocks/mockWorker';
+} from '@/mocks/mockWorker';
 
 beforeEach(() => {
   globalThis.URL.createObjectURL = jest.fn();

src/hooks/useWorker/useWorker.ts

@@ -1,7 +1,7 @@
 import { MutableRefObject, useCallback, useRef, useState } from 'react';
 
-import { validators } from '../../utils';
-import { useUnmountEffect } from '../useUnmountEffect';
+import { validators } from '@/utils';
+import { useUnmountEffect } from '@/hooks/useUnmountEffect';
 
 type WorkerScript<A, R, C> = (arg: A, accessClosure?: C) => R;
 

src/utils/index.ts

@@ -1,5 +1,6 @@
 export { delayExecution, type CancelToken } from './delayExecution';
 export { throttle } from './throttle';
+export { debounce } from './debounce';
 export { isClient, hasNavigator } from './isClient';
 export { isTouchDevice } from './isTouchDevice';
 export { validators, MatchError } from './validators';

src/utils/throttle.ts

@@ -1,4 +1,4 @@
-import { GenericFn } from '../types';
+type GenericFn<T extends unknown[]> = (...args: T) => void;
 
 export const throttle = <T extends unknown[]>(
   callbackFn: GenericFn<T>,

src/utils/validators.ts

@@ -1,4 +1,4 @@
-import { ValueResolver } from '../types';
+type ValueResolver<T> = T | ((prevPayload: T) => T);
 
 const validators = {
   isClient(): boolean {

tsconfig.app.json

@@ -22,7 +22,12 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["src/**/*"],
   "exclude": ["**/main.tsx", "**/App.tsx", "src/docs", "**/*.test.*"]

tsconfig.spec.json

@@ -13,7 +13,12 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["src/**/*.spec.ts", "src/**/*.spec.tsx"]
 }