Merge pull request #154 from Team-INSERT/fix/meister

마이스터 역량 인증제 페이지 오류 픽스 & 컴포넌트클릭하면 조회되게

src/templates/meister/context/buttonSwitch.context.ts

@@ -0,0 +1,5 @@
+import { atom } from "jotai";
+
+const buttonSwitchContext = atom(false);
+
+export default buttonSwitchContext;

src/templates/meister/context/index.ts

@@ -0,0 +1,2 @@
+export { default as studentNumberContext } from "./studentNumber.context";
+export { default as buttonSwitchContext } from "./buttonSwitch.context";

src/templates/meister/context/studentNumber.context.ts

@@ -0,0 +1,5 @@
+import { atom } from "jotai";
+
+const studentNumberContext = atom("");
+
+export default studentNumberContext;

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,
   };

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 (
     <Container>

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 (
-    <Container>
+    <Container onClick={handleContainerButtonClick}>
       <RankText>{index}</RankText>
       <Column>
         <Row alignItems="center" gap="5px">
           <Department>
-            {student.grade >= 2 ? (
-              <span>
-                {student.classNo <= 2 ? "소프트웨어" : "임베디드소프트웨어"}
-              </span>
+            {grade >= 2 ? (
+              <span>{classNo <= 2 ? "소프트웨어" : "임베디드소프트웨어"}</span>
             ) : (
               "통합"
             )}
             개발과
           </Department>
-          <Grade>{student.grade}학년</Grade>
-          <ClassNo>{student.classNo}반</ClassNo>
-          <StudentNo>{student.studentNo}번</StudentNo>
+          <Grade>{grade}학년</Grade>
+          <ClassNo>{classNo}반</ClassNo>
+          <StudentNo>{studentNo}번</StudentNo>
           <Name>{student.name}</Name>
         </Row>
         <MeisterPoint>마이스터역량인증제 점수 ㆍ {score}점</MeisterPoint>
@@ -60,6 +70,7 @@ const Container = styled.div`
   display: flex;
   align-items: center;
   gap: 18px;
+  cursor: pointer;
 `;
 
 const RankText = styled.div`

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 = () => {
     <Layout>
       <StyledTitle>조회 형식</StyledTitle>
       <CategoryBox>
-        {["분석", "랭킹"].map((category) => (
-          <Category
-            id={category}
-            name="meister"
-            label={category}
-            selected={viewType === category}
-            onChange={() => setViewType(category)}
-          />
-        ))}
+        <StyledCategory
+          selected={viewType === "분석"}
+          onClick={() => setViewType("분석")}
+        >
+          분석
+        </StyledCategory>
+        <StyledCategory
+          selected={viewType === "랭킹"}
+          onClick={() => setViewType("랭킹")}
+        >
+          랭킹
+        </StyledCategory>
       </CategoryBox>
       {viewType === "분석" && (
         <InputWrap>
@@ -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;