From c9e81b8a25545621348ecdc8df6e375591febeab Mon Sep 17 00:00:00 2001
From: SongInJae <pan0663@naver.com>
Date: Tue, 24 Oct 2023 18:49:13 +0900
Subject: [PATCH] Skrf 140 feat register function (#17)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: inputform 공통컴포넌트 수정

* feat: inputform 공통컴포넌트 placeholder 속성 추가

* 초기설정 페이지 기능 구현 초안 완료

* design: 코드리뷰 반영

* fix: 빌드 오류 수정
---
 src/components/common/InputForm/InputForm.tsx | 31 ++++++++--
 src/components/common/index.ts                |  0
 src/pages/RegisterPage/RegisterPage.tsx       | 62 +++++++++++++++++--
 3 files changed, 84 insertions(+), 9 deletions(-)
 create mode 100644 src/components/common/index.ts

diff --git a/src/components/common/InputForm/InputForm.tsx b/src/components/common/InputForm/InputForm.tsx
index 2674cc1a..47c37c61 100644
--- a/src/components/common/InputForm/InputForm.tsx
+++ b/src/components/common/InputForm/InputForm.tsx
@@ -1,16 +1,37 @@
+import { ChangeEvent, RefObject } from 'react';
+
 import { InputStyled, InputWrapper, LabelStyled } from './InputForm.style';
 
-interface InputForm {
+interface InputForm<T> {
   labelText: string;
-  labelId: string;
   inputType: 'date' | 'file' | 'number' | 'search' | 'tel' | 'text' | 'time';
+  placeholoder?: string;
+  inputRef?: RefObject<HTMLInputElement>;
+  value?: T;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
 
-const InputForm = ({ labelText, labelId, inputType, ...props }: InputForm) => {
+const InputForm = <T extends string | number | string[]>({
+  labelText,
+  inputType,
+  placeholoder,
+  inputRef,
+  value,
+  onChange,
+  ...props
+}: InputForm<T>) => {
   return (
     <InputWrapper>
-      <LabelStyled htmlFor={labelId}>{labelText}</LabelStyled>
-      <InputStyled id={labelId} type={inputType} {...props} />
+      <LabelStyled htmlFor={labelText}>{labelText}</LabelStyled>
+      <InputStyled
+        id={labelText}
+        type={inputType}
+        ref={inputRef}
+        placeholder={placeholoder}
+        value={value}
+        onChange={onChange}
+        {...props}
+      />
     </InputWrapper>
   );
 };
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/RegisterPage/RegisterPage.tsx b/src/pages/RegisterPage/RegisterPage.tsx
index 65130e2d..a9703e99 100644
--- a/src/pages/RegisterPage/RegisterPage.tsx
+++ b/src/pages/RegisterPage/RegisterPage.tsx
@@ -1,14 +1,68 @@
-import InputForm from '@components/common/InputForm/InputForm';
+import InputForm from '@/components/common/InputForm/InputForm';
+
+import { ChangeEvent, MouseEvent, useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import { Container, SubmitBtn, Title } from './RegisterPage.style';
 
 const RegisterPage = () => {
+  const [name, setName] = useState<string>('');
+  const [number, setNumber] = useState<string>('');
+  const nameRef = useRef<HTMLInputElement>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Todo: 로그인 페이지에서 온 것이 아닐 경우 처리
+    nameRef.current?.focus();
+  }, []);
+
+  const validationName = (input: string) => {
+    const regex = /^[가-힣ㄱ-ㅎㅏ-ㅣ]+$/;
+    return regex.test(input);
+  };
+  const validationNumber = (input: string) => {
+    const regex = /^[0-9]+$/;
+    return regex.test(input);
+  };
+
+  const handleChangeName = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    if (value !== '' && !validationName(value)) return;
+    setName(value);
+  };
+  const handleChangeNumber = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    if (value !== '' && !validationNumber(value)) return;
+    setNumber(value);
+  };
+
+  const handleSubmit = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+
+    // Todo: 제출 api 처리
+
+    navigate('/');
+  };
+
   return (
     <Container>
       <Title>추가 정보를 입력해주세요</Title>
-      <InputForm labelText="이름" labelId="id" inputType="text" />
-      <InputForm labelText="연락처" labelId="number" inputType="tel" />
-      <SubmitBtn>가입 완료</SubmitBtn>
+      <InputForm
+        labelText="이름"
+        inputType="text"
+        placeholoder="이름을 입력해주세요."
+        value={name}
+        inputRef={nameRef}
+        onChange={handleChangeName}
+      />
+      <InputForm
+        labelText="연락처"
+        inputType="tel"
+        placeholoder="숫자만 입력해주세요."
+        value={number}
+        onChange={handleChangeNumber}
+      />
+      <SubmitBtn onClick={handleSubmit}>가입 완료</SubmitBtn>
     </Container>
   );
 };