[front-end] 글 올리기 페이지 - 예외처리

변경 사항

1.  글쓰기 페이지 들어오면 스크롤 고정

2. 카드 넘어갈 때도 동일하게 스크롤 고정되어있음

3. 주소 입력 페이지에서 주소검색블럭이 아닌 바깥 부분을 클릭하면 없어지도록 함

4. 예외처리

 

예외 처리 목록

1단계 - 제목 입력 X

2단계 - 모든 값들 중 하나라도 입력 안하면 X, 해당층/전체층, 방개수/화장실 개수에 숫자 아닌 값 or 0 입력

3단계 - 월세 입력 X

4단계 - 주소 입력 X, 주소 서울내 아닌 경우

5단계 - 성별 입력 X

6단계 - 연락처 입력 X, 연락처 형식에 맞지 않는 경우, (추후 이미지 추가 안한 경우도 추가 예정)

 

 

 

 

값 예외 처리하는건 별로 오래 안걸렸는데 주소 검색창을 띄우고나서 검색창 바깥을 클릭하면 검색창이 꺼지도록 하는 것을 구현하는데서 엄청 헤맸다. 하지만 늘 그렇듯 결국엔 생각보다 복잡하지 않고 간단하게 해결되는 듯.

 

원래 코드는 상위 컴포넌트에서 검색창 컴포넌트를 div에 감싸놓고 주소 검색이 클릭되면 <div><주소검색창></div> 를 뿌려주도록 되어있었다. 원하는 기능 구현을 위한 시도로 주소검색창 ref를 만들어서 ref가 연결된 도중에 만약에 바깥쪽에 클릭이 일어나면 <div><주소검색창></div>를 없애도록 했다. 그런데 주소검색 창이 화면에 뜨기도 전에 ref가 먼저 연결된 상태에서 바깥쪽을 클릭하니 안쪽 검색창의 크기와 포지션을 잡아주던 div만 날아가버리고 뒤늦게 나타난 검색창은 안드로메다로 날아가 footer보다 아래에 달려버리는 현상이 나타났다. 그래서 그냥 <div><주소검색><div> 자체를 하나의 컴포넌트로 빼서, 이 컴포넌트 안에서 componentDidMount로 이벤트 리스너가 실행되도록 했다. 이렇게 하니까 원하던대로 잘 작동한다.

 

뿌듯행

다음은 찜 목록 만들어둔거 손 좀 보고 마이페이지로 넘어가야겠다.