feat: keyboard resize 추가

Author: sikkzz

src/components/SelectTag/TagSheet/TagSheet.tsx

@@ -12,6 +12,7 @@ import Text from "@/components/ui/Text/Text";
 
 import useOnClickOutside from "@/hooks/common/useClickOutside";
 import { useFocus } from "@/hooks/common/useFocus";
+import { useKeyboardResize } from "@/hooks/common/useKeyboardResize";
 
 interface TagSheetProps {
   isOpen: boolean;
@@ -23,6 +24,8 @@ interface TagSheetProps {
 const TagSheet = ({ isOpen, tagList, handleClose, handleTagAdd }: TagSheetProps) => {
   const { isFocus, onFocus, onBlur } = useFocus({ defaultFocus: true });
 
+  const { keyboardVisible, keyboardHeight } = useKeyboardResize();
+
   const [newTag, setNewTag] = useState("");
 
   const modalRef = useRef<HTMLDivElement>(null);
@@ -103,7 +106,14 @@ const TagSheet = ({ isOpen, tagList, handleClose, handleTagAdd }: TagSheetProps)
             )}
           </div>
 
-          <Button text="추가하기" disabled={isInputError || isInputEmpty} onClick={handleAddTag} />
+          <Button
+            text="추가하기"
+            disabled={isInputError || isInputEmpty}
+            onClick={handleAddTag}
+            style={{
+              transform: `translateY(-${keyboardVisible ? keyboardHeight : 0}px)`,
+            }}
+          />
         </Dialog.Content>
       </Dialog.Portal>
     </Dialog.Root>

src/hooks/common/useKeyboardResize.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+
+export const useKeyboardResize = () => {
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
+
+    const handleVisualViewportChange = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        if (window.visualViewport) {
+          const isKeyboardVisible = window.visualViewport.height < window.innerHeight;
+          setKeyboardVisible(isKeyboardVisible);
+          setKeyboardHeight(
+            isKeyboardVisible ? window.innerHeight - window.visualViewport.height : 0,
+          );
+        }
+      }, 100);
+    };
+
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener("resize", handleVisualViewportChange);
+      handleVisualViewportChange();
+    }
+
+    return () => {
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener("resize", handleVisualViewportChange);
+      }
+      clearTimeout(timeoutId);
+    };
+  }, []);
+
+  return { keyboardVisible, keyboardHeight };
+};