Feat: 공용 컴포넌트 스타일 리팩토링

src/components/commons/Filter/Filter.module.scss

@@ -11,27 +11,29 @@
   &-item {
     @include text-style(14, $gray40);
 
+    @include responsive(PC) {
+      &:hover {
+        @include text-style(14, $white, bold);
+
+        box-shadow: 0 0 0 0.1rem $primary inset;
+      }
+    }
+
     height: 4rem;
     padding: 0 1.6rem;
 
     white-space: nowrap;
 
     border-radius: 9.9rem;
-    outline: 0.1rem solid $black60;
+    box-shadow: 0 0 0 0.1rem $black60 inset;
 
     transition: $base-transition;
 
-    &:hover {
-      @include text-style(14, $white, bold);
-
-      outline: 0.1rem solid $primary;
-    }
-
     &.activated {
       @include text-style(14, $black80, bold);
 
       background-color: $primary;
-      outline: none;
+      box-shadow: none;
     }
   }
 }

src/components/commons/buttons/BaseButton.module.scss

@@ -5,16 +5,18 @@
   transition: $base-transition;
 
   &:disabled {
+    @include responsive(PC) {
+      &:hover:not(.no-hover) {
+        color: $gray40;
+        background-color: $gray60;
+        box-shadow: none;
+      }
+    }
+
     cursor: default;
     color: $gray40;
     background-color: $gray60;
     box-shadow: none;
-
-    &:hover:not(.no-hover) {
-      color: $gray40;
-      background-color: $gray60;
-      box-shadow: none;
-    }
   }
 
   span {
@@ -69,69 +71,83 @@
 .btn-theme {
   &-fill {
     &-yellow {
+      @include responsive(PC) {
+        &:hover:not(.no-hover) {
+          background-color: $primary80;
+        }
+      }
+
       color: $black80;
       background-color: $primary;
-
-      &:hover:not(.no-hover) {
-        background-color: $primary80;
-      }
     }
 
     &-purple {
+      @include responsive(PC) {
+        &:hover {
+          background-color: $purple60;
+        }
+      }
+
       color: $white;
       background-color: $purple;
-
-      &:hover {
-        background-color: $purple60;
-      }
     }
 
     &-red {
+      @include responsive(PC) {
+        &:hover {
+          background-color: $red20;
+        }
+      }
+
       color: $white;
       background-color: $red;
-
-      &:hover {
-        background-color: $red20;
-      }
     }
   }
 
   &-ghost {
     &-yellow {
+      @include responsive(PC) {
+        &:hover {
+          box-shadow: 0 0 0 0.1rem $primary inset;
+        }
+      }
+
       color: $primary;
       background-color: $black;
-
-      &:hover {
-        box-shadow: 0 0 0 0.1rem $primary inset;
-      }
     }
 
     &-purple {
+      @include responsive(PC) {
+        &:hover {
+          box-shadow: 0 0 0 0.1rem $purple inset;
+        }
+      }
+
       color: $purple;
       background-color: $black;
-
-      &:hover {
-        box-shadow: 0 0 0 0.1rem $purple inset;
-      }
     }
 
     &-red {
+      @include responsive(PC) {
+        &:hover {
+          box-shadow: 0 0 0 0.1rem $red inset;
+        }
+      }
+
       color: $red;
       background-color: $black;
+    }
+  }
 
+  &-outline {
+    @include responsive(PC) {
       &:hover {
-        box-shadow: 0 0 0 0.1rem $red inset;
+        color: $gray10;
+        box-shadow: 0 0 0 0.1rem $gray30 inset;
       }
     }
-  }
 
-  &-outline {
     color: $gray30;
     box-shadow: 0 0 0 0.1rem $gray60 inset;
-
-    &:hover {
-      color: $gray10;
-      box-shadow: 0 0 0 0.1rem $gray30 inset;
-    }
   }
 }

src/components/commons/buttons/CardButton.module.scss

@@ -28,25 +28,21 @@
 }
 
 .btn-color-yellow {
-  color: $primary;
-
-  &:hover {
-    @include responsive(M) {
-      border-color: transparent;
+  @include responsive(PC) {
+    &:hover {
+      border: 0.1rem solid $primary;
     }
-
-    border: 0.1rem solid $primary;
   }
+
+  color: $primary;
 }
 
 .btn-color-red {
-  color: $red;
-
-  &:hover {
-    @include responsive(M) {
-      border-color: transparent;
+  @include responsive(PC) {
+    &:hover {
+      border: 0.1rem solid $red;
     }
-
-    border: 0.1rem solid $red;
   }
+
+  color: $red;
 }

src/components/commons/buttons/MoreButton.module.scss

@@ -1,6 +1,12 @@
 .btn-more {
   @include inline-flexbox;
 
+  @include responsive(PC) {
+    &:hover {
+      border-color: $primary;
+    }
+  }
+
   width: 3.2rem;
   height: 3.2rem;
 
@@ -9,7 +15,6 @@
 
   transition: $base-transition;
 
-  &:hover,
   &[aria-pressed='true'] {
     border-color: $primary;
   }

src/components/commons/buttons/OperationButton.module.scss

@@ -8,17 +8,25 @@
   width: 4.8rem;
   height: 4.8rem;
   border-radius: 0.8rem;
+
+  &:disabled {
+    cursor: default;
+    background-color: $gray60;
+  }
 }
 
 .btn-operation {
   &-add {
     @extend %btn-base;
 
-    background-color: $purple;
-
-    &:disabled {
-      background-color: $gray60;
+    @include responsive(PC) {
+      &:hover:not(:disabled) {
+        background-color: $purple60;
+      }
     }
+
+    background-color: $purple;
+    transition: $base-transition;
   }
 
   &-remove {

src/components/commons/buttons/OperationButton.tsx

@@ -6,6 +6,8 @@ import classNames from 'classnames/bind';
 
 import { SVGS } from '@/constants';
 
+import useToggleButton from '@/hooks/useToggleButton';
+
 import styles from './OperationButton.module.scss';
 
 const cx = classNames.bind(styles);
@@ -17,17 +19,28 @@ type OperationButtonProps = {
 };
 
 export const OperationButton = ({ type, isDisabled, onClick }: OperationButtonProps) => {
-  const buttonType = type === 'add' && isDisabled ? 'disabled' : type;
-  let icon = SVGS.button.disabled;
+  const { isVisible: isHovering, handleToggleClick: toggleHovering } = useToggleButton();
+
+  const isButtonActive = (type === 'add' && !isDisabled) || isHovering;
+
+  const { default: defaultButton, active: activeButton } = SVGS.button[type];
+  const { url, alt } = isButtonActive ? activeButton : defaultButton;
 
-  if (buttonType !== 'disabled') {
-    icon = SVGS.button[buttonType].active;
-  }
+  const handleToggleHovering = () => {
+    if (isDisabled) return;
 
-  const { url, alt } = icon;
+    toggleHovering();
+  };
 
   return (
-    <button className={cx(`btn-operation-${type}`)} disabled={isDisabled} type='button' onClick={onClick}>
+    <button
+      className={cx(`btn-operation-${type}`)}
+      disabled={isDisabled}
+      type='button'
+      onClick={onClick}
+      onMouseEnter={handleToggleHovering}
+      onMouseLeave={handleToggleHovering}
+    >
       <Image src={url} alt={alt} width={24} height={24} />
     </button>
   );

src/constants/images.ts

@@ -119,10 +119,6 @@ export const SVGS = {
         alt: '빼기 버튼',
       },
     },
-    disabled: {
-      url: '/svgs/ic-add-disabled.svg',
-      alt: '비활성화된 버튼',
-    },
 
     more: {
       url: '/svgs/ic-more.svg',

src/stories/CardButton.stories.ts

@@ -0,0 +1,17 @@
+import { CardButton } from '@/components/commons/buttons';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Buttons/CardButton',
+  component: CardButton,
+} satisfies Meta<typeof CardButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+    children: 'test',
+  },
+};