9db9d87dea
- 서비스 목록 페이지 (검색/필터/페이지네이션, 행 클릭 → 상세) - 서비스 상세 페이지 (헤더카드/통계/플랫폼 관리 모달) - 서비스 등록 페이지 (서비스명/플랫폼 선택/설명/관련링크) - 서비스 수정 페이지 (상태 토글/메타정보/저장 확인 모달) - 공통 훅 추출 (useShake, useBreadcrumbBack) - 브레드크럼 동적 경로 지원 (/services/:id, /services/:id/edit) - 인증 페이지 useShake 공통 훅 리팩터링 Closes #14
25 lines
831 B
TypeScript
25 lines
831 B
TypeScript
import { useState, useCallback } from "react";
|
|
|
|
/**
|
|
* 필드 에러 시 shake 애니메이션을 트리거하는 공통 훅.
|
|
* - `shaking` : 현재 흔들리고 있는 필드 이름 Set
|
|
* - `triggerShake` : 필드 이름 배열을 받아 0.4초 동안 shake 활성화
|
|
* - `cls` : 필드 이름을 받아 "animate-shake" 또는 "" 반환 (className에 바로 사용)
|
|
*/
|
|
export default function useShake() {
|
|
const [shaking, setShaking] = useState<Set<string>>(new Set());
|
|
|
|
const triggerShake = useCallback((fields: string[]) => {
|
|
setShaking(new Set(fields));
|
|
setTimeout(() => setShaking(new Set()), 400);
|
|
}, []);
|
|
|
|
/** className 헬퍼 */
|
|
const cls = useCallback(
|
|
(field: string) => (shaking.has(field) ? "animate-shake" : ""),
|
|
[shaking],
|
|
);
|
|
|
|
return { shaking, triggerShake, cls } as const;
|
|
}
|