footer 수정 완료, btn variant='light' 추가, 카카오 토큰 받아오기 추가

1babfe34 · Spark · KangMin An · e8659e4a · 1babfe34 · 1babfe34
Commit 1babfe34 authored Jul 08, 2021 by Spark Committed by KangMin An Jul 19, 2021
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -10,18 +10,22 @@
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
+        "axios": "^0.21.1",
        "bootstrap": "^4.6.0",
        "chart.js": "^3.4.0",
        "moment": "^2.29.1",
+        "ngx-spinner": "^12.0.0",
        "node-sass": "^6.0.1",
        "react": "^17.0.2",
        "react-bootstrap": "^1.6.1",
        "react-chartjs-2": "^3.0.3",
+        "react-copy-to-clipboard": "^5.0.3",
        "react-dom": "^17.0.2",
        "react-google-login": "^5.2.2",
        "react-kakao-login": "^2.1.0",
        "react-live-clock": "^5.2.0",
        "react-moment": "^1.1.1",
+        "react-redux": "^7.2.4",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.3",
        "react-use": "^17.2.4",
@@ -29,6 +33,38 @@
        "web-vitals": "^1.1.2"
      }
    },
+    "node_modules/@angular/common": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-12.1.1.tgz",
+      "integrity": "sha512-NnRwGMatzjthvDQ4+8tm09Ak5i27Qga8x4BdzINN1RjLmzQ0zW00Mn2AUGYEDZHt9HXVHff5stsZGqj+Ne4QJw==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "engines": {
+        "node": "^12.14.1 || >=14.0.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "12.1.1",
+        "rxjs": "^6.5.3"
+      }
+    },
+    "node_modules/@angular/core": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-12.1.1.tgz",
+      "integrity": "sha512-7Q4na8zCXi4ITBG8kgbS+vnnVK0GDU2WXU80/il096+8YPFKfj6MyDWZH79KA3jrIg9/yhLwSQx8x8wnj8dqBA==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "engines": {
+        "node": "^12.14.1 || >=14.0.0"
+      },
+      "peerDependencies": {
+        "rxjs": "^6.5.3",
+        "zone.js": "~0.11.4"
+      }
+    },
    "node_modules/@babel/code-frame": {
      "version": "7.14.5",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
@@ -3503,6 +3539,15 @@
        "@types/node": "*"
      }
    },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
    "node_modules/@types/html-minifier-terser": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
@@ -3608,6 +3653,17 @@
        "csstype": "^3.0.2"
      }
    },
+    "node_modules/@types/react-redux": {
+      "version": "7.1.16",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.16.tgz",
+      "integrity": "sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==",
+      "dependencies": {
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
+      }
+    },
    "node_modules/@types/react-transition-group": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
@@ -4606,6 +4662,14 @@
        "node": ">=4"
      }
    },
+    "node_modules/axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "dependencies": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
    "node_modules/axobject-query": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -14457,6 +14521,18 @@
      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
    },
+    "node_modules/ngx-spinner": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-12.0.0.tgz",
+      "integrity": "sha512-0BIaLQDBwNApdSWfKYnYA4hSpfgd2bZ9ptBTB+1tOYJHULg67TRqVYswR6H4tNqmGfA8KNivTYXcY7/6RkyjyA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^12.0.0",
+        "@angular/core": "^12.0.0"
+      }
+    },
    "node_modules/nice-try": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -17247,6 +17323,18 @@
        "react": "^16.8.0 || ^17.0.0"
      }
    },
+    "node_modules/react-copy-to-clipboard": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz",
+      "integrity": "sha512-9S3j+m+UxDZOM0Qb8mhnT/rMR0NGSrj9A/073yz2DSxPMYhmYFBMYIdI2X4o8AjOjyFsSNxDRnCX6s/gRxpriw==",
+      "dependencies": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
    "node_modules/react-dev-utils": {
      "version": "11.0.4",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -17498,6 +17586,35 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/react-redux": {
+      "version": "7.2.4",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",
+      "integrity": "sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "@types/react-redux": "^7.1.16",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.13.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-redux/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
    "node_modules/react-refresh": {
      "version": "0.8.3",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -17892,6 +18009,14 @@
        "node": ">=8"
      }
    },
+    "node_modules/redux": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.0.tgz",
+      "integrity": "sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
    "node_modules/regenerate": {
      "version": "1.4.2",
      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -18495,6 +18620,24 @@
        "aproba": "^1.1.1"
      }
    },
+    "node_modules/rxjs": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^1.9.0"
+      },
+      "engines": {
+        "npm": ">=2.0.0"
+      }
+    },
+    "node_modules/rxjs/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "peer": true
+    },
    "node_modules/safe-buffer": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -23370,9 +23513,36 @@
      "funding": {
        "url": "https://github.com/sponsors/sindresorhus"
      }
