diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
index 161970258..0140c6653 100644
--- a/frontend/.storybook/preview.js
+++ b/frontend/.storybook/preview.js
@@ -6,11 +6,11 @@ import axios from "axios";
 import "../src/api/api";
 import { RecruitmentContext } from "../src/hooks/useRecruitmentContext";
 import { recruitmentFilter } from "../src/provider/RecruitmentProvider";
-import FormProvider from "../src/provider/FormProvider/FormProvider";
 import TokenProvider from "../src/provider/TokenProvider";
-import useForm from "../src/hooks/useForm";
 
 import "../src/App.css";
+import FormProvider from "../src/provider/FormProvider";
+import useForm from "../src/hooks/useForm";
 
 export const API_BASE_URL = process.env.REACT_APP_API_BASE_URL;
 axios.defaults.baseURL = API_BASE_URL;
diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json
new file mode 100644
index 000000000..2c4580fcd
--- /dev/null
+++ b/frontend/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "module": "es6",
+    "target": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 6a7ce2518..46ea5d203 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -62,3 +62,10 @@ button {
   margin: 0 auto;
   padding: 2.5rem 0;
 }
+
+input,
+textarea {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
diff --git a/frontend/src/components/form/Button/Button.js b/frontend/src/components/@common/Button/Button.js
similarity index 97%
rename from frontend/src/components/form/Button/Button.js
rename to frontend/src/components/@common/Button/Button.js
index 925ef0623..66e355b68 100644
--- a/frontend/src/components/form/Button/Button.js
+++ b/frontend/src/components/@common/Button/Button.js
@@ -25,7 +25,6 @@ Button.propTypes = {
 };
 
 Button.defaultProps = {
-  type: "button",
   cancel: false,
 };
 
diff --git a/frontend/src/components/form/Button/Button.module.css b/frontend/src/components/@common/Button/Button.module.css
similarity index 100%
rename from frontend/src/components/form/Button/Button.module.css
rename to frontend/src/components/@common/Button/Button.module.css
diff --git a/frontend/src/components/form/Button/Button.stories.js b/frontend/src/components/@common/Button/Button.stories.js
similarity index 100%
rename from frontend/src/components/form/Button/Button.stories.js
rename to frontend/src/components/@common/Button/Button.stories.js
diff --git a/frontend/src/components/Container/Container.js b/frontend/src/components/@common/Container/Container.js
similarity index 100%
rename from frontend/src/components/Container/Container.js
rename to frontend/src/components/@common/Container/Container.js
diff --git a/frontend/src/components/Container/Container.module.css b/frontend/src/components/@common/Container/Container.module.css
similarity index 100%
rename from frontend/src/components/Container/Container.module.css
rename to frontend/src/components/@common/Container/Container.module.css
diff --git a/frontend/src/components/Container/Container.stories.js b/frontend/src/components/@common/Container/Container.stories.js
similarity index 100%
rename from frontend/src/components/Container/Container.stories.js
rename to frontend/src/components/@common/Container/Container.stories.js
diff --git a/frontend/src/components/form/Description/Description.js b/frontend/src/components/@common/Description/Description.js
similarity index 100%
rename from frontend/src/components/form/Description/Description.js
rename to frontend/src/components/@common/Description/Description.js
diff --git a/frontend/src/components/form/Description/Description.module.css b/frontend/src/components/@common/Description/Description.module.css
similarity index 100%
rename from frontend/src/components/form/Description/Description.module.css
rename to frontend/src/components/@common/Description/Description.module.css
diff --git a/frontend/src/components/form/Description/Description.stories.js b/frontend/src/components/@common/Description/Description.stories.js
similarity index 100%
rename from frontend/src/components/form/Description/Description.stories.js
rename to frontend/src/components/@common/Description/Description.stories.js
diff --git a/frontend/src/components/form/Label/Label.js b/frontend/src/components/@common/Label/Label.js
similarity index 100%
rename from frontend/src/components/form/Label/Label.js
rename to frontend/src/components/@common/Label/Label.js
diff --git a/frontend/src/components/form/Label/Label.module.css b/frontend/src/components/@common/Label/Label.module.css
similarity index 100%
rename from frontend/src/components/form/Label/Label.module.css
rename to frontend/src/components/@common/Label/Label.module.css
diff --git a/frontend/src/components/form/Label/Label.stories.js b/frontend/src/components/@common/Label/Label.stories.js
similarity index 100%
rename from frontend/src/components/form/Label/Label.stories.js
rename to frontend/src/components/@common/Label/Label.stories.js
diff --git a/frontend/src/components/@common/MessageTextInput/MessageTextInput.js b/frontend/src/components/@common/MessageTextInput/MessageTextInput.js
new file mode 100644
index 000000000..890a3b42b
--- /dev/null
+++ b/frontend/src/components/@common/MessageTextInput/MessageTextInput.js
@@ -0,0 +1,55 @@
+import PropTypes from "prop-types";
+import Description from "../Description/Description";
+import TextInput from "../TextInput/TextInput";
+import styles from "./MessageTextInput.module.css";
+import Label from "../Label/Label";
+
+const MessageTextInput = ({
+  label,
+  description,
+  initialValue,
+  value,
+  onChange,
+  name,
+  maxLength,
+  required,
+  errorMessage,
+  ...props
+}) => {
+  return (
+    <>
+      <div className={styles["text-field"]}>
+        <Label required={required}>{label}</Label>
+        {description && <Description>{description}</Description>}
+        <TextInput
+          required={required}
+          value={value}
+          name={name}
+          maxLength={maxLength}
+          onChange={onChange}
+          {...props}
+        />
+      </div>
+      <p className={styles["rule-field"]}>{errorMessage}</p>
+    </>
+  );
+};
+
+MessageTextInput.propTypes = {
+  label: PropTypes.string,
+  initialValue: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  description: PropTypes.node,
+  maxLength: PropTypes.number,
+  errorMessage: PropTypes.string,
+};
+
+MessageTextInput.defaultProps = {
+  label: "",
+  initialValue: "",
+  required: false,
+  description: "",
+};
+
+export default MessageTextInput;
diff --git a/frontend/src/components/form/TextField/TextField.module.css b/frontend/src/components/@common/MessageTextInput/MessageTextInput.module.css
similarity index 92%
rename from frontend/src/components/form/TextField/TextField.module.css
rename to frontend/src/components/@common/MessageTextInput/MessageTextInput.module.css
index 605a1692a..62ff83747 100644
--- a/frontend/src/components/form/TextField/TextField.module.css
+++ b/frontend/src/components/@common/MessageTextInput/MessageTextInput.module.css
@@ -1,6 +1,7 @@
 .text-field {
   display: flex;
   flex-direction: column;
+  margin: 0.625rem;
 }
 
 .length-limit {
diff --git a/frontend/src/components/@common/MessageTextInput/MessageTextInput.stories.js b/frontend/src/components/@common/MessageTextInput/MessageTextInput.stories.js
new file mode 100644
index 000000000..1e5c9a727
--- /dev/null
+++ b/frontend/src/components/@common/MessageTextInput/MessageTextInput.stories.js
@@ -0,0 +1,33 @@
+import React from "react";
+import MessageTextInput from "./MessageTextInput";
+
+export default {
+  title: "form/MessageTextInput",
+  component: MessageTextInput,
+};
+
+const Template = (args) => <MessageTextInput {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "이름",
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  label: "이름",
+  required: true,
+};
+
+export const WithDescription = Template.bind({});
+WithDescription.args = {
+  label: "이름",
+  description: "이름을 입력하세요.",
+};
+
+export const MaxLength = Template.bind({});
+MaxLength.args = {
+  label: "이름",
+  maxLength: 30,
+  value: "썬",
+};
diff --git a/frontend/src/components/@common/MessageTextarea/MessageTextarea.js b/frontend/src/components/@common/MessageTextarea/MessageTextarea.js
new file mode 100644
index 000000000..78080c430
--- /dev/null
+++ b/frontend/src/components/@common/MessageTextarea/MessageTextarea.js
@@ -0,0 +1,58 @@
+import PropTypes from "prop-types";
+import Label from "../Label/Label";
+import Description from "../Description/Description";
+import Textarea from "../Textarea/Textarea";
+import styles from "./MessageTextarea.module.css";
+
+const MessageTextarea = ({
+  label,
+  name,
+  value,
+  description,
+  handleChange,
+  maxLength,
+  required,
+  errorMessage,
+  ...props
+}) => {
+  return (
+    <>
+      <div className={styles["text-field"]}>
+        <Label required={required}>{label}</Label>
+        {description && <Description>{description}</Description>}
+        {maxLength && maxLength > 0 && (
+          <div className={styles["length-limit"]}>
+            {value?.length} / {maxLength}
+          </div>
+        )}
+        <Textarea
+          name={name}
+          required={required}
+          value={value}
+          onChange={handleChange}
+          maxLength={maxLength}
+          {...props}
+        />
+      </div>
+      <p className={styles["rule-field"]}>{errorMessage}</p>
+    </>
+  );
+};
+
+MessageTextarea.propTypes = {
+  label: PropTypes.string,
+  required: PropTypes.bool,
+  description: PropTypes.node,
+  maxLength: PropTypes.number,
+  initialValue: PropTypes.string,
+  name: PropTypes.string.isRequired,
+};
+
+MessageTextarea.defaultProps = {
+  label: "",
+  initialValue: "",
+  required: false,
+  description: "",
+};
+
+export default MessageTextarea;
diff --git a/frontend/src/components/@common/MessageTextarea/MessageTextarea.module.css b/frontend/src/components/@common/MessageTextarea/MessageTextarea.module.css
new file mode 100644
index 000000000..62ff83747
--- /dev/null
+++ b/frontend/src/components/@common/MessageTextarea/MessageTextarea.module.css
@@ -0,0 +1,19 @@
+.text-field {
+  display: flex;
+  flex-direction: column;
+  margin: 0.625rem;
+}
+
+.length-limit {
+  align-self: flex-end;
+  color: #999999;
+  font-size: 13px;
+}
+
+.rule-field {
+  margin-left: 8px;
+  margin-bottom: 10px;
+  height: 12px;
+  font-size: 12px;
+  color: #ff0000;
+}
diff --git a/frontend/src/components/form/TextField/TextField.stories.js b/frontend/src/components/@common/MessageTextarea/MessageTextarea.stories.js
similarity index 74%
rename from frontend/src/components/form/TextField/TextField.stories.js
rename to frontend/src/components/@common/MessageTextarea/MessageTextarea.stories.js
index 67016e20d..fb392570a 100644
--- a/frontend/src/components/form/TextField/TextField.stories.js
+++ b/frontend/src/components/@common/MessageTextarea/MessageTextarea.stories.js
@@ -1,12 +1,12 @@
 import React from "react";
-import TextField from "./TextField";
+import MessageTextarea from "./MessageTextarea";
 
 export default {
-  title: "form/TextField",
-  component: TextField,
+  title: "form/MessageTextarea",
+  component: MessageTextarea,
 };
 
-const Template = (args) => <TextField {...args} />;
+const Template = (args) => <MessageTextarea {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
diff --git a/frontend/src/components/form/Radio/Radio.js b/frontend/src/components/@common/Radio/Radio.js
similarity index 100%
rename from frontend/src/components/form/Radio/Radio.js
rename to frontend/src/components/@common/Radio/Radio.js
diff --git a/frontend/src/components/form/Radio/Radio.module.css b/frontend/src/components/@common/Radio/Radio.module.css
similarity index 95%
rename from frontend/src/components/form/Radio/Radio.module.css
rename to frontend/src/components/@common/Radio/Radio.module.css
index 6e1af0ef2..3c36b718e 100644
--- a/frontend/src/components/form/Radio/Radio.module.css
+++ b/frontend/src/components/@common/Radio/Radio.module.css
@@ -28,7 +28,7 @@ input[type="radio"]::before {
 }
 
 input[type="radio"]:checked::before {
-  background: #0078ff;
+  background: var(--black);
   border: 3px solid #d8e0ea;
   color: #fff;
 }
diff --git a/frontend/src/components/form/Radio/Radio.stories.js b/frontend/src/components/@common/Radio/Radio.stories.js
similarity index 100%
rename from frontend/src/components/form/Radio/Radio.stories.js
rename to frontend/src/components/@common/Radio/Radio.stories.js
diff --git a/frontend/src/components/form/TextInput/TextInput.js b/frontend/src/components/@common/TextInput/TextInput.js
similarity index 70%
rename from frontend/src/components/form/TextInput/TextInput.js
rename to frontend/src/components/@common/TextInput/TextInput.js
index fbac003d1..993aab7a2 100644
--- a/frontend/src/components/form/TextInput/TextInput.js
+++ b/frontend/src/components/@common/TextInput/TextInput.js
@@ -11,18 +11,6 @@ const TextInput = ({
   maxLength,
   ...props
 }) => {
-  if (type === "textarea") {
-    return (
-      <textarea
-        value={value}
-        maxLength={maxLength}
-        className={classNames(styles["text-input"], className)}
-        readOnly={readOnly}
-        {...props}
-      />
-    );
-  }
-
   return (
     <input
       type={type}
@@ -37,7 +25,7 @@ const TextInput = ({
 
 TextInput.propTypes = {
   className: PropTypes.string,
-  type: PropTypes.oneOf(["text", "email", "password", "textarea", "url"]),
+  type: PropTypes.oneOf(["text", "email", "password", "tel", "number", "url"]),
   readOnly: PropTypes.bool,
   value: PropTypes.string,
   maxLength: PropTypes.number,
diff --git a/frontend/src/components/@common/TextInput/TextInput.module.css b/frontend/src/components/@common/TextInput/TextInput.module.css
new file mode 100644
index 000000000..c5c9dced4
--- /dev/null
+++ b/frontend/src/components/@common/TextInput/TextInput.module.css
@@ -0,0 +1,17 @@
+.text-input {
+  padding: 12px;
+  border: 1px solid #ced6e0;
+  border-radius: 3px;
+  transition-duration: 0.5s;
+  line-height: 30px;
+  font-size: 16px;
+}
+
+.text-input:focus {
+  border: 1px solid #1e90ff;
+}
+
+.text-input:read-only {
+  cursor: default;
+  background: #ccc;
+}
diff --git a/frontend/src/components/form/TextInput/TextInput.stories.js b/frontend/src/components/@common/TextInput/TextInput.stories.js
similarity index 100%
rename from frontend/src/components/form/TextInput/TextInput.stories.js
rename to frontend/src/components/@common/TextInput/TextInput.stories.js
diff --git a/frontend/src/components/@common/Textarea/Textarea.js b/frontend/src/components/@common/Textarea/Textarea.js
new file mode 100644
index 000000000..874fa03d3
--- /dev/null
+++ b/frontend/src/components/@common/Textarea/Textarea.js
@@ -0,0 +1,39 @@
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import styles from "./Textarea.module.css";
+
+const Textarea = ({
+  className,
+  readOnly,
+  value,
+  maxLength,
+  onChange,
+  ...props
+}) => {
+  return (
+    <textarea
+      value={value}
+      onChange={onChange}
+      maxLength={maxLength}
+      className={classNames(styles["text-input"], className)}
+      readOnly={readOnly}
+      {...props}
+    />
+  );
+};
+
+Textarea.propTypes = {
+  className: PropTypes.string,
+  readOnly: PropTypes.bool,
+  value: PropTypes.string,
+  maxLength: PropTypes.number,
+};
+
+Textarea.defaultProps = {
+  className: "",
+  readOnly: false,
+  value: "",
+};
+
+export default Textarea;
diff --git a/frontend/src/components/@common/Textarea/Textarea.module.css b/frontend/src/components/@common/Textarea/Textarea.module.css
new file mode 100644
index 000000000..bd50eb64a
--- /dev/null
+++ b/frontend/src/components/@common/Textarea/Textarea.module.css
@@ -0,0 +1,17 @@
+@media screen and (min-width: 513px) {
+  textarea {
+    min-height: 200px !important;
+  }
+}
+
+.text-input {
+  padding: 12px;
+  border: 1px solid #ced6e0;
+  border-radius: 3px;
+  transition-duration: 0.5s;
+  line-height: 30px;
+  font-size: 16px;
+  min-width: 100%;
+  max-width: 100%;
+  min-height: 100px;
+}
diff --git a/frontend/src/components/@common/Textarea/Textarea.stories.js b/frontend/src/components/@common/Textarea/Textarea.stories.js
new file mode 100644
index 000000000..097b28e6b
--- /dev/null
+++ b/frontend/src/components/@common/Textarea/Textarea.stories.js
@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import Textarea from "./Textarea";
+
+export default {
+  title: "form/Textarea",
+  component: Textarea,
+};
+
+const Template = (args) => {
+  const [value, setValue] = useState("");
+
+  return (
+    <Textarea
+      value={value}
+      onChange={({ target }) => setValue(target.value)}
+      {...args}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  maxLength: 100,
+};
+
+export const ReadOnly = Template.bind({});
+
+ReadOnly.args = {
+  maxLength: 100,
+  readOnly: true,
+  value: "읽기전용 입력창입니다.",
+};
diff --git a/frontend/src/components/BaseItem/BaseItem.js b/frontend/src/components/BaseItem/BaseItem.js
deleted file mode 100644
index 5cfc7a426..000000000
--- a/frontend/src/components/BaseItem/BaseItem.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { useMemo } from "react";
-import PropTypes from "prop-types";
-
-import { formatDateTime } from "../../utils/format/date";
-
-import styles from "./BaseItem.module.css";
-
-const BaseItem = ({ title, startDateTime, endDateTime }) => {
-  const formattedStartDateTime = useMemo(
-    () => (startDateTime ? formatDateTime(new Date(startDateTime)) : ""),
-    [startDateTime]
-  );
-
-  const formattedEndDateTime = useMemo(
-    () => (endDateTime ? formatDateTime(new Date(endDateTime)) : ""),
-    [endDateTime]
-  );
-
-  return (
-    <div className={styles["base-item"]}>
-      <div className={styles.title}>{title}</div>
-      <div className={styles.period}>
-        <div className={styles.date}>
-          <span className={styles.start}>{formattedStartDateTime}</span>
-          <span className={styles.between}></span>
-          <span>{formattedEndDateTime}</span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default BaseItem;
-
-BaseItem.propTypes = {
-  title: PropTypes.string.isRequired,
-  startDateTime: PropTypes.string.isRequired,
-  endDateTime: PropTypes.string.isRequired,
-};
diff --git a/frontend/src/components/CommonItem/CommonItem.js b/frontend/src/components/CommonItem/CommonItem.js
deleted file mode 100644
index 028576355..000000000
--- a/frontend/src/components/CommonItem/CommonItem.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { useMemo } from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-
-import { formatDateTime } from "../../utils/format/date";
-
-import BaseItem from "../BaseItem/BaseItem";
-import { Button } from "../form";
-
-import styles from "./CommonItem.module.css";
-
-const CommonItem = ({
-  buttonLabel,
-  activeButton,
-  recruitment,
-  goPage,
-  className,
-}) => {
-  const formattedStartDateTime = useMemo(
-    () =>
-      recruitment.startDateTime
-        ? formatDateTime(new Date(recruitment.startDateTime))
-        : "",
-    [recruitment.startDateTime]
-  );
-
-  const formattedEndDateTime = useMemo(
-    () =>
-      recruitment.endDateTime
-        ? formatDateTime(new Date(recruitment.endDateTime))
-        : "",
-    [recruitment.endDateTime]
-  );
-
-  return (
-    <div className={classNames(styles["common-item"], className)}>
-      <BaseItem
-        title={recruitment.title}
-        startDateTime={formattedStartDateTime}
-        endDateTime={formattedEndDateTime}
-      />
-      <Button className="button" disabled={!activeButton} onClick={goPage}>
-        {buttonLabel}
-      </Button>
-    </div>
-  );
-};
-
-export default CommonItem;
-
-CommonItem.propTypes = {
-  buttonLabel: PropTypes.string.isRequired,
-  activeButton: PropTypes.bool.isRequired,
-  goPage: PropTypes.func.isRequired,
-  recruitment: PropTypes.object.isRequired,
-  className: PropTypes.string,
-};
diff --git a/frontend/src/components/RecruitmentItem/RecruitmentItem.js b/frontend/src/components/RecruitmentItem/RecruitmentItem.js
index 49513f460..be50b20ad 100644
--- a/frontend/src/components/RecruitmentItem/RecruitmentItem.js
+++ b/frontend/src/components/RecruitmentItem/RecruitmentItem.js
@@ -4,11 +4,10 @@ import classNames from "classnames";
 
 import CalendarIcon from "../../assets/icon/calendar-icon.svg";
 
-import { Button } from "../form";
-
 import { formatDateTime } from "../../utils/format/date";
 
 import styles from "./RecruitmentItem.module.css";
+import Button from "../@common/Button/Button";
 
 const RecruitmentItem = ({
   recruitment,
diff --git a/frontend/src/components/form/BirthField/BirthField.js b/frontend/src/components/form/BirthField/BirthField.js
index b98a7fa09..29605ff77 100644
--- a/frontend/src/components/form/BirthField/BirthField.js
+++ b/frontend/src/components/form/BirthField/BirthField.js
@@ -1,11 +1,9 @@
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
 
-import Field from "../Field/Field";
-import Label from "../Label/Label";
-import TextInput from "../TextInput/TextInput";
+import Label from "../../@common/Label/Label";
+import TextInput from "../../@common/TextInput/TextInput";
 import useFormContext from "../../../hooks/useFormContext";
-
 import styles from "./BirthField.module.css";
 
 const currentYear = new Date().getFullYear();
@@ -40,14 +38,14 @@ const BirthField = ({ required }) => {
 
   return (
     <>
-      <Field className={styles["birth-field"]}>
+      <div className={styles.container}>
         <Label for="year" required={required}>
           생년월일
         </Label>
         <div className={styles.birth}>
           <TextInput
             className={styles.year}
-            type="number"
+            type="text"
             id="year"
             name="year"
             list="years"
@@ -67,7 +65,7 @@ const BirthField = ({ required }) => {
             className={styles.month}
             name="month"
             list="months"
-            type="number"
+            type="text"
             placeholder="MM"
             min="1"
             max="12"
@@ -84,7 +82,7 @@ const BirthField = ({ required }) => {
             className={styles.day}
             name="day"
             list="days"
-            type="number"
+            type="text"
             min="1"
             max="31"
             placeholder="DD"
@@ -98,7 +96,7 @@ const BirthField = ({ required }) => {
             ))}
           </datalist>
         </div>
-      </Field>
+      </div>
 
       <p className={styles["rule-field"]}>
         {errorMessage.year || errorMessage.month || errorMessage.day}
diff --git a/frontend/src/components/form/BirthField/BirthField.module.css b/frontend/src/components/form/BirthField/BirthField.module.css
index 2af905c1d..6d347d2cc 100644
--- a/frontend/src/components/form/BirthField/BirthField.module.css
+++ b/frontend/src/components/form/BirthField/BirthField.module.css
@@ -1,3 +1,9 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  margin: 0.625rem;
+}
+
 .birth {
   display: flex;
   align-items: center;
diff --git a/frontend/src/components/form/CheckBox/CheckBox.js b/frontend/src/components/form/CheckBox/CheckBox.js
index f1c2faf8f..90d8e187f 100644
--- a/frontend/src/components/form/CheckBox/CheckBox.js
+++ b/frontend/src/components/form/CheckBox/CheckBox.js
@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import PropTypes from "prop-types";
-import Label from "../Label/Label";
+import Label from "../../@common/Label/Label";
 import styles from "./CheckBox.module.css";
 import useFormContext from "../../../hooks/useFormContext";
 
diff --git a/frontend/src/components/form/Field/Field.js b/frontend/src/components/form/Field/Field.js
deleted file mode 100644
index e731d4c19..000000000
--- a/frontend/src/components/form/Field/Field.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import classNames from "classnames";
-import styles from "./Field.module.css";
-
-const Field = ({ children, className }) => {
-  return <div className={classNames(styles.field, className)}>{children}</div>;
-};
-
-Field.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
-
-Field.defaultProps = {
-  className: "",
-};
-
-export default Field;
diff --git a/frontend/src/components/form/Field/Field.module.css b/frontend/src/components/form/Field/Field.module.css
deleted file mode 100644
index d15ce933f..000000000
--- a/frontend/src/components/form/Field/Field.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.field {
-  display: flex;
-  flex-direction: column;
-  margin: 10px 0;
-}
diff --git a/frontend/src/components/form/Field/Field.stories.js b/frontend/src/components/form/Field/Field.stories.js
deleted file mode 100644
index d9c40ddc7..000000000
--- a/frontend/src/components/form/Field/Field.stories.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-import Field from "./Field";
-
-export default {
-  title: "form/Field",
-  component: Field,
-};
-
-const Template = (args) => <Field {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  children: "Filed의 내용",
-};
diff --git a/frontend/src/components/form/FormInput/FormInput.js b/frontend/src/components/form/FormInput/FormInput.js
new file mode 100644
index 000000000..163a1c464
--- /dev/null
+++ b/frontend/src/components/form/FormInput/FormInput.js
@@ -0,0 +1,59 @@
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+import useFormContext from "../../../hooks/useFormContext";
+import MessageTextInput from "../../@common/MessageTextInput/MessageTextInput";
+
+const FormInput = ({
+  label,
+  description,
+  initialValue,
+  name,
+  maxLength,
+  required,
+  ...props
+}) => {
+  const { value, errorMessage, handleChange, register, unRegister } =
+    useFormContext();
+
+  useEffect(() => {
+    register(name, initialValue);
+
+    return () => {
+      unRegister(name);
+    };
+  }, [name, initialValue]);
+
+  return (
+    <MessageTextInput
+      value={value[name]}
+      onChange={handleChange}
+      errorMessage={errorMessage[name]}
+      label={label}
+      description={description}
+      initialValue={initialValue}
+      name={name}
+      maxLength={maxLength}
+      required={required}
+      {...props}
+    />
+  );
+};
+
+FormInput.propTypes = {
+  label: PropTypes.string,
+  initialValue: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  required: PropTypes.bool,
+  description: PropTypes.node,
+  maxLength: PropTypes.number,
+  errorMessage: PropTypes.string,
+};
+
+FormInput.defaultProps = {
+  label: "",
+  initialValue: "",
+  required: false,
+  description: "",
+};
+
+export default FormInput;
diff --git a/frontend/src/components/form/FormTextarea/FormTextarea.js b/frontend/src/components/form/FormTextarea/FormTextarea.js
new file mode 100644
index 000000000..c45c3c0e9
--- /dev/null
+++ b/frontend/src/components/form/FormTextarea/FormTextarea.js
@@ -0,0 +1,58 @@
+import React, { useEffect } from "react";
+import PropTypes from "prop-types";
+
+import useFormContext from "../../../hooks/useFormContext";
+import MessageTextarea from "../../@common/MessageTextarea/MessageTextarea";
+
+const FormTextarea = ({
+  label,
+  name,
+  initialValue,
+  description,
+  maxLength,
+  required,
+  ...props
+}) => {
+  const { value, errorMessage, handleChange, register, unRegister } =
+    useFormContext();
+
+  useEffect(() => {
+    register(name, initialValue);
+
+    return () => {
+      unRegister(name);
+    };
+  }, [name, initialValue]);
+
+  return (
+    <MessageTextarea
+      name={name}
+      label={label}
+      value={value[name]}
+      onChange={handleChange}
+      errorMessage={errorMessage[name]}
+      description={description}
+      maxLength={maxLength}
+      required={required}
+      {...props}
+    />
+  );
+};
+
+FormTextarea.propTypes = {
+  label: PropTypes.string,
+  required: PropTypes.bool,
+  description: PropTypes.node,
+  maxLength: PropTypes.number,
+  initialValue: PropTypes.string,
+  name: PropTypes.string.isRequired,
+};
+
+FormTextarea.defaultProps = {
+  label: "",
+  initialValue: "",
+  required: false,
+  description: "",
+};
+
+export default FormTextarea;
diff --git a/frontend/src/components/form/GenderField/GenderField.js b/frontend/src/components/form/GenderField/GenderField.js
index a3faa1be8..3f95192ff 100644
--- a/frontend/src/components/form/GenderField/GenderField.js
+++ b/frontend/src/components/form/GenderField/GenderField.js
@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
-import Field from "../Field/Field";
-import Label from "../Label/Label";
-import Radio from "../Radio/Radio";
+import Label from "../../@common/Label/Label";
+import Radio from "../../@common/Radio/Radio";
 import styles from "./GenderField.module.css";
 import useFormContext from "../../../hooks/useFormContext";
 
@@ -17,7 +16,7 @@ const GenderField = () => {
   }, []);
 
   return (
-    <Field className={styles["gender-field"]}>
+    <div className={styles["gender-field"]}>
       <Label required>성별</Label>
       <div className={styles["gender-group"]}>
         <Radio
@@ -35,7 +34,7 @@ const GenderField = () => {
           required
         />
       </div>
-    </Field>
+    </div>
   );
 };
 
diff --git a/frontend/src/provider/FormProvider/ResetButton.js b/frontend/src/components/form/ResetButton.js
similarity index 89%
rename from frontend/src/provider/FormProvider/ResetButton.js
rename to frontend/src/components/form/ResetButton.js
index 001fc5ef4..b3082f3c2 100644
--- a/frontend/src/provider/FormProvider/ResetButton.js
+++ b/frontend/src/components/form/ResetButton.js
@@ -1,6 +1,6 @@
-import { Button } from "../../components/form";
 import useFormContext from "../../hooks/useFormContext";
 import { CONFIRM_MESSAGE } from "../../constants/messages";
+import Button from "../@common/Button/Button";
 
 const ResetButton = () => {
   const { reset } = useFormContext();
diff --git a/frontend/src/provider/FormProvider/SubmitButton.js b/frontend/src/components/form/SubmitButton.js
similarity index 53%
rename from frontend/src/provider/FormProvider/SubmitButton.js
rename to frontend/src/components/form/SubmitButton.js
index dd0403a88..2483dbd35 100644
--- a/frontend/src/provider/FormProvider/SubmitButton.js
+++ b/frontend/src/components/form/SubmitButton.js
@@ -1,14 +1,11 @@
-import { Button } from "../../components/form";
+import { useEffect } from "react";
 import useFormContext from "../../hooks/useFormContext";
+import Button from "../@common/Button/Button";
 
 const SubmitButton = () => {
   const { isValid, isEmpty } = useFormContext();
 
-  return (
-    <Button type="submit" disabled={!isValid || isEmpty}>
-      제출
-    </Button>
-  );
+  return <Button disabled={!isValid || isEmpty}>제출</Button>;
 };
 
 export default SubmitButton;
diff --git a/frontend/src/components/form/SummaryCheckField/SummaryCheckField.js b/frontend/src/components/form/SummaryCheckField/SummaryCheckField.js
index 0caf0e730..214167782 100644
--- a/frontend/src/components/form/SummaryCheckField/SummaryCheckField.js
+++ b/frontend/src/components/form/SummaryCheckField/SummaryCheckField.js
@@ -1,17 +1,16 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Field from "../Field/Field";
 import CheckBox from "../CheckBox/CheckBox";
 import styles from "./SummaryCheckField.module.css";
 
 const SummaryCheckField = ({ children, label, required, ...props }) => {
   return (
-    <Field>
+    <div className={styles.container}>
       <CheckBox label={label} required={required} {...props} />
       <div className={styles.summary}>
         <div className={styles.text}>{children}</div>
       </div>
-    </Field>
+    </div>
   );
 };
 
diff --git a/frontend/src/components/form/SummaryCheckField/SummaryCheckField.module.css b/frontend/src/components/form/SummaryCheckField/SummaryCheckField.module.css
index 7c2372764..5fb834af0 100644
--- a/frontend/src/components/form/SummaryCheckField/SummaryCheckField.module.css
+++ b/frontend/src/components/form/SummaryCheckField/SummaryCheckField.module.css
@@ -1,3 +1,9 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  margin: 0.625rem;
+}
+
 .summary {
   overflow-y: auto;
   background: #fff;
diff --git a/frontend/src/components/form/TempSaveButton.js b/frontend/src/components/form/TempSaveButton.js
new file mode 100644
index 000000000..e207fa5e1
--- /dev/null
+++ b/frontend/src/components/form/TempSaveButton.js
@@ -0,0 +1,17 @@
+import { generatePath, useHistory } from "react-router";
+
+import { SUCCESS_MESSAGE } from "../../constants/messages";
+import PATH, { PARAM } from "../../constants/path";
+import useFormContext from "../../hooks/useFormContext";
+import { generateQuery } from "../../utils/route/query";
+import Button from "../@common/Button/Button";
+
+const TempSaveButton = ({ onSaveTemp }) => {
+  return (
+    <Button type="button" onClick={onSaveTemp}>
+      임시 저장
+    </Button>
+  );
+};
+
+export default TempSaveButton;
diff --git a/frontend/src/components/form/TextField/TextField.js b/frontend/src/components/form/TextField/TextField.js
deleted file mode 100644
index b5d97ff7d..000000000
--- a/frontend/src/components/form/TextField/TextField.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import Field from "../Field/Field";
-import Label from "../Label/Label";
-import Description from "../Description/Description";
-import TextInput from "../TextInput/TextInput";
-import styles from "./TextField.module.css";
-
-const TextField = ({
-  required,
-  label,
-  value,
-  description,
-  maxLength,
-  errorMessage,
-  ...props
-}) => {
-  return (
-    <>
-      <Field className={styles["text-field"]}>
-        <label className={styles["text-field"]}>
-          <div>
-            <Label required={required}>{label}</Label>
-          </div>
-          {description && <Description>{description}</Description>}
-          {maxLength && maxLength > 0 && (
-            <div className={styles["length-limit"]}>
-              {value.length} / {maxLength}
-            </div>
-          )}
-          <TextInput
-            required={required}
-            value={value}
-            maxLength={maxLength}
-            {...props}
-          />
-        </label>
-      </Field>
-      <p className={styles["rule-field"]}>{errorMessage}</p>
-    </>
-  );
-};
-
-TextField.propTypes = {
-  label: PropTypes.string,
-  value: PropTypes.string,
-  required: PropTypes.bool,
-  description: PropTypes.node,
-  maxLength: PropTypes.number,
-  errorMessage: PropTypes.string,
-};
-
-TextField.defaultProps = {
-  label: "",
-  value: "",
-  required: false,
-  description: "",
-  maxLength: undefined,
-};
-
-export default TextField;
diff --git a/frontend/src/components/form/TextInput/TextInput.module.css b/frontend/src/components/form/TextInput/TextInput.module.css
deleted file mode 100644
index 5bfa6a6cb..000000000
--- a/frontend/src/components/form/TextInput/TextInput.module.css
+++ /dev/null
@@ -1,46 +0,0 @@
-input[type="text"],
-input[type="email"],
-input[type="url"],
-input[type="password"],
-input[type="number"],
-textarea {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: none;
-}
-
-@media screen and (min-width: 513px) {
-  textarea {
-    min-height: 200px !important;
-  }
-}
-
-.text-input {
-  padding: 12px;
-  border: 1px solid #ced6e0;
-  border-radius: 3px;
-  transition-duration: 0.5s;
-  line-height: 30px;
-  font-size: 16px;
-}
-
-textarea.text-input {
-  min-width: 100%;
-  max-width: 100%;
-  min-height: 100px;
-}
-
-.text-input:focus {
-  border: 1px solid #1e90ff;
-}
-
-.text-input:read-only {
-  cursor: default;
-  background: #ccc;
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-}
diff --git a/frontend/src/components/form/index.js b/frontend/src/components/form/index.js
deleted file mode 100644
index e20718731..000000000
--- a/frontend/src/components/form/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export { default as Field } from "./Field/Field";
-export { default as Form } from "./Form/Form";
-export { default as Label } from "./Label/Label";
-export { default as Radio } from "./Radio/Radio";
-export { default as CheckBox } from "./CheckBox/CheckBox";
-export { default as Button } from "./Button/Button";
-export { default as Description } from "./Description/Description";
-export { default as TextInput } from "./TextInput/TextInput";
-export { default as TextField } from "./TextField/TextField";
-export { default as SummaryCheckField } from "./SummaryCheckField/SummaryCheckField";
-export { default as GenderField } from "./GenderField/GenderField";
-export { default as BirthField } from "./BirthField/BirthField";
diff --git a/frontend/src/pages/ApplicantRegister/ApplicantRegister.js b/frontend/src/pages/ApplicantRegister/ApplicantRegister.js
index deb9350f8..8b15d86c0 100644
--- a/frontend/src/pages/ApplicantRegister/ApplicantRegister.js
+++ b/frontend/src/pages/ApplicantRegister/ApplicantRegister.js
@@ -1,25 +1,12 @@
 import React from "react";
 import { useHistory, useLocation, generatePath } from "react-router-dom";
 
-import {
-  BirthField,
-  Button,
-  Form,
-  GenderField,
-  SummaryCheckField,
-} from "../../components/form";
-import RecruitmentItem from "../../components/RecruitmentItem/RecruitmentItem";
-import Container, {
-  CONTAINER_SIZE,
-} from "../../components/Container/Container";
-
+import { ERROR_MESSAGE } from "../../constants/messages";
+import PATH, { PARAM } from "../../constants/path";
+import { POLICY_SUMMARY } from "../../constants/policySummary";
 import useForm from "../../hooks/useForm";
 import useRecruitmentContext from "../../hooks/useRecruitmentContext";
 import useTokenContext from "../../hooks/useTokenContext";
-import FormProvider from "../../provider/FormProvider/FormProvider";
-import InputField from "../../provider/FormProvider/InputField";
-import SubmitButton from "../../provider/FormProvider/SubmitButton";
-import useApplicantRegisterForm from "../../hooks/useApplicantRegisterForm";
 import {
   validateDay,
   validateMonth,
@@ -32,12 +19,22 @@ import {
   validateRePassword,
 } from "../../utils/validation/password";
 import { generateQuery } from "../../utils/route/query";
-import { formatBirthday } from "../../utils/format/date";
-import { ERROR_MESSAGE } from "../../constants/messages";
-import PATH, { PARAM } from "../../constants/path";
-import { POLICY_SUMMARY } from "../../constants/policySummary";
-
+import Form from "../../components/form/Form/Form";
+import BirthField from "../../components/form/BirthField/BirthField";
+import GenderField from "../../components/form/GenderField/GenderField";
+import Button from "../../components/@common/Button/Button";
+import SummaryCheckField from "../../components/form/SummaryCheckField/SummaryCheckField";
+import FormInput from "../../components/form/FormInput/FormInput";
+import FormProvider from "../../provider/FormProvider";
+import SubmitButton from "../../components/form/SubmitButton";
+import RecruitmentItem from "../../components/RecruitmentItem/RecruitmentItem";
+import useApplicantRegisterForm from "../../hooks/useApplicantRegisterForm";
+import Container, {
+  CONTAINER_SIZE,
+} from "../../components/@common/Container/Container";
 import styles from "./ApplicantRegister.module.css";
+import { formatBirthday } from "../../utils/format/date";
+import MessageTextInput from "../../components/@common/MessageTextInput/MessageTextInput";
 
 const ApplicantRegister = () => {
   const location = useLocation();
@@ -107,7 +104,6 @@ const ApplicantRegister = () => {
       <Container title="회원가입" size={CONTAINER_SIZE.NARROW}>
         <FormProvider {...methods}>
           <Form onSubmit={handleSubmit}>
-            <h2>지원자 정보</h2>
             <div>
               <SummaryCheckField
                 name="policy"
@@ -118,7 +114,7 @@ const ApplicantRegister = () => {
               </SummaryCheckField>
             </div>
             <div>
-              <InputField
+              <FormInput
                 name="name"
                 type="text"
                 label="이름"
@@ -127,7 +123,7 @@ const ApplicantRegister = () => {
               />
             </div>
             <div>
-              <InputField
+              <MessageTextInput
                 name="phoneNumber"
                 type="tel"
                 label="전화번호"
@@ -138,7 +134,7 @@ const ApplicantRegister = () => {
               />
             </div>
             <div>
-              <InputField
+              <FormInput
                 name="email"
                 type="email"
                 label="이메일"
@@ -147,7 +143,7 @@ const ApplicantRegister = () => {
               />
             </div>
             <div>
-              <InputField
+              <FormInput
                 name="password"
                 type="password"
                 label="비밀번호"
@@ -156,7 +152,7 @@ const ApplicantRegister = () => {
               />
             </div>
             <div>
-              <InputField
+              <FormInput
                 name="rePassword"
                 type="password"
                 label="비밀번호 확인"
@@ -165,7 +161,7 @@ const ApplicantRegister = () => {
               />
             </div>
             <div>
-              <BirthField />
+              <BirthField required />
             </div>
             <div>
               <GenderField />
diff --git a/frontend/src/pages/ApplicationRegister/ApplicationRegister.js b/frontend/src/pages/ApplicationRegister/ApplicationRegister.js
index fdf6e923b..39b2059f4 100644
--- a/frontend/src/pages/ApplicationRegister/ApplicationRegister.js
+++ b/frontend/src/pages/ApplicationRegister/ApplicationRegister.js
@@ -5,38 +5,39 @@ import {
   useParams,
   generatePath,
 } from "react-router-dom";
-
-import Container from "../../components/Container/Container";
-import {
-  Button,
-  CheckBox,
-  Description,
-  Field,
-  Form,
-  Label,
-} from "../../components/form";
-import RecruitmentItem from "../../components/RecruitmentItem/RecruitmentItem";
-
 import * as Api from "../../api";
-import useForm from "../../hooks/useForm";
-import useFormContext from "../../hooks/useFormContext";
-import useRecruitmentContext from "../../hooks/useRecruitmentContext";
-import useTokenContext from "../../hooks/useTokenContext";
-import FormProvider from "../../provider/FormProvider/FormProvider";
-import InputField from "../../provider/FormProvider/InputField";
-import ResetButton from "../../provider/FormProvider/ResetButton";
-import SubmitButton from "../../provider/FormProvider/SubmitButton";
-import { formatDateTime } from "../../utils/format/date";
-import { generateQuery, parseQuery } from "../../utils/route/query";
-import { validateURL } from "../../utils/validation/url";
+
 import {
   CONFIRM_MESSAGE,
   ERROR_MESSAGE,
   SUCCESS_MESSAGE,
 } from "../../constants/messages";
 import PATH, { PARAM } from "../../constants/path";
+import useForm from "../../hooks/useForm";
+import useRecruitmentContext from "../../hooks/useRecruitmentContext";
+import useTokenContext from "../../hooks/useTokenContext";
+import FormProvider from "../../provider/FormProvider";
+import { generateQuery, parseQuery } from "../../utils/route/query";
+import { validateURL } from "../../utils/validation/url";
 
 import styles from "./ApplicationRegister.module.css";
+import Label from "../../components/@common/Label/Label";
+import Description from "../../components/@common/Description/Description";
+import CheckBox from "../../components/form/CheckBox/CheckBox";
+import Form from "../../components/form/Form/Form";
+import FormInput from "../../components/form/FormInput/FormInput";
+import FormTextarea from "../../components/form/FormTextarea/FormTextarea";
+import ResetButton from "../../components/form/ResetButton";
+import SubmitButton from "../../components/form/SubmitButton";
+import TempSaveButton from "../../components/form/TempSaveButton";
+import RecruitmentItem from "../../components/RecruitmentItem/RecruitmentItem";
+import Container from "../../components/@common/Container/Container";
+import { formatDateTime } from "../../utils/format/date";
+
+const pathToEdit = (recruitmentId) =>
+  generatePath(PATH.APPLICATION_FORM, {
+    status: PARAM.APPLICATION_FORM_STATUS.EDIT,
+  }) + generateQuery({ recruitmentId });
 
 const ApplicationRegister = () => {
   const history = useHistory();
@@ -45,6 +46,7 @@ const ApplicationRegister = () => {
   const { status } = useParams();
 
   const { recruitmentId } = parseQuery(location.search);
+
   const { recruitment } = useRecruitmentContext();
   const currentRecruitment = recruitment.findById(Number(recruitmentId));
 
@@ -129,7 +131,7 @@ const ApplicationRegister = () => {
     }
   };
 
-  const { handleSubmit, ...methods } = useForm({
+  const { value, handleSubmit, ...methods } = useForm({
     validators: { url: validateURL },
     submit,
   });
@@ -173,34 +175,24 @@ const ApplicationRegister = () => {
     fetchRecruitmentItems,
   ]);
 
-  const SaveButton = () => {
-    const history = useHistory();
-    const { value } = useFormContext();
+  const answers = recruitmentItems.map((item, index) => ({
+    contents: value[`recruitment-item-${index}`],
+    recruitmentItemId: item.id,
+  }));
 
-    const answers = recruitmentItems.map((item, index) => ({
-      contents: value[`recruitment-item-${index}`],
-      recruitmentItemId: item.id,
-    }));
+  const onSaveTemp = async () => {
+    try {
+      await save(answers, value.url, false);
 
-    const onSaveTemp = async () => {
-      try {
-        await save(answers, value.url, false);
-        alert(SUCCESS_MESSAGE.API.SAVE_APPLICATION);
-
-        if (status !== PARAM.APPLICATION_FORM_STATUS.EDIT) {
-          history.replace(
-            `${generatePath(PATH.APPLICATION_FORM, {
-              status: PARAM.APPLICATION_FORM_STATUS.EDIT,
-            })}${generateQuery({ recruitmentId })}`
-          );
-        }
-      } catch (e) {
-        alert(e.response.data.message);
-        history.replace(PATH.HOME);
-      }
-    };
+      alert(SUCCESS_MESSAGE.API.SAVE_APPLICATION);
 
-    return <Button onClick={onSaveTemp}>임시 저장</Button>;
+      if (status !== PARAM.APPLICATION_FORM_STATUS.EDIT) {
+        history.replace(pathToEdit(recruitmentId));
+      }
+    } catch (e) {
+      alert(e.response.data.message);
+      history.replace(PATH.HOME);
+    }
   };
 
   return (
@@ -210,7 +202,7 @@ const ApplicationRegister = () => {
       )}
 
       <Container title="지원서 작성">
-        <FormProvider {...methods}>
+        <FormProvider value={value} {...methods}>
           <Form onSubmit={handleSubmit}>
             {status === PARAM.APPLICATION_FORM_STATUS.EDIT && (
               <p className={styles["autosave-indicator"]}>
@@ -219,20 +211,19 @@ const ApplicationRegister = () => {
             )}
             {recruitmentItems.length !== 0 &&
               recruitmentItems.map((item, index) => (
-                <div key={item.id}>
-                  <InputField
-                    name={`recruitment-item-${index}`}
-                    type="textarea"
-                    initialValue={initialFormData[`recruitment-item-${index}`]}
-                    label={`${index + 1}. ${item.title}`}
-                    description={item.description}
-                    placeholder="내용을 입력해 주세요."
-                    maxLength={item.maximumLength}
-                    required
-                  />
-                </div>
+                <FormTextarea
+                  key={`recruitment-item-${index}`}
+                  name={`recruitment-item-${index}`}
+                  initialValue={initialFormData[`recruitment-item-${index}`]}
+                  label={`${index + 1}. ${item.title}`}
+                  description={item.description}
+                  placeholder="내용을 입력해 주세요."
+                  maxLength={item.maximumLength}
+                  required
+                />
               ))}
-            <InputField
+
+            <FormInput
               name="url"
               type="url"
               initialValue={initialFormData.referenceUrl}
@@ -249,18 +240,18 @@ const ApplicationRegister = () => {
               label="URL"
               placeholder="ex) https://tecoble.techcourse.co.kr/"
             />
-            <Field>
+            <div>
               <Label required>지원서 작성 내용 사실 확인</Label>
               <Description>
                 기재한 사실 중 허위사실이 발견되는 즉시, 교육 대상자에서
                 제외되며 향후 지원도 불가능합니다.
               </Description>
               <CheckBox name="agree" label="동의합니다." />
-            </Field>
+            </div>
 
             <div className={styles.buttons}>
               <ResetButton />
-              <SaveButton />
+              <TempSaveButton onSaveTemp={onSaveTemp} />
               <SubmitButton />
             </div>
           </Form>
diff --git a/frontend/src/pages/Login/Login.js b/frontend/src/pages/Login/Login.js
index 77ce5e685..52666d660 100644
--- a/frontend/src/pages/Login/Login.js
+++ b/frontend/src/pages/Login/Login.js
@@ -3,21 +3,21 @@ import { Link, useHistory } from "react-router-dom";
 
 import Container, {
   CONTAINER_SIZE,
-} from "../../components/Container/Container";
-import { Form } from "../../components/form";
-import Button from "../../components/form/Button/Button";
+} from "../../components/@common/Container/Container";
 
 import useForm from "../../hooks/useForm";
 import useTokenContext from "../../hooks/useTokenContext";
-import FormProvider from "../../provider/FormProvider/FormProvider";
-import InputField from "../../provider/FormProvider/InputField";
-import SubmitButton from "../../provider/FormProvider/SubmitButton";
+import FormProvider from "../../provider/FormProvider";
 import { validateEmail } from "../../utils/validation/email";
 import { validatePassword } from "../../utils/validation/password";
 import { SUCCESS_MESSAGE } from "../../constants/messages";
 import PATH from "../../constants/path";
 
 import styles from "./Login.module.css";
+import Form from "../../components/form/Form/Form";
+import Button from "../../components/@common/Button/Button";
+import FormInput from "../../components/form/FormInput/FormInput";
+import SubmitButton from "../../components/form/SubmitButton";
 
 const Login = () => {
   const { fetchLogin } = useTokenContext();
@@ -50,15 +50,22 @@ const Login = () => {
   return (
     <Container size={CONTAINER_SIZE.NARROW} title="로그인">
       <FormProvider {...methods}>
-        <Form onSubmit={handleSubmit}>
-          <InputField
+        <Form
+          onSubmit={handleSubmit}
+          footer={
+            <Link to="/find" className={styles["find-password"]}>
+              비밀번호 찾기
+            </Link>
+          }
+        >
+          <FormInput
             name="email"
             type="email"
             label="이메일"
             placeholder="이메일 주소를 입력해 주세요."
             required
           />
-          <InputField
+          <FormInput
             name="password"
             type="password"
             label="비밀번호"
@@ -66,7 +73,7 @@ const Login = () => {
             required
           />
           <div className={styles.buttons}>
-            <Button cancel onClick={() => history.goBack()}>
+            <Button type="button" cancel onClick={() => history.goBack()}>
               이전
             </Button>
             <SubmitButton>확인</SubmitButton>
diff --git a/frontend/src/pages/PasswordEdit/PasswordEdit.js b/frontend/src/pages/PasswordEdit/PasswordEdit.js
index ac200f9c3..55253e71b 100644
--- a/frontend/src/pages/PasswordEdit/PasswordEdit.js
+++ b/frontend/src/pages/PasswordEdit/PasswordEdit.js
@@ -1,26 +1,26 @@
 import { useHistory } from "react-router-dom";
 
 import { fetchPasswordEdit } from "../../api/applicants";
+import { SUCCESS_MESSAGE } from "../../constants/messages";
+import PATH from "../../constants/path";
 
 import Container, {
   CONTAINER_SIZE,
-} from "../../components/Container/Container";
-import { Form } from "../../components/form";
-import Button from "../../components/form/Button/Button";
+} from "../../components/@common/Container/Container";
 
 import useForm from "../../hooks/useForm";
 import useTokenContext from "../../hooks/useTokenContext";
-import FormProvider from "../../provider/FormProvider/FormProvider";
-import InputField from "../../provider/FormProvider/InputField";
-import SubmitButton from "../../provider/FormProvider/SubmitButton";
+import FormProvider from "../../provider/FormProvider";
 import {
   validatePassword,
   validateRePassword,
 } from "../../utils/validation/password";
-import PATH from "../../constants/path";
-import { SUCCESS_MESSAGE } from "../../constants/messages";
 
 import styles from "./PasswordEdit.module.css";
+import Form from "../../components/form/Form/Form";
+import Button from "../../components/@common/Button/Button";
+import FormInput from "../../components/form/FormInput/FormInput";
+import SubmitButton from "../../components/form/SubmitButton";
 
 const PasswordEdit = () => {
   const { token, resetToken } = useTokenContext();
@@ -56,21 +56,21 @@ const PasswordEdit = () => {
     <Container size={CONTAINER_SIZE.NARROW} title="비밀번호 변경">
       <FormProvider {...methods}>
         <Form onSubmit={handleSubmit}>
-          <InputField
+          <FormInput
             name="oldPassword"
             type="password"
             label="기존 비밀번호"
             placeholder="기존 비밀번호를 입력해 주세요"
             required
           />
-          <InputField
+          <FormInput
             name="password"
             type="password"
             label="새 비밀번호"
             placeholder="비밀번호를 입력해 주세요"
             required
           />
-          <InputField
+          <FormInput
             name="rePassword"
             type="password"
             label="비밀번호 확인"
@@ -78,7 +78,7 @@ const PasswordEdit = () => {
             required
           />
           <div className={styles.buttons}>
-            <Button cancel onClick={() => history.goBack()}>
+            <Button type="button" cancel onClick={() => history.goBack()}>
               이전
             </Button>
             <SubmitButton>확인</SubmitButton>
diff --git a/frontend/src/pages/PasswordFind/PasswordFind.js b/frontend/src/pages/PasswordFind/PasswordFind.js
index eccc8dd50..e994c8292 100644
--- a/frontend/src/pages/PasswordFind/PasswordFind.js
+++ b/frontend/src/pages/PasswordFind/PasswordFind.js
@@ -3,15 +3,10 @@ import { useHistory } from "react-router-dom";
 import { fetchPasswordFind } from "../../api/applicants";
 import Container, {
   CONTAINER_SIZE,
-} from "../../components/Container/Container";
-import { Form } from "../../components/form";
+} from "../../components/@common/Container/Container";
 import BirthField from "../../components/form/BirthField/BirthField";
-import Button from "../../components/form/Button/Button";
 import PATH from "../../constants/path";
 import useForm from "../../hooks/useForm";
-import FormProvider from "../../provider/FormProvider/FormProvider";
-import InputField from "../../provider/FormProvider/InputField";
-import SubmitButton from "../../provider/FormProvider/SubmitButton";
 import { formatBirthday } from "../../utils/format/date";
 import {
   validateDay,
@@ -21,6 +16,11 @@ import {
 import { validateEmail } from "../../utils/validation/email";
 import { validateName } from "../../utils/validation/name";
 import styles from "./PasswordFind.module.css";
+import Button from "../../components/@common/Button/Button";
+import FormInput from "../../components/form/FormInput/FormInput";
+import Form from "../../components/form/Form/Form";
+import FormProvider from "../../provider/FormProvider";
+import SubmitButton from "../../components/form/SubmitButton";
 
 const PasswordFind = () => {
   const history = useHistory();
@@ -61,14 +61,14 @@ const PasswordFind = () => {
     <Container size={CONTAINER_SIZE.NARROW} title="비밀번호 찾기">
       <FormProvider {...methods}>
         <Form onSubmit={handleSubmit}>
-          <InputField
+          <FormInput
             name="name"
             type="text"
             label="이름"
             placeholder="이름을 입력해 주세요."
             required
           />
-          <InputField
+          <FormInput
             name="email"
             type="email"
             label="이메일"
@@ -77,10 +77,10 @@ const PasswordFind = () => {
           />
           <BirthField required />
           <div className={styles.buttons}>
-            <Button cancel onClick={() => history.goBack()}>
+            <Button type="button" cancel onClick={() => history.goBack()}>
               이전
             </Button>
-            <SubmitButton>확인</SubmitButton>
+            <SubmitButton />
           </div>
         </Form>
       </FormProvider>
diff --git a/frontend/src/pages/PasswordFindResult/PasswordFindResult.js b/frontend/src/pages/PasswordFindResult/PasswordFindResult.js
index cf6196ad7..0ca5317ec 100644
--- a/frontend/src/pages/PasswordFindResult/PasswordFindResult.js
+++ b/frontend/src/pages/PasswordFindResult/PasswordFindResult.js
@@ -1,12 +1,11 @@
 import React from "react";
 import { useHistory, useLocation } from "react-router-dom";
-
+import Button from "../../components/@common/Button/Button";
 import Form from "../../components/form/Form/Form";
-import Button from "../../components/form/Button/Button";
 import PATH from "../../constants/path";
 import Container, {
   CONTAINER_SIZE,
-} from "../../components/Container/Container";
+} from "../../components/@common/Container/Container";
 
 import styles from "./PasswordFindResult.module.css";
 
diff --git a/frontend/src/provider/FormProvider/FormProvider.js b/frontend/src/provider/FormProvider.js
similarity index 84%
rename from frontend/src/provider/FormProvider/FormProvider.js
rename to frontend/src/provider/FormProvider.js
index 12edb6727..fb3694adc 100644
--- a/frontend/src/provider/FormProvider/FormProvider.js
+++ b/frontend/src/provider/FormProvider.js
@@ -1,4 +1,4 @@
-import { FormContext } from "../../hooks/useFormContext";
+import { FormContext } from "../hooks/useFormContext";
 import PropTypes from "prop-types";
 
 const FormProvider = ({ children, ...props }) => {
diff --git a/frontend/src/provider/FormProvider/InputField.js b/frontend/src/provider/FormProvider/InputField.js
deleted file mode 100644
index a46d745f0..000000000
--- a/frontend/src/provider/FormProvider/InputField.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useEffect } from "react";
-import { TextField } from "../../components/form";
-import useFormContext from "../../hooks/useFormContext";
-import PropTypes from "prop-types";
-
-const InputField = ({ name, initialValue, type = "text", ...props }) => {
-  const {
-    value,
-    errorMessage,
-    handleChange,
-    handleCapsLockState,
-    register,
-    unRegister,
-  } = useFormContext();
-
-  useEffect(() => {
-    register(name, initialValue);
-
-    return () => {
-      unRegister(name);
-    };
-  }, [name, initialValue]);
-
-  return (
-    <TextField
-      name={name}
-      type={type}
-      value={value[name]}
-      errorMessage={errorMessage[name]}
-      onChange={handleChange}
-      onKeyUp={type === "password" ? handleCapsLockState : null}
-      {...props}
-    />
-  );
-};
-
-export default InputField;
-
-InputField.propTypes = {
-  initialValue: PropTypes.string,
-  name: PropTypes.string,
-};