feat: 완성

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"
   },

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());
+};

src/component/Loading/index.jsx → src/component/GithubLoading/index.jsx

@@ -15,7 +15,7 @@ const LoadingGif = styled.img`
   margin: 0 auto;
 `;
 
-const Loading = () => {
+const GithubLoading = () => {
   return (
     <>
       <Layout>
@@ -25,4 +25,4 @@ const Loading = () => {
   );
 };
 
-export default Loading;
+export default GithubLoading;

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: <Home></Home>,
   },
+  {
+    path: "/loading",
+    element: <Loading></Loading>,
+  },
   {
     path: "/result",
     element: <Result></Result>,
@@ -33,7 +44,9 @@ const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <GlobalStyle />
-    <RouterProvider router={router} />
+    <RecoilRoot>
+      <RouterProvider router={router} />
+    </RecoilRoot>
   </React.StrictMode>
 );
 

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 = () => {
         <SignIn>Github x GITI</SignIn>
         <Box>
           <Desc>Input Github Username</Desc>
-          <Input type="text" />
+          <Input onChange={onChangeInput} value={input} type="text" />
           <SignInBtn onClick={onClick}>분석</SignInBtn>
         </Box>
       </Wrapper>

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 (
+    <>
+      <GithubLoading></GithubLoading>
+    </>
+  );
+};
+
+export default Loading;