refactor/BibimMandu-IssueTacker#146: TextInput 컴포넌트 리팩토링

qkdflrgs · Aug 10, 2023 · 436b274 · 436b274
1 parent 7624903
commit 436b274
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/FE/src/components/common/TextInput/TextInput.tsx b/FE/src/components/common/TextInput/TextInput.tsx
@@ -38,7 +38,11 @@ export default function TextInput({
   return (
     <Container>
       <InputWrapper isFocus={isFocus} $size={size} $direction={direction}>
-        {isFocus && <Label htmlFor={id}>{label}</Label>}
+        {isFocus && (
+          <Label htmlFor={id} $direction={direction}>
+            {label}
+          </Label>
+        )}
         <Input
           id={id}
           inputType={inputType}
@@ -68,6 +72,7 @@ const InputWrapper = styled.div<{
   padding: 8px 16px;
   display: flex;
   justify-content: center;
+  align-items: ${({ $direction }) => ($direction === "row" ? "center" : "")};
   flex-direction: ${({ $direction }) =>
     $direction === "column" ? "column" : "row"};
   width: 100%;
@@ -79,7 +84,8 @@ const InputWrapper = styled.div<{
   border-radius: ${({ theme }) => theme.radius.large};
 `;
 
-const Label = styled.label`
+const Label = styled.label<{ $direction: "row" | "column" }>`
+  width: ${({ $direction }) => ($direction === "row" ? "64px" : "")};
   font: ${({ theme }) => theme.font.displayMedium12};
   color: ${({ theme }) => theme.colorSystem.neutral.text.weak};
 `;