feat. qrcode 생성

@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "web",
       "version": "0.1.0",
       "dependencies": {
         "@testing-library/jest-dom": "^5.11.4",
@@ -18,10 +19,12 @@
         "highcharts": "^9.2.0",
         "highcharts-react-official": "^3.0.0",
         "moment": "^2.29.1",
+        "qrcode": "^1.4.4",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.3",
+        "react-spinners": "^0.11.0",
         "recoil": "^0.4.0",
         "recoil-persist": "^3.0.0",
         "styled-components": "^5.3.0",
@@ -31,6 +34,7 @@
         "web-vitals": "^1.0.1"
       },
       "devDependencies": {
+        "@types/qrcode": "^1.4.1",
         "@types/react-router-dom": "^5.1.8",
         "@types/styled-components": "^5.1.12",
         "@types/validator": "^13.6.3",
@@ -1247,11 +1251,14 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.12.18",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.18.tgz",
-      "integrity": "sha512-BogPQ7ciE6SYAUPtlm9tWbgI9+2AgqSam6QivMgXgAT+fKbgppaj4ZX15MHeLC1PVF5sNk70huBu20XxWOs8Cg==",
+      "version": "7.15.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+      "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
       "dependencies": {
         "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/runtime-corejs3": {
@@ -1332,6 +1339,23 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "node_modules/@emotion/cache": {
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.4.0.tgz",
+      "integrity": "sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==",
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.0.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "^4.0.3"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
@@ -1345,6 +1369,49 @@
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
       "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
     },
+    "node_modules/@emotion/react": {
+      "version": "11.4.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.4.1.tgz",
+      "integrity": "sha512-pRegcsuGYj4FCdZN6j5vqCALkNytdrKw3TZMekTzNXixRg4wkLsU5QEaBG5LC6l01Vppxlp7FE3aTHpIG5phLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/sheet": "^1.0.2",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "dependencies": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.2.tgz",
+      "integrity": "sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw=="
+    },
     "node_modules/@emotion/stylis": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
@@ -1355,6 +1422,16 @@
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
+    "node_modules/@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -2229,17 +2306,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@testing-library/dom/node_modules/@babel/runtime": {
-      "version": "7.14.8",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
-      "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
-      "dependencies": {
-        "regenerator-runtime": "^0.13.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@testing-library/dom/node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2276,17 +2342,6 @@
         "yarn": ">=1"
       }
     },
-    "node_modules/@testing-library/jest-dom/node_modules/@babel/runtime": {
-      "version": "7.14.8",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
-      "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
-      "dependencies": {
-        "regenerator-runtime": "^0.13.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@testing-library/jest-dom/node_modules/chalk": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
@@ -2315,17 +2370,6 @@
         "react-dom": "*"
       }
     },
-    "node_modules/@testing-library/react/node_modules/@babel/runtime": {
-      "version": "7.14.8",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
-      "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
-      "dependencies": {
-        "regenerator-runtime": "^0.13.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@testing-library/user-event": {
       "version": "12.8.3",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-12.8.3.tgz",
@@ -2341,17 +2385,6 @@
         "@testing-library/dom": ">=7.21.4"
       }
     },
-    "node_modules/@testing-library/user-event/node_modules/@babel/runtime": {
-      "version": "7.14.8",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
-      "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
-      "dependencies": {
-        "regenerator-runtime": "^0.13.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@types/anymatch": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
@@ -2536,6 +2569,15 @@
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.4.1.tgz",
+      "integrity": "sha512-vxMyr7JM7tYPxu8vUE83NiosWX5DZieCyYeJRoOIg0pAkyofCBzknJ2ycUZkPGDFis2RS8GN/BeJLnRnAPxeCA==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "17.0.16",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.16.tgz",
@@ -4813,6 +4855,25 @@
         "isarray": "^1.0.0"
       }
     },
+    "node_modules/buffer-alloc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
+      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
+      "dependencies": {
+        "buffer-alloc-unsafe": "^1.1.0",
+        "buffer-fill": "^1.0.0"
+      }
+    },
+    "node_modules/buffer-alloc-unsafe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
+      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
+    },
+    "node_modules/buffer-fill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
+      "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw="
+    },
     "node_modules/buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@@ -6483,6 +6544,11 @@
         "randombytes": "^2.0.0"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
+      "integrity": "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg=="
+    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -12762,6 +12828,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/pngjs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
+      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/pnp-webpack-plugin": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
@@ -14095,6 +14169,193 @@
         "teleport": ">=0.2.0"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.4.4.tgz",
+      "integrity": "sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==",
+      "dependencies": {
+        "buffer": "^5.4.3",
+        "buffer-alloc": "^1.2.0",
+        "buffer-from": "^1.1.1",
+        "dijkstrajs": "^1.0.1",
+        "isarray": "^2.0.1",
+        "pngjs": "^3.3.0",
+        "yargs": "^13.2.4"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/qrcode/node_modules/ansi-regex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qrcode/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/qrcode/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/qrcode/node_modules/cliui": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+      "dependencies": {
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.2.0",
+        "wrap-ansi": "^5.1.0"
+      }
+    },
+    "node_modules/qrcode/node_modules/emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+    },
+    "node_modules/qrcode/node_modules/find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "dependencies": {
+        "locate-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qrcode/node_modules/is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/qrcode/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+    },
+    "node_modules/qrcode/node_modules/locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "dependencies": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qrcode/node_modules/p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+      "dependencies": {
+        "p-limit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qrcode/node_modules/string-width": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+      "dependencies": {
+        "emoji-regex": "^7.0.1",
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qrcode/node_modules/strip-ansi": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+      "dependencies": {
+        "ansi-regex": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qrcode/node_modules/wrap-ansi": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+      "dependencies": {
+        "ansi-styles": "^3.2.0",
+        "string-width": "^3.0.0",
+        "strip-ansi": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+      "dependencies": {
+        "cliui": "^5.0.0",
+        "find-up": "^3.0.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^3.0.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^13.1.2"
+      }
+    },
+    "node_modules/qrcode/node_modules/yargs-parser": {
+      "version": "13.1.2",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    },
     "node_modules/qs": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