+    },
+    "node_modules/zone.js": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.11.4.tgz",
+      "integrity": "sha512-DDh2Ab+A/B+9mJyajPjHFPWfYU1H+pdun4wnnk0OcQTNjem1XQSZ2CDW+rfZEUDjv5M19SBqAkjZi0x5wuB5Qw==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.0.0"
+      }
    }
  },
  "dependencies": {
+    "@angular/common": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-12.1.1.tgz",
+      "integrity": "sha512-NnRwGMatzjthvDQ4+8tm09Ak5i27Qga8x4BdzINN1RjLmzQ0zW00Mn2AUGYEDZHt9HXVHff5stsZGqj+Ne4QJw==",
+      "peer": true,
+      "requires": {
+        "tslib": "^2.2.0"
+      }
+    },
+    "@angular/core": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-12.1.1.tgz",
+      "integrity": "sha512-7Q4na8zCXi4ITBG8kgbS+vnnVK0GDU2WXU80/il096+8YPFKfj6MyDWZH79KA3jrIg9/yhLwSQx8x8wnj8dqBA==",
+      "peer": true,
+      "requires": {
+        "tslib": "^2.2.0"
+      }
+    },
    "@babel/code-frame": {
      "version": "7.14.5",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
@@ -25805,6 +25975,15 @@
        "@types/node": "*"
      }
    },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
    "@types/html-minifier-terser": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
@@ -25910,6 +26089,17 @@
        "csstype": "^3.0.2"
      }
    },
+    "@types/react-redux": {
+      "version": "7.1.16",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.16.tgz",
+      "integrity": "sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==",
+      "requires": {
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
+      }
+    },
    "@types/react-transition-group": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
@@ -26690,6 +26880,14 @@
      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.2.3.tgz",
      "integrity": "sha512-pXnVMfJKSIWU2Ml4JHP7pZEPIrgBO1Fd3WGx+fPBsS+KRGhE4vxooD8XBGWbQOIVSZsVK7pUDBBkCicNu80yzQ=="
    },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
    "axobject-query": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -34251,6 +34449,14 @@
      "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
      "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
    },
+    "ngx-spinner": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-12.0.0.tgz",
+      "integrity": "sha512-0BIaLQDBwNApdSWfKYnYA4hSpfgd2bZ9ptBTB+1tOYJHULg67TRqVYswR6H4tNqmGfA8KNivTYXcY7/6RkyjyA==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
    "nice-try": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -36462,6 +36668,15 @@
        "lodash": "^4.17.19"
      }
    },
+    "react-copy-to-clipboard": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.3.tgz",
+      "integrity": "sha512-9S3j+m+UxDZOM0Qb8mhnT/rMR0NGSrj9A/073yz2DSxPMYhmYFBMYIdI2X4o8AjOjyFsSNxDRnCX6s/gRxpriw==",
+      "requires": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      }
+    },
    "react-dev-utils": {
      "version": "11.0.4",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -36654,6 +36869,26 @@
        }
      }
    },
+    "react-redux": {
+      "version": "7.2.4",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.4.tgz",
+      "integrity": "sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@types/react-redux": "^7.1.16",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.13.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
    "react-refresh": {
      "version": "0.8.3",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -36974,6 +37209,14 @@
        "strip-indent": "^3.0.0"
      }
    },
+    "redux": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.0.tgz",
+      "integrity": "sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==",
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
    "regenerate": {
      "version": "1.4.2",
      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -37448,6 +37691,23 @@
        "aproba": "^1.1.1"
      }
    },
+    "rxjs": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "peer": true,
+      "requires": {
+        "tslib": "^1.9.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "peer": true
+        }
+      }
+    },
    "safe-buffer": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -41351,6 +41611,15 @@
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "zone.js": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.11.4.tgz",
+      "integrity": "sha512-DDh2Ab+A/B+9mJyajPjHFPWfYU1H+pdun4wnnk0OcQTNjem1XQSZ2CDW+rfZEUDjv5M19SBqAkjZi0x5wuB5Qw==",
+      "peer": true,
+      "requires": {
+        "tslib": "^2.0.0"
+      }
    }
  }
 }
--- a/client/package.json
+++ b/client/package.json
@@ -6,18 +6,22 @@
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
+    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "chart.js": "^3.4.0",
    "moment": "^2.29.1",
+    "ngx-spinner": "^12.0.0",
    "node-sass": "^6.0.1",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-chartjs-2": "^3.0.3",
+    "react-copy-to-clipboard": "^5.0.3",
    "react-dom": "^17.0.2",
    "react-google-login": "^5.2.2",
    "react-kakao-login": "^2.1.0",
    "react-live-clock": "^5.2.0",
    "react-moment": "^1.1.1",
+    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-use": "^17.2.4",

--- a/client/public/index.html
+++ b/client/public/index.html
@@ -7,7 +7,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/images/Kakao.png" />
  <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,8 +24,49 @@
    -->
  <title>EUE, make your day</title>
  <script src='https://developers.kakao.com/sdk/js/kakao.min.js'></script>
