Feat/insert 프로젝트 등록 페이지 입력값 유효성 검사 구현

[MINYOUNG-SEOK]

개요

프로젝트 등록 페이지의 전체 입력값 유효성 검사 로직을 구현하고, 사용자 경험을 개선했습니다.

변경 사항

• 새로운 기능 추가
• 버그 수정
• 리팩토링
• 문서 수정

구현 내용

• Step1 유효성 검사: 프로젝트 제목, 한줄소개, 간단설명, 카테고리 선택, 모집 마감일 필수값 검증
• Step2 유효성 검사: 팀 규모, 예상 기간, 기술 스택, 모집 포지션 필수값 검증 및 각 포지션별 세부 항목 체크
• Step3 유효성 검사: 프로젝트 상세 설명, 일정 배열 및 각 일정별 단계명/기간/설명 검증
• Step4 유효성 검사: 진행 방식, 지원 요구사항, 우대사항 필수값 검증
• 모집 마감일 기능 개선: Timestamp를 input[type="date"] 형식으로 변환하는 유틸 함수 추가
• 카테고리 선택 로직: 사용자가 실제로 선택했는지 추적하는 플래그 기반 검증 구현
• 날짜 삭제 처리: input 날짜 삭제 시 null 처리 및 에러 방지
• 상태 업데이트 동기화: Step4 form 데이터가 submit에 반영되도록 지연 처리 추가
• UI 개선: 인풋 포커스/호버 보더 색상 통일

개발 후기 및 개선사항

이번 작업에서 배운 점

• React 상태 업데이트의 비동기 특성과 이를 해결하는 setTimeout 패턴

어려웠던 점 / 에로사항

• 다중 입력 필드(모집 포지션, 프로젝트 일정)의 개별 유효성 검사 로직 구현

다음에 개선하고 싶은 점

• 현재 alert 대신 더 사용자 친화적인 토스트 알림이나 인라인 에러 메시지 적용

팀원들과 공유하고 싶은 팁

• (없다면 패스)

[czmcm5]

민영님 머쪄요~~
alert박스 새롭게 사라님이 만들어준게 있어서 그거 사용하면 될 것 같네요!

[namee-h]

호호 머쪄용 ! ㅎㅎ 수고하셨어욥 !!👏🏻