klmhyeonwoo / apply-page-frontend Goto Github PK

기타 구현 사항

• 각 파트별 질문지 생성 후 UI 적용
• 유동적으로 파트별 질문지 생성되는 로직 작성
• 프론트엔드, 백엔드, 디자인 제출 후 수정까지의 플로우
• 학번 9자리가 되지 않을 경우, 다음 화면으로 넘어가지 못하도록 설계
• 학과나 이름에 숫자가 들어가지 못하도록 설계
• textarea의 1000자를 초과하는 DOM 버그를 state 값의 length로 막아놓았음
• 필수항목을 다 작성하지 않더라도, 뒤로가기 버튼은 항상 활성화되어있어야 함
• 임시 저장된 게시글을 있어요 에 대한 텍스트 모호함을 텍스트를 바꿔 수정할지, 백에서 넘어오는 state 값으로 해결할 지 확인

임시저장

• 프론트엔드 임시저장 로직 확인
• 백엔드 임시저장 로직 확인
• 디자인 임시저장 로직 확인

뒤로가기

• 프론트엔드 뒤로가기 로직 확인
• 백엔드 뒤로가기 로직 확인
• 디자인 뒤로가기 로직 확인

모달 창

• 임시 저장 된 게시글이 있을 경우에 대한 모달 창 구현
• 임시 저장 후 모달 창 구현
• 최종 제출 후 모달 창 구현

새로 작성하기

• 프론트엔드 새로 작성하기 로직 확인
• 백엔드 새로 작성하기 로직 확인
• 디자인 새로 작성하기 로직 확인

헷갈렸다가 적어놓은 로직

• 사용자가 최종제출까지 하면 Redux의 모든 값이 초기화 됨
• 사용자가 임시저장 값을 다시 불러오고, 뒤로가기를 통해 나갔다가 다른 포지션으로 들어가게 되면 기존의 공통질문을 가져오게 됨
  (포지션 변경 시에 공통질문을 그대로 끌어가게 됨)

• 디자인 UI 구현
• 회원 가입 페이지 기능 구현
  • React Hook Form 적용
• 이메일 인증 구현
  • 3분 제한 타이머
  • 재 전송은 30초 제한
• BE와 연동

· 기존 정적 질문에서 동적 질문을 생성하고, 그에 따른 API를 연동합니다.

• 포지션 별 선택 UI 생성
• 디자인, 프론트엔드, 백엔드 선택하는 로직 생성

· 정적인 질문 페이지에서 동적 기능을 담은 페이지로 리팩토링 및 신기능을 추가해요

• 관리자페이지 모바일, 태블릿, PC 대응
• 지원서 종료 시간, 시작 시간에 맞춰 열리도록 로직 설계
• 검색창 접근성 향상 작업
• 크로스 브라우징 작업 (IOS)

· 회원가입 API 연동을 진행합니다.

· AT(AccessToken), RT(RefreshToken) 관리
· 회원별 권한 관리 (외부인, 일반 사자, 운영진)

• 로드될 때 이미지의 속도 저하 ➠ 이미지 압축으로 해소
• 불합격 메일 API 연동
• 사용자의 스크롤 Y축에 따라 모달이 중앙에 배치되도록 수정
• 기타 UI 및 사용자 접근성(UX) 수정
• Confetti 라이브러리 추가

• 폴더 구조화 및 가독성 향상
• 리덕스 로직 수정

• 불러오기 버튼 시, 뒤로가기 버튼 생성
• 엔드타임에 도달 시, 지원 마감 페이지 렌더링
• 유효성 검사 및 학과를 리스트로 뽑아서 검색하도록 유도
• 기존 학번 비교에서, 이메일 비교까지 추가 (백엔드 API 필요)
• 메일링 서비스를 위해, 관리자 페이지에 메일 전송 관련 모달 추가
• 모달을 띄우고 종료했을 때, 스크롤이 움직이지 않는 현상 해결
• 채널톡 API 설정

• 모달 창을 띄었을 때, Input 창에 Tab이 향하지 않도록 수정
• 사용자 페이지 모바일 화면 방지 및 어드민 반응형 구현

• Footer 컴포넌트 작성
• 사용자 접근성 향상
• 기타 UI (vw, em 단위 재 작성) 수정
• 토스 레퍼런스를 이용한 UI 개편
• 기존에 합/불 여부 로직 시에 버튼을 누르면 비활성화 되는 문제점 개선

임시 저장의 UX 개선

• 사용자가 모든 입력을 하고 임시 저장 확인 창을 확인하는 것은 너무 비효율적이기에
  학번만을 입력받고 바로 임시 저장 여부를 확인할 수 있는 과정으로 개선
• 사용자의 버튼 TAB 입력 방지
• 사용자의 접근성 개선

• 파비콘 변경
• 폼 작성에 필요한 컴포넌트 생성
• 레이아웃 구조 생성

• 프론트엔드를 눌렀을 때, 해당 질문이 나오도록 구현

• 포지션별 리스트 생성
• 카테고리(전체 지원자, 합격자, 탈락자) 보기