목차
📮 머-쓱레터
익명 또는 기명으로 편지를 보내는 SNS 서비스 입니다.
서비스 기획 배경
1차 피어리뷰를 진행하면서 전하지 못한 말들이 있어 아쉽지 않으셨나요? 또는 데브코스에 참여하는 교육생들에게 진실된 마음을 표현하지 못한 순간이 있지는 않으셨나요? 😄 머-쓱레터는 익명/기명을 통해서 다른 교육생들에게 마음을 전달하기 위한 서비스가 있다면 좋을 것 같다는 배경에 기획한 SNS 서비스입니다.
사용자는 다양한 머쓱이 테마를 선택해서 친구들에게 머쓱이를 꾸며달라고 공유할 수 있습니다. 머쓱이에게 장식스티커를 하나하나 붙이면서 평소에 하지 못했던 응원과 피드백의 편지를 전송해 마음을 전달해보세요📮
벤치마킹
타겟층
데브코스 교육생(백엔드, 프론트엔드 4기)들을 대상으로, 세부적인 내용은 다음과 같습니다.
- 익명으로 피드백(딥다이브 발표 등)을 받아보고 싶은 사람
- 익명으로 편지를 전송하고 싶은 사람
- 피어리뷰에서 못한 말들을 전하고 싶은 사람
- 몰래 칭찬하고 싶은 사람
- 헤어진 팀원들에게 전달하지 못한 마음을 표현하고 싶은 사람
팀 소개
팀명 : 동근팀의 숲
후보
- 동근(팀)의 숲 ( 모여봐요 동근의 숲~~ )
- 오리꽥꽥 quack
- 동근오리배
- quacksquad
- 다할수있조
팀목표/ 개인목표
팀목표
남궁호수: 실사용자가 존재하고, 피드백을 받을 수 있는 동작하는 서비스 구현
이상훈: 모두가 컨벤션을 적절하게 잘 따르고, 서로가 서로의 코드를 이해하면서 함께 성장하기
신호원: 눈치보지 않고 의견을 낼 수 있는 팀
우현지: 협업하는 방법을 배우면서 성장하기
박주연: 기획한 요구사항들을 모두 구현하기
개인목표
남궁호수: chakra 적용, slider 라이브러리 적용, postman API 테스트와 맡은 페이지 API 요청 기능 구현
이상훈: Suspense로 비동기 처리를 선언적으로 우아하게 처리하기
신호원: 확장성 있게 개발하기
우현지: 일정 지키며 개발하기
박주연: react hook 사용에 능숙해지기, react-query 이해하기
User Story
유저 시나리오 1
길동이는 지난번에 자신을 도와준 춘식이에게 고마움을 전달하고 싶다.
쑥쓰러운 성격을 가진 길동이는 메세지를 전달하기 위해 ‘머쓱레터’에 접속한다.
- 회원가입이 되어있다면, 로그인을 한다.
- 회원가입이 되어있지 않다면, 회원가입을 한다.
메인페이지에 접속한다.
상단 검색창을 통해 춘식이를 검색한다.
춘식이 마이페이지 안의 머쓱이 Post중 하나를 선택한다.
춘식이에게 칭찬을 남긴다.
춘식이는 길동이가 보낸 메세지에 대한 알림을 받는다.
춘식이는 길동이가 보낸 메세지를 읽는다.
유저 시나리오 2
춘식이는 이번 발표 딥다이브 피드백을 받고 싶어한다.
춘식이는 ‘머쓱래터’에 접속한다.
- 회원가입이 되어있다면, 로그인을 한다.
- 회원가입이 되어있지 않다면, 회원가입을 한다.
메인페이지에 접속한다.
”+ 새로운 머쓱이 추가” 버튼을 통해, 머쓱이 Post를 작성한다.
포스트 제목, 이미지 테마, 포스트 내용을 작성한다.
춘식이는 알림을 기다리거나, 다른 일을 한다.
만수는 춘식이 Post에 메세지를 작성한다.
춘식이는 메세지를 확인하여 피드백을 받는다.
주요 기능
- 회원가입 / 로그인 / 로그아웃
- 사용자는 필수로 로그인을 해야합니다.
- 포스트(머쓱이) 생성
- 사용자는 1개 이상의 머쓱이를 생성할 수 있습니다.
- 여러 종류의 머쓱이들 중 하나를 자유롭게 선택할 수 있습니다.
- 포스트(머쓱이) 목록 조회
- 사용자는 다른 사용자들의 머쓱이를 조회할 수 있습니다.
- 단, 다른 사용자의 편지 읽기는 불가능합니다.
- 마이페이지
- 사용자는 본인의 개인 정보 변경이 가능합니다.
- 비밀번호
- 프로필 이미지
- 본인의 포스트 목록을 볼 수 있습니다.
- 코멘트(편지) 작성
- 다른 사용자의 머쓱이 페이지에서 코멘트를 작성할 수 있습니다.
- 머쓱이의 원하는 위치에 장식을 달 수 있습니다.
- 코멘트(편지) 목록 조회
- 사용자는 다른 사용자의 머쓱이 편지 내용들을 볼 수 없습니다.
- 리스트 버튼을 통해 모든 편지들을 한눈에 볼 수 있습니다.
- 장식을 클릭하여 해당 편지의 내용을 볼 수 있습니다.
- 사용자의 가입자 목록 조회 기능
- 검색을 통해 편지를 전하고 싶은 대상자를 조회할 수 있습니다.
- 대상자를 검색하면 그 사람의 머쓱이 목록을 조회할 수 있습니다.
- 알림
- 서비스 상단의 네비바에서 읽지 않은 코멘트 목록을 확인할 수 있습니다.
- 편지가 전송되면 수신자의 슬랙으로 머쓱레터 링크가 전송됩니다.
기술 스택
개발환경 -
vite언어 및 라이브러리 -
typescript, react네트워크 및 서버 상태 관리 -
tanstack-query, axios스타일링 -
emotion, chakra ui페이지 라우팅 -
react-router기타 라이브러리 -
react-hook-form, lodash코드 포맷팅 -
eslint, prettier브레인 스토밍
와이어 프레임
브랜치 전략
위 Git Flow에서release브랜치만 제외한 형태로 간소화해서 진행합니다. 주로 사용할 브랜치는main,develop,feature,hotfix입니다.
main: 메인 브랜치 및 배포 브랜치
develop: 개발 통합 브랜치 (각종 feature가 머지되는 곳)
feature/{issue-number}-{feature-name}: 기능 단위 개발 브랜치- 단일 태스크에 대한 작업들이 feature 브랜치에 해당됩니다.
- 기능 구현 후 develop 브랜치로 머지가 된 feature 브랜치는 제거합니다.
- 브랜치 이름의 작성 규칙은 반드시 feature/[이슈 번호]-[원하는 제목] 형태로 작성합니다! ex) 3번 이슈 (회원 가입) 에 대한 부분을 작업해야 한다면, feature/3-signin 으로 작성합니다.
hotfix/{issue-number}-{hotfix-name}: 급한 버그 수정이 필요할 때 사용하는 브랜치
커밋 메시지 컨벤션
Type | 설명 |
feat: | 새로운 기능 추가
(기능을 수정했는데 사용자가 보는 화면이나 동작이 달라지면 여기에 해당.
단, 버그 수정이라면 fix 타입 사용) |
hotfix: | 버그 수정 |
refactor: | 리팩토링
(기능을 수정했는데 사용자가 보는 화면이나 동작이 똑같으면 여기에 해당.) |
design: | CSS 등 사용자 UI 디자인 변경 |
comment: | 필요한 주석 추가 및 변경 |
style: | 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우 |
test: | 테스트(테스트 코드 추가, 수정, 삭제, 비즈니스 로직에 변경이 없는 경우) |
chore: | 위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등) |
init: | 프로젝트 초기 생성 |
rename: | 파일 혹은 폴더명 수정하거나 옮기는 경우 |
remove: | 파일을 삭제하는 작업만 수행하는 경우 |
docs: | 문서 작업 |
참고사항
- 작업 형태에 따라서 커밋 메시지 헤더 접두어로 위 테이블에 존재하는 타입을 작성합니다.
- 만약 작업한 내용이 위 타입에서 속하지 않는 경우, 추후 의논하여 추가하거나 수정합니다.
폴더 구조
폴더구조
📂 public
📂 src
📂 apis
📂 mutations
📂 queries
📂 functions
📄 instance.ts (axios 인스턴스)
📄 queryKey.ts (쿼리키 팩토리)
📂 assets
📂 fonts
📂 images
📂 components
📂 constants
📂 hooks
📂 pages
📂 MainPage
⚛ index.tsx (페이지 컴포넌트)
📂 components
📂 constants
📂 hooks
📂 SignInPage
📂 SignUpPage
📂 UserPage
📂 PostPage
📂 routes
📂 types
📂 utils
- 특정 페이지에서 사용되는 컴포넌트와 파일은 해당 페이지 디렉토리 내부에 작성합니다.
- 여러 페이지에서 공통적으로 사용되는 컴포넌트와 파일은 공통 브랜치인 develop 브랜치를 pull 한 후에,
/src/*로 추상화하여 올리거나/src/components/*,/src/hooks등 src 아래 폴더 위치에 작성합니다.
참고 자료
참고 자료2
📂 public
📂 src
📂 api
📂 assets
📂 font
📂 img
📂 components ( index.tsx,
📂 auth
📂 common
📂 mainpage
📂 post
📂 pages
📂modal
📂commentList
📂comment
📂iconPicker
📂 routes
📂 store(상태 관리 라이브러리 사용할 경우)
📂 styles
📂 utils(미정)
📂types(미정)
참고 자료3
