Merge pull request #90 from yourssu/develop

.github/release.yml

@@ -1,37 +1,36 @@
 # 이 파일은 release note 작성에 사용되는 파일입니다.
 
-name-template: '@yourssu/design-system-react@$RESOLVED_VERSION'
-tag-template: 'v$RESOLVED_VERSION'
-categories:
-  - title: '🆕 새로운 기능이 추가되었어요!'
-    label: 'feat'
-  - title: '🐞 자잘한 버그를 수정했습니다.'
-    labels:
-      - 'bug'
-      - 'fix'
-  - title: '🫶🏻 사용성 개선에 힘썼습니다.'
-    label: 'docs'
-  - title: '🛠️ 더 나은 코드를 위해 노력하고 있습니다.'
-    labels:
-      - 'refactor'
-      - 'chore'
-  - title: 'ETC'
-    labels:
-      - '*'
-change-template: '* $TITLE (#$NUMBER) by @$AUTHOR'
-change-title-escapes: '\<*_&#@`'
-exclude-labels:
-  - 'Main'
-version-resolver:
-  major:
-    labels:
-      - 'Major'
-  minor:
-    labels:
-      - 'Minor'
-  patch:
-    labels:
-      - 'Patch'
-  default: patch
-template: |
-  $CHANGES
+changelog:
+  name-template: '@Yourssu Design/design-system-react@$RESOLVED_VERSION'
+  tag-template: 'v$RESOLVED_VERSION'
+  categories:
+    - title: ':new: Exciting New Features!'
+      label: 'feat'
+    - title: ':ladybug: Fixed a Bug'
+      labels:
+        - 'bug'
+        - 'fix'
+    - title: ':heart_hands::skin-tone-2: Improve User Experience'
+      label: 'docs'
+    - title: ':hammer_and_wrench: Strive for Better Code'
+      label: 'refactor'
+    - title: 'ETC'
+      labels:
+        - '*'
+  change-template: '* $TITLE (#$NUMBER) by @$AUTHOR'
+  change-title-escapes: '\<*_&#@`'
+  exclude-labels:
+    - 'Main'
+  version-resolver:
+    major:
+      labels:
+        - 'Major'
+    minor:
+      labels:
+        - 'Minor'
+    patch:
+      labels:
+        - 'Patch'
+    default: patch
+  template: |
+    $CHANGES

.storybook/main.ts

