refactor: darkmode css variable 적용

src/components/Badge/Badge.tsx

@@ -26,7 +26,7 @@ const colorConfig = {
   blue: 'bg-color-blue_200',
   pink: 'bg-color-pink',
   brown: 'bg-color-brown',
-  mono: 'bg-bg-primary_dark dark:bg-bg-primary',
+  mono: 'bg-text-primary',
   outline: 'bg-none',
 };
 
@@ -35,15 +35,15 @@ export function Badge({ color = 'outline', text, className }: Props) {
     <div
       className={twMerge(
         cx('w-fit rounded-lg px-2 py-[3px]', colorConfig[color], {
-          'border border-border-secondary dark:border-border-secondary_dark': color === 'outline',
+          'border border-border-secondary': color === 'outline',
         }),
         className,
       )}
     >
       <Text
         text={text}
         size="small"
-        className={cx({ 'text-text-primary_dark dark:text-text-primary': color === 'mono' })}
+        className={cx({ 'text-bg-primary': color === 'mono' })}
         color={color === 'outline' ? 'secondary' : 'white'}
       />
     </div>

src/components/Button/Button.tsx

@@ -44,8 +44,7 @@ type Props = ButtonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof B
 
 const variantStyles: Record<ButtonVariant['variant'], string> = {
   primary: 'bg-color-system_200 border-0 hover:bg-color-system_300',
-  secondary:
-    'border-border-primary dark:border-border-primary_dark hover:border-color-system_200 hover:dark:border-color-system_200',
+  secondary: 'border-border-primary hover:border-color-system_200',
   text: 'border-0',
 };
 
@@ -70,10 +69,8 @@ export function Button(props: Props) {
           size="small"
           className={twMerge(
             'transition-colors duration-200',
-            variant === 'primary'
-              ? 'fill-color-white'
-              : 'fill-text-secondary group-hover:fill-color-system_200 dark:fill-text-secondary_dark',
-            activated && 'fill-color-system_200 dark:fill-color-system_200',
+            variant === 'primary' ? 'fill-color-white' : 'fill-text-secondary group-hover:fill-color-system_200',
+            activated && 'fill-color-system_200',
           )}
         />
       )}
@@ -85,7 +82,7 @@ export function Button(props: Props) {
           color={variant === 'primary' ? 'white' : 'secondary'}
           className={cx('transition-colors duration-200', {
             'group-hover:text-color-system_200': variant !== 'primary',
-            'text-color-system_200 dark:text-color-system_200': activated,
+            'text-color-system_200': activated,
           })}
         />
       )}

src/components/Checkbox/Checkbox.tsx

