Merge pull request #95 from yourssu/develop

v1.1.1
yourssu · May 16, 2024 · 6928b9a · 6928b9a
2 parents 28739df + 88fe519
commit 6928b9a
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 73 deletions.
diff --git a/.github/release.yml b/.github/release.yml
@@ -4,20 +4,23 @@ 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'
+    - title: '🆕 Exciting New Features!'
+      labels:
+        - 'feat'
+    - title: '🐞 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'
+    - title: '🫶🏻 Improve User Experience'
+      labels:
+        - 'docs'
+    - title: '🛠️ Strive for Better Code'
+      labels:
+        - 'refactor'
+    - title: '👩🏻‍💻 ETC'
       labels:
         - '*'
-  change-template: '* $TITLE (#$NUMBER) by @$AUTHOR'
+  change-template: '- $TITLE (#$NUMBER) by @$AUTHOR'
   change-title-escapes: '\<*_&#@`'
   exclude-labels:
     - 'Main'

diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@yourssu/design-system-react",
   "private": false,
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Yourssu Design System for React",
   "keywords": [
     "yourssu",
@@ -50,6 +50,7 @@
     "@storybook/react-vite": "^8.0.2",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/webfontloader": "^1.6.38",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
@@ -70,6 +71,7 @@
     "vite": "^4.4.5",
     "vite-plugin-dts": "^3.5.3",
     "vite-tsconfig-paths": "^4.2.0",
+    "webfontloader": "^1.6.28",
     "xmldom": "^0.6.0"
   },
   "packageManager": "[email protected]"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/TextField/PasswordTextField/PasswordTextField.tsx b/src/components/TextField/PasswordTextField/PasswordTextField.tsx
@@ -8,24 +8,29 @@ import { TextField } from '../TextField';
 
 import { PasswordTextFieldProps } from './PasswordTextField.type';
 
