feat(xdesign-story): button component 추가

services/xdesign-story/.storybook/main.ts

@@ -7,6 +7,7 @@ const config = {
         path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json'))),
         path.dirname(require.resolve(path.join('@storybook/addon-onboarding', 'package.json'))),
         path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json'))),
+        path.dirname(require.resolve(path.join('storybook-dark-mode', 'package.json'))),
     ],
     framework: {
         name: path.dirname(require.resolve(path.join('@storybook/nextjs', 'package.json'))),

services/xdesign-story/.storybook/preview.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
 import { StyledProvider } from '../src/style/StyledProvider';
+import { themes } from '@storybook/theming';
 
 const preview: Preview = {
     parameters: {
@@ -11,6 +12,13 @@ const preview: Preview = {
                 date: /Date$/,
             },
         },
+        darkMode: {
+            current: 'light',
+            dark: { ...themes.dark },
+            light: { ...themes.light },
+            stylePreview: true,
+            darkClass: 'dark',
+        },
     },
     decorators: [
         (Story) => (

services/xdesign-story/package.json

@@ -41,6 +41,7 @@
     "eslint": "8.13.0",
     "eslint-config-next": "12.1.5",
     "storybook": "^7.1.0-rc.2",
+    "storybook-dark-mode": "^3.0.1",
     "typescript": "4.6.3",
     "webpack": "^5.88.2"
   }

services/xdesign-story/src/components/Button/Button.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+    title: 'Components/Button',
+    component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Default: Story = {
+    args: { children: 'Enabled', disabled: true },
+};

services/xdesign-story/src/components/Button/Button.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { ColorToken, Palette } from '@/foundations/Color/Palette';
+import { Icon } from '@/foundations/Icon';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { ButtonVarientType, ButtonKindType, ButtonProps } from './Button.types';
+import { ThemeType } from '@/foundations/Color/Theme';
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+    ({ varient, kind, icon, children, ...props }, ref) => {
+        return (
+            <Layout ref={ref} varient={varient} kind={kind} {...props}>
+                {children}
+                <Icon iconName={icon} size={24} color={iconColor(kind, varient)} />
+            </Layout>
+        );
+    },
+);
+
+export const Layout = styled.button<ButtonProps>`
+    display: flex;
+    align-items: center;
+    text-align: center;
+    gap: 8px;
+    outline: none;
+    border: 0 solid transparent;
+    border-radius: 12px;
+    padding: 12px 16px;
+    ${({ theme }) => theme.fontStyle.Body.Large};
+    font-weight: ${({ theme }) => theme.fontWeight.medium};
+    ${({ kind = 'filled', varient = 'primary', theme }) =>
+        kindVarient(kind, varient, theme.themeColor)};
+    cursor: pointer;
+    &:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+    }
+`;
+
+const kindVarient = (kind: ButtonKindType, varient: ButtonVarientType, themeColor: ThemeType) => {
+    switch (kind) {
+        case 'filled':
+            return css`
+                color: ${themeColor.OnPrimary};
+                background-color: ${themeColor.Primary};
+                &:active {
+                    opacity: 0.9;
+                }
+            `;
+        case 'outlined':
+            return css`
+                color: ${themeColor.Primary};
+                background-color: ${themeColor.OnPrimary};
+                border: 1px solid ${themeColor.Primary};
+                &:active {
+                    background-color: ${themeColor.PrimaryContainer};
+                }
+            `;
+        case 'text':
+            return css`
+                color: ${themeColor.OnSurface};
+                background-color: transparent;
+                &:active {
+                    background-color: ${themeColor.PrimaryContainer};
+                }
+            `;
+    }
+};
+
+const iconColor = (
+    kind: ButtonKindType = 'filled',
+    varient: ButtonVarientType = 'primary',
+): ColorToken => {
+    switch (kind) {
+        case 'filled':
+            return `${varient}100`;
+        case 'outlined':
+            return `${varient}60`;
+        case 'text':
+            return `${varient}0`;
+        default:
+            return `${varient}100`;
+    }
+};

services/xdesign-story/src/components/Button/Button.types.ts

@@ -0,0 +1,13 @@
+import { IconName } from '@/foundations/Icon/assets';
+import { ChildrenProps } from '@/types/ComponentsProps';
+import { ButtonHTMLAttributes } from 'react';
+
+export type ButtonVarientType = 'primary' | 'secondary' | 'tertiary';
+
+export type ButtonKindType = 'filled' | 'outlined' | 'text';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, ChildrenProps {
+    varient?: ButtonVarientType;
+    kind?: ButtonKindType;
+    icon?: IconName;
+}

services/xdesign-story/src/components/Button/Chip/Chip.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Chip } from './Chip';
+
+const meta: Meta<typeof Chip> = {
+    title: 'Components/Chip',
+    component: Chip,
+};
+
+export default meta;
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {
+    args: { children: 'Enabled', disabled: false },
+};

