From 5b5a152476029531bb10e35c2ac1356d031387ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=98=A4=EC=9D=B8=ED=98=81?= Date: Sat, 2 Mar 2024 16:43:52 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Style:=20=EC=88=9C=EC=9C=84=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B7=B0=20=ED=86=A0=EA=B8=80=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 5 ++-- pnpm-lock.yaml | 33 +++++++++++++++++++++++-- src/components/Rank/ViewToggleButton.js | 29 ++++++++++++++++++++++ src/pages/Rank/Rank.js | 5 ++++ 4 files changed, 68 insertions(+), 4 deletions(-) create mode 100644 src/components/Rank/ViewToggleButton.js diff --git a/package.json b/package.json index 887b75d..c7fbcfa 100644 --- a/package.json +++ b/package.json @@ -4,13 +4,14 @@ "private": true, "type": "module", "dependencies": { - "@emotion/react": "^11.11.1", + "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.0", "@fontsource/roboto": "^4.5.8", "@mui/icons-material": "^5.11.16", - "@mui/material": "^5.12.3", + "@mui/material": "^5.15.11", "@mui/styled-engine-sc": "^5.14.7", "@mui/system": "^5.14.7", + "@mui/x-data-grid": "^6.19.5", "@react-oauth/google": "^0.11.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b727517..52600ef 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,7 +6,7 @@ settings: dependencies: '@emotion/react': - specifier: ^11.11.1 + specifier: ^11.11.4 version: 11.11.4(react@18.2.0) '@emotion/styled': specifier: ^11.11.0 @@ -18,7 +18,7 @@ dependencies: specifier: ^5.11.16 version: 5.15.11(@mui/material@5.15.11)(react@18.2.0) '@mui/material': - specifier: ^5.12.3 + specifier: ^5.15.11 version: 5.15.11(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0) '@mui/styled-engine-sc': specifier: ^5.14.7 @@ -26,6 +26,9 @@ dependencies: '@mui/system': specifier: ^5.14.7 version: 5.15.11(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0) + '@mui/x-data-grid': + specifier: ^6.19.5 + version: 6.19.5(@mui/material@5.15.11)(@mui/system@5.15.11)(react-dom@18.2.0)(react@18.2.0) '@react-oauth/google': specifier: ^0.11.0 version: 0.11.1(react-dom@18.2.0)(react@18.2.0) @@ -3180,6 +3183,28 @@ packages: react-is: 18.2.0 dev: false + /@mui/x-data-grid@6.19.5(@mui/material@5.15.11)(@mui/system@5.15.11)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-jV1ZqwyFslKqFScSn4t+xc/tNxLHOeJjz3HoeK+Wdf5t3bPM69pg/jLeg8TmOkAUY62JmQKCLVmcGWiR3AqUKQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@mui/material': ^5.4.1 + '@mui/system': ^5.4.1 + react: ^17.0.0 || ^18.0.0 + react-dom: ^17.0.0 || ^18.0.0 + dependencies: + '@babel/runtime': 7.24.0 + '@mui/material': 5.15.11(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react-dom@18.2.0)(react@18.2.0) + '@mui/system': 5.15.11(@emotion/react@11.11.4)(@emotion/styled@11.11.0)(react@18.2.0) + '@mui/utils': 5.15.11(react@18.2.0) + clsx: 2.1.0 + prop-types: 15.8.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + reselect: 4.1.8 + transitivePeerDependencies: + - '@types/react' + dev: false + /@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1: resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==} dependencies: @@ -10951,6 +10976,10 @@ packages: resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==} dev: false + /reselect@4.1.8: + resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==} + dev: false + /resolve-cwd@3.0.0: resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==} engines: {node: '>=8'} diff --git a/src/components/Rank/ViewToggleButton.js b/src/components/Rank/ViewToggleButton.js new file mode 100644 index 0000000..b936b67 --- /dev/null +++ b/src/components/Rank/ViewToggleButton.js @@ -0,0 +1,29 @@ +import { Box, Stack, ToggleButton, ToggleButtonGroup } from "@mui/material"; + +import ViewListIcon from "@mui/icons-material/ViewList"; +import ViewModuleIcon from "@mui/icons-material/ViewModule"; + +export default function ViewToggleButton({ view, setView }) { + const handleViewChange = (event, nextView) => { + setView(nextView); + }; + return ( + + + + + + + + + + + ); +} diff --git a/src/pages/Rank/Rank.js b/src/pages/Rank/Rank.js index f68e491..2b873c9 100644 --- a/src/pages/Rank/Rank.js +++ b/src/pages/Rank/Rank.js @@ -17,6 +17,8 @@ import { useRecoilValue, useSetRecoilState } from "recoil"; import { authorityState, isShowFullImageState } from "../../store/atom"; import FullImage from "../../components/Rank/FullImage"; +import ViewToggleButton from "../../components/Rank/ViewToggleButton"; + const StyledScrollBox = styled(Box)({ maxWidth: "1245px", width: "100%", @@ -32,6 +34,7 @@ const StyledItemSize = styled(Box)({ export default function Rank() { const [teams, setTeams] = useState([]); const [itemsHover, setItemsHover] = useState([]); + const [view, setView] = useState("list"); const { isLoading } = useQuery(["AllTeamRanks"], getAllTeamsForRank, { casheTime: 10 * 60 * 1000, @@ -82,6 +85,8 @@ export default function Rank() { ) : ( + + Date: Sat, 2 Mar 2024 17:29:29 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Style:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=B7=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Rank/RankGridView.js | 82 ++++++ src/components/Rank/RankListView.js | 38 +++ src/pages/Rank/Rank.js | 420 +++++++++++++++++++++++----- 3 files changed, 468 insertions(+), 72 deletions(-) create mode 100644 src/components/Rank/RankGridView.js create mode 100644 src/components/Rank/RankListView.js diff --git a/src/components/Rank/RankGridView.js b/src/components/Rank/RankGridView.js new file mode 100644 index 0000000..0ca32c6 --- /dev/null +++ b/src/components/Rank/RankGridView.js @@ -0,0 +1,82 @@ +import { Box, styled, Grid, ImageList } from "@mui/material"; +import HoverBox from "./HoverBox"; +import Item from "./Item"; +import { motion } from "framer-motion"; +import { useRecoilValue } from "recoil"; +import { useSetRecoilState } from "recoil"; +import { authorityState, isShowFullImageState } from "../../store/atom"; +import { AnimatePresence } from "framer-motion"; + +const StyledItemSize = styled(Box)({ + position: "relative", + width: "300px", + height: "300px", +}); + +export default function RankGridView({ + setFullImageUrl, + setItemsHover, + teams, + itemsHover, +}) { + const setIsShowFullImage = useSetRecoilState(isShowFullImageState); + const myAuthority = useRecoilValue(authorityState); + + const handleFullImageOpen = async (imageUrl) => { + if (myAuthority !== "ADMIN") return; + if (!imageUrl) { + setFullImageUrl("/img/mainImg2.png"); + } else setFullImageUrl(imageUrl); + setIsShowFullImage(true); + }; + + const handleMouseOver = (index) => { + setItemsHover((prev) => [ + ...prev?.slice(0, index), + true, + ...prev?.slice(index + 1), + ]); + }; + const handleMouseOut = (index) => { + setItemsHover((prev) => [ + ...prev?.slice(0, index), + false, + ...prev?.slice(index + 1), + ]); + }; + + return ( + + {teams.map((item, index) => ( + handleFullImageOpen(item?.thumbnail)} + > + handleMouseOver(index)} + onMouseOut={() => handleMouseOut(index)} + > + + {itemsHover[index] && ( + + )} + + + + + + ))} + + ); +} diff --git a/src/components/Rank/RankListView.js b/src/components/Rank/RankListView.js new file mode 100644 index 0000000..26d2d26 --- /dev/null +++ b/src/components/Rank/RankListView.js @@ -0,0 +1,38 @@ +import { DataGrid } from "@mui/x-data-grid"; +const columns = [ + { field: "id", headerName: "순위", width: 100 }, + { field: "groupNm", headerName: "그룹", width: 100 }, + { + field: "reportNm", + headerName: "제출한 레포트 수", + type: "number", + width: 200, + }, + { + field: "totalMins", + headerName: "총 시간", + type: "number", + width: 150, + }, +]; + +export default function RankListView({ teams }) { + const convertTeams2List = (teams) => { + return teams?.map((team, idx) => { + return { + id: idx + 1, + groupNm: team.id, + reportNm: team.reports, + totalMins: team.totalMinutes, + }; + }); + }; + + return ( + + ); +} diff --git a/src/pages/Rank/Rank.js b/src/pages/Rank/Rank.js index 2b873c9..cdd280b 100644 --- a/src/pages/Rank/Rank.js +++ b/src/pages/Rank/Rank.js @@ -1,23 +1,22 @@ -import { Grid, ImageList, styled } from "@mui/material"; +import { styled } from "@mui/material"; import { Box } from "@mui/system"; import { useState } from "react"; import { getAllTeamsForRank } from "../../apis/rank"; -import HoverBox from "../../components/Rank/HoverBox"; -import { AnimatePresence, motion } from "framer-motion"; +import { motion } from "framer-motion"; import NoDataLottie from "../../components/common/NoDataLottie"; import { StyledColumnAlignLayout } from "../../components/common/StyledLayout"; import Title from "../../components/common/Title"; import { useQuery } from "react-query"; -import Item from "../../components/Rank/Item"; -import { useRecoilValue, useSetRecoilState } from "recoil"; -import { authorityState, isShowFullImageState } from "../../store/atom"; import FullImage from "../../components/Rank/FullImage"; import ViewToggleButton from "../../components/Rank/ViewToggleButton"; +import { DataGrid } from "@mui/x-data-grid"; +import RankListView from "../../components/Rank/RankListView"; +import RankGridView from "../../components/Rank/RankGridView"; const StyledScrollBox = styled(Box)({ maxWidth: "1245px", @@ -25,52 +24,350 @@ const StyledScrollBox = styled(Box)({ overflow: "scroll", }); -const StyledItemSize = styled(Box)({ - position: "relative", - width: "300px", - height: "300px", -}); - export default function Rank() { - const [teams, setTeams] = useState([]); + const [teams, setTeams] = useState([ + { + id: 1, + members: ["임혜원", "박소연", "이채연", "최동빈", "윤유원"], + reports: 18, + totalMinutes: 3656, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group01-report_20231202_201356.jpg", + }, + { + id: 30, + members: ["이성민", "이온유", "곽도현", "조귀호", "장영진"], + reports: 15, + totalMinutes: 3230, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group30-report_20231125_140523.jpg", + }, + { + id: 27, + members: [ + "송영은", + "정성호", + "이준형", + "사우 지아 유인", + "박시은", + "이호영", + ], + reports: 11, + totalMinutes: 2552, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group27-report_20231215_091508.jpg", + }, + { + id: 4, + members: ["박원진", "박종혁", "안서영"], + reports: 10, + totalMinutes: 2300, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group04-report_20231206_023226.jpg", + }, + { + id: 10, + members: ["안정현", "연혜은", "김민영"], + reports: 11, + totalMinutes: 2060, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group10-report_20231215_043928.jpg", + }, + { + id: 23, + members: ["강병우", "공호중", "신하민"], + reports: 10, + totalMinutes: 1915, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group23-report_20231215_042759.jpg", + }, + { + id: 38, + members: ["김예지", "장하준", "박승종", "곽철호"], + reports: 12, + totalMinutes: 1895, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group38-report_20231120_234048.jpg", + }, + { + id: 20, + members: ["류정현", "오예은", "서경미", "정성구"], + reports: 12, + totalMinutes: 1783, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group20-report_20231127_230618.jpg", + }, + { + id: 19, + members: ["박민준", "박지훈", "송산"], + reports: 12, + totalMinutes: 1354, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group19-report_20231212_205321.jpg", + }, + { + id: 22, + members: ["박한민", "김가현", "이예은", "천국인"], + reports: 10, + totalMinutes: 1183, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group22-report_20231213_223020.jpg", + }, + { + id: 34, + members: ["심성환", "김태민", "김민섭"], + reports: 11, + totalMinutes: 1169, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group34-report_20231207_210001.jpg", + }, + { + id: 5, + members: ["김시찬", "백형준", "안하경", "유건민"], + reports: 11, + totalMinutes: 1120, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group05-report_20231213_210156.jpg", + }, + { + id: 18, + members: ["신문수", "권세한", "송민영", "박조이"], + reports: 10, + totalMinutes: 1089, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group18-report_20231204_190711.jpg", + }, + { + id: 2, + members: ["김도현", "양현우", "임성빈", "이수인"], + reports: 11, + totalMinutes: 990, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group02-report_20231204_005653.jpg", + }, + { + id: 12, + members: ["김희라", "방석민", "유소은", "정현준"], + reports: 6, + totalMinutes: 780, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group12-report_20231201_150253.jpg", + }, + { + id: 3, + members: ["정승희", "김성은", "김동규", "이성주", "김솔미"], + reports: 11, + totalMinutes: 773, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group03-report_20231214_203616.jpg", + }, + { + id: 37, + members: ["김찬영", "김광일", "박민찬", "김민혁", "최예라"], + reports: 10, + totalMinutes: 749, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group37-report_20231128_220533.jpg", + }, + { + id: 29, + members: ["이윤서", "조다빈", "김민경", "박세은", "강정희"], + reports: 11, + totalMinutes: 740, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group29-report_20231216_234753.jpg", + }, + { + id: 21, + members: ["김나임", "최지호", "배하빈"], + reports: 10, + totalMinutes: 725, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group21-report_20231205_120520.jpg", + }, + { + id: 26, + members: ["이건희", "이효인", "정희서"], + reports: 11, + totalMinutes: 694, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group26-report_20231213_154810.jpg", + }, + { + id: 24, + members: ["이진주", "김가륜", "전예빈"], + reports: 6, + totalMinutes: 659, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group24-report_20231210_221631.jpg", + }, + { + id: 39, + members: ["김채린", "박은혜", "이수민", "오세훈"], + reports: 9, + totalMinutes: 620, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group39-report_20231213_225500.jpg", + }, + { + id: 33, + members: ["박호함", "황유민", "김승환", "김성현"], + reports: 10, + totalMinutes: 605, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group33-report_20231127_135754.jpg", + }, + { + id: 15, + members: ["한나린", "김유진", "고영서", "양병훈"], + reports: 7, + totalMinutes: 600, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group15-report_20231204_215543.jpg", + }, + { + id: 25, + members: ["안수민", "신혜민", "유은서", "이지원"], + reports: 9, + totalMinutes: 570, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group25-report_20231212_201027.jpg", + }, + { + id: 11, + members: ["천그루", "송승언", "최혁진", "김예성", "김범진"], + reports: 7, + totalMinutes: 420, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group11-report_20231212_230558.jpg", + }, + { + id: 31, + members: ["김연희", "임주환", "김예준", "신지수", "한상화"], + reports: 7, + totalMinutes: 418, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group31-report_20231108_204548.jpg", + }, + { + id: 9, + members: ["김하람", "우병희", "김현승", "천주현"], + reports: 2, + totalMinutes: 240, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group09-report_20231029_143151.jpg", + }, + { + id: 32, + members: ["김민혁", "박세영", "조동운"], + reports: 1, + totalMinutes: 185, + thumbnail: + "https://firebasestorage.googleapis.com/v0/b/exalted-stage-387815.appspot.com/o/files%2F%EC%BB%B4%EA%B5%AC%EC%8A%A4%ED%84%B0%EB%94%94%201%ED%9A%8C%EC%B0%A8.jpg?alt=media&token=82d29c53-517e-40ea-9260-86b6fc7b01b4", + }, + { + id: 35, + members: ["이준혁", "이준환", "임예진", "김예빈", "조준희"], + reports: 3, + totalMinutes: 185, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group35-report_20231109_200921.jpg", + }, + { + id: 6, + members: ["강준혁", "임연규", "정수아", "김신후", "이선환"], + reports: 3, + totalMinutes: 180, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group06-report_20231106_225817.jpg", + }, + { + id: 28, + members: ["함상훈", "서용원", "권은혁"], + reports: 1, + totalMinutes: 120, + thumbnail: + "https://firebasestorage.googleapis.com/v0/b/exalted-stage-387815.appspot.com/o/files%2F1697099474013.jpg?alt=media&token=94407c6d-23e5-4ccc-9044-b7956c8c6150", + }, + { + id: 41, + members: ["조성민", "서민재", "서민준"], + reports: 2, + totalMinutes: 120, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group41-report_20231113_201708.jpg", + }, + { + id: 42, + members: ["한시온", "JC Nam남재창 교수님"], + reports: 1, + totalMinutes: 2, + thumbnail: + "https://histudy.lifove.net/reports/images/2023-2-group42-report_20231025_024902.jpg", + }, + { + id: 8, + members: ["최윤오", "금예지", "손철민"], + reports: 0, + totalMinutes: 0, + }, + { + id: 36, + members: ["오성진", "백승준", "김희송", "김부흥"], + reports: 0, + totalMinutes: 0, + }, + { + id: 7, + members: ["임찬혁", "김현기"], + reports: 0, + totalMinutes: 0, + }, + { + id: 16, + members: ["안명훈", "한종운", "정인경", "이찬영", "정상우"], + reports: 0, + totalMinutes: 0, + }, + { + id: 40, + members: ["최준서", "김한욱"], + reports: 0, + totalMinutes: 0, + }, + { + id: 17, + members: ["임청현", "김하진", "박서윤", "김성주"], + reports: 0, + totalMinutes: 0, + }, + { + id: 14, + members: ["장세창", "최준혁", "김성빈", "배재호", "김대석"], + reports: 0, + totalMinutes: 0, + }, + { + id: 13, + members: ["최지원", "전혜원", "윤성현"], + reports: 0, + totalMinutes: 0, + }, + ]); const [itemsHover, setItemsHover] = useState([]); const [view, setView] = useState("list"); const { isLoading } = useQuery(["AllTeamRanks"], getAllTeamsForRank, { casheTime: 10 * 60 * 1000, onSuccess: (data) => { - setTeams(data.teams); + // setTeams(data.teams); setItemsHover(new Array(data.teams.length).fill(false)); }, + refetchOnWindowFocus: false, }); - const handleMouseOver = (index) => { - setItemsHover((prev) => [ - ...prev?.slice(0, index), - true, - ...prev?.slice(index + 1), - ]); - }; - const handleMouseOut = (index) => { - setItemsHover((prev) => [ - ...prev?.slice(0, index), - false, - ...prev?.slice(index + 1), - ]); - }; - - const setIsShowFullImage = useSetRecoilState(isShowFullImageState); - const myAuthority = useRecoilValue(authorityState); const [fullImageUrl, setFullImageUrl] = useState(null); - const handleFullImageOpen = async (imageUrl) => { - if (myAuthority !== "ADMIN") return; - if (!imageUrl) { - setFullImageUrl("/img/mainImg2.png"); - } else setFullImageUrl(imageUrl); - setIsShowFullImage(true); - }; - return ( <> @@ -86,39 +383,18 @@ export default function Rank() { ) : ( - - - {teams.map((item, index) => ( - handleFullImageOpen(item?.thumbnail)} - > - handleMouseOver(index)} - onMouseOut={() => handleMouseOut(index)} - > - - {itemsHover[index] && ( - - )} - - - - - - ))} - + {view === "list" ? ( +
+ +
+ ) : ( + + )} )} From 333e8f9e4a591507ff29f1b853441100d012195d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=98=A4=EC=9D=B8=ED=98=81?= Date: Sun, 3 Mar 2024 01:39:35 +0900 Subject: [PATCH 3/4] =?UTF-8?q?Feat:=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=B7=B0=EC=97=90=20=ED=8C=80=EC=9B=90=20=EC=A0=95=EB=B3=B4=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Rank/RankListView.js | 11 +- src/components/Rank/ViewToggleButton.js | 2 +- src/pages/Rank/Rank.js | 340 +----------------------- 3 files changed, 15 insertions(+), 338 deletions(-) diff --git a/src/components/Rank/RankListView.js b/src/components/Rank/RankListView.js index 26d2d26..cbcb730 100644 --- a/src/components/Rank/RankListView.js +++ b/src/components/Rank/RankListView.js @@ -6,14 +6,20 @@ const columns = [ field: "reportNm", headerName: "제출한 레포트 수", type: "number", - width: 200, + width: 300, }, { field: "totalMins", - headerName: "총 시간", + headerName: "총 시간(분)", type: "number", width: 150, }, + { + field: "members", + headerName: "팀원", + type: "text", + width: 600, + }, ]; export default function RankListView({ teams }) { @@ -24,6 +30,7 @@ export default function RankListView({ teams }) { groupNm: team.id, reportNm: team.reports, totalMins: team.totalMinutes, + members: team.members.join(", "), }; }); }; diff --git a/src/components/Rank/ViewToggleButton.js b/src/components/Rank/ViewToggleButton.js index b936b67..31e732e 100644 --- a/src/components/Rank/ViewToggleButton.js +++ b/src/components/Rank/ViewToggleButton.js @@ -1,4 +1,4 @@ -import { Box, Stack, ToggleButton, ToggleButtonGroup } from "@mui/material"; +import { Stack, ToggleButton, ToggleButtonGroup } from "@mui/material"; import ViewListIcon from "@mui/icons-material/ViewList"; import ViewModuleIcon from "@mui/icons-material/ViewModule"; diff --git a/src/pages/Rank/Rank.js b/src/pages/Rank/Rank.js index cdd280b..af82334 100644 --- a/src/pages/Rank/Rank.js +++ b/src/pages/Rank/Rank.js @@ -14,7 +14,6 @@ import { useQuery } from "react-query"; import FullImage from "../../components/Rank/FullImage"; import ViewToggleButton from "../../components/Rank/ViewToggleButton"; -import { DataGrid } from "@mui/x-data-grid"; import RankListView from "../../components/Rank/RankListView"; import RankGridView from "../../components/Rank/RankGridView"; @@ -25,342 +24,14 @@ const StyledScrollBox = styled(Box)({ }); export default function Rank() { - const [teams, setTeams] = useState([ - { - id: 1, - members: ["임혜원", "박소연", "이채연", "최동빈", "윤유원"], - reports: 18, - totalMinutes: 3656, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group01-report_20231202_201356.jpg", - }, - { - id: 30, - members: ["이성민", "이온유", "곽도현", "조귀호", "장영진"], - reports: 15, - totalMinutes: 3230, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group30-report_20231125_140523.jpg", - }, - { - id: 27, - members: [ - "송영은", - "정성호", - "이준형", - "사우 지아 유인", - "박시은", - "이호영", - ], - reports: 11, - totalMinutes: 2552, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group27-report_20231215_091508.jpg", - }, - { - id: 4, - members: ["박원진", "박종혁", "안서영"], - reports: 10, - totalMinutes: 2300, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group04-report_20231206_023226.jpg", - }, - { - id: 10, - members: ["안정현", "연혜은", "김민영"], - reports: 11, - totalMinutes: 2060, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group10-report_20231215_043928.jpg", - }, - { - id: 23, - members: ["강병우", "공호중", "신하민"], - reports: 10, - totalMinutes: 1915, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group23-report_20231215_042759.jpg", - }, - { - id: 38, - members: ["김예지", "장하준", "박승종", "곽철호"], - reports: 12, - totalMinutes: 1895, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group38-report_20231120_234048.jpg", - }, - { - id: 20, - members: ["류정현", "오예은", "서경미", "정성구"], - reports: 12, - totalMinutes: 1783, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group20-report_20231127_230618.jpg", - }, - { - id: 19, - members: ["박민준", "박지훈", "송산"], - reports: 12, - totalMinutes: 1354, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group19-report_20231212_205321.jpg", - }, - { - id: 22, - members: ["박한민", "김가현", "이예은", "천국인"], - reports: 10, - totalMinutes: 1183, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group22-report_20231213_223020.jpg", - }, - { - id: 34, - members: ["심성환", "김태민", "김민섭"], - reports: 11, - totalMinutes: 1169, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group34-report_20231207_210001.jpg", - }, - { - id: 5, - members: ["김시찬", "백형준", "안하경", "유건민"], - reports: 11, - totalMinutes: 1120, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group05-report_20231213_210156.jpg", - }, - { - id: 18, - members: ["신문수", "권세한", "송민영", "박조이"], - reports: 10, - totalMinutes: 1089, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group18-report_20231204_190711.jpg", - }, - { - id: 2, - members: ["김도현", "양현우", "임성빈", "이수인"], - reports: 11, - totalMinutes: 990, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group02-report_20231204_005653.jpg", - }, - { - id: 12, - members: ["김희라", "방석민", "유소은", "정현준"], - reports: 6, - totalMinutes: 780, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group12-report_20231201_150253.jpg", - }, - { - id: 3, - members: ["정승희", "김성은", "김동규", "이성주", "김솔미"], - reports: 11, - totalMinutes: 773, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group03-report_20231214_203616.jpg", - }, - { - id: 37, - members: ["김찬영", "김광일", "박민찬", "김민혁", "최예라"], - reports: 10, - totalMinutes: 749, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group37-report_20231128_220533.jpg", - }, - { - id: 29, - members: ["이윤서", "조다빈", "김민경", "박세은", "강정희"], - reports: 11, - totalMinutes: 740, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group29-report_20231216_234753.jpg", - }, - { - id: 21, - members: ["김나임", "최지호", "배하빈"], - reports: 10, - totalMinutes: 725, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group21-report_20231205_120520.jpg", - }, - { - id: 26, - members: ["이건희", "이효인", "정희서"], - reports: 11, - totalMinutes: 694, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group26-report_20231213_154810.jpg", - }, - { - id: 24, - members: ["이진주", "김가륜", "전예빈"], - reports: 6, - totalMinutes: 659, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group24-report_20231210_221631.jpg", - }, - { - id: 39, - members: ["김채린", "박은혜", "이수민", "오세훈"], - reports: 9, - totalMinutes: 620, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group39-report_20231213_225500.jpg", - }, - { - id: 33, - members: ["박호함", "황유민", "김승환", "김성현"], - reports: 10, - totalMinutes: 605, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group33-report_20231127_135754.jpg", - }, - { - id: 15, - members: ["한나린", "김유진", "고영서", "양병훈"], - reports: 7, - totalMinutes: 600, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group15-report_20231204_215543.jpg", - }, - { - id: 25, - members: ["안수민", "신혜민", "유은서", "이지원"], - reports: 9, - totalMinutes: 570, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group25-report_20231212_201027.jpg", - }, - { - id: 11, - members: ["천그루", "송승언", "최혁진", "김예성", "김범진"], - reports: 7, - totalMinutes: 420, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group11-report_20231212_230558.jpg", - }, - { - id: 31, - members: ["김연희", "임주환", "김예준", "신지수", "한상화"], - reports: 7, - totalMinutes: 418, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group31-report_20231108_204548.jpg", - }, - { - id: 9, - members: ["김하람", "우병희", "김현승", "천주현"], - reports: 2, - totalMinutes: 240, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group09-report_20231029_143151.jpg", - }, - { - id: 32, - members: ["김민혁", "박세영", "조동운"], - reports: 1, - totalMinutes: 185, - thumbnail: - "https://firebasestorage.googleapis.com/v0/b/exalted-stage-387815.appspot.com/o/files%2F%EC%BB%B4%EA%B5%AC%EC%8A%A4%ED%84%B0%EB%94%94%201%ED%9A%8C%EC%B0%A8.jpg?alt=media&token=82d29c53-517e-40ea-9260-86b6fc7b01b4", - }, - { - id: 35, - members: ["이준혁", "이준환", "임예진", "김예빈", "조준희"], - reports: 3, - totalMinutes: 185, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group35-report_20231109_200921.jpg", - }, - { - id: 6, - members: ["강준혁", "임연규", "정수아", "김신후", "이선환"], - reports: 3, - totalMinutes: 180, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group06-report_20231106_225817.jpg", - }, - { - id: 28, - members: ["함상훈", "서용원", "권은혁"], - reports: 1, - totalMinutes: 120, - thumbnail: - "https://firebasestorage.googleapis.com/v0/b/exalted-stage-387815.appspot.com/o/files%2F1697099474013.jpg?alt=media&token=94407c6d-23e5-4ccc-9044-b7956c8c6150", - }, - { - id: 41, - members: ["조성민", "서민재", "서민준"], - reports: 2, - totalMinutes: 120, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group41-report_20231113_201708.jpg", - }, - { - id: 42, - members: ["한시온", "JC Nam남재창 교수님"], - reports: 1, - totalMinutes: 2, - thumbnail: - "https://histudy.lifove.net/reports/images/2023-2-group42-report_20231025_024902.jpg", - }, - { - id: 8, - members: ["최윤오", "금예지", "손철민"], - reports: 0, - totalMinutes: 0, - }, - { - id: 36, - members: ["오성진", "백승준", "김희송", "김부흥"], - reports: 0, - totalMinutes: 0, - }, - { - id: 7, - members: ["임찬혁", "김현기"], - reports: 0, - totalMinutes: 0, - }, - { - id: 16, - members: ["안명훈", "한종운", "정인경", "이찬영", "정상우"], - reports: 0, - totalMinutes: 0, - }, - { - id: 40, - members: ["최준서", "김한욱"], - reports: 0, - totalMinutes: 0, - }, - { - id: 17, - members: ["임청현", "김하진", "박서윤", "김성주"], - reports: 0, - totalMinutes: 0, - }, - { - id: 14, - members: ["장세창", "최준혁", "김성빈", "배재호", "김대석"], - reports: 0, - totalMinutes: 0, - }, - { - id: 13, - members: ["최지원", "전혜원", "윤성현"], - reports: 0, - totalMinutes: 0, - }, - ]); + const [teams, setTeams] = useState([]); const [itemsHover, setItemsHover] = useState([]); const [view, setView] = useState("list"); - const { isLoading } = useQuery(["AllTeamRanks"], getAllTeamsForRank, { + useQuery(["AllTeamRanks"], getAllTeamsForRank, { casheTime: 10 * 60 * 1000, onSuccess: (data) => { - // setTeams(data.teams); + setTeams(data.teams); setItemsHover(new Array(data.teams.length).fill(false)); }, refetchOnWindowFocus: false, @@ -383,10 +54,9 @@ export default function Rank() { ) : ( + {view === "list" ? ( -
- -
+ ) : ( Date: Sun, 3 Mar 2024 01:48:12 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Style:=20=EB=86=92=EC=9D=80=20=EB=93=B1?= =?UTF-8?q?=EC=88=98=20=EC=9D=B8=20=EA=B2=BD=EC=9A=B0=20=EB=A9=94=EB=8B=AC?= =?UTF-8?q?=20=EC=9D=B4=EB=AA=A8=EC=A7=80=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Rank/RankListView.js | 15 ++++++++++++++- src/pages/Rank/Rank.js | 1 + 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/Rank/RankListView.js b/src/components/Rank/RankListView.js index cbcb730..2b28b25 100644 --- a/src/components/Rank/RankListView.js +++ b/src/components/Rank/RankListView.js @@ -23,10 +23,23 @@ const columns = [ ]; export default function RankListView({ teams }) { + const addMedalEmogi = (id) => { + switch (id) { + case 1: + return "🥇"; + case 2: + return "🥈"; + case 3: + return "🥉"; + default: + return id; + } + }; + const convertTeams2List = (teams) => { return teams?.map((team, idx) => { return { - id: idx + 1, + id: addMedalEmogi(idx + 1), groupNm: team.id, reportNm: team.reports, totalMins: team.totalMinutes, diff --git a/src/pages/Rank/Rank.js b/src/pages/Rank/Rank.js index af82334..0435442 100644 --- a/src/pages/Rank/Rank.js +++ b/src/pages/Rank/Rank.js @@ -14,6 +14,7 @@ import { useQuery } from "react-query"; import FullImage from "../../components/Rank/FullImage"; import ViewToggleButton from "../../components/Rank/ViewToggleButton"; +import { DataGrid } from "@mui/x-data-grid"; import RankListView from "../../components/Rank/RankListView"; import RankGridView from "../../components/Rank/RankGridView";