From b6506d1180ab8eaba2f293c07fd5d6542c97f3bc Mon Sep 17 00:00:00 2001 From: dladncks1217 Date: Thu, 15 Feb 2024 16:05:47 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20Toggle=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=9E=AC=EA=B5=AC=EC=B6=95=20=EB=B0=8F=20?= =?UTF-8?q?npm=20v1.3.9=20=EB=B0=B0=ED=8F=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../hang-log-design-system/package.json | 2 +- .../src/components/NewToggle/Item.tsx | 23 +++++++++ .../src/components/NewToggle/List.style.ts | 28 +++++++++++ .../src/components/NewToggle/List.tsx | 48 +++++++++++++++++++ .../src/components/NewToggle/NewToggle.tsx | 35 ++++++++++++++ .../hang-log-design-system/src/index.tsx | 2 + .../src/stories/NewToggle.stories.tsx | 43 +++++++++++++++++ .../public/mockServiceWorker.js | 2 +- 8 files changed, 181 insertions(+), 2 deletions(-) create mode 100644 frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/Item.tsx create mode 100644 frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/List.style.ts create mode 100644 frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/List.tsx create mode 100644 frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/NewToggle.tsx create mode 100644 frontend-monorepo/packages/hang-log-design-system/src/stories/NewToggle.stories.tsx diff --git a/frontend-monorepo/packages/hang-log-design-system/package.json b/frontend-monorepo/packages/hang-log-design-system/package.json index 4c3bebf4c..c664c4877 100644 --- a/frontend-monorepo/packages/hang-log-design-system/package.json +++ b/frontend-monorepo/packages/hang-log-design-system/package.json @@ -1,6 +1,6 @@ { "name": "hang-log-design-system", - "version": "1.3.8", + "version": "1.3.9", "description": "행록 디자인 시스템", "homepage": "https://github.com/hang-log-design-system/design-system", "main": "dist/index.js", diff --git a/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/Item.tsx b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/Item.tsx new file mode 100644 index 000000000..715a745ea --- /dev/null +++ b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/Item.tsx @@ -0,0 +1,23 @@ +import type { ForwardedRef, PropsWithChildren } from 'react'; +import { useContext, forwardRef } from 'react'; +import { NewToggleContext } from '@components/NewToggle/NewToggle'; + +export interface ItemProps extends PropsWithChildren { + toggleKey: number | string; +} + +const ToggleItem = ({ children, toggleKey }: ItemProps, ref?: ForwardedRef) => { + const context = useContext(NewToggleContext); + + if (!context) throw new Error('NewToggle 컴포넌트가 Wrapping되어있지 않습니다.'); + + const { selectKey } = context; + + return ( +
+ {children} +
+ ); +}; + +export default forwardRef(ToggleItem); diff --git a/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/List.style.ts b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/List.style.ts new file mode 100644 index 000000000..f8ec38d32 --- /dev/null +++ b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/List.style.ts @@ -0,0 +1,28 @@ +import { css } from '@emotion/react'; + +import { Theme } from '@styles/Theme'; + +export const getListStyling = (isSelected: boolean) => + css({ + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + + padding: '8px 12px', + border: `1px solid ${isSelected ? Theme.color.blue700 : Theme.color.gray200}`, + + backgroundColor: isSelected ? Theme.color.blue100 : Theme.color.white, + + fontSize: Theme.text.small.fontSize, + lineHeight: Theme.text.small.lineHeight, + color: isSelected ? Theme.color.blue700 : Theme.color.gray600, + + transition: `all .2s ease-in`, + + cursor: 'pointer', + + '&:hover': { + color: isSelected ? Theme.color.blue700 : Theme.color.gray700, + backgroundColor: isSelected ? Theme.color.blue200 : Theme.color.gray100, + }, + }); diff --git a/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/List.tsx b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/List.tsx new file mode 100644 index 000000000..6bc765918 --- /dev/null +++ b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/List.tsx @@ -0,0 +1,48 @@ +import type { ComponentPropsWithRef, ForwardedRef, KeyboardEvent } from 'react'; +import { useContext, forwardRef } from 'react'; + +import { getListStyling } from '@components/NewToggle/List.style'; +import { NewToggleContext } from './NewToggle'; + +export interface ToggleProps extends ComponentPropsWithRef<'li'> { + toggleKey: number | string; + text: string; +} + +const List = ( + { toggleKey, text, ...attributes }: ToggleProps, + ref?: ForwardedRef +) => { + const context = useContext(NewToggleContext); + + if (!context) throw new Error('NewToggle 컴포넌트가 Wrapping되어있지 않습니다.'); + + const { selectKey, handleSelect } = context; + + const handleEnterKeyPress = (event: KeyboardEvent) => { + if (event.key === 'Enter') { + handleSelect(toggleKey); + } + }; + + return ( +
  • handleSelect(toggleKey)} + onKeyDown={handleEnterKeyPress} + {...attributes} + > + {text} +
    • + ); +}; + +export default forwardRef(List); diff --git a/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/NewToggle.tsx b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/NewToggle.tsx new file mode 100644 index 000000000..c112b99b7 --- /dev/null +++ b/frontend-monorepo/packages/hang-log-design-system/src/components/NewToggle/NewToggle.tsx @@ -0,0 +1,35 @@ +import type { PropsWithChildren } from 'react'; +import { useMemo, createContext } from 'react'; +import { useSelect } from '@hooks/useSelect'; +import List from '@components/NewToggle/List'; +import Item from '@components/NewToggle/Item'; + +interface ToggleContextType { + selectKey: number | string; + handleSelect: (selectedId: number | string) => void; +} + +export interface NewToggleProps extends PropsWithChildren { + initialSelect?: number | string; +} + +export const NewToggleContext = createContext(null); + +const NewToggle = ({ initialSelect = 0, children }: NewToggleProps) => { + const { selected, handleSelectClick } = useSelect(initialSelect); + + const context = useMemo( + () => ({ + selectKey: selected, + handleSelect: handleSelectClick, + }), + [handleSelectClick, selected] + ); + + return {children}; +}; + +NewToggle.List = List; +NewToggle.Item = Item; + +export default NewToggle; diff --git a/frontend-monorepo/packages/hang-log-design-system/src/index.tsx b/frontend-monorepo/packages/hang-log-design-system/src/index.tsx index e426fa87d..a5ee7cf0b 100644 --- a/frontend-monorepo/packages/hang-log-design-system/src/index.tsx +++ b/frontend-monorepo/packages/hang-log-design-system/src/index.tsx @@ -43,6 +43,7 @@ import Textarea from '@components/Textarea/Textarea'; import Toast from '@components/Toast/Toast'; import Toggle from '@components/Toggle/Toggle'; import ToggleGroup from '@components/ToggleGroup/ToggleGroup'; +import NewToggle from '@components/NewToggle/NewToggle'; import { Theme } from '@styles/Theme'; @@ -56,6 +57,7 @@ export { Badge, Box, SwitchToggle, + NewToggle, Button, Calendar, Carousel, diff --git a/frontend-monorepo/packages/hang-log-design-system/src/stories/NewToggle.stories.tsx b/frontend-monorepo/packages/hang-log-design-system/src/stories/NewToggle.stories.tsx new file mode 100644 index 000000000..bd4df4efa --- /dev/null +++ b/frontend-monorepo/packages/hang-log-design-system/src/stories/NewToggle.stories.tsx @@ -0,0 +1,43 @@ +import { containerStyle } from '@stories/styles'; +import type { Meta, StoryObj } from '@storybook/react'; + +import NewToggle from '@components/NewToggle/NewToggle'; + +const meta = { + title: 'NewToggle', + component: NewToggle, + args: { + initialSelect: 'toggle1', + }, + argTypes: { + initialSelect: { control: 'string' }, + }, + decorators: [ + (Story) => ( +
      + +
    + ), + ], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: ({ ...args }) => ( + +
    NewToggle
    +
    + + + +
    +
    + 나는토글1 + 나는토글2 + 나는토글3 +
    +     + ), +}; diff --git a/frontend-monorepo/packages/hanglog-service/public/mockServiceWorker.js b/frontend-monorepo/packages/hanglog-service/public/mockServiceWorker.js index 51d85eeeb..36a992745 100644 --- a/frontend-monorepo/packages/hanglog-service/public/mockServiceWorker.js +++ b/frontend-monorepo/packages/hanglog-service/public/mockServiceWorker.js @@ -2,7 +2,7 @@ /* tslint:disable */ /** - * Mock Service Worker (1.3.2). + * Mock Service Worker (1.2.3). * @see https://github.com/mswjs/msw * - Please do NOT modify this file. * - Please do NOT serve this file on production.