From 31d1ee377b6e1a9327c61f831c2397a44300ace5 Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Mon, 19 Jan 2026 19:09:25 +0900 Subject: [PATCH 01/22] =?UTF-8?q?feat:=20=ED=95=98=ED=8A=B8=20=EC=95=84?= =?UTF-8?q?=EC=9B=83=EB=9D=BC=EC=9D=B8=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/assets/icons/common/heart-outline.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/shared/assets/icons/common/heart-outline.svg diff --git a/src/shared/assets/icons/common/heart-outline.svg b/src/shared/assets/icons/common/heart-outline.svg new file mode 100644 index 00000000..96788414 --- /dev/null +++ b/src/shared/assets/icons/common/heart-outline.svg @@ -0,0 +1,3 @@ + + + From f622c6f5566910e42743b86c0f06b7ae1d6f040b Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Mon, 19 Jan 2026 19:09:43 +0900 Subject: [PATCH 02/22] =?UTF-8?q?feat:=20=ED=95=98=ED=8A=B8=20=ED=95=84?= =?UTF-8?q?=EB=93=9C=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/assets/icons/common/heart-filled.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 src/shared/assets/icons/common/heart-filled.svg diff --git a/src/shared/assets/icons/common/heart-filled.svg b/src/shared/assets/icons/common/heart-filled.svg new file mode 100644 index 00000000..cda098f6 --- /dev/null +++ b/src/shared/assets/icons/common/heart-filled.svg @@ -0,0 +1,3 @@ + + + From feeefd4f6b219bd419a34e1c78da16a4cb7bcbf8 Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Mon, 19 Jan 2026 19:10:10 +0900 Subject: [PATCH 03/22] =?UTF-8?q?chore:=20=ED=95=98=ED=8A=B8=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20export=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/assets/icons/common/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/shared/assets/icons/common/index.ts b/src/shared/assets/icons/common/index.ts index 562fe5b9..34c2d4fd 100644 --- a/src/shared/assets/icons/common/index.ts +++ b/src/shared/assets/icons/common/index.ts @@ -2,3 +2,5 @@ export { default as CaretDownMdIcon } from './caret-down-md.svg?react'; export { default as CheckIcon } from './check.svg?react'; export { default as DoneIcon } from './done.svg?react'; export { default as SearchMagnifyingGlassIcon } from './search-magnifying-glass.svg?react'; +export { default as HeartIcon } from './heart-outline.svg?react'; +export { default as HeartFilledIcon } from './heart-filled.svg?react'; From a976a9b4908406d63567134c2ac9b278257aeec8 Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Mon, 19 Jan 2026 19:10:32 +0900 Subject: [PATCH 04/22] =?UTF-8?q?chore:=20=EA=B3=B5=EC=9A=A9=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20export=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/assets/icons/index.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/shared/assets/icons/index.ts b/src/shared/assets/icons/index.ts index ca17fbf0..3dd0715b 100644 --- a/src/shared/assets/icons/index.ts +++ b/src/shared/assets/icons/index.ts @@ -1,2 +1,9 @@ -export { CaretDownMdIcon, CheckIcon, DoneIcon, SearchMagnifyingGlassIcon } from './common'; +export { + CaretDownMdIcon, + CheckIcon, + DoneIcon, + HeartFilledIcon, + HeartIcon, + SearchMagnifyingGlassIcon, +} from './common'; export { GearIcon, ShoppingIcon, SellIcon } from './banner'; From 3b14eb3020e215d137eda6b5141d5cb95bda47ec Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Mon, 19 Jan 2026 19:11:06 +0900 Subject: [PATCH 05/22] =?UTF-8?q?feat:=20FavoriteButton=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/FavoriteButton/FavoriteButton.tsx | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 src/shared/ui/FavoriteButton/FavoriteButton.tsx diff --git a/src/shared/ui/FavoriteButton/FavoriteButton.tsx b/src/shared/ui/FavoriteButton/FavoriteButton.tsx new file mode 100644 index 00000000..114f9f03 --- /dev/null +++ b/src/shared/ui/FavoriteButton/FavoriteButton.tsx @@ -0,0 +1,43 @@ +import { HeartFilledIcon, HeartIcon } from '@shared/assets/icons'; +import clsx from 'clsx'; +import { useState } from 'react'; +import { favoriteButtonVariants } from './FavoriteButton.variants'; + +export const FavoriteButton = ({ + defaultActive = false, + onToggle, + ariaLabel = '찜', +}: { + defaultActive?: boolean; + onToggle?: (isActive: boolean) => void; + ariaLabel?: string; +}) => { + const [isActive, setActive] = useState(defaultActive); + + const styles = favoriteButtonVariants(); + + const handleClick = () => { + const nextActive = !isActive; + setActive(nextActive); + onToggle?.(nextActive); + }; + + return ( + + ); +}; From 7fbbe5a37d0bc48bbf64090e9187ad433fc3ad5a Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Mon, 19 Jan 2026 19:11:34 +0900 Subject: [PATCH 06/22] =?UTF-8?q?feat:=20FavoriteButton=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20variants=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/FavoriteButton/FavoriteButton.variants.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/shared/ui/FavoriteButton/FavoriteButton.variants.ts diff --git a/src/shared/ui/FavoriteButton/FavoriteButton.variants.ts b/src/shared/ui/FavoriteButton/FavoriteButton.variants.ts new file mode 100644 index 00000000..54163045 --- /dev/null +++ b/src/shared/ui/FavoriteButton/FavoriteButton.variants.ts @@ -0,0 +1,8 @@ +import { tv } from 'tailwind-variants'; + +export const favoriteButtonVariants = tv({ + slots: { + root: ['group inline-flex items-center justify-center', 'w-[44px] h-[44px]', 'transition-colors'], + icon: ['w-[33px] h-[29.26px]'], + }, +}); From 73a992290d26046be2e38330e3564f628d046b0c Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Mon, 19 Jan 2026 19:11:58 +0900 Subject: [PATCH 07/22] =?UTF-8?q?chore:=20FavoriteButton=20export=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/FavoriteButton/index.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/shared/ui/FavoriteButton/index.ts diff --git a/src/shared/ui/FavoriteButton/index.ts b/src/shared/ui/FavoriteButton/index.ts new file mode 100644 index 00000000..5647cda8 --- /dev/null +++ b/src/shared/ui/FavoriteButton/index.ts @@ -0,0 +1 @@ +export { FavoriteButton } from './FavoriteButton'; From ada484dae94b4702780b16cfeacb108b11d38cf7 Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Mon, 19 Jan 2026 19:12:55 +0900 Subject: [PATCH 08/22] =?UTF-8?q?feat:=20Playground=EC=97=90=20FavoriteBut?= =?UTF-8?q?ton=20=EC=98=88=EC=8B=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/playground.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/pages/playground.tsx b/src/pages/playground.tsx index a8a96b04..b4fc632b 100644 --- a/src/pages/playground.tsx +++ b/src/pages/playground.tsx @@ -2,6 +2,7 @@ import { BannerCard } from '@shared/ui/BannerCard/BannerCard'; import { Button } from '@shared/ui/Button/Button'; import { Card } from '@shared/ui/Card/Card'; import { Checkbox } from '@shared/ui/Checkbox/Checkbox'; +import { FavoriteButton } from '@shared/ui/FavoriteButton'; import { Header } from '@shared/ui/Header/Header'; import { Modal } from '@shared/ui/Modal/Modal'; import { Profile } from '@shared/ui/Profile/Profile'; @@ -121,6 +122,11 @@ export default function Playground() {

SearchBar

{}} /> + {/* Favorite Button */} +
+

