Feat(#38): Input 기본 스타일 코드 작성

src/components/Common/Divider/Divider.styled.ts

@@ -1,10 +1,9 @@
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 
 export interface DividerStyling {
   $direction: 'vertical' | 'horizontal';
 }
 
-// FIXME: 해당 코드가 적용이 되지 않는 현상이 발생하여 추후 수정이 필요합니다.
 export const getDirectionStyling = (
   direction: Required<DividerStyling>['$direction'],
 ) => {

src/components/Common/Divider/Divider.tsx

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef, ElementType } from 'react';
 
+import { getDirectionStyling } from './Divider.styled';
 import Flex from '../Flex/Flex';
 
 import type { DividerStyling } from './Divider.styled';
@@ -31,14 +32,7 @@ function Divider({ tag = 'div', styles, text, ...attributes }: DividerProps) {
         css={{ inset: '0px' }}
         aria-hidden="true"
       >
-        <Tag
-          css={{
-            width: styles.$direction === 'vertical' ? '1px' : '100%',
-            height: styles.$direction === 'vertical' ? '100%' : '1px',
-            backgroundColor: '#d1d5db',
-          }}
-          {...attributes}
-        />
+        <Tag css={[getDirectionStyling(styles.$direction)]} {...attributes} />
         {text && (
           <Flex
             styles={{

src/components/Common/Input/Input.styled.ts

@@ -1,6 +1,55 @@
+import { css } from '@emotion/react';
+
 export interface InputStyling {
+  $variant: 'default' | 'title';
+
   $width?: string;
   $isValid?: boolean;
   $void?: boolean;
   $resize?: boolean;
 }
+
+export const getVariantStyling = (
+  variant: Required<InputStyling>['$variant'],
+) => {
+  const style = {
+    title: css({
+      fontWeight: 'bold',
+      backgroundColor: 'transparent',
+
+      '&:focus': {
+        borderColor: '#008080',
+      },
+    }),
+    default: css({
+      borderRadius: '0.375rem',
+
+      '&:focus': {
+        outline: 'none',
+        boxShadow: '0 0 0 2px rgba(0, 128, 128, 0.5)',
+      },
+    }),
+  };
+  return style[variant];
+};
+
+export const getInputStyling = () => {
+  return css({
+    height: '2rem',
+    paddingLeft: '0.5rem',
+    paddingRight: '0.5rem',
+    transition: 'all 0.2s ease',
+
+    '::placeholder': {
+      color: '#D1D5DB',
+    },
+
+    '&:hover': {
+      borderColor: '#9CA3AF',
+    },
+
+    '&:focus': {
+      outline: 'none',
+    },
+  });
+};

src/components/Common/Input/Input.tsx

@@ -1,18 +1,20 @@
-import { ComponentPropsWithRef } from 'react';
+import type { ComponentPropsWithRef } from 'react';
+
+import { getInputStyling, getVariantStyling } from './Input.styled';
 
 import type { InputStyling } from './Input.styled';
 
 export interface InputProps extends ComponentPropsWithRef<'input'> {
+  /** Input 스타일 옵션 */
   styles: InputStyling;
 }
 
-function Input({ styles }: InputProps) {
-  const Tag = 'input';
-
+function Input({ styles, ...attributes }: InputProps) {
   return (
-    <div>
-      <Tag />
-    </div>
+    <input
+      css={[getInputStyling, getVariantStyling(styles.$variant)]}
+      {...attributes}
+    />
   );
 }
 

src/components/Common/InputText.ts

@@ -11,13 +11,14 @@ type InputTextProps = {
 const InputDefault = styled.input<InputTextProps>`
   ${tw`
     h-8
-    rounded-md
     px-2
     transition
 
     placeholder:text-gray-300
     hover:outline-gray-400
     focus:!outline-none
+
+    rounded-md
     focus:ring
     focus:ring-main
     `}
@@ -32,14 +33,15 @@ const InputDefault = styled.input<InputTextProps>`
 const InputTitle = styled.input<InputTextProps>`
   ${tw`
       h-8
-      bg-transparent
-      font-bold
       px-2
       transition
 
       placeholder:text-gray-300
       hover:border-gray-400
       focus:!outline-none
+      
+      font-bold
+      bg-transparent
       focus:border-main
   `}
   ${(props) => (props.$void ? '' : tw`border-b-2`)}

src/stories/Common/Input.stories.tsx

@@ -7,11 +7,20 @@ const meta: Meta<typeof Input> = {
   component: Input,
   tags: ['autodocs'],
   args: {
-    styles: {},
+    styles: {
+      $variant: 'default',
+    },
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+export const Title: Story = {
+  args: {
+    styles: {
+      $variant: 'title',
+    },
+  },
+};