Merge branch 'rkyoung7'

f54f8d33 · Kim, Subin · 2f73640f · 05747218 · f54f8d33 · f54f8d33
Commit f54f8d33 authored Oct 07, 2021 by Kim, Subin
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -15,11 +15,13 @@
        "bootstrap": "^5.1.1",
        "bootstrap-icons": "^1.5.0",
        "node-sass": "^6.0.1",
+        "formik": "^2.2.9",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-router-dom": "^5.3.0",
        "react-scripts": "4.0.3",
-        "web-vitals": "^1.1.2"
+        "web-vitals": "^1.1.2",
+        "yup": "^0.32.9"
      }
    },
    "node_modules/@babel/code-frame": {
@@ -2734,9 +2736,9 @@
      }
    },
    "node_modules/@popperjs/core": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz",
-      "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==",
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
+      "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==",
      "peer": true,
      "funding": {
        "type": "opencollective",
@@ -3026,159 +3028,6 @@
        "url": "https://github.com/sponsors/gregberge"
      }
    },
-    "node_modules/@testing-library/dom": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.6.0.tgz",
-      "integrity": "sha512-EDBMEWK8IVpNF7B7C1knb0lLB4Si9RWte/YTEi6CqmqUK5CYCoecwOOG9pEijU/H6s3u0drUxH5sKT07FCgFIg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^4.2.0",
-        "aria-query": "^4.2.2",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.6",
-        "lz-string": "^1.4.4",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/@babel/runtime": {
-      "version": "7.15.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
-      "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
-      "peer": true,
-      "dependencies": {
-        "regenerator-runtime": "^0.13.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/@jest/types": {
-      "version": "27.2.3",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.2.3.tgz",
-      "integrity": "sha512-UJMDg90+W2i/QsS1NIN6Go8O/rSHLFWUkofGqKsUQs54mhmCVyLTiDy1cwKhoNO5fpmr9fctm9L/bRp/YzA1uQ==",
-      "peer": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^16.0.0",
-        "chalk": "^4.0.0"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/@types/yargs": {
-      "version": "16.0.4",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-      "integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-      "peer": true,
-      "dependencies": {
-        "@types/yargs-parser": "*"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "peer": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "peer": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "peer": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "peer": true
-    },
-    "node_modules/@testing-library/dom/node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/pretty-format": {
-      "version": "27.2.3",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.2.3.tgz",
-      "integrity": "sha512-wvg2HzuGKKEE/nKY4VdQ/LM8w8pRZvp0XpqhwgaZBbjTwd5UdF2I4wvwZjyUwu8G+HI6g4t6u9b2FZlKhlzxcQ==",
-      "peer": true,
-      "dependencies": {
-        "@jest/types": "^27.2.3",
-        "ansi-regex": "^5.0.1",
-        "ansi-styles": "^5.0.0",
-        "react-is": "^17.0.1"
-      },
-      "engines": {
-        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/pretty-format/node_modules/ansi-styles": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "peer": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/@testing-library/dom/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "peer": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
    "node_modules/@testing-library/jest-dom": {
      "version": "5.14.1",
      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz",
@@ -3691,6 +3540,11 @@
      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
      "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
    },
+    "node_modules/@types/lodash": {
+      "version": "4.14.175",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.175.tgz",
+      "integrity": "sha512-XmdEOrKQ8a1Y/yxQFOMbC47G/V2VDO1GvMRnl4O75M4GW/abC5tnfzadQYkqEveqRM1dEJGFFegfPNA2vvx2iw=="
+    },
    "node_modules/@types/minimatch": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@@ -9601,6 +9455,42 @@
        "node": ">= 6"
      }
    },
+    "node_modules/formik": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
+      "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "dependencies": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/formik/node_modules/deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/formik/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
    "node_modules/forwarded": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -13713,6 +13603,11 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
    "node_modules/lodash._reinterpolate": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -14440,6 +14335,11 @@
      "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
      "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ=="
    },
+    "node_modules/nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+    },
    "node_modules/nanocolors": {
      "version": "0.1.12",
      "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.1.12.tgz",
@@ -16993,6 +16893,11 @@
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
    },
+    "node_modules/property-expr": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz",
+      "integrity": "sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg=="
+    },
    "node_modules/proxy-addr": {
      "version": "2.0.7",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -17402,6 +17307,11 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
      "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
    },
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
    "node_modules/react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -20646,6 +20556,11 @@
        "node": ">=0.6"
      }
    },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+    },
    "node_modules/tough-cookie": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
