diff --git a/package-lock.json b/package-lock.json index ae26def..552d4c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", + "axios": "^0.27.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.3.0", @@ -4797,6 +4798,28 @@ "node": ">=12" } }, + "node_modules/axios": { + "version": "0.27.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", + "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", + "dependencies": { + "follow-redirects": "^1.14.9", + "form-data": "^4.0.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", @@ -20187,6 +20210,27 @@ "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz", "integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA==" }, + "axios": { + "version": "0.27.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz", + "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==", + "requires": { + "follow-redirects": "^1.14.9", + "form-data": "^4.0.0" + }, + "dependencies": { + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + } + } + }, "axobject-query": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz", diff --git a/package.json b/package.json index 45ee750..f0085c7 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", + "axios": "^0.27.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.3.0", diff --git a/src/Components/Contents.js b/src/Components/Contents.js index ef40d11..b18304e 100644 --- a/src/Components/Contents.js +++ b/src/Components/Contents.js @@ -5,7 +5,7 @@ import Introduction from "./Tabs/Introduction"; import ErrorReport from "./Tabs/ErrorReport"; import SolutionReport from "./Tabs/SolutionReport"; -export default function TabNavigation() { +export default function Contents() { return ( diff --git a/src/Components/Tabs/GitHubLogin.js b/src/Components/Tabs/GitHubLogin.js new file mode 100644 index 0000000..a2c7b2d --- /dev/null +++ b/src/Components/Tabs/GitHubLogin.js @@ -0,0 +1,78 @@ +import axios from "axios"; +import { useState } from "react"; + +export default function GitHubLogin() { + const REST_API_KEY = "497a08df8fa6b9f4dc7f"; + const REDIRECT_URI = "http://localhost:3000/callback"; + const AUTH_URL = `https://github.com/login/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}`; + const url = new URL(window.location.href); + const authorizationCode = url.searchParams.get("code"); + + let local = localStorage.getItem("token"); + + let [userName, setUserName] = useState(); + let [avatar, setAvatar] = useState(); + + const limitToken = "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"; + const getAccessToken = async () => { + const baseUrl = "https://github.com/login/oauth/access_token"; + const config = { + client_id: "497a08df8fa6b9f4dc7f", + client_secret: "4e596b7fd2f4825e0523d5fea7de246b4fa59cd1", + code: authorizationCode, + }; + const params = new URLSearchParams(config).toString(); + const finalUrl = `${baseUrl}?${params}`; + const tokenRequest = await ( + await fetch(finalUrl, { + method: "POST", + headers: { + Accept: "application/json", + }, + }) + ).json(); + localStorage.setItem("token", tokenRequest.access_token); + // getGitHubUserInfo(); + return tokenRequest; + }; + + const getGitHubUserInfo = async () => { + const response = await axios.get("https://api.github.com/user", { + headers: { + authorization: `token ${local}`, // 토큰 명시 필수!!! + }, + }); + return response; + }; + + return ( +
+ 기여자 등록: + { + getAccessToken().then((response) => { + console.log(response); + }); + // getGitHubUserInfo().then((response) => { + // setUserName(response.data.name); + // setAvatar(response.data.avatar_url); + // console.log(userName); + // console.log(avatar); + // }); + }} + > + +
유저이름 : {userName}
+
+ 프로필사진 : + {!avatar ? ( + "" + ) : ( + iPhone_01 + )} +
+ +
+ ); +} diff --git a/src/Components/Tabs/SolutionReport.js b/src/Components/Tabs/SolutionReport.js index 5281a5a..d163d2e 100644 --- a/src/Components/Tabs/SolutionReport.js +++ b/src/Components/Tabs/SolutionReport.js @@ -1,5 +1,6 @@ import { useState } from "react"; -import styled from "styled-components"; + +import GitHubLogin from "./GitHubLogin"; import { TabWrapper, @@ -64,9 +65,9 @@ export default function SolutionReport() { {isDetailContentUnvisible ? null : ( <> - 기여자 등록: - GitHub 로그인 + + 내용: