# 📚 드루와 😎

<br/>
# 기획캠퍼
J058_김진옥
J075_문상혁
J129_위태영
J132_유주현
J153_이유찬
S029_오승연
S057_최수정
<br/>

# 동기

1. ****COVID-19 로 인한 대면 스터디 모임의 수 감소****

- 대한민국의 COVID-19 확진자 수가 18.5 만명 넘어섰다. 감염을 피하기 위해 사람들은 다른 사람과의 접촉을 꺼려하고, 자연스럽게 대면 스터디 모임들도 그 수가 현저히 줄어들었다. 이런 상황에서 효율적인 학습을 위한 비대면 서비스가 필요하다고 생각했다.

2. ****오프라인 스터디의 한계****

- 실제로 오프라인 스터디를 구하고 학습을 진행하기 위해서는 생각보다 많은 시간이 걸린다. 스터디를 위한 만남을 가질때마다 시간과 돈은 물론이고 상황에 따라서는 스터디를 진행하지 못하게 되는 경우도 있다. 반면 오프라인 스터디 모임은 시간이나 장소에 부담이 적어 쉽게 참여할 수 있을 것이라 생각했다.

<br/>

# 목적

1. 온라인을 통한 안전하고 간편한 스터디 구성

- 온라인을 게시판 기능을 이용해 비대면 상황에서 안전하고 손쉽게 스터디를 구성하고자 한다.

2. 온라인 툴을 이용한 효율적인 스터디 진행

- 오프라인 스터디와 달리 온라인 스터디에서는 PC를 적극적으로 활용한 스터디 진행이 가능
하다. 이에 스터디를 보조하는 서비스를 제공해 효율적인 진행을 돕고자 한다.

<br/>

# 기존 서비스 조사

## 소모임


### 서비스 소개

- 같은 지역, 관심사를 가진 사람들이 모일 수 있는 커뮤니티를 제공해주는 서비스

### 주 이용자

- 20대 -30대, 지역 간의 친목모임의 경우 40대도 적지 않음

### 주요 기능

- 모임 생성

→ 소모임 개설자가 지역,관심사를 작성하여 모임을 생성

- 초대와 가입

→ 초대 기능으로 사람들을 모임에 초대하거나, 키워드로 검색하여 참여하고 싶은 모임에 가입
- 정기모임

→ 권한을 가진 사람이 정기모임을 열고, 나머지 인원들은 참석 여부를 눌러서 정모약속을 잡음

- 소통

→ 게시글, 채팅방을 통해 모임 멤버들과 소통 가능

### 한계점

- 모임에 가입 전까지, 소개글 외에는 모임과 주최자에 대한 정보를 알 수 없음. 때문에 스터디 그룹이라고 소개한 모임이 실제로 사이비 모임 등 비정상적인 활동을 하는 모임인 경우가 많음

- 정모 중심의 모임이기 때문에 오프라인으로 참석하지 않을 시 그룹원 사이에서 도태

- 오프라인 상에서 활동하는 모임이 대부분이라서 코로나 시국에 원활한 활동이 이루어지는데 한계

- 무분별한 초대기능으로 관심없는 모임에서 초대를 받게 되는 경우가 많음

<br/>

## 열품타


### 서비스 소개

공부 시간을 측정해주는 스터디 스톱워치 앱. 이용자들끼리 공부 시간을 확인할 수 있고 랭킹도 존재하여 온라인 상에서 서로 자극받으며 공부할 수 있도록 해주는 서비스.

### 주 이용자

10대 - 20대 학생, 취준생, 고시생

### 주요 기능

- 스탑워치

→ 스탑워치를 시작하면 휴대폰 이용 불가, 공부 시간 측정하고 기록

- 스터디 플래너

→ 과목별 간단한 체크리스트 기능 제공

- 그룹

→ 그룹을 만들어 그룹 내 랭킹 생성, 채팅 가능

→ 캠스터디 그룹에서는 그룹원들끼리 캠을 켜고 서로 공부하는 모습을 공유할 수 있음

- 랭킹

→ 전체 랭킹, 고3 랭킹 등등 카테고리별 랭킹 보기 기능

- 통계

→ 나의 공부 시간 통계를 시각화하여 확인 가능

### 한계점

- 열품타에서 제공하는 그룹 기능은 함께 공부하고 지식을 나누는 스터디원을 구하는 것이 아니라 서로 자극받으며 경쟁할 경쟁자를 모집하는 개념

- 주로 그룹은 스터디 분야와 관계없이 같은 연령대나 같은 학교 친구 등으로 구성되고 있음

- 스터디 참여 정도를 공부 시간으로만 체크, 공부량, 목표 달성률 등은 고려하지 못함