@@ -20847,19 +20762,6 @@
        "is-typedarray": "^1.0.0"
      }
    },
-    "node_modules/typescript": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.3.tgz",
-      "integrity": "sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA==",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
    "node_modules/unbox-primitive": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -23169,6 +23071,23 @@
      "funding": {
        "url": "https://github.com/sponsors/sindresorhus"
      }
+    },
+    "node_modules/yup": {
+      "version": "0.32.9",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.9.tgz",
+      "integrity": "sha512-Ci1qN+i2H0XpY7syDQ0k5zKQ/DoxO0LzPg8PAR/X4Mpj6DqaeCoIYEEjDJwhArh3Fa7GWbQQVDZKeXYlSH4JMg==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.5",
+        "@types/lodash": "^4.14.165",
+        "lodash": "^4.17.20",
+        "lodash-es": "^4.17.15",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
    }
  },
  "dependencies": {
@@ -25066,9 +24985,9 @@
      }
    },
    "@popperjs/core": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.1.tgz",
-      "integrity": "sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==",
+      "version": "2.10.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
+      "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==",
      "peer": true
    },
    "@rollup/plugin-node-resolve": {
@@ -25243,124 +25162,6 @@
        "loader-utils": "^2.0.0"
      }
    },
-    "@testing-library/dom": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.6.0.tgz",
-      "integrity": "sha512-EDBMEWK8IVpNF7B7C1knb0lLB4Si9RWte/YTEi6CqmqUK5CYCoecwOOG9pEijU/H6s3u0drUxH5sKT07FCgFIg==",
-      "peer": true,
-      "requires": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^4.2.0",
-        "aria-query": "^4.2.2",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.6",
-        "lz-string": "^1.4.4",
-        "pretty-format": "^27.0.2"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.15.4",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
-          "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
-          "peer": true,
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        },
-        "@jest/types": {
-          "version": "27.2.3",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.2.3.tgz",
-          "integrity": "sha512-UJMDg90+W2i/QsS1NIN6Go8O/rSHLFWUkofGqKsUQs54mhmCVyLTiDy1cwKhoNO5fpmr9fctm9L/bRp/YzA1uQ==",
-          "peer": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^16.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/yargs": {
-          "version": "16.0.4",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
-          "integrity": "sha512-T8Yc9wt/5LbJyCaLiHPReJa0kApcIgJ7Bn735GjItUfh08Z1pJvu8QZqb9s+mMvKV6WUQRV7K2R46YbjMXTTJw==",
-          "peer": true,
-          "requires": {
-            "@types/yargs-parser": "*"
-          }
-        },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "peer": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "peer": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "peer": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "peer": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "peer": true
-        },
-        "pretty-format": {
-          "version": "27.2.3",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.2.3.tgz",
-          "integrity": "sha512-wvg2HzuGKKEE/nKY4VdQ/LM8w8pRZvp0XpqhwgaZBbjTwd5UdF2I4wvwZjyUwu8G+HI6g4t6u9b2FZlKhlzxcQ==",
-          "peer": true,
-          "requires": {
-            "@jest/types": "^27.2.3",
-            "ansi-regex": "^5.0.1",
-            "ansi-styles": "^5.0.0",
-            "react-is": "^17.0.1"
-          },
-          "dependencies": {
-            "ansi-styles": {
-              "version": "5.2.0",
-              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
-              "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-              "peer": true
-            }
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "peer": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
    "@testing-library/jest-dom": {
      "version": "5.14.1",
      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.14.1.tgz",
@@ -25768,6 +25569,11 @@
      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
      "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
    },
+    "@types/lodash": {
+      "version": "4.14.175",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.175.tgz",
+      "integrity": "sha512-XmdEOrKQ8a1Y/yxQFOMbC47G/V2VDO1GvMRnl4O75M4GW/abC5tnfzadQYkqEveqRM1dEJGFFegfPNA2vvx2iw=="
+    },
    "@types/minimatch": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@@ -30381,6 +30187,32 @@
        "mime-types": "^2.1.12"
      }
    },
