style: #11 input, textarea focus시 border color, 개수 text 컬러 적용

depromeet · Aug 9, 2024 · f5f2c54 · f5f2c54
1 parent e8fc126
commit f5f2c54
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/src/component/common/input/Input.tsx b/src/component/common/input/Input.tsx
@@ -1,5 +1,5 @@
 import { css } from "@emotion/react";
-import { forwardRef, useContext } from "react";
+import { forwardRef, useContext, useState } from "react";
 
 import { InputContext } from "./InputLabelContainer";
 
@@ -15,16 +15,19 @@ type InputProps = {
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(function ({ id, width = "100%", count, ...props }, ref) {
   const { maxLength, value } = props;
+  const [isFocused, setIsFocused] = useState(false);
   const inputContext = useContext(InputContext);
   return (
     <div>
       <div
         css={css`
           width: ${width};
-          border: 1px solid ${"#e3e6ea"}; // FIXME: 디자인 토큰 적용하기
+          border: 1px solid;
+          border-color: ${isFocused ? DESIGN_SYSTEM_COLOR.theme3 : "#e3e6ea"}; // FIXME: 디자인 토큰 적용하기
           border-radius: 0.8rem;
           padding: 1.6rem;
           display: flex;
+          transition: 0.2s all;
         `}
       >
         <input
@@ -36,10 +39,19 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function ({ id, wi
               color: ${DESIGN_SYSTEM_COLOR.lightGrey5};
             }
           `}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
           {...props}
         />
         {/* FIXME - typography 컬러 넣기 !! */}
-        {count && maxLength && <Typography variant="CAPTION" color={"lightGrey"}>{`${value.length}/${maxLength}`}</Typography>}
+        {count && maxLength && (
+          <>
+            <Typography variant="CAPTION" color={value.length ? "theme3" : "lightGrey"}>
+              {value.length}
+            </Typography>
+            <Typography variant="CAPTION" color={"lightGrey"}>{`/${maxLength}`}</Typography>
+          </>
+        )}
       </div>
     </div>
   );

diff --git a/src/component/common/input/TextArea.tsx b/src/component/common/input/TextArea.tsx
@@ -1,5 +1,5 @@
 import { css } from "@emotion/react";
-import { forwardRef, useContext } from "react";
+import { forwardRef, useContext, useState } from "react";
 
 import { InputContext } from "./InputLabelContainer";
 
@@ -16,6 +16,7 @@ type TextAreaProps = {
 
 export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function ({ id, width = "100%", height = "8.4rem", count, ...props }, ref) {
   const { maxLength, value } = props;
+  const [isFocused, setIsFocused] = useState(false);
   const textareaContext = useContext(InputContext);
   return (
     <div
@@ -36,7 +37,18 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
           ::placeholder {
             color: ${DESIGN_SYSTEM_COLOR.lightGrey5};
           }
+          width: ${width};
+          border: 1px solid;
+          border-color: ${isFocused ? DESIGN_SYSTEM_COLOR.theme3 : "#e3e6ea"}; // FIXME: 디자인 토큰 적용하기
+          border-radius: 0.8rem;
+          padding: 1.6rem;
+          display: flex;
+          flex-direction: column;
+          height: ${height};
+          transition: 0.2s all;
         `}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
         {...props}
       />
       {count && maxLength && (
@@ -45,7 +57,10 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
             align-self: flex-end;
           `}
         >
-          <Typography variant="CAPTION" color={"lightGrey"}>{`${value.length}/${maxLength}`}</Typography>
+          <Typography variant="CAPTION" color={value.length ? "theme3" : "lightGrey"}>
+            {value.length}
+          </Typography>
+          <Typography variant="CAPTION" color={"lightGrey"}>{`/${maxLength}`}</Typography>
         </div>
       )}
     </div>