온방
타 지역에 집을 구해야 하거나 빠르게 집을 구해야 하는 당신! 직접 매물을 보러가기 어려워 집을 구하는 과정이 힘들었나요? 온방 이 제공하는 화상통화를 이용하여 간편하게 매물을 확인해보세요!
개요
이 프로젝트는 화상을 통한 방 구경 서비스를 개발하여, 허위 매물을 줄이고 방 계약 과정에서 발생하는 공간적·시간적 제약을 줄이고자 했습니다. 사용자는 지도와 검색을 통해 부동산 매물에 대해 확인하고 화상을 예약할 수 있으며 직접 방문 없이도 체크리스트를 통해 세부 정보를 실시간으로 확인하고 저장된 영상을 통해 재확인이 가능합니다.
주요 기능
webRTC를 활용한 화상 채팅
체크 리스트 타임 스탬프 및 다시 보기 적용
부동산 매물 검색 및 조회
부동산 매물 등록
로그인, 회원 가입 및 중개인 유저 전환
임차인 정보 수정 및 예약 관리, 찜 목록
시스템 아키텍쳐
Frontend
Backend
CI / CD
Collaboration
담당 구현
webRTC
openVidu를 활용한 실시간 화상 채팅 구현 및 화상 채팅 진행 로직 및 브라우저 기능 조작
체크리스트
체크리스트 생성 및 타임 스탬프 기능을 위한 시간 저장
로그인 및 회원가입
로그인 및 회원가입, 중개인 유저 전환 신청, 유저 정보 수정
토큰 관리, 라우팅 가드
토큰 저장 분리를 통한 보안성 및 관리 편의성 확보, 유저 ROLE에 따른 라우팅 가드
전역 상태 관리
Zustand를 활용한 전역 상태 관리 및 데이터 별 Slice 분리
입력 이벤트, 데이터 처리
정규식을 활용한 입력 이벤트 처리, 입력 규칙 및 파일 형식 설정
서비스 대표 화면
매물 정보 확인 및 예약 신청
지도와 검색 기능을 통해 부동산 매물을 확인하고, 매물 정보는 물론 중개인 정보도 확인할 수 있습니다. 또한, 가능한 시간에 화상 예약을 신청할 수 있습니다.
화상 방 구경 및 체크 리스트
방을 구경하며 나만의 체크리스트를 완성할 수 있습니다. 항목에 체크를 시간이 자동으로 기록되고, 나중에 다시 볼 때 타임스탬프를 통해 해당 시점을 확인할 수 있습니다.
화상 예약 관리 및 마이 페이지
예약 상태에 따라 화상 방 입장하거나 다시 보기 등의 작업을 수행할 수 있습니다.
성과 또는 배운 점
데이터 조회
이 프로젝트를 진행하면서 정말 중요하지만 놓치고 있었던 점은 데이터 조회 방식이었습니다. 모든 관련 데이터를 한 번에 가져오고 이를 페이지로 나누어 표시하는 방식은 브라우저가 모든 데이터를 메모리에 저장하게 만들어 성능 저하를 일으킬 수 있습니다. 이 경험을 바탕으로, 다음 프로젝트부터는 데이터 사이징을 더 고려하려고 합니다.
모듈화의 중요성
처음 진행하는 프로젝트였기 때문에 폴더 구조와 디테일한 부분에서 부족함이 있었습니다. 공통 컴포넌트를 제대로 만들지 않아, 매물 등록 페이지에서는 전송 데이터가 많았음에도 코드가 800줄을 넘는 일이 발생했습니다. 이는 좋은 코드라고 생각되지 않았고, 이 경험을 바탕으로 점점 더 나은 방향을 찾아가고 있습니다.
토큰 관리
액세스 토큰은 로컬 스토리지에, 리프레시 토큰은 쿠키에 저장하는 방식으로 구현했습니다. 이는 세션 간에 유지되는 로컬 스토리지의 특성을 활용한 사용자 경험 향상과, Secure 플래그를 통한 보안 강화를 동시에 고려한 방법입니다.