FavoriteButton

+ +
{/* BannerCard */}

Banner Card

From 062c06bf34b129803259bca0a12f3565d5359a25 Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Mon, 19 Jan 2026 19:14:00 +0900 Subject: [PATCH 09/22] =?UTF-8?q?chore:=20SearchBar=20export=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/SearchBar/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/shared/ui/SearchBar/index.ts b/src/shared/ui/SearchBar/index.ts index 87859903..8c193316 100644 --- a/src/shared/ui/SearchBar/index.ts +++ b/src/shared/ui/SearchBar/index.ts @@ -1,2 +1 @@ export { SearchBar } from './SearchBar'; -export type { SearchBarProps } from './SearchBar'; From fb0064e735bc2047925855b75d74473660107e81 Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Mon, 19 Jan 2026 19:26:50 +0900 Subject: [PATCH 10/22] =?UTF-8?q?chore:=20=EA=B3=B5=EC=9A=A9=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20export=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/assets/icons/index.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/shared/assets/icons/index.ts b/src/shared/assets/icons/index.ts index 3dd0715b..631782bb 100644 --- a/src/shared/assets/icons/index.ts +++ b/src/shared/assets/icons/index.ts @@ -1,9 +1,2 @@ -export { - CaretDownMdIcon, - CheckIcon, - DoneIcon, - HeartFilledIcon, - HeartIcon, - SearchMagnifyingGlassIcon, -} from './common'; +export { CaretDownMdIcon, CheckIcon, DoneIcon, HeartFilledIcon, HeartIcon, SearchMagnifyingGlassIcon } from './common'; export { GearIcon, ShoppingIcon, SellIcon } from './banner'; From 870e954e722f4bec3bc6c54bd15eee3dd99ef973 Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Tue, 20 Jan 2026 21:14:50 +0900 Subject: [PATCH 11/22] =?UTF-8?q?refactor:=20FavoriteButton=20Props=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/FavoriteButton/FavoriteButton.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/shared/ui/FavoriteButton/FavoriteButton.tsx b/src/shared/ui/FavoriteButton/FavoriteButton.tsx index 114f9f03..64afcd12 100644 --- a/src/shared/ui/FavoriteButton/FavoriteButton.tsx +++ b/src/shared/ui/FavoriteButton/FavoriteButton.tsx @@ -3,15 +3,17 @@ import clsx from 'clsx'; import { useState } from 'react'; import { favoriteButtonVariants } from './FavoriteButton.variants'; +export interface FavoriteButtonProps { + defaultActive?: boolean; + onToggle?: (isActive: boolean) => void; + ariaLabel?: string; +} + export const FavoriteButton = ({ defaultActive = false, onToggle, ariaLabel = '찜', -}: { - defaultActive?: boolean; - onToggle?: (isActive: boolean) => void; - ariaLabel?: string; -}) => { +}: FavoriteButtonProps) => { const [isActive, setActive] = useState(defaultActive); const styles = favoriteButtonVariants(); From 65e84eb089a212dc0dccd2ed569616f2704991f2 Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Tue, 20 Jan 2026 21:15:14 +0900 Subject: [PATCH 12/22] =?UTF-8?q?chore:=20FavoriteButton=20export=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/FavoriteButton/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/shared/ui/FavoriteButton/index.ts b/src/shared/ui/FavoriteButton/index.ts index 5647cda8..b4c3a39e 100644 --- a/src/shared/ui/FavoriteButton/index.ts +++ b/src/shared/ui/FavoriteButton/index.ts @@ -1 +1,2 @@ export { FavoriteButton } from './FavoriteButton'; +export type { FavoriteButtonProps } from './FavoriteButton'; From 6bbfc5ea117d811e918939684574fd10b94204b7 Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Tue, 20 Jan 2026 21:25:53 +0900 Subject: [PATCH 13/22] =?UTF-8?q?refactor:=20=ED=95=98=ED=8A=B8=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20currentColor=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/assets/icons/common/heart-outline.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/assets/icons/common/heart-outline.svg b/src/shared/assets/icons/common/heart-outline.svg index 96788414..2fec00e5 100644 --- a/src/shared/assets/icons/common/heart-outline.svg +++ b/src/shared/assets/icons/common/heart-outline.svg @@ -1,3 +1,3 @@ - + From 917e64e1d5bd139bc2f3d992bf644691c7db8850 Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Tue, 20 Jan 2026 21:26:11 +0900 Subject: [PATCH 14/22] =?UTF-8?q?refactor:=20=ED=95=98=ED=8A=B8=20?= =?UTF-8?q?=ED=95=84=EB=93=9C=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/assets/icons/common/heart-filled.svg | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/shared/assets/icons/common/heart-filled.svg diff --git a/src/shared/assets/icons/common/heart-filled.svg b/src/shared/assets/icons/common/heart-filled.svg deleted file mode 100644 index cda098f6..00000000 --- a/src/shared/assets/icons/common/heart-filled.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - From d7339ee7a01449f3b48c297d40e03aaee096b057 Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Tue, 20 Jan 2026 21:30:32 +0900 Subject: [PATCH 15/22] =?UTF-8?q?chore:=20=ED=95=98=ED=8A=B8=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20export=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/assets/icons/common/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/shared/assets/icons/common/index.ts b/src/shared/assets/icons/common/index.ts index 34c2d4fd..648a0528 100644 --- a/src/shared/assets/icons/common/index.ts +++ b/src/shared/assets/icons/common/index.ts @@ -3,4 +3,3 @@ export { default as CheckIcon } from './check.svg?react'; export { default as DoneIcon } from './done.svg?react'; export { default as SearchMagnifyingGlassIcon } from './search-magnifying-glass.svg?react'; export { default as HeartIcon } from './heart-outline.svg?react'; -export { default as HeartFilledIcon } from './heart-filled.svg?react'; From 34491c4dc9c28d1a1106f38f6ee06d872e1dad2f Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Tue, 20 Jan 2026 21:30:50 +0900 Subject: [PATCH 16/22] =?UTF-8?q?chore:=20=EA=B3=B5=EC=9A=A9=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20export=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/assets/icons/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/assets/icons/index.ts b/src/shared/assets/icons/index.ts index 631782bb..1ebdd8ce 100644 --- a/src/shared/assets/icons/index.ts +++ b/src/shared/assets/icons/index.ts @@ -1,2 +1,2 @@ -export { CaretDownMdIcon, CheckIcon, DoneIcon, HeartFilledIcon, HeartIcon, SearchMagnifyingGlassIcon } from './common'; +export { CaretDownMdIcon, CheckIcon, DoneIcon, HeartIcon, SearchMagnifyingGlassIcon } from './common'; export { GearIcon, ShoppingIcon, SellIcon } from './banner'; From 986b8f4d76ab19bc8f722e16e405979b13fb460c Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Tue, 20 Jan 2026 21:31:19 +0900 Subject: [PATCH 17/22] =?UTF-8?q?refactor:=20FavoriteButton=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=83=89=EC=83=81=20=EC=83=81=ED=83=9C=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/FavoriteButton/FavoriteButton.tsx | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/src/shared/ui/FavoriteButton/FavoriteButton.tsx b/src/shared/ui/FavoriteButton/FavoriteButton.tsx index 64afcd12..89c4dcb8 100644 --- a/src/shared/ui/FavoriteButton/FavoriteButton.tsx +++ b/src/shared/ui/FavoriteButton/FavoriteButton.tsx @@ -1,4 +1,4 @@ -import { HeartFilledIcon, HeartIcon } from '@shared/assets/icons'; +import { HeartIcon } from '@shared/assets/icons'; import clsx from 'clsx'; import { useState } from 'react'; import { favoriteButtonVariants } from './FavoriteButton.variants'; @@ -24,6 +24,11 @@ export const FavoriteButton = ({ onToggle?.(nextActive); }; + const iconStateClassName = clsx( + isActive ? 'fill-[var(--color-green-300)]' : 'fill-transparent', + 'group-focus-visible:fill-[var(--color-green-300)]', + ); + return ( ); }; From 44a1922962c77f7544176be2742ce34a4622f873 Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Tue, 20 Jan 2026 21:31:43 +0900 Subject: [PATCH 18/22] =?UTF-8?q?refactor:=20FavoriteButton=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=83=89=EC=83=81=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/FavoriteButton/FavoriteButton.variants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/ui/FavoriteButton/FavoriteButton.variants.ts b/src/shared/ui/FavoriteButton/FavoriteButton.variants.ts index 54163045..a404df7e 100644 --- a/src/shared/ui/FavoriteButton/FavoriteButton.variants.ts +++ b/src/shared/ui/FavoriteButton/FavoriteButton.variants.ts @@ -3,6 +3,6 @@ import { tv } from 'tailwind-variants'; export const favoriteButtonVariants = tv({ slots: { root: ['group inline-flex items-center justify-center', 'w-[44px] h-[44px]', 'transition-colors'], - icon: ['w-[33px] h-[29.26px]'], + icon: ['w-[33px] h-[29.26px]', 'text-[var(--color-black)]', 'transition-colors'], }, }); From 83aa8258d5733ceeb3e2b8ebe485efde5507c9eb Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Tue, 20 Jan 2026 21:52:43 +0900 Subject: [PATCH 19/22] =?UTF-8?q?refactor:=20=ED=95=98=ED=8A=B8=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EB=B3=80=EC=88=98=20=EA=B8=B0?= =?UTF-8?q?=EB=B0=98=20fill/stroke=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/assets/icons/common/heart-outline.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/assets/icons/common/heart-outline.svg b/src/shared/assets/icons/common/heart-outline.svg index 2fec00e5..514dd178 100644 --- a/src/shared/assets/icons/common/heart-outline.svg +++ b/src/shared/assets/icons/common/heart-outline.svg @@ -1,3 +1,3 @@ - + From a52581fad243b5e0ec73f899b2f72036fd33d80d Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Tue, 20 Jan 2026 21:53:02 +0900 Subject: [PATCH 20/22] =?UTF-8?q?feat:=20FavoriteButton=20variant=20?= =?UTF-8?q?=EC=98=B5=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/FavoriteButton/FavoriteButton.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/shared/ui/FavoriteButton/FavoriteButton.tsx b/src/shared/ui/FavoriteButton/FavoriteButton.tsx index 89c4dcb8..515fc547 100644 --- a/src/shared/ui/FavoriteButton/FavoriteButton.tsx +++ b/src/shared/ui/FavoriteButton/FavoriteButton.tsx @@ -7,16 +7,18 @@ export interface FavoriteButtonProps { defaultActive?: boolean; onToggle?: (isActive: boolean) => void; ariaLabel?: string; + variant?: 'default' | 'inverse'; } export const FavoriteButton = ({ defaultActive = false, onToggle, ariaLabel = '찜', + variant = 'default', }: FavoriteButtonProps) => { const [isActive, setActive] = useState(defaultActive); - const styles = favoriteButtonVariants(); + const styles = favoriteButtonVariants({ variant }); const handleClick = () => { const nextActive = !isActive; @@ -25,8 +27,10 @@ export const FavoriteButton = ({ }; const iconStateClassName = clsx( - isActive ? 'fill-[var(--color-green-300)]' : 'fill-transparent', - 'group-focus-visible:fill-[var(--color-green-300)]', + 'fill-[var(--icon-fill)]', + 'stroke-[var(--icon-stroke)]', + isActive ? '[--icon-fill:var(--icon-fill-active)]' : '[--icon-fill:transparent]', + 'group-focus-visible:[--icon-fill:var(--icon-fill-active)]' ); return ( From 02dd1bd9b4869a46f6064ad9fd4cedb19fc8a866 Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Tue, 20 Jan 2026 21:53:20 +0900 Subject: [PATCH 21/22] =?UTF-8?q?feat:=20FavoriteButton=20default/inverse?= =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FavoriteButton/FavoriteButton.variants.ts | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/shared/ui/FavoriteButton/FavoriteButton.variants.ts b/src/shared/ui/FavoriteButton/FavoriteButton.variants.ts index a404df7e..b5289464 100644 --- a/src/shared/ui/FavoriteButton/FavoriteButton.variants.ts +++ b/src/shared/ui/FavoriteButton/FavoriteButton.variants.ts @@ -3,6 +3,21 @@ import { tv } from 'tailwind-variants'; export const favoriteButtonVariants = tv({ slots: { root: ['group inline-flex items-center justify-center', 'w-[44px] h-[44px]', 'transition-colors'], - icon: ['w-[33px] h-[29.26px]', 'text-[var(--color-black)]', 'transition-colors'], + icon: ['w-[33px] h-[29.26px]', 'transition-colors', '[--icon-fill-active:var(--color-green-300)]'], + }, + + variants: { + variant: { + default: { + icon: ['[--icon-stroke:var(--color-black)]'], + }, + inverse: { + icon: ['[--icon-stroke:var(--color-white)]'], + }, + }, + }, + + defaultVariants: { + variant: 'default', }, }); From 43a694e9ed2d4a64f47ff58e51fe216635a6cb2f Mon Sep 17 00:00:00 2001 From: YeBeenChoi Date: Tue, 20 Jan 2026 21:53:54 +0900 Subject: [PATCH 22/22] =?UTF-8?q?feat:=20Playground=EC=97=90=20FavoriteBut?= =?UTF-8?q?ton=20inverse=20=EC=98=88=EC=8B=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/playground.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/playground.tsx b/src/pages/playground.tsx index b4fc632b..c9e29554 100644 --- a/src/pages/playground.tsx +++ b/src/pages/playground.tsx @@ -125,7 +125,12 @@ export default function Playground() { {/* Favorite Button */}

FavoriteButton

- +
+ +
+ +
+
{/* BannerCard */}