- 프로젝트 기간 : 2023.06.01 ~ 2023.06.30
- 리팩토링 기간: 2023.07.20 ~ 2023.08.20
- 배포 URL : 🔗SPPORT
- TestID / PW : [email protected] / only_lions123
- 'SPPORT'은 스포츠 팬들에게 유용한 정보를 제공하고 사용자가 서로의 일상을 공유하는 SNS 플랫폼입니다.
- 'SPPORT'이라는 이름은 'SPORTS'와 'SUPPORT'를 합친 것으로 스포츠 팬들이 그동안 불편하게 느꼈을 부분들을 다양한 기능을 통해 편의를 제공하겠다는 의미를 담았습니다.
- 팀을 팔로우하여 게시물 피드에서 해당 날씨와 경기 일정에 대해서 알 수 있고 팬들끼리의 팔로우를 통해 서로의 게시글을 확인하고, 댓글과 좋아요를 통해 서로 소통할 수 있습니다.
1. 팀 소개
2. 기술 및 개발 환경
3. 주요 기능
4. 프로젝트 구조
5. 역할 분담
6. Flowchart
7. UI
8. 페이지 기능
9. 핵심 기능
✏️ Dozen 팀을 소개합니다!
안녕하세요. 저희는 4명의 Front-end 개발자로 구성된 Dozen팀입니다.
dozen은 연필과 같은 물건의 개수를 나타내는 단위 중 12개 묶음을 의미하는데, 4명이 한 묶음처럼 협력하고 발전하겠다는 의미가 담겨있습니다.
(멋쟁이사자처럼 프론트엔드 스쿨 5기 프로젝트 12팀입니다.)
| 우혜리 | 김서영 | 신민철 | 이영주 |
|---|---|---|---|
 |
 |
 |
 |
