• 409상태로 응답하는 것 좋아보이네요.
• 커밋메시지 간결하고 가이드 좋음. 한글로 적는것도.
• 스크럼은 관리이슈는 아니라서 wiki를 활용하는 건 어떨가 생각됩니다.
• PR을 기능별로 잘 날리고 있어서 좋아요.
• task 들의 subtask 관리까지 자세하게 해서 좋네요. 귀찮은 일일텐데.
• 스크럼내용이나 기타 기술정보는 github의 wiki를 사용하는 것도 좋죠.

• 어제한 일
  • #34 VerifyFormatUtil 개선
    • fommatting 메소드 안에서 null 체크
  • #34 input 검증 후 회원 가입
    • boolean isValidUser() 에서 void checkValidUser() 로 메소드 명 변경
  • #35 userValidation 개선
    • VerifyFormatUtil 의 fommatting 메소드를 사용하지 않는 필드에 대하여 null, "" 체크
  • #35 USER DB constraint 추가
    • UNIQUE KEY 추가 : ID,USER_ID
  • 각 스텝 별 Test 수행
  • #21 Heroku 배포
    • Dev Branch 배포 (https://signup-5-dev.herokuapp.com/)
    • DB 접속 가능하게 설정 (https://signup-5-dev.herokuapp.com/h2-console)
• 오늘 할 일
  • #8 개인정보 조회
  • #21 master 가 merge 되는 경우 Heroku master 도 올릴 예정
  • #44 설정 변경
• 오늘 컨디션
  • 양호
• 고민되는 것
  • 오후 수업과 저녁 약속으로 목표치만큼 할 수 있을지 걱정입니다.

• 이전 화면에서 넘어올 때 Modal 표시 스타일은 화면을 가득 채우지 않고, iOS 13 스타일로 상단을 비운 채로 표시한다.
• ② 개인정보 수집 및 이용에 대한 안내 제목은 검은색으로 상단 가운데 표시한다.
• ③ 개인정보 수집 및 이용에 대한 문구는 화면 중앙 부분에 표시한다. 내용은 한 화면보다 길어야 하고 맨 마지막까지 스크롤이 되어야 한다.
• ④ 동의 버튼을 누르는 경우, 지금 화면이 사라지는 애니매이션 없이 다음 화면으로 이동한다.
• ⑤ 취소 버튼을 누르는 경우, 지금 화면이 아래로 사라지는 애니메이션을 보여주고 이전 화면으로 보여야 한다.

• 로그인 성공
• 로그인 실패 (unauthorized)

어떻게 해야 될까요...

다들 각자 생각한 걸 공유했으면 좋겠습니다.

• FE 의 소스는 BE 의 static 경로에 넣는 것으로 가능하다는 힌트를 들었습니다.

• BE 는 서버를 통한 로깅 지원과 필요시 테스트할 수 있는 API 를 지원해줄 수 있을 듯 합니다.

• jar 를 만드는건.. 아직 잘 모르겟습니다 어떻게 하는건지;;

• 어제한 일
  • #8 개인정보 조회
  • #44 설정 변경
  • #21 Heroku 배포
    • Dev Branch 배포
      (https://signup-5-dev.herokuapp.com/)
    • DB 접속 가능하게 설정
      (https://signup-5-dev.herokuapp.com/h2-console)
  • FE 테스트를 위한 세션 체크 페이지 배포
    (https://signup-5-dev.herokuapp.com/checkSession)
• 오늘 할 일
  • #21 master 가 merge 되는 경우 Heroku master 도 올릴 예정
  • 리팩토링
• 오늘 컨디션
  • 양호
• 고민되는 것
  • 오늘 13시 ~ 18시까지 서버 지원이 힘들듯 합니다. 슬랙은 지원 가능하니 불러주세요.
  • 통합 테스트를 어떻게 해야 될까요? #59 에 제 생각을 남겼습니다.

• 로그인 페이지 html
• 로그인 페이지 css
  　
• 메인 페이지 html
• 메인 페이지 css

전반적인 이슈 코멘트로 달아 놓을게요. 참고하세요.

텍스트필드에 입력된 값 유효성 검증시,
엔터까지 눌러야 맨 마지막 값까지 입력값으로 인식하는 버그 있음

• 회원정보 요청시
  • login 유저라면 해당 유저의 정보를 모두 json 형태로 응답
  • login 유저라 아니라면 401 (UNAUTHORIZED) 응답
  • login 유저지만 잘못된 접근시 400 (BADREQUEST) 응답

• ① 오늘 날짜를 기준으로 만15세 이상 99세 이하 범위의 년월일까지 선택 가능하다.
  • DatePicker Control로 입력하고, 하단에 선택 버튼을 누르면 선택한 날짜를 표시한다.
• ② 성별(남자/여자)을 선택할 수 있다. Segmented Control로 입력한다.
  • 기본값은 여자로 표시한다.
• ③ 이메일 주소는 [email protected]의 형태여야 한다. 이메일용 키보드를 표시한다.
• ④ 6번의 조건에 부합하지 않을 때 메세지가 출력된다.
  • 예) 이메일 주소를 다시 확인해주세요.
  • 조건에 부합하면 메세지는 사라진다.
• ⑤ 휴대전화는 place holder가 있다.
  • 10자리 또는 11자리의 숫자만 입력되어야한다.
  • 앞 3자리의 숫자는 010만 가능하다. 숫자 전용 키보드를 표시한다.
• ⑥ 8번 조건에 부합하지 않을 때 메세지가 출력된다.
  • 예) 형식에 맞지 않는 번호입니다.
  • 조건에 부합하면 메세지는 사라진다.
• ⑦ 다음 버튼은 모든 항목이 조건을 통과하면 활성화한다.
  • 다음 버튼을 누른 경우, 모달 형태로 개인정보 동의 화면을 표시한다.
  • 이전 버튼을 눌러서 이전으로 돌아가면 현재 화면에서 입력했던 내용은 사라져도 된다. (이미 다음을 눌렀던) 이전 화면은 입력했던 정보가 그대로 남아있어야 한다.

• 성공 (200)
• 중복 (409 Conflict)

• VerifyFormatUtil 에 fommatting 메소드 형태로 구현
  • id 형식
  • 비밀번호 형식
  • 이메일 형식
  • 휴대전화 형식
  • 관심사 형식

12시까지 아래의 포맷으로 코멘트 작성해주시면 됩니다 😊

• 어제 한일
• 오늘 계획
• 본인 컨디션
• 어려웠던 점, 고민했던 것, 느낀 점

• 아이디
• 아이디는 5~20자의 영 소문자, 숫자, 특수기호(_), (-)만 사용 가능하게 한다.
  중복체크 기능이 있다.
• 입력된 아이디 상태에 따라 다른 색깔의 다른 메세지가 출력된다.
  예) 이미 사용중인 아이디입니다. (빨강색)
  5~20자의 영문 소문자, 숫자와 특수기호(_)(-) 만 사용 가능합니다. (빨강색)
  사용 가능한 아이디입니다. (초록색)
• 비밀번호
• 비밀번호는 *****의 형태로 표시된다.
• 8~16자의 영문 대, 소문자, 숫자, 특수문자의 조합이어야 한다.
• 비밀번호 각 조건에 부합하지 않을 때 다음과 같은 메세지가 출력된다.
• 3번과 같이 메세지 종류에 따라 다른 색깔로 출력된다.
  예) 8자 이상 16자 이하로 입력해주세요. (빨강)
  영문 대문자를 최소 1자 이상 포함해주세요. (빨강)
  숫자를 최소 1자 이상 포함해주세요. (빨강)
  특수문자를 최소 1자 이상 포함해주세요. (빨강)
• 모든 조건에 부합하면 다음과 같은 메세지가 출력된다.
  예) 안전한 비밀번호입니다. (초록)
