diff --git a/FE/tracker/README.md b/FE/tracker/README.md index 9d2ae6e507..eaa918b43f 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,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)

-# 고마워요 에러 해결사! +# 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 +
+
+ +# React TypeScript + +## [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/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 6d601f0d5e..0000000000 --- a/FE/tracker/src/components/issueList/IssueList.function.tsx +++ /dev/null @@ -1,56 +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); -} - -// 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 -) { - 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/iissueListTable.tsx b/FE/tracker/src/components/issueList/iissueListTable.tsx deleted file mode 100644 index 32ab6b6536..0000000000 --- a/FE/tracker/src/components/issueList/iissueListTable.tsx +++ /dev/null @@ -1,47 +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); -} - -// 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 -) { - 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/issueList.tsx b/FE/tracker/src/components/issueList/issueList.tsx index 744503fe34..14980a2506 100644 --- a/FE/tracker/src/components/issueList/issueList.tsx +++ b/FE/tracker/src/components/issueList/issueList.tsx @@ -1,243 +1,238 @@ -import * as React from "react"; +// 기타 library import axios from "axios"; -// MUI Material -import Box from "@mui/material/Box"; +// 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 { 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; + writer: string; + reviewer: string; + issueId: number; +} -// 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), -// ]; +function createData( + title: string, + issueData: string, + writer: string, + reviewer: string, + issueId: number +): Data { + return { title, issueData, writer, reviewer, issueId }; +} -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); +function EnhancedTable() { const [rows, setRows] = React.useState([]); - const [rowsPerPage, setRowsPerPage] = React.useState(5); - - 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: string) => selected.indexOf(name) !== -1; - + 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 = () => { - return axios + const request = 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) => { + console.log("데이터받는중"); + 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", rows); + } + }) + .catch((error) => console.error(`Error: ${error}`)); }; React.useEffect(() => { - // Postman Api 문서에서 데이터 받아오기 - console.log("데이터중복방지?"); - fetchData(); - }, []); - - // 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 (isLoading === false) { + fetchData(); + } + }); + + if (!isLoading) { + return ( +
+ Please wait some time~ 리액트가 데이터 받아오는 속도랑 + 랜더링하는 속도랑 달라서 시간차 공격 들어갑니다~ +
+ ); + } + + if (isLoading) { + return ( + <> + {/* */} + + + + Issue List + + + + + +
+ + + + 이슈 + + + 작성날짜 + + + 작성자 + + + 담당자 + + + - {/* 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 && ( + {rows.map((row, index) => ( - + + 1{row.title} + + + {row.issueData} + + + {row.writer} + + + sonya, nori + - )} + ))}
- - - - } - label="Dense padding" - /> - - ); + + ); + } } + +export default EnhancedTable; 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/issueListToolbar.tsx b/FE/tracker/src/components/issueList/issueListToolbar.tsx deleted file mode 100644 index 29423104be..0000000000 --- a/FE/tracker/src/components/issueList/issueListToolbar.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import * as React from "react"; - -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 - - ) : ( - - Issue LIst - - )} - {numSelected > 0 ? ( - - - - - - ) : ( - - - - - - )} - - ); -}; diff --git a/FE/tracker/src/components/signIn/matrix.jsx b/FE/tracker/src/components/signIn/matrix.jsx index 5836a41901..68225ad394 100644 --- a/FE/tracker/src/components/signIn/matrix.jsx +++ b/FE/tracker/src/components/signIn/matrix.jsx @@ -1,56 +1,151 @@ +import { FormControlUnstyledContext } from "@mui/base"; 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; +// }); +// }; + +// 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; + +const fontSize = 12; +const slightSmallFontSize = tileSize - 2; + 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"; + // divide the canvas into columns. + const init = (w, h) => { + const canvas = canvasRef.current; + const ctx = canvas.getContext("2d"); + + maxStackHeight = Math.ceil(w / tileSize); - const alphabet = korean + latin + nums; - const fontSize = 8; + 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 drawMatrix = () => { + const draw = () => { 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 , " + fadeFactor + " )"; + 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) + ); + ctx.fillText( + randomCharacter, + columns[i].x, + columns[i].stackCounter * tileSize + tileSize + ); - 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; - }); + // 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"); - drawMatrix(); - }, 100); + draw(); + }, 2000); return () => clearInterval(intervalPoint); }, []); - return ; + return ; } export default Matrix; 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 56f63f372e..385f04966d 100644 --- a/FE/tracker/src/mui-style/muiTheme.jsx +++ b/FE/tracker/src/mui-style/muiTheme.jsx @@ -1,4 +1,4 @@ -import { ThemeProvider, createTheme } from "@mui/material"; +import { createTheme } from "@mui/material"; export const matrixTheme = createTheme({ palette: { @@ -21,9 +21,5 @@ export const listTheme = createTheme({ main: "#121212", light: "#f2f2f2", }, - neutral: { - main: "#bdbdbd", - dark: "212121", - }, }, });