필수 기능 :
- 문서 업로드 / 다운로드
- 업로드한 문서를 타인이 보고 agree / confirm
- 전체 프로세스의 진행도
집을 사고, 팔거나 혹은 전세 계약을 하는 과정은 생각보다 복잡하므로, 필요한 서류의 양식을 지정해 한 곳에서 서류들을 공유하며 진행 과정을 투명하게 볼 수 있는 부동산 C2C 거래 플랫폼
-
매물 등록
-
다수의 입력 양식이 있는 경우 사용자는 지루함을 느낄 수 있거나 진행 상황을 알기 어려울 수 있으므로 UX를 고려하여 단계를 나누었습니다.
-
또한, 다음 버튼을 누르면 일괄적으로 유효성 검사가 완료되며 다음 단계로 진행하거나 오류 메시지가 표시됩니다.
-
이미지최적화 (블로그정리)
- 사용자가 악의로 큰용량의 이미지를 넣는다면 S3의 비용, 렌더링 속도, 통신속도, 서버의 과부화 등 여러 문제가 생길 수 있어 이미지 최적화를 진행했습니다. (최대 약 85.4% 압축, 평균 약 32% 압축, 통신속도 약 26% 향상)
-
마이페이지
-
한눈에 구매, 판매, 등록 상태 및 회원 정보를 확인할 수 있는 UI를 고려했습니다. 구매 및 판매 현황들은 table 형식으로 구현해 해당 list를 누르면 거래 페이지로 이동할 수 있게 구현했습니다. 이전에는 list를 누르면 아코디언 형식으로 아래로 펼쳐졌지만 거래가 중점인 서비스이다 보니 거래 과정을 사용자에게 더 자세히 보여줘야겠다고 판단해 페이지로 구현했습니다.
-
또한 다양한 거래 상태가 있기 때문에 정확한 정보를 사용자에게 전달하기 위해 툴팁을 모달로 구현했습니다.
-
거래 상세 페이지에서는 상태별 UI를 따로 분리해 구매자 및 판매자에게 보다 더 직관적으로 보일 수 있게 했습니다. (코드)
-
거래가 중점인 서비스이다 보니 거래 과정이 보다 자세하게 사용자에게 보여야 한다고 판단해 기존의 아코디언 방식의 UI에서 페이지로 수정
-
미리 지정된 양식을 지원해 주기 때문에 어떠한 양식인지 모를 사용자를 고려해
PDF Viewer
를 추가해 사용자가 PDF 파일을 미리 볼 수 있게 지원 -
구매자와 판매자를 위해
실시간 채팅
구현
-
-
React-Query
- 클라이언트의 데이터와 서버로부터 받은 데이터를 확실히 분류하기 위해
- 기존의 상태관리 라이브러리들은 서버의 데이터를 관리하기엔 적합하지 않다고 판단. (서버의 데이터는 수정이 되었지만, 클라이언트에는 미반영)
-
TypeScript
- 동적 타입인 JS에서 정적 타입인 TS로 마이그레이션을 위해
- 코드의 가독성이 낮아지는 옵셔널체이닝을 지양하므로 확실한 분기 처리를 위해
- 에러를 런타임 이전에 잡아 개발 생산성 향상을 위해
-
axios
- fetch는 JSON으로 따로 변환을 해줘야 하고 브라우저 호환성이 axios보다 떨어짐
- ajax는 jQuery와 사용해야 호환성 보장 및 promise 기반이 아니므로 데이터 핸들링이 어렵다고 판단
- URL, token을 중복으로 사용하는 것을 방지하고자 axois를 인스턴스화하기 위해
-
browser-image-compression
-
socket.io
- 실시간 통신을 위해서와 Web Socket보다 추가적인 기능(네임스페이스, 룸,다양한 전송 방식 등)이 많은 Web Socket 기반인 socket.io 선택
-
styled-components
- 프로젝트가 크지 않은 소규모 프로젝트라고 판단해 빠르게 테스트하기 위해
- 3일이라는 적은 시간 안에 프로젝트를 완성해야 하므로 가장 익숙한 styled-components 선택
-
react-pdf
- PDF 파일 미리보기 기능을 위해 도입