From a0683c59b1f389590df2b3ad8551bbd6215f00fc Mon Sep 17 00:00:00 2001 From: onlinekkabchi Date: Mon, 27 Jun 2022 12:28:12 +0900 Subject: [PATCH 1/3] =?UTF-8?q?refactor=20[5]=20=EC=9D=B4=EC=8A=88?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EC=A7=80=EC=86=8D=EC=A0=81?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/tracker/README.md | 37 +-- FE/tracker/package-lock.json | 14 +- FE/tracker/package.json | 2 +- .../issueList/IssueList.function.tsx | 2 - .../src/components/issueList/issueList.tsx | 246 +++++++++--------- ...iissueListTable.tsx => issueListTable.tsx} | 2 - .../components/issueList/issueListToolbar.tsx | 115 ++++---- FE/tracker/src/components/signIn/matrix.jsx | 166 +++++++++--- 8 files changed, 345 insertions(+), 239 deletions(-) rename FE/tracker/src/components/issueList/{iissueListTable.tsx => issueListTable.tsx} (85%) diff --git a/FE/tracker/README.md b/FE/tracker/README.md index 9d2ae6e507..63a323094b 100644 --- a/FE/tracker/README.md +++ b/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)
-**중요 포인트** +## 중요 포인트 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/)

-# 개념 참고 +# 개념 -## [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,26 @@ 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)

