From fac0a011f12526458c9cebf555d80f6aad21dd71 Mon Sep 17 00:00:00 2001
From: SongInJae <pan0663@naver.com>
Date: Tue, 24 Oct 2023 15:13:07 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20InputForm=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/InputForm/InputForm.style.ts       | 18 ++++++++++++++++
 .../common/InputForm/InputForm.tsx            | 18 ++++++++++++++++
 src/pages/RegisterPage/RegisterPage.style.ts  | 15 -------------
 src/pages/RegisterPage/RegisterPage.tsx       | 21 ++++---------------
 4 files changed, 40 insertions(+), 32 deletions(-)
 create mode 100644 src/componenets/common/InputForm/InputForm.style.ts
 create mode 100644 src/componenets/common/InputForm/InputForm.tsx

diff --git a/src/componenets/common/InputForm/InputForm.style.ts b/src/componenets/common/InputForm/InputForm.style.ts
new file mode 100644
index 00000000..7d1b0c43
--- /dev/null
+++ b/src/componenets/common/InputForm/InputForm.style.ts
@@ -0,0 +1,18 @@
+import Theme from '@/styles/Theme';
+import styled from '@emotion/styled';
+
+export const InputWrapper = styled.div`
+  width: 100%;
+`;
+export const LabelStyled = styled.label`
+  display: block;
+`;
+export const InputStyled = styled.input`
+  width: 100%;
+  height: 3rem;
+  border: none;
+  outline: none;
+  background-color: ${Theme.color.gray};
+  padding-left: 1rem;
+  box-sizing: border-box;
+`;
diff --git a/src/componenets/common/InputForm/InputForm.tsx b/src/componenets/common/InputForm/InputForm.tsx
new file mode 100644
index 00000000..2674cc1a
--- /dev/null
+++ b/src/componenets/common/InputForm/InputForm.tsx
@@ -0,0 +1,18 @@
+import { InputStyled, InputWrapper, LabelStyled } from './InputForm.style';
+
+interface InputForm {
+  labelText: string;
+  labelId: string;
+  inputType: 'date' | 'file' | 'number' | 'search' | 'tel' | 'text' | 'time';
+}
+
+const InputForm = ({ labelText, labelId, inputType, ...props }: InputForm) => {
+  return (
+    <InputWrapper>
+      <LabelStyled htmlFor={labelId}>{labelText}</LabelStyled>
+      <InputStyled id={labelId} type={inputType} {...props} />
+    </InputWrapper>
+  );
+};
+
+export default InputForm;
diff --git a/src/pages/RegisterPage/RegisterPage.style.ts b/src/pages/RegisterPage/RegisterPage.style.ts
index 650e3d68..ed60902c 100644
--- a/src/pages/RegisterPage/RegisterPage.style.ts
+++ b/src/pages/RegisterPage/RegisterPage.style.ts
@@ -15,21 +15,6 @@ export const Title = styled.div`
   font-family: 'MainBold';
   font-size: 2rem;
 `;
-export const InputWrapper = styled.div`
-  width: 100%;
-`;
-export const LabelStyled = styled.label`
-  display: block;
-`;
-export const InputStyled = styled.input`
-  width: 100%;
-  height: 3rem;
-  border: none;
-  outline: none;
-  background-color: ${Theme.color.gray};
-  padding-left: 1rem;
-  box-sizing: border-box;
-`;
 export const SubmitBtn = styled.button`
   width: 100%;
   padding: 0.5rem 0;
diff --git a/src/pages/RegisterPage/RegisterPage.tsx b/src/pages/RegisterPage/RegisterPage.tsx
index b70a3b2a..df13247f 100644
--- a/src/pages/RegisterPage/RegisterPage.tsx
+++ b/src/pages/RegisterPage/RegisterPage.tsx
@@ -1,26 +1,13 @@
-import React from 'react';
+import InputForm from '@/componenets/common/InputForm/InputForm';
 
-import {
-  Container,
-  InputStyled,
-  InputWrapper,
-  LabelStyled,
-  SubmitBtn,
-  Title,
-} from './RegisterPage.style';
+import { Container, SubmitBtn, Title } from './RegisterPage.style';
 
 const RegisterPage = () => {
   return (
     <Container>
       <Title>추가 정보를 입력해주세요</Title>
-      <InputWrapper>
-        <LabelStyled htmlFor="id">이름</LabelStyled>
-        <InputStyled id="id" type="text" />
-      </InputWrapper>
-      <InputWrapper>
-        <LabelStyled htmlFor="number">연락처</LabelStyled>
-        <InputStyled id="number" type="tel" />
-      </InputWrapper>
+      <InputForm labelText="이름" labelId="id" inputType="text" />
+      <InputForm labelText="연락처" labelId="number" inputType="tel" />
       <SubmitBtn>가입 완료</SubmitBtn>
     </Container>
   );