feat: InputBasic Component 구현

Co-authored-by: YongRae_Kim <kyr9389@naver.com>

src/components/InputBasic.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const InputBasicStyle = styled.input`
+  background-color: #ecebf1;
+  color: #04c09e;
+  height: 45px;
+  width: 100%;
+  text-align: center;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-size: 18px;
+  border-color: #9ca3af;
+  border: none;
+  border-radius: 0.25rem;
+`;
+
+export const InputBasic = ({ type, placeholder, value, onChange }) => {
+  return (
+    <InputBasicStyle
+      type={type}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+    />
+  );
+};

src/stories/InputBasic.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const InputBasicStyle = styled.input`
+  background-color: #ecebf1;
+  color: #04c09e;
+  height: 45px;
+  width: 100%;
+  text-align: center;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  font-size: 18px;
+  border-color: #9ca3af;
+  border: none;
+  border-radius: 0.25rem;
+`;
+
+export const InputBasic = ({ type, placeholder, value, onChange }) => {
+  return (
+    <InputBasicStyle
+      type={type}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+    />
+  );
+};

src/stories/InputBasic.stories.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { InputBasic } from './InputBasic';
+
+export default {
+  title: 'Example/InputBasic',
+  component: InputBasic,
+};
+
+const Template = (args) => <InputBasic {...args} />;
+
+export const CardNumberInput = Template.bind({});
+CardNumberInput.args = {
+  type: 'text',
+  placeholder: 'test holder',
+};