From 1b2d734fd801d76ebd5a178087b5b6166d336c98 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 08:51:55 +0900 Subject: [PATCH 1/9] =?UTF-8?q?refactor:=20=EC=A4=91=EB=B3=B5=EB=90=9C=20a?= =?UTF-8?q?dd=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/svgs/ic-add-disabled.svg | 5 ----- src/constants/images.ts | 4 ---- 2 files changed, 9 deletions(-) delete mode 100644 public/svgs/ic-add-disabled.svg diff --git a/public/svgs/ic-add-disabled.svg b/public/svgs/ic-add-disabled.svg deleted file mode 100644 index 260bf77e..00000000 --- a/public/svgs/ic-add-disabled.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/constants/images.ts b/src/constants/images.ts index 8a0b14c8..f40db581 100644 --- a/src/constants/images.ts +++ b/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', From cf14cf086c17fedb892b0a3e5a39ea436fce9bf3 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 08:52:27 +0900 Subject: [PATCH 2/9] =?UTF-8?q?rafactor:=20Operation=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=88=98=EC=A0=95=20=EB=B0=8F?= =?UTF-8?q?=20Hover=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../buttons/OperationButton.module.scss | 10 +++++-- .../commons/buttons/OperationButton.tsx | 27 ++++++++++++++----- 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/components/commons/buttons/OperationButton.module.scss b/src/components/commons/buttons/OperationButton.module.scss index c48745b6..78c902ae 100644 --- a/src/components/commons/buttons/OperationButton.module.scss +++ b/src/components/commons/buttons/OperationButton.module.scss @@ -8,6 +8,11 @@ width: 4.8rem; height: 4.8rem; border-radius: 0.8rem; + + &:disabled { + cursor: default; + background-color: $gray60; + } } .btn-operation { @@ -15,9 +20,10 @@ @extend %btn-base; background-color: $purple; + transition: $base-transition; - &:disabled { - background-color: $gray60; + &:hover:not(:disabled) { + background-color: $purple60; } } diff --git a/src/components/commons/buttons/OperationButton.tsx b/src/components/commons/buttons/OperationButton.tsx index 75035d02..c8ea08c6 100644 --- a/src/components/commons/buttons/OperationButton.tsx +++ b/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 ( - ); From 72ff9b769b23d71a1b22de0b2883777199be8736 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 09:02:21 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20Card=EB=B2=84=ED=8A=BC=20=EC=8A=A4?= =?UTF-8?q?=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/stories/CardButton.stories.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/stories/CardButton.stories.ts diff --git a/src/stories/CardButton.stories.ts b/src/stories/CardButton.stories.ts new file mode 100644 index 00000000..d64f30ee --- /dev/null +++ b/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; + +export default meta; +type Story = StoryObj; + +export const Example: Story = { + args: { + children: 'test', + }, +}; From c9f564d3ad7ebacae9be9f4cfcc598c191e2bc1e Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 09:14:56 +0900 Subject: [PATCH 4/9] =?UTF-8?q?fix:=20=ED=95=84=ED=84=B0=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=AA=A8=EB=B0=94=EC=9D=BC?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=ED=85=8C=EB=91=90=EB=A6=AC=20=EC=9E=98?= =?UTF-8?q?=EB=A6=AC=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Filter/Filter.module.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/commons/Filter/Filter.module.scss b/src/components/commons/Filter/Filter.module.scss index c4fa3335..bfc1a825 100644 --- a/src/components/commons/Filter/Filter.module.scss +++ b/src/components/commons/Filter/Filter.module.scss @@ -17,21 +17,21 @@ 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; + box-shadow: 0 0 0 0.1rem $primary inset; } &.activated { @include text-style(14, $black80, bold); background-color: $primary; - outline: none; + box-shadow: none; } } } From 150a98097a083c7e673a39e0d128c62690c94078 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 09:37:08 +0900 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20BaseButton=20=ED=83=9C=EB=B8=94?= =?UTF-8?q?=EB=A6=BF=20=EC=9D=B4=ED=95=98=20=ED=98=B8=EB=B2=84=ED=9A=A8?= =?UTF-8?q?=EA=B3=BC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../commons/buttons/BaseButton.module.scss | 84 +++++++++++-------- 1 file changed, 50 insertions(+), 34 deletions(-) diff --git a/src/components/commons/buttons/BaseButton.module.scss b/src/components/commons/buttons/BaseButton.module.scss index 0a6610ea..16f85a39 100644 --- a/src/components/commons/buttons/BaseButton.module.scss +++ b/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; - } } } From 5a55764d1c5dabf9edf99f2e7661d5159e9b2cbf Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 09:39:36 +0900 Subject: [PATCH 6/9] =?UTF-8?q?feat:=20CardButton=20=ED=83=9C=EB=B8=94?= =?UTF-8?q?=EB=A6=BF=20=EC=9D=B4=ED=95=98=20hover=ED=9A=A8=EA=B3=BC=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../commons/buttons/CardButton.module.scss | 24 ++++++++----------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/src/components/commons/buttons/CardButton.module.scss b/src/components/commons/buttons/CardButton.module.scss index b4ed13e3..a68c810e 100644 --- a/src/components/commons/buttons/CardButton.module.scss +++ b/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; } From 93a51ca1fecaed8d4c744243b34e14397ebbcd26 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 09:40:58 +0900 Subject: [PATCH 7/9] =?UTF-8?q?feat:=20MoreButton=20=ED=83=9C=EB=B8=94?= =?UTF-8?q?=EB=A6=BF=20=EC=9D=B4=ED=95=98=20hover=ED=9A=A8=EA=B3=BC=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/buttons/MoreButton.module.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/commons/buttons/MoreButton.module.scss b/src/components/commons/buttons/MoreButton.module.scss index 44b9269b..89e4573d 100644 --- a/src/components/commons/buttons/MoreButton.module.scss +++ b/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; } From 6f993b7cd5de7fccfcd77beeca027ce90c4c2d75 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 09:42:05 +0900 Subject: [PATCH 8/9] =?UTF-8?q?feat:=20OperationButton=20=ED=83=9C?= =?UTF-8?q?=EB=B8=94=EB=A6=BF=20=EC=9D=B4=ED=95=98=20hover=ED=9A=A8?= =?UTF-8?q?=EA=B3=BC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../commons/buttons/OperationButton.module.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/commons/buttons/OperationButton.module.scss b/src/components/commons/buttons/OperationButton.module.scss index 78c902ae..ec00e7d7 100644 --- a/src/components/commons/buttons/OperationButton.module.scss +++ b/src/components/commons/buttons/OperationButton.module.scss @@ -19,12 +19,14 @@ &-add { @extend %btn-base; + @include responsive(PC) { + &:hover:not(:disabled) { + background-color: $purple60; + } + } + background-color: $purple; transition: $base-transition; - - &:hover:not(:disabled) { - background-color: $purple60; - } } &-remove { From 868537ebf4ffdf5e2b24a1bb2af09a1885110ee2 Mon Sep 17 00:00:00 2001 From: CheeseB <2489ckckck@naver.com> Date: Thu, 28 Mar 2024 09:43:17 +0900 Subject: [PATCH 9/9] =?UTF-8?q?feat:=20Filter=20=ED=83=9C=EB=B8=94?= =?UTF-8?q?=EB=A6=BF=20=EC=9D=B4=ED=95=98=20hover=ED=9A=A8=EA=B3=BC=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/commons/Filter/Filter.module.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/commons/Filter/Filter.module.scss b/src/components/commons/Filter/Filter.module.scss index bfc1a825..6eb004e9 100644 --- a/src/components/commons/Filter/Filter.module.scss +++ b/src/components/commons/Filter/Filter.module.scss @@ -11,6 +11,14 @@ &-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; @@ -21,12 +29,6 @@ transition: $base-transition; - &:hover { - @include text-style(14, $white, bold); - - box-shadow: 0 0 0 0.1rem $primary inset; - } - &.activated { @include text-style(14, $black80, bold);