Portfolio

10 조

페이지 기획서 작성

→ 저희는 추가적으로 해당 페이지에 대한 기획서+

이후 구현 하는 분이 어떻게 구현을 할지, 어떻게 구현을 했는지 글로써 적어서 암묵지를 공유하면 좋을것 같습니다 https://blog.banksalad.com/tech/we-work-by-tech-spec/

단순 기획서 보다는

노션 기반 테크스펙을 작성하는것도 좋을듯 합니다

회원가입, 로그인 페이지

회원가입

이름

아이디(⇒ 이메일)

닉네임 (중복 확인)

성별

연령대

종목

로그인

아이디

비밀번호

메인 페이지

매칭리스트 (팀 매칭, 팀 구성이 끝난 상태)

장소

시간 (날짜 포함)

연령대

팀 정보( 각 팀에 속한 선수에 대한 정보? )

작성자 : 팀 명

모집 여부 [ 보류 ]

참가 비용

제목

내용

게시물 작성, 수정, 삭제일자

팀 페이지(팀원이 아니어도 접근 가능) - 담당: 용스톤, 쭝 ⇒ 역할에 대해 이야기 나눠보죠.

생성

팀 이름 (중복 확인)
로고 (⇒ 이미지)
팀 설명 ( ⇒ 세부 설명, ex ] 마음조기축구홰(?)입니다. ^^,,,즐겁개찹시다,,^^;;)
주요 종목 (1?단은 1?개만)
주요 연령대

팀 페이지 뷰 ( ⇒ 조회)

탈퇴( 팀장은 팀 삭제, 개인은 팀 탈퇴 )
총 경기 수
주장, 부주장 정보
주요 종목
주요 연령대
팀 이름
팀 설명 ( ⇒ 세부 설명, ex ] 마음조기축구홰(?)입니다. ^^,,,즐겁개찹시다,,^^;;
팀 생성일자
총 인원 ( 49/50 )
매너 점수 + 뱃지
멤버 리스트
로고 (⇒ 이미지)
용병 리스트
경기 (3~5개 ⇒ 추가 기능으로 어떤지... 로 말씀드리고싶네요 or 전체) - 보류
(팀 가입 신청 - 후순위)

수정

로고
세부 설명
주요 연령대

팀 관리 페이지

임명 ( 그대를 부팀장으로 임명하노라👑 ) / 강등 - 권한부여
초대 ( ⇒ 아이디 검색을 통한 초대 )
퇴출 ( ⇒ 리스트에서 강퇴)

경기 목록 페이지

상태에 따라 뷰를 다르게 ⇒ [ 매칭 전, 매칭 완료 ]

시작 전

노쇼 패널티 X

매칭 완료

노쇼 패널티 O
→ 경기 끝난뒤 양측의 평가 끝나면 완료로 전환! Good!

권한

주장

팀 해체 권한
권한 위임 권한
방출 권한
부팀장
팀 관련

팀 정보 변경 권한

사용자 관련

용병 가입 신청 받을 수 있는 권한
가입 권유할 수 있는 권한
용병 방출 권한

경기 관련

구인 게시판에 글을 올릴 수 있는 권한
경기 참가 신청 가능한 권한
경기 매칭을 등록할 수 있는 권한

일반 유저

용병에 신청할 수 있는 권한

개인 페이지

닉네임 (중복 확인)
성별
연령대
소속 팀 정보
세부 설명
종목
매너 정보
참여 경기 수 +상세보기(→ 경기목록 페이지) : 보류
주장이면, 팀의 색깔은 다르게 하이라이팅! (빨간색)
채팅 페이지로 이동 가능한 버튼 || 모달

경기 목록 페이지 *

상태에 따라 뷰를 다르게 ⇒ [ 시작 전, 완료 ]

수정

PW
닉네임 (중복 확인)
성별
연령대
세부 설명
종목
탈퇴 ( 꽁꽁 숨기게 display: none 호버하면 회원탈퇴 나오게 ㅇㅇ ! 정도로? ㅇㅋㅇㅋ)

용병 페이지

구인 글 작성

제목
포지션 (Optional)
장소
시간
연령대
세부 설명

구인 상세 페이지

