[Team-18][FE] Sonya

FE/tracker/README.md

@@ -2,11 +2,11 @@ FRONTEND README.. reference..
 
 # 베낀 코드
 
-## [How to implement login with github in a react app](https://levelup.gitconnected.com/how-to-implement-login-with-github-in-a-react-app-bd3d704c64fc)
+### [How to implement login with github in a react app](https://levelup.gitconnected.com/how-to-implement-login-with-github-in-a-react-app-bd3d704c64fc)
 
 <br>
 
-**중요 포인트**
+## 중요 포인트
 
     1. We imported and utilized AuthContext to make the global state and actions in our store available in this component.
 
@@ -18,26 +18,26 @@ FRONTEND README.. reference..
 
 [(아티클 내 reference link ^^ )Login to your Github account and create an OAuth app by following the steps provided here.](https://docs.github.com/en/developers/apps/building-oauth-apps/creating-an-oauth-app)
 
-## [Github OAuth authentication react and node](https://codevoweb.com/github-oauth-authentication-react-and-node/)
+### [Github OAuth authentication react and node](https://codevoweb.com/github-oauth-authentication-react-and-node/)
 
-## [Node TypeScript Mongodb JWT Authentication](https://codevoweb.com/node-typescript-mongodb-jwt-authentication/)
+### [Node TypeScript Mongodb JWT Authentication](https://codevoweb.com/node-typescript-mongodb-jwt-authentication/)
 
-## [How to Create the Matrix Text Effect With JavaScript](https://betterprogramming.pub/how-to-create-the-matrix-text-effect-with-javascript-325c6bb7d96e)
+### [How to Create the Matrix Text Effect With JavaScript](https://betterprogramming.pub/how-to-create-the-matrix-text-effect-with-javascript-325c6bb7d96e)
 
-## [MUI Table(with TypeScript)](https://mui.com/material-ui/react-table/)
+### [MUI Table(with TypeScript)](https://mui.com/material-ui/react-table/)
 
 <br>
 <br>
 
-# 개념 참고
+# 개념
 
-## [What is "User authorization callback URL" for?](https://github.community/t/what-is-user-authorization-callback-url-for/13990)
+### [What is "User authorization callback URL" for?](https://github.community/t/what-is-user-authorization-callback-url-for/13990)
 
-## [Basics of authentication(깃헙 공식문서)](https://docs.github.com/en/rest/guides/basics-of-authentication#providing-a-callback)
+### [Basics of authentication(깃헙 공식문서)](https://docs.github.com/en/rest/guides/basics-of-authentication#providing-a-callback)
 
     Authorization callback URL : This is easily the most important piece to setting up your application. It's the callback URL that GitHub returns the user to after successful authentication.
 
-## [(캔버스 개념) Canvas With React JS](https://medium.com/@pdx.lucasm/canvas-with-react-js-32e133c05258)
+### [(캔버스 개념) Canvas With React JS](https://medium.com/@pdx.lucasm/canvas-with-react-js-32e133c05258)
 
 ```javascript
 const canvasRef = useRef(null);
@@ -51,23 +51,28 @@ const context = canvas.getContext("2d");
 
     The __useEffect__ hook allow us to perform side effects in function components... the component did amount. Right after the canvas element is available in the dom for us, we want to get it on javascript to take its context and make some draw... If we pass only the first argument(the function), useEffect will call the function after every single update of the componenet.
 
-## [export VS export default](https://mattshelley.dev/export-vs-export-default/)
+### [export VS export default](https://mattshelley.dev/export-vs-export-default/)
 
     If you're only exporting a single class or function, use export default... If a module's primary purpose is to house one specific export, then you should consider exporting it as a default export. This makes both importing and actually using the import a little easieer.
 
     Further, TypeScript recommends named exports when there are multiple things to export
 
-## [Ways of Getting Data from API in React](https://dev.to/olenadrugalya/ways-of-getting-data-from-api-in-react-2kpf)
+### [Ways of Getting Data from API in React](https://dev.to/olenadrugalya/ways-of-getting-data-from-api-in-react-2kpf)
 
 <br>
 <br>
 
-# 고마워요 에러 해결사!
+# Error
 
-## + Mathed leaf route at location "/" does not have an element
+### [Mathed leaf route at location "/" does not have an element](https://stackoverflow.com/questions/69854011/matched-leaf-route-at-location-does-not-have-an-element)
 
-: https://stackoverflow.com/questions/69854011/matched-leaf-route-at-location-does-not-have-an-element
+### [React: 'Redirect' is not exported from 'react-router-dom'](https://stackoverflow.com/questions/63690695/react-redirect-is-not-exported-from-react-router-dom)
 
-## + React: 'Redirect' is not exported from 'react-router-dom'
+### [How to delay page rendering until data received from Api](https://stackoverflow.com/questions/67979782/how-to-delay-page-rendering-until-data-received-from-api)
 
-: https://stackoverflow.com/questions/63690695/react-redirect-is-not-exported-from-react-router-dom
+<br>
+<br>
+
+# React TypeScript
+
+## [React TypeScript](https://create-react-app.dev/docs/adding-typescript/)

FE/tracker/package.json

@@ -9,7 +9,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^28.1.2",
+    "@types/jest": "^28.1.3",
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",

FE/tracker/src/components/Modals/filterModal.jsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+// MUI
+import { TextField, Button, Box } from "@mui/material";
+
+function FilterModal() {
+    const [filterModal, setFilterModal] = React.useState(false);
+    const modalClose = () => {
+        setFilterModal(!filterModal);
+    };
+
+    return (
+        <Box>
+            <TextField />
+            <Button>검색</Button>
+            <Button onClick={modalClose}></Button>
+        </Box>
+    );
+}
+
+export default FilterModal;