Merge pull request #217 from Nexters/fix/input-border

fix: 인풋 포커스 일때만 보더 색상 검정
Nexters · Oct 11, 2024 · 82572b0 · 82572b0
2 parents c708537 + a8ef4ca
commit 82572b0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 12 deletions.
diff --git a/...dmin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts b/...dmin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts
@@ -6,7 +6,6 @@ interface ShowInfoFormLabelProps {
 }
 
 interface InputWrapperProps {
-  text: string;
   isError?: boolean;
 }
 
@@ -46,12 +45,7 @@ const FieldWrap = styled.div`
 const InputWrapper = styled.div<InputWrapperProps>`
   ${({ theme }) => theme.typo.b3};
   border: 1px solid
-    ${({ text, theme, isError }) =>
-      isError
-        ? theme.palette.status.error
-        : text
-          ? theme.palette.grey.g90
-          : theme.palette.grey.g20};
+    ${({ theme, isError }) => (isError ? theme.palette.status.error : theme.palette.grey.g20)};
   border-radius: 4px;
   background-color: ${({ theme }) => theme.palette.grey.w};
   padding: 8px 12px;
@@ -61,6 +55,12 @@ const InputWrapper = styled.div<InputWrapperProps>`
   display: flex;
   align-items: center;
   width: 100%;
+  transition: border-color 0.2s ease-in-out;
+
+  &:focus-within {
+    border-color: ${({ theme, isError }) =>
+      isError ? theme.palette.status.error : theme.palette.grey.g70};
+  }
 `;
 
 const TextFieldWrap = styled.div`

diff --git a/apps/admin/src/components/ShowCastInfoFormDialogContent/index.tsx b/apps/admin/src/components/ShowCastInfoFormDialogContent/index.tsx
@@ -109,7 +109,7 @@ const ShowCastInfoFormDialogContent = ({ onDelete, prevShowCastInfo, onSave }: P
                 );
                 return (
                   <Styled.FieldWrap>
-                    <Styled.InputWrapper text={value ?? ''} isError={isError}>
+                    <Styled.InputWrapper isError={isError}>
                       {field.userImgPath && field.userNickname ? (
                         <>
                           <Styled.UserImage
@@ -195,10 +195,7 @@ const ShowCastInfoFormDialogContent = ({ onDelete, prevShowCastInfo, onSave }: P
                 const isError = isMemberFieldBlurred[index].roleName && !value;
                 return (
                   <Styled.FieldWrap>
-                    <Styled.InputWrapper
-                      text={value ?? ''}
-                      isError={isMemberFieldBlurred[index].roleName && !value}
-                    >
+                    <Styled.InputWrapper isError={isMemberFieldBlurred[index].roleName && !value}>
                       <Styled.Input
                         placeholder="역할"
                         required