-# 고마워요 에러 해결사! +# 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' +
+
+ +# React TypeScript -: https://stackoverflow.com/questions/63690695/react-redirect-is-not-exported-from-react-router-dom +## [React TypeScript](https://create-react-app.dev/docs/adding-typescript/) diff --git a/FE/tracker/package-lock.json b/FE/tracker/package-lock.json index 1f50e49a84..f4c4643ac1 100644 --- a/FE/tracker/package-lock.json +++ b/FE/tracker/package-lock.json @@ -14,7 +14,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", @@ -4077,9 +4077,9 @@ } }, "node_modules/@types/jest": { - "version": "28.1.2", - "resolved": "https://registry.npmjs.org/@types/jest/-/jest-28.1.2.tgz", - "integrity": "sha512-5dNM7mMuIrCtNJsFfvUO/5xCrG8swuT2c7ND+sl3XwlwxJf3k7e7o+PRvcFN/iIm8XhCqHqxLOj9yutDDOJoRg==", + "version": "28.1.3", + "resolved": "https://registry.npmjs.org/@types/jest/-/jest-28.1.3.tgz", + "integrity": "sha512-Tsbjk8Y2hkBaY/gJsataeb4q9Mubw9EOz7+4RjPkzD5KjTvHHs7cpws22InaoXxAVAhF5HfFbzJjo6oKWqSZLw==", "dependencies": { "jest-matcher-utils": "^28.0.0", "pretty-format": "^28.0.0" @@ -20331,9 +20331,9 @@ } }, "@types/jest": { - "version": "28.1.2", - "resolved": "https://registry.npmjs.org/@types/jest/-/jest-28.1.2.tgz", - "integrity": "sha512-5dNM7mMuIrCtNJsFfvUO/5xCrG8swuT2c7ND+sl3XwlwxJf3k7e7o+PRvcFN/iIm8XhCqHqxLOj9yutDDOJoRg==", + "version": "28.1.3", + "resolved": "https://registry.npmjs.org/@types/jest/-/jest-28.1.3.tgz", + "integrity": "sha512-Tsbjk8Y2hkBaY/gJsataeb4q9Mubw9EOz7+4RjPkzD5KjTvHHs7cpws22InaoXxAVAhF5HfFbzJjo6oKWqSZLw==", "requires": { "jest-matcher-utils": "^28.0.0", "pretty-format": "^28.0.0" diff --git a/FE/tracker/package.json b/FE/tracker/package.json index afec0208b2..de538cf178 100644 --- a/FE/tracker/package.json +++ b/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", diff --git a/FE/tracker/src/components/issueList/IssueList.function.tsx b/FE/tracker/src/components/issueList/IssueList.function.tsx index 6d601f0d5e..b25d1c47e3 100644 --- a/FE/tracker/src/components/issueList/IssueList.function.tsx +++ b/FE/tracker/src/components/issueList/IssueList.function.tsx @@ -22,8 +22,6 @@ function getComparator( : (a, b) => -descendingComparator(a, b, orderBy); } -// This method is created for cross-browser compatibility, if you don't -// need to support IE11, you can use Array.prototype.sort() directly function stableSort( array: readonly T[], comparator: (a: T, b: T) => number diff --git a/FE/tracker/src/components/issueList/issueList.tsx b/FE/tracker/src/components/issueList/issueList.tsx index 744503fe34..96834f419b 100644 --- a/FE/tracker/src/components/issueList/issueList.tsx +++ b/FE/tracker/src/components/issueList/issueList.tsx @@ -3,6 +3,7 @@ import axios from "axios"; // MUI Material import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; import Table from "@mui/material/Table"; import TableBody from "@mui/material/TableBody"; import TableCell from "@mui/material/TableCell"; @@ -19,7 +20,7 @@ import Switch from "@mui/material/Switch"; import { listTheme } from "../../mui-style/muiTheme"; // Types -import { Data, Order } from "./IssueLIst.types"; +import { Data, Order } from "./issueLIst.types"; // Functions import { @@ -27,26 +28,17 @@ import { getComparator, stableSort, createData, -} from "./IssueList.function.tsx"; +} from "./issueList.function.tsx"; // Table Parts import EnhancedTableHead from "./issueListHead.tsx"; import { EnhancedTableToolbar } from "./issueListToolbar.tsx"; +import { setConstantValue } from "typescript"; // const rows = [ -// createData("Cupcake", 305, 3.7, 67, 4.3), -// createData("Donut", 452, 25.0, 51, 4.9), -// createData("Eclair", 262, 16.0, 24, 6.0), -// createData("Frozen yoghurt", 159, 6.0, 24, 4.0), -// createData("Gingerbread", 356, 16.0, 49, 3.9), -// createData("Honeycomb", 408, 3.2, 87, 6.5), -// createData("Ice cream sandwich", 237, 9.0, 37, 4.3), -// createData("Jelly Bean", 375, 0.0, 94, 0.0), -// createData("KitKat", 518, 26.0, 65, 7.0), -// createData("Lollipop", 392, 0.2, 98, 0.0), -// createData("Marshmallow", 318, 0, 81, 2.0), -// createData("Nougat", 360, 19.0, 9, 37.0), -// createData("Oreo", 437, 18.0, 63, 4.0), +// createData("dummy1", 305, 3.7, 67, 4.3), +// createData("dummy2", 452, 25.0, 51, 4.9), +// createData("dummy3", 262, 16.0, 24, 6.0), // ]; export default function EnhancedTable() { @@ -58,6 +50,8 @@ export default function EnhancedTable() { const [rows, setRows] = React.useState([]); const [rowsPerPage, setRowsPerPage] = React.useState(5); + const [isLoading, setIsLoading] = React.useState(false); + const handleRequestSort = ( event: React.MouseEvent, property: keyof Data @@ -115,129 +109,131 @@ export default function EnhancedTable() { setDense(event.target.checked); }; - const isSelected = (name: string) => selected.indexOf(name) !== -1; + const isSelected = (name: any) => selected.indexOf(name) !== -1; const fetchData = () => { return axios .get( "https://313952d4-dd03-4472-a26f-e82b8c0038da.mock.pstmn.io/api/issues?page=1&status=OPEN" ) - .then((res) => console.log(res.data)); + .then((res: any) => { + const corridor = res.data.issues.map((e) => + createData( + e.title, + e.createdAt, + e.writer.loginId, + e.writer.loginId + ) + ); + + setRows(corridor); + + console.log("isseus downloaded : ", res.data); + console.log("corridor", corridor); + console.log("rows", rows); + }) + .catch((error) => console.error(`Error: ${error}`)); }; React.useEffect(() => { // Postman Api 문서에서 데이터 받아오기 console.log("데이터중복방지?"); fetchData(); + setIsLoading(true); }, []); - // Avoid a layout jump when reaching the last page with empty rows. - const emptyRows = - page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; - - return ( - - - - - - - - {/* if you don't need to support IE11, you can replace the `stableSort` call with: - rows.slice().sort(getComparator(order, orderBy)) */} - {stableSort(rows, getComparator(order, orderBy)) - .slice( - page * rowsPerPage, - page * rowsPerPage + rowsPerPage - ) - .map((row, index) => { - const isItemSelected = isSelected(row.name); - const labelId = `enhanced-table-checkbox-${index}`; - - return ( - - handleClick(event, row.name) - } - role="checkbox" - aria-checked={isItemSelected} - tabIndex={-1} - key={row.name} - selected={isItemSelected} - > - - - - - {row.name} - - - {row.calories} - - - {row.fat} - - - {row.carbs} - - - {row.protein} - - - ); - })} - {emptyRows > 0 && ( - - - - )} - -
- - 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; + + return ( + + + + + + + + {rows + .slice( + page * rowsPerPage, + page * rowsPerPage + rowsPerPage + ) + .map((row, index) => { + const isItemSelected = isSelected( + row.name + ); + const labelId = `enhanced-table-checkbox-${index}`; + + return ( + + + + + + {row.name} + + + {row.issueDate} + + + {row.writer} + + + {row.reviewer} + + + ); + })} + {emptyRows > 0 && ( + + + + )} + +
+ + + + + } + label="Dense padding" /> - - - } - label="Dense padding" - /> - - ); + + ); + } } diff --git a/FE/tracker/src/components/issueList/iissueListTable.tsx b/FE/tracker/src/components/issueList/issueListTable.tsx similarity index 85% rename from FE/tracker/src/components/issueList/iissueListTable.tsx rename to FE/tracker/src/components/issueList/issueListTable.tsx index 32ab6b6536..69d338bbf5 100644 --- a/FE/tracker/src/components/issueList/iissueListTable.tsx +++ b/FE/tracker/src/components/issueList/issueListTable.tsx @@ -27,8 +27,6 @@ function getComparator( : (a, b) => -descendingComparator(a, b, orderBy); } -// This method is created for cross-browser compatibility, if you don't -// need to support IE11, you can use Array.prototype.sort() directly function stableSort( array: readonly T[], comparator: (a: T, b: T) => number diff --git a/FE/tracker/src/components/issueList/issueListToolbar.tsx b/FE/tracker/src/components/issueList/issueListToolbar.tsx index 29423104be..f211a473e2 100644 --- a/FE/tracker/src/components/issueList/issueListToolbar.tsx +++ b/FE/tracker/src/components/issueList/issueListToolbar.tsx @@ -1,5 +1,9 @@ import * as React from "react"; +// MUI Material +import { ThemeProvider } from "@mui/private-theming"; +import { TextField } from "@mui/material"; +import Button from "@mui/material/Button"; import Toolbar from "@mui/material/Toolbar"; import Typography from "@mui/material/Typography"; import IconButton from "@mui/material/IconButton"; @@ -23,51 +27,70 @@ export const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => { const { numSelected } = props; return ( - 0 && { - bgcolor: (theme) => - alpha( - theme.palette.primary.main, - theme.palette.action.activatedOpacity - ), - }), - }} - > - {numSelected > 0 ? ( - - {numSelected} selected - - ) : ( - - Issue LIst - - )} - {numSelected > 0 ? ( - - - - - - ) : ( - - - - - - )} - + + 0 && { + bgcolor: (theme) => + alpha( + theme.palette.primary.main, + theme.palette.action.activatedOpacity + ), + }), + }} + > + {numSelected > 0 ? ( + + {numSelected} selected + + ) : ( + <> + + 이슈리스트 + + + + + )} + {numSelected > 0 ? ( + + + + + + ) : ( + + + + + + )} + + ); }; diff --git a/FE/tracker/src/components/signIn/matrix.jsx b/FE/tracker/src/components/signIn/matrix.jsx index 5836a41901..6d8d892a05 100644 --- a/FE/tracker/src/components/signIn/matrix.jsx +++ b/FE/tracker/src/components/signIn/matrix.jsx @@ -1,51 +1,139 @@ import React, { useEffect, useRef } from "react"; +// function Matrix() { +// const canvasRef = useRef(null); +// const canvasWidth = 1500; +// const canvasHeight = 800; +// const cols = Math.floor(canvasWidth / 10) + 1; + +// // 다른 버전 +// const tileSize = 20; +// const maxStackHeight = 20; +// const columns = []; +// const fadeFactor = 0.05; + +// console.log(cols); +// const ypos = Array(cols).fill(canvasHeight); + +// const korean = "이슈트레커에캔버스넣기진짜어렵네"; +// const latin = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; +// const nums = "0123456789"; + +// const alphabet = korean + latin + nums; +// const fontSize = 8; + +// const init = () => { +// const canvas = canvasRef.current; +// maxStackHeight = Math.ceil(canvas.height / tileSize); + +// for (let i = 0; i < canvas.width / tileSize; i++) { +// let column = {}; +// column.x = i * tileSize; +// column.stackHeight = 10 + Math.random() * maxStackHeight; +// column.stackCounter = 0; +// columns.push(column); + +// console.log(column); +// } +// }; + +// const drawMatrix = () => { +// const canvas = canvasRef.current; +// const ctx = canvas.getContext("2d"); + +// canvas.width = canvasWidth; +// canvas.height = canvasHeight; // 에러는 안나지만 크기 조절이 안되네... +// // ctx.rotate(-30 * (Math.PI / 180)); +// ctx.fillStyle = "#000000"; +// ctx.fillRect(0, 0, canvasWidth, canvasHeight); + +// ctx.fillStyle = "rgba(0,0,0,0.05)"; +// ctx.fillStyle = "#0f0"; + +// ctx.font = fontSize + "monospace"; + +// ypos.forEach((y, ind) => { +// const text = alphabet.charAt(Math.floor(Math.random() * 8)); +// // const text = String.fromCharCode(Math.random() * 10); +// const x = ind * 20; +// ctx.fillText(text, x, y); +// if (y * fontSize > canvasHeight && Math.random() > 0.97) +// ypos[ind] = 0; +// // if (y > 100 + Math.random() * 10000) ypos[ind] = 0; +// else ypos[ind] = y + 20; +// }); +// }; + +// const draw = () => {}; + +// const tick = () => { +// drawMatrix(); +// setTimeout(tick, 50); +// }; + +// useEffect(() => { +// const intervalPoint = setInterval(() => { +// console.log("matrix drawing"); +// drawMatrix(); +// }, 100); +// return () => clearInterval(intervalPoint); +// }, []); + +// return ; +// } + +const tileSize = 20; +const fadeFactor = 0.05; + +const canvasWidth = 1500; +const canvasHeight = 800; + +let columns = []; +let maxStackHeight; + function Matrix() { const canvasRef = useRef(null); - const canvasWidth = 1500; - const canvasHeight = 800; - const cols = Math.floor(canvasWidth / 10) + 1; - console.log(cols); - const ypos = Array(cols).fill(canvasHeight); - - const korean = "이슈트레커에캔버스넣기진짜어렵네"; - const latin = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; - const nums = "0123456789"; - - const alphabet = korean + latin + nums; - const fontSize = 8; - - const drawMatrix = () => { - const canvas = canvasRef.current; - const ctx = canvas.getContext("2d"); - - canvas.width = canvasWidth; - canvas.height = canvasHeight; // 에러는 안나지만 크기 조절이 안되네... - // ctx.rotate(-30 * (Math.PI / 180)); - ctx.fillStyle = "#000000"; - ctx.fillRect(0, 0, canvasWidth, canvasHeight); - - ctx.fillStyle = "rgba(0,0,0,0.05)"; - ctx.fillStyle = "#0f0"; - - ctx.font = fontSize + "monospace"; - - ypos.forEach((y, ind) => { - const text = alphabet.charAt(Math.floor(Math.random() * 8)); - // const text = String.fromCharCode(Math.random() * 10); - const x = ind * 20; - ctx.fillText(text, x, y); - if (y * fontSize > canvasHeight && Math.random() > 0.97) - ypos[ind] = 0; - // if (y > 100 + Math.random() * 10000) ypos[ind] = 0; - else ypos[ind] = y + 20; - }); + const canvas = canvasRef.current; + const ctx = canvas.getContext("2d"); + + const init = () => { + maxStackHeight = Math.ceil(ctx.height / tileSize); + + for (let i = 0; i < canvasWidth / tileSize; i++) { + const column = {}; + + column.x = i * tileSize; + column.stackHeight = 10 + Math.random() * maxStackHeight; + column.stackCounter = 0; + columns.push(column); + } + }; + + const draw = () => { + ctx.fillStyle = "rgba( 0 , 0 , 0 , " + fadeFactor + " )"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + for (let i = 0; i < columns.length; i++) { + const randomCharacter = String.fromCharCode( + 33 + Math.floor(Math.random() * 94) + ); + ctx.fillText( + randomCharacter, + columns[i].x, + columns[i].stackCounter * tileSize + tileSize + ); + + if (columns[i].stackCounter++ >= columns[i].stackHeight) { + columns[i].stackHeight = 10 + Math.random() * maxStackHeight; + columns[i].stackCounter = 0; + } + } }; useEffect(() => { const intervalPoint = setInterval(() => { console.log("matrix drawing"); - drawMatrix(); + draw(); }, 100); return () => clearInterval(intervalPoint); }, []); From 65d61ceb2c9dc059ef3cfb8aef0be3630c831354 Mon Sep 17 00:00:00 2001 From: onlinekkabchi Date: Tue, 28 Jun 2022 16:15:38 +0900 Subject: [PATCH 2/3] =?UTF-8?q?refactor=20[5]=20=EB=A6=AC=ED=8C=A9?= =?UTF-8?q?=ED=86=A0=EB=A7=81=EC=A4=91...?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/tracker/README.md | 2 + .../src/components/issueList/issueList.tsx | 389 +++++++++--------- .../src/components/issueList/issueList.txt | 239 +++++++++++ FE/tracker/src/components/signIn/matrix.jsx | 47 ++- FE/tracker/src/mui-style/muiTheme.jsx | 7 +- 5 files changed, 456 insertions(+), 228 deletions(-) create mode 100644 FE/tracker/src/components/issueList/issueList.txt diff --git a/FE/tracker/README.md b/FE/tracker/README.md index 63a323094b..eaa918b43f 100644 --- a/FE/tracker/README.md +++ b/FE/tracker/README.md @@ -68,6 +68,8 @@ const context = canvas.getContext("2d"); ### [React: 'Redirect' is not exported from 'react-router-dom'](https://stackoverflow.com/questions/63690695/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) +

