Merge pull request #122 from Atractorrr/refactor/ds-#ATR-604

디자인 시스템 구축 (3차)
Atractorrr · Sep 24, 2024 · cdfe6da · cdfe6da
2 parents 13ce2c1 + f102f4d
commit cdfe6da
Show file tree

Hide file tree

Showing 30 changed files with 695 additions and 118 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -9,8 +9,6 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   rules: {
     'prettier/prettier': 'error',
-    'import/extensions': 'off',
-    'import/no-unresolved': 'off',
     'react/jsx-props-no-spreading': 'off',
     'react/react-in-jsx-scope': 'off',
     'no-console': 'error',

diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml
@@ -10,7 +10,7 @@ jobs:
     runs-on: macos-latest
     strategy:
       matrix:
-        command: ['lint', 'build', 'type']
+        command: ['build', 'type']
 
     steps:
       - name: Checkout

diff --git a/apps/service/.eslintrc.cjs b/apps/service/.eslintrc.cjs
@@ -14,6 +14,7 @@ module.exports = {
         some: ['nesting', 'id'],
       },
     ],
+    '@typescript-eslint/naming-convention': 'off',
   },
   settings: {
     'import/resolver': {

diff --git a/apps/service/src/features/profile-container/model/type/settingForm.ts b/apps/service/src/features/profile-container/model/type/settingForm.ts
@@ -1,19 +1,19 @@
-import { NEWSLETTER_CATEGORY } from '@/shared/constant'
+/* eslint-disable */
 
-type CheckFormDataWithNull = {
-  [K in keyof Omit<SettingForm, 'isNicknameChecked'>]: SettingForm[K] | null
-}
-
-type CheckFormDataWithoutNullType = {
-  [K in keyof Omit<SettingForm, 'isNicknameChecked'>]?: SettingForm[K]
-}
+import type { NewsletterCategory } from '@/shared/type'
 
-interface SettingForm {
+export interface SettingForm {
   nickname: string
-  interest: (keyof typeof NEWSLETTER_CATEGORY)[]
+  interest: NewsletterCategory[]
   isNicknameChecked: boolean
   userExpiration: number
   occupation: string
 }
 
-export type { CheckFormDataWithoutNullType, CheckFormDataWithNull, SettingForm }
+export type CheckFormDataWithNull = {
+  [K in Exclude<keyof SettingForm, 'isNicknameChecked'>]: SettingForm[K] | null
+}
+
+export type CheckFormDataWithoutNullType = Partial<
+  Omit<SettingForm, 'isNicknameChecked'>
+>
diff --git a/packages/design-system/packages/core/.eslintrc.cjs b/packages/design-system/packages/core/.eslintrc.cjs
@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['../../../../.eslintrc.cjs', 'plugin:storybook/recommended'],
+  extends: ['plugin:storybook/recommended', '../../../../.eslintrc.cjs'],
   parserOptions: {
     project: ['./tsconfig.json'],
     tsconfigRootDir: __dirname,

diff --git a/packages/design-system/packages/core/src/components/button/Button.stories.tsx b/packages/design-system/packages/core/src/components/button/Button.stories.tsx
@@ -69,6 +69,14 @@ const meta: Meta<typeof Button> = {
         defaultValue: { summary: 'undefined' },
       },
     },
+    withoutClickInteraction: {
+      description: '버튼 클릭 시 발생하는 클릭 인터랙션을 제거합니다.',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
     children: {
       description: '버튼에 표시할 내용을 입력합니다.',
       control: 'text',

diff --git a/packages/design-system/packages/core/src/components/button/Button.style.ts b/packages/design-system/packages/core/src/components/button/Button.style.ts
@@ -37,6 +37,10 @@ export const variants = {
     default: '',
     square: getButtonModifier('square'),
   },
+  clickInteraction: {
+    default: '',
+    without: getButtonModifier('without-click-interaction'),
+  },
 }
 
 export const buttonVariants = cva(buttonClassName, {

diff --git a/packages/design-system/packages/core/src/components/button/Button.tsx b/packages/design-system/packages/core/src/components/button/Button.tsx
@@ -14,10 +14,23 @@ interface ButtonProps
   size?: keyof ButtonVariants['size']
   round?: keyof ButtonVariants['round']
   square?: boolean
+  withoutClickInteraction?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, color, size, round, square, ...props }, ref) => (
+  (
+    {
+      className,
+      variant,
+      color,
+      size,
+      round,
+      square,
+      withoutClickInteraction,
+      ...props
+    },
+    ref,
+  ) => (
     <button
       type="button"
       className={cn(
@@ -27,6 +40,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           size,
           round,
           square: square ? 'square' : null,
+          clickInteraction: withoutClickInteraction ? 'without' : null,
         }),
         className,
       )}

diff --git a/packages/design-system/packages/core/src/components/button/_index.scss b/packages/design-system/packages/core/src/components/button/_index.scss
@@ -62,6 +62,10 @@
     margin-left: 0.25rem;
   }
 
+  &--without-click-interaction:active {
+    transform: translateY(0);
+  }
+
   &--red {
     color: variable.$ds-red-400;
 

diff --git a/packages/design-system/packages/core/src/components/dialog/Dialog.util.ts b/packages/design-system/packages/core/src/components/dialog/Dialog.util.ts
@@ -1,16 +1,7 @@
-export type FocusableElement =
-  | HTMLAnchorElement
-  | HTMLButtonElement
-  | HTMLInputElement
-  | HTMLTextAreaElement
-  | HTMLSelectElement
-  | HTMLDetailsElement
-
-export const selector =
-  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)'
+import { getFocusableElementAll } from '../../core'
 
 export function handleDialogA11y<T extends HTMLElement>(element: T | null) {
-  const focusableEls = element?.querySelectorAll<FocusableElement>(selector)
+  const focusableEls = getFocusableElementAll(element)
   if (focusableEls && focusableEls.length > 0) {
     const firstFocusableEl = focusableEls[0]
     const lastFocusableEl = focusableEls[focusableEls.length - 1]

diff --git a/packages/design-system/packages/core/src/components/input-description/_index.scss b/packages/design-system/packages/core/src/components/input-description/_index.scss
@@ -17,6 +17,11 @@
     color: variable.$ds-gray-400;
   }
 
+  *[class$='--size-xs'] &,
+  *[class$='--size-sm'] & {
+    margin-top: 0.5rem;
+    font-size: variable.$ds-font-size-200;
+  }
   *[class$='--size-lg'] & {
     margin-top: 1rem;
   }

diff --git a/packages/design-system/packages/core/src/components/search-input/SearchInput.stories.tsx b/packages/design-system/packages/core/src/components/search-input/SearchInput.stories.tsx
@@ -2,8 +2,9 @@
 
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
-import SearchInput from './SearchInput'
 import { $variable } from '../../token'
+import { Select } from '../select'
+import SearchInput from './SearchInput'
 
 const meta: Meta<typeof SearchInput> = {
   title: 'Inputs/SearchInput',
@@ -16,9 +17,9 @@ const meta: Meta<typeof SearchInput> = {
     size: {
       description: '인풋의 크기를 지정합니다.',
       control: 'select',
-      options: ['md', 'lg'],
+      options: ['xs', 'sm', 'md', 'lg'],
       table: {
-        type: { summary: ['md', 'lg'].join(' | ') },
+        type: { summary: ['xs', 'sm', 'md', 'lg'].join(' | ') },
         defaultValue: { summary: 'md' },
       },
     },
@@ -39,6 +40,15 @@ const meta: Meta<typeof SearchInput> = {
         defaultValue: { summary: 'undefined' },
       },
     },
+    clearOnSubmit: {
+      description:
+        'true로 지정 시 onSubmit 함수가 실행될 때 onClear 함수가 같이 실행됩니다.',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
     withBackground: {
       description: '인풋 배경색의 기본 상태를 지정합니다.',
       control: 'boolean',
@@ -48,13 +58,22 @@ const meta: Meta<typeof SearchInput> = {
       },
     },
     withClearButton: {
-      description: '검색어를 지우는 버튼을 렌더링합니다.',
+      description: 'clear button을 렌더링합니다.',
       control: 'boolean',
       table: {
         type: { summary: 'boolean' },
         defaultValue: { summary: 'undefined' },
       },
     },
+    submitButtonPosition: {
+      description: 'submit button의 위치를 지정합니다.',
+      control: 'select',
+      options: ['left', 'right'],
+      table: {
+        type: { summary: ['left', 'right'].join(' | ') },
+        defaultValue: { summary: 'left' },
+      },
+    },
     placeholder: {
       description: '인풋의 placeholder를 지정합니다.',
       control: 'text',
@@ -66,17 +85,27 @@ const meta: Meta<typeof SearchInput> = {
     onClear: {
       description: 'clear button을 클릭했을 때 실행시키는 이벤트를 지정합니다.',
       table: {
-        type: { summary: 'function' },
+        type: { summary: 'React.MouseEventHandler<HTMLButtonElement>' },
         defaultValue: { summary: 'undefined' },
       },
     },
-    onEnter: {
-      description: '엔터키를 입력했을 때 실행시키는 이벤트를 지정합니다.',
+    onSubmit: {
+      description:
+        '검색 버튼 클릭 또는 엔터키를 입력했을 때 실행시키는 이벤트를 지정합니다.',
       table: {
         type: { summary: 'function' },
         defaultValue: { summary: 'undefined' },
       },
     },
+    clearIcon: {
+      description: 'clear button의 아이콘을 지정합니다.',
+      table: {
+        type: {
+          summary: '(props: React.SVGProps<SVGSVGElement>) => JSX.Element',
+        },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
   },
 }
 
@@ -109,7 +138,41 @@ export const SearchInputDefault: Story = {
     </div>
   ),
   args: {
-    onEnter: () => alert('on enter !!!'),
+    onSubmit: () => alert('on submit !!!'),
+    onClear: () => alert('on clear !!!'),
+  },
+}
+
+export const SearchInputWithSelect: Story = {
+  render: (props) => (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}>
+      <div style={style}>
+        <SearchInput.WithSelect>
+          <Select
+            size="xs"
+            border="none"
+            round="xs"
+            defaultValue="title"
+            style={{ width: '6.25rem' }}>
+            <Select.Option value="title">제목</Select.Option>
+            <Select.Option value="content">내용</Select.Option>
+          </Select>
+          <SearchInput.Divider />
+          <SearchInput {...props} />
+        </SearchInput.WithSelect>
+      </div>
+    </div>
+  ),
+  args: {
+    onSubmit: () => alert('on submit !!!'),
     onClear: () => alert('on clear !!!'),
+    size: 'sm',
+    submitButtonPosition: 'right',
+    withClearButton: true,
   },
 }
diff --git a/packages/design-system/packages/core/src/components/search-input/SearchInput.style.ts b/packages/design-system/packages/core/src/components/search-input/SearchInput.style.ts
@@ -5,8 +5,16 @@ const getSearchInputModifier = (name: string) => {
   return `${searchInputClassName}--${name}`
 }
 
+export const searchInputWithSelectClassName = `${searchInputClassName}__with-select`
+export const searchInputWithSelectClassNameFocusModifier = `${searchInputClassName}__with-select--focused`
+export const searchInputSubmitButtonClassName = `${searchInputClassName}__submit-button`
+export const searchInputClearButtonClassName = `${searchInputClassName}__clear-button`
+export const searchInputDividerClassName = `${searchInputClassName}__divider`
+
 export const variants = {
   size: {
+    xs: getSearchInputModifier('size-xs'),
+    sm: getSearchInputModifier('size-sm'),
     md: '',
     lg: getSearchInputModifier('size-lg'),
   },
@@ -21,9 +29,18 @@ export const variants = {
     none: '',
     with: getSearchInputModifier('background'),
   },
+  submitButtonPosition: {
+    left: '',
+    right: getSearchInputModifier('submit-button-right'),
+  },
 }
 
 export const searchInputVariants = cva(searchInputClassName, {
   variants,
-  defaultVariants: { size: 'md', round: 'sm', background: 'none' },
+  defaultVariants: {
+    size: 'md',
+    round: 'sm',
+    background: 'none',
+    submitButtonPosition: 'left',
+  },
 })