diff --git a/components/Input/Input.styled.ts b/components/Input/Input.styled.ts
index 24b0984ae..ceb6baed5 100644
--- a/components/Input/Input.styled.ts
+++ b/components/Input/Input.styled.ts
@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { InputProps } from './Input';
 
 const inputSize = {
   sm: '28',
@@ -7,21 +6,37 @@ const inputSize = {
   lg: '50',
 };
 
-const InputModal = styled.input<InputProps>`
-  display: flex;
-  width: ${({ size }) => inputSize[size]}rem;
-  padding: 1.8rem 1.5rem;
-  justify-content: center;
-  align-items: center;
-  border-radius: 0.8rem;
-  border: 1px solid
-    var(${({ $error }) => ($error ? '--ErrorMessage' : '--Linkbrary-gray20')});
-  background: var(--Section-white);
-  font-size: 1.6rem;
+export const InputModal = styled.div<{
+  size: 'sm' | 'md' | 'lg';
+  $error: boolean;
+}>`
+  input {
+    display: flex;
+    width: ${({ size }) => inputSize[size]}rem;
+    padding: 1.8rem 1.5rem;
+    justify-content: center;
+    align-items: center;
+    border: 0.1rem solid
+      var(${({ $error }) => ($error ? '--ErrorMessage' : '--Linkbrary-gray20')});
+    border-radius: 0.8rem;
+    background: var(--Section-white);
+    font-size: 1.6rem;
+  }
 
   &:focus {
     border: 1px solid var(--Primary);
   }
 `;
 
-export default InputModal;
+export const TextArea = styled.div`
+  height: 3rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+`;
+
+export const WarningMessage = styled.p`
+  color: var(--ErrorMessage);
+  font-size: 1.4rem;
+  margin: 0;
+`;
diff --git a/components/Input/Input.tsx b/components/Input/Input.tsx
index ac32aeac3..595cf78af 100644
--- a/components/Input/Input.tsx
+++ b/components/Input/Input.tsx
@@ -1,28 +1,38 @@
-import { ChangeEvent, HtmlHTMLAttributes } from 'react';
-import InputModal from './Input.styled';
+import {
+  ControllerRenderProps,
+  FieldError,
+  FieldValues,
+} from 'react-hook-form';
+import * as S from './Input.styled';
+import { useEffect, useState } from 'react';
 
-export interface InputProps extends HtmlHTMLAttributes<HTMLInputElement> {
+export interface InputProps {
+  placeholder: string;
   type: string;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-  $error: string;
   size: 'sm' | 'md' | 'lg';
-  placeholder: string;
+  field: ControllerRenderProps<FieldValues, any>;
+  id: string;
+  error: FieldError | undefined;
 }
 
-function Input({ id, placeholder, type, onChange, $error, size }: InputProps) {
+function Input({ placeholder, type, size, field, error }: InputProps) {
+  const [errorMessage, setErrorMessage] = useState(false);
+
+  useEffect(() => {
+    if (error) {
+      setErrorMessage(true);
+    } else {
+      setErrorMessage(false);
+    }
+  }, [error]);
+
   return (
-    <>
-      <InputModal
-        type={type}
-        autoCapitalize="off"
-        id={id}
-        placeholder={placeholder}
-        onChange={onChange}
-        onBlur={onChange}
-        $error={$error}
-        size={size}
-      />
-    </>
+    <S.InputModal size={size} $error={errorMessage}>
+      <input type={type} placeholder={placeholder} {...field} />
+      <S.TextArea>
+        {error && <S.WarningMessage>{error.message}</S.WarningMessage>}
+      </S.TextArea>
+    </S.InputModal>
   );
 }
 
diff --git a/package-lock.json b/package-lock.json
index c34744bcb..623d4f649 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "styled-components": "^6.1.11"
       },
       "devDependencies": {
+        "@hookform/devtools": "^4.3.1",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
@@ -44,7 +45,6 @@
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
       "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@babel/highlight": "^7.24.2",
         "picocolors": "^1.0.0"
@@ -291,7 +291,6 @@
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.5.tgz",
       "integrity": "sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.24.5",
         "chalk": "^2.4.2",
@@ -393,6 +392,74 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "dev": true
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "dev": true
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache/node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "dev": true
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==",
+      "dev": true
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
@@ -406,11 +473,98 @@
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
+    "node_modules/@emotion/react": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
+      "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz",
+      "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==",
+      "dev": true
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.11.5",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz",
+      "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.2",
+        "@emotion/serialize": "^1.1.4",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@emotion/unitless": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
       "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
     },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "dev": true,
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==",
+      "dev": true
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==",
+      "dev": true
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -482,6 +636,26 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@hookform/devtools": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/@hookform/devtools/-/devtools-4.3.1.tgz",
+      "integrity": "sha512-CrWxEoHQZaOXJZVQ8KBgOuAa8p2LI8M0DAN5GTRTmdCieRwFVjVDEmuTAVazWVRRkpEQSgSt3KYp7VmmqXdEnw==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/react": "^11.1.5",
+        "@emotion/styled": "^11.3.0",
+        "@types/lodash": "^4.14.168",
+        "little-state-machine": "^4.1.0",
+        "lodash": "^4.17.21",
+        "react-simple-animate": "^3.3.12",
+        "use-deep-compare-effect": "^1.8.1",
+        "uuid": "^8.3.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -772,6 +946,12 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.17.4",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.4.tgz",
+      "integrity": "sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "20.12.12",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
@@ -781,6 +961,12 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "dev": true
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -1007,7 +1193,6 @@
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -1252,6 +1437,21 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/babel-plugin-styled-components": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz",
@@ -1400,7 +1600,6 @@
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -1420,7 +1619,6 @@
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -1429,8 +1627,7 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/combined-stream": {
       "version": "1.0.8",
@@ -1456,6 +1653,22 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dev": true,
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1674,6 +1887,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -1847,7 +2069,6 @@
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -2422,6 +2643,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "dev": true
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2719,7 +2946,6 @@
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -2787,6 +3013,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dev": true,
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -2867,6 +3102,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true
+    },
     "node_modules/is-async-function": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@@ -3258,6 +3499,12 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -3338,6 +3585,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
+    "node_modules/little-state-machine": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/little-state-machine/-/little-state-machine-4.8.0.tgz",
+      "integrity": "sha512-xfi5+iDxTLhu0hbnNubUs+qoQQqxhtEZeObP5ELjUlHnl74bbasY7mOonsGQrAouyrbag3ebNLSse5xX1T7buQ==",
+      "dev": true,
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -3722,6 +3984,24 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -3920,6 +4200,15 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-simple-animate": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/react-simple-animate/-/react-simple-animate-3.5.2.tgz",
+      "integrity": "sha512-xLE65euP920QMTOmv5haPlml+hmOPDkbIr5WeF7ADIXWBYt5kW/vwpNfWg8EKMab8aeDxIZ6QjffVh8v2dUyhg==",
+      "dev": true,
+      "peerDependencies": {
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -4185,6 +4474,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -4395,7 +4693,6 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -4663,6 +4960,32 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-deep-compare-effect": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz",
+      "integrity": "sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "dequal": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13"
+      }
+    },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -4791,6 +5114,15 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index f0c8f9990..255881070 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "styled-components": "^6.1.11"
   },
   "devDependencies": {
+    "@hookform/devtools": "^4.3.1",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
diff --git a/pages/api/api.ts b/pages/api/api.ts
index 305c46eb9..9ec76c152 100644
--- a/pages/api/api.ts
+++ b/pages/api/api.ts
@@ -92,6 +92,7 @@ export async function postSignIn(id: string, password: string) {
       password: password,
     });
     localStorage.setItem('token', data.data.accessToken);
+    window.location.href = '/';
     return data;
   } catch (error) {
     console.error('Error fetching sign-in:', error);
@@ -107,6 +108,7 @@ export async function postCheckEmail(email: string) {
     return data;
   } catch (error) {
     console.error('Error fetching sign-in:', error);
+    alert('이미 가입된 이메일입니다!');
   }
 }
 
@@ -116,8 +118,9 @@ export async function postSignUp(id: string, password: string) {
       email: id,
       password: password,
     });
-    alert('회원가입이 완료되었습니다!');
     localStorage.setItem('token', data.data.accessToken);
+    alert('회원가입이 완료되었습니다!');
+    window.location.href = '/';
     return data;
   } catch (error) {
     console.error('Error fetching sign-in:', error);
diff --git a/pages/signin.tsx b/pages/signin.tsx
index 5768031c5..b3b436c7f 100644
--- a/pages/signin.tsx
+++ b/pages/signin.tsx
@@ -1,120 +1,116 @@
 import * as S from '@/styles/signin.styled';
-import { ChangeEvent, FormEvent, useState } from 'react';
-import useValidate from '@/hooks/useValidate';
+import { useState } from 'react';
 import Input from '@/components/Input/Input';
 import Link from 'next/link';
 import Image from 'next/image';
 import { Button } from '@/components/Button/Button';
 import { postSignIn } from './api/api';
+import { Controller, useForm } from 'react-hook-form';
+import { emailPattern } from '@/util/util';
 
 function SignIn() {
   const [textHidden, setTextHidden] = useState(true);
-  const [emailValue, setEmailValue] = useState('');
-  const [passwordValue, setPasswordValue] = useState('');
-  const { ok, emailError, passwordError, validateEmail, validatePassword } =
-    useValidate();
+  const { handleSubmit, control } = useForm();
 
-  const submitForm = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (emailValue && passwordValue) {
-      if (ok) {
-        await postSignIn(emailValue, passwordValue);
-        window.location.href = '/';
-      }
-    } else {
-      alert('값을 입력하지 않았습니다! 다시 확인해주세요!');
-    }
+  const formAction = async (data: any) => {
+    await postSignIn(data.id, data.password);
   };
 
   const hiddenText = () => {
     setTextHidden(!textHidden);
   };
 
-  const changeEmailInput = (e: ChangeEvent<HTMLInputElement>) => {
-    setEmailValue(e.target.value);
-    validateEmail(e.target.value);
-  };
-
-  const changePasswordInput = (e: ChangeEvent<HTMLInputElement>) => {
-    setPasswordValue(e.target.value);
-    validatePassword(e.target.value);
-  };
-
   return (
-    <S.SignBody>
-      <S.SignContent>
-        <S.SignFormBody>
-          <S.FormLogo>
-            <Link href="/">
-              <Image src="/logo.svg" alt="메인로고" width={210} height={38} />
-            </Link>
-            <S.Question>
-              <span>회원이 아니신가요?</span>
-              <Link href="/signup" style={{ textDecoration: 'none' }}>
-                <p>회원 가입하기</p>
+    <>
+      <S.SignBody>
+        <S.SignContent>
+          <S.SignFormBody>
+            <S.FormLogo>
+              <Link href="/">
+                <Image src="/logo.svg" alt="메인로고" width={210} height={38} />
               </Link>
-            </S.Question>
-          </S.FormLogo>
-          <S.SignForm onSubmit={submitForm}>
-            <S.InputModal>
-              <label htmlFor="email">이메일</label>
-              <Input
-                type="text"
-                id="id"
-                placeholder="이메일"
-                onChange={changeEmailInput}
-                $error={emailError}
-                size="md"
-              />
-            </S.InputModal>
-            <S.TextArea>
-              {emailError && <S.WarningMessage>{emailError}</S.WarningMessage>}
-            </S.TextArea>
-            <S.InputModal>
-              <label htmlFor="password">비밀번호</label>
-              <Input
-                type={textHidden ? 'password' : 'text'}
-                id="password"
-                placeholder="비밀번호"
-                onChange={changePasswordInput}
-                $error={passwordError}
-                size="md"
-              />
-              <S.TextHiddenButton $hidden={textHidden} onClick={hiddenText} />
-            </S.InputModal>
-            <S.TextArea>
-              {passwordError && (
-                <S.WarningMessage>{passwordError}</S.WarningMessage>
-              )}
-            </S.TextArea>
-            <Button size={'lg'} type="submit">
-              로그인
-            </Button>
-          </S.SignForm>
-        </S.SignFormBody>
-        <S.SnsLogin>
-          소셜 로그인
-          <S.SnsIcons>
-            <S.Google href="https://www.google.com/" target="_blank">
-              <Image
-                src="/googleIcon.png"
-                alt="구글아이콘"
-                width={22}
-                height={22}
-              />
-            </S.Google>
-            <S.Kakao href="https://www.kakaocorp.com/page/" target="_blank">
-              <Image
-                src="/Kakao.svg"
-                alt="카카오아이콘"
-                width={26}
-                height={24}
-              />
-            </S.Kakao>
-          </S.SnsIcons>
-        </S.SnsLogin>
-      </S.SignContent>
-    </S.SignBody>
+              <S.Question>
+                <span>회원이 아니신가요?</span>
+                <Link href="/signup" style={{ textDecoration: 'none' }}>
+                  <p>회원 가입하기</p>
+                </Link>
+              </S.Question>
+            </S.FormLogo>
+            <S.SignForm onSubmit={handleSubmit(formAction)}>
+              <S.InputModal>
+                <label htmlFor="email">이메일</label>
+                <Controller
+                  name="id"
+                  control={control}
+                  rules={{
+                    required: '이메일을 입력해주세요!',
+                    pattern: {
+                      value: emailPattern,
+                      message: '이메일 형식이 아닙니다!',
+                    },
+                  }}
+                  render={({ field, fieldState: { error } }) => (
+                    <Input
+                      id="id"
+                      field={field}
+                      type="text"
+                      placeholder="이메일"
+                      size="md"
+                      error={error}
+                    />
+                  )}
+                />
+              </S.InputModal>
+              <S.InputModal>
+                <label htmlFor="password">비밀번호</label>
+                <Controller
+                  name="password"
+                  control={control}
+                  rules={{
+                    required: '비밀번호를 입력해주세요!',
+                  }}
+                  render={({ field, fieldState: { error } }) => (
+                    <Input
+                      id="password"
+                      field={field}
+                      type={textHidden ? 'password' : 'text'}
+                      placeholder="비밀번호"
+                      size="md"
+                      error={error}
+                    />
+                  )}
+                />
+                <S.TextHiddenButton $hidden={textHidden} onClick={hiddenText} />
+              </S.InputModal>
+              <Button size={'lg'} type="submit">
+                로그인
+              </Button>
+            </S.SignForm>
+          </S.SignFormBody>
+          <S.SnsLogin>
+            소셜 로그인
+            <S.SnsIcons>
+              <S.Google href="https://www.google.com/" target="_blank">
+                <Image
+                  src="/googleIcon.png"
+                  alt="구글아이콘"
+                  width={22}
+                  height={22}
+                />
+              </S.Google>
+              <S.Kakao href="https://www.kakaocorp.com/page/" target="_blank">
+                <Image
+                  src="/Kakao.svg"
+                  alt="카카오아이콘"
+                  width={26}
+                  height={24}
+                />
+              </S.Kakao>
+            </S.SnsIcons>
+          </S.SnsLogin>
+        </S.SignContent>
+      </S.SignBody>
+    </>
   );
 }
 
diff --git a/pages/signup.tsx b/pages/signup.tsx
index 22cf28746..e4c8fb91b 100644
--- a/pages/signup.tsx
+++ b/pages/signup.tsx
@@ -1,41 +1,21 @@
 import * as S from '@/styles/signin.styled';
-import { ChangeEvent, useState } from 'react';
-import useValidate from '@/hooks/useValidate';
+import { useState } from 'react';
 import Input from '@/components/Input/Input';
 import Link from 'next/link';
 import Image from 'next/image';
 import { Button } from '@/components/Button/Button';
 import { postCheckEmail, postSignUp } from './api/api';
-import { useRouter } from 'next/router';
+import { Controller, useForm } from 'react-hook-form';
+import { emailPattern } from '@/util/util';
 
 function SignUp() {
+  const { handleSubmit, control, watch } = useForm();
   const [textHidden, setTextHidden] = useState(true);
-  const [emailValue, setEmailValue] = useState('');
-  const [passwordValue, setPasswordValue] = useState('');
-  const [confirmValue, setConfirmValue] = useState('');
-  const {
-    ok,
-    emailError,
-    passwordError,
-    passwordConfirmError,
-    validateEmail,
-    validatePassword,
-    validatePasswordConfirm,
-  } = useValidate();
-  const router = useRouter();
 
-  const submitForm = async (e: ChangeEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (emailValue && passwordValue && confirmValue) {
-      if (ok) {
-        const result = await postCheckEmail(emailValue);
-        if (result) {
-          await postSignUp(emailValue, passwordValue);
-          router.push('/');
-        }
-      }
-    } else {
-      alert('값을 입력하지 않았습니다! 다시 확인해주세요!');
+  const formAction = async (data: any) => {
+    const result = await postCheckEmail(data.id);
+    if (result) {
+      await postSignUp(data.id, data.password);
     }
   };
 
@@ -43,21 +23,6 @@ function SignUp() {
     setTextHidden(!textHidden);
   };
 
-  const changeEmailInput = (e: ChangeEvent<HTMLInputElement>) => {
-    setEmailValue(e.target.value);
-    validateEmail(e.target.value);
-  };
-
-  const changePasswordInput = (e: ChangeEvent<HTMLInputElement>) => {
-    setPasswordValue(e.target.value);
-    validatePassword(e.target.value);
-  };
-
-  const changeConfirmInput = (e: ChangeEvent<HTMLInputElement>) => {
-    setConfirmValue(e.target.value);
-    validatePasswordConfirm(e.target.value, passwordValue);
-  };
-
   return (
     <S.SignBody>
       <S.SignContent>
@@ -73,55 +38,80 @@ function SignUp() {
               </Link>
             </S.Question>
           </S.FormLogo>
-          <S.SignForm onSubmit={submitForm}>
+          <S.SignForm onSubmit={handleSubmit(formAction)}>
             <S.InputModal>
               <label htmlFor="email">이메일</label>
-              <Input
-                type="text"
-                id="email"
-                placeholder="이메일"
-                onChange={changeEmailInput}
-                $error={emailError}
-                size="md"
+              <Controller
+                name="id"
+                control={control}
+                rules={{
+                  required: '이메일을 입력해주세요!',
+                  pattern: {
+                    value: emailPattern,
+                    message: '이메일 형식이 아닙니다!',
+                  },
+                }}
+                render={({ field, fieldState: { error } }) => (
+                  <Input
+                    id="id"
+                    field={field}
+                    type="text"
+                    placeholder="이메일"
+                    size="md"
+                    error={error}
+                  />
+                )}
               />
             </S.InputModal>
-            <S.TextArea>
-              {emailError && <S.WarningMessage>{emailError}</S.WarningMessage>}
-            </S.TextArea>
             <S.InputModal>
               <label htmlFor="password">비밀번호</label>
-              <Input
-                type={textHidden ? 'password' : 'text'}
-                id="password"
-                placeholder="비밀번호"
-                onChange={changePasswordInput}
-                $error={passwordError}
-                size="md"
+              <Controller
+                name="password"
+                control={control}
+                rules={{
+                  required: '비밀번호를 입력해주세요!',
+                  minLength: { value: 8, message: '최소 8자를 입력해주세요!' },
+                  deps: ['passwordConfirm'],
+                }}
+                render={({ field, fieldState: { error } }) => (
+                  <Input
+                    id="password"
+                    field={field}
+                    type={textHidden ? 'password' : 'text'}
+                    placeholder="비밀번호"
+                    size="md"
+                    error={error}
+                  />
+                )}
               />
               <S.TextHiddenButton $hidden={textHidden} onClick={hiddenText} />
             </S.InputModal>
-            <S.TextArea>
-              {passwordError && (
-                <S.WarningMessage>{passwordError}</S.WarningMessage>
-              )}
-            </S.TextArea>
             <S.InputModal>
               <label htmlFor="password">비밀번호 확인</label>
-              <Input
-                type={textHidden ? 'password' : 'text'}
-                placeholder="비밀번호"
-                id="confirmPassword"
-                onChange={changeConfirmInput}
-                $error={passwordConfirmError}
-                size="md"
+              <Controller
+                name="confirmPassword"
+                control={control}
+                rules={{
+                  required: '비밀번호를 입력해주세요!',
+                  validate: (value) => {
+                    return value === watch('password')
+                      ? true
+                      : '비밀번호가 일치하지 않습니다!';
+                  },
+                }}
+                render={({ field, fieldState: { error } }) => (
+                  <Input
+                    id="password"
+                    field={field}
+                    type={textHidden ? 'password' : 'text'}
+                    placeholder="비밀번호"
+                    size="md"
+                    error={error}
+                  />
+                )}
               />
               <S.TextHiddenButton $hidden={textHidden} onClick={hiddenText} />
             </S.InputModal>
-            <S.TextArea>
-              {passwordConfirmError && (
-                <S.WarningMessage>{passwordConfirmError}</S.WarningMessage>
-              )}
-            </S.TextArea>
             <Button size={'lg'} type="submit">
               회원가입
             </Button>
diff --git a/util/util.ts b/util/util.ts
index 874871f68..e4af39ba8 100644
--- a/util/util.ts
+++ b/util/util.ts
@@ -38,7 +38,7 @@ export const changeDate = (date: Date) => {
   return dateFormate;
 };
 
-const emailPattern =
+export const emailPattern =
   /^[A-Za-z0-9]([-_.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_.]?[A-Za-z0-9])*\.[A-Za-z]{2,3}$/;
 
 export function emailCheck(email: string) {