| hyeri-woo | seoyoung-kim | mincheol.shin | gbsb227 |
| 개발 환경 |
[FrontEnd] React, React-Query, Axios, Recoil, Styled-Components [BackEnd] 제공되는 API 사용 🔗 제공된 API |
| 버전 및 이슈 관리 | Git/GitHub / Notion |
| 컨벤션 | Eslint / Prettier / GitHub PR Template |
| 프로젝트 관리 | GitHub Pull Requests |
| 커뮤니케이션 | Notion / Discord |
| 배포 | Netflify |
| React Query | 비동기 데이터 요청과 관리를 간단하고 효율적으로 처리하기 위해 사용 |
| Axios | HTTP 요청과 응답 처리를 보다 단순하고 직관적으로 처리하기 위해 사용 |
| Recoil | 상태 관리를 단순하게 만들고, 성능을 최적화하며, 전역 상태를 효율적으로 관리하고 유지 보수를 더 쉽게 하기 위해 사용 |
| Styled Components | 컴포넌트 기반 스타일링을 통해 관리와 재사용을 강화하고, 코드 유지 보수를 간편하게 하며 CSS 클래스 충돌 문제를 회피하기 위해 사용 |
| react-helmet-async | meta 태그와 페이지별 타이틀을 위해 사용 |
| browser-image-compression | 이미지 용량을 줄여 로딩속도를 올리기 위해 사용 |
| splide | 빠른 캐러셀 구현하기 위해 사용 |
| react-loading-skeleton | 스켈레톤 UI를 구현하기 위해 사용 |
🔗 커밋 컨벤션
| 태그 이름 | 설명 | 이모지 |
|---|---|---|
| Initial | 시스템 초기 설정 | 🎉 |
| Feat | 새로운 기능을 추가할 경우 | ✨ |
| Fix | 버그를 고친 경우 | 🐛 |
| Design | CSS 등 사용자 UI 디자인 변경 | 💄 |
| Style | 코드 포맷 변경, 세미 콜론 누락, 코드 수정이 없는 경우 | 🎨 |
| Refactor | 프로덕션 코드 리팩토링 | ♻️ |
| Comment | 필요한 주석 추가 및 변경 | 💬 |
| Docs | 문서를 수정한 경우 | 📝 |
| Chore | 빌드 태스트 업데이트, 패키지 매니저를 설정하는 경우(프로덕션 코드 변경 X) | 📦 |
| Rename | 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우 | 🚚 |
| Remove | 파일을 삭제하는 작업만 수행한 경우 | 🔥 |
| Merge | 파일 또는 브랜치 병합할 경우 | 🔀 |
| Dir | 폴더 및 문서 구조 변경할 경우 | 📁 |
| !BREAKING CHANGE | 커다란 API 변경의 경우 | 👽 |
통일성 있는 코드 작성을 위해 다양한 🔗코드 컨벤션 을 정해 사용했습니다.
{
"printWidth": 80,
"singleQuote": true,
"jsxSingleQuote": true,
"tabWidth": 2,
"semi": true,
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "always",
"quoteProps": "preserve"
}
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["react", "prettier"],
"rules": {
"prettier/prettier": "warn",
"react/react-in-jsx-scope": "off",
"linebreak-style": ["error", "unix"],
"quotes": ["error", "single"],
"semi": ["error", "always"],
"no-extra-semi": "error",
"no-tabs": ["error", { "allowIndentationTabs": true }],
"react/prop-types": "off",
"no-unused-vars": "off",
"indent": "off"
}
}기능 별 자세한 내용은 해당 위키를 참고해주세요.
- 로그인
- 회원가입
- 프로필 설정
- 유효성 검사
- 토큰 검증
- 게시글 업로드
- 무한 스크롤
- 필터링
- 유저/팀 검색
- 게시글 수정/삭제
- 댓글 게시/삭제
- 게시글/댓글 신고
- 로그아웃
- 프로필 수정
- 팔로우/팔로잉
- 일정 추가
- 선수 리스트
- 앨범형/리스트형 게시글
- 무한 스크롤
⚾ final-12-spport
├─ .env ------------------------------------ 🛠️ 환경변수
├─ .eslintignore
├─ .eslintrc.json -------------------------- 🛠️ eslint 설정파일
├─ .github
│ ├─ 📁 ISSUE_TEMPLATE -------------------- 🔖 이슈 템플릿
│ ├─ 📁 workflows -------------------- 🛠️ GitHub Action 설정파일
│ └─ pull_request_template.md ------------- 🔖 PR 템플릿
├─ .gitignore
├─ .prettierignore
├─ .prettierrc ----------------------------- 🛠️ prettier 설정파일
├─ 📌 README.md
├─ package-lock.json
├─ package.json
├─ 📁 public
│ ├─ _redirects
│ ├─ favicon.ico
│ └─ index.html
└─ 📁 src
├─ App.js
├─ index.js
├─ 📁 api ------------------------------- 🔃 API 관련 폴더
├─ 📁 assets ---------------------------- 🗓️ 정적 데이터 모음
├─ 📁 atom ------------------------------ ⚛️ Recoil 관련 폴더
├─ 📁 components
│ ├─ 📁 Comment ------------------------ 🧩 댓글 관련 컴포넌트
│ ├─ 📁 Common ------------------------- 🧩 공통 컴포넌트
│ ├─ 📁 Follow ------------------------- 🧩 팔로우/팔로잉 관련 컴포넌트
│ ├─ 📁 List --------------------------- 🧩 리스트 관련 컴포넌트
│ ├─ 📁 Post --------------------------- 🧩 게시글 관련 컴포넌트
│ ├─ 📁 Profile ------------------------ 🧩 프로필 관련 컴포넌트
│ └─ 📁 Skeleton ----------------------- 🧩 스켈레톤 관련 컴포넌트
├─ 📁 hooks ----------------------------- 🪝 커스텀 훅 폴더
├─ 📁 pages ----------------------------- ⚛️ 페이지 폴더
├─ 📁 routes ---------------------------- 🧭 라우터 설정 폴더
├─ 📁 style ----------------------------- 💄 스타일 설정 폴더
└─ 📁 util ------------------------------ 📜 필요한 함수 폴더
자세한 내용은 🔗 해당 위키에서 확인해주세요.
| Splash | 로그인 페이지 | 회원가입 페이지 |
|---|---|---|
| 홈 페이지 | 홈 페이지 필터링 | 검색 페이지 |
|---|---|---|
| 마이 프로필 페이지 | 마이 프로필 페이지 일정 추가 | 유저 프로필 페이지 |
|---|---|---|
| 팀 프로필 페이지 공 아이콘 | 팀 프로필 페이지 선수 보러 가기 | 팀 프로필 페이지 경기일정 |
|---|---|---|
| 태그 검색 | 프로필 수정 페이지 | 로그아웃 |
|---|---|---|
| 게시글 작성 | 게시글 수정 | 게시글 삭제 |
|---|---|---|
| 게시글 상세 페이지 | 이미지 슬라이더 | 게시글 신고 |
|---|---|---|
| 댓글 작성 | 댓글 삭제 | 댓글 신고 |
|---|---|---|
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent