Feat: PersonalInformation이 state에 저장되도록 함 #33

src/app/recruit/apply/components/SmallInput.tsx

@@ -1,17 +1,29 @@
 import React from 'react'
 
 interface SmallInputProps {
+  onChangeInput: (e: React.ChangeEvent<HTMLInputElement>) => void
   placeholder: string
+  name: string
+  value: string
   title: string
 }
 
-const SmallInput = ({ title, placeholder }: SmallInputProps) => {
+const SmallInput = ({
+  title,
+  placeholder,
+  name,
+  value,
+  onChangeInput
+}: SmallInputProps) => {
   return (
     <div>
       <div className="text-[1.6rem] font-medium mb-[1.2rem]">{title}</div>
       <input
         className="text-[1.5rem] border-[1px] border-[#B7B7B7] w-full h-[5rem] shrink-0 rounded-[1rem]  p-[1.6rem_1.4rem]"
-        placeholder={placeholder}></input>
+        placeholder={placeholder}
+        name={name}
+        value={value || ''}
+        onChange={onChangeInput}></input>
     </div>
   )
 }

src/app/recruit/apply/container/ApplySection.tsx

@@ -16,6 +16,10 @@ const ApplySection = () => {
     setStep(prev => prev + 1)
   }
 
+  const onChangeInput = () => {
+    console.log('not yet')
+  }
+
   return (
     <section className="overflow-x-hidden pt-[2rem] bg-white text-black w-[100vw] h-[100vh]">
       <div className="flex flex-col  items-center h-full">
@@ -45,6 +49,9 @@ const ApplySection = () => {
 
               <div>
                 <SmallInput
+                  onChangeInput={onChangeInput}
+                  name="uniqueNumber"
+                  value=""
                   title="이미 작성하던 지원서가 있으시다면,"
                   placeholder="이메일로 발송된 고유번호를 입력해주세요."
                 />

src/app/recruit/apply/container/PersonalInformationForm.tsx

@@ -1,12 +1,10 @@
-import React from 'react'
+import React, { useState } from 'react'
 import SmallInput from '../components/SmallInput'
 import Button from '../components/Button'
 import {
   personalInformation,
   personalPhoneNumber
 } from '@/utils/recruitMockData'
-import Progress from '../components/Progress'
-import PersonalStatementForm from './PersonalStatementForm'
 
 interface PersonalStatementFormProps {
   onClickStep: () => void
@@ -15,18 +13,40 @@ interface PersonalStatementFormProps {
 const PersonalInformationForm = ({
   onClickStep
 }: PersonalStatementFormProps) => {
+  const [personalInfo, setPersonalInfo] = useState({
+    name: '',
+    studentNumbder: '',
+    email: '',
+    phone: ''
+  })
+
+  const onChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(personalInfo)
+    const { name, value } = e.target
+
+    setPersonalInfo(prev => {
+      return { ...prev, [name]: value }
+    })
+  }
+
   return (
     <div className="w-[56.2rem] ">
       <div className="flex flex-col gap-[5rem] mb-[5rem]">
         {personalInformation.map((item, index) => (
           <SmallInput
+            onChangeInput={onChangeInput}
+            name={item.name}
             key={index}
             title={item.title}
+            value={personalInfo[item.name as keyof typeof personalInfo]}
             placeholder={item.placeholder}
           />
         ))}
 
         <SmallInput
+          onChangeInput={onChangeInput}
+          name="phone"
+          value={personalInfo.phone}
           title={personalPhoneNumber.title}
           placeholder={personalPhoneNumber.placeholder}
         />

src/app/recruit/apply/container/PersonalStatementForm.tsx

@@ -10,6 +10,10 @@ interface PersonalStatementFormProps {
   onClickStep: () => void
 }
 
+const onChangeInput = () => {
+  console.log('not yet')
+}
+
 const PersonalStatementForm = ({ onClickStep }: PersonalStatementFormProps) => {
   return (
     <div className="w-[56.2rem] flex flex-col gap-[5rem]">
@@ -27,6 +31,9 @@ const PersonalStatementForm = ({ onClickStep }: PersonalStatementFormProps) => {
       <SelectTimeDay />
 
       <SmallInput
+        onChangeInput={onChangeInput}
+        value=""
+        name="gitURL"
         title="7. GitHub 계정이 있다면 링크를 올려주세요. (선택)"
         placeholder="ex) https://github.com/likelionsg"
       />

src/utils/recruitMockData.ts

@@ -124,18 +124,21 @@ export const meeting = [
 ]
 
 export const personalInformation = [
-  { title: '이름', placeholder: '지원자의 이름을 입력해주세요.' },
+  { name: 'name', title: '이름', placeholder: '지원자의 이름을 입력해주세요.' },
   {
+    name: 'studentNumber',
     title: '학번',
     placeholder: '서강대학교 학번을 입력해주세요 .ex) 20220001'
   },
   {
+    name: 'email',
     title: '이메일',
     placeholder: '이메일 주소를 입력해주세요. ex) [email protected]'
   }
 ]
 
 export const personalPhoneNumber = {
+  name: 'phone',
   title: '전화번호',
   placeholder: '연락가능한 전화번호를 입력해주세요. ex) 010-1234-5678'
 }