React 팀과제 아웃소싱 프로젝트 기획

TIL 23. 12. 05

내배캠 React 3기 A-2조 아웃소싱 프로젝트

📢 프로젝트 개요

23. 12. 05 - 23. 12. 11

• 프로젝트명: MotiTube (Motivation + YouTube)
• 주제: 동기부여 동영상을 추천하는 커뮤니티
• 내용: 사용자들이 동영상에 대한 댓글을 남기고, 좋아요를 표시할 수 있으며, 자신이 좋아하는 동영상을 직접 업로드하여 추천도 할 수 있는 커뮤니티 공간

👥 팀 소개

• 팀명: 우공2산(愚公2山)
• 팀원: 안준표, 강호수, 손창성, 윤유빈, 이아름

💡 구현 기능

필수요구사항

• 회원가입/로그인
  • 사용자가 이메일과 비밀번호를 입력할 수 있는 텍스트 필드와 전송 버튼
  • 소셜 로그인
• 마이 페이지
  • 프로필 사진과 사용자 정보 표시
  • 프로필 사진 등록, 변경, 닉네임, 소개글 수정
  • 작성한 게시글 목록, 좋아요한 게시글 목록
• 메인 페이지
  • 네비게이션 헤더 (로고, 로그인/로그아웃, 유저 아이콘, 페이지 이동 네비게이션)
  • 조회수 높은 영상 목록순으로 배치
  • 카드에는 동영상 제목, 업로드한 사용자 이름, 조회수, 썸네일, 좋아요 수 등의 정보 표시
  • 카드를 클릭하면 해당 동영상의 상세 페이지로 이동
• 상세 페이지
  • 동영상 플레이어와 게시글 제목, 내용, 게시 시간, 간략한 작성자 정보
  • 좋아요
  • 댓글 작성 및 댓글 목록
• 게시글 작성 페이지
  • 게시글 제목, 내용, 동영상 링크 입력폼
• 검색
  • 게시글, 사용자로 검색하여 결과 표시

선택요구사항

• 메인 페이지
  • 조회수, 최신순, 인기순, 날짜순 등 정렬
• 상세 페이지
  • SNS 공유
• 게시글 작성 페이지
  • 동영상 미리보기
• 비디오 플레이리스트
  • 사용자가 동영상을 플레이리스트에 추가하고 플레이리스트 관리
• 다크모드/라이트모드

📝 역할 분담

안준표	강호수	손창성	윤유빈	이아름
메인 페이지	마이 페이지	상세 페이지	게시글 작성	회원가입, 로그인

🚩 개발 내용

💻 개발 환경

• IDE: Visual Studio Code
• OS: windows, Mac
• Package Manager: Yarn Classic (v1.22.19)
• React boilerplate: create-react-app

📌 사용 기술

• React - 사용자와 상호작용할 수 있는 UI를 효율적으로 구현
• Redux Toolkit - 전역 상태 관리 도구
• React-router-dom - 클라이언트 사이드 라우팅. URL에 맞는 컴포넌트 렌더링
• Styled-components - 자바스크립트로 스타일 관리. 재사용이 쉬운 컴포넌트를 만들고 동적 스타일링 용이
• Firebase - 사용자 인증과 데이터베이스 등의 서버 기능 제공
• React Query - 비동기 관련 로직과 상태를 관리

🗼 초기 화면 설계

글쓰기 페이지	메인 페이지	상세페이지

로그인	회원가입

📂 디렉토리 구조

📦 project
 ┣ 📂public
 ┣ 📂src
 ┃ ┣ 📂api
 ┃ ┣ 📂assets
 ┃ ┣ 📂constants
 ┃ ┣ 📂components
 ┃ ┃ ┣ 📂component1
 ┃ ┃ ┃ ┣📜component1.jsx
 ┃ ┃ ┃ ┗📜styles.js
 ┃ ┃ ┣ 📂component2
 ┃ ┃ ┃ ┣📜component2.jsx
 ┃ ┃ ┃ ┗📜styles.js
 ┃ ┣ 📂hooks
 ┃ ┣ 📂mock
 ┃ ┣ 📂pages
 ┃ ┣ 📂shared
 ┃ ┣ 📂styles
 ┃ ┣ 📂redux
 ┃ ┃ ┣ 📂config
 ┃ ┃ ┗ 📂modules
 ┃ ┣ 📜App.jsx
 ┃ ┗ 📜index.js
 ┣ 📜.eslintrc
 ┣ 📜.gitignore
 ┣ 📜.prettierrc
 ┣ 📜jsconfig.json
 ┣ 📜package.json
 ┣ 📜README.md
 ┗ 📜yarn.lock

• api/ 서버와의 통신에 사용되는 코드
• assets/ 멀티미디어 파일(이미지, 폰트)
• constants/ 상수 (색상, 공유되는 값 등)
• components/ 재사용 가능한 컴포넌트
• hooks/ 커스텀 훅
• mock/ 샘플 데이터
• pages/ 라우팅되는 페이지 컴포넌트
• shared/ 공통적으로 사용되는 리소스
• styles/ 스타일 관련
• redux/ 리덕스 관련 파일

📃 코드 컨벤션

🚥 깃 전략

motitube Wiki