From 6964fe1ad8f49091b1ca40a41bf5a7c93c05d33c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EC=9E=AC=ED=9D=AC?= <pizzachicken@kakao.com>
Date: Tue, 28 Nov 2023 15:32:43 +0900
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=EC=8A=A4=ED=81=AC=EB=A1=A4?=
 =?UTF-8?q?=EB=B0=94=20=EB=B0=8F=20=EB=8B=A4=ED=81=AC=EB=AA=A8=EB=93=9C=20?=
 =?UTF-8?q?=EB=B9=84=ED=99=9C=EC=84=B1=ED=99=94=20(#131)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ui/select/Select.tsx   | 10 +++++-----
 src/contexts/ThemeProviderContext.tsx |  6 +++++-
 src/styles/globals.css                |  7 +++++++
 tailwind.config.js                    |  4 ++--
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/ui/select/Select.tsx b/src/components/ui/select/Select.tsx
index 36a97c97..208b42f6 100644
--- a/src/components/ui/select/Select.tsx
+++ b/src/components/ui/select/Select.tsx
@@ -16,14 +16,14 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-background-secondary-color',
+      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-text-color focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
       className,
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="w-4 h-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
@@ -37,7 +37,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-background-color text-text-color shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className,
@@ -66,14 +66,14 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      ` relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-primary-color/20 focus:text-black data-[disabled]:pointer-events-none data-[disabled]:opacity-50 rounded-md`,
+      ` relative flex w-full cursor-default select-none items-center py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-primary-color/20 focus:text-text-color data-[disabled]:pointer-events-none data-[disabled]:opacity-50 rounded-md`,
       className,
     )}
     {...props}
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="w-4 h-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
 
diff --git a/src/contexts/ThemeProviderContext.tsx b/src/contexts/ThemeProviderContext.tsx
index fe950067..f6cefd63 100644
--- a/src/contexts/ThemeProviderContext.tsx
+++ b/src/contexts/ThemeProviderContext.tsx
@@ -16,7 +16,11 @@ const ThemeProviderContext = ({ children }: ThemeProviderContextProps) => {
 
   if (!mounted) return null
 
-  return <ThemeProvider attribute="data-theme">{children}</ThemeProvider>
+  return (
+    <ThemeProvider attribute="light" enableSystem={false}>
+      {children}
+    </ThemeProvider>
+  )
 }
 
 export default ThemeProviderContext
diff --git a/src/styles/globals.css b/src/styles/globals.css
index df9986a1..c9618a5b 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -35,5 +35,12 @@
   body {
     @apply h-full;
     @apply font-pretendard;
+
+    &::-webkit-scrollbar {
+      /* 크롬, 사파리, 오페라 */
+      display: none;
+    }
+    -ms-overflow-style: none; /* IE and 엣지 */
+    scrollbar-width: none; /* 파이어폭스 */
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 6bafd840..62cc0421 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,5 @@
 const { createThemes } = require('tw-colors')
-const { LIGHT_THEMES, DARK_THEMES } = require('./src/styles/colors')
+const { LIGHT_THEMES } = require('./src/styles/colors')
 const { HEIGHT, BORDER_RADIUS } = require('./src/styles/sizes')
 
 /** @type {import('tailwindcss').Config} */
@@ -12,7 +12,7 @@ module.exports = {
     // Or if using `src` directory:
     './src/**/*.{js,ts,jsx,tsx,mdx}',
   ],
-  darkMode: 'false',
+  darkMode: ['class'],
   theme: {
     extend: {
       backgroundImage: () => ({