또다시 프로젝트가 시작되었다.
이번 과제는 (주)에스앤피랩 기업의 과제를 수행하는 것이다.

오늘 한 일

요구사항 분석 및 기능 정의, 보일러플레이트 작성, 디렉토리 컴포넌트 구조 및 라우터 설정, 역할 분담

기능정의 요구사항 분석

• 서버 : json-server 라이브러리
• CSS : styled-components 라이브러리 & 메인 color : 기업의 CI색상 사용
• 상태관리 : Recoil

크게는 2개의 기능을 구현해야한다.
1. 회원가입과 같은 로그인 폼을 받기
- 로그인 폼 중 어렵다 생각 된 점 : 이부분에서 필터링을 하는 부분이 약간 까다로울 것이라 판단되었다.

2. 그 가입한 사람들의 db를 관리 할 admin페이지 제작
   • 엑셀 다운로드 받기 기능
   • db 내 검색 기능 구현

먼저 목표는 이번주 목요일 금요일 까지 1번의 기능을 구현을 하고, 월요일부터 2번의 기능을 다같이 다시 역할분담하여 진행하기로 계획하였다.

프로젝트 트리구조

asset
 ┗ region.json
 
database
 ┗ database.json
 
src
 ┣ components
 ┃ ┗ Form.tsx
 ┣ pages
 ┃ ┣ Admin.tsx
 ┃ ┣ Agreement.tsx
 ┃ ┣ ApplicationForm.tsx
 ┃ ┗ Landing.tsx
 ┣ router
 ┃ ┗ Router.tsx
 ┣ styles
 ┃ ┗ globalStyles.tsx
 ┣ App.tsx
 ┣ index.tsx
 ┣ react-app-env.d.ts
 ┗ setupTests.ts

db

db 같은 경우 지역구의 api와 관련된 부분은 asset의 region으로 만들어줬고,
입력받은 user를 기록하는 곳은 database에서 관리하기로 하였다.

domponents

일단은 보일러플레이트에서는 Form하나만 만들고 각자 기능에따라 추가하기로 하였다.

page

페이지같은경우 크게 ApplicationForm 컴포넌트와 Admin컴포넌트이고, Agreement 컴포넌트는 이용약관 동의에 관한 페이지를 따로 분리해줬고 Landing페이지는 가입 시작 전과 종료시 가게 될 아무 기능이 없는 페이지로 구성되었다.

router

라우터를 분리해줌으로 App 컴포넌트에서 router만 불러주고 router에서 나눠줌으로 조금 더 컴포넌트를 직관적으로 분리하였다.

파트 분배

• 레이아웃 = 렌딩 페이지 레이아웃 담당
• 정규식으로 유효성 검사하는 로직 + 폼 유효성이 맞으면 지원하기
• 모달(거주지) - 리코일 연결 + 모달(지원완료후 나오는거)

내 파트!

• 정규식으로 유효성 검사하는 로직 + 폼 유효성이 맞으면 지원하기
  - 이름 입력 시 : 한글만 직접 입력
  - 생년월일 입력 시 : 숫자만 입력, YYYY.MM.DD형식으로 받기
  - 연락처 입력 시 : "-"없이 숫자만 입력, 11자리 숫자 받기
  - 이메일 입력 시 : "@", "com" 필수로 포함

정규식을 이용하여도 되지만, react-hook-form이라는 라이브러리를 이용해도 되겠다는 생각이 들었다.
먼저 두개를 다 시도해보고 차이점과 우리 프로젝트에 더 잘 맞는것을 비교해봐야겠다.

이번 프로젝트 목표

• GitHub - Issues
  이슈카드를 사용해보는것이 목표이다!
• 개발로그 매일 작성!
  매일 어떤 생각을 가지고 만들어나갔는지 짧게나마 기록해두기!
• 완성도 있는 프로젝트!!