• 4번과 같이 *****의 형태로 표시된다.
• 4번과 6번의 값은 일치해야한다.
• 4번과 6번의 값이 일치하지 않을 때 다음과 같은 메세지가 출력된다.
  예) 비밀번호가 일치하지 않습니다. (빨강)
• 4번과 6번의 값이 일치할 때 다음과 같은 메세지가 출력된다.
  예) 비밀번호가 일치합니다. (초록)
• 이름
• 이름을 입력할 수 있다.

• H2 DB 를 웹에서 보여주기 위한 설정 추가
• CORS 처리를 위한 Annotation 추가

• 메세지 하드 코딩 빼내기
• package 구조 바꾸기
• 그 외 눈에 띄는 사항들

• HTML
• CSS
• 회원가입 모든 요소가 가운데 위치하도록 한다.
• 아이디/비밀번호/비밀번호 재확인/
  이름/생년월일/성별/이메일/휴대전화/관심사 총 9가지의 입력항목을 갖는다.
• 모든 입력창은 입력창에 focus가 되면 입력창 테두리 색이 기존과 다른 색으로 변경된다.
• "회원가입" 제목은 가운데에 위치한다.

• Heroku 를 통한 배포
  • master branch 배포
    • https://signup-5.herokuapp.com/
  • dev branch 배포
    • https://signup-5-dev.herokuapp.com/

