🗓 개발기간 : 24년 5월 13일 ~

💬 EFFI에서 회의하기

목차

1. 프로젝트 소개
2. 멤버 소개
3. 사용 스킬 소개
4. 디렉토리 구조
5. 브랜치 전략

📖 프로젝트 소개

EFFI 는 효율성을 뜻하는 efficiency 에서 이름을 가져왔습니다.
화상회의 중 논의했던 안건이나 대화내용을 리포트 형식으로 제공함으로써 따로 회의록을 작성하지 않고 회의에만 집중할 수 있도록 하여 효율적인 협업문화를 제공하는 것을 목표로 하고 있습니다.

📝주요 기능

✅ 소셜 로그인 및 로그아웃 - google OAuth 를 사용하여 google 이메일을 통해 로그인 할 수 있습니다.

✅ Nav, Side 바 - nav, side 바는 회의실을 제외하고 모든 레이아웃에 fixed로 공통으로 존재합니다.

• Nav 바에서는 다크모드를 설정할 수 있고, 알림 목록 및 내 프로필을 조회할 수 있습니다. 알림은 socket으로 구현되어 실시간으로 확인할 수 있습니다.
• Side 바에서는 로비 페이지로 이동할 수 있는 버튼이 있고, 그룹 만들기 및 내가 만든 그룹 리스트들을 볼 수 있습니다.

✅ 로비 페이지 - 로비 페이지에서는 예약된 회의 일정을 캘린더에서 확인할 수 있고, 퀵버튼을 통해 내 프로필을 보거나 내가 만든 그룹의 회의를 바로 생성할 수 있습니다.

✅ 그룹 홈 - 특정 그룹 홈 페이지에서는 회의 생성, 그룹 관리 외에 리포트 목록과 그룹 멤버들을 조회할 수 있습니다.

✅ 회의실 - 회의실에서는 접속한 멤버들끼리 webRTC 및 socket으로 구현된 화상채팅과 텍스트 채팅을 할 수 있습니다. 다른 멤버들이 체크하는 안건을 실시간으로 확인할 수 있고, 예상 종료 시간 이후에 회의실에 남아있는 멤버가 1명일 시 방이 5분 뒤 자동으로 종료됩니다.

🧑‍🤝‍🧑 멤버

FE_황경수 🚩	FE_김재성	FE_이재성	FE_여승구	FE_최원석
BE_소준영	DESIGN_조효은

✨ 기술 스택

FE

🗂️ 디렉토리 구조

└─ src
 ├─ api
 ├─ assets 
 ├─ components
 ├─ constants
 ├─ hooks
 ├─ pages
 ├─ stores
 ├─ styles
 ├─ utils
 ├─ App.tsx
 ├─ main.tsx
 └─ Router.tsx

• src폴더

  • api : axios 인스턴스 설정 및 api 호출 함수들이 위치합니다.

  • assets : icons, images들이 위치합니다.

  • components : 전역으로 재사용 가능한 컴포넌트들이 위치합니다.

  • constants : 공통적으로 사용되는 상수들을 정의한 파일들이 위치합니다.

  • hooks : 전역으로 쓰이는 커스텀 훅들이 위치합니다. react-query를 사용하여 데이터를 전역적으로 관리하기 위한 훅도 이 폴더에 위치합니다.

  • pages : react router를 이용하여 라우팅을 적용할 때 페이지 컴포넌트를 이 폴더에 위치시킵니다. 각 페이지 컴포넌트 마다 아래 디렉토리 구조를 적용해 해당 페이지에서만 사용되는 컴포넌트, 훅, 유틸 함수 등을 관리하도록 했습니다.

    └─ pages
      └─ login
        ├─ api
        ├─ components
        ├─ constants
        ├─ hooks
        ├─ utils
        ├─ types
        └─ index.tsx
    

  • stores : zustand를 사용하여 데이터를 전역적으로 관리하기 위한 폴더입니다.

  • styles : 전역적인 styled가 담긴 폴더

  • utils : 자주 사용되는 로직을 담는 폴더

  
  

🔎 브랜치 전략

'EFFI'에서는 4개의 브랜치를 관리하는 Git Flow 브랜치 전략을 사용합니다.

main

• 항상 Stable 한 상태인 Branch입니다.
• 모든 커밋은 언제든 배포할 수 있는 상태여야하며 언제든 Branch를 새로 만들어도 문제가 없어야 합니다. 또한 Main Branch의 모든 커밋은 빌드가 되고 테스트를 통과해야합니다.

develop

• 개발을 위한 코드가 담긴 Branch입니다.
• 개발이 모두 완료가 되면 Main Branch로 merge 됩니다.

feature

• 새로운 기능을 개발할 때에는 feature 브랜치를 develop 브랜치로부터 생성합니다.
• 별도로 hotfix 브랜치를 관리하지 않으며, 버그 수정도 feature 브랜치에서 진행합니다.
• feature 브랜치의 이름은 기능을 설명하는 명확한 이름으로 네이밍 해야합니다. ex ) feature/user-content-cache
• feature 브랜치의 커밋은 기능이 완성되지 않았더라도 팀원들간 원할한 소통을 위해 꾸준히 Push합니다.
• 새로운 기능을 개발하기 위해 feature 브랜치를 생성하기전 develop 브랜치에서 Pull을 해야합니다.
• 해당 브랜치에서 기능개발을 완료 후 PR이 승인되어 develop에 merge되면 remote 저장소에 있는 해당 기능 브랜치는 삭제해야 합니다.

release

• 이번 출시 버전을 준비하는 브랜치입니다.
• 배포를 위한 전용 브랜치를 사용함으로써 한 파트가 해당 배포를 준비하는 동안 다른 파트는 다음 배포를 위한 기능 개발을 계속할 수 있습니다.