diff --git a/package-lock.json b/package-lock.json index 5e1aafa..cc544e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.4.4", "react-scripts": "^5.0.1", + "recoil": "^0.7.6", "styled-components": "^5.3.6", "web-vitals": "^2.1.4" } @@ -8557,6 +8558,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/hamt_plus": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz", + "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==" + }, "node_modules/handle-thing": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", @@ -14399,6 +14405,25 @@ "node": ">=8.10.0" } }, + "node_modules/recoil": { + "version": "0.7.6", + "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.6.tgz", + "integrity": "sha512-hsBEw7jFdpBCY/tu2GweiyaqHKxVj6EqF2/SfrglbKvJHhpN57SANWvPW+gE90i3Awi+A5gssOd3u+vWlT+g7g==", + "dependencies": { + "hamt_plus": "1.0.2" + }, + "peerDependencies": { + "react": ">=16.13.1" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/recursive-readdir": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz", @@ -23268,6 +23293,11 @@ "duplexer": "^0.1.2" } }, + "hamt_plus": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz", + "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==" + }, "handle-thing": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", @@ -27303,6 +27333,14 @@ "picomatch": "^2.2.1" } }, + "recoil": { + "version": "0.7.6", + "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.6.tgz", + "integrity": "sha512-hsBEw7jFdpBCY/tu2GweiyaqHKxVj6EqF2/SfrglbKvJHhpN57SANWvPW+gE90i3Awi+A5gssOd3u+vWlT+g7g==", + "requires": { + "hamt_plus": "1.0.2" + } + }, "recursive-readdir": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz", diff --git a/package.json b/package.json index b5a5d2f..1adb472 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.4.4", "react-scripts": "^5.0.1", + "recoil": "^0.7.6", "styled-components": "^5.3.6", "web-vitals": "^2.1.4" }, diff --git a/src/api/index.js b/src/api/index.js new file mode 100644 index 0000000..da03a35 --- /dev/null +++ b/src/api/index.js @@ -0,0 +1,10 @@ +const BASE_URL = "https://c831-121-151-37-157.jp.ngrok.io"; + +export const getGITI = (username) => { + return fetch(`${BASE_URL}/giti?github=${username}`, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }).then((res) => res.json()); +}; diff --git a/src/asset/ENFJ.jpeg b/src/asset/ENFJ.jpeg new file mode 100644 index 0000000..9d0b57a Binary files /dev/null and b/src/asset/ENFJ.jpeg differ diff --git a/src/asset/ENFP.jpeg b/src/asset/ENFP.jpeg new file mode 100644 index 0000000..f99abce Binary files /dev/null and b/src/asset/ENFP.jpeg differ diff --git a/src/asset/ESFJ.jpeg b/src/asset/ESFJ.jpeg new file mode 100644 index 0000000..8ad09f2 Binary files /dev/null and b/src/asset/ESFJ.jpeg differ diff --git a/src/asset/ESFP.jpeg b/src/asset/ESFP.jpeg new file mode 100644 index 0000000..15fe21a Binary files /dev/null and b/src/asset/ESFP.jpeg differ diff --git a/src/asset/ESTJ.jpeg b/src/asset/ESTJ.jpeg new file mode 100644 index 0000000..3197ab4 Binary files /dev/null and b/src/asset/ESTJ.jpeg differ diff --git a/src/asset/ESTP.jpeg b/src/asset/ESTP.jpeg new file mode 100644 index 0000000..dff9f57 Binary files /dev/null and b/src/asset/ESTP.jpeg differ diff --git a/src/asset/INFJ.jpeg b/src/asset/INFJ.jpeg new file mode 100644 index 0000000..97936ed Binary files /dev/null and b/src/asset/INFJ.jpeg differ diff --git a/src/asset/INFP.jpeg b/src/asset/INFP.jpeg new file mode 100644 index 0000000..a372eb1 Binary files /dev/null and b/src/asset/INFP.jpeg differ diff --git a/src/asset/INTP.jpeg b/src/asset/INTP.jpeg new file mode 100644 index 0000000..6f5fc3a Binary files /dev/null and b/src/asset/INTP.jpeg differ diff --git a/src/asset/ISFP.jpeg b/src/asset/ISFP.jpeg new file mode 100644 index 0000000..ef3314d Binary files /dev/null and b/src/asset/ISFP.jpeg differ diff --git a/src/asset/ISTJ.jpeg b/src/asset/ISTJ.jpeg new file mode 100644 index 0000000..9ab8b64 Binary files /dev/null and b/src/asset/ISTJ.jpeg differ diff --git a/src/asset/ISTP.jpeg b/src/asset/ISTP.jpeg new file mode 100644 index 0000000..7f14fa1 Binary files /dev/null and b/src/asset/ISTP.jpeg differ diff --git a/src/component/Loading/index.jsx b/src/component/GithubLoading/index.jsx similarity index 87% rename from src/component/Loading/index.jsx rename to src/component/GithubLoading/index.jsx index d8343f8..3a97bda 100644 --- a/src/component/Loading/index.jsx +++ b/src/component/GithubLoading/index.jsx @@ -15,7 +15,7 @@ const LoadingGif = styled.img` margin: 0 auto; `; -const Loading = () => { +const GithubLoading = () => { return ( <> @@ -25,4 +25,4 @@ const Loading = () => { ); }; -export default Loading; +export default GithubLoading; diff --git a/src/index.js b/src/index.js index ad7f166..d07fb70 100644 --- a/src/index.js +++ b/src/index.js @@ -5,16 +5,23 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom"; import Home from "./page/Home"; import Result from "./page/Result"; import { createGlobalStyle } from "styled-components"; +import Loading from "./page/Loading"; +import { RecoilRoot } from "recoil"; const GlobalStyle = createGlobalStyle` *, *::before, *::after { box-sizing: border-box; + -webkit-appearance: none; } body, html { padding: 0; margin: 0; + height: 100%; + width: 100%; background-color: rgb(14,17,22); + -webkit-appearance: none; + } `; @@ -23,6 +30,10 @@ const router = createBrowserRouter([ path: "/", element: , }, + { + path: "/loading", + element: , + }, { path: "/result", element: , @@ -33,7 +44,9 @@ const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + + + ); diff --git a/src/page/Home/index.jsx b/src/page/Home/index.jsx index 040e11a..a767258 100644 --- a/src/page/Home/index.jsx +++ b/src/page/Home/index.jsx @@ -1,75 +1,90 @@ +import { useEffect } from "react"; +import { useState } from "react"; import { useNavigate } from "react-router-dom"; +import { useRecoilState } from "recoil"; import styled, { css } from "styled-components"; +import { userName } from "../../recoil"; -const Home = () => { - const navigate = useNavigate(); +const Wrapper = styled.div` + margin-top: 2rem; +`; - const Wrapper = styled.div` - margin-top: 2rem; - `; +const Logo = styled.div` + display: flex; + width: 100%; + justify-content: center; +`; - const Logo = styled.div` - display: flex; - width: 100%; - justify-content: center; - `; +const SignIn = styled.h1` + font-size: 1.8em; + color: white; + text-align: center; + font-weight: 400; +`; - const SignIn = styled.h1` - font-size: 1.8em; - color: white; - text-align: center; - font-weight: 400; - `; +const Box = styled.div` + font-size: 1.2em; + margin: 0 auto; + width: 90%; + max-width: 308px; + background: rgb(23, 27, 33); + border-radius: 10px; + text-align: center; + padding: 16px; + display: flex; + justify-contents: center; + flex-direction: column; +`; - const Box = styled.div` - font-size: 1.2em; - margin: 0 auto; - width: 90%; - max-width: 308px; - background: rgb(23, 27, 33); - border-radius: 10px; - text-align: center; - padding: 16px; - display: flex; - justify-contents: center; - flex-direction: column; - `; +const Desc = styled.label` + color: #c9d1d9; + display: block; + text-align: left; + width: 100%; + font-size: 14px; + padding: 8px 0; +`; - const Desc = styled.label` - color: #c9d1d9; - display: block; - text-align: left; - width: 100%; - font-size: 14px; - padding: 8px 0; - `; +const Input = styled.input` + background: rgb(14, 17, 22); + border-radius: 5px; + width: 100%; + border: solid 1px #30363d; + padding: 5px 12px; + line-height: 20px; + color: #c9d1d9; + outline: none; + margin-bottom: 16px; +`; - const Input = styled.input` - background: rgb(14, 17, 22); - border-radius: 5px; - width: 100%; - border: solid 1px #30363d; - padding: 5px 12px; - line-height: 20px; - color: #c9d1d9; - outline: none; - margin-bottom: 16px; - `; +const SignInBtn = styled.button` + display: block; + width: 100%; + border-radius: 6px; + background: #238636; + padding: 8px 0; + box-sizing: border-box; + border: none; + outline: none; + color: white; +`; - const SignInBtn = styled.button` - display: block; - width: 100%; - border-radius: 6px; - background: #238636; - padding: 8px 0; - box-sizing: border-box; - border: none; - outline: none; - color: white; - `; +const Home = () => { + const navigate = useNavigate(); + const [username, setUsername] = useRecoilState(userName); + const [input, setInput] = useState(""); + + useEffect(() => { + console.log(input); + }, [input]); + + const onChangeInput = (e) => { + setInput(e.target.value); + }; const onClick = () => { - navigate("/result"); + setUsername(input); + navigate("/loading"); }; return ( @@ -96,7 +111,7 @@ const Home = () => { Github x GITI Input Github Username - + 분석 diff --git a/src/page/Loading/index.jsx b/src/page/Loading/index.jsx new file mode 100644 index 0000000..54cd59a --- /dev/null +++ b/src/page/Loading/index.jsx @@ -0,0 +1,30 @@ +import { useEffect } from "react"; +import { useNavigate } from "react-router-dom"; +import { useRecoilState, useRecoilValue } from "recoil"; +import { getGITI } from "../../api"; +import GithubLoading from "../../component/GithubLoading"; +import { user, userName } from "../../recoil"; + +const Loading = () => { + const navigate = useNavigate(); + + const username = useRecoilValue(userName); + const [userInfo, setUserInfo] = useRecoilState(user); + + useEffect(() => { + setTimeout(() => { + getGITI(username).then((res) => { + setUserInfo(res); + navigate("/result"); + }); + }, 3000); + }, []); + + return ( + <> + + + ); +}; + +export default Loading; diff --git a/src/page/Result/index.jsx b/src/page/Result/index.jsx index d69b060..67a4613 100644 --- a/src/page/Result/index.jsx +++ b/src/page/Result/index.jsx @@ -1,9 +1,89 @@ -import Loading from "../../component/Loading"; +import { useEffect } from "react"; +import { useRecoilValue } from "recoil"; +import styled from "styled-components"; +import ISTJ from "../../asset/ISTJ.jpeg"; +import { user } from "../../recoil"; + +const Profile = styled.img` + border-radius: 100px; + width: 150px; + height: 150px; + margin: 16px; +`; + +const Wrapper = styled.div` + display: flex; + width: 100%; + height: 100vh; + justify-content: center; + align-items: center; +`; + +const Box = styled.div` + display: flex; + border: solid #444c56 1px; + max-width: 220px; + width: 90%; + padding: 16px; + box-sizing: border-box; + background: rgb(35, 39, 45); + border-radius: 6px; + flex-direction: column; + align-items: center; +`; + +const Title = styled.div` + width: 100%; + font-size: 16px; + color: #c9d1d9; + margin-bottom: 6px; + text-align: center; +`; + +const Desc = styled.div` + width: 100%; + font-size: 14px; + color: #768390; + margin-bottom: 16px; + text-align: center; +`; + +const ExportButton = styled.button` + display: block; + width: 100%; + border-radius: 6px; + background: #373e47; + padding: 8px 0; + box-sizing: border-box; + border: none; + outline: none; + color: #adbac7; + cursor: pointer; +`; const Result = () => { + const user_info = useRecoilValue(user); + + useEffect(() => { + console.log(user_info); + }, []); + return ( <> - + + + + + {user_info.nickname} {user_info.githubId} + + + {user_info.giti} {user_info.githubId} + + alert("구현중입니다.")}> + 공유하기 + + + ); }; diff --git a/src/recoil/index.js b/src/recoil/index.js new file mode 100644 index 0000000..b4cdd8f --- /dev/null +++ b/src/recoil/index.js @@ -0,0 +1,11 @@ +import { atom } from "recoil"; + +export const userName = atom({ + key: "userName", // unique ID (with respect to other atoms/selectors) + default: "", // default value (aka initial value) +}); + +export const user = atom({ + key: "user", // unique ID (with respect to other atoms/selectors) + default: {}, // default value (aka initial value) +});