+    "formik": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
+      "integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
+      "requires": {
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.10.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
    "forwarded": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -33438,6 +33270,11 @@
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
    "lodash._reinterpolate": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -34007,6 +33844,11 @@
      "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
      "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ=="
    },
+    "nanoclone": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/nanoclone/-/nanoclone-0.2.1.tgz",
+      "integrity": "sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA=="
+    },
    "nanocolors": {
      "version": "0.1.12",
      "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.1.12.tgz",
@@ -36032,6 +35874,11 @@
        }
      }
    },
+    "property-expr": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz",
+      "integrity": "sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg=="
+    },
    "proxy-addr": {
      "version": "2.0.7",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -36353,6 +36200,11 @@
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
      "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
    },
+    "react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
    "react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -38938,6 +38790,11 @@
      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
    },
+    "toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+    },
    "tough-cookie": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
@@ -39095,12 +38952,6 @@
        "is-typedarray": "^1.0.0"
      }
    },
-    "typescript": {
-      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.3.tgz",
-      "integrity": "sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA==",
-      "peer": true
-    },
    "unbox-primitive": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -40962,6 +40813,20 @@
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "yup": {
+      "version": "0.32.9",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.9.tgz",
+      "integrity": "sha512-Ci1qN+i2H0XpY7syDQ0k5zKQ/DoxO0LzPg8PAR/X4Mpj6DqaeCoIYEEjDJwhArh3Fa7GWbQQVDZKeXYlSH4JMg==",
+      "requires": {
+        "@babel/runtime": "^7.10.5",
+        "@types/lodash": "^4.14.165",
+        "lodash": "^4.17.20",
+        "lodash-es": "^4.17.15",
+        "nanoclone": "^0.2.1",
+        "property-expr": "^2.0.4",
+        "toposort": "^2.0.2"
+      }
    }
  }
 }
--- a/client/package.json
+++ b/client/package.json
@@ -10,11 +10,13 @@
    "bootstrap": "^5.1.1",
    "bootstrap-icons": "^1.5.0",
    "node-sass": "^6.0.1",
