fit: RecruitMeeting 페이지 버튼 컴포넌트 추가 & Result 컴포넌트 코드 수정

Author: kim3360

src/components/UI/Recruit_Button.tsx

@@ -3,14 +3,18 @@ import React from 'react'
 interface ButtonProps {
   text: string;
   className?: string;  // 추가적인 Tailwind 스타일 적용 가능
+  onClick?: () => void;  // 클릭 이벤트 핸들러 추가
+  disabled?: boolean;  // 비활성화 여부 추가
 }
 
 // 📌 button 컴포넌트
-export const Button: React.FC<ButtonProps> = ({ text, className }) => {
+export const Button: React.FC<ButtonProps> = ({ text, className, onClick, disabled }) => {
   return (
-    <div className='w-full max-w-[395px] h-[50px] flex justify-center'>
+    <div className='w-full max-w-[395px] mt-20 mb-20 flex justify-center '>
       <button type="submit"
-        className={`bg-[#00B493] max-w-[395px] h-[22px] text-white font-bold px-4 text-[12px] transition-all hover:bg-[#00937A] active:scale-95 ${className}`}
+        className={`bg-[#00B493] max-w-[395px] h-[30px]  text-white font-pretendardBold px-4 text-[12px] transition-all hover:bg-[#00937A] active:scale-95 ${className}`}
+        onClick={onClick}  
+        disabled={disabled}  
       >
         {text}
       </button>

src/components/UI/Recruit_InfoBanner.tsx

@@ -1,32 +1,15 @@
 import React from 'react'
 
 interface Recruit_InfoBannerProps {
-  message: string;  
-  date: string;  
+  message: string;
 }
 
 // 📌 Recruit 공지 컴포넌트
-export const Recruit_InfoBanner: React.FC<Recruit_InfoBannerProps> = ({ message, date }) => {
+export const Recruit_InfoBanner: React.FC<Recruit_InfoBannerProps> = ({ message }) => {
   return (
-    <div className="w-full max-w-[395px]  p-2 mt-3 text-white text-center text-[10px] font-bold">
-      <div className='max-w[355px] bg-[#00B493] p-1'>
-        <p>{message}</p>
-        <p>
-          {date.includes('이메일') ? (
-            date.split('이메일').map((part, index) => (
-              index === 0 ? (
-                <span key={index}>
-                  {part}
-                  <span className="text-red-600 ">이메일</span>
-                </span>
-              ) : (
-                <span key={index}>{part}</span>
-              )
-            ))
-          ) : (
-            date
-          )}
-        </p>
+    <div className="w-full max-w-[390px] p-2 mt-3 text-white text-center text-[10px] font-pretendardBold">
+      <div className='max-w-[375px] bg-[#00B493] p-1'>
+        <p className='whitespace-pre-line'>{message}</p>
       </div>
     </div>
   )

src/pages/Recruit.tsx

@@ -131,7 +131,7 @@ const Recruit: React.FC = () => {
     <MobileLayout>
       <RecruitHeader title='컴퓨터 소프트웨어 공학과 전공 동아리 다솜 34기 모집 폼' />
       <RecruitUI />
-      <div className='flex flex-col items-center gap-6'>
+      <div className='flex flex-col items-center'>
         <form className='mt-3 bg-mainBlack w-full px-2 font-pretendardRegular' onSubmit={handleSubmit} >
           <InputField label='이름' name='name' value={formData.name} onChange={handleInputChange} onKeyDown={handleKeyPress} required />
           <InputField label='학번' name='studentNo' value={formData.studentNo} onChange={handleInputChange} required />

src/pages/RecruitMeeting.tsx

@@ -4,6 +4,8 @@ import MeetingDateSelector from '../components/layout/MeetingDateSelector'
 import MeetingTimeSelector from '../components/layout/MeetingTimeSelector'
 import { useNavigate } from 'react-router-dom'
 import { RecruitHeader, RecruitUI } from '../components/UI/RecruitUI'
+import { Button } from '../components/UI/Recruit_Button'
+import { Recruit_InfoBanner } from '../components/UI/Recruit_InfoBanner'
 
 /** 면접 날짜 선택 페이지 */
 const RecruitMeeting: React.FC = () => {
@@ -37,7 +39,8 @@ const RecruitMeeting: React.FC = () => {
 		<MobileLayout>
 			<RecruitHeader title='컴퓨터 소프트웨어 공학과 전공 동아리 다솜 34기 모집 폼' />
 			<RecruitUI />
-			<div className='flex flex-col items-center w-full mb-40'>
+			<div className='flex flex-col items-center w-full'>
+
 				<p className='font-pretendardBold text-white text-center bg-mainColor max-w-[90%] w-full mt-6'>
 					1차 서류에 합격되신 점 다시 한번 축하드리며,
 					<br />
@@ -49,12 +52,13 @@ const RecruitMeeting: React.FC = () => {
 					<p className='font-pretendardBold text-white mt-14 mb-4'>시간</p>
 					<MeetingTimeSelector onSelect={handleTimeSelect} />
 				</div>
-				<button
-					className={`font-pretendardBold text-white text-center mt-20 p-1 w-[140px] h-[40px] ${activebtn ? 'bg-mainColor' : 'bg-subGrey3 opacity-30'}`}
+
+				<Button
+					className={`text-center p-1   ${activebtn ? 'bg-mainColor' : 'bg-subGrey3 opacity-30'}`}
 					onClick={handleSubmit}
-					disabled={!activebtn}>
-					면접일정 예약하기
-				</button>
+					disabled={!activebtn}
+					text='면접일정 예약하기' />
+
 			</div>
 		</MobileLayout>
 	)

src/pages/RecruitResult.tsx

@@ -1,34 +1,37 @@
-import React from 'react'
+import React, { useState } from 'react'
 import MobileLayout from '../components/layout/MobileLayout'
 import { useNavigate } from 'react-router-dom'
-import { Header } from '../components/UI/Header'
 import { Button } from '../components/UI/Recruit_Button'
 import { RecruitHeader } from '../components/UI/RecruitUI'
 import { InputField } from '../components/UI/Recruit_InputField'
 
 export const RecruitResult: React.FC = () => {
+  const navigate = useNavigate()
+  const [checkInput, setCheckInput] = useState('')
 
-  const navigate = useNavigate() 
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    setCheckInput(e.target.value)
+  }
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault() 
-    navigate('/recruit-check') 
+    e.preventDefault()
+    navigate('/recruit-check')
   }
+
   return (
     <MobileLayout>
-      <Header />
       <RecruitHeader title="컴퓨터 소프트웨어 공학과 전공 동아리 다솜 34기 합격자 조회" />
       <form className="mt-4 bg-mainBlack w-full px-2" onSubmit={handleSubmit}>
         <InputField
           label="학번 마지막 4자리 + 전화번호 마지막 4자리를 입력해주세요."
-          subLabel='ex) 08470542'
-          type='test'
-          required
+          subLabel="ex) 08470542"
+          type="text"
+          name="checkInput"
+          value={checkInput}
+          onChange={handleInputChange}
         />
-        <Button text="결과 확인하기"/>
+        <Button text="결과 확인하기" />
       </form>
     </MobileLayout>
   )
 }
-
-

src/pages/RecruitSubmit.tsx

@@ -11,8 +11,9 @@ export const RecruitSubmit: React.FC = () => {
       <RecruitHeader title="컴퓨터 소프트웨어 공학과 전공 동아리 다솜 34기 모집 폼" />
       <RecruitUI />
       <Recruit_InfoBanner
-        message="다솜에 지원해주셔서 감사합니다."
-        date="서류 합격자 명단은 3월 15일 이메일로 일괄 공지됩니다."
+        message={`다솜에 지원해주셔서 감사합니다. 
+        서류 합격자 명단은 3월 15일 홈페이지 내에서 확인이 가능하며, 
+        제출하신 이메일로 추후 다시 한번 안내드리겠습니다.`}
       />
     </MobileLayout>
   )