[Feat/#98] 네이티브 키보드 높이 적용

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,49 @@
+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;
+          const newKeyboardHeight = isKeyboardVisible
+            ? window.innerHeight - window.visualViewport.height
+            : 0;
+
+          if (isKeyboardVisible && newKeyboardHeight === 0) {
+            setTimeout(() => {
+              if (window.visualViewport) {
+                setKeyboardHeight(window.innerHeight - window.visualViewport.height);
+              }
+            }, 300);
+          } else {
+            setKeyboardHeight(newKeyboardHeight);
+          }
+
+          setKeyboardVisible(isKeyboardVisible);
+        }
+      }, 100);
+    };
+
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener("resize", handleVisualViewportChange);
+      handleVisualViewportChange();
+    }
+
+    return () => {
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener("resize", handleVisualViewportChange);
+      }
+      clearTimeout(timeoutId);
+    };
+  }, []);
+
+  return { keyboardVisible, keyboardHeight };
+};

src/main.tsx

@@ -5,7 +5,6 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import AppRouter from "@/router/AppRouter";
 
-import SafeAreaWrapper from "@/components/common/SafeAreaWrapper/SafeAreaWrapper";
 import { AppBridgeProvider } from "@/components/provider/AppBridgeProvider/AppBridgeProvider";
 import ReactQueryClientProvider from "@/components/provider/ReactQueryClientProvider";
 import { UserAgentProvider } from "@/components/provider/UserAgentProvider";
@@ -18,10 +17,8 @@ ReactDom.createRoot(document.getElementById("root")!).render(
     <ReactQueryClientProvider>
       <UserAgentProvider>
         <AppBridgeProvider>
-          <SafeAreaWrapper>
-            <AppRouter />
-            <ReactQueryDevtools initialIsOpen={false} />
-          </SafeAreaWrapper>
+          <AppRouter />
+          <ReactQueryDevtools initialIsOpen={false} />
         </AppBridgeProvider>
       </UserAgentProvider>
     </ReactQueryClientProvider>