📎 배포 URL : https://nu-talent.vercel.app
🔓 계정 :[email protected]|123123
"꺼내봐 너의 부캐"
- 본인의 재능을 자유롭게 공유하고, 비슷한 관심사를 가진 사람들과 소통할 수 있어요.
- 누구나 관심 있는 재능을 배우거나 창작물을 구매 및 판매할 수 있어요.
안녕하세요! 저희는 4명의 Front-end 개발자로 구성된 'IP-TIME' 입니다.
팀원들의 공통된 MBTI인 I,P에서 착안하게 되었어요.
주변에서 쉽게 연결할 수 있는 iptime 와이파이처럼 누구나 접근 가능하며 친숙한 서비스를 지향한다는 의미를 가지고 있습니다.
(🦁멋쟁이사자처럼 프론트엔드스쿨 5기 프로젝트 13팀)
| 강은초 | 손수민 | 이선근 | 한수정 |
|---|---|---|---|
 |
 |
 |
 |
| cho7778 | suminson97 | 5unk3n | soooee |
| 문서화 & 소통 리더 | 디자인 & 기획 리더 | 개발 리더 | 팀 리더 |
- 초기 폴더구조 세팅 및 환경설정
- 로그인, 프로필 설정, 검색, 프로필 수정 페이지
- 이메일, 회원가입 유효성 검사
- Recoil로 전역 데이터 관리
- 각 페이지 라우터 연결, 본인/타인 프로필 페이지 전환, splash 페이지 연결
- 상품 등록, 홈피드, 게시글 상세, 404 페이지
- 이미지 유효성 검사, 무한 스크롤 구현, 리액트 포탈로 모달 구현
- 피그마 디자인
- 라우터 연결 및 폴더구조 수정
- 초기 개발환경 세팅 (PR, Issue 템플릿 생성)
- 게시글 작성 및 수정, 프로필 페이지
- 채팅 페이지 마크업 및 스타일링
- PrivateRoute, 이미지 유효성 검사, 게시글 보기 방식 변경, 무한 스크롤 구현, 리액트 포탈로 모달 구현
- 팔로우, 팔로잉, 회원가입, 인트로 페이지
- 이메일, 회원가입 유효성 검사
- 로그인 페이지 마크업 및 스타일링
- 탭 메뉴 및 좋아요 버튼 활성화, 리액트 포탈로 모달 구현
- 공통 컴포넌트
- Alert
- BottomSheetModal
- Button
- PostItem
- ProductItem
- TabMenu
- TextActiveInput
- Top
| 구분 | 설명 |
|---|---|
| FrontEnd |     |
| BackEnd | 제공된 API 사용 |
| 패키지 매니저 | 용도 |
|---|---|
| yarn | node.js환경에서 패키지 관리를 위해 사용 |
| 모듈명 | 도입계기 |
|---|---|
| recoil | 전역 상태 관리를 위해 사용 |
| axios | 서버와 통신을 위해 사용 |
| react-router-dom | 페이지 라우팅을 위해 사용 |
| styled-reset | 스타일 구현의 편의를 위해 사용 |
| 협업 툴명 | 용도 |
|---|---|
| Git | 프로젝트 파일 변경 사항을 추적하고 팀원들 간의 파일 작업 조율을 위해 분산 버전 관리 시스템 사용 |
| GitHub | Git저장소 호스팅을 위해 사용 |
| GitKraken | Git 히스토리를 시각화하기 위해 사용 |
| Notion | 협업에 필요한 전반적인 문서 관리를 위해 사용 |
| discord | GitHub과 연동하여 변동사항 추적을 위해 사용 |
-
Git-Flow 사용
Git-Flow을 본 목적대로 사용하기 위해서는 main, hotfix, release, develop, feature 브랜치를 사용해야 하지만,
3주라는 짧은 개발 일정상 feature, develop, main 브랜치만 우선적으로 사용하였습니다. -
컨벤션 소개
커밋 컨벤션
커밋 유형 의미 Feat 새로운 기능 추가 Fix 버그 수정 Docs 문서 수정 Style css 수정 Refactor 코드 리팩토링 Test 테스트 코드, 리팩토링 테스트 코드 추가 Chore 패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore Comment 필요한 주석 추가 및 변경 Rename 파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우 Remove 파일을 삭제하는 작업만 수행한 경우 !BREAKING CHANGE 커다란 API 변경의 경우 !HOTFIX 급하게 치명적인 버그를 고쳐야 하는 경우
프리티어 설정
{ "trailingComma": "all", "tabWidth": 2, "semi": true, "singleQuote": true, "printWidth": 80 }
| 주차 | |
|---|---|
| 1주차 : (6/1 ~ 6/3) | - 서비스 기획 (컨셉 및 디자인) - 사용할 기술 스택 정리 - 마일스톤 도입 |
| 2주차 : (6/4 ~ 6/10) | - 초기 개발환경 세팅 - 기술 스택 세미나 - 공통 컴포넌트 구현 |
| 3주차 : (6/11 ~ 6/17) | - 페이지 단위로 업무 분담하여 작업 시작 |
| 4주차 : (6/18 ~ 6/24) | - 기능 테스트 및 오류 해결 - 주요 기능 구현 1차 완료 - 기능 테스트 및 오류 해결 |
| 5주차 : (6/25~6/29) | - 기능 테스트 및 오류 해결 - 리팩토링 - README 작성 |
-
로그인 회원가입 프로필설정 -
게시글 등록 게시글 수정 게시글 삭제 -
상품 등록 상품 수정 상품 삭제 -
댓글 등록 댓글 신고 댓글 삭제 -
프로필 수정 나의 프로필 다른 유저의 프로필 -
채팅 NotFound 페이지 로그아웃
src
┣ assets
┃ ┗ img // 이미지 파일
┣ components // 공통 컴포넌트
┃ ┣ Elements // 재사용 가능한 기본적인 UI요소를 포함한 컴포넌트
┃ ┣ Layout // 레이아웃 관련 컴포넌트
┃ ┗ Modal // 모달 창과 관련된 컴포넌트
┣ features // 앱의 기능 구현 모듈
┃ ┣ [기능 이름]
┃ ┃ ┣ api // API함수 및 리액트 쿼리 훅
┃ ┃ ┣ components // 기능과 관련된 컴포넌트
┃ ┃ ┣ hooks // 기능과 관련된 커스텀 훅
┃ ┃ ┗ routes // 해당 기능의 페이지
┃ ┗ ...
┣ hooks // 전역적으로 사용할 수 있는 커스텀 훅
┣ libs // 라이브러리 관련 코드
┣ recoil/atom // recoil의 전역 상태 코드
┣ routes // 라우팅 설정 파일
┣ styles // 전역 스타일 및 Theme
┣ util // 유틸리티 함수
┃ ┣ format // 포맷팅과 관련된 유틸리티 함수
┃ ┗ validation // 유효성 검증 관련 유틸리티 함수
┣ App.js
┗ index.js