feat: InputForm 컴포넌트 구현 (#15)

Space-Club · Oct 24, 2023 · 3015238 · 3015238
1 parent cbd020e
commit 3015238
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 32 deletions.
diff --git a/src/componenets/common/InputForm/InputForm.style.ts 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
@@ -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
@@ -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
@@ -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>
   );