<br/>

# 주요기능

## A. 스터디 모집 기능

**스터디 모집을 통해 스터디를 개설하고 참가자로부터 신청을 받는다.**

### a. 회원가입 / 로그인

- 구글 계정을 통해 회원가입/로그인을 진행한다.
- 회원가입 이후 사용자는 `닉네임`, `관심분야(태그)`, `자기소개` 정보를 입력한다.

(이때 온라인 스터디이므로 지역정보는 입력하지 않는다)

### b. 스터디모집 기능

- 스터디장은 스터디 모집 게시판에 모집공고를 올려 스터디원을 모집받는다. 이때 공고 제목이 스터디 이름이 된다.
- 스터디장은 공고 게시글을 `태그`를 통해 분류할 수 있고, 새로운 `태그`를 생성할 수 있다. 회원은 `태그`별로 공고 검색이 가능하다.
- 스터디장은 "`마이페이지 > 모집중인 스터디`"에서 신청한 회원의 프로필을 확인할 수 있다.
- 스터디장은 원하는 시점에서 모집을 종료할 수 있다.
- 스터디장의 수락을 받은 참가자들은 자동으로 `스터디 팀 룸` 에 참여되며(필수), 푸시 알림을 받는다(선택).
- 선별되지 못한 참가자는 푸시 알림을 통해 비선별 사실을 통보받는다(선택).

### c. 스터디 참가 신청

- 모집 공고 게시글의 "신청"버튼을 통해서 참가 신청을 받는다.
- 스터디장이 추가로 원하는 정보가 있다면 구글폼(Google Forms)을 통해 신청받는다.
- 스터디장에 전달되는 참가자의 정보는 `구글폼`, `참가자의 평판`, `자기소개`이다.

<br/>

## B. 스터디원 상호 평가 기능과 사용자 프로필

스터디원의 상호 평가가 사용자의 평판에 반영되고, 사용자의 프로필에서 평판을 확인할 수 있다.

### a. 상호 평가 진행 절차

- 스터디원 간의 상호 평가는 매주 진행된다.
- 상호 평가는 자체 평가 페이지에서 진행된다.
- 평가 항목은 `단일 별점`과 `한줄평`으로 이루어진다.

### b. 강제 퇴장

- 스터디원을 강제 퇴장시킬 수 있는 권한은 스터디장에게 있다. 스터디장은 강제퇴장 당하지 않는다.
- 한 번 강제 퇴장당한 스터디원은 해당 스터디에 다시 참여할 수 없다.

### c. 내 프로필에 반영

- 해당 유저의 프로필을 클릭하면 지금까지 참여한 스터디 목록과 평점 조회 가능
- 평점에 따라 다른 아이콘 표시
<br/>

## C. 진도 확인 기능

**온라인 도구를 이용해 스터디의 일정을 조정하고 학습진행 상황을 관리한다.**

### a. My Study

- My Study 버튼 클릭 시 내가 참여하고 있는 스터디 그룹을 나열한다.
- 특정 스터디 그룹 클릭시 해당 스터디 그룹의 페이지로 이동한다.

### b. Study Group

- 스터디장은 스터디 그룹의 to-do list를 추가할 수 있다.
- 스터디원은 to-do list 의 완료 여부를 체크할 수 있다.
- (선택) 오랫동안 진행되지 않은 과제에 대해서는 알림을 통해 리마인드를 시켜준다.


<br/>

# 플로우 차트
---
---

# 스토리보드

### 메인 화면
<br/>

### 마이페이지
<br/>

### 스터디그룹 페이지(그룹별)
<br/>

<br/>

# 차별성 및 기대 효과

1. 스터디 분야와 목적에 따른 온라인 스터디 모집/참여 게시판 제공

→ 쉽고 빠르게 스터디 모집 및 참여 가능

→ 코로나 사태 속 안전한 스터디 활동 가능

2. 스터디원 상호 평가 기능에 기반한 평판도 제공

→ 스터디원들의 적극적 참여 유도

→ 부적절한 이용자 필터링 효과

3. 스터디원들끼리 To-Do-List를 설정하고 달성 결과를 공유할 수 있는 스터디룸 제공

→ 쉬운 스터디 관리 & 진행

<br>

---

<br>

# 📚 드루와 😎 - Week 2 (기능 A)

### 2주차 릴레이 프로젝트 팀