@@ -14737,6 +14998,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.11.0.tgz",
+      "integrity": "sha512-rDZc0ABWn/M1OryboGsWVmIPg8uYWl0L35jPUhr40+Yg+syVPjeHwvnB7XWaRpaKus3M0cG9BiJA+ZB0dAwWyw==",
+      "dependencies": {
+        "@emotion/react": "^11.1.4"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -16776,6 +17049,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
+      "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -20048,9 +20326,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.12.18",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.18.tgz",
-      "integrity": "sha512-BogPQ7ciE6SYAUPtlm9tWbgI9+2AgqSam6QivMgXgAT+fKbgppaj4ZX15MHeLC1PVF5sNk70huBu20XxWOs8Cg==",
+      "version": "7.15.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.15.4.tgz",
+      "integrity": "sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==",
       "requires": {
         "regenerator-runtime": "^0.13.4"
       }
@@ -20124,6 +20402,23 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/cache": {
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.4.0.tgz",
+      "integrity": "sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.0.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "^4.0.3"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
     "@emotion/is-prop-valid": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
@@ -20137,6 +20432,37 @@
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
       "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
     },
+    "@emotion/react": {
+      "version": "11.4.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.4.1.tgz",
+      "integrity": "sha512-pRegcsuGYj4FCdZN6j5vqCALkNytdrKw3TZMekTzNXixRg4wkLsU5QEaBG5LC6l01Vppxlp7FE3aTHpIG5phLg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/sheet": "^1.0.2",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.2.tgz",
+      "integrity": "sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw=="
+    },
     "@emotion/stylis": {
       "version": "0.8.5",
       "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
@@ -20147,6 +20473,16 @@
       "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
+    "@emotion/utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -20777,14 +21113,6 @@
         "pretty-format": "^26.6.2"
       },
       "dependencies": {
-        "@babel/runtime": {
-          "version": "7.14.8",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
-          "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        },
         "chalk": {
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -20812,14 +21140,6 @@
         "redent": "^3.0.0"
       },
       "dependencies": {
-        "@babel/runtime": {
-          "version": "7.14.8",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
-          "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        },
         "chalk": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
@@ -20838,16 +21158,6 @@
       "requires": {
         "@babel/runtime": "^7.12.5",
         "@testing-library/dom": "^7.28.1"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.14.8",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
-          "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        }
       }
     },
     "@testing-library/user-event": {
@@ -20856,16 +21166,6 @@
       "integrity": "sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==",
       "requires": {
         "@babel/runtime": "^7.12.5"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.14.8",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
-          "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        }
       }
     },
     "@types/anymatch": {
@@ -21056,6 +21356,15 @@
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
     },
+    "@types/qrcode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.4.1.tgz",
+      "integrity": "sha512-vxMyr7JM7tYPxu8vUE83NiosWX5DZieCyYeJRoOIg0pAkyofCBzknJ2ycUZkPGDFis2RS8GN/BeJLnRnAPxeCA==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/react": {
       "version": "17.0.16",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.16.tgz",
@@ -22917,6 +23226,25 @@
         "isarray": "^1.0.0"
       }
     },
+    "buffer-alloc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
+      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
+      "requires": {
+        "buffer-alloc-unsafe": "^1.1.0",
+        "buffer-fill": "^1.0.0"
+      }
+    },
+    "buffer-alloc-unsafe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
+      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg=="
+    },
+    "buffer-fill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
+      "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw="
+    },
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
@@ -24256,6 +24584,11 @@
         "randombytes": "^2.0.0"
       }
     },
