feat: implement subscribeKeyboardHeight and useKeyboardHeight function

sukyeong · sukyeong · commit 19f371823f51 · 2026-01-09T14:53:45.000+09:00
diff --git a/packages/mobile/src/hooks/keyboardHeight/useKeyboardHeight.test.ts b/packages/mobile/src/hooks/keyboardHeight/useKeyboardHeight.test.ts
@@ -0,0 +1,197 @@
+import { act, renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { subscribeKeyboardHeight } from '../../utils/keyboardHeight/subscribeKeyboardHeight.ts';
+
+import { useKeyboardHeight } from './useKeyboardHeight.ts';
+
+vi.mock('@webview-kit/core', () => ({
+  subscribeKeyboardHeight: vi.fn(),
+}));
+
+const mockSubscribeKeyboardHeight = vi.mocked(subscribeKeyboardHeight);
+
+describe('useKeyboardHeight', () => {
+  let mockUnsubscribe: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    mockUnsubscribe = vi.fn();
+    mockSubscribeKeyboardHeight.mockReturnValue({ unsubscribe: mockUnsubscribe });
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('initial state', () => {
+    it('should return 0 as initial keyboard height', () => {
+      const { result } = renderHook(() => useKeyboardHeight());
+
+      expect(result.current).toBe(0);
+    });
+  });
+
+  describe('subscription behavior', () => {
+    it('should call subscribeKeyboardHeight with immediate: true by default', () => {
+      renderHook(() => useKeyboardHeight());
+
+      expect(mockSubscribeKeyboardHeight).toHaveBeenCalledWith({
+        callback: expect.any(Function),
+        immediate: true,
+      });
+    });
+
+    it('should call subscribeKeyboardHeight with immediate: false when specified', () => {
+      renderHook(() => useKeyboardHeight({ immediate: false }));
+
+      expect(mockSubscribeKeyboardHeight).toHaveBeenCalledWith({
+        callback: expect.any(Function),
+        immediate: false,
+      });
+    });
+
+    it('should update keyboard height when callback is invoked', () => {
+      mockSubscribeKeyboardHeight.mockImplementation(({ callback }) => {
+        callback(300);
+        return { unsubscribe: mockUnsubscribe };
+      });
+
+      const { result } = renderHook(() => useKeyboardHeight());
+
+      expect(result.current).toBe(300);
+    });
+  });
+
+  describe('cleanup behavior', () => {
+    it('should call unsubscribe on unmount', () => {
+      const { unmount } = renderHook(() => useKeyboardHeight());
+
+      expect(mockUnsubscribe).not.toHaveBeenCalled();
+
+      unmount();
+
+      expect(mockUnsubscribe).toHaveBeenCalledTimes(1);
+    });
+
+    it('should resubscribe when immediate option changes', () => {
+      const { rerender } = renderHook(({ immediate }) => useKeyboardHeight({ immediate }), {
+        initialProps: { immediate: true },
+      });
+
+      expect(mockSubscribeKeyboardHeight).toHaveBeenCalledTimes(1);
+
+      rerender({ immediate: false });
+
+      expect(mockUnsubscribe).toHaveBeenCalledTimes(1);
+      expect(mockSubscribeKeyboardHeight).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  describe('keyboard height updates', () => {
+    it('should track keyboard height changes', () => {
+      let capturedCallback: ((height: number) => void) | null = null;
+
+      mockSubscribeKeyboardHeight.mockImplementation(({ callback }) => {
+        capturedCallback = callback;
+        return { unsubscribe: mockUnsubscribe };
+      });
+
+      const { result } = renderHook(() => useKeyboardHeight());
+
+      expect(result.current).toBe(0);
+
+      act(() => {
+        capturedCallback?.(250);
+      });
+
+      expect(result.current).toBe(250);
+
+      act(() => {
+        capturedCallback?.(0);
+      });
+
+      expect(result.current).toBe(0);
+    });
+
+    it('should handle various keyboard heights', () => {
+      const heights = [0, 100, 250, 350, 500];
+
+      for (const expectedHeight of heights) {
+        mockSubscribeKeyboardHeight.mockImplementation(({ callback }) => {
+          callback(expectedHeight);
+          return { unsubscribe: mockUnsubscribe };
+        });
+
+        const { result } = renderHook(() => useKeyboardHeight());
+
+        expect(result.current).toBe(expectedHeight);
+      }
+    });
+  });
+
+  describe('use cases', () => {
+    it('should provide keyboard height for bottom padding adjustment', () => {
+      mockSubscribeKeyboardHeight.mockImplementation(({ callback }) => {
+        callback(300);
+        return { unsubscribe: mockUnsubscribe };
+      });
+
+      const { result } = renderHook(() => useKeyboardHeight());
+
+      const paddingBottom = `${result.current}px`;
+      expect(paddingBottom).toBe('300px');
+    });
+
+    it('should detect keyboard visibility', () => {
+      mockSubscribeKeyboardHeight.mockImplementation(({ callback }) => {
+        callback(300);
+        return { unsubscribe: mockUnsubscribe };
+      });
+
+      const { result } = renderHook(() => useKeyboardHeight());
+
+      const isKeyboardVisible = result.current > 0;
+      expect(isKeyboardVisible).toBe(true);
+    });
+
+    it('should detect keyboard hidden state', () => {
+      mockSubscribeKeyboardHeight.mockImplementation(({ callback }) => {
+        callback(0);
+        return { unsubscribe: mockUnsubscribe };
+      });
+
+      const { result } = renderHook(() => useKeyboardHeight());
+
+      const isKeyboardVisible = result.current > 0;
+      expect(isKeyboardVisible).toBe(false);
+    });
+  });
+
+  describe('multiple instances', () => {
+    it('should allow multiple independent hook instances', () => {
+      let callback1: ((height: number) => void) | null = null;
+      let callback2: ((height: number) => void) | null = null;
+
+      mockSubscribeKeyboardHeight
+        .mockImplementationOnce(({ callback }) => {
+          callback1 = callback;
+          return { unsubscribe: mockUnsubscribe };
+        })
+        .mockImplementationOnce(({ callback }) => {
+          callback2 = callback;
+          return { unsubscribe: mockUnsubscribe };
+        });
+
+      const { result: result1 } = renderHook(() => useKeyboardHeight());
+      const { result: result2 } = renderHook(() => useKeyboardHeight());
+
+      act(() => {
+        callback1?.(200);
+        callback2?.(200);
+      });
+
+      expect(result1.current).toBe(200);
+      expect(result2.current).toBe(200);
+    });
+  });
+});
diff --git a/packages/mobile/src/hooks/keyboardHeight/useKeyboardHeight.ts b/packages/mobile/src/hooks/keyboardHeight/useKeyboardHeight.ts
@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react';
+
+import { subscribeKeyboardHeight } from '../../utils/keyboardHeight/subscribeKeyboardHeight.ts';
+
+type UseKeyboardHeightOptions = {
+  /**
+   * If true, the hook will get the initial keyboard height on mount.
+   * @default true
+   */
+  immediate?: boolean;
+};
+
+/**
+ * React hook to track the on-screen keyboard height.
+ *
+ * Returns the current keyboard height in pixels, which updates automatically
+ * when the keyboard appears, disappears, or changes size.
+ *
+ * @param options - Configuration options
+ * @param options.immediate - If true, gets the initial keyboard height on mount (default: true)
+ * @returns The current keyboard height in pixels
+ *
+ * @example
+ * ```tsx
+ * function ChatInput() {
+ *   const keyboardHeight = useKeyboardHeight();
+ *
+ *   return (
+ *     <div style={{ paddingBottom: `${keyboardHeight}px` }}>
+ *       <input type="text" placeholder="Type a message..." />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useKeyboardHeight(options: UseKeyboardHeightOptions = {}): number {
+  const { immediate = true } = options;
+
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  useEffect(
+    function subscribeToKeyboardHeight() {
+      const { unsubscribe } = subscribeKeyboardHeight({
+        callback: setKeyboardHeight,
+        immediate,
+      });
+
+      return unsubscribe;
+    },
+    [immediate]
+  );
+
+  return keyboardHeight;
+}
diff --git a/packages/mobile/src/utils/keyboardHeight/subscribeKeyboardHeight.test.ts b/packages/mobile/src/utils/keyboardHeight/subscribeKeyboardHeight.test.ts
@@ -0,0 +1,123 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { subscribeKeyboardHeight } from './subscribeKeyboardHeight.ts';
+
+describe('subscribeKeyboardHeight', () => {
+  let mockVisualViewport: {
+    height: number;
+    offsetTop: number;
+    addEventListener: ReturnType<typeof vi.fn>;
+    removeEventListener: ReturnType<typeof vi.fn>;
+  };
+
+  beforeEach(() => {
+    mockVisualViewport = {
+      height: 500,
+      offsetTop: 0,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    };
+
+    vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(800);
+
+    Object.defineProperty(window, 'visualViewport', {
+      value: mockVisualViewport,
+      writable: true,
+      configurable: true,
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should return an object with unsubscribe function when visualViewport is not available', () => {
+    Object.defineProperty(window, 'visualViewport', {
+      value: null,
+      writable: true,
+      configurable: true,
+    });
+
+    const callback = vi.fn();
+    const { unsubscribe } = subscribeKeyboardHeight({ callback });
+
+    expect(typeof unsubscribe).toBe('function');
+    unsubscribe(); // should not throw
+  });
+
+  it('should add resize and scroll event listeners', () => {
+    const callback = vi.fn();
+
+    subscribeKeyboardHeight({ callback });
+
+    expect(mockVisualViewport.addEventListener).toHaveBeenCalledTimes(2);
+    expect(mockVisualViewport.addEventListener).toHaveBeenCalledWith('resize', expect.any(Function));
+    expect(mockVisualViewport.addEventListener).toHaveBeenCalledWith('scroll', expect.any(Function));
+  });
+
+  it('should call callback with keyboard height on resize event', () => {
+    const callback = vi.fn();
+
+    subscribeKeyboardHeight({ callback });
+
+    const resizeHandler = mockVisualViewport.addEventListener.mock.calls.find(call => call[0] === 'resize')?.[1];
+
+    resizeHandler?.();
+
+    expect(callback).toHaveBeenCalledWith(300);
+  });
+
+  it('should call callback with keyboard height on scroll event', () => {
+    const callback = vi.fn();
+
+    subscribeKeyboardHeight({ callback });
+
+    const scrollHandler = mockVisualViewport.addEventListener.mock.calls.find(call => call[0] === 'scroll')?.[1];
+
+    scrollHandler?.();
+
+    expect(callback).toHaveBeenCalledWith(300);
+  });
+
+  it('should not call callback immediately by default', () => {
+    const callback = vi.fn();
+
+    subscribeKeyboardHeight({ callback });
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('should call callback immediately when immediate option is true', () => {
+    const callback = vi.fn();
+
+    subscribeKeyboardHeight({ callback, immediate: true });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith(300);
+  });
+
+  it('should remove event listeners when unsubscribe is called', () => {
+    const callback = vi.fn();
+
+    const { unsubscribe } = subscribeKeyboardHeight({ callback });
+    unsubscribe();
+
+    expect(mockVisualViewport.removeEventListener).toHaveBeenCalledTimes(2);
+    expect(mockVisualViewport.removeEventListener).toHaveBeenCalledWith('resize', expect.any(Function));
+    expect(mockVisualViewport.removeEventListener).toHaveBeenCalledWith('scroll', expect.any(Function));
+  });
+
+  it('should remove the same handler that was added', () => {
+    const callback = vi.fn();
+
+    const { unsubscribe } = subscribeKeyboardHeight({ callback });
+    unsubscribe();
+
+    const addedResizeHandler = mockVisualViewport.addEventListener.mock.calls.find(call => call[0] === 'resize')?.[1];
+    const removedResizeHandler = mockVisualViewport.removeEventListener.mock.calls.find(
+      call => call[0] === 'resize'
+    )?.[1];
+
+    expect(addedResizeHandler).toBe(removedResizeHandler);
+  });
+});
diff --git a/packages/mobile/src/utils/keyboardHeight/subscribeKeyboardHeight.ts b/packages/mobile/src/utils/keyboardHeight/subscribeKeyboardHeight.ts
