## 협업 기획서

### 구성원 소개
이정준 & 홍승용

### 목표
1. 완성도 보다는 새로운 기술들을 많이 적용해서 경험치를 쌓아보자.
2. 기술들을 사용하게 되면 파트너에게 최소한의 설명이 가능할 수 있게끔 공부하기(정리)
3. 서로가 작성한 코드는 서로를 이해 시켜주기
4. 프로젝트를 진행하는데 있어서 요구되는 기술스택을 완벽히 이해하고 사용하기(왜 쓰는지 알고 쓰자)
5. 꼼꼼한 코드리뷰를 하되 상대방에게 공격적으로 하지 말자
6. 즐거운 분위기에서 코딩하기
7. styled components 사용하기!
8. redux를 사용해서 상태관리를 하자!
9. react hook을 사용해보자!

### 그라운드 룰
1. 저녁 7시에 줌에서 만나서 중간 결과를 서로 확인한다. 진행사항 여부만 확인.
2. 스크럼 진행 사항을 돌아가면서 작성한다.
3. 변경사항이 있으면 slack 채널에 공지한다.
4. 저녁 7시까지 slack에 10분안에 답장을 해야 한다.
5. 아침 피어세션에서 진행도 파악후 계획 수정을 진행한다. 😆🙇‍♂️
6. pr를 draft로 작성한 뒤, 파트너가 리뷰를 진행할 때 pr 상태를 변경한다. 이후 pr 머지는 작성자나 자동머지 봇이 하도록 한다.
7. 기능 구현은 구현하고 싶은 이슈를 할당받아서 진행하기. 완료 후에 다른 이슈에 할당하기.

### 커밋 컨벤션

# <tag>: <subject> - <issue>
##### Subject 50 characters ################# -> |


# Body Message
# [<field>:<기능이름>]
# - 설명
######## Body 72 characters ####################################### -> |

# --- TAG NAME ---
#   feat    : 새로운 기능 추가
#   fix     : 버그 수정, 코드 스타일 수정 코드 포맷 변경, 세미 콜론 누락 등
#   refactor: 코드 리펙토링 로직 수정 X
#   design  : css, html, 레이아웃 수정
#   docs    : 문서 추가 및 수정
#   test    : 모든 테스트 작업
#   chore   : 잡다한 일들
# --- FIELD NAME ---
#   be      : 서버관련 작업
#   fe      : 클라이언트관련 작업
# ---- 세부 규칙 ------
# 제목줄은 명령어로 작성한다.
# 제목줄은 마침표로 끝내지 않는다.
# 본문과 제목에는 빈줄을 넣어서 구분한다.
# 본문에는 "어떻게" 보다는 "왜"와 "무엇을" 설명한다.
# 본문에 목록을 나타낼때는 "- "로 시작한다.
# ------------------

### 린트, 프리티어 설정
1. 중간정검과 아침 피어세션과 린트, 프리티어 설정

//.eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', "react-hooks"],
  rules: {
    "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn" // Checks effect dependencies
  },
};

// .prettierrc.js
module.exports = {
    singleQuote: true,    // 문자열은 홑따옴표로 formatting
    semi: true,           // 코드 마지막에 세미콜른이 있게 formatting
    useTabs: false,       // 탭의 사용을 금하고 스페이스바 사용으로 대체하게 formatting
    tabWidth: 2,          // 들여쓰기 너비는 2칸
    trailingComma: 'all', // 객체나 배열 키:값 뒤에 항상 콤마를 붙힘
    printWidth: 100,      // 코드 한줄이 maximum 80칸
    arrowParens: 'always',// 화살표 함수가 하나의 매개변수를 받을 때 괄호를 생략하게 formatting
    endOfLine: 'auto',    // windows에 뜨는 'Delete cr' 에러 해결
  };

### 칸반 보드, 이슈 등록 정리, PR 정리
칸반 보드 Project 탭으로 진행

이슈, PR 템플릿 달기
https://soft.plusblog.co.kr/66

