Feat(#38): Input 컴포넌트 생성

What-s-Your-Plan · Nov 10, 2024 · 6e7d510 · 6e7d510
1 parent 436935a
commit 6e7d510
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 23 deletions.
diff --git a/src/components/Common/Input/Input.styled.ts b/src/components/Common/Input/Input.styled.ts
@@ -1,51 +1,78 @@
 import { css } from '@emotion/react';
 
-export interface InputStyling {
-  $variant: 'default' | 'title';
+import type { InputProps } from './Input';
 
-  $width?: string;
-  $isValid?: boolean;
-  $void?: boolean;
-  $resize?: boolean;
-}
+import { Theme } from '@/styles/Theme.ts';
 
 export const getVariantStyling = (
-  variant: Required<InputStyling>['$variant'],
+  variant: Required<InputProps>['$variant'],
 ) => {
   const style = {
     title: css({
       fontWeight: 'bold',
       backgroundColor: 'transparent',
-
+      border: 'none',
+      borderBottom: `2px solid ${Theme.color.black200}`,
       '&:focus': {
-        borderColor: '#008080',
+        borderColor: Theme.color.brown600,
       },
     }),
     default: css({
       borderRadius: '0.375rem',
+      border: `1px solid ${Theme.color.black200}`,
 
       '&:focus': {
         outline: 'none',
-        boxShadow: '0 0 0 2px rgba(0, 128, 128, 0.5)',
+        boxShadow: `0 0 0 2px ${Theme.color.brown600}`,
       },
     }),
   };
   return style[variant];
 };
 
+export const getFlexStyling = (size: Required<InputProps>['$size']) => {
+  const style = {
+    small: css({
+      margin: '6px 10px',
+    }),
+    medium: css({
+      margin: '10px 14px',
+    }),
+    large: css({
+      margin: '12px 16px',
+    }),
+  };
+  return style[size];
+};
+
+export const getSizeStyling = (size: Required<InputProps>['$size']) => {
+  const style = {
+    small: css({
+      padding: '6px 10px',
+    }),
+    medium: css({
+      padding: '8px 12px',
+    }),
+    large: css({
+      padding: '12px 16px',
+    }),
+  };
+  return style[size];
+};
+
 export const getInputStyling = () => {
   return css({
-    height: '2rem',
+    width: '100%',
     paddingLeft: '0.5rem',
     paddingRight: '0.5rem',
     transition: 'all 0.2s ease',
 
     '::placeholder': {
-      color: '#D1D5DB',
+      color: Theme.color.black400,
     },
 
     '&:hover': {
-      borderColor: '#9CA3AF',
+      borderColor: Theme.color.black200,
     },
 
     '&:focus': {

diff --git a/src/components/Common/Input/Input.tsx b/src/components/Common/Input/Input.tsx
@@ -1,20 +1,39 @@
 import type { ComponentPropsWithRef } from 'react';
 
-import { getInputStyling, getVariantStyling } from './Input.styled';
+import {
+  getInputStyling,
+  getVariantStyling,
+  getSizeStyling,
+  getFlexStyling,
+} from './Input.styled';
 
-import type { InputStyling } from './Input.styled';
+import Flex from '@/components/Common/Flex/Flex';
 
 export interface InputProps extends ComponentPropsWithRef<'input'> {
-  /** Input 스타일 옵션 */
-  styles: InputStyling;
+  /** Input 종류 */
+  $variant?: 'default' | 'title';
+  /** Input 크기 */
+  $size?: 'small' | 'medium' | 'large';
+
+  $disable?: boolean;
 }
 
-function Input({ styles, ...attributes }: InputProps) {
+function Input({
+  $variant = 'default',
+  $size = 'medium',
+  ...attributes
+}: InputProps) {
   return (
-    <input
-      css={[getInputStyling, getVariantStyling(styles.$variant)]}
-      {...attributes}
-    />
+    <Flex css={[getFlexStyling($size)]}>
+      <input
+        css={[
+          getInputStyling,
+          getVariantStyling($variant),
+          getSizeStyling($size),
+        ]}
+        {...attributes}
+      />
+    </Flex>
   );
 }