✨ 스크롤바 및 다크모드 비활성화 (#131)

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>
 

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

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; /* 파이어폭스 */
   }
 }

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: () => ({