fix: 인풋 포커스 일때만 보더 색상 검정

Nexters · Oct 11, 2024 · 012b617 · 012b617
1 parent c708537
commit 012b617
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/...dmin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts b/...dmin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts
@@ -46,12 +46,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 +56,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`