• input 검증 후 회원 가입
  • boolean isValidUser() 에서 void checkValidUser() 로 메소드 명 변경
• userValidation 개선
  • VerifyFormatUtil 의 fommatting 메소드를 사용하지 않는 필드에 대하여 null, "" 체크
• USER DB constraint 추가
  • UNIQUE KEY 추가 : ID,USER_ID
• 회원가입 실패시 응답코드 409 유지
  • Crong 의 리뷰 #33

• Whitelabel Error Page 에 대한 처리

• 관심사
• 관심사는 3개 이상 입력해야한다.
• 관심사를 입력하고 쉼표(,)를 입력하면 다음과 같은 태그형태의 ui가 생성된다.
• 만들어진 태그형태의 ui 뒤로 계속 이어서 관심사를 입력 가능하다.
• 태그형태의 ui는 x버튼을 가진다.
• x버튼을 누르면 입력됐던 태그가 삭제된다.
• 마지막 태그형태의 ui 뒤에 커서를 놓고 backspace(또는 delete)키 를 입력하면 커서 앞 태그 형태의 ui가 일반 텍스트 형태로 바뀌면서 수정가능한 상태가 된다.
• 아무 글자 없이 입력된 쉼표는 무시된다.
  예) ,을 입력했을 때 => 입력한 ,가 사라진다.
  예) ,,,을 입력했을 때 => 입력한 ,,,가 모두 사라진다.
• 2번에서 완성된 태그형태의 ui가 3개 미만일 때 메세지가 출력된다.
  예) 3개 이상의 관심사를 입력하세요.
• 관심사가 3개 이상 입력되면 해당 메세지는 사라진다.
• 약관
• “약관에 동의합니다" 부분을 클릭하면 새로운 약관창이 뜬다.
• 체크박스는 사용자가 직접 체크할 수 없다.
• 약관창은 x버튼을 가진다.
• x버튼을 누르면 창이 사라진다.
• 약관창의 제목은 좌측 또는 가운데에 위치한다.
• 약관창 중앙에 스크롤이 있는 박스가 있고, 박스 안에 약관 내용이 있다.
• 동의 버튼은 기본적으로 비활성화되어있다.(클릭해도 아무 반응이 없다)
• 비활성화된 버튼은 활성화된 상태와 다른 색으로 구분된다.
• 약관의 스크롤이 한 번이라도 끝까지 내려갔을때만 동의 버튼이 활성화된다.
• 5번에서 x버튼을 눌러 약관창을 닫으면 체크박스는 아무 변화가 없다.
• 8번에서 활성화된 동의 버튼을 누르면 약관창이 닫히고, 체크박스에 자동으로 체크가 된다. 사용자가 직접 체크를 해제할 수 없다.