이슈 제목
(우선 순위) 기능
이슈 내용

### 🔨 기능 설명
기능 설명

### 📑 구현할 내용
목록화 

### 🚧 주의 사항
기능을 구현할 때 유의깊게 살펴볼 사항

(### 스크린 샷)

PR 제목
[J000] DAY01 이슈 제목 issue#
PR 내용

### 🔨 작업 내용 설명

### 📑 구현한 내용
뭐했는지 목록화 

### 🚧 주의 사항
기능을 구현하면서 만났던 어려웠던 점.

[### 배포]

[### 스크린 샷]

[### 질문거리와 리뷰 포인트]

### 계획
2021-10-11 요구사항 명세서, EERD 생성, api 명세서

https://github.com/woowa-techcamp-2021/store-9
https://github.com/woowa-techcamp-2021/store-6/wiki

### 네이밍 컨벤션
1. url: kebab-case
2. 변수, 함수명: camelCase
3. 클래스 명: PaskalCase

4. [fe] 컴포넌트 및 컴포넌트 관련 파일 & 폴더: PascalCase
5. 그외 파일명: camelCase

6. 상수 : UPPERCASE_SNAKE_CASE
7. 이미지 명: kebab-case

### 브랜치 룰
**main branch**
프로덕션 레벨의 코드를 가지고 있는 브랜치입니다.
직접 commit 하지 않습니다. 오직 pr을 통해서 코드를 머지합니다.

**dev branch**
main branch에서 파생되는 브렌치로 개발되는 feat 브랜치들이 merge 되는 브랜치입니다.
팀에서 유지되는 가장 최신의 코드 입니다.
직접 commit 하지 않습니다. 오직 pr을 통해서 코드를 머지합니다.

**feat branch**
feat branch는 dev branch에서 파생되는 브랜치로 각 기능 단위로 나뉜 브랜치입니다.
실제 브랜치명은 'feat/#{이슈 번호}' 입니다.
e.g. feat/#23

local branch feat/#23 에서 작업한 다음에 git push

### 이슈 등록

(우선순위) (분류(server/client)) 기능
1. (Middle)(Server) github Ouath 기능 구현
1. session 담당 redis 구축
2. 사용자 프로필 저장
3. Login API

2. (Middle)(Client) Login Page 기능 구현

3. (High)(Client) 웹 소켓 서버 구현
1. 캐릭터 이동 message - socket.io 공부
2. 주변 5x5반경 캐릭터 감시
3. 각 케릭터의 위치정보를 가지고 있어야 한다.
4. 사물 정보를 가지고 있어야 한다.
5. 접속중인 유저 - 메모리

4. (High)(Client) 캐릭터 이동 기능 구현
1. 서버로부터 응답을 받은 후에 이동.
2. 사용자들끼리 겹치지 않도록 함.
5. (Middle)(Client) profile 모달
1. 사용자 github 아바타 전시
2. 사용자 이름 전시
3. 사용자 설명 전시
4. (추가 구현)본인 클릭시 프로필 클릭시 edit 기능 - api 파는 작업도 필요함.
6. (High)(Client) 사이드바 - 접속 유저 전시 기능 구현
1. 접속자에 대한 정보는 서버에서 주기적으로 푸시를 한다.
7. (Low)(Client) 헬프 모달 구현
8. (High)(Client) 메인 페이지 렌더링 구현
1. 지도 렌더링 -> 사물 렌더링 -> 사람 렌더링 순으로 렌더링.
2. 지도 이동은 추후에....
9. (Middle)(Server) 사물 API 구현
1. 사물 업로드 API - 이미지 png, jpg만 적용.
2. 메인 화면에 사물 등록 API
10. (Middle)(Client) 빌드 탭 기능 구현
1. 사진 업로드
2. 사물 선택 기능

10. (Middle)(Client) 사물 컨텍스트 메뉴 구현
1. 사물 마우스 오른쪽 버튼 클릭시 컨텍스트 메뉴, 사물 하이라이팅
2. 컨텍스트 메뉴의 사물 지우기
3. 컨텍스트 메뉴의 사물 위치 변경
4. 빌드 탭 활성화시에만 적용.

11. (High)(Client) 채팅 FE 구현
1. 채팅 탭 열림/닫힘
2. 받은 채팅 사이드바 뱃지
3. 사이드바 하단 채팅박스로 메시지 전송

12. (Low)(Client) 케릭터 고스트 이동
13. (Low)(Client) 이미지 최적화
1. webpack asset 최적화 부분 공부.

내일 할일
1. socket.io 공부
2. redis 공부
3. react-hook
4. styled-components

맨 처음 시나리오
1. 유저 로그인
2. 소켓 서버 접속
3. 클라이언트에서 서버로 지도 요청
4. 지도 렌더링
5. 클라이언트에서 서버로 사물리스트 요청. 등록 테이블(id, positon_X, position_Y, stuff_id); 사물 테이블()
6. 사물 렌더링
7. 클라이언트에서 서버로 나와 유저들 위치, 아바타 데이터 요청 - 스테이트로 관리.
8. 사용자 렌더링
---- 로딩 창 -----
9. 클라이언트 렌더링 끝나서 사용자와 인터렉션

로딩 끝나고 이동하는 시나리오
다른 사람이 이동하는 경우
1. 서버로 부터 데이터가 들어온다.
2. 들어온 사람의 이동한 사람의 ID, newX, newY 좌표 전송 받음.
3. 사용자 데이터 업데이트.
4. 리 사용자 렌더링.

내가 이동하는 경우
1. 서버로 이동할 위치로 데이터 전송 ID, newX, newY 좌표 전송.
2. 응답을 받고 성공시
3. 이동
4. 리 사용자 렌더링.

https://github.com/login/oauth/authorize?client_id=4713a6b34fa3e7af05fd&redirect_url=http://localhost:3000/api/oauth/github/callback

### API 명세서
1. 로그인
- github login - GET /api/oauth/github
- github login callback - GET /api/ouath/gihub/callback?client_id&redirect_url

- user profile 조회 - GET /api/users/:userId
- user description 업데이트 - PATCH /api/users/:userId

2. 사물
- 사물 조회 api - GET /api/stuff
- 사물 등록 api - POST /api/stuff
- 사물 업데이트 api - PATCH /api/stuff/:stuffId

https://documenter.getpostman.com/view/17462823/UV5RmzkF

### 소켓 메시지
1. 유저 이동
client -> server -> client BroadCast

{
    type: "move_user",
    body: {
        userId: 0,
        positionX: 0,
        positionY: 0,
    }
}

2. Map에 사물을 추가할 때
client -> server unicast

{
    type: "position_stuff",
    body: {
        stuffId: 0,
        positionX: 0,
        positionY: 0,
    }
}

server -> client broadcast

{
    type: "position_stuff",
    body: {
        stuffId: 0,
        imageUrl: "",
        positionX: 0,
        positionY: 0,
    }
}

3. Map에 사물을 지울 때
client -> server -> client BroadCast

{
    type: "remove_stuff",
    body: {
        positionedStuffId: 0,
    }
}

4. Map에 사물을 이동할 때
client -> server -> client BroadCast

{
    type: "move_stuff",
    body: {
        positionedStuffId: 0,
        positionX: 0,
        positionY: 0,
    }
}

5. 사용자 상태 변경
client -> server -> client BroadCast

{
    type: "modify_user_state",
    body: {
        userId: 0,
        state: "offline"/"online",
    }
}

6. chat
client -> server -> client BroadCast
- 서버에서 필터링 후

{
    type: "chat",
    body: {
        senderId: 0,
        positionX: 0,
        positionY: 0,
        content: "offline"/"online",
        createdAt: Timestamp,
    }
}

7. 로그인
client -> server

{
    type: "enter_user",
    body: {
        userId: 0,
    }
}

client -> client BroadCast

{
    type: "enter_user",
    body: {
        userId: 0,
        username: "",
        positionX: 0,
        positionY: 0,
    }
}

8. 로그아웃
client -> server -> client BroadCast

{
    type: "exit_user",
    body: {
        userId: 0,
    }
}

9. 지도 리셋
client -> server -> client BroadCast
- 배경만 리셋

{
    type: "reset_map",
}

2021-10-11 월요일

홍승용 - 오늘 컨디션은 좋아서 운동도 열심히 했습니다. 요구사항 분석, 디자인을 진행하면서 디자인을 지금까지 소홀하게 했다고 느꼈습니다. 내일 부터는 리액트, 기술 공부 시작!

이정준 - 오늘은 컨디션은 쏘쏘였습니다. 여러 설계 문서를 같이 작성 몰랐던 점들을 많이 배웠네요 오늘은 설계를 다 했으니.. 내일은 socket 공부와 프로젝트 init을 진행해봅시다. 아직 페어프로그래밍이라서 서로 작업이 같네요.

2021-10-12 화요일
이정준 - 아침부터 일찍일어나서 주사맞고왔더니 피곤합니다 ㅋㅋ 그래도 힘내봐야죠 오늘은 일찍 자야겠어요! 오늘은 이슈 정리하고, 프로젝트 초기설정 추가, 각자 공부할 것 공부하고 공유 시간을 갖으면 좋겠습니다.

홍승용 - 아침에 10시 1분전에 일어났다. 그래도 지금은 컨디션이 좋아져서 이번 프로젝트 처음하는 리액트로 진행할려면 어제 공부하던 Hook을 오늘 쌈빡하게 공부해놔야겠다.

## 오늘할일
- [ ] 이슈 정리 및 할당
- [ ] 프로젝트 초기 설정 프로젝트 폴더 구조 - 페어프로그래밍
- [ ] 각자 공부하고 공유 시간

// 서버
PORT=
FRONT_SERVER_HOST=

MYSQL_USER=
MYSQL_PASSWORD=
MYSQL_HOST=
MYSQL_PORT=
MYSQL_TABLE=

JWT_SECRET=

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GITHUB_CALLBACK=
GITHUB_ACCESS_TOKEN_URL=
GITHUB_USER_INFO_URL=

// 클라이언트
API_SERVER_HOST=

2021-10-13 수요일
이정준 - 백신맞고 몸살 기운이 생겨서 걱정했는데 낮부터 컨디션이 좋아져서 다행입니다. 그래도 여파때문에 많은 코딩을 하지는 못했네요. 참 아쉽습니다. 오늘은 sequelize 연동과 auth api 개발 정도하고 내일은 저도 fe에 손을 대보고 싶네요.

홍승용 - 컨디션이 정말 좋았으나, 크롱님의 컨디션이 200%인 바람에 수업을 듣고, 현업 개발자님들의 밋업으로 하루를 거의 다 쓴것같다. 오늘은 처음으로 리액트로 페이지를 만들어보는 날이라서 코드 한줄 짜는데 구글링이 더 많다ㅜ

## 오늘할일
- [ ] Server Sequelize 연동
- [ ] Auth API 개발
- [ ] react router 설정

2021-10-14 목요일
이정준 - 오늘은 어제와 다르게 날아갈것 같은 컨디션이네요. 오늘 재호님과 상혁님을 본받아 많은 처리를 할수있도록.. 힘내겠습니다. 오늘은 주로 클라이언트쪽에 손을 대볼 생각이고 사용자 이동부터 시작해볼게요.

홍승용 - 오늘은 수업이 없는 날이니까 이슈 2개 빼는게 목표! 저도 재호님과 상혁님의 구현 속도...는 못따라 가겠지만 열심히 해야한다고 매일 느끼게 해주십니다ㅜ 공부한거 정리하는것도 잊지 말아야 하는데...

## 오늘할일
- [ ] 사용자 캔버스 이동
- [ ] 소켓 서버 생성

2021-10-15 금요일
이정준 - 오늘은 코딩을 못하는 금요일! 컨디션은 좋았지만 학습에 힘을 많이 실었고 피어세션에서 많이 배워서 삽질해야할 부분을 미리 알게되었습니다. 언넝 코드 짜고싶네요 하하. 오늘은 버그 수정과 로그인 페이지 구현했습니다.

홍승용 - 오늘은 어제 새벽에 만든 채팅 소켓을 마무리하고, 수업을 열심히 들어서 배고프다. 피어세션 때 처음 듣는 키워드가 많아서 머리가 무겁다ㅜ

## 오늘할일
- [ ] 버그 수정
- [ ] 로그인 페이지
- [ ] fe 채팅 소켓 연결

2021-10-18 월요일
이정준 - 활기찬 월요일 컨디션 좋네요. 메인 페이지 케릭터 이동 개선을 할 생각이고 오늘 마무리 할 수 있도록 하려합니다.

홍승용 - 오늘은 기분 좋은? 월요일이다. 컨디션이 아주 바닥이다. 집에서 지네나오는 꿈을 꿨다. 오늘은 자동 배포에 대해서 공부하고, 적용시켜볼 예정입니다.

## 오늘할일
- [ ] 사용자 프로필
- [ ] 메인 페이지 케릭터 이동 개선
- [ ] 자동 배포 설정

2021-10-19 화요일
이정준 - 오늘은 컨디션도 좋고 과 시간이 널널하여 꽤나 많이 진행하였습니다. 재밌게 진행했습니다.

홍승용 - 오늘은 백신 맞고 다음날인데, 몸은 하나도 안아프다. 그런데, 늦잠 자서 늦어버렸다... 이러다 부캠 수료못하면 아빠한테 빠따맞는다. 정신차리자.

## 오늘할일
- [ ] 캐릭터 다중 유저 socket 연결
- [ ] 자동 배포 구현
- [ ] 유저 캔버스 애니메이션 추가
- [ ] 채팅 everyone, nearby 추가

2021-10-20 수요일
이정준 - 컨디션이 쏘쏘 입니다. 어제 같은 불꽃코딩은 못할 것 같습니다. 대신 학습을 오래 해야겠습니다. 학습주제는 배포와 ansible입니다.

홍승용 - 오늘도 10시 1분전에 일어났다. 오늘은 크롱님의 수업이 있으니까 점심을 많이 먹어놔야 살아남을 수 있을것같다.

## 오늘할일
- [ ] 빌드 탭 구현 / extended Tab 코드 정리
- [ ] 캐릭터 고정 맵이동으로 수정
- [ ] 프로필 online / offline 업데이트
- [ ] 로그아웃

2021-10-21 목요일
이정준 - 어제 학습 계획이 있었지만 하지 못했다. 하지만 map이 이동해도 이동한 곳에 맞는 position 좌표에 등록할 사물 div가 맞게 움직이고 올바른 좌표가 등록해서 좋았습니다. 오늘은 시간이 충분히 널널하고 마무리 일정이기에 사물 등록까지 마무리할 생각입니다.

홍승용 - 배고프다. 이제 학습 스프린트 기간도 다 끝나가는데, 지식이 흘러서 다 넘쳤다. 프로젝트 전에 정주행을 하고 싶은데 바로 한다고 한다ㅜ.
## 오늘할일
- [ ] 빌드 탭 서버와 소켓 연동
- [ ] 캐릭터 움직임 나 / 상대 동기화 👍
- [ ] 마우스로 움직이기

2021-10-22 금요일
이정준 - 어제 힘을 다 해버렸습니다. 오늘은 코딩을 그만하고.. 놀아야겠네요. 다들 고생많으셨습니다. 나름 만족했습니다!

홍승용 - 어제 자다가 얼굴에 모기 4방 물려서 기분이 아주 안좋다. 오늘은 구경하고 다니면서 쉬어야겠다.
## 오늘할일
- [ ] 남이 배포한 것 구경하고 따봉 날리기