diff --git a/src/components/SelectTag/TagSheet/TagSheet.tsx b/src/components/SelectTag/TagSheet/TagSheet.tsx
index 9d48911..973ad40 100644
--- a/src/components/SelectTag/TagSheet/TagSheet.tsx
+++ b/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>
diff --git a/src/components/common/SafeAreaWrapper/SafeAreaWrapper.module.scss b/src/components/common/SafeAreaWrapper/SafeAreaWrapper.module.scss
deleted file mode 100644
index 97f884d..0000000
--- a/src/components/common/SafeAreaWrapper/SafeAreaWrapper.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.SafeArea {
-  padding-top: env(safe-area-inset-top);
-  padding-bottom: env(safe-area-inset-bottom);
-  padding-left: env(safe-area-inset-left);
-  padding-right: env(safe-area-inset-right);
-}
diff --git a/src/components/common/SafeAreaWrapper/SafeAreaWrapper.tsx b/src/components/common/SafeAreaWrapper/SafeAreaWrapper.tsx
deleted file mode 100644
index 329ea23..0000000
--- a/src/components/common/SafeAreaWrapper/SafeAreaWrapper.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import styles from "@/components/common/SafeAreaWrapper/SafeAreaWrapper.module.scss";
-
-const SafeAreaWrapper = ({ children }: { children: React.ReactNode }) => {
-  return <div className={styles.SafeArea}>{children}</div>;
-};
-
-export default SafeAreaWrapper;
diff --git a/src/hooks/common/useKeyboardResize.ts b/src/hooks/common/useKeyboardResize.ts
new file mode 100644
index 0000000..b136d56
--- /dev/null
+++ b/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 };
+};
diff --git a/src/main.tsx b/src/main.tsx
index 26d6a29..3a49d45 100644
--- a/src/main.tsx
+++ b/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>