| K034 | J079 | J097 | J106 | J019 | J013 | J162 | K002 |
| ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ |
| [안하현](https://github.com/anhahyoun) | [민지호](https://github.com/minjyo) | [방규빈](https://github.com/9b2n) | [손호영](https://github.com/17-sss) | [김동규](https://github.com/Donggggg) | [김경진](https://github.com/kyungjin99) | [이지훈](https://github.com/jihun1233) | [김동현](https://github.com/dongkey1198) |

-----

## 요구사항
스터디 모집을 통해 스터디를 개설하고 참가자로부터 신청을 받는다.

### 회원가입 / 로그인
- [x] 구글 계정을 통해 회원가입/로그인을 진행한다.
- [x] 회원가입 이후 사용자는 `닉네임`, `관심분야(태그)`, `자기소개` 정보를 입력한다. (이때 온라인 스터디이므로 지역정보는 입력하지 않는다)

### 스터디 모집 기능
- [ ] ~~스터디장은 스터디 모집 게시판에 모집공고를 올려 스터디원을 모집받는다. 이때 공고 제목이 스터디 이름이 된다.~~
- [x] 스터디장은 공고 게시글을 `태그`를 통해 분류할 수 있고, 새로운 `태그`를 생성할 수 있다. 회원은 `태그`별로 공고 검색이 가능하다.
- [ ] ~~스터디장은 "`마이페이지 > 모집중인 스터디`"에서 신청한 회원의 프로필을 확인할 수 있다.~~
- [ ] ~~스터디장은 원하는 시점에서 모집을 종료할 수 있다.~~
- [ ] ~~스터디장의 수락을 받은 참가자들은 자동으로 `스터디 팀 룸` 에 참여되며(필수), 푸시 알림을 받는다(선택).~~
- [ ] ~~선별되지 못한 참가자는 푸시 알림을 통해 비선별 사실을 통보받는다.(선택사항)~~

### 스터디 참가 신청
- [ ] ~~모집 공고 게시글의 "신청"버튼을 통해서 참가 신청을 받는다.~~
- [ ] ~~스터디장이 추가로 원하는 정보가 있다면 구글폼(Google Forms)을 통해 신청받는다.~~
- [ ] ~~스터디장에게 전달되는 참가자의 정보는 `구글폼`, `참가자의 평판`, `자기소개`이다.~~

------

## 구현 내용(Layout)

### 로그인 페이지
앱을 처음 실행하면 뜨는 화면입니다. 아래의 버튼을 눌러 구글 계정으로 로그인할 수 있습니다.

<img src="https://i.imgur.com/9yaPed8.png" width=300 />
<img src="https://i.imgur.com/ZS57PLq.png" width=300 />

### 프로필 페이지

로그인한 유저의 프로필 페이지입니다. 프로필 페이지에서는 사용자의 프로필 사진과 이름, 이메일 주소, 자기 소개 밑 참여 중인 스터디 그룹 목록을 볼 수 있습니다.

<img src="https://i.imgur.com/3KV1mCj.png" width=300 />
<img src="https://i.imgur.com/00YDQBW.png" width=300 />

### 메인 페이지
메인 페이지에서는 현재 모집 중인 스터디들의 리스트를 보여줍니다.
<img src="https://i.imgur.com/gqWBgjH.png" width=300 />

### 스터디 상세 페이지
선택한 페이지에 대한 상세 정보를 보여주는 페이지입니다.
<img src="https://i.imgur.com/OSXAvW1.png" width=300 />

### Firebase Real-Time Database 구조
#### User Table
<img src="https://i.imgur.com/uYP8OGh.png" width=300 />

#### Board Table
<img src="https://i.imgur.com/nb982XK.png" width=300 />

## Demonstration (GIF)

### iOS

<img src="https://user-images.githubusercontent.com/33610315/127771568-f73e09cb-51e0-48f3-8ba0-bbc89c3b5198.gif" width=300/>

### Android

<img src="https://user-images.githubusercontent.com/33610315/127771584-dff7b9d4-d325-404a-9c0b-f7cd80ba7f68.gif" width=300/>

-----

# 📚 드루와 😎 - Week 3 (기능 B)

### 3주차 릴레이 프로젝트 팀

| K030 | J078 | J207 | J146 | J177 | S034 | K038 | S051 |
| ------ | ------ | ------ | ------ | ------ | ------ | ------ | ------ |
| [신기열](https://github.com/betterafter) | [민수빈](https://github.com/binimini) | [최유진](https://github.com/yujin0719) | [이영범](https://github.com/Dev-Beom) | [장수용](https://github.com/waterdrag0n) | [윤상진](https://github.com/alibreo3024) | [이도경](https://github.com/dokyeonglee) | [전여훈](https://github.com/jeonyeohun) |

-----
## A 기능 리뷰

1. 파이어 베이스 연동으로 구글 로그인 구현
2. 각종 mock 데이터로 기본적인 UI 구현
a. 로그인 페이지
b. 프로필 페이지
c. 메인 페이지
d. 스터디 상세 페이지

## A 기능 수정 사항

기획 의도에 반하는 사항이 될 수도 있지만 A 기능을 구현하신 분들의 의도와 기타 여러 가지 사항을 고려하여 A 기능을 수정하였습니다.

1. Firebase 로그인 기능 삭제
- A 기능에서 Firebase는 구글 로그인 연동에만 사용되었고, 다른 데이터는 JSON으로 직접 받아오도록 구현되어 있어 로그인 기능을 제거했습니다.
- 아래에서 다시 이야기할 것이만 A 기능의 미비한 데이터베이스 추가와 사용자 연동까지 B팀에서 구현하기에는 작업해야하는 양이 지나치게 많고 가볍고 즐거운 개발을 추구하는 릴프의 취지와는 맞지 않는다고 생각했습니다.
- B 기능을 구현하려면 A기능의 스터디 모임 생성 기능과 가입 기능이 완성되어 있어야 하기 때문에 능력 범위를 넘는 것으로 판단하여 수정하였습니다.

2. JSON 데이터 변경

**스터디 그룹 데이터** (data/groupData.json)

    {
      "id": 1,
      "title": "챌린지 미션 스터디A",
      "master": "JK(사칭)",
      "email": "[e-mail]",
      "contents": "챌린지 미션 리뷰해드립니다.",
      "desc": "네트워크",
      "isRecruit": true,
      "time": "새벽 5시"
    }

1. id : 스터디방 식별 ID
2. title : 스터디방 제목
3. master: 방장 이름
4. email : 방장 이메일
5. contents : 스터디 관련 정보
6. desc : 카테고리
7. isRecruit : true(모집중)/false(모집완료)
8. time : 스터디 진행 시간대

**앱 사용자 데이터** (data/groupData.json)

    [
      { "name": "아이스크림", "email": "[e-mail]", "groupid": 1, "score": 1},
      { "name": "나를따라와", "email": "[e-mail]", "groupid": 1, "score": 3},
      { "name": "살려줘", "email": "[e-mail]", "groupid": 1, "score": 5}
    ]

1. name : 닉네임
2. email : 사용자 이메일
3. groupid : 가입한 스터디 그룹 고유 번호
4. score : 별점

3. JSON 파싱

      Future<void> readJson() async {
        final String response = await rootBundle.loadString('data/groupData.json');
        final data = await json.decode(response);
        setState(() {
          groups = data;
        });
      }

      initState(){
        super.initState();
        readJson();
      }

4. UI 수정
- 기능을 추가하며 어울리지 않았던 새롭게 추가된 기능과 어우러지게 색상을 변경하고, UI를 변경함

## 요구사항 B. 스터디원 상호 평가 기능과 사용자 프로필

### a. 상호 평가 진행 절차 [O]

- 스터디원 간의 상호 평가는 매주 진행된다.
- 상호 평가는 자체 평가 페이지에서 진행된다.
- 평가 항목은 `단일 별점`과 `한줄평`으로 이루어진다.

### b. 강제 퇴장 [X]

** 해당 기능은 실제 데이터베이스를 사용하지 않기 때문에 구현하지 않았습니다. **

- 스터디원을 강제 퇴장시킬 수 있는 권한은 스터디장에게 있다. 스터디장은 강제퇴장 당하지 않는다.
- 한 번 강제 퇴장당한 스터디원은 해당 스터디에 다시 참여할 수 없다.

### c. 내 프로필에 반영 [O]

- 해당 유저의 프로필을 클릭하면 지금까지 참여한 스터디 목록과 평점 조회 가능
- 평점에 따라 다른 아이콘 표시
<br/>

## 구현 내용(Layout)

### 스터디 모집 게시판 UI (검색바 추가)

카테고리를 키워드로 지정해서 검색을 합니다. ("A 기능 수정 사항" -> "2. Json 데이터 변경"에서 예시로 든 "스터디 그룹 데이터" json의 "desc" 키에 해당)

<사진>

### 스터디 세부정보 페이지 UI

"스터디 그룹 데이터"에 저장된 해당 스터디의 방장, 스터디 관련 내용 등 여러 정보를 보여줍니다.

<사진>

## 4주차 기능 C 구현 시 참고 사항

- 데이터베이스가 없기 때문에 채팅과 같은 기능을 구현할 수 없습니다. 추가적인 기능들을 자율적으로 구현하시면 될 것 같습니다.
- 몇 가지 제안:
- 홈 화면 위젯 추가
- 사용자 개인 별 todoList 기능
- json으로 todoList 데이터 저장

## 개발 환경
- Flutter 2.2.3
- Dart 2.13.4
- Android Studio 3.x
- xCode 12.4
- Visual Studio Code