happyhouse-front
📍 메인 페이지 + 헤더
스크롤된 값에 따라 해당하는 애니메이션을 보여주는 인터랙션을 구현하였으며, 배경색상에 따라 헤더의 투명도 값을 조절하였습니다.
스크롤이 굉장히 길어져서 맨 위로가기 버튼이 있으면 좋겠다는 팀원의 의견을 수용해 플로팅 버튼 형식의 위로가기 버튼을 추가하였습니다.
📍 회원 정보 관련
1) 기본 로그인 구현
- 기본 로그인 기능
- 로그인된 유저의 경우 헤더부분이 변경되도록 설정
- 사용자의 입력이 들어올 때만 버튼이 활성화
- 아이디를 입력한 경우에만 패스워드창이 활성화
- 엔터를 쳤을 경우에도 클릭과 동일한 이벤트 발생
- 로그아웃 기능
인풋태그 안에 버튼을 넣기위해
display : absolute속성을 활용, 인풋 태그로부터의 위치를 계산하여 구현하였습니다.
2) 아이디 저장 버튼 구현
- 아이디 저장을 클릭한 경우에 한해서 아이디 , 아이디 저장 버튼 클릭 여부를 저장
- 클릭만하고 로그인 하지 않는 경우에는 작동하지 않도록 설계
아이디 저장 버튼은 사용자별로 제공되어야 하기 때문에 로컬 스토리지에 변수를 저장해서 체크하는 방식으로 구현하였습니다.
3) 회원가입
- 기본 회원가입시 데이터베이스에 저장하는 기능
- 포커스를 얻으면 placeholder가 위로 올라가는 애니메이션 추가
- ID 중복체크 기능
- 우편번호를 직접 입력하지 않고 API를 활용, 검색해서 자동으로 입력되도록 구현
- 간단한 유효성 검사 ( 이름을 입력했는지 , ID/PW 가 4자리 이상인지 )
- 비밀번호 재입력과 동일한지 체크
4) 회원정보 수정
- PK인 아이디는 수정하지 못하도록 설정
- 회원정보를 수정하기 위해서는 기존 비밀번호를 입력하도록 설정
- 회원정보를 수정하면 로그아웃시키고 로그인창으로 이동
- 새로운 비밀번호를 입력한 경우에만 비밀번호를 변경하도록 구현
5) 회원탈퇴
- 회원 탈퇴기능
- 회원탈퇴시 로그아웃시킴
6) 기타 예외 처리
6-1) 로그인이 필요한 기능
- 로그인 하지 않은 상태로 로그인이 필요한 기능에 (
마이페이지,실거래가 검색) 접근시 로그인페이지로 이동
6-2) 로그인한 상태로 로그인 페이지에 접근
- 차단
6-3) ID 중복체크를 통과하고 아이디를 변경하는 꼼수
- 차단
📍관심 상가 등록
로그인 시 관심 상권정보를 등록할 수 있고 이에 따라 주천할 만한 부동산 실 거래가 내용을 제공
📍실거래가 검색
로그인 한 회원의 경우 등록한 관심 상권 정보에 따라 색을 달리하여 보여주도록 구현하였습니다. ( 비 회원의 경우 관심 상권 정보가 없으니 전부 하얀색 )
우측 중앙에 자세히 보기 토글 버튼을 통해 검색된 매물들의 정보를 아코디언 형식으로 펼쳐 볼 수 있습니다.
FE 개발자가 되자