From cd20b7d28ee349b2fa53d7ece4beb1fdabbffc2b Mon Sep 17 00:00:00 2001 From: Ubinquitous Date: Tue, 26 Dec 2023 11:24:22 +0900 Subject: [PATCH 1/4] =?UTF-8?q?chore(context):=20buttonSwitch=20=EC=A0=95?= =?UTF-8?q?=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/templates/meister/context/buttonSwitch.context.ts | 5 +++++ src/templates/meister/context/index.ts | 2 ++ src/templates/meister/context/studentNumber.context.ts | 5 +++++ 3 files changed, 12 insertions(+) create mode 100644 src/templates/meister/context/buttonSwitch.context.ts create mode 100644 src/templates/meister/context/index.ts create mode 100644 src/templates/meister/context/studentNumber.context.ts diff --git a/src/templates/meister/context/buttonSwitch.context.ts b/src/templates/meister/context/buttonSwitch.context.ts new file mode 100644 index 00000000..9f46cb1e --- /dev/null +++ b/src/templates/meister/context/buttonSwitch.context.ts @@ -0,0 +1,5 @@ +import { atom } from "jotai"; + +const buttonSwitchContext = atom(false); + +export default buttonSwitchContext; diff --git a/src/templates/meister/context/index.ts b/src/templates/meister/context/index.ts new file mode 100644 index 00000000..e2633b74 --- /dev/null +++ b/src/templates/meister/context/index.ts @@ -0,0 +1,2 @@ +export { default as studentNumberContext } from "./studentNumber.context"; +export { default as buttonSwitchContext } from "./buttonSwitch.context"; diff --git a/src/templates/meister/context/studentNumber.context.ts b/src/templates/meister/context/studentNumber.context.ts new file mode 100644 index 00000000..650d021a --- /dev/null +++ b/src/templates/meister/context/studentNumber.context.ts @@ -0,0 +1,5 @@ +import { atom } from "jotai"; + +const studentNumberContext = atom(""); + +export default studentNumberContext; From 39c4404fdfc74af00ab07b3a205973fed742354e Mon Sep 17 00:00:00 2001 From: Ubinquitous Date: Tue, 26 Dec 2023 11:24:36 +0900 Subject: [PATCH 2/4] =?UTF-8?q?chore(meister):=20useMeister=20=EC=A0=84?= =?UTF-8?q?=EC=97=AD=20state=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/templates/meister/hooks/useMeister.tsx | 20 +++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/src/templates/meister/hooks/useMeister.tsx b/src/templates/meister/hooks/useMeister.tsx index 43be57ff..e95d8405 100644 --- a/src/templates/meister/hooks/useMeister.tsx +++ b/src/templates/meister/hooks/useMeister.tsx @@ -1,5 +1,6 @@ import React from "react"; import { useUser } from "@/@user/hooks"; +import { useAtom } from "jotai"; import { useMeisterDetailQuery, useMeisterQuery, @@ -11,15 +12,17 @@ import { setMeisterPointNaming, } from "../helpers"; import meisterDefaultDetailData from "../assets/data/defaultMeisterDetail.data"; +import { studentNumberContext, buttonSwitchContext } from "../context"; const useMeister = () => { const { user: { grade, classNum, studentNumber }, } = useUser(); - const [studentNum, setStudentNum] = React.useState( - getStudentId(grade, classNum, studentNumber), - ); + const [viewType, setViewType] = React.useState("분석"); + const [studentNum, setStudentNum] = useAtom(studentNumberContext); + const [buttonSwitch, setButtonSwitch] = useAtom(buttonSwitchContext); + const [meister, setMeister] = React.useState(meisterDefaultData); const [meisterDetail, setMeisterDetail] = React.useState( meisterDefaultDetailData, @@ -50,8 +53,17 @@ const useMeister = () => { setStudentNum(value); }; + React.useEffect(() => { + if (buttonSwitch) { + setViewType("분석"); + meisterDetailQuery.refetch().then(() => setButtonSwitch(false)); + } + // eslint-disable-next-line + }, [buttonSwitch]); + React.useEffect(() => { handleStudentSearchClick(); + setStudentNum(getStudentId(grade, classNum, studentNumber)); // eslint-disable-next-line }, []); @@ -78,6 +90,8 @@ const useMeister = () => { meisterDetail, studentInfo, studentNum, + viewType, + setViewType, handleStudentNumChange, handleStudentSearchClick, }; From b5441c9a5c7b4f445e8b8aa39f41b67a10574540 Mon Sep 17 00:00:00 2001 From: Ubinquitous Date: Tue, 26 Dec 2023 11:24:45 +0900 Subject: [PATCH 3/4] =?UTF-8?q?chore(meister):=20meister=20page=20?= =?UTF-8?q?=EC=A0=84=EC=97=AD=20state=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/templates/meister/layouts/index.tsx | 52 +++++++++++++++++++------ 1 file changed, 40 insertions(+), 12 deletions(-) diff --git a/src/templates/meister/layouts/index.tsx b/src/templates/meister/layouts/index.tsx index a8616e20..38942e88 100644 --- a/src/templates/meister/layouts/index.tsx +++ b/src/templates/meister/layouts/index.tsx @@ -1,10 +1,9 @@ import flex from "@/styles/flex"; import { Column, Row } from "@/components/Flex"; import { theme, font } from "@/styles"; -import { Category } from "@/components/atoms"; import Loading from "@/components/atoms/Loading"; import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import MeisterProfileBox from "./MeisterProfileBox"; import YearlyMeisterScore from "./YearlyMeisterScore"; import Distribution from "./Distribution"; @@ -16,13 +15,14 @@ import { meisterListData } from "../assets/data"; import { useMeister, useMeisterHTML } from "../hooks"; const MeisterPage = () => { - const [viewType, setViewType] = React.useState("분석"); const { + viewType, isLoading, isSuccess, meisterDetail, studentInfo, studentNum, + setViewType, handleStudentNumChange, handleStudentSearchClick, } = useMeister(); @@ -32,15 +32,18 @@ const MeisterPage = () => { 조회 형식 - {["분석", "랭킹"].map((category) => ( - setViewType(category)} - /> - ))} + setViewType("분석")} + > + 분석 + + setViewType("랭킹")} + > + 랭킹 + {viewType === "분석" && ( @@ -174,4 +177,29 @@ const StyledButton = styled.button` color: white; `; +const StyledCategory = styled.label<{ selected: boolean }>` + border: none; + padding: 6px 16px; + border-radius: 999px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 0 10px 0 rgba(144, 144, 144, 0.1); + ${font.btn3}; + ${({ selected }) => + selected + ? css` + background-color: ${theme.primary_blue}; + color: ${theme.white}; + ` + : css` + background-color: ${theme.white}; + color: ${theme.gray}; + + &:hover { + background-color: ${theme.on_tertiary}; + } + `} +`; + export default MeisterPage; From 94185ad3f81c249258b534e761d067c64b6cd5ba Mon Sep 17 00:00:00 2001 From: Ubinquitous Date: Tue, 26 Dec 2023 11:24:55 +0900 Subject: [PATCH 4/4] =?UTF-8?q?chore(meister):=20meister=20page=20?= =?UTF-8?q?=EC=A0=84=EC=97=AD=20state=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/templates/meister/layouts/Ranking.tsx | 6 +++-- .../meister/layouts/RankingListItem.tsx | 27 +++++++++++++------ 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/src/templates/meister/layouts/Ranking.tsx b/src/templates/meister/layouts/Ranking.tsx index fb3421da..892d8f3a 100644 --- a/src/templates/meister/layouts/Ranking.tsx +++ b/src/templates/meister/layouts/Ranking.tsx @@ -1,6 +1,7 @@ import React from "react"; import styled from "styled-components"; import { Category } from "@/components/atoms"; +import { useDidMountEffect } from "@/hooks"; import { flex, font } from "@/styles"; import { useUser } from "@/@user/hooks"; import { useMeisterRankingQuery } from "../services/query.service"; @@ -12,9 +13,10 @@ const Ranking = () => { const [currentGrade, setCurrentGrade] = React.useState(user.grade); const { data, isSuccess, refetch } = useMeisterRankingQuery(currentGrade); - React.useEffect(() => { + useDidMountEffect(() => { refetch(); - }, [currentGrade, refetch]); + // eslint-disable-next-line + }, [currentGrade]); return ( diff --git a/src/templates/meister/layouts/RankingListItem.tsx b/src/templates/meister/layouts/RankingListItem.tsx index 00717b48..e5b8ac27 100644 --- a/src/templates/meister/layouts/RankingListItem.tsx +++ b/src/templates/meister/layouts/RankingListItem.tsx @@ -1,6 +1,9 @@ import styled from "styled-components"; import { Column, Row } from "@/components/Flex"; import { theme, font, flex } from "@/styles"; +import { useSetAtom } from "jotai"; +import { studentNumberContext, buttonSwitchContext } from "../context"; +import { getStudentId } from "../helpers"; interface MeisterProfileBoxProps { score: number; @@ -22,24 +25,31 @@ const RankingListItem = ({ negativePoint, index, }: MeisterProfileBoxProps) => { + const { grade, classNo, studentNo } = student; + const setStudentNum = useSetAtom(studentNumberContext); + const setSwitch = useSetAtom(buttonSwitchContext); + + const handleContainerButtonClick = () => { + setStudentNum(getStudentId(grade, classNo, studentNo)); + setSwitch(true); + }; + return ( - + {index} - {student.grade >= 2 ? ( - - {student.classNo <= 2 ? "소프트웨어" : "임베디드소프트웨어"} - + {grade >= 2 ? ( + {classNo <= 2 ? "소프트웨어" : "임베디드소프트웨어"} ) : ( "통합" )} 개발과 - {student.grade}학년 - {student.classNo}반 - {student.studentNo}번 + {grade}학년 + {classNo}반 + {studentNo}번 {student.name} 마이스터역량인증제 점수 ㆍ {score}점 @@ -60,6 +70,7 @@ const Container = styled.div` display: flex; align-items: center; gap: 18px; + cursor: pointer; `; const RankText = styled.div`