stlye: 전체적으로 테마 색상 변수 적용

src/commons/components/atoms/Icons/ArrowUp/ArrowUp.tsx

@@ -1,11 +1,12 @@
+import { vars } from '@/commons/styles/globalStyles.css';
 import { SVGProps } from 'react';
 
 export default function ArrowUp({ ...props }: SVGProps<SVGSVGElement>) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" {...props}>
       <path
         d="M26.7081 21.7083C26.6152 21.8013 26.5049 21.875 26.3835 21.9253C26.2621 21.9757 26.132 22.0016 26.0006 22.0016C25.8691 22.0016 25.739 21.9757 25.6176 21.9253C25.4962 21.875 25.3859 21.8013 25.2931 21.7083L16.0006 12.4145L6.70806 21.7083C6.52042 21.8959 6.26592 22.0013 6.00056 22.0013C5.73519 22.0013 5.4807 21.8959 5.29306 21.7083C5.10542 21.5206 5 21.2662 5 21.0008C5 20.7354 5.10542 20.4809 5.29306 20.2933L15.2931 10.2933C15.3859 10.2003 15.4962 10.1266 15.6176 10.0762C15.739 10.0259 15.8691 10 16.0006 10C16.132 10 16.2621 10.0259 16.3835 10.0762C16.5049 10.1266 16.6152 10.2003 16.7081 10.2933L26.7081 20.2933C26.801 20.3862 26.8748 20.4964 26.9251 20.6178C26.9754 20.7392 27.0013 20.8694 27.0013 21.0008C27.0013 21.1322 26.9754 21.2623 26.9251 21.3837C26.8748 21.5051 26.801 21.6154 26.7081 21.7083Z"
-        fill="white"
+        fill={vars.themeColor.color.mainFontColor}
       />
     </svg>
   );

src/commons/components/atoms/Icons/Tag/Tag.tsx

@@ -1,11 +1,12 @@
+import { vars } from '@/commons/styles/globalStyles.css';
 import { SVGProps } from 'react';
 
 export default function Tag({ ...props }: SVGProps<SVGSVGElement>) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" {...props}>
       <path
         d="M30.8325 15.445L25.125 6.89125C24.9433 6.61728 24.6966 6.39252 24.407 6.23702C24.1174 6.08151 23.7937 6.00008 23.465 6H5C4.46957 6 3.96086 6.21071 3.58579 6.58579C3.21071 6.96086 3 7.46957 3 8V24C3 24.5304 3.21071 25.0391 3.58579 25.4142C3.96086 25.7893 4.46957 26 5 26H23.465C23.7935 25.9994 24.1168 25.9179 24.4063 25.7626C24.6959 25.6074 24.9427 25.3833 25.125 25.11L30.8288 16.555C30.9389 16.391 30.9981 16.1981 30.9988 16.0006C30.9994 15.803 30.9416 15.6097 30.8325 15.445Z"
-        fill="#343330"
+        fill={vars.themeColor.color.tagIconBackground}
       />
     </svg>
   );

src/commons/components/atoms/boxes/tagBox/tagBox.css.ts

@@ -1,9 +1,9 @@
+import { vars } from '@/commons/styles/globalStyles.css';
 import { style } from '@vanilla-extract/css';
 
 export const tagBox = style({
   padding: '8px 10px',
   borderRadius: '50px',
-  backgroundColor: '#6A6868',
-
+  backgroundColor: `${vars.themeColor.color.mainBackground}`,
   fontSize: '12px',
 });

src/commons/components/features/Common/RemoteControl/RemoteControl.css.ts

@@ -1,3 +1,4 @@
+import { vars } from '@/commons/styles/globalStyles.css';
 import { style } from '@vanilla-extract/css';
 
 export const wrapper = style({
@@ -24,5 +25,5 @@ export const iconWrapper = style({
   border: 'none',
   cursor: 'pointer',
 
-  backgroundColor: '#6A6868',
+  backgroundColor: `${vars.themeColor.color.secondary}`,
 });

src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts

@@ -1,3 +1,4 @@
+import { vars } from '@/commons/styles/globalStyles.css';
 import { style } from '@vanilla-extract/css';
 
 export const OutExpandedWrapper = style({
@@ -34,7 +35,7 @@ export const expandedWrapper = style({
   width: '37rem',
   height: 'fit-content',
 
-  backgroundColor: '#fff',
+  backgroundColor: `${vars.themeColor.color.searchBarBackground}`,
 
   borderRadius: '25px',
   padding: '20px',
@@ -49,7 +50,7 @@ export const searchInput = style({
   marginBottom: '14px',
 
   backgroundColor: 'transparent',
-  color: '#000',
+  color: '#000000',
 
   fontSize: '14px',
 

src/commons/components/features/Inputs/Search/Search.css.ts

@@ -1,11 +1,12 @@
+import { vars } from '@/commons/styles/globalStyles.css';
 import { style } from '@vanilla-extract/css';
 
 export const wrapper = style({
   position: 'relative',
 
   display: 'flex',
   flexDirection: 'row',
-  backgroundColor: '#fff',
+  backgroundColor: `${vars.themeColor.color.searchBarBackground}`,
 
   width: '27rem',
   height: '3rem',

src/commons/components/features/Items/Card/Card.css.ts

@@ -1,3 +1,4 @@
+import { vars } from '@/commons/styles/globalStyles.css';
 import { style } from '@vanilla-extract/css';
 
 export const wrapper = style({
@@ -18,7 +19,7 @@ export const cardWrapper = style({
   height: '320px',
   borderRadius: '12px',
 
-  backgroundColor: '#6A6868',
+  backgroundColor: `${vars.themeColor.color.secondary}`,
 
   transition: 'transform 0.5s ease-in-out',
   cursor: 'pointer',

src/commons/components/widgets/Header/header.css.ts

@@ -1,3 +1,4 @@
+import { vars } from '@/commons/styles/globalStyles.css';
 import { style } from '@vanilla-extract/css';
 
 export const wrapper = style({
@@ -13,6 +14,8 @@ export const wrapper = style({
 
 export const title = style({
   fontSize: '35px',
+
+  color: `${vars.themeColor.color.mainFontColor}`,
 });
 
 export const left = style({

src/commons/styles/globalStyles.css.ts

@@ -22,6 +22,10 @@ const themeColor = createThemeContract({
     mainBackground: null,
     contentBackground: null,
     mainFontColor: null,
+    secondaryFontColor: null,
+    searchBarBackground: null,
+    cardBackground: null,
+    tagIconBackground: null,
   },
 });
 
@@ -32,6 +36,10 @@ export const lightTheme = createTheme(themeColor, {
     mainBackground: '#ffffff',
     contentBackground: '#ffffff',
     mainFontColor: '#000000',
+    secondaryFontColor: '#ffffff',
+    searchBarBackground: '#E9E9E9',
+    cardBackground: '#E9E9E9',
+    tagIconBackground: '#ffffff',
   },
 });
 
@@ -42,6 +50,10 @@ export const darkTheme = createTheme(themeColor, {
     mainBackground: '#000000',
     contentBackground: '#2c2c2c',
     mainFontColor: '#ffffff',
+    secondaryFontColor: '#000000',
+    searchBarBackground: '#ffffff',
+    cardBackground: '#6A6868',
+    tagIconBackground: '#343330',
   },
 });