services/xdesign-story/src/components/Button/Chip/Chip.tsx

@@ -0,0 +1,60 @@
+import { ColorToken } from '@/foundations/Color/Palette';
+import { ThemeKeyType, ThemeType } from '@/foundations/Color/Theme';
+import { Icon } from '@/foundations/Icon';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import React from 'react';
+import { Layout } from '../Button';
+import { ChipKindType, ChipProps } from './Chip.types';
+
+export const Chip = React.forwardRef<HTMLButtonElement, ChipProps>(
+    ({ kind = 'filled', leftIcon, rightIcon, children, ...props }, ref) => {
+        return (
+            <ChipLayout kind={kind} ref={ref} {...props}>
+                <Icon iconName={leftIcon} size={16} color={iconColor(kind)} />
+                {children}
+                <Icon iconName={rightIcon} size={16} color={iconColor(kind)} />
+            </ChipLayout>
+        );
+    },
+);
+
+const ChipLayout = styled(Layout)<ChipProps>`
+    padding: 4px;
+    gap: 4px;
+    border-radius: 4px;
+    ${({ theme }) => theme.fontStyle.Label.Medium};
+    font-weight: ${({ theme }) => theme.fontWeight.regular};
+    ${({ kind = 'filled', theme }) => kindVarient(kind, theme.themeColor)}
+`;
+
+const kindVarient = (kind: ChipKindType, themeColor: ThemeType) => {
+    switch (kind) {
+        case 'filled':
+            return css`
+                color: ${themeColor.OnSecondary};
+                background: ${themeColor.Secondary};
+            `;
+        case 'outlined':
+            return css`
+                color: ${themeColor.Secondary};
+                background-color: ${themeColor.OnSecondary};
+                border: 1px solid ${themeColor.Secondary};
+                &:active {
+                    color: ${themeColor.Secondary};
+                    background-color: ${themeColor.SecondaryContainer};
+                }
+            `;
+    }
+};
+
+const iconColor = (kind: ChipKindType): ColorToken | ThemeKeyType => {
+    switch (kind) {
+        case 'filled':
+            return `OnSecondary`;
+        case 'outlined':
+            return `Secondary`;
+        default:
+            return `OnSecondary`;
+    }
+};

services/xdesign-story/src/components/Button/Chip/Chip.types.ts

@@ -0,0 +1,10 @@
+import { IconName } from '@/foundations/Icon/assets';
+import { ButtonKindType, ButtonProps } from '../Button.types';
+
+export type ChipKindType = Exclude<ButtonKindType, 'text'>;
+
+export interface ChipProps extends Omit<ButtonProps, 'varient' | 'icon'> {
+    kind?: ChipKindType;
+    leftIcon?: IconName;
+    rightIcon?: IconName;
+}

services/xdesign-story/src/components/Button/Chip/index.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip';
+export type { ChipProps } from './Chip.types';

services/xdesign-story/src/components/Button/FloatingActionButton/FloatingActionButton.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FloatingActionButton } from './FloatingActionButton';
+
+const meta: Meta<typeof FloatingActionButton> = {
+    title: 'Components/FloatingActionButton',
+    component: FloatingActionButton,
+};
+
+export default meta;
+type Story = StoryObj<typeof FloatingActionButton>;
+
+export const Default: Story = {
+    args: { icon: 'FilledMenu', disabled: false, children: '' },
+};

services/xdesign-story/src/components/Button/FloatingActionButton/FloatingActionButton.tsx

