fix: duplicate class name in suffix icon (#97)

* fix: duplicate class name in suffix icon * refactor: setting default value in TextField * refactor: modify suffix type in SuffixTextField * fix: add suffix icon visibility * fix: add input active property * Update src/components/TextField/TextField.style.ts Co-authored-by: 이유진 <[email protected]> --------- Co-authored-by: 이유진 <[email protected]>
yourssu · May 16, 2024 · f48f4e2 · f48f4e2
1 parent 3d0b90a
commit f48f4e2
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 40 deletions.
diff --git a/src/components/TextField/PasswordTextField/PasswordTextField.tsx b/src/components/TextField/PasswordTextField/PasswordTextField.tsx
@@ -9,23 +9,28 @@ import { TextField } from '../TextField';
 import { PasswordTextFieldProps } from './PasswordTextField.type';
 
 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,9 +18,7 @@ export const SearchTextField = ({ onClickClearButton, ...props }: SearchTextFiel
             size: '1rem',
           }}
         >
-          <div className="suffix-icon clear-icon" onClick={onClickClearButton}>
-            <IcXLine />
-          </div>
+          <IcXLine onClick={onClickClearButton} />
         </IconContext.Provider>
       }
       searchPrefix={

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,10 @@ interface StyledTextFieldProps {
   $width?: TextFieldProps['width'];
 }
 
+export const StyledSuffixIconContainer = styled.div<StyledTextFieldProps>`
+  display: none;
+`;
+
 export const StyledTextFieldWrapper = styled.div<StyledTextFieldProps>`
   width: ${({ $width }) => $width};
   height: 46px;
@@ -27,18 +31,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 +42,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,18 @@
 import {
   StyledFieldLabel,
   StyledHelperLabel,
+  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,
@@ -35,7 +36,9 @@ export const TextField = ({
         {typeof suffix === 'string' ? (
           <StyledSuffixText $isDisabled={props.disabled}>{suffix}</StyledSuffixText>
         ) : (
-          suffix
+          <StyledSuffixIconContainer $isDisabled={props.disabled}>
+            {suffix}
+          </StyledSuffixIconContainer>
         )}
       </StyledTextFieldWrapper>
       {helperLabel && (