-  <script>Kakao.init("29c2c90caed30db77d55580048c53d7b");</script>
-  <!-- <meta name ="google-signin-client_id" content="217755353555-3msma49ckq4fa47k0tg5tkshatcdh8c9.apps.googleusercontent.com"> -->
+  <script>
+    Kakao.init("29c2c90caed30db77d55580048c53d7b");
+    Kakao.isInitialized();
+    console.log(Kakao.isInitialized());
+
+    function loginWithKakao() {
+      Kakao.Auth.authorize({
+        redirectUri: 'http://localhost:3000/oauth'
+      })
+    }
+    // 아래는 데모를 위한 UI 코드입니다.
+    displayToken()
+    function displayToken() {
+      const token = getCookie('authorize-access-token')
+      if (token) {
+        Kakao.Auth.setAccessToken(token)
+        Kakao.Auth.getStatusInfo(({ status }) => {
+          if (status === 'connected') {
+            document.getElementById('token-result').innerText = 'login success. token: ' + Kakao.Auth.getAccessToken()
+          } else {
+            Kakao.Auth.setAccessToken(null)
+          }
+        })
+      }
+    }
+    function getCookie(name) {
+      const value = "; " + document.cookie;
+      const parts = value.split("; " + name + "=");
+      if (parts.length === 2) return parts.pop().split(";").shift();
+    }
+  </script>
+  <script type="text/javascript">
+    function loginWithKakaoPOP() {
+      Kakao.Auth.login({
+        success: function (authObj) {
+          alert(JSON.stringify(authObj))
+        },
+        fail: function (err) {
+          alert(JSON.stringify(err))
+        },
+      })
+    }
+  </script>
 </head>

 <body>

--- a/client/public/manifest.json
+++ b/client/public/manifest.json
@@ -8,7 +8,7 @@
      "type": "image/x-icon"
    },
    {
-      "src": "logo192.png",
+      "src": "images/Kakao.png",
      "type": "image/png",
      "sizes": "192x192"
    },

--- a/client/src/App.css
+++ b/client/src/App.css
@@ -2,13 +2,21 @@

 body {
  font-family: "Noto Sans KR", sans-serif !important;
-  
+
 }
+
 .a:hover {
    color: white;
 }
