🌈 Colleful

Colleful은 React Native로 개발한 Restful API 기반 앱이다.

🌻 개요

전북대학교 과팅 매칭 플랫폼 Colleful의 client repository.
College와 Colorful의 합성어로, 다채로운 대학 생활을 제공해 주겠다는 의미이다.

📱 최적화 디바이스

• Android (Samsung Galaxy S7)

💡 사용 기술 스택

• 크로스 플랫폼 앱 : React Native (함수 컴포넌트 기반)
• 페이지 라우터 : React-navigation-v5
• CSS : emotion.js
• 상태관리 및 미들웨어 : Redux, Redux-saga
• AJAX 요청 : Axios, SWR
• 협업 : Github, Slack

🌴 브랜치 전략

• Git-flow 사용

🚀 colleful 앱 시연 영상

• 시연 순서 :
  회원가입 -> 로그인 -> 팀생성 -> 팀초대 -> 로그아웃 -> 팀을 구성하기 위해 초대를 보낸 계정으로 로그인 -> 초대 수락 -> 팀 상태 변경(준비 완료) -> 상대 팀(여자)을 만들기 위해 다른 계정으로 로그인 -> 팀 생성 -> 팀 상태 변경(준비 완료) -> 필터 및 검색 기능 -> 매칭 보내기 -> 보낸 매칭 목록, 받은 매칭 목록 -> 보낸 매칭을 수락하기 위해 남자팀 리더 계정으로 로그인 -> 매칭 수락 (팀 상태 :준비 완료 -> 매칭 완료) -> 팀 상태 변경 (매칭 종료) -> 닉네임 변경 -> 비밀번호 변경 -> 팀 삭제 -> 회원 탈퇴 -> 이메일 인증으로 비밀번호 찾기 -> 자동 로그인

🛠 리팩토링

• 리액트는 View를 중점적으로 다루는 라이브러리이기 때문에 컴포넌트 안에는 View에 대한 책임만 갖도록 View에 관련된 로직만 넣었습니다.

• 이렇게 네트워크 통신하는 것을 따로 만들어서 컴포넌트 안에 의존성 주입을 해주었습니다.

• 의존성 주입을 통해 객체의 생성과 사용의 관심을 분리하여 가독성과 코드 재사용을 높혔습니다.

• 컴포넌트를 한 폴더 안에 View만 집중하는 컴포넌트와 style만 집중하는 컴포넌트로 분리하여 코드량이 분산되었고 원하는 코드를 바로 찾을 수 있어 가독성이 좋아졌고 유지보수에 용이해졌습니다.

  CSS

  • 모두 styled-components로 작성
  • 네이밍은 모두 CamelCase로 작성
  • 네이밍 컨벤션으로는 독립적인 컴포넌트 스타일이면 S,
    • 재사용 될 스타일이면 assets/css/commons.js사용, 별칭은 P,
    • 받은매칭목록, 보낸초대목록 등 목록 레이아웃은 assets/css/InvitationMatchingListLayout.js 사용, 별칭은 L
    • 독립적인 컴포넌트 스타일은 엘리먼트 속성을 쉽게 파악할 수 있는 이름으로 통일
    • Wrapper는 컴포넌트를 감싸는 영역, WrapperInner는 컴포넌트 영역을 표시할 때, Container는 엘리먼트들을 감싸는 영역을 나타냄
    • 모듈을 감쌀땐 Styled[모듈이름]으로 통일
  • CSS 속성 기술 순서는 NHN 코딩컨벤션을 따름

출처 : https://nuli.navercorp.com/data/convention/NHN_Coding_Conventions_for_Markup_Languages.pdf

📱 화면 구성

인증 관련

로그인	회원가입	회원가입

비밀번호 찾기/변경	이메일 인증 성공후 비밀번호 변경	변경 성공

로그인 후

홈	홈 (팀 필터)	홈 (팀 검색)

팀 매칭 전 유저정보 보기 (이미지)	팀 매칭 전 유저정보 보기 (자기소개)	매칭 신청

마이페이지	계정 (본인 인증)	계정(회원정보 수정, 로그아웃, 회원탈퇴)

프로필 관리	프로필 변경 선택	프로필 변경

팀생성	팀생성	팀초대

팀목록	팀삭제 (팀원은 팀나가기)	팀삭제

팀 상태변경(매칭 완료)	팀 상태변경(멤버 구성중)	팀 상태변경(준비 완료)

채팅목록(매칭 x)	채팅목록(매칭 완료)

받은 초대목록	받은 초대목록

보낸 초대목록	보낸 초대목록

받은 매칭목록	받은 매칭목록

보낸 매칭목록	보낸 매칭목록

👩🏻‍💻 기타

• Colleful server repo
• API.md