-export const PasswordTextField = ({ isMarked, ...props }: PasswordTextFieldProps) => {
+export const PasswordTextField = ({ isMarked = true, ...props }: PasswordTextFieldProps) => {
+  const theme = useTheme();
   const [isMarkedValue, setIsMarkedValue] = useState(isMarked);
+
   const onClickEyeButton = () => {
     setIsMarkedValue((prev) => !prev);
   };
+
   return (
     <TextField
       type={isMarkedValue ? 'password' : 'text'}
       suffix={
         <IconContext.Provider
           value={{
-            color: useTheme().color.buttonNormal,
+            color: theme.color.buttonNormal,
             size: '1.5rem',
           }}
         >
-          <div className="suffix-icon" onClick={onClickEyeButton}>
-            {isMarkedValue ? <IcEyeclosedLine /> : <IcEyeopenLine />}
-          </div>
+          {isMarkedValue ? (
+            <IcEyeclosedLine onClick={onClickEyeButton} />
+          ) : (
+            <IcEyeopenLine onClick={onClickEyeButton} />
+          )}
         </IconContext.Provider>
       }
       {...props}

diff --git a/src/components/TextField/SearchTextField/SearchTextField.tsx b/src/components/TextField/SearchTextField/SearchTextField.tsx
@@ -18,16 +18,14 @@ export const SearchTextField = ({ onClickClearButton, ...props }: SearchTextFiel
             size: '1rem',
           }}
         >
-          <div className="suffix-icon clear-icon" onClick={onClickClearButton}>
-            <IcXLine />
-          </div>
+          <IcXLine onClick={onClickClearButton} />
         </IconContext.Provider>
       }
       searchPrefix={
         <IconContext.Provider
           value={{
             color: theme.color.textTertiary,
-            size: '1.5rem',
+            size: '1.25rem',
           }}
         >
           <IcSearchLine />

diff --git a/src/components/TextField/SimpleTextField/SimpleTextField.tsx b/src/components/TextField/SimpleTextField/SimpleTextField.tsx
@@ -7,18 +7,18 @@ import { TextField } from '../TextField';
 import { SimpleTextFieldProps } from './SimpleTextField.type';
 
 export const SimpleTextField = ({ onClickClearButton, ...props }: SimpleTextFieldProps) => {
+  const theme = useTheme();
+
   return (
     <TextField
       suffix={
         <IconContext.Provider
           value={{
-            color: useTheme().color.buttonNormal,
+            color: theme.color.buttonNormal,
             size: '1rem',
           }}
         >
-          <div className="suffix-icon clear-icon" onClick={onClickClearButton}>
-            <IcXLine />
-          </div>
+          <IcXLine onClick={onClickClearButton} />
         </IconContext.Provider>
       }
       {...props}

diff --git a/src/components/TextField/SuffixTextField/SuffixTextField.type.ts b/src/components/TextField/SuffixTextField/SuffixTextField.type.ts
@@ -1,6 +1,3 @@
 import { TextFieldProps } from '../TextField.type';
 
-export interface SuffixTextFieldProps extends Omit<TextFieldProps, 'searchPrefix'> {
-  /** TextField 오른쪽에 들어갈 텍스트 */
-  suffix?: string;
-}
+export interface SuffixTextFieldProps extends Omit<TextFieldProps, 'searchPrefix'> {}
diff --git a/src/components/TextField/TextField.style.ts b/src/components/TextField/TextField.style.ts
@@ -12,6 +12,14 @@ interface StyledTextFieldProps {
   $width?: TextFieldProps['width'];
 }
 
+export const StyledSuffixIconContainer = styled.div`
+  display: none;
+`;
+
+export const StyledSearchPrefixContainer = styled.div`
+  display: flex;
+`;
+
 export const StyledTextFieldWrapper = styled.div<StyledTextFieldProps>`
   width: ${({ $width }) => $width};
   height: 46px;
@@ -27,18 +35,6 @@ export const StyledTextFieldWrapper = styled.div<StyledTextFieldProps>`
   padding: 12px 16px;
   gap: 4px;
 
-  .suffix-icon {
-    visibility: hidden;
-    cursor: pointer;
-  }
-
-  input:focus + .suffix-icon,
-  input:active + .suffix-icon {
-    visibility: visible;
-    display: flex;
-    align-items: center;
-  }
-
   ${({ $isDisabled, $isPositive, $isNegative, theme }) =>
     !$isDisabled &&
     ($isNegative
@@ -50,14 +46,10 @@ export const StyledTextFieldWrapper = styled.div<StyledTextFieldProps>`
           border: 1px solid ${theme.color.textPointed};
         `)}
 
-  ${({ $isDisabled }) =>
-    $isDisabled &&
-    css`
-      input:focus + .suffix-icon,
-      input:active + .suffix-icon {
-        display: none;
-      }
-    `}
+  input:focus + ${StyledSuffixIconContainer}, input:active + ${StyledSuffixIconContainer} {
+    display: flex;
+    cursor: pointer;
+  }
 `;
 
 export const StyledTextField = styled.input<StyledTextFieldProps>`

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -1,17 +1,19 @@
 import {
   StyledFieldLabel,
   StyledHelperLabel,
+  StyledSearchPrefixContainer,
+  StyledSuffixIconContainer,
   StyledSuffixText,
   StyledTextField,
   StyledTextFieldWrapper,
 } from './TextField.style';
 import { TextFieldProps } from './TextField.type';
 
 export const TextField = ({
-  isNegative,
-  isPositive,
-  isFocused,
-  isTyping,
+  isNegative = false,
+  isPositive = false,
+  isFocused = false,
+  isTyping = false,
   fieldLabel,
   helperLabel,
   suffix,
@@ -30,12 +32,12 @@ export const TextField = ({
         $isDisabled={props.disabled}
         $width={width}
       >
-        {searchPrefix}
+        <StyledSearchPrefixContainer>{searchPrefix}</StyledSearchPrefixContainer>
         <StyledTextField {...props} />
         {typeof suffix === 'string' ? (
           <StyledSuffixText $isDisabled={props.disabled}>{suffix}</StyledSuffixText>
         ) : (
-          suffix
+          <StyledSuffixIconContainer>{suffix}</StyledSuffixIconContainer>
         )}
       </StyledTextFieldWrapper>
       {helperLabel && (

diff --git a/src/components/Toast/Toast.stories.tsx b/src/components/Toast/Toast.stories.tsx
@@ -20,6 +20,7 @@ const meta: Meta<typeof Toast> = {
           <h2> 주의사항 </h2>
           <ol>
             <li>width props 값이 fit-content보다 작을 경우 적용되지 않습니다.</li>
+            <li>Toast의 z-index 값은 9999입니다.</li>
           </ol>
           <br />
           <Title>useToast</Title>

diff --git a/src/components/Toast/Toast.style.ts b/src/components/Toast/Toast.style.ts
@@ -42,6 +42,7 @@ const setToastAnimation = ($duration: ToastDuration) => {
 
 export const StyledToastWrapper = styled.div`
   position: fixed;
+  z-index: 9999;
   inset: 0px;
   width: 100%;
   height: 100%;

diff --git a/src/style/globalStyle/GlobalStyle.tsx b/src/style/globalStyle/GlobalStyle.tsx
@@ -1,10 +1,18 @@
 import { createGlobalStyle } from 'styled-components';
+import WebFont from 'webfontloader';
+
+WebFont.load({
+  custom: {
+    families: ['Spoqa Han Sans Neo'],
+    urls: ['//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css'],
+  },
+});
 
 export const GlobalStyles = createGlobalStyle`
-    * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-        font-family: 'Spoqa Han Sans Neo', 'sans-serif';
-    }
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'Spoqa Han Sans Neo', 'sans-serif';
+  }
 `;