제목
포지션 (Optional)
장소
시간 ( ⇒ 경기 시간)
원하는 용병의 연령대
세부 설명
채팅
팀 정보( 각 팀에 속한 선수에 대한 정보? )

팀 이름
팀 로고
팀장 정보 ( 채팅을 위함 → 채팅버튼 )
매너 지수( 배지 )
연령대
포메이션 ( ⇒ 내부에 팀원 정보가 있음 )

글 삭제 버튼
수정 버튼
용병 신청(신청자만 보임) 버튼
용병 신청한 유저 목록( 작성자만 보임/이 중에서 선택 ) - 수락 버튼, 거절 버튼

매칭 페이지

리스트 뷰 [ 종목은 필터에 의해서 처리됨 ⇒ 뷰에서 따로 보여주지 않아도 됩니다. ]

장소
시간 (날짜 포함)
작성자 : 팀 명
참가 비용
매칭 등록 버튼

상세 뷰

장소
시간 (날짜 포함)
팀 정보( 각 팀에 속한 선수에 대한 정보? )

팀 이름
팀 로고
팀장 정보
매너 지수(배지)
연령대
포메이션 ( ⇒ 내부에 팀원 정보가 있음 )

참가 비용 ( ⇒ 팀 단위로 참가 비용 올리기 )
세부 설명 ( ⇒ TMI, 저희는 사랑을 좋아하는 한사랑 입니다. 싸우지말고 즐겁게 해봅시다 ^^. )
글 삭제 버튼
수정 버튼
매칭 신청(신청자만 보임) 버튼
매칭 신청한 팀들의 목록( 작성자만 보임/이 중에서 선택 ) - 수락 버튼, 거절 버튼

매칭 등록

팀 선택
팀원 선택(포메이션) - (용병) bb
장소
시간 (날짜 포함)
참가 비용
세부 설명

설정 페이지

채팅

채팅 내부에 매칭 수락하는 버튼은 없앤다.

채팅은 1:1으로 기반으로 움직이고, 팀 간의 채팅은 추후 고려해보자! (주장-주장, 주장-용병)

개인 페이지 내부로 채팅 목록 페이지

추후 논의할 부분

노쇼 패널티

경기 신청 팀이 경기 취소??

팀장이 특정 사용자에게 팀 가입 권유하고 사용자가 수락

태그 정책

다방면 적으로

통합정리

방향성에 대한 이야기

1.매칭 vs 친목 도모

용스톤

친목도모에도 티어가 필요할 수 있다. ⇒ 친목 도모

호세

랭킹이 있는 매칭 → 결과를 입력하는 것이 어려울 것 같다. ⇒ 패널티를 주거나 양심에 맡겨야 하는건가?

목적에 대한 고민을 해봤을 때, 승부 목적의 사람들보다는 화목을 원하는 인원이 더 많지 않을까? ⇒ *친목 도모

친목 도모를 하는거라면, 굳이 나눠서 할 필요가 있을까? ⇒ 하나로 합치는게 프로젝트 색깔을 가져갈 수 있지 않을까!?

세지

주된 기능은 매칭을 해서 친목적으로 할 수 있게끔 하는 것이다.

태그들을 추가하는 재미로 고객들을 이끄는게 어떨까? 🙂

2. 채팅

세지

편하게 이야기 할 수 있도록 해줘야한다.

용록

쪽지 보내기 기능을 채팅처럼 이용할 수 있게끔 만들어주었다.

3. 예약 시스템

예약 시스템은 매칭과는 거리가 다소 있다고 느껴진다. ⇒ 추가 기능 || 구현을 하지 않아도 되는 부분쓰

4. 매칭 시스템

모든 사용자는 종목별로 등록된 경기를 확인할 수 있다.

경기 온보딩
사용자가 필터링해서 조회할 수 있다. (지역별, 티어 순 + @?)

권한을 갖는 사용자는 경기를 등록할 수 있다. ( 랭겜 or 일반겜 도입? )

주장인 팀중 팀을 선택
팀원 선택

최소 인원수를 설정해야 한다.

위치 정보
일정 정보

팀은 클랜처럼 팀장 또는 부팀장 정도만 열어준다.

