⚾ SPPORT ⚽

소개 및 개요

• 프로젝트 기간 : 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. 핵심 기능

1. 팀 소개

✏️ Dozen 팀을 소개합니다!

안녕하세요. 저희는 4명의 Front-end 개발자로 구성된 Dozen팀입니다.
dozen은 연필과 같은 물건의 개수를 나타내는 단위 중 12개 묶음을 의미하는데, 4명이 한 묶음처럼 협력하고 발전하겠다는 의미가 담겨있습니다.
(멋쟁이사자처럼 프론트엔드 스쿨 5기 프로젝트 12팀입니다.)

우혜리	김서영	신민철	이영주
hyeri-woo	seoyoung-kim	mincheol.shin	gbsb227

2. 기술 및 개발 환경

개발 환경	[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"
  }
}

3. 주요 기능

기능 별 자세한 내용은 해당 위키를 참고해주세요.

🔒 로그인 / 회원가입

• 로그인
• 회원가입
• 프로필 설정
• 유효성 검사
• 토큰 검증

📎 피드

• 게시글 업로드
• 무한 스크롤
• 필터링

🔍 검색

• 유저/팀 검색

🖼 게시글

• 게시글 수정/삭제
• 댓글 게시/삭제
• 게시글/댓글 신고

👨🏿‍🤝‍👨🏼프로필

• 로그아웃
• 프로필 수정
• 팔로우/팔로잉
• 일정 추가
• 선수 리스트
• 앨범형/리스트형 게시글
• 무한 스크롤

4. 프로젝트 구조

⚾ 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 ------------------------------ 📜 필요한 함수 폴더

5. 역할 분담

자세한 내용은 🔗 해당 위키에서 확인해주세요.

6. Flowchart

7. UI

Mobile

Tablet

Desktop

8. 페이지 기능

1) 홈

Splash	로그인 페이지	회원가입 페이지

홈 페이지	홈 페이지 필터링	검색 페이지

2) 프로필

마이 프로필 페이지	마이 프로필 페이지 일정 추가	유저 프로필 페이지

팀 프로필 페이지 공 아이콘	팀 프로필 페이지 선수 보러 가기	팀 프로필 페이지 경기일정

태그 검색	프로필 수정 페이지	로그아웃

3) 게시글

게시글 작성	게시글 수정	게시글 삭제

게시글 상세 페이지	이미지 슬라이더	게시글 신고

4) 댓글

댓글 작성	댓글 삭제	댓글 신고

9. 핵심 기능

• Server-side 데이터 상태 관리를 위해 React Query를 사용한 커스텀 훅을 도입
  • useQuery 관련 참고 링크1
  • useMutation 관련 참고 링크2
• Intersection Observer API와 useInfiniteQuery를 사용한 비동기적 무한 스크롤링 (업데이트 예정)
• axios Interceptors를 활용하여 요청과 응답의 전후 처리와 중복된 로직 방지를 통해 효율적인 네트워크 요청 관리 (참고 링크)