diff --git a/src/shared/assets/v2/svg/ArrowLeft.svg b/src/shared/assets/v2/svg/ArrowLeft.svg new file mode 100644 index 00000000..35d730fc --- /dev/null +++ b/src/shared/assets/v2/svg/ArrowLeft.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/assets/v2/svg/ArrowLeftFill.svg b/src/shared/assets/v2/svg/ArrowLeftFill.svg new file mode 100644 index 00000000..024a4805 --- /dev/null +++ b/src/shared/assets/v2/svg/ArrowLeftFill.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/assets/v2/svg/ArrowRight.svg b/src/shared/assets/v2/svg/ArrowRight.svg new file mode 100644 index 00000000..651c868a --- /dev/null +++ b/src/shared/assets/v2/svg/ArrowRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/assets/v2/svg/ArrowRightFill.svg b/src/shared/assets/v2/svg/ArrowRightFill.svg new file mode 100644 index 00000000..9d1b5fb2 --- /dev/null +++ b/src/shared/assets/v2/svg/ArrowRightFill.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/assets/v2/svg/ArrowUp.svg b/src/shared/assets/v2/svg/ArrowUp.svg new file mode 100644 index 00000000..4327717e --- /dev/null +++ b/src/shared/assets/v2/svg/ArrowUp.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/assets/v2/svg/ChevronDown.svg b/src/shared/assets/v2/svg/ChevronDown.svg new file mode 100644 index 00000000..3f91ffa7 --- /dev/null +++ b/src/shared/assets/v2/svg/ChevronDown.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/assets/v2/svg/ChevronUp.svg b/src/shared/assets/v2/svg/ChevronUp.svg new file mode 100644 index 00000000..f324b843 --- /dev/null +++ b/src/shared/assets/v2/svg/ChevronUp.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/assets/v2/svg/Close.svg b/src/shared/assets/v2/svg/Close.svg new file mode 100644 index 00000000..505c6dd0 --- /dev/null +++ b/src/shared/assets/v2/svg/Close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/assets/v2/svg/CloseFillBlack.svg b/src/shared/assets/v2/svg/CloseFillBlack.svg new file mode 100644 index 00000000..ee8254ba --- /dev/null +++ b/src/shared/assets/v2/svg/CloseFillBlack.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/assets/v2/svg/CloseFillGray.svg b/src/shared/assets/v2/svg/CloseFillGray.svg new file mode 100644 index 00000000..e78dcc1a --- /dev/null +++ b/src/shared/assets/v2/svg/CloseFillGray.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/shared/assets/v2/svg/DoubleStar.svg b/src/shared/assets/v2/svg/DoubleStar.svg new file mode 100644 index 00000000..a9613930 --- /dev/null +++ b/src/shared/assets/v2/svg/DoubleStar.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/assets/v2/svg/FlipHorizontal.svg b/src/shared/assets/v2/svg/FlipHorizontal.svg new file mode 100644 index 00000000..2bf9829b --- /dev/null +++ b/src/shared/assets/v2/svg/FlipHorizontal.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/assets/v2/svg/HeartFillColor.svg b/src/shared/assets/v2/svg/HeartFillColor.svg new file mode 100644 index 00000000..193f2e59 --- /dev/null +++ b/src/shared/assets/v2/svg/HeartFillColor.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/assets/v2/svg/HeartFillGray.svg b/src/shared/assets/v2/svg/HeartFillGray.svg new file mode 100644 index 00000000..c561641c --- /dev/null +++ b/src/shared/assets/v2/svg/HeartFillGray.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/assets/v2/svg/HeartStrokeGray.svg b/src/shared/assets/v2/svg/HeartStrokeGray.svg new file mode 100644 index 00000000..26cbb29b --- /dev/null +++ b/src/shared/assets/v2/svg/HeartStrokeGray.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/assets/v2/svg/HeartStrokeWhite.svg b/src/shared/assets/v2/svg/HeartStrokeWhite.svg new file mode 100644 index 00000000..1f5d213f --- /dev/null +++ b/src/shared/assets/v2/svg/HeartStrokeWhite.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/assets/v2/svg/IcnArrowLeftM.svg b/src/shared/assets/v2/svg/IcnArrowLeftM.svg deleted file mode 100644 index 6f6f93f8..00000000 --- a/src/shared/assets/v2/svg/IcnArrowLeftM.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/assets/v2/svg/IcnArrowLeftS.svg b/src/shared/assets/v2/svg/IcnArrowLeftS.svg deleted file mode 100644 index 9c76a328..00000000 --- a/src/shared/assets/v2/svg/IcnArrowLeftS.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/shared/assets/v2/svg/IcnArrowLeftXs.svg b/src/shared/assets/v2/svg/IcnArrowLeftXs.svg deleted file mode 100644 index a4dd038e..00000000 --- a/src/shared/assets/v2/svg/IcnArrowLeftXs.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/assets/v2/svg/IcnArrowRightS.svg b/src/shared/assets/v2/svg/IcnArrowRightS.svg deleted file mode 100644 index d7e62fd5..00000000 --- a/src/shared/assets/v2/svg/IcnArrowRightS.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/shared/assets/v2/svg/IcnArrowRightXs.svg b/src/shared/assets/v2/svg/IcnArrowRightXs.svg deleted file mode 100644 index 91243e22..00000000 --- a/src/shared/assets/v2/svg/IcnArrowRightXs.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/assets/v2/svg/IcnArrowUp.svg b/src/shared/assets/v2/svg/IcnArrowUp.svg deleted file mode 100644 index 89fde179..00000000 --- a/src/shared/assets/v2/svg/IcnArrowUp.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/assets/v2/svg/IcnChevronDown.svg b/src/shared/assets/v2/svg/IcnChevronDown.svg deleted file mode 100644 index 323a2a3a..00000000 --- a/src/shared/assets/v2/svg/IcnChevronDown.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/assets/v2/svg/IcnCloseFill.svg b/src/shared/assets/v2/svg/IcnCloseFill.svg deleted file mode 100644 index 28289d27..00000000 --- a/src/shared/assets/v2/svg/IcnCloseFill.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/shared/assets/v2/svg/IcnDelete.svg b/src/shared/assets/v2/svg/IcnDelete.svg deleted file mode 100644 index 7559b7e0..00000000 --- a/src/shared/assets/v2/svg/IcnDelete.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/assets/v2/svg/IcnDoubleStar.svg b/src/shared/assets/v2/svg/IcnDoubleStar.svg deleted file mode 100644 index fe3cd131..00000000 --- a/src/shared/assets/v2/svg/IcnDoubleStar.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/shared/assets/v2/svg/IcnFlipHorizontal.svg b/src/shared/assets/v2/svg/IcnFlipHorizontal.svg deleted file mode 100644 index d9811a27..00000000 --- a/src/shared/assets/v2/svg/IcnFlipHorizontal.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/shared/assets/v2/svg/IcnHeartColorL.svg b/src/shared/assets/v2/svg/IcnHeartColorL.svg deleted file mode 100644 index 0b36d8ef..00000000 --- a/src/shared/assets/v2/svg/IcnHeartColorL.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/assets/v2/svg/IcnHeartGrayL.svg b/src/shared/assets/v2/svg/IcnHeartGrayL.svg deleted file mode 100644 index 1882f0df..00000000 --- a/src/shared/assets/v2/svg/IcnHeartGrayL.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/assets/v2/svg/IcnHeartGrayXs.svg b/src/shared/assets/v2/svg/IcnHeartGrayXs.svg deleted file mode 100644 index 9f50623a..00000000 --- a/src/shared/assets/v2/svg/IcnHeartGrayXs.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/assets/v2/svg/IcnLink.svg b/src/shared/assets/v2/svg/IcnLink.svg deleted file mode 100644 index 205f415d..00000000 --- a/src/shared/assets/v2/svg/IcnLink.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/shared/assets/v2/svg/IcnPlusFill.svg b/src/shared/assets/v2/svg/IcnPlusFill.svg deleted file mode 100644 index 253b2ae4..00000000 --- a/src/shared/assets/v2/svg/IcnPlusFill.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/shared/assets/v2/svg/IcnRefresh.svg b/src/shared/assets/v2/svg/IcnRefresh.svg deleted file mode 100644 index a8a8f36a..00000000 --- a/src/shared/assets/v2/svg/IcnRefresh.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/assets/v2/svg/IcnSearch.svg b/src/shared/assets/v2/svg/IcnSearch.svg deleted file mode 100644 index d73987d7..00000000 --- a/src/shared/assets/v2/svg/IcnSearch.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/shared/assets/v2/svg/IcnViewDetail.svg b/src/shared/assets/v2/svg/IcnViewDetail.svg deleted file mode 100644 index 15e8843d..00000000 --- a/src/shared/assets/v2/svg/IcnViewDetail.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/shared/assets/v2/svg/IcnX.svg b/src/shared/assets/v2/svg/IcnX.svg deleted file mode 100644 index 9f50623a..00000000 --- a/src/shared/assets/v2/svg/IcnX.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/shared/assets/v2/svg/Link.svg b/src/shared/assets/v2/svg/Link.svg new file mode 100644 index 00000000..cabb9008 --- /dev/null +++ b/src/shared/assets/v2/svg/Link.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/assets/v2/svg/PlusFill.svg b/src/shared/assets/v2/svg/PlusFill.svg new file mode 100644 index 00000000..3113889d --- /dev/null +++ b/src/shared/assets/v2/svg/PlusFill.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/shared/assets/v2/svg/Profile.svg b/src/shared/assets/v2/svg/Profile.svg new file mode 100644 index 00000000..5a52a87b --- /dev/null +++ b/src/shared/assets/v2/svg/Profile.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/shared/assets/v2/svg/Refresh.svg b/src/shared/assets/v2/svg/Refresh.svg new file mode 100644 index 00000000..59a99024 --- /dev/null +++ b/src/shared/assets/v2/svg/Refresh.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/assets/v2/svg/Search.svg b/src/shared/assets/v2/svg/Search.svg new file mode 100644 index 00000000..3b45d168 --- /dev/null +++ b/src/shared/assets/v2/svg/Search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/assets/v2/svg/ViewDetail.svg b/src/shared/assets/v2/svg/ViewDetail.svg new file mode 100644 index 00000000..dc2f561c --- /dev/null +++ b/src/shared/assets/v2/svg/ViewDetail.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/shared/components/v2/button/IconButton.tsx b/src/shared/components/v2/button/IconButton.tsx new file mode 100644 index 00000000..7bf38768 --- /dev/null +++ b/src/shared/components/v2/button/IconButton.tsx @@ -0,0 +1,42 @@ +import clsx from 'clsx'; + +import { type IconName, type IconSize } from '../icon/Icon'; +import Icon from '../icon/Icon'; +import * as styles from '../icon/Icon.css'; + +export type IconButtonSize = 'S' | 'M' | 'L' | 'XL'; + +const ICON_BUTTON_SIZE: Record = { + S: '20', + M: '24', + L: '32', + XL: '40', +} as const; + +export interface IconButtonProps + extends Omit, 'children'> { + name: IconName; + size?: IconButtonSize; +} + +const IconButton = ({ + name, + size = 'S', + type = 'button', + className, + disabled = false, + ...props +}: IconButtonProps) => { + return ( + + ); +}; + +export default IconButton; diff --git a/src/shared/components/v2/icon/Icon.css.ts b/src/shared/components/v2/icon/Icon.css.ts new file mode 100644 index 00000000..785c8cfd --- /dev/null +++ b/src/shared/components/v2/icon/Icon.css.ts @@ -0,0 +1,38 @@ +import { styleVariants } from '@vanilla-extract/css'; +import { recipe } from '@vanilla-extract/recipes'; + +import { unitVars } from '@/shared/styles/tokensV2/unit.css'; + +export const iconSize = styleVariants({ + '12': { width: '1.2rem', height: '1.2rem' }, + '14': { width: '1.4rem', height: '1.4rem' }, + '16': { width: '1.6rem', height: '1.6rem' }, + '20': { width: '2rem', height: '2rem' }, + '24': { width: '2.4rem', height: '2.4rem' }, + '32': { width: '3.2rem', height: '3.2rem' }, + '40': { width: '4rem', height: '4rem' }, +}); + +export const iconButton = recipe({ + base: { + padding: unitVars.unit.gapPadding[100], + + selectors: { + // 비활성화 상태가 아닐 때만 active 효과 적용 + '&:not(:disabled):active': { + transform: 'scale(0.95)', + }, + }, + }, + variants: { + disabled: { + true: { opacity: 0.2, cursor: 'not-allowed' }, + }, + size: { + S: {}, + M: { padding: unitVars.unit.gapPadding['200'] }, + L: {}, + XL: {}, + }, + }, +}); diff --git a/src/shared/components/v2/icon/Icon.tsx b/src/shared/components/v2/icon/Icon.tsx new file mode 100644 index 00000000..5650d617 --- /dev/null +++ b/src/shared/components/v2/icon/Icon.tsx @@ -0,0 +1,65 @@ +import ArrowLeft from '@assets/v2/svg/ArrowLeft.svg?url'; +import ArrowLeftFill from '@assets/v2/svg/ArrowLeftFill.svg?url'; +import ArrowRight from '@assets/v2/svg/ArrowRight.svg?url'; +import ArrowRightFill from '@assets/v2/svg/ArrowRightFill.svg?url'; +import ArrowUp from '@assets/v2/svg/ArrowUp.svg?url'; +import ChevronDown from '@assets/v2/svg/ChevronDown.svg?url'; +import ChevronUp from '@assets/v2/svg/ChevronUp.svg?url'; +import Close from '@assets/v2/svg/Close.svg?url'; +import CloseFillBlack from '@assets/v2/svg/CloseFillBlack.svg?url'; +import CloseFillGray from '@assets/v2/svg/CloseFillGray.svg?url'; +import DoubleStar from '@assets/v2/svg/DoubleStar.svg?url'; +import FlipHorizontal from '@assets/v2/svg/FlipHorizontal.svg?url'; +import HeartFillColor from '@assets/v2/svg/HeartFillColor.svg?url'; +import HeartFillGray from '@assets/v2/svg/HeartFillGray.svg?url'; +import HeartStrokeGray from '@assets/v2/svg/HeartStrokeGray.svg?url'; +import HeartStrokeWhite from '@assets/v2/svg/HeartStrokeWhite.svg?url'; +import Link from '@assets/v2/svg/Link.svg?url'; +import PlusFill from '@assets/v2/svg/PlusFill.svg?url'; +import Profile from '@assets/v2/svg/Profile.svg?url'; +import Refresh from '@assets/v2/svg/Refresh.svg?url'; +import Search from '@assets/v2/svg/Search.svg?url'; +import ViewDetail from '@assets/v2/svg/ViewDetail.svg?url'; + +import * as styles from './Icon.css'; + +const IconsName = { + ArrowLeft, + ArrowLeftFill, + ArrowRight, + ArrowRightFill, + ArrowUp, + ChevronDown, + ChevronUp, + Close, + CloseFillBlack, + CloseFillGray, + DoubleStar, + FlipHorizontal, + HeartFillColor, + HeartFillGray, + HeartStrokeGray, + HeartStrokeWhite, + Link, + PlusFill, + Profile, + Refresh, + Search, + ViewDetail, +} as const; + +export type IconName = keyof typeof IconsName; +export type IconSize = '40' | '32' | '24' | '20' | '16' | '14' | '12'; + +export interface IconProps { + name: IconName; + size?: IconSize; +} + +const Icon = ({ name, size = '24' }: IconProps) => { + return ( + {name} + ); +}; + +export default Icon; diff --git a/src/stories/BtnIcon.stories.tsx b/src/stories/BtnIcon.stories.tsx new file mode 100644 index 00000000..a556ce83 --- /dev/null +++ b/src/stories/BtnIcon.stories.tsx @@ -0,0 +1,59 @@ +import BtnIcon from '@components/v2/button/IconButton'; + +import type { Meta, StoryObj } from '@storybook/react-vite'; + +const meta: Meta = { + title: 'Components/BtnIcon', + component: BtnIcon, +}; +export default meta; + +type Story = StoryObj; + +const sizes = ['S', 'M', 'L', 'XL'] as const; + +// BtnIcon - 전체 케이스 +export const AllCases: Story = { + render: () => ( +
+
+

+ BtnIcon - 전체 케이스 +

+ +
+
+

+ disabled=false / 누르는 동안 PRESSED +

+
+ {sizes.map((size) => ( + + ))} +
+
+ +
+

+ disabled=true +

+
+ {sizes.map((size) => ( + + ))} +
+
+
+
+
+ ), +};