🏋🏻 운동 영상 공유 SNS 플랫폼

프로젝트 소개

• MAZI는 운동 영상을 공유하고 소통할 수 있는 SNS입니다.
• 사용자는 개인의 운동 플레이리스트를 생성할 수 있습니다.
• 카테고리별로 원하는 운동을 필터링하여 맞춤형 플레이리스트를 확인할 수 있습니다.
• 유저들은 다른 사람의 플레이리스트를 북마크하고, 마음에 드는 게시글에 좋아요를 누르거나 댓글을 남길 수 있습니다.

팀원소개 및 역할분담

👑 @suhyun9892	@95126m	@Panda-raccoon	@nanafromjeju
플레이리스트 플레이리스트 상세보기 플레이리스트 편집 공통 컴포넌트 (Navbar, Layout, Header, LongButton, ShortButton, EmptyInfo, Bottom Sheet) 프로젝트 및 라우팅 세팅 깃허브 세팅 트러블 슈팅 기록 및 충돌 해결 테스트 코드 회의 진행 및 발표	컨텐츠 추가 페이지 프로필 페이지 프로필 수정 페이지 공통 컴포넌트 (TheModal, Category) 유저 플로우 와이어 프레임	북마크 페이지 공통컴포넌트 (Bookmark, Toast, DragAndDrop) 기능 정의서 요구사항 정의서 데이터베이스 구조도	홈 페이지 스플래시 페이지 로그인 페이지 404 페이지 공통 컴포넌트 (InfiniteScroll, FirebaseApi, Comments, Assets, Playlist, PlaylistDetail, CommentsModal) 디자인 프로젝트 정의서 리드미 및 발표자료

1. 페이지

2. 기술 스택

• Front : React, Typescript, Vite, emotion, styled-components, Zustand, TanStack Query, Playwright

• Back-end : Firebase

• 버전 및 이슈관리 : Github, Github Issues

• 협업 툴 : Slack, Notion, Zoom, ZEP

• 서비스 배포 환경 : Netlify

• 디자인 : Figma

• 컨벤션

  
  

3. 채택한 개발 기술과 브랜치 전략

React, emotion, framer-motion

• React

  • 컴포넌트화를 통해 유지보수와 재사용성을 고려한 구조로 개발했습니다.

• emotion

  • 스타일링을 적용하여 컴포넌트 내에서 효율적으로 스타일을 관리했습니다.

• framer-motion

  • 모달에 자연스러운 애니메이션 효과를 적용했습니다.

TypeScript

• TypeScript

  • 타입을 명시하여 코드의 안정성과 가독성을 높였습니다.

  • 코드 작성 시점에 타입 오류를 발견할 수 있어 디버깅 시간을 줄이고, 유지보수가 쉬운 코드를 작성할 수 있습니다.

• Javascript가 아닌 Typescript를 채택한 이유

  • 컴포넌트 타입 안전성: props의 타입을 명확히 정의해 예상치 못한 오류를 방지할 수 있습니다.

  • 리팩토링 시 안정성: 타입 시스템을 통해 코드 변경 시 다른 부분에 미치는 영향을 사전에 파악해 리팩토링이 안전해집니다.

  이러한 이유들로 인해 자바스크립트 대신 TypeScript를 채택하여 React 프로젝트의 안정성과 효율성을 극대화했습니다.

eslint, prettier

• ESLint
  • 코드 품질을 관리하여 오류를 사전에 방지하고, 규칙을 준수하도록 도왔습니다.
• Prettier
  • 일관된 코드 포맷팅을 유지해 가독성을 높였습니다.

브랜치 전략

• main, develop, feat 브랜치로 나누어 체계적으로 개발을 진행했습니다.

  • main 배포 단계에서만 사용하는 브랜치입니다.

  • develop 개발 단계에서 git-flow의 master 역할을 합니다.

  • feat 기능 단위의 독립적인 개발을 위해 사용하며, 작업이 완료된 후 merge하고 삭제합니다.

  • bug 버그 수정 시 사용하는 브랜치입니다.

  • style 스타일 변경 및 퍼블리싱 작업에 사용하는 브랜치입니다.

  • help 도움이 필요할 때 사용하는 브랜치입니다.

4. 개발 기간 및 작업 관리

개발 기간

• 전체 개발 기간 : 2024.09.02 - 2024.09.27

• 기획 및 디자인 : 2024.09.02 - 2024.09.09

• UI 구현 : 2024.09.09 - 2024.09.11

• 기능 구현 : 2024.09.11 - 2024.09.27

작업 관리

• GitHub Issues와 Slack을 사용하여 진행 상황을 공유했습니다.

• 매일 Zoom과 ZEP에서 회의를 진행하며 작업 순서와 방향성에 대한 고민을 나누고 Notion에 회의 내용을 기록했습니다.