diff --git a/FE/tracker/src/components/issueList/issueList.tsx b/FE/tracker/src/components/issueList/issueList.tsx index 96834f419b..b93987b63a 100644 --- a/FE/tracker/src/components/issueList/issueList.tsx +++ b/FE/tracker/src/components/issueList/issueList.tsx @@ -1,239 +1,222 @@ -import * as React from "react"; +// 기타 library import axios from "axios"; -// MUI Material -import Box from "@mui/material/Box"; -import Button from "@mui/material/Button"; +// MUI +import * as React from "react"; import Table from "@mui/material/Table"; import TableBody from "@mui/material/TableBody"; import TableCell from "@mui/material/TableCell"; import TableContainer from "@mui/material/TableContainer"; -import TablePagination from "@mui/material/TablePagination"; +import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import Paper from "@mui/material/Paper"; -import Checkbox from "@mui/material/Checkbox"; -import FormControlLabel from "@mui/material/FormControlLabel"; -import Switch from "@mui/material/Switch"; - -// MUI Theme -// import { ThemeProvider } from "@mui/material/styles"; -import { listTheme } from "../../mui-style/muiTheme"; - -// Types -import { Data, Order } from "./issueLIst.types"; - -// Functions -import { - descendingComparator, - getComparator, - stableSort, - createData, -} from "./issueList.function.tsx"; - -// Table Parts -import EnhancedTableHead from "./issueListHead.tsx"; -import { EnhancedTableToolbar } from "./issueListToolbar.tsx"; -import { setConstantValue } from "typescript"; - -// const rows = [ -// createData("dummy1", 305, 3.7, 67, 4.3), -// createData("dummy2", 452, 25.0, 51, 4.9), -// createData("dummy3", 262, 16.0, 24, 6.0), -// ]; +import { Typography, Button, Container } from "@mui/material"; +import { Box } from "@mui/system"; +import { setInterval } from "timers/promises"; + +interface Data { + title: string; + issueData: string; + writer: string; + reviewer: string; + issueId: number; +} -export default function EnhancedTable() { - const [order, setOrder] = React.useState("asc"); - const [orderBy, setOrderBy] = React.useState("writer"); - const [selected, setSelected] = React.useState([]); - const [page, setPage] = React.useState(0); - const [dense, setDense] = React.useState(false); - const [rows, setRows] = React.useState([]); - const [rowsPerPage, setRowsPerPage] = React.useState(5); +function createData( + title: string, + issueData: string, + writer: string, + reviewer: string, + issueId: number +): Data { + return { title, issueData, writer, reviewer, issueId }; +} +function EnhancedTable() { + const [rows, setRows] = React.useState(null); const [isLoading, setIsLoading] = React.useState(false); - - const handleRequestSort = ( - event: React.MouseEvent, - property: keyof Data - ) => { - const isAsc = orderBy === property && order === "asc"; - setOrder(isAsc ? "desc" : "asc"); - setOrderBy(property); - }; - - const handleSelectAllClick = ( - event: React.ChangeEvent - ) => { - // if (event.target.checked) { - // const newSelecteds = rows.map((n) => n.name); - // setSelected(newSelecteds); - // return; - // } - // setSelected([]); - - console.log("handleSelectAllClick"); - }; - - const handleClick = (event: React.MouseEvent, name: string) => { - const selectedIndex = selected.indexOf(name); - let newSelected: readonly string[] = []; - - if (selectedIndex === -1) { - newSelected = newSelected.concat(selected, name); - } else if (selectedIndex === 0) { - newSelected = newSelected.concat(selected.slice(1)); - } else if (selectedIndex === selected.length - 1) { - newSelected = newSelected.concat(selected.slice(0, -1)); - } else if (selectedIndex > 0) { - newSelected = newSelected.concat( - selected.slice(0, selectedIndex), - selected.slice(selectedIndex + 1) - ); - } - - setSelected(newSelected); - }; - - const handleChangePage = (event: unknown, newPage: number) => { - setPage(newPage); - }; - - const handleChangeRowsPerPage = ( - event: React.ChangeEvent - ) => { - setRowsPerPage(parseInt(event.target.value, 10)); - setPage(0); - }; - - const handleChangeDense = (event: React.ChangeEvent) => { - setDense(event.target.checked); - }; - - const isSelected = (name: any) => selected.indexOf(name) !== -1; + const [pageSize, setPageSize] = React.useState(0); + const [totalPage, setTotalPage] = React.useState(0); const fetchData = () => { - return axios + const request = axios .get( "https://313952d4-dd03-4472-a26f-e82b8c0038da.mock.pstmn.io/api/issues?page=1&status=OPEN" ) .then((res: any) => { - const corridor = res.data.issues.map((e) => - createData( - e.title, - e.createdAt, - e.writer.loginId, - e.writer.loginId - ) - ); - - setRows(corridor); - - console.log("isseus downloaded : ", res.data); - console.log("corridor", corridor); - console.log("rows", rows); + console.log("데이터받는중"); + setRows(res.data.issues); + if (rows !== null) { + setIsLoading(true); + console.log(rows); + } }) .catch((error) => console.error(`Error: ${error}`)); }; React.useEffect(() => { - // Postman Api 문서에서 데이터 받아오기 - console.log("데이터중복방지?"); - fetchData(); - setIsLoading(true); - }, []); + if (isLoading === false) { + fetchData(); + console.log("실행횟수점검"); + } + }); - if (isLoading) { - // Avoid a layout jump when reaching the last page with empty rows. - const emptyRows = - page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; + if (!isLoading) { + return
Please wait some time...
; + } + if (isLoading) { return ( - - - - - - + <> + + + + + Issue List + + + + + +
+ + + + 이슈 + + + 작성날짜 + + + 작성자 + + + 담당자 + + + - {rows - .slice( - page * rowsPerPage, - page * rowsPerPage + rowsPerPage - ) - .map((row, index) => { - const isItemSelected = isSelected( - row.name - ); - const labelId = `enhanced-table-checkbox-${index}`; - - return ( - - - - - - {row.name} - - - {row.issueDate} - - - {row.writer} - - - {row.reviewer} - - - ); - })} - {emptyRows > 0 && ( + {rows.map((row) => ( - + + 1{/* {row.title} */} + + + 1 + + + hi + + + hi + - )} + ))}
- - - - } - label="Dense padding" - /> - + + ); } } + +export default EnhancedTable; diff --git a/FE/tracker/src/components/issueList/issueList.txt b/FE/tracker/src/components/issueList/issueList.txt new file mode 100644 index 0000000000..97a762e550 --- /dev/null +++ b/FE/tracker/src/components/issueList/issueList.txt @@ -0,0 +1,239 @@ +import * as React from "react"; +import axios from "axios"; + +// MUI Material +import Box from "@mui/material/Box"; +import Button from "@mui/material/Button"; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableCell from "@mui/material/TableCell"; +import TableContainer from "@mui/material/TableContainer"; +import TablePagination from "@mui/material/TablePagination"; +import TableRow from "@mui/material/TableRow"; +import Paper from "@mui/material/Paper"; +import Checkbox from "@mui/material/Checkbox"; +import FormControlLabel from "@mui/material/FormControlLabel"; +import Switch from "@mui/material/Switch"; + +// MUI Theme +// import { ThemeProvider } from "@mui/material/styles"; +import { listTheme } from "../../mui-style/muiTheme"; + +// Types +import { Data, Order } from "./issueLIst.types"; + +// Functions +import { + descendingComparator, + getComparator, + stableSort, + createData, +} from "./issueList.function.tsx"; + +// Table Parts +import EnhancedTableHead from "./issueListHead.tsx"; +import { EnhancedTableToolbar } from "./issueListToolbar.tsx"; +import { setConstantValue } from "typescript"; + +// const rows = [ +// createData("dummy1", 305, 3.7, 67, 4.3), +// createData("dummy2", 452, 25.0, 51, 4.9), +// createData("dummy3", 262, 16.0, 24, 6.0), +// ]; + +export default function EnhancedTable() { + const [order, setOrder] = React.useState("asc"); + const [orderBy, setOrderBy] = React.useState("writer"); + const [selected, setSelected] = React.useState([]); + const [page, setPage] = React.useState(0); + const [dense, setDense] = React.useState(false); + const [rows, setRows] = React.useState([]); + const [rowsPerPage, setRowsPerPage] = React.useState(5); + + const [isLoading, setIsLoading] = React.useState(false); + + const handleRequestSort = ( + event: React.MouseEvent, + property: keyof Data + ) => { + const isAsc = orderBy === property && order === "asc"; + setOrder(isAsc ? "desc" : "asc"); + setOrderBy(property); + }; + + const handleSelectAllClick = ( + event: React.ChangeEvent + ) => { + // if (event.target.checked) { + // const newSelecteds = rows.map((n) => n.name); + // setSelected(newSelecteds); + // return; + // } + // setSelected([]); + + console.log("handleSelectAllClick"); + }; + + const handleClick = (event: React.MouseEvent, name: string) => { + const selectedIndex = selected.indexOf(name); + let newSelected: readonly string[] = []; + + if (selectedIndex === -1) { + newSelected = newSelected.concat(selected, name); + } else if (selectedIndex === 0) { + newSelected = newSelected.concat(selected.slice(1)); + } else if (selectedIndex === selected.length - 1) { + newSelected = newSelected.concat(selected.slice(0, -1)); + } else if (selectedIndex > 0) { + newSelected = newSelected.concat( + selected.slice(0, selectedIndex), + selected.slice(selectedIndex + 1) + ); + } + + setSelected(newSelected); + }; + + const handleChangePage = (event: unknown, newPage: number) => { + setPage(newPage); + }; + + const handleChangeRowsPerPage = ( + event: React.ChangeEvent + ) => { + setRowsPerPage(parseInt(event.target.value, 10)); + setPage(0); + }; + + const handleChangeDense = (event: React.ChangeEvent) => { + setDense(event.target.checked); + }; + + const isSelected = (name: any) => selected.indexOf(name) !== -1; + + const fetchData = () => { + return axios + .get( + "https://313952d4-dd03-4472-a26f-e82b8c0038da.mock.pstmn.io/api/issues?page=1&status=OPEN" + ) + .then((res: any) => { + const corridor = res.data.issues.map((e) => { + createData( + e.title, + e.createdAt, + e.writer.loginId, + e.writer.loginId + ); + }); + + setRows(corridor); + + console.log("isseus downloaded : ", res.data); + console.log("corridor", corridor); + console.log("rows", rows); + }) + .catch((error) => console.error(`Error: ${error}`)); + }; + + React.useEffect(() => { + // Postman Api 문서에서 데이터 받아오기 + console.log("데이터중복방지?"); + fetchData(); + setIsLoading(true); + }, []); + + if (isLoading) { + // Avoid a layout jump when reaching the last page with empty rows. + const emptyRows = + page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; + + return ( + + + + + + + + {rows + .slice( + page * rowsPerPage, + page * rowsPerPage + rowsPerPage + ) + .map((row, index) => { + const isItemSelected = isSelected( + row.name + ); + const labelId = `enhanced-table-checkbox-${index}`; + + return ( + + + + + + {row.name} + + + {row.issueDate} + + + {row.writer} + + + {row.reviewer} + + + ); + })} + {emptyRows > 0 && ( + + + + )} + +
+ + + + + } + label="Dense padding" + /> + + ); + } +} diff --git a/FE/tracker/src/components/signIn/matrix.jsx b/FE/tracker/src/components/signIn/matrix.jsx index 6d8d892a05..68225ad394 100644 --- a/FE/tracker/src/components/signIn/matrix.jsx +++ b/FE/tracker/src/components/signIn/matrix.jsx @@ -1,3 +1,4 @@ +import { FormControlUnstyledContext } from "@mui/base"; import React, { useEffect, useRef } from "react"; // function Matrix() { @@ -64,13 +65,6 @@ import React, { useEffect, useRef } from "react"; // }); // }; -// const draw = () => {}; - -// const tick = () => { -// drawMatrix(); -// setTimeout(tick, 50); -// }; - // useEffect(() => { // const intervalPoint = setInterval(() => { // console.log("matrix drawing"); @@ -91,29 +85,41 @@ const canvasHeight = 800; let columns = []; let maxStackHeight; +const fontSize = 12; +const slightSmallFontSize = tileSize - 2; + function Matrix() { const canvasRef = useRef(null); - const canvas = canvasRef.current; - const ctx = canvas.getContext("2d"); - const init = () => { - maxStackHeight = Math.ceil(ctx.height / tileSize); + // divide the canvas into columns. + const init = (w, h) => { + const canvas = canvasRef.current; + const ctx = canvas.getContext("2d"); - for (let i = 0; i < canvasWidth / tileSize; i++) { - const column = {}; + maxStackHeight = Math.ceil(w / tileSize); + for (let i = 0; i < w / tileSize; i++) { + const column = {}; column.x = i * tileSize; column.stackHeight = 10 + Math.random() * maxStackHeight; column.stackCounter = 0; columns.push(column); + console.log(columns); } }; const draw = () => { + const canvas = canvasRef.current; + const ctx = canvas.getContext("2d"); + + ctx.fillRect(0, 0, canvasWidth, canvasHeight); ctx.fillStyle = "rgba( 0 , 0 , 0 , " + fadeFactor + " )"; - ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.font = slightSmallFontSize + "px " + "monospace"; + // ctx.fillStyle = "rgb(0,255,0)"; for (let i = 0; i < columns.length; i++) { + // pick a random ascii character 이 부분은 다른 글자로 수정가능할거 같은데 일단 이렇게 놔두기로 함. + const randomCharacter = String.fromCharCode( 33 + Math.floor(Math.random() * 94) ); @@ -123,22 +129,23 @@ function Matrix() { columns[i].stackCounter * tileSize + tileSize ); - if (columns[i].stackCounter++ >= columns[i].stackHeight) { - columns[i].stackHeight = 10 + Math.random() * maxStackHeight; - columns[i].stackCounter = 0; - } + // if (columns[i].stackCounter++ >= columns[i].stackHeight) { + // columns[i].stackHeight = 10 + Math.random() * maxStackHeight; + // columns[i].stackCounter = 0; + // } } }; useEffect(() => { + init(canvasWidth, canvasHeight); const intervalPoint = setInterval(() => { console.log("matrix drawing"); draw(); - }, 100); + }, 2000); return () => clearInterval(intervalPoint); }, []); - return ; + return ; } export default Matrix; diff --git a/FE/tracker/src/mui-style/muiTheme.jsx b/FE/tracker/src/mui-style/muiTheme.jsx index 56f63f372e..80840fbe32 100644 --- a/FE/tracker/src/mui-style/muiTheme.jsx +++ b/FE/tracker/src/mui-style/muiTheme.jsx @@ -1,4 +1,5 @@ -import { ThemeProvider, createTheme } from "@mui/material"; +import * as React from "react"; +import { createTheme } from "@mui/material"; export const matrixTheme = createTheme({ palette: { @@ -21,9 +22,5 @@ export const listTheme = createTheme({ main: "#121212", light: "#f2f2f2", }, - neutral: { - main: "#bdbdbd", - dark: "212121", - }, }, }); From 4cf5405764f03e3b7e82cb3861c869a9160a8596 Mon Sep 17 00:00:00 2001 From: onlinekkabchi Date: Wed, 29 Jun 2022 15:37:22 +0900 Subject: [PATCH 3/3] =?UTF-8?q?refactor=20[5]=20modal=EC=B0=BD=20=EA=B0=80?= =?UTF-8?q?=EB=8A=A5=ED=95=9C=20=EC=84=A0=EC=97=90=EC=84=9C=20=EB=A7=8C?= =?UTF-8?q?=EB=93=9C=EB=8A=94=20=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Modals/filterModal.jsx | 21 ++ .../components/issueList/IssueLIst.types.tsx | 30 --- .../issueList/IssueList.function.tsx | 54 ---- .../src/components/issueList/issueList.tsx | 248 ++++++++++-------- .../src/components/issueList/issueList.txt | 239 ----------------- .../components/issueList/issueListHead.tsx | 97 ------- .../components/issueList/issueListTable.tsx | 45 ---- .../components/issueList/issueListToolbar.tsx | 96 ------- FE/tracker/src/components/signIn/signIn.jsx | 35 +-- FE/tracker/src/mui-style/muiTheme.jsx | 1 - 10 files changed, 155 insertions(+), 711 deletions(-) create mode 100644 FE/tracker/src/components/Modals/filterModal.jsx delete mode 100644 FE/tracker/src/components/issueList/IssueLIst.types.tsx delete mode 100644 FE/tracker/src/components/issueList/IssueList.function.tsx delete mode 100644 FE/tracker/src/components/issueList/issueList.txt delete mode 100644 FE/tracker/src/components/issueList/issueListHead.tsx delete mode 100644 FE/tracker/src/components/issueList/issueListTable.tsx delete mode 100644 FE/tracker/src/components/issueList/issueListToolbar.tsx diff --git a/FE/tracker/src/components/Modals/filterModal.jsx b/FE/tracker/src/components/Modals/filterModal.jsx new file mode 100644 index 0000000000..da7ebb758e --- /dev/null +++ b/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 ( + + + + + + ); +} + +export default FilterModal; diff --git a/FE/tracker/src/components/issueList/IssueLIst.types.tsx b/FE/tracker/src/components/issueList/IssueLIst.types.tsx deleted file mode 100644 index 46896af830..0000000000 --- a/FE/tracker/src/components/issueList/IssueLIst.types.tsx +++ /dev/null @@ -1,30 +0,0 @@ -export interface Data { - name: string; - issueDate: number; - writer: number; - reviewer: number; -} - -export interface HeadCell { - disablePadding: boolean; - id: keyof Data; - label: string; - numeric: boolean; -} - -export interface EnhancedTableProps { - numSelected: number; - onRequestSort: ( - event: React.MouseEvent, - property: keyof Data - ) => void; - onSelectAllClick: (event: React.ChangeEvent) => void; - order: Order; - orderBy: string; - rowCount: number; -} -export interface EnhancedTableToolbarProps { - numSelected: number; -} - -export type Order = "asc" | "desc"; diff --git a/FE/tracker/src/components/issueList/IssueList.function.tsx b/FE/tracker/src/components/issueList/IssueList.function.tsx deleted file mode 100644 index b25d1c47e3..0000000000 --- a/FE/tracker/src/components/issueList/IssueList.function.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { Order, Data } from "./IssueLIst.types"; - -function descendingComparator(a: T, b: T, orderBy: keyof T) { - if (b[orderBy] < a[orderBy]) { - return -1; - } - if (b[orderBy] > a[orderBy]) { - return 1; - } - return 0; -} - -function getComparator( - order: Order, - orderBy: Key -): ( - a: { [key in Key]: number | string }, - b: { [key in Key]: number | string } -) => number { - return order === "desc" - ? (a, b) => descendingComparator(a, b, orderBy) - : (a, b) => -descendingComparator(a, b, orderBy); -} - -function stableSort( - array: readonly T[], - comparator: (a: T, b: T) => number -) { - const stabilizedThis = array.map((el, index) => [el, index] as [T, number]); - stabilizedThis.sort((a, b) => { - const order = comparator(a[0], b[0]); - if (order !== 0) { - return order; - } - return a[1] - b[1]; - }); - return stabilizedThis.map((el) => el[0]); -} - -function createData( - name: string, - issueDate: number, - writer: number, - reviewer: number -): Data { - return { - name, - issueDate, - writer, - reviewer, - }; -} - -export { descendingComparator, getComparator, stableSort, createData }; diff --git a/FE/tracker/src/components/issueList/issueList.tsx b/FE/tracker/src/components/issueList/issueList.tsx index b93987b63a..14980a2506 100644 --- a/FE/tracker/src/components/issueList/issueList.tsx +++ b/FE/tracker/src/components/issueList/issueList.tsx @@ -14,6 +14,9 @@ import { Typography, Button, Container } from "@mui/material"; import { Box } from "@mui/system"; import { setInterval } from "timers/promises"; +// other parts +import FilterModal from "../Modals/filterModal"; + interface Data { title: string; issueData: string; @@ -33,11 +36,18 @@ function createData( } function EnhancedTable() { - const [rows, setRows] = React.useState(null); + const [rows, setRows] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const [pageSize, setPageSize] = React.useState(0); const [totalPage, setTotalPage] = React.useState(0); + // const [filterModal, setFilterModal] = React.useState(false); + // const showModal = () => { + // setFilterModal(true); + // }; + // const hideModal = () => { + // setFilterModal(false); + // }; const fetchData = () => { const request = axios .get( @@ -45,10 +55,21 @@ function EnhancedTable() { ) .then((res: any) => { console.log("데이터받는중"); - setRows(res.data.issues); + console.log(res.data.issues); + const trickster = res.data.issues.map((e) => + createData( + e.title, + e.createdAt, + e.writer.loginId, + e.writer.loginId, + e.issueId + ) + ); + console.log("trickster", trickster); + setRows(trickster); if (rows !== null) { setIsLoading(true); - console.log(rows); + console.log("rows", rows); } }) .catch((error) => console.error(`Error: ${error}`)); @@ -57,78 +78,125 @@ function EnhancedTable() { React.useEffect(() => { if (isLoading === false) { fetchData(); - console.log("실행횟수점검"); } }); if (!isLoading) { - return
Please wait some time...
; + return ( +
+ Please wait some time~ 리액트가 데이터 받아오는 속도랑 + 랜더링하는 속도랑 달라서 시간차 공격 들어갑니다~ +
+ ); } if (isLoading) { return ( <> - */} + - - - - Issue List - - - - + + + Issue List + + + + - - - +
+ + + + 이슈 + + + 작성날짜 + + + 작성자 + + + 담당자 + + + + + {rows.map((row, index) => ( + - 이슈 + 1{row.title} - 작성날짜 + {row.issueData} - 작성자 + {row.writer} - 담당자 + sonya, nori - - - {rows.map((row) => ( - - - 1{/* {row.title} */} - - - 1 - - - hi - - - hi - - - ))} - -
- - + ))} + + + ); } diff --git a/FE/tracker/src/components/issueList/issueList.txt b/FE/tracker/src/components/issueList/issueList.txt deleted file mode 100644 index 97a762e550..0000000000 --- a/FE/tracker/src/components/issueList/issueList.txt +++ /dev/null @@ -1,239 +0,0 @@ -import * as React from "react"; -import axios from "axios"; - -// MUI Material -import Box from "@mui/material/Box"; -import Button from "@mui/material/Button"; -import Table from "@mui/material/Table"; -import TableBody from "@mui/material/TableBody"; -import TableCell from "@mui/material/TableCell"; -import TableContainer from "@mui/material/TableContainer"; -import TablePagination from "@mui/material/TablePagination"; -import TableRow from "@mui/material/TableRow"; -import Paper from "@mui/material/Paper"; -import Checkbox from "@mui/material/Checkbox"; -import FormControlLabel from "@mui/material/FormControlLabel"; -import Switch from "@mui/material/Switch"; - -// MUI Theme -// import { ThemeProvider } from "@mui/material/styles"; -import { listTheme } from "../../mui-style/muiTheme"; - -// Types -import { Data, Order } from "./issueLIst.types"; - -// Functions -import { - descendingComparator, - getComparator, - stableSort, - createData, -} from "./issueList.function.tsx"; - -// Table Parts -import EnhancedTableHead from "./issueListHead.tsx"; -import { EnhancedTableToolbar } from "./issueListToolbar.tsx"; -import { setConstantValue } from "typescript"; - -// const rows = [ -// createData("dummy1", 305, 3.7, 67, 4.3), -// createData("dummy2", 452, 25.0, 51, 4.9), -// createData("dummy3", 262, 16.0, 24, 6.0), -// ]; - -export default function EnhancedTable() { - const [order, setOrder] = React.useState("asc"); - const [orderBy, setOrderBy] = React.useState("writer"); - const [selected, setSelected] = React.useState([]); - const [page, setPage] = React.useState(0); - const [dense, setDense] = React.useState(false); - const [rows, setRows] = React.useState([]); - const [rowsPerPage, setRowsPerPage] = React.useState(5); - - const [isLoading, setIsLoading] = React.useState(false); - - const handleRequestSort = ( - event: React.MouseEvent, - property: keyof Data - ) => { - const isAsc = orderBy === property && order === "asc"; - setOrder(isAsc ? "desc" : "asc"); - setOrderBy(property); - }; - - const handleSelectAllClick = ( - event: React.ChangeEvent - ) => { - // if (event.target.checked) { - // const newSelecteds = rows.map((n) => n.name); - // setSelected(newSelecteds); - // return; - // } - // setSelected([]); - - console.log("handleSelectAllClick"); - }; - - const handleClick = (event: React.MouseEvent, name: string) => { - const selectedIndex = selected.indexOf(name); - let newSelected: readonly string[] = []; - - if (selectedIndex === -1) { - newSelected = newSelected.concat(selected, name); - } else if (selectedIndex === 0) { - newSelected = newSelected.concat(selected.slice(1)); - } else if (selectedIndex === selected.length - 1) { - newSelected = newSelected.concat(selected.slice(0, -1)); - } else if (selectedIndex > 0) { - newSelected = newSelected.concat( - selected.slice(0, selectedIndex), - selected.slice(selectedIndex + 1) - ); - } - - setSelected(newSelected); - }; - - const handleChangePage = (event: unknown, newPage: number) => { - setPage(newPage); - }; - - const handleChangeRowsPerPage = ( - event: React.ChangeEvent - ) => { - setRowsPerPage(parseInt(event.target.value, 10)); - setPage(0); - }; - - const handleChangeDense = (event: React.ChangeEvent) => { - setDense(event.target.checked); - }; - - const isSelected = (name: any) => selected.indexOf(name) !== -1; - - const fetchData = () => { - return axios - .get( - "https://313952d4-dd03-4472-a26f-e82b8c0038da.mock.pstmn.io/api/issues?page=1&status=OPEN" - ) - .then((res: any) => { - const corridor = res.data.issues.map((e) => { - createData( - e.title, - e.createdAt, - e.writer.loginId, - e.writer.loginId - ); - }); - - setRows(corridor); - - console.log("isseus downloaded : ", res.data); - console.log("corridor", corridor); - console.log("rows", rows); - }) - .catch((error) => console.error(`Error: ${error}`)); - }; - - React.useEffect(() => { - // Postman Api 문서에서 데이터 받아오기 - console.log("데이터중복방지?"); - fetchData(); - setIsLoading(true); - }, []); - - if (isLoading) { - // Avoid a layout jump when reaching the last page with empty rows. - const emptyRows = - page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; - - return ( - - - - - - - - {rows - .slice( - page * rowsPerPage, - page * rowsPerPage + rowsPerPage - ) - .map((row, index) => { - const isItemSelected = isSelected( - row.name - ); - const labelId = `enhanced-table-checkbox-${index}`; - - return ( - - - - - - {row.name} - - - {row.issueDate} - - - {row.writer} - - - {row.reviewer} - - - ); - })} - {emptyRows > 0 && ( - - - - )} - -
- - - - - } - label="Dense padding" - /> - - ); - } -} diff --git a/FE/tracker/src/components/issueList/issueListHead.tsx b/FE/tracker/src/components/issueList/issueListHead.tsx deleted file mode 100644 index e1751e6435..0000000000 --- a/FE/tracker/src/components/issueList/issueListHead.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import * as React from "react"; -import Box from "@mui/material/Box"; -import TableCell from "@mui/material/TableCell"; -import TableHead from "@mui/material/TableHead"; -import TableRow from "@mui/material/TableRow"; -import TableSortLabel from "@mui/material/TableSortLabel"; -import Checkbox from "@mui/material/Checkbox"; -import { visuallyHidden } from "@mui/utils"; - -import { Data, HeadCell, EnhancedTableProps } from "./IssueLIst.types"; - -const headCells: readonly HeadCell[] = [ - { - id: "name", - numeric: false, - disablePadding: true, - label: "이슈(날짜순)", - }, - { - id: "issueDate", - numeric: false, - disablePadding: true, - label: "날짜", - }, - { - id: "writer", - numeric: true, - disablePadding: false, - label: "작성자", - }, - { - id: "reviewer", - numeric: true, - disablePadding: false, - label: "담당자", - }, -]; - -function EnhancedTableHead(props: EnhancedTableProps) { - const { - onSelectAllClick, - order, - orderBy, - numSelected, - rowCount, - onRequestSort, - } = props; - const createSortHandler = - (property: keyof Data) => (event: React.MouseEvent) => { - onRequestSort(event, property); - }; - - return ( - - - - 0 && numSelected < rowCount - } - checked={rowCount > 0 && numSelected === rowCount} - onChange={onSelectAllClick} - inputProps={{ - "aria-label": "select all desserts", - }} - /> - - {headCells.map((headCell) => ( - - - {headCell.label} - {orderBy === headCell.id ? ( - - {order === "desc" - ? "sorted descending" - : "sorted ascending"} - - ) : null} - - - ))} - - - ); -} - -export default EnhancedTableHead; diff --git a/FE/tracker/src/components/issueList/issueListTable.tsx b/FE/tracker/src/components/issueList/issueListTable.tsx deleted file mode 100644 index 69d338bbf5..0000000000 --- a/FE/tracker/src/components/issueList/issueListTable.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import { - Data, - HeadCell, - Order, - EnhancedTableProps, - EnhancedTableToolbarProps, -} from "./IssueLIst.types"; -function descendingComparator(a: T, b: T, orderBy: keyof T) { - if (b[orderBy] < a[orderBy]) { - return -1; - } - if (b[orderBy] > a[orderBy]) { - return 1; - } - return 0; -} - -function getComparator( - order: Order, - orderBy: Key -): ( - a: { [key in Key]: number | string }, - b: { [key in Key]: number | string } -) => number { - return order === "desc" - ? (a, b) => descendingComparator(a, b, orderBy) - : (a, b) => -descendingComparator(a, b, orderBy); -} - -function stableSort( - array: readonly T[], - comparator: (a: T, b: T) => number -) { - const stabilizedThis = array.map((el, index) => [el, index] as [T, number]); - stabilizedThis.sort((a, b) => { - const order = comparator(a[0], b[0]); - if (order !== 0) { - return order; - } - return a[1] - b[1]; - }); - return stabilizedThis.map((el) => el[0]); -} - -export { descendingComparator, getComparator, stableSort }; diff --git a/FE/tracker/src/components/issueList/issueListToolbar.tsx b/FE/tracker/src/components/issueList/issueListToolbar.tsx deleted file mode 100644 index f211a473e2..0000000000 --- a/FE/tracker/src/components/issueList/issueListToolbar.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import * as React from "react"; - -// MUI Material -import { ThemeProvider } from "@mui/private-theming"; -import { TextField } from "@mui/material"; -import Button from "@mui/material/Button"; -import Toolbar from "@mui/material/Toolbar"; -import Typography from "@mui/material/Typography"; -import IconButton from "@mui/material/IconButton"; -import Tooltip from "@mui/material/Tooltip"; -import DeleteIcon from "@mui/icons-material/Delete"; -import FilterListIcon from "@mui/icons-material/FilterList"; - -// MUI Theme -import { alpha } from "@mui/material/styles"; -import { listTheme } from "../../mui-style/muiTheme"; - -import { - Data, - HeadCell, - Order, - EnhancedTableProps, - EnhancedTableToolbarProps, -} from "./IssueLIst.types"; - -export const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => { - const { numSelected } = props; - - return ( - - 0 && { - bgcolor: (theme) => - alpha( - theme.palette.primary.main, - theme.palette.action.activatedOpacity - ), - }), - }} - > - {numSelected > 0 ? ( - - {numSelected} selected - - ) : ( - <> - - 이슈리스트 - - - - - )} - {numSelected > 0 ? ( - - - - - - ) : ( - - - - - - )} - - - ); -}; diff --git a/FE/tracker/src/components/signIn/signIn.jsx b/FE/tracker/src/components/signIn/signIn.jsx index 2074980504..0d5d7f7025 100644 --- a/FE/tracker/src/components/signIn/signIn.jsx +++ b/FE/tracker/src/components/signIn/signIn.jsx @@ -1,5 +1,5 @@ // import * as React, {} from "react"; -import React, { useMemo } from "react"; +import React from "react"; // import Matrix from "./canvas.jsx"; // Material UI @@ -12,7 +12,7 @@ import LockOutlinedIcon from "@mui/icons-material/LockOutlined"; import Typography from "@mui/material/Typography"; import Container from "@mui/material/Container"; -import { createTheme, ThemeProvider } from "@mui/material/styles"; +import { ThemeProvider } from "@mui/material/styles"; import Copyright from "./copyright.jsx"; import { matrixTheme } from "../../mui-style/muiTheme.jsx"; @@ -21,37 +21,6 @@ const loginUri = "https://github.com/login/oauth/authorize?client_id=2f3993bd2491df08d37b"; export default function SignIn(props) { - // const { req: Request, res: Response, next: NextFunction } = props; - // const code = req.query.code; - // const pathUrl = req.query.state; - - // if (req.query.error) { - // return res.redirect(`${config.get("origin")}/login`); - // } - // if (!code) { - // return next(new Error("Autorization code not provided!", 401)); - // } - // const {access_token} = await getToken({code}); - - // const user = await findAndUpdateUser({email}, { - // email, - // photo:avatar_url, - // name:login, - // provider:'Github', - // verified:true, - // }, - // { runValidators: false, new: true, upsert: true } - // ); - - // if (!user) { - // return res.redirect(`${config.get('origin')}/oauth/error`); - // } - - const handleGithubLogin = (event) => { - event.preventDefault(); - console.log("success"); - }; - return ( <> diff --git a/FE/tracker/src/mui-style/muiTheme.jsx b/FE/tracker/src/mui-style/muiTheme.jsx index 80840fbe32..385f04966d 100644 --- a/FE/tracker/src/mui-style/muiTheme.jsx +++ b/FE/tracker/src/mui-style/muiTheme.jsx @@ -1,4 +1,3 @@ -import * as React from "react"; import { createTheme } from "@mui/material"; export const matrixTheme = createTheme({