마이스터 역량 인증제 페이지 완성

src/apis/httpClient/httpClient.ts

@@ -33,6 +33,13 @@ export class HttpClient {
     return this.api.get("", { ...HttpClient.clientConfig, ...requestConfig });
   }
 
+  getDetail(data: unknown, requestConfig?: AxiosRequestConfig) {
+    return this.api.post("/detail", data, {
+      ...HttpClient.clientConfig,
+      ...requestConfig,
+    });
+  }
+
   getById(requestConfig?: AxiosRequestConfig) {
     return this.api.get("/:id", {
       ...HttpClient.clientConfig,
@@ -171,4 +178,6 @@ export default {
   meal: new HttpClient("api/meal", axiosConfig),
   calender: new HttpClient("api/calender", axiosConfig),
   reserve: new HttpClient("api/ber", axiosConfig),
+  meister: new HttpClient("api/meister", axiosConfig),
+  ranking: new HttpClient("api/meister/ranking", axiosConfig),
 };

src/assets/data/emptyMeister.ts

@@ -0,0 +1,38 @@
+import IMeister from "@/interfaces/meister.interface";
+
+const emptyMeister: IMeister = {
+  meister: {
+    score: 0,
+    positivePoint: 0,
+    negativePoint: 0,
+    lastUpdate: "2000-03-01T00:00:00.000000",
+    loginError: false,
+    basicJobSkills: 0,
+    professionalTech: 0,
+    workEthic: 0,
+    humanities: 0,
+    foreignScore: 0,
+  },
+  avg: {
+    score: 0,
+    basicJobSkills: 0,
+    professionalTech: 0,
+    workEthic: 0,
+    humanities: 0,
+    foreignScore: 0,
+    positivePoint: 0,
+    negativePoint: 0,
+  },
+  max: {
+    score: 0,
+    basicJobSkills: 0,
+    professionalTech: 0,
+    workEthic: 0,
+    humanities: 0,
+    foreignScore: 0,
+    positivePoint: 0,
+    negativePoint: 0,
+  },
+};
+
+export default emptyMeister;

src/constants/key.constant.ts

@@ -9,6 +9,9 @@ const KEY = {
   MEAL: "useMeal",
   CALENDER: "useCalender",
   RESERVE: "useReserve",
+  MEISTER: "useMeister",
+  MEISTER_DETAIL: "useMeisterDetail",
+  RANKING: "useRanking",
 } as const;
 
 export default KEY;

src/helpers/getMeisterChapter.helper.ts

@@ -0,0 +1,16 @@
+const getMeisterChapter = (chapter: string) => {
+  switch (chapter) {
+    case "professionalTech":
+      return "전문 기술 역량";
+    case "workEthic":
+      return "인성 직업 의식";
+    case "humanities":
+      return "인문학적 소양";
+    case "foreignScore":
+      return "외국어 능력";
+    default:
+      return chapter;
+  }
+};
+
+export default getMeisterChapter;

src/helpers/index.ts

@@ -12,3 +12,4 @@ export { default as getMealName } from "./getMealName.helper";
 export { default as getTimetableType } from "./getTimetableType.helper";
 export { default as getDay } from "./getDay.helper";
 export { default as getClassName } from "./getClassName.helper";
+export { default as getMeisterChapter } from "./getMeisterChapter.helper";

src/hooks/useDidMountEffect.ts

@@ -0,0 +1,13 @@
+import { useRef, useEffect } from "react";
+
+export const useDidMountEffect = (
+  func: () => void,
+  deps: React.DependencyList,
+) => {
+  const didMount = useRef(false);
+
+  useEffect(() => {
+    if (didMount.current) func();
+    else didMount.current = true;
+  }, deps);
+};

src/hooks/useMeisterHTML.ts

@@ -0,0 +1,124 @@
+import { color } from "@/styles";
+
+// 심신미약자나 노약자, 임산부, 유아는 코드를 읽는 것을 삼가하기바람
+
+export const useMeisterHTML = () => {
+  const getBasicJobSkills = (html: string) => {
+    return [
+      {
+        title: "의사소통 국어",
+        value: +html.substring(
+          html.lastIndexOf("의사소통(국어) : ") + 11,
+          html.lastIndexOf("의사소통(국어) : ") + 12,
+        ),
+        status: color.primary_blue,
+      },
+      {
+        title: "의사소통 영어",
+        value: +html.substring(
+          html.lastIndexOf("의사소통(영어) : ") + 11,
+          html.lastIndexOf("의사소통(영어) : ") + 12,
+        ),
+        status: color.primary_mint,
+      },
+      {
+        title: "수리 활용",
+        value: +html.substring(
+          html.lastIndexOf("수리활용 : ") + 7,
+          html.lastIndexOf("수리활용 : ") + 8,
+        ),
+        status: color.primary_red,
+      },
+      {
+        title: "문제 해결",
+        value: +html.substring(
+          html.lastIndexOf("문제해결 : ") + 7,
+          html.lastIndexOf("문제해결 : ") + 8,
+        ),
+        status: color.primary_yellow,
+      },
+    ];
+  };
+
+  const scoreParser = (html: string) => {
+    const parsedHTML = html;
+    return (
+      parsedHTML
+        .replaceAll(
+          '<div>[ <span style="font-weight:bold; color:blue;">',
+          (match) => {
+            return `<section class="list-item">${match}`;
+          },
+        )
+        .replace(/\[ (\d{4}-\d{2}-\d{2}) \]/g, (match) => {
+          return `<br>
+          <hgroup class="section-date">
+          ${match
+            .replaceAll("[ ", "")
+            .replaceAll(" ]", "")
+            .replace("-", "년 ")
+            .replace("-", "월 ")}일</hgroup></section>`;
+        })
+        .replaceAll("- 시도와 전국은 중복부여 안함", "")
+        .replace(/[①-⑮].*?: -<br>/gi, "")
+        .replace(/[①-⑮].*?: -/gi, "")
+        .replace(/\([^)]*\)/gi, "")
+        .replace(/총점\s+([\d.]+)\s*점/gi, (match) => {
+          return `<span class="total-score-item">${match}</span>`;
+        })
+        .replace(/ \d+ 점/gi, (match) => {
+          return `<span class="item-score" >${match.replaceAll(
+            " ",
+            "",
+          )}</span>`;
+        })
+        .replaceAll(
+          '[ <span style="font-weight:bold; color:red;">종합</span> ]',
+          "",
+        )
+        .replaceAll(",", "")
+        .replaceAll("font-weight:bold; color:blue;", "")
+        .replaceAll(
+          '⑥ 헌혈 : <span style="font-weight:bold;">0 점</span> ( 총 :  시간 )<br>',
+          "",
+        )
+        .replaceAll(
+          '⑧ 스포츠관련 행사 : <span style="font-weight:bold;"> 점</span> ( 총 : 0 건 )<br>',
+          "",
+        )
+        .replaceAll(
+          '⑬ 직업관련 교육 : <span style="font-weight:bold;"> 점</span> ( 총 : 0 건 )<br>',
+          "",
+        )
+        .replaceAll(
+          '⑪ 체육/음악 관련 대회 : <span style="font-weight:bold;">0 점</span> - 시도와 전국은 중복부여 안함 (최고 득점 1개만 적용)<br>',
+          "",
+        )
+        .replaceAll("font-weight:bold;", "")
+        .replaceAll(
+          '⑪ 체육/음악 관련 대회 : <span style="font-weight:bold;"> 점</span> - 시도와 전국은 중복부여 안함 (최고 득점 1개만 적용)<br>',
+          "",
+        )
+        .replace(/[①-⑮]/gi, "")
+        // .replaceAll(":", "·")
+        .replaceAll(
+          '[ <span style="font-weight:bold; color:red;">종합</span> ]',
+          "",
+        )
+        .replaceAll(":  점", ": 0점")
+        .replaceAll(": 점", ": 0점")
+        .replaceAll("\n", "")
+        .replaceAll("\t", "")
+        .replaceAll("  ", "")
+    );
+  };
+
+  const pointParser = (html: string) => {
+    return html.replaceAll(
+      'style="border:1px solid #ccc;margin-bottom:10px;border-radius:3px;padding:10px;box-shadow: 2px 2px 1px 2px #ddd;"',
+      "",
+    );
+  };
+
+  return { getBasicJobSkills, scoreParser, pointParser };
+};

src/interfaces/index.ts

@@ -21,3 +21,4 @@ export type { default as IPlan } from "./plan.interface";
 export type { default as IReserve } from "./reserve.interface";
 export type { default as IReserveList } from "./reserveList.interface";
 export type { default as ICreateReserve } from "./createReserve.interface";
+export type { default as IMeister } from "./meister.interface";

src/interfaces/meister.interface.ts

@@ -0,0 +1,34 @@
+export default interface IMeister {
+  meister: {
+    score: number;
+    positivePoint: number;
+    negativePoint: number;
+    lastUpdate: string;
+    loginError: boolean;
+    basicJobSkills: number;
+    professionalTech: number;
+    workEthic: number;
+    humanities: number;
+    foreignScore: number;
+  };
+  avg: {
+    score: number;
+    basicJobSkills: number;
+    professionalTech: number;
+    workEthic: number;
+    humanities: number;
+    foreignScore: number;
+    positivePoint: number;
+    negativePoint: number;
+  };
+  max: {
+    score: number;
+    basicJobSkills: number;
+    professionalTech: number;
+    workEthic: number;
+    humanities: number;
+    foreignScore: number;
+    positivePoint: number;
+    negativePoint: number;
+  };
+}