5. 용병 모집

기본은 Case1 으로 가져가고, 사람이 갑자기 빠지는 특수한 상황에만 Case2를 가져가자.

case 1 : 용병 구인 게시판 ( 팀에 용병 권한으로 가입 )

case 2 : 경기 등록하며 용병 구하는 중 표시하기

용병 인원 부터 모집

용병 인원이 채워지면 경기 신청 가능 상태로 변경

6. 소통 창구는 어디에?

사무엘

Confluence를 사용하면 외부에 공개 X → 노션을 쓰는게 어떤가요?

회의록을 문서로 남겨두기,

🍒

GitBook API 문서 (1)

11조

좋은 문서를 아카이빙 해놓는것은 좋을것 같습니다

🙋🏻 프론트엔드

🙋🏻 백엔드

→ 이건 issue기반으로 가면 될듯 합니다

코딩 컨벤션

참고 컨벤션 (1)

참고 Git flow (1)

개발환경 설정(prettier, eslint, dotenv, material-ui v5, material-ui/icons)

node 버전 v14.17.6

MUI 5

styled component 방식이라 더익숙할수있다.
색상같은 부분은 후에 테마로 지정해주면 될 거같다.
@mui/icons-material
폰트 설정 서치( 도르 )

dotenv 활용해서 환경변수 처리

axios 사용

aixos hooks 라이브러리 사용

context API

Prettier


{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "proseWrap": "preserve",
  "endOfLine": "crlf",
  "htmlWhitespaceSensitivity": "css"
}

PR 템플릿


## 👀 이미지 또는 Gif <!-- 구현한 내용의 동작을 담은 이미지, gif 등. 시각화된 내용이 없다면 생략 -->

## 📝 요구 사항 및 구현 내용 <!-- 구현한 내용의 세부 사항 목록과 완료 여부 체크 -->

## 💡 포인트 <!-- 구현한 내용 중 추가 설명, 강조가 필요한 핵심 로직이나 코드 설명. '특히 자세히 봐줬으면 좋겠다!'하는 내용들 -->

## 🚩 이슈 <!-- 해결하지 못한 내용 또는 부족한 점이 있어 추가 논의가 필요할 것 같은 부분에 대한 상세 설명 -->
# 이슈 번호

코드리뷰 규칙

리뷰는 개인의 일 각자 알아서하기

당일 merge 는 2명이상 리뷰 했을 경우

다음날까지 1명만 리뷰 했을경우 그냥 merge

git branch 전략

브랜치명

[feature]/#티켓번호

git-flow

커밋 컨벤션

[태그 이름] [#이슈 번호] : [커밋 내용] (한글, 명령형)

ex) feat #1 : Text 컴포넌트 구현

태그 목록

feat : 새로운 기능을 추가할 경우

fix : 버그를 고친 경우

style : css, scss, styled component 등의 ui style 작업

lint: 코드 포맷 변경, 세미 콜론 누락, 코드 수정이 없는 경우

refactor : 코드 리팩토링

chore : 빌드 태스트 업데이트, 패키지 매니저를 설정하는 경우

rename : 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우

remove : 파일을 삭제하는 작업만 수행한 경우

hotfix: 긴급 수정

set: 환경설정

docs: readme.md 변경

12조

개발 언어 및 활용 기술

분석결과

기술스택

전반적으로 mui 사용 → 세세한 디자인을 못한다면 mui가 좋을듯함

상태관리는 context Api를 사용

axios 사용

회의

잦은 회의는 비효율적, 스크럼이 아닌 회의는 주제를 정하고 하면 좋을듯함

→ 아이디어 회의, 스프린트회의 진척도 점검 및 회고 등등

모순적으로 백과 프론트간의 회의 간격이 넓으면 서로의 암묵지가 달라서 의견차이가 발생할 확률이 높음

글로 서로의 암묵지를 줄일 필요가 있음

기술 문서 공유필요

api스펙 및 테크 스펙문서가 필요

테크스펙을 기준으로 설계 필요 → 백엔드 api 개발 전 api data 목킹 필요

api가 확정전 초기 단계에는 공통 컴포넌트 설계 필요

10-12조 분석