[Feature] - Input 컴포넌트 리팩토링 (#310)

* feat: Input 컴포넌트에 variants 추가

- border bottom이 있는 input 추가
- focus 했을 때만 border bottom이 생기는 input 추가

* test: 추가된 Input storybook 추가

* fix: 안쓰는 import문 삭제

* refactor: InputVariants type 수정

frontend/src/components/common/Input/Input.stories.tsx

@@ -26,3 +26,19 @@ export const Default: Story = {
     maxCount: 20,
   },
 };
+
+export const BottomBorderInput: Story = {
+  args: {
+    label: "제목",
+    placeholder: "제목을 입력해 주세요.",
+    variants: "bottom",
+  },
+};
+
+export const FocusBottomBorderInput: Story = {
+  args: {
+    label: "제목",
+    placeholder: "제목을 입력해 주세요.",
+    variants: "none",
+  },
+};

frontend/src/components/common/Input/Input.styled.ts

@@ -1,6 +1,9 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
-import { PRIMITIVE_COLORS } from "@styles/tokens";
+import theme from "@styles/theme";
+
+import type { InputVariants } from "./Input.type";
 
 export const InputContainer = styled.div`
   display: flex;
@@ -15,20 +18,14 @@ export const Label = styled.label`
   color: ${(props) => props.theme.colors.text.primary};
 `;
 
-export const Input = styled.input`
+export const Input = styled.input<{ variant: InputVariants }>`
   width: 100%;
   padding: 1.2rem 1.6rem;
-  border: 0.1rem solid ${({ theme }) => theme.colors.border};
   border-radius: 8px;
 
   ${({ theme }) => theme.typography.mobile.detail}
   color: ${({ theme }) => theme.colors.text.primary};
 
-  &:focus {
-    border-color: ${PRIMITIVE_COLORS.black};
-    outline: none;
-  }
-
   &:disabled {
     background-color: ${({ theme }) => theme.colors.background.disabled};
 
@@ -38,4 +35,49 @@ export const Input = styled.input`
   &::placeholder {
     color: ${({ theme }) => theme.colors.text.secondary};
   }
+
+  ${({ variant }) => {
+    if (variant === "round") return roundStyle;
+    if (variant === "bottom") return bottomStyle;
+    if (variant === "none") return noneStyle;
+  }}
+`;
+export const roundStyle = css`
+  border: 0.1rem solid ${theme.colors.border};
+
+  &:focus {
+    border-color: ${theme.colors.border};
+    outline: none;
+  }
+`;
+
+export const bottomStyle = css`
+  border: none;
+  border-bottom: 1px solid ${theme.colors.border};
+  border-radius: 0;
+
+  &:focus {
+    outline: none;
+    border-bottom: 1px solid ${theme.colors.border};
+  }
+
+  &:focus-visible {
+    outline: none;
+    border-bottom: 1px solid ${theme.colors.border};
+  }
+`;
+
+export const noneStyle = css`
+  border: none;
+  border-radius: 0;
+
+  &:focus {
+    outline: none;
+    border-bottom: 1px solid ${theme.colors.border};
+  }
+
+  &:focus-visible {
+    outline: none;
+    border-bottom: 1px solid ${theme.colors.border};
+  }
 `;

frontend/src/components/common/Input/Input.tsx

@@ -2,19 +2,21 @@ import { forwardRef } from "react";
 
 import CharacterCount from "../CharacterCount/CharacterCount";
 import * as S from "./Input.styled";
+import type { InputVariants } from "./Input.type";
 
-interface InputProps extends React.ComponentPropsWithRef<'input'> {
+interface InputProps extends React.ComponentPropsWithRef<"input"> {
   count?: number;
   maxCount?: number;
   label?: string;
+  variants?: InputVariants;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ label, count, maxCount, ...props }, ref) => {
+  ({ label, count, maxCount, variants = "round", ...props }, ref) => {
     return (
       <S.InputContainer>
         <S.Label>{label}</S.Label>
-        <S.Input {...props} ref={ref} />
+        <S.Input variant={variants} {...props} ref={ref} />
         <CharacterCount count={count} maxCount={maxCount} />
       </S.InputContainer>
     );

frontend/src/components/common/Input/Input.type.ts

@@ -0,0 +1 @@
+export type InputVariants = "round" | "bottom" | "none";