룸메이트 프로젝트

성향 테스트를 통해 비슷한 생활습관을 가진 룸메이트를 찾아주는 서비스

<기획의도>

❓ 서울 거주 청년층의 주거 부담을 경감할 수 있는 방법이 없을까?
❗️ 주거비용을 분담할 룸메이트를 찾아줄 수 있으면 좋겠다!
💡 '룸메이트'는 생활반경과 생활패턴이 비슷한 룸메이트를 찾아주는 매칭서비스입니다.

<구현목표>

• 생활 습관 테스트를 통해 나와 매칭률이 높은 사람을 필터링하여 확인할 수 있다.
• 상세페이지에서 상대의 프로필과 집정보를 확인할 수 있다.
• 원하는 상대방과 실시간 1:1채팅이 가능하다.

⏯ 프로젝트 실행

• 여기를 눌러 실행하기
• Git Hub으로 실행하기

    1. git clone https://github.com/roommate-project/front-end.git
    2. npm install
    3. npm start
  



• 백엔드 Git Hub으로 이동하기

👩🏻‍💻🧑🏻‍💻 룸메이트 팀원

팀원		깃허브 주소
FE Developer	김원희	https://github.com/wooneeS2
	박수진	https://github.com/s0ojin
BE Developer	임서영	https://github.com/im-shung
	최재성	https://github.com/JessJess-Choi

🛠 프론트엔드 기술 스택

기술	선택한 이유
	- 팀원 모두가 사용가능한 프레임워크 - 컴포넌트화를 통해 재사용성이 높음
	- 런타임 이전에 오류를 알 수 있음 - 팀원들이 프로젝트를 통해 타입스크립트를 학습해보길 원함
	- 서버사이드 상태관리 용이 - 서버 데이터 캐싱을 통해 불필요한 요청 최소화 - InfiniteQueries를 활용한 데이터 무한스크롤/페이지네이션 구현이 용이
	- 각자 다른 부분을 개발하기 때문에 class/id가 겹치는 문제를 최소화 - css 커스텀 컴포넌트를 만들기 쉽고, 상속과 확장을 통해 재사용 용이 - js props에 영향받는 스타일 구현이 쉬움
	- 코드 일관성 확보 및 단순화 - 폼 상태관리 및 validation 용이 - 재렌더링 최소화, 인풋 필드별 상태 업데이트 구독 용이
	- 새로고침없이 필요한 컴포넌트를 렌더링 하기 위함

🙋🏻‍♀️ 프론트엔드 역할 분담

김원희

1. 로그인 구현
2. 매칭 상세페이지 구현
3. 마이페이지 구현
4. 매칭 테스트페이지 구현

박수진

1. 회원가입 구현
2. 매칭페이지 구현
3. 매칭필터 구현
4. 채팅 구현

🤫 룸메이트 미리보기

1. 회원가입

2. 로그인

3. 매칭성향테스트

4. 매칭페이지와 상세페이지

5. 채팅

6. 마이페이지

💡 버전

1.0 : 룸메이트 서비스 배포(22.10.23)