From 783fa8350a93cd572fa6a317a6b5f50ab4b538b7 Mon Sep 17 00:00:00 2001
From: seungju <j44s11@naver.com>
Date: Fri, 3 May 2024 10:03:33 +0900
Subject: [PATCH] fix-chakra-progress-theme-error

---
 components/atoms/ProgressBar.tsx                 | 15 +++++++++++++++
 components/molecules/ProgressStatus.tsx          |  4 ++--
 pageTemplates/point/pointScore/PointScoreBar.tsx |  8 ++++----
 pages/test.tsx                                   |  2 +-
 theme.ts                                         | 10 ----------
 5 files changed, 22 insertions(+), 17 deletions(-)
 create mode 100644 components/atoms/ProgressBar.tsx

diff --git a/components/atoms/ProgressBar.tsx b/components/atoms/ProgressBar.tsx
new file mode 100644
index 000000000..38ee62990
--- /dev/null
+++ b/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} />;
+}
diff --git a/components/molecules/ProgressStatus.tsx b/components/molecules/ProgressStatus.tsx
index ec0db4284..0b53950a2 100644
--- a/components/molecules/ProgressStatus.tsx
+++ b/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>
   );
 }
diff --git a/pageTemplates/point/pointScore/PointScoreBar.tsx b/pageTemplates/point/pointScore/PointScoreBar.tsx
index ef372763d..b72d81cee 100644
--- a/pageTemplates/point/pointScore/PointScoreBar.tsx
+++ b/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>
 
diff --git a/pages/test.tsx b/pages/test.tsx
index 1461b0f0a..1d31167b3 100644
--- a/pages/test.tsx
+++ b/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);
diff --git a/theme.ts b/theme.ts
index 5d1864d5e..6a0652891 100644
--- a/theme.ts
+++ b/theme.ts
@@ -108,16 +108,6 @@ const theme = extendTheme({
         },
       },
     },
-    Progress: {
-      baseStyle: {
-        track: {
-          bg: "var(--font-h7)",
-        },
-        filledTrack: {
-          bg: "var(--color-mint)",
-        },
-      },
-    },
   },
 });