From a61f25d3b79d87dc656702026f7bf7e98f4515d9 Mon Sep 17 00:00:00 2001 From: hin6150 Date: Sun, 19 May 2024 18:24:38 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20```List```=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=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 --- apps/web/src/app/page.tsx | 3 +- .../src/components/List/List.css.ts | 54 ++++++++++ .../src/components/List/List.spec.tsx | 11 ++ .../src/components/List/List.stories.tsx | 102 ++++++++++++++++++ .../src/components/List/List.tsx | 33 ++++++ .../src/components/List/index.ts | 2 + packages/design-system/src/index.ts | 1 + packages/design-system/src/tokens/colors.ts | 1 + 8 files changed, 206 insertions(+), 1 deletion(-) create mode 100644 packages/design-system/src/components/List/List.css.ts create mode 100644 packages/design-system/src/components/List/List.spec.tsx create mode 100644 packages/design-system/src/components/List/List.stories.tsx create mode 100644 packages/design-system/src/components/List/List.tsx create mode 100644 packages/design-system/src/components/List/index.ts diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 730397d..16d2fe3 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -1,6 +1,6 @@ 'use client' -import { Button, Text } from '@vook-client/design-system' +import { Button, Text, List } from '@vook-client/design-system' import { TestComponent } from '@/components/TestComponent' @@ -12,6 +12,7 @@ const Home = () => {
Hello world! 프리텐다드 + Label

API_URL: {API_URL}

diff --git a/packages/design-system/src/components/List/List.css.ts b/packages/design-system/src/components/List/List.css.ts new file mode 100644 index 0000000..4c773f1 --- /dev/null +++ b/packages/design-system/src/components/List/List.css.ts @@ -0,0 +1,54 @@ +import { RecipeVariants, recipe } from '@vanilla-extract/recipes' + +import { vars } from '../../styles/global.css' + +export const list = recipe({ + base: { + padding: '16px 12px', + boxSizing: 'border-box', + }, + variants: { + page: { + table: { + width: 220, + color: vars.colors['semantic-primary-normal'], + }, + synonym: { + width: 220, + color: vars.colors['semantic-label-alternative'], + }, + descrption: { + width: 480, + paddingRight: 100, + }, + title: { + width: 220, + backgroundColor: vars.colors['component-alternative'], + color: vars.colors['semantic-label-alternative'], + }, + }, + search: { + table: { + width: 120, + padding: '8px 12px', + color: vars.colors['semantic-primary-normal'], + }, + synonym: { + width: 120, + padding: '8px 12px', + }, + descrption: { + width: 340, + padding: '8px, 40px, 8px, 12px', + }, + title: { + width: 120, + padding: '4px 12px', + backgroundColor: vars.colors['palette-primary-50'], + color: vars.colors['semantic-label-normal'], + }, + }, + }, +}) + +export type ListVariants = RecipeVariants diff --git a/packages/design-system/src/components/List/List.spec.tsx b/packages/design-system/src/components/List/List.spec.tsx new file mode 100644 index 0000000..05a0a55 --- /dev/null +++ b/packages/design-system/src/components/List/List.spec.tsx @@ -0,0 +1,11 @@ +import { render, screen } from '@testing-library/react' + +import { List } from '.' + +describe('List', () => { + it('List는 정상적으로 렌더링 된다.', () => { + render(Text) + + expect(screen.getByText('List')).toBeInTheDocument() + }) +}) diff --git a/packages/design-system/src/components/List/List.stories.tsx b/packages/design-system/src/components/List/List.stories.tsx new file mode 100644 index 0000000..806d345 --- /dev/null +++ b/packages/design-system/src/components/List/List.stories.tsx @@ -0,0 +1,102 @@ +import { Meta, StoryObj } from '@storybook/react' + +import { List, ListType } from './List' + +const LIST_VARIANTS: Array = ['page', 'search'] +const LIST_KINDS: Array = [ + 'description', + 'synonym', + 'table', + 'title', +] + +// List 컴포넌트의 Meta 정보 정의 +const meta = { + title: 'List', + component: List, + tags: ['autodocs'], + args: { + children: 'List', + variant: 'page', + kind: 'description', + }, + argTypes: { + children: { + control: 'text', + description: '라벨 텍스트', + }, + variant: { + options: LIST_VARIANTS, + control: { type: 'select' }, + description: '라벨 타입', + }, + kind: { + options: LIST_KINDS, + control: { type: 'select' }, + description: '라벨 타입', + }, + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Playground: Story = {} + +export const Type: Story = { + argTypes: { + variant: { + table: { + disable: true, + }, + }, + kind: { + table: { + disable: true, + }, + }, + }, + render: (props) => { + return ( +
    +
  • +

    Label

    + + {props.children} + + + {props.children} + +
    • +
  • +

    Text

    + + {props.children} + + + {props.children} + +
    • +
  • +

    Descrption

    + + {props.children} + + + {props.children} + +
    • +
  • +

    Label

    + + {props.children} + + + {props.children} + +
    • +
+ ) + }, +} diff --git a/packages/design-system/src/components/List/List.tsx b/packages/design-system/src/components/List/List.tsx new file mode 100644 index 0000000..4a63c2a --- /dev/null +++ b/packages/design-system/src/components/List/List.tsx @@ -0,0 +1,33 @@ +import { PropsWithChildren } from 'react' + +import { Text, TextProps } from '../Text' + +import { list } from './List.css' + +export interface ListType { + variant?: 'page' | 'search' + kind?: 'table' | 'synonym' | 'description' | 'title' +} + +export type ListProps = PropsWithChildren & ListType + +export const List = ({ + variant = 'page', + kind = 'description', + children, + ...rest +}: ListProps) => { + const textType: TextProps['type'] = variant === 'page' ? 'body-2' : 'label' + const fontWeight: TextProps['fontWeight'] = + variant === 'page' && (kind === 'table' || kind === 'title') + ? 'medium' + : 'regular' + + return ( +
+ + {children} + +
+ ) +} diff --git a/packages/design-system/src/components/List/index.ts b/packages/design-system/src/components/List/index.ts new file mode 100644 index 0000000..1c09f84 --- /dev/null +++ b/packages/design-system/src/components/List/index.ts @@ -0,0 +1,2 @@ +export type { ListProps } from './List' +export { List } from './List' diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index af17e2a..a4c429c 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -2,6 +2,7 @@ export type { ButtonProps } from './components/Button' export { Button } from './components/Button' +export { List } from './components/List' export type { TextProps } from './components/Text' export { Text } from './components/Text' export type { Sprinkles } from './styles/sprinkles.css' diff --git a/packages/design-system/src/tokens/colors.ts b/packages/design-system/src/tokens/colors.ts index 9588552..c7f2895 100644 --- a/packages/design-system/src/tokens/colors.ts +++ b/packages/design-system/src/tokens/colors.ts @@ -23,6 +23,7 @@ const common = { const palette = { /* Primary */ + 'palette-primary-50': '#EFEFFC', 'palette-primary-100': '#CDCCF7', 'palette-primary-200': '#B4B5F3', 'palette-primary-300': '#9292EE', From 8f8518c84c5da2ecaca7c8b1f93e13bce381713c Mon Sep 17 00:00:00 2001 From: hin6150 Date: Sun, 19 May 2024 20:45:24 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20```Icon```=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=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 --- apps/web/public/Icons/backward.svg | 3 + apps/web/public/Icons/blog.svg | 8 ++ apps/web/public/Icons/close-circle.svg | 4 + apps/web/public/Icons/close.svg | 3 + apps/web/public/Icons/instagram.svg | 5 ++ apps/web/public/Icons/plus.svg | 3 + apps/web/public/Icons/search.svg | 3 + apps/web/public/Icons/symbol.svg | 5 ++ apps/web/public/Icons/typo.svg | 6 ++ apps/web/src/app/page.tsx | 3 +- apps/workshop/.storybook/main.ts | 1 + apps/workshop/public/Icons/backward.svg | 3 + apps/workshop/public/Icons/blog.svg | 8 ++ apps/workshop/public/Icons/close-circle.svg | 4 + apps/workshop/public/Icons/close.svg | 3 + apps/workshop/public/Icons/instagram.svg | 5 ++ apps/workshop/public/Icons/plus.svg | 3 + apps/workshop/public/Icons/search.svg | 3 + apps/workshop/public/Icons/symbol.svg | 5 ++ apps/workshop/public/Icons/typo.svg | 6 ++ .../design-system/src/assets/Icon/Icon.css.ts | 29 +++++++ .../src/assets/Icon/Icon.spec.tsx | 11 +++ .../src/assets/Icon/Icon.stories.tsx | 77 +++++++++++++++++++ .../design-system/src/assets/Icon/Icon.tsx | 31 ++++++++ .../design-system/src/assets/Icon/index.ts | 2 + .../src/components/List/List.tsx | 6 +- packages/design-system/src/index.ts | 3 + 27 files changed, 240 insertions(+), 3 deletions(-) create mode 100644 apps/web/public/Icons/backward.svg create mode 100644 apps/web/public/Icons/blog.svg create mode 100644 apps/web/public/Icons/close-circle.svg create mode 100644 apps/web/public/Icons/close.svg create mode 100644 apps/web/public/Icons/instagram.svg create mode 100644 apps/web/public/Icons/plus.svg create mode 100644 apps/web/public/Icons/search.svg create mode 100644 apps/web/public/Icons/symbol.svg create mode 100644 apps/web/public/Icons/typo.svg create mode 100644 apps/workshop/public/Icons/backward.svg create mode 100644 apps/workshop/public/Icons/blog.svg create mode 100644 apps/workshop/public/Icons/close-circle.svg create mode 100644 apps/workshop/public/Icons/close.svg create mode 100644 apps/workshop/public/Icons/instagram.svg create mode 100644 apps/workshop/public/Icons/plus.svg create mode 100644 apps/workshop/public/Icons/search.svg create mode 100644 apps/workshop/public/Icons/symbol.svg create mode 100644 apps/workshop/public/Icons/typo.svg create mode 100644 packages/design-system/src/assets/Icon/Icon.css.ts create mode 100644 packages/design-system/src/assets/Icon/Icon.spec.tsx create mode 100644 packages/design-system/src/assets/Icon/Icon.stories.tsx create mode 100644 packages/design-system/src/assets/Icon/Icon.tsx create mode 100644 packages/design-system/src/assets/Icon/index.ts diff --git a/apps/web/public/Icons/backward.svg b/apps/web/public/Icons/backward.svg new file mode 100644 index 0000000..c5f1d86 --- /dev/null +++ b/apps/web/public/Icons/backward.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/web/public/Icons/blog.svg b/apps/web/public/Icons/blog.svg new file mode 100644 index 0000000..bd6ba3e --- /dev/null +++ b/apps/web/public/Icons/blog.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/web/public/Icons/close-circle.svg b/apps/web/public/Icons/close-circle.svg new file mode 100644 index 0000000..b59d175 --- /dev/null +++ b/apps/web/public/Icons/close-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/web/public/Icons/close.svg b/apps/web/public/Icons/close.svg new file mode 100644 index 0000000..bc053ff --- /dev/null +++ b/apps/web/public/Icons/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/web/public/Icons/instagram.svg b/apps/web/public/Icons/instagram.svg new file mode 100644 index 0000000..ef79d4a --- /dev/null +++ b/apps/web/public/Icons/instagram.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/web/public/Icons/plus.svg b/apps/web/public/Icons/plus.svg new file mode 100644 index 0000000..8c150be --- /dev/null +++ b/apps/web/public/Icons/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/web/public/Icons/search.svg b/apps/web/public/Icons/search.svg new file mode 100644 index 0000000..4d4ce4e --- /dev/null +++ b/apps/web/public/Icons/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/web/public/Icons/symbol.svg b/apps/web/public/Icons/symbol.svg new file mode 100644 index 0000000..0706f09 --- /dev/null +++ b/apps/web/public/Icons/symbol.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/web/public/Icons/typo.svg b/apps/web/public/Icons/typo.svg new file mode 100644 index 0000000..04ff31f --- /dev/null +++ b/apps/web/public/Icons/typo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 16d2fe3..9d37cbf 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -1,6 +1,6 @@ 'use client' -import { Button, Text, List } from '@vook-client/design-system' +import { Button, Text, List, Icon } from '@vook-client/design-system' import { TestComponent } from '@/components/TestComponent' @@ -13,6 +13,7 @@ const Home = () => { Hello world! 프리텐다드 Label +

API_URL: {API_URL}

diff --git a/apps/workshop/.storybook/main.ts b/apps/workshop/.storybook/main.ts index 05d8823..882f921 100644 --- a/apps/workshop/.storybook/main.ts +++ b/apps/workshop/.storybook/main.ts @@ -76,6 +76,7 @@ const config: StorybookConfig = { docs: { autodocs: 'tag', }, + staticDirs: ['../public'], async viteFinal(config) { return mergeConfig(config, { plugins: [require('@vanilla-extract/vite-plugin').vanillaExtractPlugin()], diff --git a/apps/workshop/public/Icons/backward.svg b/apps/workshop/public/Icons/backward.svg new file mode 100644 index 0000000..c5f1d86 --- /dev/null +++ b/apps/workshop/public/Icons/backward.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/workshop/public/Icons/blog.svg b/apps/workshop/public/Icons/blog.svg new file mode 100644 index 0000000..bd6ba3e --- /dev/null +++ b/apps/workshop/public/Icons/blog.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/workshop/public/Icons/close-circle.svg b/apps/workshop/public/Icons/close-circle.svg new file mode 100644 index 0000000..b59d175 --- /dev/null +++ b/apps/workshop/public/Icons/close-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/workshop/public/Icons/close.svg b/apps/workshop/public/Icons/close.svg new file mode 100644 index 0000000..bc053ff --- /dev/null +++ b/apps/workshop/public/Icons/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/workshop/public/Icons/instagram.svg b/apps/workshop/public/Icons/instagram.svg new file mode 100644 index 0000000..ef79d4a --- /dev/null +++ b/apps/workshop/public/Icons/instagram.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/workshop/public/Icons/plus.svg b/apps/workshop/public/Icons/plus.svg new file mode 100644 index 0000000..8c150be --- /dev/null +++ b/apps/workshop/public/Icons/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/workshop/public/Icons/search.svg b/apps/workshop/public/Icons/search.svg new file mode 100644 index 0000000..4d4ce4e --- /dev/null +++ b/apps/workshop/public/Icons/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/workshop/public/Icons/symbol.svg b/apps/workshop/public/Icons/symbol.svg new file mode 100644 index 0000000..0706f09 --- /dev/null +++ b/apps/workshop/public/Icons/symbol.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/workshop/public/Icons/typo.svg b/apps/workshop/public/Icons/typo.svg new file mode 100644 index 0000000..04ff31f --- /dev/null +++ b/apps/workshop/public/Icons/typo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/design-system/src/assets/Icon/Icon.css.ts b/packages/design-system/src/assets/Icon/Icon.css.ts new file mode 100644 index 0000000..1afb07d --- /dev/null +++ b/packages/design-system/src/assets/Icon/Icon.css.ts @@ -0,0 +1,29 @@ +import { RecipeVariants, recipe } from '@vanilla-extract/recipes' + +export const icon = recipe({ + base: { + display: 'flex', + width: 24, + height: 24, + alignItems: 'center', + justifyContent: 'center', + }, + variants: { + size: { + footer: { + width: 32, + height: 32, + }, + large: {}, + medium: {}, + small: { + width: 16, + height: 16, + }, + symbol: { width: 24, height: 24 }, + typo: { width: 60, height: 20 }, + }, + }, +}) + +export type IconVariants = RecipeVariants diff --git a/packages/design-system/src/assets/Icon/Icon.spec.tsx b/packages/design-system/src/assets/Icon/Icon.spec.tsx new file mode 100644 index 0000000..de0c920 --- /dev/null +++ b/packages/design-system/src/assets/Icon/Icon.spec.tsx @@ -0,0 +1,11 @@ +import { render, screen } from '@testing-library/react' + +import { Icon } from '.' + +describe('Icon', () => { + it('Icon은 정상적으로 렌더링 된다.', () => { + render() + + expect(screen.getByText('Icon')).toBeInTheDocument() + }) +}) diff --git a/packages/design-system/src/assets/Icon/Icon.stories.tsx b/packages/design-system/src/assets/Icon/Icon.stories.tsx new file mode 100644 index 0000000..b662363 --- /dev/null +++ b/packages/design-system/src/assets/Icon/Icon.stories.tsx @@ -0,0 +1,77 @@ +import { Meta, StoryObj } from '@storybook/react' + +import { Icon, IconProps, IconType } from './Icon' + +const ICON_NAME: Array = [ + 'backward', + 'blog', + 'close', + 'close-circle', + 'instagram', + 'plus', + 'search', + 'symbol', + 'typo', +] + +const ICON_SIZE: Array = [ + 'footer', + 'large', + 'medium', + 'small', + 'typo', + 'symbol', +] + +// List 컴포넌트의 Meta 정보 정의 +const meta = { + title: 'Icon', + component: Icon, + tags: ['autodocs'], + args: { + name: 'search', + size: 'large', + }, + argTypes: { + name: { + options: ICON_NAME, + control: { type: 'select' }, + description: '아이콘 이름', + }, + size: { + options: ICON_SIZE, + control: { type: 'select' }, + description: '아이콘 크기', + }, + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Playground: Story = {} + +export const Type: Story = { + argTypes: { + name: { + table: { + disable: true, + }, + }, + }, + render: (props) => { + return ( +
    + {ICON_NAME.map((iconName) => ( +
  • +

    {iconName} 아이콘

    + + {props.children} + +
    • + ))} +
+ ) + }, +} diff --git a/packages/design-system/src/assets/Icon/Icon.tsx b/packages/design-system/src/assets/Icon/Icon.tsx new file mode 100644 index 0000000..049dcbb --- /dev/null +++ b/packages/design-system/src/assets/Icon/Icon.tsx @@ -0,0 +1,31 @@ +import { HTMLAttributes } from 'react' + +import { IconVariants, icon } from './Icon.css' + +export interface IconType { + name?: + | 'backward' + | 'blog' + | 'close-circle' + | 'close' + | 'instagram' + | 'plus' + | 'search' + | 'symbol' + | 'typo' +} + +export type IconProps = HTMLAttributes & IconVariants & IconType + +export const Icon = ({ name = 'search', size = 'large' }: IconProps) => { + return ( +
+ {`This +
+ ) +} diff --git a/packages/design-system/src/assets/Icon/index.ts b/packages/design-system/src/assets/Icon/index.ts new file mode 100644 index 0000000..558c6a5 --- /dev/null +++ b/packages/design-system/src/assets/Icon/index.ts @@ -0,0 +1,2 @@ +export type { IconProps } from './Icon' +export { Icon } from './Icon' diff --git a/packages/design-system/src/components/List/List.tsx b/packages/design-system/src/components/List/List.tsx index 4a63c2a..9204bb2 100644 --- a/packages/design-system/src/components/List/List.tsx +++ b/packages/design-system/src/components/List/List.tsx @@ -1,4 +1,4 @@ -import { PropsWithChildren } from 'react' +import { HTMLAttributes, PropsWithChildren } from 'react' import { Text, TextProps } from '../Text' @@ -9,7 +9,9 @@ export interface ListType { kind?: 'table' | 'synonym' | 'description' | 'title' } -export type ListProps = PropsWithChildren & ListType +export type ListProps = HTMLAttributes & + PropsWithChildren & + ListType export const List = ({ variant = 'page', diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index a4c429c..c7148da 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -1,7 +1,10 @@ 'use client' +export type { IconProps } from './assets/Icon' +export { Icon } from './assets/Icon' export type { ButtonProps } from './components/Button' export { Button } from './components/Button' +export type { ListProps } from './components/List' export { List } from './components/List' export type { TextProps } from './components/Text' export { Text } from './components/Text' From aa159e1a045b4b7d1b3bd5964a6f93dedd789f51 Mon Sep 17 00:00:00 2001 From: hin6150 Date: Mon, 20 May 2024 00:33:10 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20```SearchBar```=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 --- apps/web/src/app/page.tsx | 10 +- .../design-system/src/assets/Icon/Icon.css.ts | 1 - .../src/assets/Icon/Icon.stories.tsx | 1 - .../src/components/SearchBar/SearchBar.css.ts | 93 ++++++++++++++ .../components/SearchBar/SearchBar.spec.tsx | 11 ++ .../SearchBar/SearchBar.stories.tsx | 42 +++++++ .../src/components/SearchBar/SearchBar.tsx | 115 ++++++++++++++++++ .../src/components/SearchBar/index.ts | 2 + packages/design-system/src/index.ts | 2 + packages/design-system/src/tokens/colors.ts | 1 + 10 files changed, 275 insertions(+), 3 deletions(-) create mode 100644 packages/design-system/src/components/SearchBar/SearchBar.css.ts create mode 100644 packages/design-system/src/components/SearchBar/SearchBar.spec.tsx create mode 100644 packages/design-system/src/components/SearchBar/SearchBar.stories.tsx create mode 100644 packages/design-system/src/components/SearchBar/SearchBar.tsx create mode 100644 packages/design-system/src/components/SearchBar/index.ts diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 9d37cbf..b635309 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -1,6 +1,7 @@ 'use client' -import { Button, Text, List, Icon } from '@vook-client/design-system' +import { Button, Text, List, Icon, SearchBar } from '@vook-client/design-system' +import { useState } from 'react' import { TestComponent } from '@/components/TestComponent' @@ -8,11 +9,18 @@ const API_URL = process.env.NEXT_PUBLIC_API_URL || 'https://dev.vook-api.seungyeop-lee.com' const Home = () => { + const [wordState, setWordState] = useState('') + return (
Hello world! 프리텐다드 Label + diff --git a/packages/design-system/src/assets/Icon/Icon.css.ts b/packages/design-system/src/assets/Icon/Icon.css.ts index 1afb07d..4c9ae9b 100644 --- a/packages/design-system/src/assets/Icon/Icon.css.ts +++ b/packages/design-system/src/assets/Icon/Icon.css.ts @@ -20,7 +20,6 @@ export const icon = recipe({ width: 16, height: 16, }, - symbol: { width: 24, height: 24 }, typo: { width: 60, height: 20 }, }, }, diff --git a/packages/design-system/src/assets/Icon/Icon.stories.tsx b/packages/design-system/src/assets/Icon/Icon.stories.tsx index b662363..01ae98c 100644 --- a/packages/design-system/src/assets/Icon/Icon.stories.tsx +++ b/packages/design-system/src/assets/Icon/Icon.stories.tsx @@ -20,7 +20,6 @@ const ICON_SIZE: Array = [ 'medium', 'small', 'typo', - 'symbol', ] // List 컴포넌트의 Meta 정보 정의 diff --git a/packages/design-system/src/components/SearchBar/SearchBar.css.ts b/packages/design-system/src/components/SearchBar/SearchBar.css.ts new file mode 100644 index 0000000..1930e38 --- /dev/null +++ b/packages/design-system/src/components/SearchBar/SearchBar.css.ts @@ -0,0 +1,93 @@ +import { RecipeVariants, recipe } from '@vanilla-extract/recipes' +import { style } from '@vanilla-extract/css' + +import { vars } from '../../styles/global.css' + +export const searchBarContainer = style({ + width: 580, + + backgroundColor: vars.colors['common-white'], + border: `1px solid ${vars.colors['semantic-line-normal']}`, + borderRadius: 6, + boxSizing: 'border-box', + ':hover': { + backgroundColor: vars.colors['component-normal'], + }, + ':focus-within': { + backgroundColor: vars.colors['common-white'], + }, +}) + +export const searchBar = recipe({ + base: { + display: 'flex', + height: 58, + justifyContent: 'center', + alignItems: 'center', + }, + variants: { + history: { + true: { + height: 44, + ':hover': { + cursor: 'pointer', + backgroundColor: vars.colors['component-alternative'], + }, + }, + }, + }, +}) + +export type SearchBarVariants = RecipeVariants + +export const iconContainer = recipe({ + base: { + flex: 1, + display: 'flex', + justifyContent: 'center', + }, + variants: { + click: { + true: { ':hover': { cursor: 'pointer' } }, + }, + visibile: { + true: { + visibility: 'visible', + }, + false: { + visibility: 'hidden', + }, + }, + }, +}) + +export const inputContainer = style({ + display: 'flex', + alignItems: 'center', + width: 440, + height: '100%', +}) + +export const inputBox = recipe({ + base: { + width: '100%', + outline: 'none', + border: 'none', + backgroundColor: 'inherit', + + fontSize: 18, + fontWeight: 500, + '::placeholder': { + color: vars.colors['semantic-label-assistive'], + }, + }, + variants: { + text: { + true: { + margin: 0, + fontSize: 16, + fontWeight: 400, + }, + }, + }, +}) diff --git a/packages/design-system/src/components/SearchBar/SearchBar.spec.tsx b/packages/design-system/src/components/SearchBar/SearchBar.spec.tsx new file mode 100644 index 0000000..37e0f84 --- /dev/null +++ b/packages/design-system/src/components/SearchBar/SearchBar.spec.tsx @@ -0,0 +1,11 @@ +import { render, screen } from '@testing-library/react' + +import { SearchBar } from '.' + +describe('List', () => { + it('List는 정상적으로 렌더링 된다.', () => { + render() + + expect(screen.getByText('SearchBar')).toBeInTheDocument() + }) +}) diff --git a/packages/design-system/src/components/SearchBar/SearchBar.stories.tsx b/packages/design-system/src/components/SearchBar/SearchBar.stories.tsx new file mode 100644 index 0000000..f183b22 --- /dev/null +++ b/packages/design-system/src/components/SearchBar/SearchBar.stories.tsx @@ -0,0 +1,42 @@ +import { Meta, StoryObj } from '@storybook/react' +import React, { useState } from 'react' + +import { SearchBar } from './SearchBar' + +// List 컴포넌트의 Meta 정보 정의 +const meta = { + title: 'SearchBar', + component: SearchBar, + tags: ['autodocs'], + args: { + // wordHistory: [], + // wordState: '', + // setWordState: '', + }, + argTypes: { + wordHistory: {}, + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Type: Story = { + argTypes: {}, + render: () => { + const [wordState, setWordState] = useState('') + return ( +
    +
  • +

    SearchBar

    + +
    • +
+ ) + }, +} diff --git a/packages/design-system/src/components/SearchBar/SearchBar.tsx b/packages/design-system/src/components/SearchBar/SearchBar.tsx new file mode 100644 index 0000000..490514c --- /dev/null +++ b/packages/design-system/src/components/SearchBar/SearchBar.tsx @@ -0,0 +1,115 @@ +import { HTMLAttributes, useState } from 'react' + +import { Icon } from '../../assets/Icon' +import { Text } from '../Text' + +import { + iconContainer, + inputBox, + inputContainer, + searchBar, + searchBarContainer, +} from './SearchBar.css' + +interface SearchBarType { + wordHistory: string[] + wordState: string + setWordState: React.Dispatch> +} +interface HistoryBarType { + word: string + // removeWordFromHistory: (word: string) => void +} + +export type SearchBarProps = HTMLAttributes & SearchBarType + +const HistoryBar = ({ word }: HistoryBarType) => { + const [isHovered, setIsHovered] = useState(false) + + return ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + onMouseDown={() => { + alert('검색한 단어:' + word) + }} + > +
+ +
+
+ {word} +
+
{ + e.stopPropagation() + e.preventDefault() + alert('삭제한 단어:' + word) + // removeWordFromHistory(word) + }} + > + +
+
+ ) +} + +export const SearchBar: React.FC = ({ + wordHistory, + wordState, + setWordState, +}) => { + const handleChange = (event: React.ChangeEvent) => { + setWordState(event.target.value) + } + // const removeWordFromHistory = (wordToRemove: string) => { + // setWordHistory((prev: string[]) => + // prev.filter((word) => word !== wordToRemove), + // ) + // } + + const [isFocused, setIsFocused] = useState(false) + + return ( +
setIsFocused(true)} + onBlur={() => { + setIsFocused(false) + }} + > +
+
+ +
+
+ +
+
{ + wordState !== '' && alert('입력한 단어:' + wordState) + setWordState('') + }} + > + +
+
+ + {isFocused && + wordHistory.map((word, index) => ( + + ))} +
+ ) +} diff --git a/packages/design-system/src/components/SearchBar/index.ts b/packages/design-system/src/components/SearchBar/index.ts new file mode 100644 index 0000000..f8e6724 --- /dev/null +++ b/packages/design-system/src/components/SearchBar/index.ts @@ -0,0 +1,2 @@ +export type { SearchBarProps } from './SearchBar' +export { SearchBar } from './SearchBar' diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index c7148da..9558445 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -6,6 +6,8 @@ export type { ButtonProps } from './components/Button' export { Button } from './components/Button' export type { ListProps } from './components/List' export { List } from './components/List' +export type { SearchBarProps } from './components/SearchBar' +export { SearchBar } from './components/SearchBar' export type { TextProps } from './components/Text' export { Text } from './components/Text' export type { Sprinkles } from './styles/sprinkles.css' diff --git a/packages/design-system/src/tokens/colors.ts b/packages/design-system/src/tokens/colors.ts index c7f2895..208046a 100644 --- a/packages/design-system/src/tokens/colors.ts +++ b/packages/design-system/src/tokens/colors.ts @@ -6,6 +6,7 @@ const semantic = { /* label */ 'semantic-label-title': '#161719', 'semantic-label-normal': '#161719', + 'semantic-label-assistive': 'rgba(22, 23, 25, 0.25)', 'semantic-label-alternative': 'rgba(22, 23, 25, 0.6)', 'semantic-label-disabled': 'rgba(22, 23, 25, 0.16)', /* line */ From 182fe453cf51d2712a65f0ea45fcd09eb79d86e4 Mon Sep 17 00:00:00 2001 From: hin6150 Date: Mon, 20 May 2024 19:13:21 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C,=20=EC=98=A4=ED=83=88=EC=9E=90=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20(#7)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/design-system/src/assets/Icon/Icon.spec.tsx | 2 +- packages/design-system/src/components/List/List.css.ts | 4 ++-- packages/design-system/src/components/List/List.spec.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/design-system/src/assets/Icon/Icon.spec.tsx b/packages/design-system/src/assets/Icon/Icon.spec.tsx index de0c920..92e5068 100644 --- a/packages/design-system/src/assets/Icon/Icon.spec.tsx +++ b/packages/design-system/src/assets/Icon/Icon.spec.tsx @@ -6,6 +6,6 @@ describe('Icon', () => { it('Icon은 정상적으로 렌더링 된다.', () => { render() - expect(screen.getByText('Icon')).toBeInTheDocument() + expect(screen.getByAltText('Icon')).toBeInTheDocument() }) }) diff --git a/packages/design-system/src/components/List/List.css.ts b/packages/design-system/src/components/List/List.css.ts index 4c773f1..0469f92 100644 --- a/packages/design-system/src/components/List/List.css.ts +++ b/packages/design-system/src/components/List/List.css.ts @@ -17,7 +17,7 @@ export const list = recipe({ width: 220, color: vars.colors['semantic-label-alternative'], }, - descrption: { + description: { width: 480, paddingRight: 100, }, @@ -37,7 +37,7 @@ export const list = recipe({ width: 120, padding: '8px 12px', }, - descrption: { + description: { width: 340, padding: '8px, 40px, 8px, 12px', }, diff --git a/packages/design-system/src/components/List/List.spec.tsx b/packages/design-system/src/components/List/List.spec.tsx index 05a0a55..2eb483e 100644 --- a/packages/design-system/src/components/List/List.spec.tsx +++ b/packages/design-system/src/components/List/List.spec.tsx @@ -4,7 +4,7 @@ import { List } from '.' describe('List', () => { it('List는 정상적으로 렌더링 된다.', () => { - render(Text) + render(List) expect(screen.getByText('List')).toBeInTheDocument() })