마이스터 역량 인증제 페이지 퍼블리싱

next.config.js

@@ -1,12 +1,12 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  // images: {
-  //   domains: [
-  //     process.env.NEXT_PUBLIC_DOMAIN,
-  //     process.env.NEXT_PUBLIC_TEST_DOMAIN,
-  //     process.env.NEXT_PUBLIC_AUTH_DOMAIN,
-  //   ],
-  // },
+  images: {
+    domains: [
+      process.env.NEXT_PUBLIC_DOMAIN,
+      process.env.NEXT_PUBLIC_TEST_DOMAIN,
+      process.env.NEXT_PUBLIC_AUTH_DOMAIN,
+    ],
+  },
 };
 
 module.exports = nextConfig;

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@playwright/test": "^1.29.1",
     "@tinymce/tinymce-react": "^4.3.0",
+    "@types/d3": "^7.4.0",
     "@types/node": "18.16.19",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
@@ -20,6 +21,7 @@
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "axios": "^1.4.0",
     "babel-plugin-styled-components": "^2.1.4",
+    "d3": "^7.8.5",
     "dayjs": "^1.11.9",
     "dotenv": "^16.3.1",
     "eslint": "^8.26.0",
@@ -30,10 +32,14 @@
     "next": "13.4.4",
     "prettier": "^2.8.8",
     "react": "18.2.0",
+    "react-circular-progressbar": "^2.1.0",
     "react-cookie": "^4.1.1",
+    "react-d3-radar": "^1.0.0-rc6",
     "react-dom": "18.2.0",
     "react-query": "^3.39.3",
     "react-slick": "^0.29.0",
+    "react-spinner": "^0.2.7",
+    "react-spinner-overlay": "^0.1.33",
     "react-toastify": "^9.1.3",
     "recoil": "^0.7.7",
     "slick-carousel": "^1.8.1",

radar.d.ts

@@ -0,0 +1 @@
+declare module "react-d3-radar";

src/app/bamboo/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import BambooPage from "@/page/bamboo";
+
+const Bamboo = () => {
+  return <BambooPage />;
+};
+
+export default Bamboo;

src/app/meister/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import MeisterPage from "@/page/meister";
+
+const Meister = () => {
+  return <MeisterPage />;
+};
+
+export default Meister;

