Feature/fix chakra progress theme error (#115)

components/atoms/ProgressBar.tsx

@@ -0,0 +1,15 @@
+import { Progress } from "@chakra-ui/react";
+
+interface IProgressBar {
+  value: number;
+  colorScheme?: "mintTheme";
+  hasStripe?: boolean;
+}
+
+export default function ProgressBar({
+  value,
+  colorScheme = "mintTheme",
+  hasStripe = false,
+}: IProgressBar) {
+  return <Progress value={value} colorScheme={colorScheme} hasStripe={hasStripe} />;
+}

components/molecules/ProgressStatus.tsx

@@ -1,5 +1,5 @@
-import { Progress } from "@chakra-ui/react";
 import styled from "styled-components";
+import ProgressBar from "../atoms/ProgressBar";
 
 interface IProgressStatus {
   value: number;
@@ -8,7 +8,7 @@ interface IProgressStatus {
 function ProgressStatus({ value }: IProgressStatus) {
   return (
     <Layout>
-      <Progress value={value} size="sm" />
+      <ProgressBar value={value} />
     </Layout>
   );
 }

pageTemplates/point/pointScore/PointScoreBar.tsx

@@ -1,9 +1,10 @@
-import { Badge, Progress } from "@chakra-ui/react";
+import { Badge } from "@chakra-ui/react";
 import { faQuestionCircle } from "@fortawesome/pro-light-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
+import ProgressBar from "../../../components/atoms/ProgressBar";
 
 import {
   BADGE_COLOR_MAPPINGS,
@@ -80,11 +81,10 @@ function PointScoreBar({ myScore, hasQuestion = true }: IPointScoreBar) {
             </div>
           )}
         </Grade>
-        <Progress
+        <ProgressBar
           value={(1 - (nextBadgePoint - myScore) / badgeGap) * 100}
-          height="12px"
           colorScheme="mintTheme"
-          hasStripe
+          hasStripe={true}
         />
       </Layout>
 

pages/test.tsx

@@ -11,7 +11,7 @@ import { useAdminStudyRecordQuery } from "../hooks/admin/quries";
 import { useImageUploadMutation } from "../hooks/image/mutations";
 import { studyDateStatusState } from "../recoils/studyRecoils";
 function Test() {
-  const { data } = useAdminStudyRecordQuery(dayjs("2024-04-01"), dayjs("2024-04-07"), null, "인천");
+  const { data } = useAdminStudyRecordQuery(dayjs("2024-04-16"), dayjs("2024-04-30"), null, "인천");
   console.log(data);
 
   const a = useRecoilValue(studyDateStatusState);

theme.ts

@@ -108,16 +108,6 @@ const theme = extendTheme({
         },
       },
     },
-    Progress: {
-      baseStyle: {
-        track: {
-          bg: "var(--font-h7)",
-        },
-        filledTrack: {
-          bg: "var(--color-mint)",
-        },
-      },
-    },
   },
 });