v1.1.0

.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;
+}