+    "formik": "^2.2.9",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
-    "web-vitals": "^1.1.2"
+    "web-vitals": "^1.1.2",
+    "yup": "^0.32.9"
  },
  "scripts": {
    "start": "react-scripts start",

--- a/client/src/App.js
+++ b/client/src/App.js
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import LoginPage from "./pages/LoginPage";
+import SignupPage from "./pages/SignupPage";
 import HomePage from "./pages/HomePage";
 import SchedulePage from "./pages/SchedulePage";
 import ScheduleEditPage from "./pages/ScheduleEditPage";
@@ -12,6 +14,7 @@ function App() {
      <div className="mx-auto" style={{ width: "400px" }}>
        <Switch>
          <Route exact path="/" component={Err} />
+          <Route path="/signup" component={SignupPage} />
          <Route path="/home" component={HomePage} />
          <Route path="/schedule/edit" component={ScheduleEditPage} />
          <Route path="/schedule" component={SchedulePage} />

--- a/client/src/components/SignupForm.js
+++ b/client/src/components/SignupForm.js
+import React from 'react';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
+
+const SignupForm = () => {
+  return (
+    <div>
+      <div>
+        <h1 className="text-center">회원가입</h1>
+      </div>
+      <Formik
+        initialValues={{
+          userID: '',
+          password: '',
+          repassword: '',
+          userName: '',
+          userStudNum: ''
+        }}
+
+        validationSchema={Yup.object({
+          userId: Yup.string()
+            .required('아이디를 입력해주세요.')
+            .max(15, '15자 이내로 입력해주세요.')
+            .min(5, '최소 5자 이상 입력해주세요.'),
+          password: Yup.string()
+            .required('비밀번호를 입력해주세요.')
+            .min(8, '최소 8자 이상 입력해주세요.'),
+          repassword: Yup.string()
+            .required('비밀번호를 입력해주세요.')
+            .min(8, '최소 8자 이상 입력해주세요.')
+            .oneOf([Yup.ref("password"), null], '비밀번호가 일치하지 않습니다.'),
+          userName: Yup.string()
+            .required('이름을 입력해주세요.'),
+          userStudNum: Yup.string()
+            .required('학번을 입력해주세요.')
+            .min(7, '학번을 정확히 입력해주세요.'),
+        })}
+        onSubmit={(values, { setSubmitting }) => {
+          setTimeout(() => {
+            alert(JSON.stringify(values, null, 2));
+            setSubmitting(false);
+          }, 400);
+        }}
+      >
+        {formik => (
+          <form onSubmit={formik.handleSubmit}>
+            <div>
+              <label className="form-label">아이디</label>
+              <input type="text" name="userID"
+                className="form-control border-top-0 border-end-0 border-start-0"
+                {...formik.getFieldProps('userID')} />
+              {formik.touched.userID && formik.errors.userID ? (
+                <div className="text-secondary">{formik.errors.userID}</div>
+              ) : null}
+            </div>
+            <div>
+              <label className="form-label">비밀번호</label>
+              <input type="password" name="password"
+                className="form-control border-top-0 border-end-0 border-start-0"
+                {...formik.getFieldProps('password')} />
+              {formik.touched.password && formik.errors.password ? (
+                <div className="text-secondary">{formik.errors.password}</div>
+              ) : null}
+            </div>
+            <div>
+              <label className="form-label">비밀번호 확인</label>
+              <input type="password" name="repassword"
+                className="form-control border-top-0 border-end-0 border-start-0"
+                {...formik.getFieldProps('repassword')} />
+              {formik.touched.repassword && formik.errors.repassword ? (
+                <div className="text-secondary">{formik.errors.repassword}</div>
+              ) : null}
+            </div>
+            <div>
+              <label className="form-label">이름</label>
+              <input type="text" name="userName"
+                className="form-control border-top-0 border-end-0 border-start-0"
+                {...formik.getFieldProps('userName')} />
+              {formik.touched.userName && formik.errors.userName ? (
+                <div className="text-secondary">{formik.errors.userName}</div>
+              ) : null}
+            </div>
+            <div>
+              <label className="form-label">학번</label>
+              <input type="text" name="userStudNum"
+                className="form-control border-top-0 border-end-0 border-start-0"
+                {...formik.getFieldProps('userStudNum')} />
+              {formik.touched.userStudNum && formik.errors.userStudNum ? (
+                <div className="text-secondary">{formik.errors.userStudNum}</div>
+              ) : null}
+            </div>
+            <button type="submit">확인</button>
+          </form>
+        )}
+      </Formik>
+    </div>
+  );
+}
+
+export default SignupForm;
+
--- a/client/src/pages/LoginPage.js
+++ b/client/src/pages/LoginPage.js
+import React from 'react';
+import { Formik } from 'formik';
+import * as yup from 'yup';
+import SignupForm from '../components/SignupForm';
+
+function LoginPage() {
+  return (
+    <>
+      <div>
+        <h1>오늘의 KU</h1>
+        <p>-일정관리앱</p>
+      </div>
+    </>
+  );
+}
+
+export default LoginPage;
\ No newline at end of file
--- a/client/src/pages/SignupPage.js
+++ b/client/src/pages/SignupPage.js
+import SignupForm from '../components/SignupForm';
+
+function SingupPage () {
+
+  return(
+    <SignupForm />
+  );
+}
+
+export default SingupPage;