MUFI는 페스티벌을 좋아하는 사람들이 모여 소통하는 SNS 플랫폼입니다.
MUFI 는 ‘사람, 음악, 축제’ 3가지 키워드로 설명됩니다.
뮤직 페스티벌의 현장감을 온라인에서 느끼고 많은 사람들과 나눌 수 있게 사람과 음악, 축제를 연결시키는 플랫폼. MUFI로 당신을 초대합니다.
⬆️ 뮤피로 이동합니다.
💫TEST 계정
ID: [email protected]
PW: heehee00
배포 URL : https://mufiesta.netlify.app/
안녕하세요! 저희는 4명의 Front-end 개발자로 구성된 '희희영영'입니다.
이름의 한글자씩 따서 만든 팀명입니다!
| 박소영 | 박소희 | 양희준 | 이부영 |
|---|---|---|---|
 |
 |
 |
 |
| soyoung03 | sthgml | yhj0217 | olivu0 |
| 1️⃣ 필수과제 구현 (완성) | 2️⃣ 팀 프로젝트 협업 방식 체득 | 3️⃣ 리액트 실전 활용 경험 | 4️⃣ API 사용법 실습 |
|---|
| 사용 기술 |
|
| 패키지 |
|
| 포맷터 |
|
| 협업 |
|
| 디자인 |
|
| IDE |
|
-
Styled-Component: 스타일을 따로 정의해 코드의 가독성과 유지 보수성을 높이기 위해 사용하였습니다.
-
Recoil : 큰 규모의 상태를 관리해야 하는 프로젝트에는 디버깅하기 위한 안정적인 devTool을 가지고 있는 redux가 더 좋을 것이라 생각하였습니다. 하지만 저희의 프로젝트는 제공되는 API를 사용하기 때문에 큰 규모의 데이터를 다루는 것도 아니고, 주어진 시간 또한 길지 않기 때문에 비교적 적은 코드를 작성하고 러닝 커브가 적은 recoil을 프로젝트의 상태 관리 라이브러리로 확정하였습니다.
-
Axios : Promise 기반으로 동작하기 때문에, 비동기 처리를 위한 코드를 작성할 때 간결하게 작성할 수 있습니다. 브라우저와 서버 간에 HTTP 통신을 쉽게 하기 위해 사용하였습니다.
-
React Router : React의 SPA 환경에서 URL에 따라 동적으로 컴포넌트를 변화시킴으로써, 브라우저의 뒤로 가기와 앞으로 가기 기능을 활용할 수 있게 됩니다. 새로운 페이지로 이동할 경우 전체 페이지를 다시 렌더링 하지 않고, 변화가 필요한 컴포넌트만을 업데이트하여 React의 효율적인 렌더링을 유지하기 위해 사용하셨습니다.
main: 배포가 될 branch
develop: 기능 개발이 완료된 각각의 branch가 합쳐지는 곳으로, 두 명 이상 조원의 승인 후에 merge가 됩니다. 오류가 나지 않는, 충돌이 일어나지 않는 상태에서만 develop에서 main으로 넘깁니다.
각자 issue 생성 후 issue branch를 만들어 작업하였습니다.
기획, 디자인 작업시, 빠른 피드백과 소통을 위해 회의시간을 길게 가졌습니다. 개발 작업 시작 이후에는 오전 10시와 오후 4시에 중간점검을 하였습니다. 꼭 점검시간이 아니어도 소통이 필요한 부분이 생기거나 오류가 발생 했을 경우, 디스코드에서 즉각적인 소통과 피드백이 이루어졌습니다.
| 기간 | |
|---|---|
| 10/13 - 10/20 | - 주제 선정, 기술 스택 및 협업툴 결정 - Figma 디자인 작업 및 기획, 컨벤션 - git 협업 study |
| 10/21 ~ 10/27 | - 초기 개발환경 세팅 - 페이지 단위로 UI 나눠서 UI 구현 작업 시작 |
| 10/28 - 11/05 | - API study - API 통신 작업 시작 |
| 11/06 - 11/08 | - 에러 수정 - 배포 - README 작성 |
피그마URL: MUFI UI FIGMA
- 로그인
| Splash | 회원가입 | 프로필 설정 | 로그인 |
|---|---|---|---|
 |
 |
 |
 |
- 홈
| Home-Detail(상세페이지) | 검색(계정) | 검색(태그) | 검색(페스티벌) |
|---|---|---|---|
 |
 |
 |
 |
- 프로필
| 프로필-앨범-리스트 | 프로필(본인 제외) | 팔로우/언팔로우 |
|---|---|---|
 |
 |
 |
| 프로필 수정 | 프로필 뮤직 수정 | 로그아웃 |
|---|---|---|
 |
 |
 |
- 게시글
| 게시글 수정 | 게시글 삭제 | 게시글 신고 |
|---|---|---|
 |
 |
 |
- 게시물 업로드 및 태그
| 게시글 사진 추가 | 게시글 사진 삭제 |
|---|---|
 |
 |
| 해시태그 추가 | 해시태그 생성 | 해시태그 삭제 |
|---|---|---|
 |
 |
 |
| 페스티벌 추가 | 게시글 업로드 완료 |
|---|---|
 |
 |
- 댓글
| 댓글 작성 | 댓글 삭제 | 댓글 신고 |
|---|---|---|
 |
 |
 |
- 채팅 / 에러
| 채팅 | 404 |
|---|---|
 |
 |
| ✨ feat | 기능 추가, 삭제, 변경 |
|---|---|
| 🐛 fix | 버그, 오류 수정 |
| 📝 docs | README.md, json 파일 등 수정, 라이브러리 설치 (문서 관련, 코드 수정 없음) |
| 🎨 style | CSS 등 사용자 UI 디자인 변경 (제품 코드 수정 발생, 코드 형식, 정렬 등의 변경) |
| ♻️ refactor | 코드 리팩토링 |
| 🧪 test | 테스트 코드 추가, 삭제, 변경 등 (코드 수정 없음, 테스트 코드에 관련된 모든 변경에 해당) |
| ⚙️ config | npm 모듈 설치 등 |
| 🌱 chore | 패키지 매니저 설정할 경우, etc 등 (ex. gitignore) |
| 💬 comment | 필요한 주석 추가 및 변경 |
| 🚚 rename | 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우 |
| 🗑️ remove | 파일을 삭제하는 작업만 수행한 경우 |
통일성있는 코드 작성을 위해 prettier을 사용하였습니다.
{
"tabWidth": 2,
"singleQuote": true,
"semi": true,
"printWidth": 80,
"trailingComma": "es5"
}
- 컴포넌트 재사용성 높이는 작업
- 모달창 통일
- 반응형 작업
- 성능보다 구현을 중심으로 짠 코드 개선