src/assets/icons/Curve.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+const Curve = () => {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 45 45"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="4.03516"
+        y="2.76147"
+        width="36.459"
+        height="37.7018"
+        fill="white"
+      />
+      <mask
+        id="mask0_1173_192"
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="45"
+        height="45"
+      >
+        <path
+          d="M42.0527 2.76147H2.05273V42.7615H42.0527V2.76147Z"
+          fill="white"
+          stroke="white"
+          strokeWidth="4"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M36.0527 8.76147C30.0527 8.76147 25.0527 12.7615 22.0527 22.7615C19.0527 32.7615 14.0527 36.7615 8.05273 36.7615"
+          stroke="black"
+          strokeWidth="4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </mask>
+      <g mask="url(#mask0_1173_192)">
+        <path
+          d="M-1.94727 -1.23853H46.0527V46.7615H-1.94727V-1.23853Z"
+          fill="#73AEE3"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default Curve;

src/assets/icons/DistributionIcon.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+const DistributionIcon = () => {
+  return (
+    <svg
+      width="27"
+      height="27"
+      viewBox="0 0 27 27"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M5.67309 15.2707L7.24222 7.09598L15.6228 7.09598L22.6184 13.0803L17.8311 19.1659L10.5349 22.0678L5.67309 15.2707Z"
+        fill="#F8EEE6"
+        fillOpacity="0.5"
+        stroke="#F3DAEC"
+        strokeWidth="2"
+      />
+      <path
+        d="M4.94863 12.9523L10.1108 5.49777L20.522 9.26081L20.7492 12.7586L18.2199 20.6836L8.78822 20.2192L4.94863 12.9523Z"
+        fill="#C8D3F8"
+        fillOpacity="0.5"
+        stroke="#C0CCED"
+        strokeWidth="2"
+      />
+      <path
+        d="M9.50133 9.24329L16.8744 5.45424L21.79 16.1046L17.8985 19.7912L12.5736 23.3755L5.40478 18.3576L9.50133 9.24329Z"
+        fill="#FEBC56"
+        fillOpacity="0.3"
+      />
+      <path
+        d="M6.6561 18.0128L10.2699 9.97265L16.4036 6.8205L20.5813 15.8721L17.2711 19.0081L12.5846 22.1626L6.6561 18.0128Z"
+        stroke="#FEBC56"
+        strokeOpacity="0.4"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+export default DistributionIcon;

src/assets/icons/GraphIcon.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+const GraphIcon = () => {
+  return (
+    <svg
+      width="16"
+      height="17"
+      viewBox="0 0 16 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        y="3.60583"
+        width="4.49887"
+        height="11.6513"
+        rx="2.24943"
+        fill="#FEBC56"
+      />
+      <rect
+        x="5.76953"
+        y="8.15967"
+        width="4.49887"
+        height="7.09744"
+        rx="2.24943"
+        fill="#73AEE3"
+      />
+      <rect
+        x="11.502"
+        y="0.241699"
+        width="4.49887"
+        height="15.0154"
+        rx="2.24943"
+        fill="#E54F5A"
+      />
+    </svg>
+  );
+};
+
+export default GraphIcon;

src/assets/icons/HistorySeparator.tsx

@@ -0,0 +1,26 @@
+import { color } from "@/styles";
+import React from "react";
+
+const HistorySeparator = () => {
+  return (
+    <svg
+      width="20"
+      height="14"
+      viewBox="0 0 15 8"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0 4C0 3.58579 0.335786 3.25 0.75 3.25H4.03125V4.75H0.75C0.335787 4.75 0 4.41421 0 4V4Z"
+        fill={color.content}
+      />
+      <path
+        d="M10.002 3.25H13.2832C13.6974 3.25 14.0332 3.58579 14.0332 4V4C14.0332 4.41421 13.6974 4.75 13.2832 4.75H10.002V3.25Z"
+        fill={color.content}
+      />
+      <circle cx="7" cy="4" r="3" stroke={color.content} strokeWidth={1.5} />
+    </svg>
+  );
+};
+
+export default HistorySeparator;

src/assets/icons/ProgressIcon.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const ProgressIcon = () => {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 23 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M22.4944 7.20692V19.2039C22.4866 19.3492 22.4446 19.4906 22.3718 19.6166C22.299 19.7426 22.1974 19.8496 22.0754 19.9289L21.6824 20.1639C19.7214 21.2989 17.9954 22.2979 16.2514 23.3039V10.3299L5.01844 3.83592C6.96244 2.71992 8.89944 1.59292 10.8454 0.481924C10.9752 0.416283 11.1185 0.38208 11.2639 0.38208C11.4093 0.38208 11.5527 0.416283 11.6824 0.481924L22.4924 6.72492V7.20692H22.4944ZM13.7534 11.7689C11.1895 10.2864 8.62479 8.80507 6.05944 7.32492C5.9294 7.26027 5.78616 7.22662 5.64094 7.22662C5.49572 7.22662 5.35247 7.26027 5.22244 7.32492C3.48944 8.32592 1.75544 9.32492 0.0234375 10.3289L8.13644 15.0129V24.3819C9.86844 23.3829 11.5964 22.3759 13.3334 21.3869C13.4551 21.3075 13.5565 21.2006 13.6292 21.0749C13.702 20.9491 13.7442 20.808 13.7524 20.6629L13.7534 11.7689ZM0.0244375 19.6989L5.63744 22.9399V16.4519L0.0244375 19.6989Z"
+        fill="#E54F5A"
+      />
+    </svg>
+  );
+};
+
+export default ProgressIcon;

src/assets/icons/index.ts

@@ -16,3 +16,5 @@ export { default as HoldingBackTears } from "./emojis/HoldingBackTears";
 export { default as Kissing } from "./emojis/Kissing";
 export { default as Laughing } from "./emojis/Laughing";
 export { default as Relaxed } from "./emojis/Relaxed";
+export { default as Curve } from "./Curve";
+export { default as HistorySeparator } from "./HistorySeparator";

src/components/atoms/ImageWithFallback.tsx

@@ -27,26 +27,26 @@ const ImageWithFallback = ({
       {...props}
       src={imgSrc}
       alt={alt}
-      isShouldHide={isShouldHide}
+      isshouldhide={isShouldHide}
       onError={() => setImgSrc(fallbackSrc)}
       sizes={size}
-      rounded={rounded}
+      isrounded={rounded}
     />
   );
 };
 
 const StyledImage = styled(Image)<{
-  isShouldHide?: boolean;
-  rounded?: boolean;
+  isshouldhide?: boolean;
+  isrounded?: boolean;
 }>`
   height: auto;
-  ${({ isShouldHide }) =>
-    isShouldHide &&
+  ${({ isshouldhide }) =>
+    isshouldhide &&
     css`
       display: none;
     `}
-  ${({ rounded }) =>
-    rounded &&
+  ${({ isrounded }) =>
+    isrounded &&
     css`
       border-radius: 999px;
     `}

src/helpers/getStatusColor.helper.ts

@@ -0,0 +1,9 @@
+import { color } from "@/styles";
+
+const getStatusColor = (index: number) => {
+  if (!index) return color.primary_yellow;
+  if (index === 1) return color.primary_blue;
+  return color.primary_red;
+};
+
+export default getStatusColor;

src/helpers/index.ts

@@ -1,2 +1,3 @@
 export { default as getProfileUrl } from "./getProfileUrl.helper";
 export { default as getUserRole } from "./getUserRole.helper";
+export { default as getStatusColor } from "./getStatusColor.helper";

src/hooks/useDate.ts

@@ -1,6 +1,7 @@
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import "dayjs/locale/ko";
+import useUser from "./useUser";
 
 dayjs.extend(customParseFormat);
 
@@ -25,6 +26,14 @@ const weekdaysENG = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
 const weekdaysKOR = ["일", "월", "화", "수", "목", "금", "토"];
 
 const useDate = () => {
+  const { user } = useUser();
+
+  const openingYear = user.student.enrolledAt;
+
+  const currentYearsWithSchool = Array.from({ length: 3 }).map(
+    (_, i) => openingYear + i,
+  );
+
   const getHMSDate = () => {
     const date = dayjs();
     const HMSDate = dayjs(date).locale("ko").format("A h:mm:ss");
@@ -81,6 +90,7 @@ const useDate = () => {
   return {
     weekdaysENG,
     weekdaysKOR,
+    currentYearsWithSchool,
     getHMSDate,
     getDate,
     getNowWeekDay,

src/page/bamboo/index.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const BambooPage = () => {
+  return <div />;
+};
+
+export default BambooPage;