From a16b064fa86330580c89654ecbfeaa342387452c Mon Sep 17 00:00:00 2001
From: leeJooHaem <joohaem@vaultmicro.com>
Date: Fri, 24 Feb 2023 09:41:39 +0900
Subject: [PATCH] [ refactor ] colors typing for using theme color

---
 .../FilterModal/IntimacySlider/style.ts         | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/@components/CardCollectionPage/FilterModal/IntimacySlider/style.ts b/src/@components/CardCollectionPage/FilterModal/IntimacySlider/style.ts
index c114a39a..668c6ab0 100644
--- a/src/@components/CardCollectionPage/FilterModal/IntimacySlider/style.ts
+++ b/src/@components/CardCollectionPage/FilterModal/IntimacySlider/style.ts
@@ -1,10 +1,15 @@
 import { getTrackBackground } from "react-range";
-import styled, { css } from "styled-components";
+import styled, { css, DefaultTheme } from "styled-components";
 
 interface RangeTrackProps {
   min: number;
   max: number;
   price: number[];
+  theme: DefaultTheme & {
+    newColors: {
+      [key: string]: string;
+    };
+  };
 }
 
 interface RangeThumbAriaProps {
@@ -57,12 +62,12 @@ const RangeTrack = styled.div`
 
   height: 1.1rem;
 
-  background: ${(props: RangeTrackProps) =>
+  background: ${({ theme, price, min, max }: RangeTrackProps) =>
     getTrackBackground({
-      values: props.price,
-      colors: ["#19BE7E", "#E0E0E0"], // [newColors.green, newColors.gray300]
-      min: props.min,
-      max: props.max,
+      values: price,
+      colors: [theme.newColors.green, theme.newColors.gray300], // [newColors.green, newColors.gray300]
+      min: min,
+      max: max,
     })};
 `;