Code1018 Project (2) - 날짜선택 Widget 기능

지난 일지에서의 나의 목표

1. 회원 정보 구체화

2. 로그인 시 회원 정보를 이용해 화면에 표시.

3. 소셜 인증(SNS, Email 등) 을 통한 회원가입 기능 추가. 

  오늘은 회원 정보를 구체화하고, 개인적인 목표로 생일을 입력할 때 달력에서 날짜를 선택해서 입력하는 기능을 추가하기로 했다.

  Widget 기능

  Widget 기능을 구현하기 위해 굉장히 해메었다. 찾았던 많은 방법 중 간단한 방법으로 구현하였다.

< WIdget 추가 >

  DateInput의 타입을 설정한 클래스를 widget에 넣어준다.

  여기서도 문제가 있었는데, 다른 컴퓨터에서 내가 개발했을 때는 위의 방법으로 위젯이 되었는데 다른 노트북에서 테스트 해보니 달력이 안생기는 것이었다. 문제가 무엇인지 한참 검색했더니, IE와 FF에서는 안되는 경우가 있다는 것을 보았다. FireFox에서도 되는 것을 확인했었는데 버전이 달랐던 것으로 받아들였다.

  그리하여 구글 크롬으로 테스트 하였더니 달력 기능이 되는 것을 확인 할 수 있었다.

< Widget 기능 >

  FF와 IE에서 어떤 문제로 안되는 지는 정확히 파악하지 못했지만, 이는 더 조사해보아야할 점이다.

  두 번째는 프로필 정보를 구체화 시켰다.

< 프로필 정보 >

  여기서 해커의 레벨을 등급으로 만들어 두고 이를 튜플로 선택할 수 있도록 만들었다. 이를 관리자 페이지에서 확인해보면 다음과 같다.

< 프로필 확인 >

  원하는 방식으로 구현 된 것을 확인하였다.

  이제 다음으로 회원가입 기능에 설정한 내용을 입력하게 하는 것이다.

< 필드 추가 >

  이는 기존의 방법대로 fields에 입력받을 폼을 추가하여 구현하였다.

< 회원 가입 화면 >

  회원 가입 화면은 위와 같다. 아직 디자인은 없어서 모양이 이상하지만 개발을 우선으로 하고 나중에 디자인 할 계획이다.

  회원 가입 테스트를 해본다!

< 회원 가입 테스트 >

  회원 가입 결과 성공적으로 회원가입이 되었다.

  이제 추가적으로 이렇게 입력받은 정보들을 확인할 수 있는 기능을 만들 것이다. 이를 위해 왼쪽 사이드 바에 mypage 란을 만든다.

< mypage 목록 추가 >

< 추가된 My Page >

  My Page에서 회원 프로필 정보를 확인하는 기능을 추가해야한다.!!

다음 나의 목표.

1. 로그인 시 회원 정보를 이용해 화면에 표시. (My Page기능)

2. 소셜 인증(SNS, Email 등) 을 통한 회원가입 기능 추가.