목차
🏠혼콕 (HONKOK) 이란?
"혼콕"은 "혼자 콕 찌르기"를 줄여서 부르는 소통 공간입니다.
여기서 "혼자"는 혼자 사는 사람들을 나타내고, "콕 찌르기"는 콕 찔러서 사용자들 끼리 소중한 인연을 만들어가고 정보를 공유하는 활동을 나타냅니다.
"혼콕" 서비스는 요리, 청소, 도와주세요, 이거 사세요 등 다양한 채널들을 제공 합니다.
각 채널 내에서 채널 주제에 관련된 정보를 공유하며 서로 도움을 주고 받을 수 있습니다.
저희 서비스의 목표는 혼자 사는 사람들에게 유용한 정보와 아늑한 커뮤니티를 제공하여 일상을 더 풍요롭고 함께하는 기분을 느끼게 하는 것 입니다.
1. 서비스 소개
1-1. 주제
전국의 자취러들을 위한 1인 가구 특화 SNS 서비스
1-2. 선정 이유
2023년 통계에 따르면 대한민국 약 5000만 명 인구 중 1인 가구의 수는 1/5인 1000만 명이다.
해가 갈수록 1인 가구의 비중이 늘고 있다.
🤔 1인 가구일 때 발생하는 문제점
- 요리, 청소 등 집안일을 해야하는데 방법을 모르는 경우가 많다.
- 1인 가구를 위한 물품들에 대한 정보가 부족하다.
- 혼자 생활하다보니 외로움을 느낄 수 있다.
혼콕 서비스는 1인 가구를 위한 소셜 네트워크 서비스를 제공하여, 이러한 문제들을 해결할 수 있는 편리하고 따뜻한 소통 공간과 정보를 제공합니다.
2. 서비스 주요 타겟층
대한민국의 자취러들과 예비 자취러들
- 초보 대학생 자취생
- 1인 요리 레시피에 관심 있는 자취생
- 청소 꿀팁을 찾고 싶은 자취생
- 어려운 집 수리를 도움 받고 싶은 자취생
- 자취 관련 서비스 및 제품 공급업체
3. 브레인 스토밍
4. User Story
User Story
5. 와이어 프레임 & UI
6. 기술 스택
- Vite
- Typescript + React
- Eslint / Prettier
- Tailwindcss
- Storybook
- React Query + Axios
- React Router
- dayjs
7. 👨🏻💻 개발 문화
팀 그라운드 규칙
팀 목표
팀 목표
한 명이 작업한 것처럼 프로젝트를 완성하자!
개인 목표
김효리
React Query는 왜 사용하는지, 사용 방법은 무엇인지를 잘 이해하자.
React에 대한 전반적인 동작원리를 이해하자.
우지호
tailwind에 익숙해지기
Storybook에 익숙해지기
React Query사용 익숙해지기
- 취약한 부분 알아내기
이종길
Storybook을 활용한 컴포넌트 개발에 익숙해지자.
React Query을 깊게 학습하고 능숙하게 사용하자.
정진경
- 비동기 작업과 axios에 대한 이해를 바탕으로
React Query를 이용해서 데이터를 CRUD 하는 코드를 깔끔하게 짜고 싶습니다.
- 컴포넌트를 깔끔하게 만들어 보고 싶습니다.
- 유효성 검사?를 철저하게 하고 싶습니다.
- 꼼꼼하게 코드짜는 습관을 기르고 싶습니다.
홍건우
react에서 사용하는 typescript type마스터하기!!
- 보너스 구현까지 모두 완성해보기!!
팀 협업 방식
작업 진행 순서
- issue에서 작업을 등록한다.
ex. 회원가입 로직 작업
- issue에서 태그를 등록한다. (작업자, project 등...)
- issue 작업자가 branch를 생성한다.
ex. feat/회원가입-로직-작업
브랜칭 전략
- github flow 전략을 응용하여 develop branch를 추가해 사용한다.
main - develop - 작업 브랜치merge 방식
main←develop: create a merge commit
develop←other branch: rebase and merge
✔️ 브랜치 생성, merge, 브랜치 삭제는 본인이 직접한다!
✔️ 1차, 2차 스프린트 마지막날에
develop에서 main 으로 머지한다.merge 컨벤션
- merge 제목에는 컨벤션 태그를 사용한다.
예시
- ✅
feat: 유저 정보 관련 작업
- ❎
유저 정보 관련 작업
커밋 컨벤션
- 모든 커밋 내용은 한글로 작성한다. (영어 파일명을 포함시키는 것은 괜찮음)
- 모든 커밋은 한 줄, 명령조로 작성한다.
ex.
feat: 로그인 기능 추가태그 이름 | 설명 |
feat | 새로운 기능을 추가할 경우 |
fix | 버그를 고친 경우 |
refactor | 리팩토링한 경우(리팩토링 과정에서 파일 삭제, 이동 포함) |
style | CSS 등 사용자 UI 디자인 변경 |
docs | 문서를 수정한 경우 |
chore | 이 외의 작업들 |
네이밍 규칙
props 네이밍
props타입 별칭: 컴포넌트명 +Props로 통일한다.
- 함수 작성 방식: 함수 표현식을 사용한다.
export default는 코드 마지막 줄에 추가한다.
예시
배열 데이터 네이밍
- 배열은
List를 붙인다.
- 아이템은
Item을 붙인다.
- api일 경우에는
List가 아닌s를 붙인다.
예시
- 파일명:
PostList,PostItem
- api:
posts/{postId}
타입 네이밍
타입 관련 이름은 파스칼케이스로 통일한다.
예시
import, export 규칙
- 같은 폴더에 있는 파일은 상대 경로(
./*)를 사용한다.
- 다른 폴더에 있는 파일은 절대 경로(
~/*)를 사용한다.
스타일 관련 규칙
- css 크기 단위는
rem으로 통일한다.
폴더 관련 규칙
index파일은import/export용도로 사용한다.
타입 규칙
children은 React.ReactNode로 통일한다.기타
함수는 화살표 함수로 통일한다.
이벤트 관련 이름은
handle+동사(+명사)로 통일한다.예시
- ✅
handleClick
- ❎
handleOnClick
PR 규칙
- 최소 1명의 승인을 받아야 한다.
- PR 제목에는 컨벤션 태그 붙이지 않는다. (레이블과 리뷰에 지정한다.)
이슈 컨벤션
- 이슈 제목에는 컨벤션 태그를 붙이지 않는다.
예시
- ✅
유저 정보 관련 작업
- ❎
feat: 유저 정보 관련 작업
Github 템플릿
- Issue 템플릿
- PR 템플릿
8. 프로젝트 상세 일정
혼콕 프로젝트 타임라인
9. 바로가기🗂️
Github Wiki
Figma
Chromatic
✏️회고
중간 회고