+    "dijkstrajs": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
+      "integrity": "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg=="
+    },
     "dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -29110,6 +29443,11 @@
         }
       }
     },
+    "pngjs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
+      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w=="
+    },
     "pnp-webpack-plugin": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz",
@@ -30180,6 +30518,148 @@
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc="
     },
+    "qrcode": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.4.4.tgz",
+      "integrity": "sha512-oLzEC5+NKFou9P0bMj5+v6Z40evexeE29Z9cummZXZ9QXyMr3lphkURzxjXgPJC5azpxcshoDWV1xE46z+/c3Q==",
+      "requires": {
+        "buffer": "^5.4.3",
+        "buffer-alloc": "^1.2.0",
+        "buffer-from": "^1.1.1",
+        "dijkstrajs": "^1.0.1",
+        "isarray": "^2.0.1",
+        "pngjs": "^3.3.0",
+        "yargs": "^13.2.4"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "buffer": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+          "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+          "requires": {
+            "base64-js": "^1.3.1",
+            "ieee754": "^1.1.13"
+          }
+        },
+        "cliui": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+          "requires": {
+            "string-width": "^3.1.0",
+            "strip-ansi": "^5.2.0",
+            "wrap-ansi": "^5.1.0"
+          }
+        },
+        "emoji-regex": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+        },
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+        },
+        "locate-path": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+          "requires": {
+            "p-locate": "^3.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
+          "requires": {
+            "p-limit": "^2.0.0"
+          }
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+          "requires": {
+            "ansi-styles": "^3.2.0",
+            "string-width": "^3.0.0",
+            "strip-ansi": "^5.0.0"
+          }
+        },
+        "yargs": {
+          "version": "13.3.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+          "requires": {
+            "cliui": "^5.0.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^13.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "13.1.2",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "qs": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
@@ -30669,6 +31149,14 @@
         }
       }
     },
+    "react-spinners": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.11.0.tgz",
+      "integrity": "sha512-rDZc0ABWn/M1OryboGsWVmIPg8uYWl0L35jPUhr40+Yg+syVPjeHwvnB7XWaRpaKus3M0cG9BiJA+ZB0dAwWyw==",
+      "requires": {
+        "@emotion/react": "^11.1.4"
+      }
+    },
     "read-pkg": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
@@ -32283,6 +32771,11 @@
         }
       }
     },
+    "stylis": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
+      "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",