• 초기화
• 초기화 버튼을 클릭하면 “모든 내용을 새로 작성하시겠습니까?”라는 확인창이 뜬다.
• 확인창의 취소를 클릭하면 창이 닫히고, 확인을 클릭하면 모든 입력 항목의 내용이 지워진다. 세번째 슬라이드 화면 참고
• 가입하기
• 가입하기 버튼을 클릭했을 때, 약관 동의를 포함한 회원가입 전체 10가지 항목 중 한가지 항목이라도 비워져있다면 비워진 항목을 입력해달라는 내용의 새로운 팝업레이어가 뜬다.
  예) ‘생년월일을 입력해주세요.’
  ‘ 관심사를 입력해주세요.’
  ‘약관에 동의해주세요.’
  등등...

• 성공 (200)
• 중복 (409 Conflict)

• 생년월일
• placeholder가 있다.
• 4자리의 숫자만 입력되어야한다.
• 현재년도 기준으로 15세 이상 99세 이하 범위의 년도만 입력 가능하다.
• 월(1-12)을 선택할 수 있다.
• 기본값은 “월"이라고 표시되도록 한다.
• placeholder가 있다.
• 2번에서 선택한 월에 따라 1~31까지의 가능한 숫자 범위가 달라진다.
  예) 3월은 31일까지, 4월은 30일까지 가능
• 1, 2, 3번 조건에 부합하지 않을 때 메세지가 출력된다.
  예) 태어난 년도 4자리를 정확하게 입력하세요.
  만 14세 이상만 가입 가능합니다.
  태어난 날짜를 다시 확인해주세요.
  조건에 부합하면 메세지는 사라진다.
• 성별
• 성별(남자/여자)을 선택할 수 있다.
• 기본값은 “성별"이라고 표시되도록 한다.
• 이메일
• [email protected]의 형태여야 한다.
• 6번의 조건에 부합하지 않을 때 메세지가 출력된다.
  예) 이메일 주소를 다시 확인해주세요.
• 조건에 부합하면 메세지는 사라진다.
• 휴대전화
• placeholder가 있다.
• 10자리 또는 11자리의 숫자만 입력되어야한다.
• 앞 3자리의 숫자는 010만 가능하다.
• 8번 조건에 부합하지 않을 때 메세지가 출력된다.
  예) 형식에 맞지 않는 번호입니다.
• 조건에 부합하면 메세지는 사라진다.

• ① 관심사 제목은 화면 상단 가운데 표시한다.
• ② 관심사를 입력하지 않으면 하단에 안내 문구를 표시한다. 최소 3개 이상 표시하기 위해 보이고, 추가할 때마다 개수가 변경된다. 3개가 되면 사라진다.
• ③ 추가하는 관심사 키워드는 아래 영역에 추가한다.
• ④ 키워드를 추가할 때마다, 단어가 한 줄에 들어가면 넘어가면 다음 줄에 표시한다.
• 최대 3줄 이상이 되면 더 이상 추가하지 않도록 입력 텍스트 필드를 비활성화 시킨다.
• 키워드마다 X버튼을 추가하고 누르면 해당 키워드 삭제한다. (디자인은 변경 가능)
• ⑤ 완료 버튼은 모든 항목이 조건을 통과하면 활성화한다.
• 완료를 누르면 가입 신청을 완료한다.
• ⑥ 만약 이전 버튼을 누르는 경우 개인정보 동의 화면이 아니라 개인정보 입력 화면으로 돌아가야 한다.
• ⑦  키보드 엔터 버튼은 관심사를 3개 추가할 때까지는 관심사 추가를 위한 Add로 동작한다. 3개 이상 추가하고 나면 Done으로 표시하고 완료 버튼과 동일하게 동작한다.

