🐋 Welcome

본 레포지토리는 코드스테이츠(부트캠프) 수료 이후, 개선 및 추가 사항들을 반영하면서 그 기록들을 남긴 곳입니다.

✏️ Intro

프로젝트명: Studylog

팀 구성: 프론트 2명, 백앤드 2명 (백앤드 개발자로서 참여)

배포 Link: https://studylog.tk/

• 현재 AWS 비용 문제로 인해 배포를 중지하였습니다. 필요하시면 소프트웨어를 다운로드하신 후 확인해주시기 바랍니다.

✏️ About

“StudyLog에서 모각공(모여서 각자 공부)하자!”

스터디카페에 가기는 귀찮고 혼자하자니 집중이 잘 안되시나요?

StudyLog에서는 함께 공부도 하고 기록도 할 수 있습니다.

📚 STACKS

CLIENT

SERVER

AWS

📌 Install

## Client와 Server 각각의 폴더에서 설치
$ npm install

📌 Settings

Client

## Client의 .env.example 파일명을 .env로 변경하여 사용
## .env 안에 들어갈 내용
REACT_APP_SERVER=http://localhost:4000
REACT_APP_GOOGLE_CLIENT_ID= 구글 클라이언트 정보의 Client ID
REACT_APP_GOOGLE_CLIENT_SECRET= 구글 클라이언트 정보의 Client SECRET

Server

## Server의 .env.example 파일명을 .env로 변경하여 사용
## .env 안에 들어갈 내용
DATABASE_HOST= db 호스트
DATABASE_USER= db 계정
DATABASE_PORT= db 포트 번호
DATABASE_NAME= db 이름
DATABASE_PASSWORD= db 패스워드

SERVER_PORT= 서버 포트 번호(ex: 4000)

ACCESS_SECRET= jwt access 시크릿 키
REFRESH_SECRET= jwt refresh 시크릿 키

GOOGLE_CLIENT_ID= 구글 클라이언트 정보의 Client ID
GOOGLE_CLIENT_SECRET= 구글 클라이언트 정보의 Client SECRET

KAKAO_CLIENT_ID= 카카오 클라이언트 정보의 Client ID
KAKAO_CLIENT_SECRET= 카카오 클라이언트 정보의 Client SECRET


MAIL_ID= 보내는 메일의 주소
MAIL_PASSWORD= 보내는 메일의 비밀번호

SERVER=http://localhost:4000
CLIENT=http://localhost:3000/login

📌 앱 실행

## Client와 Server 각각의 폴더에서 실행
$ npm run start

✨ Feature

• 화상으로 거리 또는 시간에 관계없이 팀원과 의견을 실시간으로 공유하며 공부할 수 있습니다.
• 4인까지 참여할 수 있는 채팅방에서 친구들과 같이 얼굴을 보며 대화와 채팅을 할 수 있습니다.
• todo목록을 할일, 진행중, 완료 3가지 단계로 구별하여 볼 수 있는 칸반보드를 제공합니다.
• 일주일 간의 공부시간을 그래프화하여 확인하고 일주일간의 총 공부시간을 확인해볼 수 있습니다.

1. 사용 스택 및 스택 아키텍쳐

2. Wirframe

Landing Page

회원 가입

로그인

내 정보

ID 찾기

PWD 찾기

공부방 목록

공부방 생성

화상 채팅

Study To-Do

나의 공부

관련 모달

3. UI 디자인

Landing Page

회원 가입

로그인

내 정보

ID 찾기

PWD 찾기

공부방 목록

공부방 생성

화상 채팅

Study To-Do

나의 공부

관련 모달

4. DB 스키마

5. API 문서

https://ad105geppetto.gitbook.io/studylog-api/

6. 주요 기능별 시연 GIF

랜딩 및 로딩 페이지

회원가입

로그인

마이페이지

로그아웃

아이디/패스워드 찾기

Todo 칸반보드

공부시간 차트

공부방 목록

공부방 생성

공부방 사용

🔥 Refactoring

• 의미있는 변수와 함수 이름으로 변경하기

💧 Additional Details

• 카카오 소셜 로그인 추가하기
• Typescript type 재작성하기
• 데이터베이스에 비밀번호 암호화하여 저장하기