sim0321 / hackathon Goto Github PK

필수 기능 :

1. 문서 업로드 / 다운로드
2. 업로드한 문서를 타인이 보고 agree / confirm
3. 전체 프로세스의 진행도

집을 사고, 팔거나 혹은 전세 계약을 하는 과정은 생각보다 복잡하므로, 필요한 서류의 양식을 지정해 한 곳에서 서류들을 공유하며 진행 과정을 투명하게 볼 수 있는 부동산 C2C 거래 플랫폼

시연영상

• 매물 등록

• 다수의 입력 양식이 있는 경우 사용자는 지루함을 느낄 수 있거나 진행 상황을 알기 어려울 수 있으므로 UX를 고려하여 단계를 나누었습니다.

• 또한, 다음 버튼을 누르면 일괄적으로 유효성 검사가 완료되며 다음 단계로 진행하거나 오류 메시지가 표시됩니다.

• 이미지최적화 (블로그정리)

  • 사용자가 악의로 큰용량의 이미지를 넣는다면 S3의 비용, 렌더링 속도, 통신속도, 서버의 과부화 등 여러 문제가 생길 수 있어 이미지 최적화를 진행했습니다. (최대 약 85.4% 압축, 평균 약 32% 압축, 통신속도 약 26% 향상)

• 마이페이지

  • 한눈에 구매, 판매, 등록 상태 및 회원 정보를 확인할 수 있는 UI를 고려했습니다. 구매 및 판매 현황들은 table 형식으로 구현해 해당 list를 누르면 거래 페이지로 이동할 수 있게 구현했습니다. 이전에는 list를 누르면 아코디언 형식으로 아래로 펼쳐졌지만 거래가 중점인 서비스이다 보니 거래 과정을 사용자에게 더 자세히 보여줘야겠다고 판단해 페이지로 구현했습니다.

  • 또한 다양한 거래 상태가 있기 때문에 정확한 정보를 사용자에게 전달하기 위해 툴팁을 모달로 구현했습니다.

  • 거래 상세 페이지에서는 상태별 UI를 따로 분리해 구매자 및 판매자에게 보다 더 직관적으로 보일 수 있게 했습니다. (코드)

  • 거래가 중점인 서비스이다 보니 거래 과정이 보다 자세하게 사용자에게 보여야 한다고 판단해 기존의 아코디언 방식의 UI에서 페이지로 수정

    • 기존의 구매 및 판매 현황 (아코디언)
      

    • 수정 후 구매 및 판매 현황 (페이지)
      
      

  • 미리 지정된 양식을 지원해 주기 때문에 어떠한 양식인지 모를 사용자를 고려해 PDF Viewer를 추가해 사용자가 PDF 파일을 미리 볼 수 있게 지원

  • 구매자와 판매자를 위해 실시간 채팅 구현

1. React-Query

   1. 클라이언트의 데이터와 서버로부터 받은 데이터를 확실히 분류하기 위해
   2. 기존의 상태관리 라이브러리들은 서버의 데이터를 관리하기엔 적합하지 않다고 판단. (서버의 데이터는 수정이 되었지만, 클라이언트에는 미반영)

2. TypeScript

   1. 동적 타입인 JS에서 정적 타입인 TS로 마이그레이션을 위해
   2. 코드의 가독성이 낮아지는 옵셔널체이닝을 지양하므로 확실한 분기 처리를 위해
   3. 에러를 런타임 이전에 잡아 개발 생산성 향상을 위해

3. axios

   1. fetch는 JSON으로 따로 변환을 해줘야 하고 브라우저 호환성이 axios보다 떨어짐
   2. ajax는 jQuery와 사용해야 호환성 보장 및 promise 기반이 아니므로 데이터 핸들링이 어렵다고 판단
   3. URL, token을 중복으로 사용하는 것을 방지하고자 axois를 인스턴스화하기 위해

4. browser-image-compression

   1. 이미지 최적화를 위해

   2. react-image-file-resizer와 비교를 해본 결과 browser-image-compression이 사용도가 더 높아 정보가 많을 것이라고 판단
      

      

5. socket.io

   1. 실시간 통신을 위해서와 Web Socket보다 추가적인 기능(네임스페이스, 룸,다양한 전송 방식 등)이 많은 Web Socket 기반인 socket.io 선택

6. styled-components

   1. 프로젝트가 크지 않은 소규모 프로젝트라고 판단해 빠르게 테스트하기 위해
   2. 3일이라는 적은 시간 안에 프로젝트를 완성해야 하므로 가장 익숙한 styled-components 선택

7. react-pdf

   1. PDF 파일 미리보기 기능을 위해 도입