@@ -30,9 +30,9 @@ export function Checkbox({ labelText, checked = false, disabled = false, onChang
       <input type="checkbox" className="hidden" checked={checked} onChange={onChange} />
       <div
         className={cx(
-          ' flex h-[20px] w-[20px] items-center justify-center rounded-md border-2 border-border-primary transition-colors duration-200 hover:border-color-system_200 dark:border-border-primary_dark dark:hover:border-color-system_200',
+          ' flex h-[20px] w-[20px] items-center justify-center rounded-md border-2 border-border-primary transition-colors duration-200 hover:border-color-system_200',
           {
-            ['border-color-system_200 bg-color-system_200  dark:border-color-system_200']: checked,
+            ['border-color-system_200 bg-color-system_200']: checked,
           },
         )}
       >

src/components/Chip/Chip.tsx

@@ -24,19 +24,15 @@ export function Chip({ icon, text, isSelected }: Props) {
       className={cx(
         'group flex h-8 w-fit select-none flex-row items-center rounded-lg duration-200 ease-out active:scale-92',
         text ? 'px-3' : 'px-2',
-        isSelected
-          ? 'bg-bg-secondary dark:bg-bg-secondary_dark'
-          : 'bg-bg-tertiary_alpha_0 dark:bg-bg-primary_alpha_0_dark',
+        isSelected ? 'bg-bg-secondary' : 'bg-bg-primary_alpha_0',
       )}
     >
       {icon && (
         <Icon
           svg={icon}
           className={cx(
             'mr-2  transition-[fill] group-hover:fill-color-system_200',
-            isSelected
-              ? 'fill-text-primary dark:fill-text-primary_dark'
-              : 'fill-text-secondary dark:fill-text-secondary_dark',
+            isSelected ? 'fill-text-primary' : 'fill-text-secondary',
           )}
         />
       )}

src/components/Comment/Comment.tsx

@@ -81,7 +81,7 @@ export function Comment({
         <Button
           text={`좋아요 ${likeCount}`}
           variant="text"
-          className={cx('px-0', { '[&>p]:text-color-system_200 [&>p]:dark:text-color-system_200': isLiked })}
+          className={cx('px-0', { '[&>p]:text-color-system_200': isLiked })}
           onClick={onClickLike}
         />
         <Button text="답글달기" variant="text" className="px-0" onClick={onClickReply} />

src/components/Divider/Divider.tsx

@@ -14,8 +14,8 @@ export function Divider({ variant = 'primary', className, ...restProps }: Divide
       className={cx(
         'h-[1px] w-full',
         {
-          'bg-border-primary dark:bg-border-primary_dark': variant === 'primary',
-          'bg-border-secondary dark:bg-border-secondary_dark': variant === 'secondary',
+          'bg-border-primary': variant === 'primary',
+          'bg-border-secondary': variant === 'secondary',
         },
         className,
       )}

src/components/Feed/Feed.tsx

@@ -83,7 +83,7 @@ export function Feed({
       <div className="relative mt-6 w-411">
         <Text size="heading2" weight="semibold" text={title} className="mb-4" />
         <Text text={contents} className="line-clamp-4" />
-        <div className="absolute left-0 top-0 z-10 h-full w-411 bg-gradient-to-t from-bg-primary to-transparent dark:from-bg-primary_dark " />
+        <div className="absolute left-0 top-0 z-10 h-full w-411 bg-gradient-to-t from-bg-primary to-transparent" />
       </div>
       <div className=" mb-4 mt-4 flex flex-row items-center justify-start">
         <Button

src/components/GroupHeader/GroupHeader.tsx

@@ -16,7 +16,7 @@ interface Props {
 export function GroupHeader({ href, text }: Props) {
   return (
     <a
-      className="flex flex-row items-center gap-1 text-text-primary transition-gap duration-200 ease-in-out hover:gap-2 dark:text-text-primary_dark"
+      className="flex flex-row items-center gap-1 text-text-primary transition-gap duration-200 ease-in-out hover:gap-2"
       href={href}
     >
       <Text text={text} size="heading3" weight="semibold" />

src/components/IconText/IconText.tsx

@@ -29,7 +29,7 @@ const textSize: Record<Size, TextSize> = {
 export function IconText({ icon, size = 'medium', text }: Props) {
   return (
     <div className={cx('flex flex-row items-center', { 'gap-2': size !== 'xsmall', 'gap-1': size === 'xsmall' })}>
-      <Icon svg={icon} size={size} className="fill-text-secondary dark:fill-text-secondary_dark" />
+      <Icon svg={icon} size={size} className="fill-text-secondary" />
       <Text text={text} size={textSize[size]} color="secondary" />
     </div>
   );

src/components/Input/Input.tsx

@@ -78,12 +78,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           {label && (
             <label
               htmlFor={idFromProps ?? id}
-              className={cx(
-                'text-sm font-normal leading-[1.8] text-text-secondary before:mr-1 dark:text-text-secondary_dark',
-                {
-                  'before:content-["*"]': required,
-                },
-              )}
+              className={cx('text-sm font-normal leading-[1.8] text-text-secondary before:mr-1', {
+                'before:content-["*"]': required,
+              })}
             >
               {label}
             </label>
@@ -102,14 +99,14 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           className={cx('flex w-full items-center rounded-lg px-4', {
             'border border-solid border-border-primary bg-bg-primary_alpha_0 focus-within:border-color-blue_200':
               variant === 'outline',
-            'bg-bg-secondary dark:bg-bg-secondary_dark': variant === 'filled',
+            'bg-bg-secondary': variant === 'filled',
             'border-color-red focus-within:border-color-red': hasError,
           })}
         >
           <input
             ref={ref}
             id={idFromProps ?? id}
-            className="h-[44px] w-full bg-transparent text-base font-normal leading-[1.5] text-text-primary placeholder:text-text-tertiary focus:outline-none dark:text-text-primary_dark dark:placeholder:text-text-tertiary_dark"
+            className="h-[44px] w-full bg-transparent text-base font-normal leading-[1.5] text-text-primary placeholder:text-text-tertiary focus:outline-none"
             value={value}
             onChange={handleChange}
             maxLength={maxLength}

src/components/ListItem/ListItem.tsx

@@ -66,9 +66,7 @@ export function ListItem({
             <Text text={title} size="body1" weight="medium" color="primary" />
           </div>
         </div>
-        <div className="flex flex-row items-center gap-2 text-text-secondary dark:text-text-secondary_dark">
-          {rightAddon}
-        </div>
+        <div className="flex flex-row items-center gap-2 text-text-secondary">{rightAddon}</div>
       </div>
       {hasBorder && <Divider variant="secondary" />}
     </div>

src/components/Radio/Radio.tsx

@@ -27,10 +27,10 @@ export function Radio({ label, selected, disabled, onChange }: Props) {
       <input type="radio" value={label} className="hidden" checked={selected} disabled={disabled} onChange={onChange} />
       <div
         className={cx(
-          'flex h-5 w-5 flex-row items-center justify-center rounded-full border-2 border-border-primary duration-200 dark:border-border-primary_dark',
+          'flex h-5 w-5 flex-row items-center justify-center rounded-full border-2 border-border-primary duration-200',
           {
-            'border-color-system_200 dark:border-color-system_200': selected,
-            'group-hover:border-color-system_200 group-hover:dark:border-color-system_200': !disabled,
+            'border-color-system_200': selected,
+            'group-hover:border-color-system_200': !disabled,
           },
         )}
       >

src/components/SearchBar/SearchBar.tsx

@@ -14,21 +14,19 @@ interface InputProps {
 type Props = InputProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof InputProps>;
 
 const variantStyles: Record<SearchBarVariant, string> = {
-  primary:
-    'bg-gradient-to-r from-green-200 to-color-system_100 shadow-searchbar hover:shadow-searchbar_hover dark:shadow-searchbar_dark dark:hover:shadow-searchbar_hover_dark',
-  solid:
-    'bg-border-primary dark:bg-border-primary_dark focus-within:bg-color-system_200 dark:focus-within:bg-color-system_200 hover:shadow-searchbar_solid_hover dark:hover:shadow-searchbar_solid_hover_dark',
+  primary: 'bg-gradient-to-r from-green-200 to-color-system_100 shadow-searchbar hover:shadow-searchbar_hover',
+  solid: 'bg-border-primary focus-within:bg-color-system_200 hover:shadow-searchbar_solid_hover',
 };
 
 export const SearchBar = forwardRef<HTMLInputElement, Props>(
   ({ variant = 'primary', className, ...restProps }, ref) => {
     return (
       <div className={twMerge('relative h-10 w-full overflow-hidden rounded-[20px] p-0.5', variantStyles[variant])}>
-        <div className="flex h-full w-full flex-row items-center rounded-[20px] bg-bg-primary pl-4 pr-1 dark:bg-bg-primary_dark">
+        <div className="flex h-full w-full flex-row items-center rounded-[20px] bg-bg-primary pl-4 pr-1">
           <input
             ref={ref}
             className={twMerge(
-              'h-full flex-1 border-0 bg-inherit text-sm font-medium leading-6 outline-0 placeholder:text-text-tertiary dark:text-text-tertiary_dark dark:placeholder:text-text-tertiary_dark',
+              'h-full flex-1 border-0 bg-inherit text-sm font-medium leading-6 text-text-tertiary outline-0 placeholder:text-text-tertiary',
               className,
             )}
             {...restProps}

src/components/Text/Text.tsx

@@ -65,9 +65,9 @@ export const textAlignConfig: Record<TextAlign, string> = {
 };
 
 export const textColorConfig: Record<Color, string> = {
-  primary: 'text-text-primary dark:text-text-primary_dark',
-  secondary: 'text-text-secondary dark:text-text-secondary_dark',
-  tertiary: 'text-text-tertiary dark:text-text-tertiary_dark',
+  primary: 'text-text-primary',
+  secondary: 'text-text-secondary',
+  tertiary: 'text-text-tertiary',
   white: 'text-white',
   black: 'text-black',
   red_100: 'text-red-300',

src/styles/tailwind.css

@@ -7,4 +7,74 @@
   body {
     font-family: Pretendard Variable;
   }
+
+  :root {
+    --color-text-primary: 0 0 0;
+    --color-text-secondary: 115 115 115;
+    --color-text-tertiary: 181 181 181;
+
+    --color-bg-primary: 255 255 255;
+    --color-bg-alpha-base: 255 255 255;
+    --color-bg-secondary: 243 244 246;
+    --color-bg-tertiary: 209 213 219;
+
+    --color-border-primary: 209 213 219;
+    --color-border-secondary: 243 244 246;
+
+    --color-button-secondary-bg: 235 235 235;
+
+    --color-white: 255 255 255;
+    --color-black: 0 0 0;
+    --color-green: 40 205 65;
+    --color-yellow: 255 204 0;
+    --color-cyan: 50 173 230;
+    --color-indigo: 88 86 214;
+    --color-mint: 0 199 190;
+    --color-pink: 255 45 85;
+    --color-brown: 162 132 94;
+    --color-red: 255 59 48;
+
+    --color-blue_200: 56 189 248;
+    --color-blue_300: 2 132 199;
+
+    --color-system-100: 186 230 253;
+    --color-system-200: 56 189 248;
+    --color-system-300: 2 132 199;
+
+    --color-green-100: 187 247 208;
+    --color-green-200: 34 197 94;
+    --color-green-300: 22 163 74;
+
+    --color-red-100: 254 202 202;
+    --color-red-200: 255 59 48;
+    --color-red-300: 220 38 38;
+
+    --color-yellow-100: 254 240 138;
+    --color-yellow-200: 250 204 21;
+    --color-yellow-300: 202 138 4;
+
+    --shadow-searchbar: 0px 0px 1px 0px #f3f4f6;
+    --shadow-searchbar-hover: 0px 0px 5px 1px #d1d5db;
+    --shadow-searchbar-solid-hover: 0px 0px 16px 4px #b5b5b5;
+  }
+
+  :root[class~='dark'] {
+    --color-text-primary: 255 255 255;
+    --color-text-secondary: 186 186 186;
+    --color-text-tertiary: 122 122 122;
+
+    --color-bg-primary: 10 10 10;
+    --color-bg-alpha-base: 0 0 0;
+    --color-bg-secondary: 20 20 20;
+    --color-bg-tertiary: 51 51 51;
+
+    --color-border-primary: 82 82 82;
+    --color-border-secondary: 38 38 38;
+
+    --color-button-secondary-bg: 46 46 46;
+
+    --shadow-searchbar: 0px 0px 1px 0px #262626;
+    --shadow-searchbar-hover: 0px 0px 5px 1px #525252;
+    --shadow-searchbar-solid-hover: 0px 0px 16px 4px #7a7a7a;
+  }
 }