-.btn:active {
-  color : rgb(250, 220, 0);
+
+.btn-primary:active {
+  outline: white !important;
+  border-color: white !important;
+}
+
+.card .card-title {
+  color: rgb(109, 110, 109);
+  /* background-color: ; */
 }

 .form-group .form-control {
@@ -19,6 +27,7 @@ body {
  border-radius: 40px;
  background-color: rgb(110, 189, 142);
  border-color: ivory;
+  color: white;
 }

 #logpng {

--- a/client/src/App.js
+++ b/client/src/App.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 import './App.css';
 import Home from './pages/Home';
+import Oauth from './components/Oauth';


 function App() {
@@ -10,6 +11,7 @@ function App() {
    <Router>
      <>
      <Route exact path='/' component={Home} />
+      <Route path='/oauth' component={Oauth}/>
      </>
    </Router>
    

--- a/client/src/App.scss
+++ b/client/src/App.scss
-@media (max-width: 767.98px) { 
-  body {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    margin: 'auto'
-
-  }
- }
-
-@media (min-width: 768px) {
-  body {
-    padding-top: 20px;
-    padding-bottom: 20px;
-    margin: 'auto'
-
-  }
-
- }
\ No newline at end of file
--- a/client/src/components/ChartDoughnut.js
+++ b/client/src/components/ChartDoughnut.js
@@ -3,15 +3,16 @@ import { Container, Row, Card, Table, Button } from 'react-bootstrap';
 import { Doughnut } from 'react-chartjs-2'

 function ChartDoughnut() {
-    const fontstyl = {
+    const cardstyled = {
        fontSize: '0.5em',
        margin: 'auto',
        padding: '1em',
        display: 'flex',
        justifyContent: 'center',
        width: '100%',
-        borderWidth: '2px',
-        borderColor: 'rgba(195, 195, 195, 0.753)',
+        borderWidth: '1.5px',
+        borderRadius: '20px',
+        borderColor: '#04AB70',
        color: 'rgb(110, 189, 142)'
    }
    const btnstyled = {
@@ -72,7 +73,7 @@ function ChartDoughnut() {

        <>
            <Row className='text-center w-100 my-2'>
-                <Card style={fontstyl}>
+                <Card style={cardstyled}>
                    <Doughnut
                        data={data}
                        options={options}

--- a/client/src/components/ChartLine.js
+++ b/client/src/components/ChartLine.js
@@ -3,15 +3,16 @@ import { Container, Row, Card, Table, Button } from 'react-bootstrap';
 import { Line } from 'react-chartjs-2'

 function ChartLine() {
-    const fontstyl = {
+    const cardstyled = {
        fontSize: '0.5em',
        margin: 'auto',
        padding: '1em',
        display: 'flex',
        justifyContent: 'center',
        width: '100%',
-        borderWidth: '2px',
-        borderColor: 'rgba(195, 195, 195, 0.753)',
+        borderWidth: '1.5px',
+        borderRadius: '20px',
+        borderColor: '#04AB70',
        color: 'rgb(110, 189, 142)'
    }
    const btnstyled = {
@@ -43,35 +44,33 @@ function ChartLine() {
    const data = {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
        datasets: [
-          {
-            label: '온도',
-            fill: false,
-            lineTension: 0.1,
-            backgroundColor: 'rgba(75,192,192,0.4)',
-            borderColor: 'rgba(75,192,192,1)',
-            borderCapStyle: 'butt',
-            borderDash: [2,10], //점선 ex [2,10]
-            borderDashOffset: 0.0,
-            borderJoinStyle: 'miter',
-            pointBorderColor: 'rgba(75,192,192,1)',
-            pointBackgroundColor: '#fff',
-            pointBorderWidth: 1,
-            pointHoverRadius: 5,
-            pointHoverBackgroundColor: 'rgba(75,192,192,1)',
-            pointHoverBorderColor: 'rgba(220,220,220,1)',
-            pointHoverBorderWidth: 2,
-            pointRadius: 1,
-            pointHitRadius: 10,
-            data: [-10, -2, 13, 18, 22, 25, 31, 28, 25, 18, 6, -8]
-          }
+            {
+                label: '온도',
+                fill: false,
+                lineTension: 0.1,
+                backgroundColor: 'rgba(75,192,192,0.4)',
+                borderColor: 'rgba(75,192,192,1)',
+                borderCapStyle: 'butt',
+                borderDash: [2, 10], //점선 ex [2,10]
+                borderDashOffset: 0.0,
+                borderJoinStyle: 'miter',
+                pointBorderColor: 'rgba(75,192,192,1)',
+                pointBackgroundColor: '#fff',
+                pointBorderWidth: 1,
+                pointHoverRadius: 5,
+                pointHoverBackgroundColor: 'rgba(75,192,192,1)',
+                pointHoverBorderColor: 'rgba(220,220,220,1)',
+                pointHoverBorderWidth: 2,
+                pointRadius: 1,
+                pointHitRadius: 10,
+                data: [-10, -2, 13, 18, 22, 25, 31, 28, 25, 18, 6, -8]
+            }
        ]
-      };
+    };

    return (
-
-        <>
            <Row className='text-center w-100 my-2'>
-                <Card style={fontstyl}>
+                <Card style={cardstyled}>
                    <Line
                        data={data}
                        options={options}
@@ -79,7 +78,6 @@ function ChartLine() {
                    />
                </Card>
            </Row>
-        </>
    )
 }


--- a/client/src/components/EueSuggest.js
+++ b/client/src/components/EueSuggest.js
@@ -2,15 +2,16 @@ import React from 'react'
 import { Container, Row, Card, Table, Button } from 'react-bootstrap';

 function EueSuggest() {
-    const fontstyl = {
+    const cardstyled = {
        fontSize: '0.5em',
        margin: 'auto',
        padding: '1em',
        display: 'flex',
        justifyContent: 'center',
        width: '100%',
-        borderWidth: '2px',
-        borderColor: 'rgba(195, 195, 195, 0.753)',
+        borderWidth: '1.5px',
+        borderRadius: '20px',
+        borderColor: '#04AB70',
        color: 'rgb(110, 189, 142)'
    }
    const btnstyled = {
@@ -24,10 +25,8 @@ function EueSuggest() {
    }

    return (
-
-        <>
            <Row className='text-center w-100 my-2'>
-                <Card style={fontstyl}>
+                <Card style={cardstyled}>
                    <Card.Title>
                        EUE 제안
                    </Card.Title>
@@ -36,7 +35,6 @@ function EueSuggest() {
                    </Card.Text>
                </Card>
            </Row>
-        </>
    )
 }


--- a/client/src/components/Footer copy.js
+++ b/client/src/components/Footer copy.js
-import React from 'react'
-import { Container, Row, Card, Table, Button } from 'react-bootstrap';
-import { Bar } from 'react-chartjs-2'
-
-function Footer2() {
-    const fontstyl = {
-        fontSize: '0.5em',
-        margin: 'auto',
-        padding: '1em',
-        display: 'flex',
-        justifyContent: 'center',
-        width: '100%',
-        borderWidth: '2px',
-        borderColor: 'rgba(195, 195, 195, 0.753)',
-        color: 'rgb(110, 189, 142)'
-    }
-    const btnstyled = {
-        background: 'rgb(110, 189, 142)',
-        margin: '1px',
-        maxWidth: '100%',
-        borderWidth: '2px',
-        fontSize: '10px',
-        borderColor: 'rgba(195, 195, 195, 0.753)',
-        borderRadius: '20px',
-    }
-
-
-    return (
-
-        <>
-            <Row className='text-center w-100 my-2'>
-                <Card style={fontstyl}>
-
-                </Card>
-            </Row>
-        </>
-    )
-}
-
-export default Footer2;
\ No newline at end of file
--- a/client/src/components/Footer.js
+++ b/client/src/components/Footer.js
-import React from 'react'
-import { Container, Row, Card, Table, Button } from 'react-bootstrap';
-import { Bar } from 'react-chartjs-2'
+import React, { useEffect, useRef, useState } from 'react'
+import { Container, Row, Card, Table, Button, Col, Modal, ModalTitle, Overlay, Tooltip } from 'react-bootstrap';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import '../App.css'

 function Footer() {
-    const fontstyl = {
+    const cardstyled = {
        fontSize: '0.5em',
        margin: 'auto',
        padding: '1em',
        display: 'flex',
        justifyContent: 'center',
        width: '100%',
-        borderWidth: '2px',
-        borderColor: 'rgba(195, 195, 195, 0.753)',
+        borderWidth: '1.5px',
+        borderRadius: '20px',
+        borderColor: '#04AB70',
        color: 'rgb(110, 189, 142)'
    }
+
    const btnstyled = {
-        background: 'rgb(110, 189, 142)',
+        background: 'white',
        margin: '1px',
-        maxWidth: '100%',
+        maxWidth: 'fit-content',
        borderWidth: '2px',
        fontSize: '10px',
+        color: 'rgb(110, 189, 142)',
        borderColor: 'rgba(195, 195, 195, 0.753)',
        borderRadius: '20px',
+
    }

-    const options = {
-        legend: {
-            display: true, // label 보이기 여부
-        },
-        scales: {
-            yAxes: [{
-                ticks: {
-                    min: 0, // y축 스케일에 대한 최소값 설정
-                    stepSize: 1, // y축 그리드 한 칸당 수치
-                }
-            }]
-        },
+    const [donateShow, setDonateShow] = useState(false);

-        // false : 사용자 정의 크기에 따라 그래프 크기가 결정됨.
-        // true : 크기가 알아서 결정됨.
-        maintainAspectRatio: false
+
+    function clickAndCopy() {
+        return new Promise((resolve) => setTimeout(resolve, 2000))
    }
-    const data = {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
-        datasets: [
-          {
-            label: '온도',
-            fill: false,
-            lineTension: 0.1,
-            backgroundColor: 'rgba(75,192,192,0.4)',
-            borderColor: 'rgba(75,192,192,1)',
-            borderCapStyle: 'butt',
-            borderDash: [2,10], //점선
-            borderDashOffset: 0.0,
-            borderJoinStyle: 'miter',
-            pointBorderColor: 'rgba(75,192,192,1)',
-            pointBackgroundColor: '#fff',
-            pointBorderWidth: 1,
-            pointHoverRadius: 5,
-            pointHoverBackgroundColor: 'rgba(75,192,192,1)',
-            pointHoverBorderColor: 'rgba(220,220,220,1)',
-            pointHoverBorderWidth: 2,
-            pointRadius: 1,
-            pointHitRadius: 10,
-            data: [-10, -2, 13, 18, 22, 25, 31, 28, 25, 18, 6, -8]
-          }
-        ]
-      };
+
+    // function CopyShow() {
+    const [isCopyshow, setCopyShow] = useState(false);
+
+    useEffect(() => {
+        if (isCopyshow) {
+            clickAndCopy().then(() => {
+                setCopyShow(false);
+            });
+        }
+    }, [isCopyshow]);
+
+    // }
+    const handleClick = () => setCopyShow(true);

    return (
+        <Row className='text-center w-100 my-2'>
+            <Card style={cardstyled}>
+                <Row className='my-1 d-flex justify-content-center' style={{ fontSize: '15px', color: 'rgb(109, 110, 109)' }}>
+                    서버비용 후원하기
+                </Row>
+                <Row className='my-1 d-flex justify-content-center'>
+                    이용하시는데 불편함이 없도록 광고 없이 운영하고 있습니다. <br />
+                    서버비용 충당 후 후원금이 남을시 UNICEF 에 기부하겠습니다.
+                </Row>
+                <Row className='my-1 d-flex justify-content-center'>
+                    <Button variant='light' style={btnstyled} onClick={() => setDonateShow(true)}>
+                        ♥ 후원하기
+                    </Button>
+                    <Modal
+                        size='sm'
+                        show={donateShow}
+                        onHide={() => setDonateShow(false)}
+                        style={{ top: '80px', left: '1vw' }}
+                    >
+                        <Modal.Header className='d-flex justify-content-center'>
+                            <Modal.Title style={{fontSize: '1em'}}>
+                                Thank you for your Donation
+                            </Modal.Title>
+                        </Modal.Header>
+                        <Modal.Body>
+                            <Col className='d-flex justify-content-center text-center' style={{ flexDirection: 'column' }}>
+                                <p style={{ color: 'rgb(109, 110, 109)', margin: '1em', fontSize: '15px' }}>
+                                    카카오뱅크
+                                </p>
+                                <CopyToClipboard text={'박상호 3333-16-7299769'}>
+                                    <p className='m-auto' style={btnstyled} >
+                                        박상호 3333-16-7299769
+                                        <Button variant='light'
+                                            disabled={isCopyshow}
+                                            onClick={!isCopyshow ? handleClick : null}
+                                            style={{
+                                                background: 'lightgray',
+                                                margin: '5px',
+                                                maxWidth: 'fit-content',
+                                                borderWidth: '2px',
+                                                fontSize: '10px',
+                                                color: 'black',
+                                                border: 'none',
+                                                whiteSpace: 'nowrap'
+                                            }}>
+                                            {isCopyshow ? '복사 성공!' : '복사'}
+                                        </Button>
+                                    </p>
+                                </CopyToClipboard>
+                            </Col>
+                        </Modal.Body>
+
+                    </Modal>
+                </Row>
+                <Row className='my-1 d-flex justify-content-center flex-direction-column' style={{ color: 'rgb(109, 110, 109)', flexDirection: 'column' }}>
+                    <Col>
+                        <a href='https://www.notion.so/EUE-047f1812c6c24096a528dfd3330c227d' style={{ color: 'rgb(110, 189, 142)' }}>TEAM EUE </a> : 안강민, 박상호, 박예은
+                    </Col>
+                    <Col>
+                        © 2021 TEAM EUE. All rights reserved
+                    </Col>
+                </Row>

-        <>
-            <Row className='text-center w-100 my-2'>
-                <Card style={fontstyl}>
-                    <Bar
-                        data={data}
-                        options={options}
-                        height={300}
-                    />
-                </Card>
-            </Row>
-        </>
+            </Card>
+        </Row>
    )
 }


--- a/client/src/components/KakaoLogin.js
+++ b/client/src/components/KakaoLogin.js
-// import React from 'react'
-// import { Image } from 'react-bootstrap'
-// import KaKaoLogin from 'react-kakao-login'
-
-// function KakaoLogin() {
-//     // Kakao.Auth.login({
-//     //     success: function (authObj) {
-//     //         alert(JSON.stringify(authObj))
-//     //     },
-//     //     fail: function (err) {
-//     //         alert(JSON.stringify(err))
-//     //     },
-//     // })
-//     return (
-//         <div>
-//         <KakaoLogin
-//             token={'JAVASCRIPT KEY를 입력하세요.!!!'}
-//             onSuccess={console.log}
-//             onFail={console.error}
-//             onLogout={console.info}
-//         />
-//       </div>
-//     )
-// }
-
-// export default KakaoLogin;
\ No newline at end of file
--- a/client/src/components/MainLayer.js
+++ b/client/src/components/MainLayer.js
@@ -15,7 +15,8 @@ function MainLayer() {
        marginBottom: '1em',
        width: '100%',
        backgroundSize: 'contain',
-        margin: 'auto'
+        margin: 'auto',
+        textDecorationColor: 'none'
    }

    const btnstyled = {
@@ -28,6 +29,8 @@ function MainLayer() {
        fontSize: '10px',
        borderColor: 'rgba(195, 195, 195, 0.753)',
        borderRadius: '20px',
+        textDecorationColor: 'none',
+        color: 'white'
    }

    const loginstyled = {
@@ -47,6 +50,7 @@ function MainLayer() {

    const [logshow, setLogshow] = useState(false);
    const [signshow, setSignshow] = useState(false);
+    const [isLogin, setIsLogin] = useState(false)


    return (
@@ -57,12 +61,13 @@ function MainLayer() {
                        <Image src='/images/EUE11.jpg' alt='EUE' style={boxstyled} />
                    </Link>
                </Col>
-                <Dropdown className='d-sm-block d-md-none' style={{ fontSize: '1em' }}>
+                <Dropdown className='d-sm-block d-md-none' style={{ fontSize: '1em' }}
+                >
                    <Dropdown.Toggle style={btnstyled} id="dropdown-basic">
                    </Dropdown.Toggle>
                    <Dropdown.Menu className='z-index-10'>
                        <Dropdown.Item href="#/action-1">
-                            <Button className='w-100 m-auto' style={btnstyled} onClick={() => setLogshow(true)}>
+                            <Button variant='light' className='w-100 m-auto' style={btnstyled} onClick={() => setLogshow(true)}>
                                LOGIN
                            </Button>
                            <Modal
@@ -76,7 +81,7 @@ function MainLayer() {
                        </Dropdown.Item>
                        <Dropdown.Item href="#/action-2">

-                            <Button className='w-100 m-auto' style={btnstyled} onClick={() => setSignshow(true)}>
+                            <Button variant='light' className='w-100 m-auto' style={btnstyled} onClick={() => setSignshow(true)}>
                                SIGN UP
                            </Button>
                            <Modal
@@ -94,7 +99,7 @@ function MainLayer() {

            <Row className='d-none d-md-flex justify-content-center align-items-center my-3 mx-auto w-100'>
                <ButtonGroup vertical className='m-auto' style={{ width: '100%' }}>
-                    <Button style={btnstyled} onClick={() => setLogshow(true)}>LOGIN</Button>
+                    <Button variant='light' style={btnstyled} onClick={() => setLogshow(true)}>LOGIN</Button>
                    <Modal
                        size="sm"
                        show={logshow}
@@ -105,7 +110,7 @@ function MainLayer() {

                    </Modal>

-                    <Button style={btnstyled} onClick={() => setSignshow(true)}>SIGN UP</Button>
+                    <Button variant='light' style={btnstyled} onClick={() => setSignshow(true)}>SIGN UP</Button>
                    <Modal
                        size="md"
                        show={signshow}

--- a/client/src/components/OAuth.js
+++ b/client/src/components/OAuth.js
-const CLIENT_ID = 'a564b730d6339b084ecf7775a9a09284';
-const REDIRECT_URI = 'http://localhost:3000/oauth';
+import axios from 'axios';
+import { Spinner, Button, Col, Row } from 'react-bootstrap';
+import { KAKAO_AUTH_URL } from './Oauth';
+import { Link, Redirect } from 'react-router-dom';

-export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
\ No newline at end of file
+// export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+
+function Oauth() {
+    const REST_API_KEY = 'a564b730d6339b084ecf7775a9a09284';
+    const REDIRECT_URI = 'http://localhost:3000/oauth';
+
+    const url = new URL(window.location.href)
+    const authorizationCode = url.searchParams.get('code')
+    console.log('인가 코드', authorizationCode);
+
+
+    const kakaoAuthURl = `https://kauth.kakao.com/oauth/token`
+    // const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`
+
+    const payload = {
+        grant_type: "authorization_code",
+        client_id: `${REST_API_KEY}`,
+        redirect_uri: `${REDIRECT_URI}`,
+        code: `${authorizationCode}`
+    }
+    const params = new URLSearchParams();
+    params.append('grant_type', 'authorization_code')
+    params.append('client_id', `${REST_API_KEY}`)
+    params.append('redirect_uri', `${REDIRECT_URI}`)
+    params.append('code', `${authorizationCode}`)
+    axios.post(kakaoAuthURl, params).then(response => console.log(response))
+
+    function locateHome() {
+        window.location.replace('/')
+    };
+    setTimeout(locateHome, 3000)
+
+    return (
+        <Row className='d-block'>
+            <Col className='text-center m-auto' style={{ fontSize: '5px' }} >
+                인가코드 : {authorizationCode}
+                <br />
+                Params : {params}
+            </Col>
+            <Button id='formbtn' className='d-flex justify-content-center align-items-center m-auto' style={{ width: '200px', height: '200px', flexDirection: 'column' }} disabled>
+                <Spinner animation="border" role="status">
+                    <span className="sr-only">Loading...</span>
+                </Spinner>
+                <br />
+                Loading...
+            </Button>
+        </Row>
+    )
+}
+export default Oauth;
\ No newline at end of file
--- a/client/src/components/TimeNow.js
+++ b/client/src/components/TimeNow.js
@@ -5,21 +5,21 @@ import '../App.css'


 function TimeNow() {
-        const fontstyl = {
-            fontSize: '0.5em',
-            margin: 'auto',
-            padding: '1em',
-            display: 'flex',
-            justifyContent: 'center',
-            width: '100%',
-            borderWidth: '2px',
-            borderColor: 'rgba(195, 195, 195, 0.753)',
-            color: 'rgb(110, 189, 142)'
-        }
+    const cardstyled = {
+        fontSize: '0.5em',
+        margin: 'auto',
+        padding: '1em',
+        display: 'flex',
+        justifyContent: 'center',
+        width: '100%',
+        borderWidth: '1.5px',
+        borderRadius: '20px',
+        borderColor: '#04AB70',
+        color: 'rgb(110, 189, 142)'
+    }
        return (
-            <>
                <Row className='text-center w-100 my-2'>
-                    <Card style={fontstyl}>
+                    <Card style={cardstyled}>
                        <Card.Title style={{color:'black'}}>
                            현재시각
                        </Card.Title>
@@ -30,7 +30,6 @@ function TimeNow() {
                        </Card.Text>
                    </Card>
                </Row>
-            </>
        )
 }


--- a/client/src/components/Trydays.js
+++ b/client/src/components/Trydays.js
 import React from 'react'
 import { Container, Row, Card, Table, Button } from 'react-bootstrap';
+import '../App.css'
+

 function Trydays() {
-    const fontstyl = {
+    const cardstyled = {
        fontSize: '0.5em',
        margin: 'auto',
        padding: '1em',
        display: 'flex',
        justifyContent: 'center',
        width: '100%',
-        borderWidth: '2px',
-        borderColor: 'rgba(195, 195, 195, 0.753)',
+        borderWidth: '1.5px',
+        borderRadius: '20px',
+        borderColor: '#04AB70',
        color: 'rgb(110, 189, 142)'
    }
    const btnstyled = {
@@ -19,14 +22,14 @@ function Trydays() {
        maxWidth: '100%',
        borderWidth: '2px',
        fontSize: '10px',
-        borderColor: 'rgba(195, 195, 195, 0.753)',
+        borderColor: 'rgba(195, 195, 195, 0.712)',
        borderRadius: '20px',
+        color: 'white'
    }

    return (
-        <>
            <Row className='text-center w-100 my-2'>
-                <Card style={fontstyl}>
+                <Card style={cardstyled}>
                    <Card.Title>
                        유저아이디
                    </Card.Title>
@@ -34,7 +37,7 @@ function Trydays() {
                        지역
                        울릉면
                        지역코드
-                        <Button style={btnstyled}>
+                        <Button variant='light' style={btnstyled}>
                            변경
                        </Button>

@@ -45,7 +48,6 @@ function Trydays() {
                    </Card.Text>
                </Card>
            </Row>
-        </>
    )
 }


--- a/client/src/pages/Home.js
+++ b/client/src/pages/Home.js
 import React from 'react'
-import { Container, Row, Col, Button, ButtonGroup, Image, Form, Media } from 'react-bootstrap';
+import { Container, Row, Col } from 'react-bootstrap';
 import MainLayer from '../components/MainLayer';
 import TimeNow from './../components/TimeNow';
 import '../App.css'
@@ -8,6 +8,7 @@ import EueSuggest from '../components/EueSuggest';
 import ChartLine from '../components/ChartLine';
 import ChartDoughnut from '../components/ChartDoughnut';
 import Footer from './../components/Footer';
+import { useEffect } from 'react';


 function Home() {
@@ -31,16 +32,14 @@ function Home() {
        flexDirection: 'column',
        padding: '0'
    }
-    
-    const stickybox = {
-        zIndex: '10', border: 'solid', borderWidth: '1px', borderColor: 'rgba(195, 195, 195, 0.753)',
-        borderRadius: '10px', padding: '15px', boxShadow: '0.5px 0.5px gray', margin: '5px', boxSizing:'border-box'
-    }
+    useEffect(() => {
+        console.log('마운트 될때마다 실행');
+    }, []);

    return (
        <Container fluid className='d-flex justify-content-center position-relative'>
            <Row style={constyled}>
-                <Col xs={12} md={4} className='d-flex justify-content-center m-2' id='stickyy'>
+                <Col xs={12} md={4} className='d-flex justify-content-center' id='stickyy'>
                    <Row style={col1sty} className='m-auto'>
                        <MainLayer />
                    </Row>
@@ -48,12 +47,13 @@ function Home() {
                </Col>
                <Col md={6} style={col2sty}>
                    <Row style={constyled} className='d-flex mb-2 w-100'>
-                        <TimeNow />
+                        {/* <KakaoLogin/> */}
+                        {/* <TimeNow /> */}
                        <Trydays />
-                        <EueSuggest/>
-                        <ChartLine/>
-                        <ChartDoughnut/>
-                        <Footer/>
+                        <EueSuggest />
+                        <ChartLine />
+                        <ChartDoughnut />
+                        <Footer />
                    </Row>
                </Col>
            </Row>

--- a/client/src/pages/LoginwithSocial.js
+++ b/client/src/pages/LoginwithSocial.js
 import React from 'react'
 import '../App.css'
 import { Form, Modal, Button, Row, Col, Image, Alert } from 'react-bootstrap';
-import { KAKAO_AUTH_URL } from './../components/OAuth';
+import Oauth from '../components/Oauth';
+import { useEffect } from 'react';
+import axios from 'axios';
+import { useState } from 'react';

 function LoginwithSocial() {

@@ -15,9 +18,16 @@ function LoginwithSocial() {

    }

+    function loginWithKakao() {
+        window.Kakao.Auth.authorize({
+          redirectUri: 'http://localhost:3000/oauth'
+        })
+    }
+    const [isLogin, setIsLogin] = useState(false)
+
    return (
-        <>
-            <Modal.Header className='d-flex justify-content-center'>
+        <Row className='m-auto'>
+            <Modal.Header className='d-flex justify-content-center w-100'>
                <Modal.Title id="example-modal-sizes-title-sm">
                    LOGIN
                </Modal.Title>
@@ -31,17 +41,24 @@ function LoginwithSocial() {
                    <Form.Group controlId="formBasicPassword">
                        <Form.Control type="password" placeholder="Password" />
                    </Form.Group>
-                    <Button type="submit" id='formbtn'>
+                    <Button variant='light' type="submit" id='formbtn'>
                        LOGIN
                    </Button>
                </Form>
                <hr />
                <Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
-                    {/* <KakaoLogin /> */}
-                    <a href={KAKAO_AUTH_URL} target='_blank' id='socialLink' >
-                        <Image src='/images/Kakao1.jpg' id='logpng' />
+                    <a href="#" onClick={loginWithKakao} id='socialLink' >
+                        <img src='/images/Kakao1.jpg' id='logpng' />
                        KAKAO
                    </a>
+                    <a href="javascript:loginWithKakao()" id='socialLink' >
+                        <img src='/images/Kakao1.jpg' id='logpng' />
+                        KAKAOHTML
+                    </a>
+                    <a href="javascript:loginWithKakaoPOP()" id='socialLink' >
+                        <img src='/images/Kakao1.jpg' id='logpng' />
+                        KAKAOPOP
+                    </a>
                    <a as='button' href="javascript:loginWithKakao()" id='socialLink'>
                        <Image src='/images/google.png' id='logpng' />
                        GOOGLE
@@ -52,7 +69,7 @@ function LoginwithSocial() {
                    </a>
                </Row>
            </Modal.Body>
-        </>
+        </Row>
    )
 }


--- a/client/src/pages/SignUp.js
+++ b/client/src/pages/SignUp.js
 import React from 'react'
 import '../App.css'
 import { Form, Modal, Button, Row, Col, Image } from 'react-bootstrap';
-import { KAKAO_AUTH_URL } from './../components/OAuth';
+// import { KAKAO_AUTH_URL } from '../components/Oauth';


 function SignUp() {
@@ -43,26 +43,17 @@ function SignUp() {
                        <Form.Control type="password2" placeholder="Confirm Password" />
                    </Form.Group>

-                    <Button type="submit" className='' id='formbtn'>
+                    <Button variant='light' type="submit" className='' id='formbtn'>
                        Sign Up
                    </Button>
                </Form>

                <hr />
-                {/* 
-                <p className='d-flex justify-content-center'>
-                    <a id="custom-login-btn" href="javascript:loginWithKakao()">
-                        <img
-                            src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
-                            width='200em'
-                        />
-                    </a>
-                </p> */}
                <Row style={{margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
-                        <a href={KAKAO_AUTH_URL} target='_blank' id='socialLink' >
+                        {/* <a href={KAKAO_AUTH_URL} target='_blank' id='socialLink' >
                            <Image src='/images/Kakao1.jpg' id='logpng' />
                            KAKAO
-                        </a>
+                        </a> */}
                        <a href="javascript:loginWithKakao()" id='socialLink'>
                            <Image src='/images/google.png' id='logpng' />
                            GOOGLE