@@ -0,0 +1,24 @@
+import { Icon } from '@/foundations/Icon';
+import styled from '@emotion/styled';
+import React from 'react';
+import { Layout } from '../Button';
+import { FloatingActionButtonProps } from './FloatingActionButton.types';
+
+export const FloatingActionButton = React.forwardRef<HTMLButtonElement, FloatingActionButtonProps>(
+    ({ icon, children, ...props }: FloatingActionButtonProps, ref) => {
+        return (
+            <FloatingActionButtonLayout ref={ref} {...props}>
+                <Icon iconName={icon} size={24} color="OnTertiary" />
+                {children}
+            </FloatingActionButtonLayout>
+        );
+    },
+);
+
+const FloatingActionButtonLayout = styled(Layout)<FloatingActionButtonProps>`
+    color: ${({ theme }) => theme.themeColor.OnTertiary};
+    border-radius: ${({ theme }) => theme.corner.Small}px;
+    background-color: ${({ theme }) => theme.themeColor.Tertiary};
+    box-shadow: 0 0 ${({ theme }) => theme.elevation.Low}px 0 rgba(0, 0, 0, 0.25);
+    padding: 16px;
+`;

services/xdesign-story/src/components/Button/FloatingActionButton/FloatingActionButton.types.ts

@@ -0,0 +1,3 @@
+import { ButtonProps } from '../Button.types';
+
+export interface FloatingActionButtonProps extends Omit<ButtonProps, 'varient' | 'kind'> {}

services/xdesign-story/src/components/Button/FloatingActionButton/index.ts

@@ -0,0 +1,2 @@
+export { FloatingActionButton } from './FloatingActionButton';
+export type { FloatingActionButtonProps } from './FloatingActionButton.types';

services/xdesign-story/src/components/Button/index.ts

@@ -0,0 +1,6 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button.types';
+export { FloatingActionButton } from './FloatingActionButton';
+export type { FloatingActionButtonProps } from './FloatingActionButton';
+export { Chip } from './Chip';
+export type { ChipProps } from './Chip';

services/xdesign-story/src/foundations/Icon/Icon.stories.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { styled, css } from '@storybook/theming';
+import { Icon } from './Icon';
+import { icons } from './assets';
+import { IconProps } from './Icon.types';
+
+const Meta = styled.div`
+    color: #666;
+    font-size: 12px;
+`;
+
+const Item = styled.li<{ minimal?: boolean }>`
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 0 1 16%;
+    min-width: 120px;
+    margin: 16px;
+
+    svg {
+        margin-right: 6px;
+        width: 14px;
+        height: 14px;
+    }
+
+    ${(props) =>
+        props.minimal &&
+        css`
+            flex: none;
+            min-width: auto;
+            padding: 0;
+            background: #fff;
+            margin: 16px;
+
+            svg {
+                display: block;
+                margin-right: 0;
+                width: 24px;
+                height: 24px;
+            }
+        `};
+`;
+
+const LabelList = styled.ul`
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+`;
+
+const NoLabelList = styled.ul`
+    display: flex;
+    flex-flow: row wrap;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+`;
+
+const Header = styled.h2`
+    font-size: 16px;
+    margin: 16px;
+`;
+
+export default {
+    title: 'Foundations/Icon',
+    component: Icon,
+};
+
+export const Basic = (args: IconProps) => <Icon {...args} />;
+Basic.args = { iconName: 'FilledArrowUp' };
+
+export const Labels = () => (
+    <>
+        <Header>{Object.keys(icons).length} icons</Header>
+        <LabelList>
+            {Object.keys(icons).map((key) => (
+                <Item key={key}>
+                    <Icon size={20} iconName={key as keyof typeof icons} aria-hidden />
+                    <Meta>{key}</Meta>
+                </Item>
+            ))}
+        </LabelList>
+    </>
+);
+
+export const NoLabels = () => (
+    <>
+        <Header>{Object.keys(icons).length} icons</Header>
+        <NoLabelList>
+            {Object.keys(icons).map((key) => (
+                <Item minimal key={key}>
+                    <Icon iconName={key as keyof typeof icons} aria-label={key} />
+                </Item>
+            ))}
+        </NoLabelList>
+    </>
+);