From f1bd82f99e8ce23794faec955e05d204800dc8f0 Mon Sep 17 00:00:00 2001 From: nijuy Date: Thu, 1 Feb 2024 00:45:52 +0900 Subject: [PATCH 01/34] =?UTF-8?q?fix:=20subtitle=20typo=20font-weight=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Medium인데 Semibold로 되어있었음 --- src/style/foundation/typo/typo.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/style/foundation/typo/typo.ts b/src/style/foundation/typo/typo.ts index 34b49cc..9d4e229 100644 --- a/src/style/foundation/typo/typo.ts +++ b/src/style/foundation/typo/typo.ts @@ -45,21 +45,21 @@ export const typos: Record = { `, subtitle1: ` font-size: 20px; - font-weight: ${fontWeights.SemiBold}; + font-weight: ${fontWeights.Medium}; line-height: 1.3; letter-spacing: 0; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; `, subtitle2: ` font-size: 16px; - font-weight: ${fontWeights.SemiBold}; + font-weight: ${fontWeights.Medium}; line-height: 1.3; letter-spacing: 0; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; `, subtitle3: ` font-size: 14px; - font-weight: ${fontWeights.SemiBold}; + font-weight: ${fontWeights.Medium}; line-height: 1.3; letter-spacing: 0; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; From 7909e69f5af3679b0d9989e87bd725348c817dfa Mon Sep 17 00:00:00 2001 From: nijuy Date: Thu, 1 Feb 2024 00:46:46 +0900 Subject: [PATCH 02/34] =?UTF-8?q?feat(component):=20TextField.type.ts=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TextField/TextField.type.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/components/TextField/TextField.type.ts diff --git a/src/components/TextField/TextField.type.ts b/src/components/TextField/TextField.type.ts new file mode 100644 index 0000000..78c9556 --- /dev/null +++ b/src/components/TextField/TextField.type.ts @@ -0,0 +1,11 @@ +export interface TextFieldProps extends React.InputHTMLAttributes { + isNegative?: boolean; + isPositive?: boolean; + isFocused?: boolean; + isTyping?: boolean; + + fieldLabel?: string; + helperLabel?: string; + suffix?: React.ReactNode; + searchPrefix?: React.ReactNode; +} From d8a39cfa991339ea63ffc7296338bc43bad426ea Mon Sep 17 00:00:00 2001 From: nijuy Date: Thu, 1 Feb 2024 00:48:46 +0900 Subject: [PATCH 03/34] =?UTF-8?q?feat(component):=20TextField.style.ts=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TextField/TextField.style.ts | 97 +++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 src/components/TextField/TextField.style.ts diff --git a/src/components/TextField/TextField.style.ts b/src/components/TextField/TextField.style.ts new file mode 100644 index 0000000..245ee21 --- /dev/null +++ b/src/components/TextField/TextField.style.ts @@ -0,0 +1,97 @@ +import { css, styled } from 'styled-components'; + +import { TextFieldProps } from './TextField.type'; + +interface StyledTextFieldProps { + $isNegative?: TextFieldProps['isNegative']; + $isPositive?: TextFieldProps['isPositive']; + $isFocused?: TextFieldProps['isFocused']; + $isTyping?: TextFieldProps['isTyping']; + $isDisabled?: TextFieldProps['disabled']; + $searchPrefix?: TextFieldProps['searchPrefix']; +} + +export const StyledTextFieldWrapper = styled.div` + height: 46px; + display: flex; + align-items: center; + + background: ${({ theme }) => theme.color.inputFieldElevated}; + border: 1px solid ${({ theme }) => theme.color.inputFieldElevated}; + border-radius: 8px; + user-select: none; + + margin: 8px 0 0 0; + padding: 12px 16px; + + .suffix-icon { + display: none; + cursor: pointer; + } + + input:focus + .suffix-icon, + input:active + .suffix-icon { + display: flex; + align-items: center; + } + + ${({ $isDisabled, $isPositive, $isNegative, theme }) => + !$isDisabled && + ($isNegative + ? css`border: 1px solid ${theme.color.textWarned}};` + : $isPositive && css` border: 1px solid ${theme.color.textPointed}};`)}; + + ${({ $isDisabled }) => + $isDisabled && + css` + input:focus + .suffix-icon, + input:active + .suffix-icon { + display: none; + } + `} +`; + +export const StyledTextField = styled.input` + width: 100%; + margin-left: ${({ $searchPrefix }) => $searchPrefix && '4px'}; + + background-color: transparent; + border: none; + outline: none; + ${({ theme }) => theme.typo.body1}; + + caret-color: ${({ theme }) => theme.color.textPointed}; + + &:disabled { + cursor: not-allowed; + color: ${({ theme }) => theme.color.textDisabled}; + } + + &::placeholder { + color: ${({ theme, disabled }) => + disabled ? theme.color.textDisabled : theme.color.textTertiary}; + } +`; + +export const StyledFieldLabel = styled.label` + ${({ theme }) => theme.typo.subtitle3}; + color: ${({ theme, $isDisabled }) => + $isDisabled ? theme.color.textDisabled : theme.color.textSecondary}; +`; + +export const StyledHelperLabel = styled.div` + ${({ theme }) => theme.typo.caption1}; + width: 100%; + padding: 8px 0 0 8px; + word-break: break-all; + + color: ${({ $isDisabled, theme }) => + $isDisabled ? theme.color.textDisabled : theme.color.textTertiary}; + + ${({ $isDisabled, $isNegative, theme }) => + !$isDisabled && + $isNegative && + css` + color: ${theme.color.textWarned}; + `}; +`; From 25b6422e78621cb2d7f1cebad35c58dd505ce579 Mon Sep 17 00:00:00 2001 From: nijuy Date: Thu, 1 Feb 2024 00:50:12 +0900 Subject: [PATCH 04/34] =?UTF-8?q?feat(component):=20TextField=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 모든 TextField의 기본이 되는 컴포넌트이며, TextField 자체로 사용되지 않음 --- src/components/TextField/TextField.tsx | 41 ++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/components/TextField/TextField.tsx diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx new file mode 100644 index 0000000..c8c673b --- /dev/null +++ b/src/components/TextField/TextField.tsx @@ -0,0 +1,41 @@ +import { + StyledFieldLabel, + StyledHelperLabel, + StyledTextField, + StyledTextFieldWrapper, +} from './TextField.style'; +import { TextFieldProps } from './TextField.type'; + +export const TextField = ({ + isNegative, + isPositive, + isFocused, + isTyping, + fieldLabel, + helperLabel, + suffix, + searchPrefix, + ...props +}: TextFieldProps) => { + return ( + + {fieldLabel} + + {searchPrefix} + + {suffix} + + {helperLabel && ( + + {helperLabel} + + )} + + ); +}; From 9c3df68178d2f7cda5473d7b56cda5396ca76842 Mon Sep 17 00:00:00 2001 From: nijuy Date: Thu, 1 Feb 2024 00:51:02 +0900 Subject: [PATCH 05/34] =?UTF-8?q?feat(component):=20SimpleTextField.type.t?= =?UTF-8?q?s=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TextField/SimpleTextField/SimpleTextField.type.ts | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 src/components/TextField/SimpleTextField/SimpleTextField.type.ts diff --git a/src/components/TextField/SimpleTextField/SimpleTextField.type.ts b/src/components/TextField/SimpleTextField/SimpleTextField.type.ts new file mode 100644 index 0000000..287a2a2 --- /dev/null +++ b/src/components/TextField/SimpleTextField/SimpleTextField.type.ts @@ -0,0 +1,5 @@ +import { TextFieldProps } from '../TextField.type'; + +export interface SimpleTextFieldProps extends TextFieldProps { + onClickClearButton?: () => void; +} From 4e22ffeb31d07804b1a9c599a7cced13d5d3fad2 Mon Sep 17 00:00:00 2001 From: nijuy Date: Thu, 1 Feb 2024 00:52:23 +0900 Subject: [PATCH 06/34] =?UTF-8?q?feat(component):=20SimpleTextField=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SimpleTextField/SimpleTextField.tsx | 25 +++++++++++++++++++ src/components/TextField/index.ts | 2 ++ src/components/index.ts | 3 +++ 3 files changed, 30 insertions(+) create mode 100644 src/components/TextField/SimpleTextField/SimpleTextField.tsx create mode 100644 src/components/TextField/index.ts diff --git a/src/components/TextField/SimpleTextField/SimpleTextField.tsx b/src/components/TextField/SimpleTextField/SimpleTextField.tsx new file mode 100644 index 0000000..a49bf1c --- /dev/null +++ b/src/components/TextField/SimpleTextField/SimpleTextField.tsx @@ -0,0 +1,25 @@ +import { IcXLine, IconContext } from '@/style'; + +import { TextField } from '../TextField'; + +import { SimpleTextFieldProps } from './SimpleTextField.type'; + +export const SimpleTextField = ({ onClickClearButton, ...props }: SimpleTextFieldProps) => { + return ( + +
+ +
+ + } + {...props} + /> + ); +}; diff --git a/src/components/TextField/index.ts b/src/components/TextField/index.ts new file mode 100644 index 0000000..a2cc4f0 --- /dev/null +++ b/src/components/TextField/index.ts @@ -0,0 +1,2 @@ +export { SimpleTextField } from './SimpleTextField/SimpleTextField'; +export type { SimpleTextFieldProps } from './SimpleTextField/SimpleTextField.type'; diff --git a/src/components/index.ts b/src/components/index.ts index 2dbeed5..1f75405 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -27,3 +27,6 @@ export type { ListItemProps } from './ListItem'; export { Toast } from './Toast'; export type { ToastProps, ToastDuration } from './Toast'; + +export { SimpleTextField } from './TextField'; +export type { SimpleTextFieldProps } from './TextField'; From 796b4b42d922e31ca9c2e3cfbb295600265b4c36 Mon Sep 17 00:00:00 2001 From: nijuy Date: Thu, 1 Feb 2024 00:53:27 +0900 Subject: [PATCH 07/34] =?UTF-8?q?docs(component):=20SimpleTextField.storie?= =?UTF-8?q?s.tsx=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SimpleTextField.stories.tsx | 76 +++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 src/components/TextField/SimpleTextField/SimpleTextField.stories.tsx diff --git a/src/components/TextField/SimpleTextField/SimpleTextField.stories.tsx b/src/components/TextField/SimpleTextField/SimpleTextField.stories.tsx new file mode 100644 index 0000000..ad94239 --- /dev/null +++ b/src/components/TextField/SimpleTextField/SimpleTextField.stories.tsx @@ -0,0 +1,76 @@ +import { useState } from 'react'; + +import { Meta, StoryObj } from '@storybook/react'; + +import { SimpleTextField } from './SimpleTextField'; + +const meta: Meta = { + title: 'Atoms/TextField/SimpleTextField', + component: SimpleTextField, + parameters: { + layout: 'centered', + }, +}; +export default meta; + +const TextFieldStory = ({ ...textFieldProps }) => { + const [value, setValue] = useState(''); + const onChange = (e: React.ChangeEvent) => { + setValue(e.target.value); + }; + const onClickClearButton = () => { + setValue(''); + }; + + const newProps = { ...textFieldProps, value, onChange, onClickClearButton }; + return ( +
+ +
+ ); +}; + +type Story = StoryObj; +export const Primary: Story = { + args: { + fieldLabel: '필드 라벨', + helperLabel: '도움말 텍스트', + placeholder: '플레이스 홀더', + disabled: false, + isPositive: false, + isNegative: false, + }, + render: TextFieldStory, +}; + +export const Disabled: Story = { + args: { + fieldLabel: '필드 라벨', + helperLabel: '도움말 텍스트', + placeholder: '플레이스 홀더', + disabled: true, + }, + render: TextFieldStory, +}; + +export const Positive: Story = { + args: { + fieldLabel: '필드 라벨', + helperLabel: '도움말 텍스트', + placeholder: '플레이스 홀더', + disabled: false, + isPositive: true, + }, + render: TextFieldStory, +}; + +export const Negative: Story = { + args: { + fieldLabel: '필드 라벨', + helperLabel: '도움말 텍스트', + placeholder: '플레이스 홀더', + disabled: false, + isNegative: true, + }, + render: TextFieldStory, +}; From d87ae73710c63af416dcfdf741f167b686f68eee Mon Sep 17 00:00:00 2001 From: nijuy Date: Thu, 1 Feb 2024 21:45:10 +0900 Subject: [PATCH 08/34] =?UTF-8?q?fix:=20icons=20->=20iconsAsset=20?= =?UTF-8?q?=ED=8F=B4=EB=8D=94=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - src/style/foundation/icons와 icons 폴더명 중복을 해소 --- .npmignore | 2 +- {icons => iconsAsset}/convert.mjs | 10 +++++----- {icons => iconsAsset}/static/ic_adbadge_filled.svg | 0 {icons => iconsAsset}/static/ic_adbadge_line.svg | 0 {icons => iconsAsset}/static/ic_arrow_down_line.svg | 0 {icons => iconsAsset}/static/ic_arrow_left_line.svg | 0 {icons => iconsAsset}/static/ic_arrow_right_line.svg | 0 {icons => iconsAsset}/static/ic_arrow_up_line.svg | 0 {icons => iconsAsset}/static/ic_bell_filled.svg | 0 {icons => iconsAsset}/static/ic_bell_line.svg | 0 {icons => iconsAsset}/static/ic_bellmute_line.svg | 0 {icons => iconsAsset}/static/ic_blockuser_line.svg | 0 {icons => iconsAsset}/static/ic_board_filled.svg | 0 {icons => iconsAsset}/static/ic_board_line.svg | 0 {icons => iconsAsset}/static/ic_book_filled.svg | 0 {icons => iconsAsset}/static/ic_book_line.svg | 0 {icons => iconsAsset}/static/ic_calendar_filled.svg | 0 {icons => iconsAsset}/static/ic_calendar_line.svg | 0 {icons => iconsAsset}/static/ic_camera_filled.svg | 0 {icons => iconsAsset}/static/ic_camera_line.svg | 0 {icons => iconsAsset}/static/ic_cameracircle_line.svg | 0 {icons => iconsAsset}/static/ic_check_line.svg | 0 {icons => iconsAsset}/static/ic_checkcircle_filled.svg | 0 {icons => iconsAsset}/static/ic_checkcircle_line.svg | 0 {icons => iconsAsset}/static/ic_clip_line.svg | 0 {icons => iconsAsset}/static/ic_comment_filled.svg | 0 {icons => iconsAsset}/static/ic_comment_line.svg | 0 {icons => iconsAsset}/static/ic_dotbadge_line.svg | 0 .../static/ic_dots_horizontal_line.svg | 0 {icons => iconsAsset}/static/ic_dots_vertical_line.svg | 0 {icons => iconsAsset}/static/ic_download_line.svg | 0 {icons => iconsAsset}/static/ic_emojiadd_line.svg | 0 {icons => iconsAsset}/static/ic_eyeclosed_line.svg | 0 {icons => iconsAsset}/static/ic_eyeopen_line.svg | 0 {icons => iconsAsset}/static/ic_food_filled.svg | 0 {icons => iconsAsset}/static/ic_food_line.svg | 0 .../static/ic_foodcalendar_filled.svg | 0 {icons => iconsAsset}/static/ic_foodcalendar_line.svg | 0 {icons => iconsAsset}/static/ic_ground_filled.svg | 0 {icons => iconsAsset}/static/ic_ground_line.svg | 0 {icons => iconsAsset}/static/ic_heart_line.svg | 0 {icons => iconsAsset}/static/ic_home_filled.svg | 0 {icons => iconsAsset}/static/ic_home_line.svg | 0 {icons => iconsAsset}/static/ic_list_line.svg | 0 {icons => iconsAsset}/static/ic_lock_filled.svg | 0 {icons => iconsAsset}/static/ic_lock_line.svg | 0 {icons => iconsAsset}/static/ic_new_filled.svg | 0 {icons => iconsAsset}/static/ic_new_line.svg | 0 {icons => iconsAsset}/static/ic_notice_filled.svg | 0 {icons => iconsAsset}/static/ic_notice_line.svg | 0 {icons => iconsAsset}/static/ic_pen_filled.svg | 0 {icons => iconsAsset}/static/ic_pen_line.svg | 0 {icons => iconsAsset}/static/ic_person_filled.svg | 0 {icons => iconsAsset}/static/ic_person_line.svg | 0 {icons => iconsAsset}/static/ic_personcircle_line.svg | 0 {icons => iconsAsset}/static/ic_picture_filled.svg | 0 {icons => iconsAsset}/static/ic_picture_line.svg | 0 {icons => iconsAsset}/static/ic_pin_filled.svg | 0 {icons => iconsAsset}/static/ic_pin_line.svg | 0 {icons => iconsAsset}/static/ic_playcircle_filled.svg | 0 {icons => iconsAsset}/static/ic_playcircle_line.svg | 0 {icons => iconsAsset}/static/ic_plus_line.svg | 0 {icons => iconsAsset}/static/ic_rank_filled.svg | 0 {icons => iconsAsset}/static/ic_rank_line.svg | 0 {icons => iconsAsset}/static/ic_recomment_line.svg | 0 {icons => iconsAsset}/static/ic_refresh_line.svg | 0 {icons => iconsAsset}/static/ic_savecircle_filled.svg | 0 {icons => iconsAsset}/static/ic_savecircle_line.svg | 0 .../static/ic_schoolcalendar_filled.svg | 0 .../static/ic_schoolcalendar_line.svg | 0 {icons => iconsAsset}/static/ic_search_line.svg | 0 {icons => iconsAsset}/static/ic_setting_line.svg | 0 {icons => iconsAsset}/static/ic_share_line.svg | 0 {icons => iconsAsset}/static/ic_sharecircle_filled.svg | 0 {icons => iconsAsset}/static/ic_sharecircle_line.svg | 0 {icons => iconsAsset}/static/ic_star_filled.svg | 0 {icons => iconsAsset}/static/ic_star_line.svg | 0 {icons => iconsAsset}/static/ic_thumb_down_filled.svg | 0 {icons => iconsAsset}/static/ic_thumb_down_line.svg | 0 {icons => iconsAsset}/static/ic_thumb_up_filled.svg | 0 {icons => iconsAsset}/static/ic_thumb_up_line.svg | 0 .../static/ic_timecalendar_filled.svg | 0 {icons => iconsAsset}/static/ic_timecalendar_line.svg | 0 {icons => iconsAsset}/static/ic_trashcan_filled.svg | 0 {icons => iconsAsset}/static/ic_trashcan_line.svg | 0 .../static/ic_warningcircle_filled.svg | 0 {icons => iconsAsset}/static/ic_warningcircle_line.svg | 0 {icons => iconsAsset}/static/ic_x_line.svg | 0 {icons => iconsAsset}/static/ic_xcircle_filled.svg | 0 package.json | 2 +- 90 files changed, 7 insertions(+), 7 deletions(-) rename {icons => iconsAsset}/convert.mjs (94%) rename {icons => iconsAsset}/static/ic_adbadge_filled.svg (100%) rename {icons => iconsAsset}/static/ic_adbadge_line.svg (100%) rename {icons => iconsAsset}/static/ic_arrow_down_line.svg (100%) rename {icons => iconsAsset}/static/ic_arrow_left_line.svg (100%) rename {icons => iconsAsset}/static/ic_arrow_right_line.svg (100%) rename {icons => iconsAsset}/static/ic_arrow_up_line.svg (100%) rename {icons => iconsAsset}/static/ic_bell_filled.svg (100%) rename {icons => iconsAsset}/static/ic_bell_line.svg (100%) rename {icons => iconsAsset}/static/ic_bellmute_line.svg (100%) rename {icons => iconsAsset}/static/ic_blockuser_line.svg (100%) rename {icons => iconsAsset}/static/ic_board_filled.svg (100%) rename {icons => iconsAsset}/static/ic_board_line.svg (100%) rename {icons => iconsAsset}/static/ic_book_filled.svg (100%) rename {icons => iconsAsset}/static/ic_book_line.svg (100%) rename {icons => iconsAsset}/static/ic_calendar_filled.svg (100%) rename {icons => iconsAsset}/static/ic_calendar_line.svg (100%) rename {icons => iconsAsset}/static/ic_camera_filled.svg (100%) rename {icons => iconsAsset}/static/ic_camera_line.svg (100%) rename {icons => iconsAsset}/static/ic_cameracircle_line.svg (100%) rename {icons => iconsAsset}/static/ic_check_line.svg (100%) rename {icons => iconsAsset}/static/ic_checkcircle_filled.svg (100%) rename {icons => iconsAsset}/static/ic_checkcircle_line.svg (100%) rename {icons => iconsAsset}/static/ic_clip_line.svg (100%) rename {icons => iconsAsset}/static/ic_comment_filled.svg (100%) rename {icons => iconsAsset}/static/ic_comment_line.svg (100%) rename {icons => iconsAsset}/static/ic_dotbadge_line.svg (100%) rename {icons => iconsAsset}/static/ic_dots_horizontal_line.svg (100%) rename {icons => iconsAsset}/static/ic_dots_vertical_line.svg (100%) rename {icons => iconsAsset}/static/ic_download_line.svg (100%) rename {icons => iconsAsset}/static/ic_emojiadd_line.svg (100%) rename {icons => iconsAsset}/static/ic_eyeclosed_line.svg (100%) rename {icons => iconsAsset}/static/ic_eyeopen_line.svg (100%) rename {icons => iconsAsset}/static/ic_food_filled.svg (100%) rename {icons => iconsAsset}/static/ic_food_line.svg (100%) rename {icons => iconsAsset}/static/ic_foodcalendar_filled.svg (100%) rename {icons => iconsAsset}/static/ic_foodcalendar_line.svg (100%) rename {icons => iconsAsset}/static/ic_ground_filled.svg (100%) rename {icons => iconsAsset}/static/ic_ground_line.svg (100%) rename {icons => iconsAsset}/static/ic_heart_line.svg (100%) rename {icons => iconsAsset}/static/ic_home_filled.svg (100%) rename {icons => iconsAsset}/static/ic_home_line.svg (100%) rename {icons => iconsAsset}/static/ic_list_line.svg (100%) rename {icons => iconsAsset}/static/ic_lock_filled.svg (100%) rename {icons => iconsAsset}/static/ic_lock_line.svg (100%) rename {icons => iconsAsset}/static/ic_new_filled.svg (100%) rename {icons => iconsAsset}/static/ic_new_line.svg (100%) rename {icons => iconsAsset}/static/ic_notice_filled.svg (100%) rename {icons => iconsAsset}/static/ic_notice_line.svg (100%) rename {icons => iconsAsset}/static/ic_pen_filled.svg (100%) rename {icons => iconsAsset}/static/ic_pen_line.svg (100%) rename {icons => iconsAsset}/static/ic_person_filled.svg (100%) rename {icons => iconsAsset}/static/ic_person_line.svg (100%) rename {icons => iconsAsset}/static/ic_personcircle_line.svg (100%) rename {icons => iconsAsset}/static/ic_picture_filled.svg (100%) rename {icons => iconsAsset}/static/ic_picture_line.svg (100%) rename {icons => iconsAsset}/static/ic_pin_filled.svg (100%) rename {icons => iconsAsset}/static/ic_pin_line.svg (100%) rename {icons => iconsAsset}/static/ic_playcircle_filled.svg (100%) rename {icons => iconsAsset}/static/ic_playcircle_line.svg (100%) rename {icons => iconsAsset}/static/ic_plus_line.svg (100%) rename {icons => iconsAsset}/static/ic_rank_filled.svg (100%) rename {icons => iconsAsset}/static/ic_rank_line.svg (100%) rename {icons => iconsAsset}/static/ic_recomment_line.svg (100%) rename {icons => iconsAsset}/static/ic_refresh_line.svg (100%) rename {icons => iconsAsset}/static/ic_savecircle_filled.svg (100%) rename {icons => iconsAsset}/static/ic_savecircle_line.svg (100%) rename {icons => iconsAsset}/static/ic_schoolcalendar_filled.svg (100%) rename {icons => iconsAsset}/static/ic_schoolcalendar_line.svg (100%) rename {icons => iconsAsset}/static/ic_search_line.svg (100%) rename {icons => iconsAsset}/static/ic_setting_line.svg (100%) rename {icons => iconsAsset}/static/ic_share_line.svg (100%) rename {icons => iconsAsset}/static/ic_sharecircle_filled.svg (100%) rename {icons => iconsAsset}/static/ic_sharecircle_line.svg (100%) rename {icons => iconsAsset}/static/ic_star_filled.svg (100%) rename {icons => iconsAsset}/static/ic_star_line.svg (100%) rename {icons => iconsAsset}/static/ic_thumb_down_filled.svg (100%) rename {icons => iconsAsset}/static/ic_thumb_down_line.svg (100%) rename {icons => iconsAsset}/static/ic_thumb_up_filled.svg (100%) rename {icons => iconsAsset}/static/ic_thumb_up_line.svg (100%) rename {icons => iconsAsset}/static/ic_timecalendar_filled.svg (100%) rename {icons => iconsAsset}/static/ic_timecalendar_line.svg (100%) rename {icons => iconsAsset}/static/ic_trashcan_filled.svg (100%) rename {icons => iconsAsset}/static/ic_trashcan_line.svg (100%) rename {icons => iconsAsset}/static/ic_warningcircle_filled.svg (100%) rename {icons => iconsAsset}/static/ic_warningcircle_line.svg (100%) rename {icons => iconsAsset}/static/ic_x_line.svg (100%) rename {icons => iconsAsset}/static/ic_xcircle_filled.svg (100%) diff --git a/.npmignore b/.npmignore index 98c3c98..18fc59e 100644 --- a/.npmignore +++ b/.npmignore @@ -25,5 +25,5 @@ dist-ssr .yarn storybook-static package.tgz -icons +iconsAsset .storybook \ No newline at end of file diff --git a/icons/convert.mjs b/iconsAsset/convert.mjs similarity index 94% rename from icons/convert.mjs rename to iconsAsset/convert.mjs index 4b5d10f..cb09b7d 100644 --- a/icons/convert.mjs +++ b/iconsAsset/convert.mjs @@ -9,7 +9,7 @@ import prettier from 'prettier'; import { DOMParser, XMLSerializer } from 'xmldom'; const __dirname = path.resolve(); -const ICONS_DIR = path.join(__dirname, './icons/static'); +const ICONS_DIR = path.join(__dirname, './iconsAsset/static'); const ICONS_COMPONENTS_DIR = path.join(__dirname, './src/style/foundation/icons/generated'); const ICONS_INDEX_PATH = path.join(__dirname, './src/style/foundation/icons/generated/index.ts'); const ICONS_STORIES_PATH = path.join(__dirname, './src/style/foundation/icons/icons.stories.tsx'); @@ -52,8 +52,8 @@ function camelizeElementAttributes(elem) { } const SVGComponentTemplate = (name, viewBox, svg) => `/** - * 이 파일은 icons/convert.js에 의해 자동 생성되었습니다. - * 직접 수정하는 대신 icons/convert.js를 수정하세요. + * 이 파일은 iconsAsset/convert.js에 의해 자동 생성되었습니다. + * 직접 수정하는 대신 iconsAsset/convert.js를 수정하세요. */ import { memo, forwardRef } from 'react'; @@ -69,8 +69,8 @@ export const ${name} = memo(forwardRef((props, ref) => `; const StoryTemplate = (icons) => `/** - * 이 파일은 icons/convert.js에 의해 자동 생성되었습니다. - * 직접 수정하는 대신 icons/convert.js를 수정하세요. + * 이 파일은 iconsAsset/convert.js에 의해 자동 생성되었습니다. + * 직접 수정하는 대신 iconsAsset/convert.js를 수정하세요. */ import { Meta, StoryObj } from '@storybook/react'; diff --git a/icons/static/ic_adbadge_filled.svg b/iconsAsset/static/ic_adbadge_filled.svg similarity index 100% rename from icons/static/ic_adbadge_filled.svg rename to iconsAsset/static/ic_adbadge_filled.svg diff --git a/icons/static/ic_adbadge_line.svg b/iconsAsset/static/ic_adbadge_line.svg similarity index 100% rename from icons/static/ic_adbadge_line.svg rename to iconsAsset/static/ic_adbadge_line.svg diff --git a/icons/static/ic_arrow_down_line.svg b/iconsAsset/static/ic_arrow_down_line.svg similarity index 100% rename from icons/static/ic_arrow_down_line.svg rename to iconsAsset/static/ic_arrow_down_line.svg diff --git a/icons/static/ic_arrow_left_line.svg b/iconsAsset/static/ic_arrow_left_line.svg similarity index 100% rename from icons/static/ic_arrow_left_line.svg rename to iconsAsset/static/ic_arrow_left_line.svg diff --git a/icons/static/ic_arrow_right_line.svg b/iconsAsset/static/ic_arrow_right_line.svg similarity index 100% rename from icons/static/ic_arrow_right_line.svg rename to iconsAsset/static/ic_arrow_right_line.svg diff --git a/icons/static/ic_arrow_up_line.svg b/iconsAsset/static/ic_arrow_up_line.svg similarity index 100% rename from icons/static/ic_arrow_up_line.svg rename to iconsAsset/static/ic_arrow_up_line.svg diff --git a/icons/static/ic_bell_filled.svg b/iconsAsset/static/ic_bell_filled.svg similarity index 100% rename from icons/static/ic_bell_filled.svg rename to iconsAsset/static/ic_bell_filled.svg diff --git a/icons/static/ic_bell_line.svg b/iconsAsset/static/ic_bell_line.svg similarity index 100% rename from icons/static/ic_bell_line.svg rename to iconsAsset/static/ic_bell_line.svg diff --git a/icons/static/ic_bellmute_line.svg b/iconsAsset/static/ic_bellmute_line.svg similarity index 100% rename from icons/static/ic_bellmute_line.svg rename to iconsAsset/static/ic_bellmute_line.svg diff --git a/icons/static/ic_blockuser_line.svg b/iconsAsset/static/ic_blockuser_line.svg similarity index 100% rename from icons/static/ic_blockuser_line.svg rename to iconsAsset/static/ic_blockuser_line.svg diff --git a/icons/static/ic_board_filled.svg b/iconsAsset/static/ic_board_filled.svg similarity index 100% rename from icons/static/ic_board_filled.svg rename to iconsAsset/static/ic_board_filled.svg diff --git a/icons/static/ic_board_line.svg b/iconsAsset/static/ic_board_line.svg similarity index 100% rename from icons/static/ic_board_line.svg rename to iconsAsset/static/ic_board_line.svg diff --git a/icons/static/ic_book_filled.svg b/iconsAsset/static/ic_book_filled.svg similarity index 100% rename from icons/static/ic_book_filled.svg rename to iconsAsset/static/ic_book_filled.svg diff --git a/icons/static/ic_book_line.svg b/iconsAsset/static/ic_book_line.svg similarity index 100% rename from icons/static/ic_book_line.svg rename to iconsAsset/static/ic_book_line.svg diff --git a/icons/static/ic_calendar_filled.svg b/iconsAsset/static/ic_calendar_filled.svg similarity index 100% rename from icons/static/ic_calendar_filled.svg rename to iconsAsset/static/ic_calendar_filled.svg diff --git a/icons/static/ic_calendar_line.svg b/iconsAsset/static/ic_calendar_line.svg similarity index 100% rename from icons/static/ic_calendar_line.svg rename to iconsAsset/static/ic_calendar_line.svg diff --git a/icons/static/ic_camera_filled.svg b/iconsAsset/static/ic_camera_filled.svg similarity index 100% rename from icons/static/ic_camera_filled.svg rename to iconsAsset/static/ic_camera_filled.svg diff --git a/icons/static/ic_camera_line.svg b/iconsAsset/static/ic_camera_line.svg similarity index 100% rename from icons/static/ic_camera_line.svg rename to iconsAsset/static/ic_camera_line.svg diff --git a/icons/static/ic_cameracircle_line.svg b/iconsAsset/static/ic_cameracircle_line.svg similarity index 100% rename from icons/static/ic_cameracircle_line.svg rename to iconsAsset/static/ic_cameracircle_line.svg diff --git a/icons/static/ic_check_line.svg b/iconsAsset/static/ic_check_line.svg similarity index 100% rename from icons/static/ic_check_line.svg rename to iconsAsset/static/ic_check_line.svg diff --git a/icons/static/ic_checkcircle_filled.svg b/iconsAsset/static/ic_checkcircle_filled.svg similarity index 100% rename from icons/static/ic_checkcircle_filled.svg rename to iconsAsset/static/ic_checkcircle_filled.svg diff --git a/icons/static/ic_checkcircle_line.svg b/iconsAsset/static/ic_checkcircle_line.svg similarity index 100% rename from icons/static/ic_checkcircle_line.svg rename to iconsAsset/static/ic_checkcircle_line.svg diff --git a/icons/static/ic_clip_line.svg b/iconsAsset/static/ic_clip_line.svg similarity index 100% rename from icons/static/ic_clip_line.svg rename to iconsAsset/static/ic_clip_line.svg diff --git a/icons/static/ic_comment_filled.svg b/iconsAsset/static/ic_comment_filled.svg similarity index 100% rename from icons/static/ic_comment_filled.svg rename to iconsAsset/static/ic_comment_filled.svg diff --git a/icons/static/ic_comment_line.svg b/iconsAsset/static/ic_comment_line.svg similarity index 100% rename from icons/static/ic_comment_line.svg rename to iconsAsset/static/ic_comment_line.svg diff --git a/icons/static/ic_dotbadge_line.svg b/iconsAsset/static/ic_dotbadge_line.svg similarity index 100% rename from icons/static/ic_dotbadge_line.svg rename to iconsAsset/static/ic_dotbadge_line.svg diff --git a/icons/static/ic_dots_horizontal_line.svg b/iconsAsset/static/ic_dots_horizontal_line.svg similarity index 100% rename from icons/static/ic_dots_horizontal_line.svg rename to iconsAsset/static/ic_dots_horizontal_line.svg diff --git a/icons/static/ic_dots_vertical_line.svg b/iconsAsset/static/ic_dots_vertical_line.svg similarity index 100% rename from icons/static/ic_dots_vertical_line.svg rename to iconsAsset/static/ic_dots_vertical_line.svg diff --git a/icons/static/ic_download_line.svg b/iconsAsset/static/ic_download_line.svg similarity index 100% rename from icons/static/ic_download_line.svg rename to iconsAsset/static/ic_download_line.svg diff --git a/icons/static/ic_emojiadd_line.svg b/iconsAsset/static/ic_emojiadd_line.svg similarity index 100% rename from icons/static/ic_emojiadd_line.svg rename to iconsAsset/static/ic_emojiadd_line.svg diff --git a/icons/static/ic_eyeclosed_line.svg b/iconsAsset/static/ic_eyeclosed_line.svg similarity index 100% rename from icons/static/ic_eyeclosed_line.svg rename to iconsAsset/static/ic_eyeclosed_line.svg diff --git a/icons/static/ic_eyeopen_line.svg b/iconsAsset/static/ic_eyeopen_line.svg similarity index 100% rename from icons/static/ic_eyeopen_line.svg rename to iconsAsset/static/ic_eyeopen_line.svg diff --git a/icons/static/ic_food_filled.svg b/iconsAsset/static/ic_food_filled.svg similarity index 100% rename from icons/static/ic_food_filled.svg rename to iconsAsset/static/ic_food_filled.svg diff --git a/icons/static/ic_food_line.svg b/iconsAsset/static/ic_food_line.svg similarity index 100% rename from icons/static/ic_food_line.svg rename to iconsAsset/static/ic_food_line.svg diff --git a/icons/static/ic_foodcalendar_filled.svg b/iconsAsset/static/ic_foodcalendar_filled.svg similarity index 100% rename from icons/static/ic_foodcalendar_filled.svg rename to iconsAsset/static/ic_foodcalendar_filled.svg diff --git a/icons/static/ic_foodcalendar_line.svg b/iconsAsset/static/ic_foodcalendar_line.svg similarity index 100% rename from icons/static/ic_foodcalendar_line.svg rename to iconsAsset/static/ic_foodcalendar_line.svg diff --git a/icons/static/ic_ground_filled.svg b/iconsAsset/static/ic_ground_filled.svg similarity index 100% rename from icons/static/ic_ground_filled.svg rename to iconsAsset/static/ic_ground_filled.svg diff --git a/icons/static/ic_ground_line.svg b/iconsAsset/static/ic_ground_line.svg similarity index 100% rename from icons/static/ic_ground_line.svg rename to iconsAsset/static/ic_ground_line.svg diff --git a/icons/static/ic_heart_line.svg b/iconsAsset/static/ic_heart_line.svg similarity index 100% rename from icons/static/ic_heart_line.svg rename to iconsAsset/static/ic_heart_line.svg diff --git a/icons/static/ic_home_filled.svg b/iconsAsset/static/ic_home_filled.svg similarity index 100% rename from icons/static/ic_home_filled.svg rename to iconsAsset/static/ic_home_filled.svg diff --git a/icons/static/ic_home_line.svg b/iconsAsset/static/ic_home_line.svg similarity index 100% rename from icons/static/ic_home_line.svg rename to iconsAsset/static/ic_home_line.svg diff --git a/icons/static/ic_list_line.svg b/iconsAsset/static/ic_list_line.svg similarity index 100% rename from icons/static/ic_list_line.svg rename to iconsAsset/static/ic_list_line.svg diff --git a/icons/static/ic_lock_filled.svg b/iconsAsset/static/ic_lock_filled.svg similarity index 100% rename from icons/static/ic_lock_filled.svg rename to iconsAsset/static/ic_lock_filled.svg diff --git a/icons/static/ic_lock_line.svg b/iconsAsset/static/ic_lock_line.svg similarity index 100% rename from icons/static/ic_lock_line.svg rename to iconsAsset/static/ic_lock_line.svg diff --git a/icons/static/ic_new_filled.svg b/iconsAsset/static/ic_new_filled.svg similarity index 100% rename from icons/static/ic_new_filled.svg rename to iconsAsset/static/ic_new_filled.svg diff --git a/icons/static/ic_new_line.svg b/iconsAsset/static/ic_new_line.svg similarity index 100% rename from icons/static/ic_new_line.svg rename to iconsAsset/static/ic_new_line.svg diff --git a/icons/static/ic_notice_filled.svg b/iconsAsset/static/ic_notice_filled.svg similarity index 100% rename from icons/static/ic_notice_filled.svg rename to iconsAsset/static/ic_notice_filled.svg diff --git a/icons/static/ic_notice_line.svg b/iconsAsset/static/ic_notice_line.svg similarity index 100% rename from icons/static/ic_notice_line.svg rename to iconsAsset/static/ic_notice_line.svg diff --git a/icons/static/ic_pen_filled.svg b/iconsAsset/static/ic_pen_filled.svg similarity index 100% rename from icons/static/ic_pen_filled.svg rename to iconsAsset/static/ic_pen_filled.svg diff --git a/icons/static/ic_pen_line.svg b/iconsAsset/static/ic_pen_line.svg similarity index 100% rename from icons/static/ic_pen_line.svg rename to iconsAsset/static/ic_pen_line.svg diff --git a/icons/static/ic_person_filled.svg b/iconsAsset/static/ic_person_filled.svg similarity index 100% rename from icons/static/ic_person_filled.svg rename to iconsAsset/static/ic_person_filled.svg diff --git a/icons/static/ic_person_line.svg b/iconsAsset/static/ic_person_line.svg similarity index 100% rename from icons/static/ic_person_line.svg rename to iconsAsset/static/ic_person_line.svg diff --git a/icons/static/ic_personcircle_line.svg b/iconsAsset/static/ic_personcircle_line.svg similarity index 100% rename from icons/static/ic_personcircle_line.svg rename to iconsAsset/static/ic_personcircle_line.svg diff --git a/icons/static/ic_picture_filled.svg b/iconsAsset/static/ic_picture_filled.svg similarity index 100% rename from icons/static/ic_picture_filled.svg rename to iconsAsset/static/ic_picture_filled.svg diff --git a/icons/static/ic_picture_line.svg b/iconsAsset/static/ic_picture_line.svg similarity index 100% rename from icons/static/ic_picture_line.svg rename to iconsAsset/static/ic_picture_line.svg diff --git a/icons/static/ic_pin_filled.svg b/iconsAsset/static/ic_pin_filled.svg similarity index 100% rename from icons/static/ic_pin_filled.svg rename to iconsAsset/static/ic_pin_filled.svg diff --git a/icons/static/ic_pin_line.svg b/iconsAsset/static/ic_pin_line.svg similarity index 100% rename from icons/static/ic_pin_line.svg rename to iconsAsset/static/ic_pin_line.svg diff --git a/icons/static/ic_playcircle_filled.svg b/iconsAsset/static/ic_playcircle_filled.svg similarity index 100% rename from icons/static/ic_playcircle_filled.svg rename to iconsAsset/static/ic_playcircle_filled.svg diff --git a/icons/static/ic_playcircle_line.svg b/iconsAsset/static/ic_playcircle_line.svg similarity index 100% rename from icons/static/ic_playcircle_line.svg rename to iconsAsset/static/ic_playcircle_line.svg diff --git a/icons/static/ic_plus_line.svg b/iconsAsset/static/ic_plus_line.svg similarity index 100% rename from icons/static/ic_plus_line.svg rename to iconsAsset/static/ic_plus_line.svg diff --git a/icons/static/ic_rank_filled.svg b/iconsAsset/static/ic_rank_filled.svg similarity index 100% rename from icons/static/ic_rank_filled.svg rename to iconsAsset/static/ic_rank_filled.svg diff --git a/icons/static/ic_rank_line.svg b/iconsAsset/static/ic_rank_line.svg similarity index 100% rename from icons/static/ic_rank_line.svg rename to iconsAsset/static/ic_rank_line.svg diff --git a/icons/static/ic_recomment_line.svg b/iconsAsset/static/ic_recomment_line.svg similarity index 100% rename from icons/static/ic_recomment_line.svg rename to iconsAsset/static/ic_recomment_line.svg diff --git a/icons/static/ic_refresh_line.svg b/iconsAsset/static/ic_refresh_line.svg similarity index 100% rename from icons/static/ic_refresh_line.svg rename to iconsAsset/static/ic_refresh_line.svg diff --git a/icons/static/ic_savecircle_filled.svg b/iconsAsset/static/ic_savecircle_filled.svg similarity index 100% rename from icons/static/ic_savecircle_filled.svg rename to iconsAsset/static/ic_savecircle_filled.svg diff --git a/icons/static/ic_savecircle_line.svg b/iconsAsset/static/ic_savecircle_line.svg similarity index 100% rename from icons/static/ic_savecircle_line.svg rename to iconsAsset/static/ic_savecircle_line.svg diff --git a/icons/static/ic_schoolcalendar_filled.svg b/iconsAsset/static/ic_schoolcalendar_filled.svg similarity index 100% rename from icons/static/ic_schoolcalendar_filled.svg rename to iconsAsset/static/ic_schoolcalendar_filled.svg diff --git a/icons/static/ic_schoolcalendar_line.svg b/iconsAsset/static/ic_schoolcalendar_line.svg similarity index 100% rename from icons/static/ic_schoolcalendar_line.svg rename to iconsAsset/static/ic_schoolcalendar_line.svg diff --git a/icons/static/ic_search_line.svg b/iconsAsset/static/ic_search_line.svg similarity index 100% rename from icons/static/ic_search_line.svg rename to iconsAsset/static/ic_search_line.svg diff --git a/icons/static/ic_setting_line.svg b/iconsAsset/static/ic_setting_line.svg similarity index 100% rename from icons/static/ic_setting_line.svg rename to iconsAsset/static/ic_setting_line.svg diff --git a/icons/static/ic_share_line.svg b/iconsAsset/static/ic_share_line.svg similarity index 100% rename from icons/static/ic_share_line.svg rename to iconsAsset/static/ic_share_line.svg diff --git a/icons/static/ic_sharecircle_filled.svg b/iconsAsset/static/ic_sharecircle_filled.svg similarity index 100% rename from icons/static/ic_sharecircle_filled.svg rename to iconsAsset/static/ic_sharecircle_filled.svg diff --git a/icons/static/ic_sharecircle_line.svg b/iconsAsset/static/ic_sharecircle_line.svg similarity index 100% rename from icons/static/ic_sharecircle_line.svg rename to iconsAsset/static/ic_sharecircle_line.svg diff --git a/icons/static/ic_star_filled.svg b/iconsAsset/static/ic_star_filled.svg similarity index 100% rename from icons/static/ic_star_filled.svg rename to iconsAsset/static/ic_star_filled.svg diff --git a/icons/static/ic_star_line.svg b/iconsAsset/static/ic_star_line.svg similarity index 100% rename from icons/static/ic_star_line.svg rename to iconsAsset/static/ic_star_line.svg diff --git a/icons/static/ic_thumb_down_filled.svg b/iconsAsset/static/ic_thumb_down_filled.svg similarity index 100% rename from icons/static/ic_thumb_down_filled.svg rename to iconsAsset/static/ic_thumb_down_filled.svg diff --git a/icons/static/ic_thumb_down_line.svg b/iconsAsset/static/ic_thumb_down_line.svg similarity index 100% rename from icons/static/ic_thumb_down_line.svg rename to iconsAsset/static/ic_thumb_down_line.svg diff --git a/icons/static/ic_thumb_up_filled.svg b/iconsAsset/static/ic_thumb_up_filled.svg similarity index 100% rename from icons/static/ic_thumb_up_filled.svg rename to iconsAsset/static/ic_thumb_up_filled.svg diff --git a/icons/static/ic_thumb_up_line.svg b/iconsAsset/static/ic_thumb_up_line.svg similarity index 100% rename from icons/static/ic_thumb_up_line.svg rename to iconsAsset/static/ic_thumb_up_line.svg diff --git a/icons/static/ic_timecalendar_filled.svg b/iconsAsset/static/ic_timecalendar_filled.svg similarity index 100% rename from icons/static/ic_timecalendar_filled.svg rename to iconsAsset/static/ic_timecalendar_filled.svg diff --git a/icons/static/ic_timecalendar_line.svg b/iconsAsset/static/ic_timecalendar_line.svg similarity index 100% rename from icons/static/ic_timecalendar_line.svg rename to iconsAsset/static/ic_timecalendar_line.svg diff --git a/icons/static/ic_trashcan_filled.svg b/iconsAsset/static/ic_trashcan_filled.svg similarity index 100% rename from icons/static/ic_trashcan_filled.svg rename to iconsAsset/static/ic_trashcan_filled.svg diff --git a/icons/static/ic_trashcan_line.svg b/iconsAsset/static/ic_trashcan_line.svg similarity index 100% rename from icons/static/ic_trashcan_line.svg rename to iconsAsset/static/ic_trashcan_line.svg diff --git a/icons/static/ic_warningcircle_filled.svg b/iconsAsset/static/ic_warningcircle_filled.svg similarity index 100% rename from icons/static/ic_warningcircle_filled.svg rename to iconsAsset/static/ic_warningcircle_filled.svg diff --git a/icons/static/ic_warningcircle_line.svg b/iconsAsset/static/ic_warningcircle_line.svg similarity index 100% rename from icons/static/ic_warningcircle_line.svg rename to iconsAsset/static/ic_warningcircle_line.svg diff --git a/icons/static/ic_x_line.svg b/iconsAsset/static/ic_x_line.svg similarity index 100% rename from icons/static/ic_x_line.svg rename to iconsAsset/static/ic_x_line.svg diff --git a/icons/static/ic_xcircle_filled.svg b/iconsAsset/static/ic_xcircle_filled.svg similarity index 100% rename from icons/static/ic_xcircle_filled.svg rename to iconsAsset/static/ic_xcircle_filled.svg diff --git a/package.json b/package.json index 2a4da16..0105745 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "preview": "vite preview", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", - "convert-icon": "node ./icons/convert.mjs" + "convert-icon": "node ./iconsAsset/convert.mjs" }, "peerDependencies": { "react": "^18.2.0", From 73fb9562a0e5ac0d7c052f072095d264373d613f Mon Sep 17 00:00:00 2001 From: Hanna922 Date: Thu, 1 Feb 2024 21:57:52 +0900 Subject: [PATCH 09/34] docs: update README.md --- README.md | 28 +++++++++++++++++++++++++--- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4fea036..cbd74a0 100644 --- a/README.md +++ b/README.md @@ -10,17 +10,39 @@ YDS는 숭실대학교 동아리 유어슈에서 사용하는 디자인 시스 YDS 문서는 노션 페이지에서 관리됩니다. 컴포넌트 정보와 사용 예시 등을 확인할 수 있습니다. +[YDS Storybook](http://yds-react-storybook.s3-website.ap-northeast-2.amazonaws.com/?path=/docs/foundation-iconcontext--docs) + ## 🖌 피그마 [YDS Figma](https://www.figma.com/community/file/1146974544001355129) -## 🛠 설치 방법 +## 🛠 사용 방법 + +1. YDS 패키지 및 styled-components를 설치합니다. + +``` +npm add @yourssu/design-system-react styled-components + +yarn add @yourssu/design-system-react styled-components + +pnpm add @yourssu/design-system-react styled-components +``` + +2. Root Component에 YDSWrapper를 감싸줍니다. -개발 중 +```jsx +ReactDOM.createRoot(document.getElementById("root")!).render( + + + + + +); +``` ## 📱 YDS를 사용해 개발한 프로덕트 -개발 중 +[Soomsil-Web](https://github.com/yourssu/Soomsil-Web) ## 💻 타 버전 저장소 From fa992575fb503a8800b211c5c16d45b96f62a8f2 Mon Sep 17 00:00:00 2001 From: Hanna922 Date: Thu, 1 Feb 2024 21:58:57 +0900 Subject: [PATCH 10/34] docs: create issue template --- .github/ISSUE_TEMPLATE/bug_report.md | 13 +++++++++++++ .github/ISSUE_TEMPLATE/feature_request.md | 5 +++++ 2 files changed, 18 insertions(+) create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md create mode 100644 .github/ISSUE_TEMPLATE/feature_request.md diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md new file mode 100644 index 0000000..ba8765a --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -0,0 +1,13 @@ +# ISSUE ✅ : + +## 📖 Summary + +버그를 간단히 요약해주세요. + +## Error Script + +에러 내용 전체를 첨부해주세요. + +## Photo + +버그 재현 스크린샷을 첨부해주세요. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md new file mode 100644 index 0000000..e309137 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -0,0 +1,5 @@ +# ISSUE ✅ : + +## 📖 Summary + +이슈를 간단히 요약해주세요. From 561265ca81884cc94665ff1ffb4069920f31025a Mon Sep 17 00:00:00 2001 From: Hanna922 Date: Thu, 1 Feb 2024 22:03:11 +0900 Subject: [PATCH 11/34] docs: modify reviewer --- .github/CODEOWNERS | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index bbbf993..d43cd93 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -5,4 +5,4 @@ # the repo. Unless a later match takes precedence, # @global-owner1 and @global-owner2 will be requested for # review when someone opens a pull request. -* @HyunsDev @nijuy @Hanna922 \ No newline at end of file +* @nijuy @Hanna922 \ No newline at end of file From 7787965285ed0b4597a1822b9f2f7e0d98ee386d Mon Sep 17 00:00:00 2001 From: nijuy Date: Fri, 2 Feb 2024 00:50:25 +0900 Subject: [PATCH 12/34] =?UTF-8?q?feat(component):=20TextFieldProps=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=EC=97=90=20width=20=EC=86=8D=EC=84=B1=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TextField/TextField.type.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/TextField/TextField.type.ts b/src/components/TextField/TextField.type.ts index 78c9556..cbf747f 100644 --- a/src/components/TextField/TextField.type.ts +++ b/src/components/TextField/TextField.type.ts @@ -8,4 +8,5 @@ export interface TextFieldProps extends React.InputHTMLAttributes Date: Fri, 2 Feb 2024 00:51:03 +0900 Subject: [PATCH 13/34] =?UTF-8?q?feat(component):=20width=20=EC=86=8D?= =?UTF-8?q?=EC=84=B1=EC=9D=84=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TextField/TextField.style.ts | 5 ++++- src/components/TextField/TextField.tsx | 2 ++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/TextField/TextField.style.ts b/src/components/TextField/TextField.style.ts index 245ee21..8295225 100644 --- a/src/components/TextField/TextField.style.ts +++ b/src/components/TextField/TextField.style.ts @@ -9,9 +9,11 @@ interface StyledTextFieldProps { $isTyping?: TextFieldProps['isTyping']; $isDisabled?: TextFieldProps['disabled']; $searchPrefix?: TextFieldProps['searchPrefix']; + $width?: TextFieldProps['width']; } export const StyledTextFieldWrapper = styled.div` + width: ${({ $width }) => $width}; height: 46px; display: flex; align-items: center; @@ -25,12 +27,13 @@ export const StyledTextFieldWrapper = styled.div` padding: 12px 16px; .suffix-icon { - display: none; + visibility: hidden; cursor: pointer; } input:focus + .suffix-icon, input:active + .suffix-icon { + visibility: visible; display: flex; align-items: center; } diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx index c8c673b..25c50ae 100644 --- a/src/components/TextField/TextField.tsx +++ b/src/components/TextField/TextField.tsx @@ -15,6 +15,7 @@ export const TextField = ({ helperLabel, suffix, searchPrefix, + width, ...props }: TextFieldProps) => { return ( @@ -26,6 +27,7 @@ export const TextField = ({ $isFocused={isFocused} $isTyping={isTyping} $isDisabled={props.disabled} + $width={width} > {searchPrefix} From 23429a1e712e493d733022a7e56b6e319c4635ad Mon Sep 17 00:00:00 2001 From: nijuy Date: Fri, 2 Feb 2024 00:52:01 +0900 Subject: [PATCH 14/34] =?UTF-8?q?docs(component):=20SimpleTextField.storie?= =?UTF-8?q?s=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 이제 width는 부모 너비와 관계 없기 때문에 불필요한 div 삭제 --- .../SimpleTextField/SimpleTextField.stories.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/TextField/SimpleTextField/SimpleTextField.stories.tsx b/src/components/TextField/SimpleTextField/SimpleTextField.stories.tsx index ad94239..d3f5172 100644 --- a/src/components/TextField/SimpleTextField/SimpleTextField.stories.tsx +++ b/src/components/TextField/SimpleTextField/SimpleTextField.stories.tsx @@ -23,11 +23,7 @@ const TextFieldStory = ({ ...textFieldProps }) => { }; const newProps = { ...textFieldProps, value, onChange, onClickClearButton }; - return ( -
- -
- ); + return ; }; type Story = StoryObj; @@ -39,6 +35,7 @@ export const Primary: Story = { disabled: false, isPositive: false, isNegative: false, + width: '350px', }, render: TextFieldStory, }; @@ -49,6 +46,7 @@ export const Disabled: Story = { helperLabel: '도움말 텍스트', placeholder: '플레이스 홀더', disabled: true, + width: '350px', }, render: TextFieldStory, }; @@ -60,6 +58,7 @@ export const Positive: Story = { placeholder: '플레이스 홀더', disabled: false, isPositive: true, + width: '350px', }, render: TextFieldStory, }; @@ -71,6 +70,7 @@ export const Negative: Story = { placeholder: '플레이스 홀더', disabled: false, isNegative: true, + width: '350px', }, render: TextFieldStory, }; From 4376998350395680a07431a65cb3503357ca6385 Mon Sep 17 00:00:00 2001 From: nijuy Date: Fri, 2 Feb 2024 01:23:28 +0900 Subject: [PATCH 15/34] =?UTF-8?q?fix(component):=20StyledTextFieldWrapper?= =?UTF-8?q?=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TextField/TextField.style.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/TextField/TextField.style.ts b/src/components/TextField/TextField.style.ts index 8295225..2deae6d 100644 --- a/src/components/TextField/TextField.style.ts +++ b/src/components/TextField/TextField.style.ts @@ -41,8 +41,13 @@ export const StyledTextFieldWrapper = styled.div` ${({ $isDisabled, $isPositive, $isNegative, theme }) => !$isDisabled && ($isNegative - ? css`border: 1px solid ${theme.color.textWarned}};` - : $isPositive && css` border: 1px solid ${theme.color.textPointed}};`)}; + ? css` + border: 1px solid ${theme.color.textWarned}; + ` + : $isPositive && + css` + border: 1px solid ${theme.color.textPointed}; + `)} ${({ $isDisabled }) => $isDisabled && From 93eec5eae138042d652cfdb86e8f79957081d4a2 Mon Sep 17 00:00:00 2001 From: nijuy Date: Sun, 4 Feb 2024 18:57:49 +0900 Subject: [PATCH 16/34] =?UTF-8?q?docs:=20foundation=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=EB=B2=95=20=EB=AC=B8=EC=84=9C=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/style/foundation/foundation.mdx | 60 +++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/style/foundation/foundation.mdx diff --git a/src/style/foundation/foundation.mdx b/src/style/foundation/foundation.mdx new file mode 100644 index 0000000..7be3664 --- /dev/null +++ b/src/style/foundation/foundation.mdx @@ -0,0 +1,60 @@ +import { Meta } from '@storybook/addon-docs'; +import { IcSearchLine, IconContext } from '.'; + + + +# Foundation + +`@yourssu/design-system-react`의 foundation 사용 방법을 설명한 문서입니다. + +## Color + +YDS를 적용하는 모든 프로덕트는 YDS Semantic Color에 정의된 컬러를 사용해야 합니다. + +```typescript +import { styled } from 'styled-components'; + +const StyledDiv = styled.div` + background-color: ${({ theme }) => theme.color.bgNormal}; +`; +``` + +## Icon + +YDS Icons는 Context를 사용하여 모든 아이콘에 기본 스타일을 적용할 수 있습니다.
+모든 아이콘 종류는 [Icon Story](../?path=/story/foundation-icons--primary)에서 확인할 수 있습니다. + +```typescript +import { IcSearchLine, IconContext } from '@yourssu/design-system-react'; + +function App() { + return ( + + + + ) +} +``` + +2개 이상의 Context Provider로 Icon을 감싼 경우 가장 가까운 context의 값을 사용합니다. + +> value의 값은 color, size, mirrored 뿐만 아니라 원래 Icon의 props를 사용할 수 있습니다.
이를 이용해 `className`, `aria-label` 등 관련 속성을 편리하게 이용할 수 있습니다. + +## Typo + +YDS Typo는 YDS에서 사용하는 타이포그래피 스타일입니다.
+모든 타이포그래피 스타일은 [Typo story](../?path=/story/foundation-typo--primary)에서 확인할 수 있습니다. + +```typescript +import { styled } from 'styled-components'; + +const StyledDiv = styled.div` + ${({ theme }) => theme.typo.body1}; +`; +``` From 19db1b2b33e1010988684fba26cb3665c885671c Mon Sep 17 00:00:00 2001 From: nijuy Date: Mon, 5 Feb 2024 00:06:10 +0900 Subject: [PATCH 17/34] =?UTF-8?q?docs:=20Icons=20=EB=AC=B8=EC=84=9C?= =?UTF-8?q?=EC=97=90=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=9D=B4=EB=A6=84=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - displayName 속성을 사용함 --- src/style/foundation/icons/icons.stories.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/style/foundation/icons/icons.stories.tsx b/src/style/foundation/icons/icons.stories.tsx index a429f6e..1b9a4a2 100644 --- a/src/style/foundation/icons/icons.stories.tsx +++ b/src/style/foundation/icons/icons.stories.tsx @@ -197,9 +197,17 @@ export default meta; type Story = StoryObj; const Container = styled.div` + display: grid; + grid-template-columns: repeat(8, 1fr); + gap: 2rem; +`; + +const IconWrapper = styled.div` display: flex; - flex-wrap: wrap; - gap: 1rem; + flex-direction: column; + align-items: center; + + ${({ theme }) => theme.typo.caption1}; `; // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -207,7 +215,10 @@ const Render = (args: any) => { return ( {Icons.map((Icon, index) => ( - + + + {Icon.displayName} + ))} ); From 36f99b8b640068649712923d0c1b772a8661a852 Mon Sep 17 00:00:00 2001 From: nijuy Date: Mon, 5 Feb 2024 14:36:30 +0900 Subject: [PATCH 18/34] =?UTF-8?q?docs:=20styled-component.d.ts=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=83=9D=EC=84=B1=20=EA=B4=80=EB=A0=A8=20=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/style/foundation/foundation.mdx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/style/foundation/foundation.mdx b/src/style/foundation/foundation.mdx index 7be3664..7e43360 100644 --- a/src/style/foundation/foundation.mdx +++ b/src/style/foundation/foundation.mdx @@ -11,6 +11,20 @@ import { IcSearchLine, IconContext } from '.'; YDS를 적용하는 모든 프로덕트는 YDS Semantic Color에 정의된 컬러를 사용해야 합니다. +먼저 프로젝트에 `styled-components.d.ts` 파일을 생성하여 아래 내용을 추가해 주세요.
+`DefaultTheme`이 `YDSTheme`을 확장하는 타입이어야 Color, Typo를 정확히 활용할 수 있습니다. + +```typescript +import 'styled-components'; +import { YDSTheme } from '@yourssu/design-system-react'; + +declare module 'styled-components' { + export interface DefaultTheme extends YDSTheme {} +} +``` + +사용 예시는 아래와 같습니다. + ```typescript import { styled } from 'styled-components'; From a63131fe50ea7f0a72b3e925a093c3f7b88c160a Mon Sep 17 00:00:00 2001 From: nijuy Date: Wed, 7 Feb 2024 18:12:53 +0900 Subject: [PATCH 19/34] =?UTF-8?q?chore:=20storybook=20main.ts=20=EB=82=B4?= =?UTF-8?q?=20docs=20=EC=84=A4=EC=A0=95=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 자동 문서 생성을 위해 true로 변경 --- .storybook/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 28bd15d..5645640 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -13,7 +13,7 @@ const config: StorybookConfig = { options: {}, }, docs: { - autodocs: 'tag', + autodocs: true, }, }; export default config; From 3113cba45894c3bf57ffe23fbebe2f5219c6f63d Mon Sep 17 00:00:00 2001 From: nijuy Date: Wed, 7 Feb 2024 18:13:30 +0900 Subject: [PATCH 20/34] =?UTF-8?q?chore:=20Badge.type=20JSDoc=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 문서 내 속성 설명을 위해 JSDoc을 추가함 --- src/components/Badge/Badge.type.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/Badge/Badge.type.ts b/src/components/Badge/Badge.type.ts index 108ce74..62a5bf9 100644 --- a/src/components/Badge/Badge.type.ts +++ b/src/components/Badge/Badge.type.ts @@ -1,7 +1,10 @@ import { SemanticBGColor } from '@/style'; export interface BadgeProps extends React.HTMLAttributes { + /** 배경 색상 */ color?: SemanticBGColor; + /** Badge 안에 들어갈 텍스트 */ children?: React.ReactNode; + /** 텍스트 왼쪽에 들어갈 아이콘 */ leftIcon?: React.ReactNode; } From a86ae24a0e3edda586a418e5b45aa177741416dd Mon Sep 17 00:00:00 2001 From: nijuy Date: Wed, 7 Feb 2024 18:14:23 +0900 Subject: [PATCH 21/34] =?UTF-8?q?chore:=20Toggle.type=20JSDoc=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 문서 내 속성 설명을 위해 JSDoc을 추가함 --- src/components/Toggle/Toggle.type.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Toggle/Toggle.type.ts b/src/components/Toggle/Toggle.type.ts index 834cc57..b1ca688 100644 --- a/src/components/Toggle/Toggle.type.ts +++ b/src/components/Toggle/Toggle.type.ts @@ -1,4 +1,6 @@ export interface ToggleProps extends React.InputHTMLAttributes { + /** 비활성화 여부 */ isDisabled?: boolean; + /** 선택 여부 */ isSelected?: boolean; } From 5fa8c72aa922fa3af7edd5369b6a6c72ce3aff25 Mon Sep 17 00:00:00 2001 From: nijuy Date: Wed, 7 Feb 2024 18:15:19 +0900 Subject: [PATCH 22/34] =?UTF-8?q?docs:=20Toggle=20=EB=AC=B8=EC=84=9C=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 주의사항이 추가로 들어가야 해서, 자동 생성 문서가 아닌 Docs Block을 활용한 문서 생성 --- src/components/Toggle/Toggle.stories.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/Toggle/Toggle.stories.tsx b/src/components/Toggle/Toggle.stories.tsx index d1b9ef7..ecfa6a5 100644 --- a/src/components/Toggle/Toggle.stories.tsx +++ b/src/components/Toggle/Toggle.stories.tsx @@ -1,12 +1,30 @@ +import { Stories, Primary as PrimaryBlock, Controls, Title } from '@storybook/blocks'; import { Meta, StoryObj } from '@storybook/react'; import { Toggle } from './Toggle'; - const meta: Meta = { title: 'Atoms/Toggle', component: Toggle, parameters: { layout: 'centered', + docs: { + page: () => ( + <> + + <PrimaryBlock /> + <Controls /> + <h2> 주의사항 </h2> + <ol> + <li> + isDisabled=true인 경우, 사용자는 isSelected 속성 값을 확인할 수 있지만 바꿀 수는 + 없습니다. + </li> + </ol> + <br /> + <Stories /> + </> + ), + }, }, }; export default meta; From 829be1585e5a011549cb83ce38e1e8943ecd047d Mon Sep 17 00:00:00 2001 From: nijuy <youjin6325@naver.com> Date: Wed, 7 Feb 2024 18:16:21 +0900 Subject: [PATCH 23/34] =?UTF-8?q?chore:=20TextField.type=20JSDoc=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 문서 내 속성 설명을 위해 JSDoc을 추가함 --- .../TextField/SimpleTextField/SimpleTextField.type.ts | 1 + src/components/TextField/TextField.type.ts | 9 +++++++++ 2 files changed, 10 insertions(+) diff --git a/src/components/TextField/SimpleTextField/SimpleTextField.type.ts b/src/components/TextField/SimpleTextField/SimpleTextField.type.ts index 287a2a2..bb0ec8d 100644 --- a/src/components/TextField/SimpleTextField/SimpleTextField.type.ts +++ b/src/components/TextField/SimpleTextField/SimpleTextField.type.ts @@ -1,5 +1,6 @@ import { TextFieldProps } from '../TextField.type'; export interface SimpleTextFieldProps extends TextFieldProps { + /** x 버튼을 클릭했을 때 이벤트 핸들러 */ onClickClearButton?: () => void; } diff --git a/src/components/TextField/TextField.type.ts b/src/components/TextField/TextField.type.ts index cbf747f..40f1bec 100644 --- a/src/components/TextField/TextField.type.ts +++ b/src/components/TextField/TextField.type.ts @@ -1,12 +1,21 @@ export interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> { + /** 입력된 내용이 조건에 어긋나는지 나타내는 속성 */ isNegative?: boolean; + /** 입력된 내용이 조건에 부합하는지 나타내는 속성 */ isPositive?: boolean; + /** TextField에 포커스가 잡혀있는지 나타내는 속성 */ isFocused?: boolean; + /** isFocused=true일 때, 입력된 내용이 한 글자 이상인지 나타내는 속성 */ isTyping?: boolean; + /** TextField에 무엇을 입력해야 하는지 기입하는 속성 */ fieldLabel?: string; + /** TextField 아래에 들어가는 도움말 텍스트 */ helperLabel?: string; + /** TextField 내부 오른쪽에 들어갈 아이콘 (또는 텍스트) */ suffix?: React.ReactNode; + /** TextField 내부 왼쪽에 들어갈 검색 아이콘 */ searchPrefix?: React.ReactNode; + /** TextField의 width */ width?: number | string; } From 4c6363eda673f594664d5851e9b4ce272a472506 Mon Sep 17 00:00:00 2001 From: nijuy <youjin6325@naver.com> Date: Wed, 7 Feb 2024 18:16:50 +0900 Subject: [PATCH 24/34] =?UTF-8?q?docs:=20SimpleTextField=20=EB=AC=B8?= =?UTF-8?q?=EC=84=9C=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 주의사항이 추가로 들어가야 해서, 자동 생성 문서가 아닌 Docs Block을 활용한 문서 생성 --- .../SimpleTextField.stories.tsx | 53 +++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/src/components/TextField/SimpleTextField/SimpleTextField.stories.tsx b/src/components/TextField/SimpleTextField/SimpleTextField.stories.tsx index d3f5172..1d65986 100644 --- a/src/components/TextField/SimpleTextField/SimpleTextField.stories.tsx +++ b/src/components/TextField/SimpleTextField/SimpleTextField.stories.tsx @@ -1,5 +1,6 @@ import { useState } from 'react'; +import { Stories, Primary as PrimaryBlock, Controls, Title } from '@storybook/blocks'; import { Meta, StoryObj } from '@storybook/react'; import { SimpleTextField } from './SimpleTextField'; @@ -9,6 +10,58 @@ const meta: Meta<typeof SimpleTextField> = { component: SimpleTextField, parameters: { layout: 'centered', + docs: { + page: () => ( + <> + <Title /> + <PrimaryBlock /> + <Controls /> + <h2> 주의사항 </h2> + <ol> + <li> + TextField의 종류에 따라 suffix, searchPrefix 속성 값이 일부 정해져 있습니다. + <br /> + <br /> + <table> + <tr> + <th>종류</th> + <th>suffix</th> + <th>searchPrefix</th> + </tr> + <tr> + <td>SimpleTextField</td> + <td>IcXLine</td> + <td>설정 불가</td> + </tr> + <tr> + <td>SuffixTextField</td> + <td>사용자가 설정한 값</td> + <td>설정 불가</td> + </tr> + <tr> + <td>SearchTextField</td> + <td>IcXLine</td> + <td>IcSearchLine</td> + </tr> + <tr> + <td>PasswordTextField</td> + <td>IcEyeclosedLine 또는 IcEyeopenLine</td> + <td>설정 불가</td> + </tr> + </table> + </li> + <br /> + <li> + boolean 타입 속성의 우선순위는 아래와 같습니다. + <br /> + disabled > isNegative > isPositive + </li> + </ol> + <br /> + <Stories /> + </> + ), + }, }, }; export default meta; From 19426c2b6abce4a453523bbdc2d83aee0b0a538d Mon Sep 17 00:00:00 2001 From: nijuy <youjin6325@naver.com> Date: Wed, 7 Feb 2024 18:17:12 +0900 Subject: [PATCH 25/34] =?UTF-8?q?chore:=20Toast.type=20JSDoc=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 문서 내 속성 설명을 위해 JSDoc을 추가함 --- src/components/Toast/Toast.type.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Toast/Toast.type.ts b/src/components/Toast/Toast.type.ts index 0fcd8e2..3d3b12d 100644 --- a/src/components/Toast/Toast.type.ts +++ b/src/components/Toast/Toast.type.ts @@ -1,6 +1,8 @@ export type ToastDuration = 'short' | 'long'; export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> { + /** 화면에 띄울 메시지 */ children?: React.ReactNode; + /** 지속 시간 (1.5s | 3s)*/ duration?: ToastDuration; } From ed7618f2490e720c6a3a7a939cff0f3956cf8873 Mon Sep 17 00:00:00 2001 From: nijuy <youjin6325@naver.com> Date: Wed, 7 Feb 2024 18:18:06 +0900 Subject: [PATCH 26/34] =?UTF-8?q?docs:=20Toast=20=EB=AC=B8=EC=84=9C=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - HookSource.md는 useToast 사용 예시를 문서에 첨부하기 위해 생성한 md 파일 --- src/components/Toast/HookSource.md | 19 ++++++++++++++ src/components/Toast/Toast.stories.tsx | 36 ++++++++++++++++++++++++-- 2 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 src/components/Toast/HookSource.md diff --git a/src/components/Toast/HookSource.md b/src/components/Toast/HookSource.md new file mode 100644 index 0000000..680d789 --- /dev/null +++ b/src/components/Toast/HookSource.md @@ -0,0 +1,19 @@ +```typescript +import { ToastDuration, useToast, Toast } from '@yourssu/design-system-react'; + +const ToastWrapper = () => { + const toastProps = { + children: '화면에 띄울 메시지', + duration: 'long' as ToastDuration, + }; + + const { showToast, isShowToast } = useToast(); + + return ( + <div> + <button onClick={() => { showToast(toastProps.duration); }}> 버튼 </button> + {isShowToast && <Toast {...toastProps} />} + </div> + ); +}; +``` diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx index 5721217..7791ce1 100644 --- a/src/components/Toast/Toast.stories.tsx +++ b/src/components/Toast/Toast.stories.tsx @@ -1,7 +1,16 @@ +import { + Stories, + Primary as PrimaryBlock, + Controls, + Title, + Description, + Markdown, +} from '@storybook/blocks'; import { Meta, StoryObj } from '@storybook/react'; import { useToast } from '@/hooks/useToast'; +import HookSource from './HookSource.md?raw'; import { Toast } from './Toast'; import { ToastDuration } from './Toast.type'; @@ -10,13 +19,36 @@ const meta: Meta<typeof Toast> = { component: Toast, parameters: { layout: 'centered', + docs: { + page: () => ( + <> + <Title /> + <PrimaryBlock /> + <Controls /> + <h2> 주의사항 </h2> + <ol> + <li>Toast의 width는 Toast 를 감싸는 컴포넌트의 width에 영향을 받습니다.</li> + <li> + Toast의 위치는 position: relative 속성이 설정된 가장 가까운 부모 컴포넌트에 의해 + 결정됩니다. + </li> + </ol> + <br /> + <Title>useToast + Toast 컴포넌트를 사용하기 위한 Custom Hook입니다. + {HookSource} +
+ + + ), + }, }, }; export default meta; const ToastStory = ({ ...toastProps }) => { return ( -
+
{ return (