• ① “회원가입” 제목은 상단 가운데에 위치한다.

• ② Place holder로 조건을 표시한다.

  • 아이디는 최소5 최대 20자의 영 소문자, 숫자, 특수기호(_), (-)만 사용 가능하게 한다.
  • 실시간으로 서버에 요청해서 중복인지 체크하는 기능이 있다.

• ③ Place holder로 조건을 표시한다. 입력된 아이디 상태에 따라 다른 색깔의 다른 메세지가 출력된다.

  • 예) 이미 사용중인 아이디입니다. (빨강색)
  • 5~20자의 영문 소문자, 숫자와 특수기호(_)(-) 만 사용 가능합니다. (빨강색)
  • 사용 가능한 아이디입니다. (초록색)

• ④ 비밀번호는 *****의 형태로 표시된다.

  • 8~16자의 영문 대/소문자, 숫자, 특수문자를 조합해야 한다.

    최소 8 자 및 최대 10 자, 대문자 하나 이상, 소문자 하나, 숫자 하나 및 특수 문자 하나 이상 출처: https://beagle-dev.tistory.com/114

    "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,16}"

• ⑤ 비밀번호 각 조건에 부합하지 않을 때 다음과 같은 메세지가 출력된다.

  • 3번과 같이 메세지 종류에 따라 다른 색깔로 출력된다.
    • 예) 8자 이상 16자 이하로 입력해주세요. (빨강)
    • 영문 대문자를 최소 1자 이상 포함해주세요. (빨강)
    • 숫자를 최소 1자 이상 포함해주세요. (빨강)
    • 특수문자를 최소 1자 이상 포함해주세요. (빨강)
  • 모든 조건에 부합하면 다음과 같은 메세지가 출력된다.
    • 예) 안전한 비밀번호입니다. (초록)

• ⑥ 4번과 같이 *****의 형태로 표시된다.

  • 4번과 6번의 값은 일치해야한다.
  • 4번과 6번의 값이 일치하지 않을 때 다음과 같은 메세지가 출력된다.
    • 예) 비밀번호가 일치하지 않습니다. (빨강)
  • 4번과 6번의 값이 일치할 때 다음과 같은 메세지가 출력된다.
    • 예) 비밀번호가 일치합니다. (초록)

• ⑦ 이름을 꼭 입력해야 한다. 입력하지 않은 경우는 필수 입력 항목이라고 표시되어야 한다.

• ⑧ 다음 버튼을 누르면 다음 화면이 내비게이션 방식처럼 우->좌로 애니메이션되면서 표시된다. 다른 화면도 다음 버튼은 동일하게 동작한다.

• ⑨ 입력할 때만 키보드에서 엔터 부분을 Next 역할로 하고,

  • 이름을 입력하고 모든 항목 조건이 맞을때만 다음 화면으로 넘어간다.
  • 서버에 가입 요청 메시지 전송은 가장 마지막 화면에서 한 꺼번에 보낸다.

• 성공
• 중복 (409 Conflict)

• 로그인 화면은 가입 화면 요구사항을 최소한 만족하도록 그룹에서 협의해서 기능을 구현한다.
• 로그인 버튼을 누르면 아이디 + 비밀번호가 일치한 경우만 로그인 처리가 되어야 한다. 만약 로그인이 실패하면 시각적으로 로그인 실패를 인지시켜줘야 한다.

어제 한 일

• 중복 검증 api
• 로그인 기능
• api 문서 다듬기
• mockup 서버 사용하기

오늘의 컨디션

• 피곤하다...

오늘 할 일

• aws 강의 듣기
• 코드 리팩토링

고민거리

• 지금은 이미 꼬인거 같고...다음엔 폴더 만들기 전에 BE 브랜치만 만들어서 거기에 서버 내용만 올려놓고 그 브랜치를 배포하는 방향으로 해야겠당