fix: searchPrefix icon size & add Prefix container

yourssu · May 16, 2024 · f927dbb · f927dbb
1 parent 13ec87e
commit f927dbb
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/src/components/TextField/SearchTextField/SearchTextField.tsx b/src/components/TextField/SearchTextField/SearchTextField.tsx
@@ -25,7 +25,7 @@ export const SearchTextField = ({ onClickClearButton, ...props }: SearchTextFiel
         <IconContext.Provider
           value={{
             color: theme.color.textTertiary,
-            size: '1.5rem',
+            size: '1.25rem',
           }}
         >
           <IcSearchLine />

diff --git a/src/components/TextField/TextField.style.ts b/src/components/TextField/TextField.style.ts
@@ -16,6 +16,10 @@ export const StyledSuffixIconContainer = styled.div<StyledTextFieldProps>`
   display: none;
 `;
 
+export const StyledSearchPrefixContainer = styled.div`
+  display: flex;
+`;
+
 export const StyledTextFieldWrapper = styled.div<StyledTextFieldProps>`
   width: ${({ $width }) => $width};
   height: 46px;

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -1,6 +1,7 @@
 import {
   StyledFieldLabel,
   StyledHelperLabel,
+  StyledSearchPrefixContainer,
   StyledSuffixIconContainer,
   StyledSuffixText,
   StyledTextField,
@@ -31,14 +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>
         ) : (
-          <StyledSuffixIconContainer $isDisabled={props.disabled}>
-            {suffix}
-          </StyledSuffixIconContainer>
+          <StyledSuffixIconContainer>{suffix}</StyledSuffixIconContainer>
         )}
       </StyledTextFieldWrapper>
       {helperLabel && (