@@ -14,6 +14,7 @@
     "highcharts": "^9.2.0",
     "highcharts-react-official": "^3.0.0",
     "moment": "^2.29.1",
+    "qrcode": "^1.4.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",
@@ -52,6 +53,7 @@
     ]
   },
   "devDependencies": {
+    "@types/qrcode": "^1.4.1",
     "@types/react-router-dom": "^5.1.8",
     "@types/styled-components": "^5.1.12",
     "@types/validator": "^13.6.3",

@@ -9,6 +9,12 @@ export const token = atom({
     effects_UNSTABLE : [persistAtom],
 });
 
+export const userId = atom({
+    key : 'userId',
+    default : null,
+    effects_UNSTABLE : [persistAtom],
+});
+
 export const userTypeCd = atom({
     key : 'userTypeCd',
     default : 'NORMAL',

@@ -23,6 +23,7 @@ const LoginContainer = (props : LoginProps) => {
     });
 
     const [token, setToken] = useRecoilState(recoilUtil.token);
+    const [userId, setUserId] = useRecoilState(recoilUtil.userId);
     const [userTypeCd, setUserTypeCd] = useRecoilState(recoilUtil.userTypeCd);
 
 
@@ -58,12 +59,13 @@ const LoginContainer = (props : LoginProps) => {
             const result : any = await authApi.login(loginForm);
             if(result.statusText === 'OK' && result.data.userTypeCd !== 'NORMAL') {
                 setToken(result.data.token);
+                setUserId(loginForm.userId);
                 setUserTypeCd(result.data.userTypeCd);
                 Alert.onSuccess('로그인 성공, 메인 화면으로 이동합니다.', () => props.history.push('/'));
             } else if(result.data.userTypeCd === 'NORMAL') {
                 Alert.onError('권한이 없는 유저입니다.', () => props.history.push('/'));
             }
-        } catch(e) {
+        } catch(e : any) {
             Alert.onError(e.response.data.error, () => null);
         }
 

@@ -10,6 +10,8 @@ import * as Alert from '../../../util/alertMessage';
 
 import { doctorApi, medicineApi } from '../../../api';
 
+import QRCode from 'qrcode';
+
 
 //toDo : Generate QR Code By Medicine Id
 
@@ -18,6 +20,7 @@ type DoctorMenuProps = RouteComponentProps
 const DoctorMenuContainer = (props : DoctorMenuProps) => {
 
     const token = useRecoilValue(recoilUtil.token);
+    const userId = useRecoilValue(recoilUtil.userId);
     const [loading, setLoading] = useRecoilState(recoilUtil.loading);
 
     const [doctorInfo, setDoctorInfo] = useState<any>({
@@ -52,9 +55,13 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
     const [newPatientSearchResult, setNewPatientSearchResult] = useState<any | null>(null);
 
     const [prescribeModal, setPrescribeModal] = useState<boolean>(false);
+    const [prescribeModalStep, setPrescribeModalStep] = useState<number>(1);
     const [searchMedicineKeyword, setSearchMedicineKeyword] = useState<string>('');
     const [medicineList, setMedicineList] = useState<any>([]);
     const [prescribeMedicine, setPrescribeMedicine] = useState<any>(null);
+    const [dosage, setDosage] = useState<string>('1');
+
+    const [qrcodeUrl, setQrcodeUrl] = useState<string | null>(null);
 
 
     const fetchData = async() => {
@@ -213,9 +220,11 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
         setEditModal(false);
         setEditPatientInfo('');
         setPrescribeModal(false);
+        setPrescribeModalStep(1);
         setSearchMedicineKeyword('');
         setMedicineList([]);
         setPrescribeMedicine(null);
+        setDosage('1');
     };
 
     const onGoBottleDetail = (bottleId : number) => {
@@ -233,7 +242,6 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
             setLoading(true);
             const res = await medicineApi.searchMedicine(token, searchMedicineKeyword);
             if(res.statusText === 'OK') {
-                console.log(res.data.medicineList)
                 setMedicineList(res.data.medicineList);
             }
             setLoading(false);
@@ -242,9 +250,32 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
         }
     };
 
+    const onSetDosage = (e : React.ChangeEvent<HTMLInputElement>) => {
+        setDosage(e.target.value);
+    };
+
+    const onSetNextStepPrescribe = () => {
+        if(prescribeMedicine)   setPrescribeModalStep(prescribeModalStep + 1);
+        else    Alert.onWarning('먼저 처방할 약을 선택해야 합니다.', () => null);
+    };
+
+    const onSetPrevStepPrescribe = () => {
+        if(prescribeModalStep > 1)  setPrescribeModalStep(prescribeModalStep - 1);
+    };
+
     const onPrescribeSubmit = async() => {
-        //toDo : 처방해서, QR코드 생성
-        Alert.onWarning('작업 중입니다.', () => null);
+        Alert.onCheck(`${prescribeMedicine.name}(일 복용량:${dosage})\n을 처방하시겠습니까?`, async () => {
+            setQrcodeUrl(await QRCode.toDataURL(`${prescribeMedicine.name}/${prescribeMedicine.medicineId}/${dosage}/${userId}`, {
+                type : "image/png", 
+                color : {dark : '#337DFF', light : '#FFF'},
+            }));
+            Alert.onSuccess('처방 정보가 생성 되었습니다.', () => onSetNextStepPrescribe());
+        }, () => null);
+    };
+
+    const onPrintQrcode = async() => {
+        //toDo : QR코드 출력
+        Alert.onWarning('준비 중입니다.', () => null);
     };
 
     const onPrescribeCancel = () => {
@@ -298,14 +329,21 @@ const DoctorMenuContainer = (props : DoctorMenuProps) => {
             onCloseModal = {onCloseModal}
 
             prescribeModal = {prescribeModal}
+            prescribeModalStep = {prescribeModalStep}
+            onSetNextStepPrescribe = {onSetNextStepPrescribe}
+            onSetPrevStepPrescribe = {onSetPrevStepPrescribe}
             setPrescribeModal = {setPrescribeModal}
             searchMedicineKeyword = {searchMedicineKeyword}
             onSetSearchMedicineKeyword = {onSetSearchMedicineKeyword}
             medicineList = {medicineList}
             searchMedicine = {searchMedicine}
             prescribeMedicine = {prescribeMedicine}
+            dosage = {dosage}
+            onSetDosage = {onSetDosage}
+            qrcodeUrl = {qrcodeUrl}
             setPrescribeMedicine = {setPrescribeMedicine}
             onPrescribeSubmit = {onPrescribeSubmit}
+            onPrintQrcode = {onPrintQrcode}
             onPrescribeCancel = {onPrescribeCancel}
 
             newPatientSearchResult = {newPatientSearchResult}

@@ -48,6 +48,10 @@ interface DoctorMenuProps {
 
     prescribeModal : boolean;
     setPrescribeModal : any;
+    prescribeModalStep : number;
+    onSetNextStepPrescribe : () => void;
+    onSetPrevStepPrescribe : () => void;
+
     searchMedicineKeyword : string;
     onSetSearchMedicineKeyword : React.ChangeEventHandler<HTMLInputElement>;
 
@@ -57,7 +61,13 @@ interface DoctorMenuProps {
     prescribeMedicine : any;
     setPrescribeMedicine : (arg0 : any) => void;
 
+    dosage : string;
+    onSetDosage : React.ChangeEventHandler<HTMLInputElement>;
+
+    qrcodeUrl : string | null;
+
     onPrescribeSubmit : () => void;
+    onPrintQrcode : () => void;
     onPrescribeCancel : () => void;
 }
 
@@ -189,53 +199,105 @@ const DoctorMenuPresenter = (props : DoctorMenuProps) => {
                     <styled.ModalContentWrapper>
                         <styled.ModalContent>
                             <styled.MedicineSearchTitle>
-                                약 검색
+                            {
+                                props.prescribeModalStep === 1 ?
+                                '약 검색' :
+                                props.prescribeModalStep === 2 ?
+                                '복용량 입력' :
+                                '처방 정보 QR코드'
+                            }
                             </styled.MedicineSearchTitle>
-                            <styled.MedicineSearchInputWrapper>
-                                <styled.MedicineSearchInput 
-                                    placeholder = '증상, 또는 약 이름을 검색하세요.'
-                                    onChange = {props.onSetSearchMedicineKeyword}
-                                    value = {props.searchMedicineKeyword}
-                                />
-                                <styled.MedicineSearchButton
-                                    onClick = {props.searchMedicine}
-                                >
-                                    <styled.MedicineSearchButtonImg src = {lensImg}/>
-                                </styled.MedicineSearchButton>
-                            </styled.MedicineSearchInputWrapper>
-                            <styled.MedicineSearchResultWrapper>
                             {
-                                props.medicineList.length ?
-                                props.medicineList.map((medicine : any) => {
-                                    return (
-                                        <styled.MedicineSearchResultEach
-                                            key = {medicine.medicineId}
-                                            onClick = {() => props.setPrescribeMedicine(medicine)}
-                                        >
-                                            <styled.MedicineSearchResultEachInfo>
-                                                {medicine.name}
-                                            </styled.MedicineSearchResultEachInfo>
-                                            <styled.MedicineSearchButtonImg 
-                                                src = {
-                                                    props.prescribeMedicine && props.prescribeMedicine.medicineId === medicine.medicineId ?
-                                                    check : uncheck
-                                                }
-                                            />
-                                        </styled.MedicineSearchResultEach>
-                                    )
-                                }) :
-                                <styled.NothingWrapper style = {{fontSize : 13,}}>
-                                    🤔검색 결과가 없습니다.
-                                </styled.NothingWrapper>
+                                props.prescribeModalStep === 1 ?
+                                <>
+                                <styled.MedicineSearchInputWrapper>
+                                    <styled.MedicineSearchInput 
+                                        placeholder = '증상, 또는 약 이름을 검색하세요.'
+                                        onChange = {props.onSetSearchMedicineKeyword}
+                                        value = {props.searchMedicineKeyword}
+                                    />
+                                    <styled.MedicineSearchButton
+                                        onClick = {props.searchMedicine}
+                                    >
+                                        <styled.MedicineSearchButtonImg src = {lensImg}/>
+                                    </styled.MedicineSearchButton>
+                                </styled.MedicineSearchInputWrapper>
+                                <styled.MedicineSearchResultWrapper>
+                                {
+                                    props.medicineList.length ?
+                                    props.medicineList.map((medicine : any) => {
+                                        return (
+                                            <styled.MedicineSearchResultEach
+                                                key = {medicine.medicineId}
+                                                onClick = {() => props.setPrescribeMedicine(
+                                                    props.prescribeMedicine && props.prescribeMedicine.medicineId === medicine.medicineId ? 
+                                                    null : medicine
+                                                )}
+                                            >
+                                                <styled.MedicineSearchResultEachInfo>
+                                                    {medicine.name}
+                                                </styled.MedicineSearchResultEachInfo>
+                                                <styled.MedicineSearchButtonImg 
+                                                    src = {
+                                                        props.prescribeMedicine && props.prescribeMedicine.medicineId === medicine.medicineId ?
+                                                        check : uncheck
+                                                    }
+                                                />
+                                            </styled.MedicineSearchResultEach>
+                                        )
+                                    }) :
+                                    <styled.NothingWrapper style = {{fontSize : 13,}}>
+                                        🤔검색 결과가 없습니다.
+                                    </styled.NothingWrapper>
+                                }
+                                </styled.MedicineSearchResultWrapper>
+                                </>
+                                :
+                                props.prescribeModalStep === 2 ?
+                                <styled.MedicineDosageSetWrapper>
+                                     <styled.MedicineDosageInfo>
+                                        *하루 복용량을 입력하세요.
+                                    </styled.MedicineDosageInfo>
+                                    <styled.MedicineDosageInput
+                                        value = {props.dosage}
+                                        onChange = {props.onSetDosage}
+                                    />
+                                </styled.MedicineDosageSetWrapper>
+                                :
+                                <styled.MedicineQRCodeWrapper>
+                                    <styled.MedicineQRCodeInfo>
+                                        *어플리케이션에서 QR코드를 스캔하면 약병에 약이 등록됩니다.
+                                    </styled.MedicineQRCodeInfo>
+                                    {
+                                        props.qrcodeUrl ?
+                                        <styled.MedicineQRCode src = {props.qrcodeUrl}/> : null
+                                    }
+                                </styled.MedicineQRCodeWrapper>
                             }
-                            </styled.MedicineSearchResultWrapper>
                             <styled.MedicinePrescribeButtonWrapper>
-                                <styled.MedicinePrescribeButton
-                                    isClose = {false}
-                                    onClick = {props.onPrescribeSubmit}
-                                >
-                                    처방
-                                </styled.MedicinePrescribeButton>
+                                {
+                                    props.prescribeModalStep === 1 ?
+                                    <styled.MedicinePrescribeButton
+                                        isClose = {false}
+                                        onClick = {props.onSetNextStepPrescribe}
+                                    >
+                                        다음 단계
+                                    </styled.MedicinePrescribeButton> :
+                                    props.prescribeModalStep === 2 ?
+                                    <styled.MedicinePrescribeButton
+                                        isClose = {false}
+                                        onClick = {props.onPrescribeSubmit}
+                                    >
+                                        처방
+                                    </styled.MedicinePrescribeButton> 
+                                    :
+                                    <styled.MedicinePrescribeButton
+                                        isClose = {false}
+                                        onClick = {props.onPrintQrcode}
+                                    >
+                                        출력
+                                    </styled.MedicinePrescribeButton>
+                                }
                                 <styled.MedicinePrescribeButton
                                     isClose = {true}
                                     onClick = {props.onPrescribeCancel}

@@ -436,6 +436,7 @@ export const MedicineSearchButtonImg = styled.img `
     height : 15px;
     width : 15px;
     
+    transition : .25s all;
 `;
 
 export const MedicineSearchResultWrapper = styled.div `
@@ -499,6 +500,92 @@ export const MedicineSelectButtonImg = styled.img `
     width : 15px;
 `;
 
+export const MedicineDosageSetWrapper = styled.div `
+    width : 80%;
+    
+    display : flex;
+    flex-direction : column;
+
+    justify-content : center;
+    align-items : center;
+
+    border : none;
+
+    margin : 20px 0;
+
+    height : 200px;
+`;
+
+export const MedicineDosageInfo = styled.div `
+    font-size : 15px;
+    font-weight : 500;
+
+    color : #a0a0a0;
+
+    width : 100%;
+    margin : 0 0 20px 0;
+
+    border : none;
+    background-color : transparent;
+
+    text-align : center;
+`;
+
+export const MedicineDosageInput = styled.input.attrs({
+    type : 'number',
+    min : '1',
+    max : '3',
+}) `
+    width : 40%;
+
+    padding : 10px 20px;
+    color : #337DFF;
+    font-size : 20px;
+
+    font-weight : 700;
+
+    border : none;
+    border-bottom : 1px solid #337DFF;
+
+    display : flex;
+    flex-direction : row;
+
+    text-align : center;
+
+    transition : .25s all;
+`;
+
+export const MedicineQRCodeWrapper = styled.div `
+    width : 80%;
+    height : 200px;
+
+    display : flex;
+    flex-direction : column;
+
+    justify-content : center;
+    align-items : center;
+
+    margin : 20px 0;
+
+    border : none;
+`;
+
+export const MedicineQRCodeInfo = styled.div `
+    font-size : 15px;
+    font-weight : 500;
+
+    color : #a0a0a0;
+
+    text-align : center;
+`;
+
+export const MedicineQRCode = styled.img `
+    margin : 10px 0 0 0;
+
+    height : 170px;
+    width : 170px;
+`;
+
 export const MedicinePrescribeButtonWrapper = styled.div `
     margin : 20px 0 0 0;