issue-tracker-08#20 refactor: TextInput Component 리뷰 반영

- height 대신 variant props로 수정
youzysu · Jul 27, 2023 · 13fb23c · 13fb23c
1 parent b3da89e
commit 13fb23c
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 17 deletions.
diff --git a/fe/src/App.tsx b/fe/src/App.tsx
@@ -1,5 +1,6 @@
 import DropdownIndicator from "@components/Dropdown/DropdownIndicator";
 import Logo from "@components/common/Logo";
+import TextInput from "@components/common/TextInput";
 import GlobalStyle from "@styles/GlobalStyle";
 import { darkMode, lightMode } from "@styles/designSystem";
 import { useState } from "react";
@@ -115,6 +116,19 @@ export default function App() {
           ]}
         />
       </div>
+      <div style={{ width: "500px" }}>
+        <TextInput
+          variant="tall"
+          name="아이디"
+          helpText="영문 숫자 조합 6자 이상"
+          hasError={false}
+        />
+        <TextInput
+          variant="short"
+          name="설명(선택)"
+          placeholderText="마일스톤에 대한 설명을 입력하세요"
+        />
+      </div>
     </ThemeProvider>
   );
 }

diff --git a/fe/src/components/common/TextInput.tsx b/fe/src/components/common/TextInput.tsx
@@ -3,19 +3,19 @@ import styled from "styled-components";
 
 type TextInputProps = {
   name: string;
-  height: 40 | 56;
+  variant: "tall" | "short";
   placeholderText?: string;
   hasError?: boolean;
   helpText?: string;
 };
 
 export default function TextInput(props: TextInputProps) {
-  const { name, height, placeholderText, hasError, helpText } = props;
+  const { name, variant, placeholderText, hasError, helpText } = props;
 
   const [content, setContent] = useState("");
   const [isFocused, setIsFocused] = useState(false);
 
-  const isHighHeight = height === 56;
+  const isTallType = variant === "tall";
   const textInputState = isFocused ? "active" : hasError ? "error" : "enabled";
   const typingState = isFocused
     ? "onTyping"
@@ -28,10 +28,10 @@ export default function TextInput(props: TextInputProps) {
   };
 
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
-      <InputContainer $height={height} $state={textInputState}>
-        {isHighHeight && content && <Label htmlFor={name}>{name}</Label>}
-        {!isHighHeight && <Label htmlFor={name}>{name}</Label>}
+    <StyledTextInput>
+      <InputContainer $variant={variant} $state={textInputState}>
+        {isTallType && content && <Label htmlFor={name}>{name}</Label>}
+        {!isTallType && <Label htmlFor={name}>{name}</Label>}
         <Input
           id={name}
           type="text"
@@ -46,23 +46,34 @@ export default function TextInput(props: TextInputProps) {
       {helpText && (
         <HelpTextArea $state={textInputState}>{helpText}</HelpTextArea>
       )}
-    </div>
+    </StyledTextInput>
   );
 }
 
+const INPUT_HEIGHT = {
+  tall: 56,
+  short: 40,
+};
+
+const StyledTextInput = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
 const InputContainer = styled.div<{
-  $height: number;
+  $variant: "tall" | "short";
   $state: "enabled" | "active" | "disabled" | "error";
 }>`
   display: flex;
-  flex-direction: ${({ $height }) => ($height === 56 ? "column" : "row")};
+  flex-direction: ${({ $variant }) => ($variant === "tall" ? "column" : "row")};
   width: 100%;
-  justify-content: ${({ $height }) =>
-    $height === 56 ? "center" : "space-between"};
+  justify-content: ${({ $variant }) =>
+    $variant === "tall" ? "center" : "space-between"};
   padding: 0px 16px;
   gap: 8px;
   color: ${({ theme: { neutral } }) => neutral.text.weak};
-  height: ${({ $height }) => $height}px;
+  height: ${({ $variant }) => INPUT_HEIGHT[$variant]}px;
   border: ${({ $state, theme: { neutral, border, danger } }) => {
     const type = {
       active: `${border.default} ${neutral.border.defaultActive}`,
@@ -72,8 +83,8 @@ const InputContainer = styled.div<{
     };
     return type[$state];
   }};
-  border-radius: ${({ $height, theme: { radius } }) =>
-    $height === 56 ? `${radius.l}` : `${radius.m}`};
+  border-radius: ${({ $variant, theme: { radius } }) =>
+    $variant === "tall" ? `${radius.l}` : `${radius.m}`};
   background-color: ${({ $state, theme: { neutral } }) => {
     const type = {
       active: neutral.surface.strong,
@@ -83,8 +94,8 @@ const InputContainer = styled.div<{
     };
     return type[$state];
   }};
-  ${({ $state, theme: { opacity } }) =>
-    $state === "disabled" && `opacity: ${opacity.disabled};`}
+  opacity: ${({ $state, theme: { opacity } }) =>
+    $state === "disabled" && opacity.disabled};
 `;
 
 const Label = styled.label`