@@ -2,12 +2,26 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      shouldRemoveUndefinedFromOptional: true,
+      propFilter: (prop) => {
+        if (prop.parent) {
+          return !prop.parent.fileName.includes('node_modules');
+        }
+        return true;
+      },
+    },
+    check: false,
+  },
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
-    '@storybook/addon-mdx-gfm'
+    '@storybook/addon-mdx-gfm',
   ],
   framework: {
     name: '@storybook/react-vite',

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "jpoissonnier.vscode-styled-components"
+  ]
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yourssu/design-system-react",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Yourssu Design System for React",
   "keywords": [
     "yourssu",

src/components/Badge/Badge.type.ts

@@ -1,8 +1,8 @@
-import { SemanticBGColor } from '@/style';
+import { SemanticItemBGColor } from '@/style';
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
   /** 배경 색상 */
-  color?: SemanticBGColor;
+  color?: SemanticItemBGColor;
   /** Badge 안에 들어갈 텍스트 */
   children?: React.ReactNode;
   /** 텍스트 왼쪽에 들어갈 아이콘 */

src/components/TextField/PasswordTextField/PasswordTextField.stories.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react';
+
+import { PasswordTextField } from './PasswordTextField';
+
+const meta: Meta<typeof PasswordTextField> = {
+  title: 'Atoms/TextField/PasswordTextField',
+  component: PasswordTextField,
+  parameters: {
+    layout: 'centered',
+  },
+};
+export default meta;
+
+const TextFieldStory = ({ ...textFieldProps }) => {
+  const [value, setValue] = useState('');
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  const newProps = { ...textFieldProps, value, onChange };
+  return <PasswordTextField {...newProps} />;
+};
+
+type Story = StoryObj<typeof PasswordTextField>;
+export const Primary: Story = {
+  args: {
+    fieldLabel: '필드 라벨',
+    helperLabel: '도움말 텍스트',
+    placeholder: '플레이스 홀더',
+    disabled: false,
+    isPositive: false,
+    isNegative: false,
+    isMarked: true,
+    width: '350px',
+  },
+  render: TextFieldStory,
+};
+
+export const Disabled: Story = {
+  args: {
+    fieldLabel: '필드 라벨',
+    helperLabel: '도움말 텍스트',
+    placeholder: '플레이스 홀더',
+    disabled: true,
+    width: '350px',
+  },
+  render: TextFieldStory,
+};
+
+export const Positive: Story = {
+  args: {
+    fieldLabel: '필드 라벨',
+    helperLabel: '도움말 텍스트',
+    placeholder: '플레이스 홀더',
+    disabled: false,
+    isPositive: true,
+    isMarked: false,
+    width: '350px',
+  },
+  render: TextFieldStory,
+};
+
+export const Negative: Story = {
+  args: {
+    fieldLabel: '필드 라벨',
+    helperLabel: '도움말 텍스트',
+    placeholder: '플레이스 홀더',
+    disabled: false,
+    isNegative: true,
+    isMarked: true,
+    width: '350px',
+  },
+  render: TextFieldStory,
+};

src/components/TextField/PasswordTextField/PasswordTextField.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+import { useTheme } from 'styled-components';
+
+import { IcEyeclosedLine, IcEyeopenLine, IconContext } from '@/style';
+
+import { TextField } from '../TextField';
+
+import { PasswordTextFieldProps } from './PasswordTextField.type';
+
+export const PasswordTextField = ({ isMarked, ...props }: PasswordTextFieldProps) => {
+  const [isMarkedValue, setIsMarkedValue] = useState(isMarked);
+  const onClickEyeButton = () => {
+    setIsMarkedValue((prev) => !prev);
+  };
+  return (
+    <TextField
+      type={isMarkedValue ? 'password' : 'text'}
+      suffix={
+        <IconContext.Provider
+          value={{
+            color: useTheme().color.buttonNormal,
+            size: '1.5rem',
+          }}
+        >
+          <div className="suffix-icon" onClick={onClickEyeButton}>
+            {isMarkedValue ? <IcEyeclosedLine /> : <IcEyeopenLine />}
+          </div>
+        </IconContext.Provider>
+      }
+      {...props}
+    ></TextField>
+  );
+};

src/components/TextField/PasswordTextField/PasswordTextField.type.ts

@@ -0,0 +1,6 @@
+import { TextFieldProps } from '../TextField.type';
+
+export interface PasswordTextFieldProps extends Omit<TextFieldProps, 'suffix' | 'searchPrefix'> {
+  /** 입력된 내용을 보지 못하게 할 것인지 나타내는 속성 */
+  isMarked?: boolean;
+}

src/components/TextField/SearchTextField/SearchTextField.stories.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react';
+
+import { SearchTextField } from './SearchTextField';
+
+const meta: Meta<typeof SearchTextField> = {
+  title: 'Atoms/TextField/SearchTextField',
+  component: SearchTextField,
+  parameters: {
+    layout: 'centered',
+  },
+};
+export default meta;
+
+const TextFieldStory = ({ ...textFieldProps }) => {
+  const [value, setValue] = useState('');
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+  const onClickClearButton = () => {
+    setValue('');
+  };
+
+  const newProps = { ...textFieldProps, value, onChange, onClickClearButton };
+  return <SearchTextField {...newProps} />;
+};
+
+type Story = StoryObj<typeof SearchTextField>;
+export const Primary: Story = {
+  args: {
+    isFocused: false,
+    isTyping: false,
+    placeholder: '플레이스 홀더',
+    disabled: false,
+    width: '350px',
+  },
+  render: TextFieldStory,
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: '플레이스 홀더',
+    disabled: true,
+    width: '350px',
+  },
+  render: TextFieldStory,
+};
+
+export const Focused: Story = {
+  args: {
+    isFocused: true,
+    placeholder: '플레이스 홀더',
+    disabled: false,
+    width: '350px',
+  },
+  render: TextFieldStory,
+};

src/components/TextField/SearchTextField/SearchTextField.tsx

@@ -0,0 +1,39 @@
+import { useTheme } from 'styled-components';
+
+import { IcSearchLine, IcXLine, IconContext } from '@/style';
+
+import { TextField } from '../TextField';
+
+import { SearchTextFieldProps } from './SearchTextField.type';
+
+export const SearchTextField = ({ onClickClearButton, ...props }: SearchTextFieldProps) => {
+  const theme = useTheme();
+
+  return (
+    <TextField
+      suffix={
+        <IconContext.Provider
+          value={{
+            color: theme.color.buttonNormal,
+            size: '1rem',
+          }}
+        >
+          <div className="suffix-icon clear-icon" onClick={onClickClearButton}>
+            <IcXLine />
+          </div>
+        </IconContext.Provider>
+      }
+      searchPrefix={
+        <IconContext.Provider
+          value={{
+            color: theme.color.textTertiary,
+            size: '1.5rem',
+          }}
+        >
+          <IcSearchLine />
+        </IconContext.Provider>
+      }
+      {...props}
+    />
+  );
+};

src/components/TextField/SearchTextField/SearchTextField.type.ts

@@ -0,0 +1,10 @@
+import { TextFieldProps } from '../TextField.type';
+
+export interface SearchTextFieldProps
+  extends Omit<
+    TextFieldProps,
+    'isNegative' | 'isPositive' | 'fieldLabel' | 'helperLabel' | 'suffix' | 'searchPrefix'
+  > {
+  /** x 버튼을 클릭했을 때 이벤트 핸들러 */
+  onClickClearButton?: () => void;
+}