#1 refactor: 상태에 따른 스타일링 변수로 분리

Codeit-Part4-SFJs · May 23, 2024 · faf0d94 · faf0d94
1 parent ee77e91
commit faf0d94
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/shared/ui/Input/AuthInput.tsx b/src/shared/ui/Input/AuthInput.tsx
@@ -14,6 +14,10 @@ const AuthInput = ({
 }: InputProps) => {
   const [showPasswordIcon, setShowPasswordIcon] = useState(false);
 
+  const hasErrorStyle = errors[id]
+    ? "border-red focus:border-red"
+    : "border-gray-35 focus:border-main-blue";
+
   const toggleIcon = () => {
     setShowPasswordIcon(!showPasswordIcon);
   };
@@ -29,7 +33,7 @@ const AuthInput = ({
       <div className="relative w-[335px] md:w-[440px] lg:w-[640px] h-[55px] lg:h-[70px]">
         <input
           id={id}
-          className={`w-full h-full px-5 py-[23px] rounded-lg border border-solid bg-black-25 text-gray-F1 text-sm lg:text-base font-normal placeholder-gray-6E focus:outline-none ${errors[id] ? "border-red focus:border-red" : "border-gray-35 focus:border-main-blue"}`}
+          className={`w-full h-full px-5 py-[23px] rounded-lg border border-solid bg-black-25 text-gray-F1 text-sm lg:text-base font-normal placeholder-gray-6E focus:outline-none ${hasErrorStyle}`}
           type={showPasswordIcon ? "text" : type}
           placeholder={placeholder}
           {...register(id, validation)}
@@ -43,15 +47,16 @@ const AuthInput = ({
           />
         )}
       </div>
-      {errors[id] && (
+      {errors[id] ? (
         <span className="text-red text-xs lg:text-sm font-normal">
           {errors[id]?.message}
         </span>
-      )}
-      {!errors[id] && helperText && (
-        <span className="text-gray-6E text-xs lg:text-sm font-normal">
-          {helperText}
-        </span>
+      ) : (
+        helperText && (
+          <span className="text-gray-6E text-xs lg:text-sm font-normal">
+            {helperText}
+          </span>
+        )
       )}
     </div>
   );

diff --git a/src/shared/ui/Input/TextBoxInput.tsx b/src/shared/ui/Input/TextBoxInput.tsx
@@ -6,11 +6,13 @@ const TextBoxInput = () => {
   const { register, watch } = useForm();
   const [isFocused, setIsFocused] = useState(false);
 
+  const focusStyle = isFocused ? "border-main-blue" : "border-gray-35";
+
   const text = watch("textarea", "");
 
   return (
     <div
-      className={`relative w-[295px] md:w-[510px] lg:w-[540px] h-[120px] md:h-[160px] p-5 rounded-lg border border-solid ${isFocused ? "border-main-blue" : "border-gray-35"} bg-black-25`}
+      className={`relative w-[295px] md:w-[510px] lg:w-[540px] h-[120px] md:h-[160px] p-5 rounded-lg border border-solid ${focusStyle} bg-black-25`}
     >
       <textarea
         className="scrollbar-hide w-full h-[66px] md:h-[106px] bg-black-25 text-gray-F1 text-sm lg:text-base font-normal placeholder-gray-6 resize-none focus:outline-none leading-5 lg:leading-[22px]"