From 436935a92e39e214a9948dae10cde326369879e7 Mon Sep 17 00:00:00 2001
From: KIMSEI1124 <workju1124@gmail.com>
Date: Sat, 9 Nov 2024 16:47:20 +0900
Subject: [PATCH] =?UTF-8?q?Feat(#38):=20Input=20=EA=B8=B0=EB=B3=B8=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=BD=94=EB=93=9C=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Common/Divider/Divider.styled.ts          |  3 +-
 src/components/Common/Divider/Divider.tsx     | 10 +---
 src/components/Common/Input/Input.styled.ts   | 49 +++++++++++++++++++
 src/components/Common/Input/Input.tsx         | 16 +++---
 src/components/Common/InputText.ts            |  8 +--
 src/stories/Common/Input.stories.tsx          | 11 ++++-
 6 files changed, 76 insertions(+), 21 deletions(-)

diff --git a/src/components/Common/Divider/Divider.styled.ts b/src/components/Common/Divider/Divider.styled.ts
index b1934eb..432f3a1 100644
--- a/src/components/Common/Divider/Divider.styled.ts
+++ b/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'],
 ) => {
diff --git a/src/components/Common/Divider/Divider.tsx b/src/components/Common/Divider/Divider.tsx
index c4162c6..0006af6 100644
--- a/src/components/Common/Divider/Divider.tsx
+++ b/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={{
diff --git a/src/components/Common/Input/Input.styled.ts b/src/components/Common/Input/Input.styled.ts
index da4cd6f..1f57fac 100644
--- a/src/components/Common/Input/Input.styled.ts
+++ b/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',
+    },
+  });
+};
diff --git a/src/components/Common/Input/Input.tsx b/src/components/Common/Input/Input.tsx
index c4afc52..381a043 100644
--- a/src/components/Common/Input/Input.tsx
+++ b/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}
+    />
   );
 }
 
diff --git a/src/components/Common/InputText.ts b/src/components/Common/InputText.ts
index 9f78737..1fc113d 100644
--- a/src/components/Common/InputText.ts
+++ b/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`)}
diff --git a/src/stories/Common/Input.stories.tsx b/src/stories/Common/Input.stories.tsx
index 63ed187..b31ed46 100644
--- a/src/stories/Common/Input.stories.tsx
+++ b/src/stories/Common/Input.stories.tsx
@@ -7,7 +7,9 @@ const meta: Meta<typeof Input> = {
   component: Input,
   tags: ['autodocs'],
   args: {
-    styles: {},
+    styles: {
+      $variant: 'default',
+    },
   },
 };
 
@@ -15,3 +17,10 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+export const Title: Story = {
+  args: {
+    styles: {
+      $variant: 'title',
+    },
+  },
+};