브라우저의 Ctrl+S 는 "페이지를 파일로 저장"이다. 글을 쓰다가 그 손버릇이 나오면 저장 대화상자가 뜨고 편집한 내용은 그대로 남는다 — 저장한 줄 알고 창을 닫으면 잃는다. 문서·프로젝트·릴리즈 세 편집기에서 기본 동작을 막고 그 화면의 저장으로 돌린다. 저장할 것이 없을 때도 기본 동작은 막는다. 막지 않으면 "저장할 것이 없다"는 화면 상태와 브라우저의 저장 대화상자가 동시에 나와, 무엇이 일어났는지 알 수 없다. Ctrl+Shift+S 와 Alt 조합은 가로채지 않는다 — 다른 뜻으로 쓰는 곳이 있다. 버튼에 단축키를 적어 둔다. 단축키는 알려 주지 않으면 없는 것과 같다. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XEHXspz4rv5pB5wiiSsVDu
30 lines
1.3 KiB
TypeScript
30 lines
1.3 KiB
TypeScript
import { useEffect } from "react";
|
|
|
|
/**
|
|
* Ctrl+S(맥에서는 Cmd+S)로 저장한다.
|
|
*
|
|
* <p>브라우저의 기본 동작은 "페이지를 파일로 저장"이다. 글을 쓰다가 그 손버릇이 나오면 저장 대화상자가
|
|
* 뜨고 편집한 내용은 그대로 남는다 — 저장한 줄 알고 창을 닫으면 잃는다. 그래서 기본 동작을 막고 이
|
|
* 화면의 저장으로 돌린다.
|
|
*
|
|
* <p>`enabled` 가 거짓이면 아무것도 하지 않는다. 저장할 것이 없거나 이미 저장 중일 때 단축키가 요청을
|
|
* 겹쳐 보내지 않게 하는 것은 호출자의 몫이다 — 화면마다 "지금 저장할 수 있는가"의 뜻이 다르다.
|
|
*/
|
|
export function useSaveShortcut(
|
|
save: () => void | Promise<void>,
|
|
enabled = true,
|
|
) {
|
|
useEffect(() => {
|
|
function onKeyDown(event: KeyboardEvent) {
|
|
if (event.key !== "s" && event.key !== "S") return;
|
|
if (!(event.ctrlKey || event.metaKey)) return;
|
|
// Ctrl+Shift+S 는 다른 뜻으로 쓰는 곳이 있어 가로채지 않는다.
|
|
if (event.shiftKey || event.altKey) return;
|
|
event.preventDefault();
|
|
if (enabled) void save();
|
|
}
|
|
window.addEventListener("keydown", onKeyDown);
|
|
return () => window.removeEventListener("keydown", onKeyDown);
|
|
}, [enabled, save]);
|
|
}
|