refactor: Toggle 컴포넌트 재구축 및 npm v1.3.9 배포

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",

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<HTMLDivElement>) => {
+  const context = useContext(NewToggleContext);
+
+  if (!context) throw new Error('NewToggle 컴포넌트가 Wrapping되어있지 않습니다.');
+
+  const { selectKey } = context;
+
+  return (
+    <div ref={ref} style={{ display: selectKey === toggleKey ? 'block' : 'none' }}>
+      {children}
+    </div>
+  );
+};
+
+export default forwardRef(ToggleItem);

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,
+    },
+  });

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<HTMLLIElement>
+) => {
+  const context = useContext(NewToggleContext);
+
+  if (!context) throw new Error('NewToggle 컴포넌트가 Wrapping되어있지 않습니다.');
+
+  const { selectKey, handleSelect } = context;
+
+  const handleEnterKeyPress = (event: KeyboardEvent<HTMLLIElement>) => {
+    if (event.key === 'Enter') {
+      handleSelect(toggleKey);
+    }
+  };
+
+  return (
+    <li
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+      role="radio"
+      aria-label={`${text}로 토글할 수 있는 버튼입니다. ${
+        selectKey === toggleKey ? '이미 선택되어있습니다.' : ''
+      }`}
+      tabIndex={0}
+      ref={ref}
+      css={getListStyling(selectKey === toggleKey)}
+      aria-checked={selectKey === toggleKey}
+      onClick={() => handleSelect(toggleKey)}
+      onKeyDown={handleEnterKeyPress}
+      {...attributes}
+    >
+      {text}
+    </li>
+  );
+};
+
+export default forwardRef(List);

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<ToggleContextType | null>(null);
+
+const NewToggle = ({ initialSelect = 0, children }: NewToggleProps) => {
+  const { selected, handleSelectClick } = useSelect(initialSelect);
+
+  const context = useMemo(
+    () => ({
+      selectKey: selected,
+      handleSelect: handleSelectClick,
+    }),
+    [handleSelectClick, selected]
+  );
+
+  return <NewToggleContext.Provider value={context}>{children}</NewToggleContext.Provider>;
+};
+
+NewToggle.List = List;
+NewToggle.Item = Item;
+
+export default NewToggle;

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,

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) => (
+      <ul css={containerStyle}>
+        <Story />
+      </ul>
+    ),
+  ],
+} satisfies Meta<typeof NewToggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: ({ ...args }) => (
+    <NewToggle {...args}>
+      <h6>NewToggle</h6>
+      <div style={{ display: 'flex' }}>
+        <NewToggle.List text="Toggle 1" toggleKey="toggle1" />
+        <NewToggle.List text="Toggle 2" toggleKey="toggle2" />
+        <NewToggle.List text="Toggle 3" toggleKey="toggle3" />
+      </div>
+      <div>
+        <NewToggle.Item toggleKey="toggle1">나는토글1</NewToggle.Item>
+        <NewToggle.Item toggleKey="toggle2">나는토글2</NewToggle.Item>
+        <NewToggle.Item toggleKey="toggle3">나는토글3</NewToggle.Item>
+      </div>
+    </NewToggle>
+  ),
+};

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.