1. 시작

회원가입 페이지를 구현하면서

• 이메일 입력
• 인증코드 입력
• 이름 입력
• 패스워드 입력

이렇게 4개의 페이지로 나누어 개발했다. 한 페이지에 몰아서 할 수도 있는데 최근에 이런 UX를 많이 보기도 했고 사용하기에도 편했다.

그런데 문제는 input focus시 키보드가 올라와 버튼을 가린다.

그래서 현재 visualViewport의 높이를 계산해 버튼 위치를 동적으로 맞췄다.

---

2. 코드

tsx
import { Button, ButtonProps } from '@nextui-org/react';import React from 'react';
const KeyboardAdjustButton: React.FC<ButtonProps> = ({  style,  onPress,  children,  ...other}) => {  const [keyboardHeight, setKeyboardHeight] = React.useState(0);
  React.useEffect(() => {    const adjustButton = () => {      if (window.visualViewport) {        const newKeyboardHeight =          window.visualViewport.height < window.innerHeight            ? window.innerHeight - window.visualViewport.height            : 0;        setKeyboardHeight(newKeyboardHeight);      } else {        setKeyboardHeight(0);      }    };
    if (window.visualViewport) {      window.visualViewport.addEventListener('resize', adjustButton);    } else {      window.addEventListener('resize', adjustButton);    }
    return () => {      if (window.visualViewport) {        window.visualViewport.removeEventListener('resize', adjustButton);      } else {        window.removeEventListener('resize', adjustButton);      }    };  }, []);
  const onPressEnd = (e: any) => {    onPress?.(e);  };
  return (    <Button      style={{ marginBottom: `${keyboardHeight}px`, ...style }}      onPressEnd={onPressEnd}      {...other}    >      {children}    </Button>  );};
export default KeyboardAdjustButton;

---

3. 결과