[Edit] Apply Chakra on React

@@ -3,11 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/core": "^0.8.0",
+    "@chakra-ui/react": "^1.6.3",
+    "@emotion/react": "11",
+    "@emotion/styled": "11",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "framer-motion": "4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"
   },

-import logo from './logo.svg';
-import './App.css';
+import React, { useEffect } from 'react'
+import { BrowserRouter, Route, Redirect, Switch, Link } from 'react-router-dom'
+import { ChakraProvider } from "@chakra-ui/react"
+import Index from './components/Index'
 
-function App() {
+const App = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    <ChakraProvider>
+      <BrowserRouter>
+        <Switch>
+          <Route exact path="/" component={Index}/>
+          <Redirect path="*" to="/"/>
+        </Switch>
+      </BrowserRouter>
+    </ChakraProvider>
+  )
 }
 
-export default App;
+export default App

+import React, { useEffect } from 'react'
+import { BrowserRouter, Route, Redirect, Switch, Link } from 'react-router-dom'
+import { Container } from "@chakra-ui/react"
+
+
+const Index = () => {
+  return (
+    <Container>
+      asdfasdfasdf
+    </Container>
+  )
+}
+
+export default Index