개요1. 💡프로젝트 주제2. 🤔 선정 배경3. 🎯 타겟 사용자4. 🛻 주요 기능5. 👀 기대 효과자원 소요 계획1. 🔨 작업 공수2. 🗓 수행 기간3. 🧑🏻💻 인원 및 역할로고 및 색상1. 🚚 로고2. 🎨 색상기술 스택요구사항1. 📌 공통2. 📃 페이지 별 요구사항와이어프레임기능 명세서(이 부분은 작성을 따로 안할거 같은데 별도로 추가하고싶은 내용이 있으면 슬랙에 남겨주세요 ex) use case, sequence diagram, etc…)메인로그인회원가입모집 게시글 리스트게시글 상세내 정보내가 쓴 댓글환경설정고객센터404
개요
1. 💡프로젝트 주제
- 사이드 팀 프로젝트를 하고싶은 분들을 위한 팀원 모집 서비스
2. 🤔 선정 배경
- 실력을 쌓기 위해 취업을 하고싶은 신입 개발자 지망생, 경력 있는 신입을 원하는 기업, 최근 개발자 채용시장의 트렌드는 팀 프로젝트 경험이 없다면 취업에 있어 상대적으로 경험이 있는 지원자보다 불리한 것이 현실이다.
- SW시장 규모는 점차 늘어날 것으로 전망되며 시장의 수요에 따라 팀 프로젝트 경험을 쌓고 싶은 사용자는 꾸준히 증가할 것으로 예상된다.
- 불특정다수로 구성된 팀 프로젝트의 경우 어떠한 상황이 발생할지 모르며 해당 문제에 대한 최소한의 검증작업이 필요하다. 따라서 단순한 팀원 모집 서비스가 아닌 사용자들 간의 좋아요, 팔로우, 댓글 등 소셜 미디어의 기능을 추가하여 지속 가능하고 안정된 팀 프로젝트를 선택할 수 있는 서비스에 대한 요구가 있을 것으로 예상된다.
3. 🎯 타겟 사용자
- 아이디어를 구체화 시키는 능력을 키우고 싶은 예비 기획자
- 아이디어와 프로그램 구현 능력을 필요로 하는 예비 디자이너
- 프론트엔드, 백엔드 예비 개발자
- 인공지능 토이 프로젝트 경험을 필요로 하는 엔지니어
4. 🛻 주요 기능
- 프로젝트 팀원 모집글 게시
- 프로젝트 검색
- 각 사용자에 대한 온도(평점) 부여
- 게재된 모집글에 좋아요, 댓글 남기기
- 내가 작성한 모집글, 댓글 보기
5. 👀 기대 효과
- 검증된 팀원들과 함께 원활한 팀 프로젝트 진행
- 사용자가 원하는 조건(기술 스택, 기간, 장소)으로 검색하여 필요로하는 팀 프로젝트를 찾을 수 있음
- 소셜 미디어 기능을 통해 사용자의 전문 분야에 대한 커뮤니티 기능을 제공하여 동반 성장의 기회를 제공해줌
자원 소요 계획
1. 🔨 작업 공수
- 85m/d
- 기획(주제 선정, 요구사항 분석, API 분석)
- UI 디자인
- 개발
- 테스트
2. 🗓 수행 기간
- 2022/06/06 ~ 2022/06/22
- 06/08(水) - 기획서 제출
- 06/15(水) - 중간 점검
- 06/22(水) - 최종 결과물 제출
3. 🧑🏻💻 인원 및 역할
- 팀장 : 박유현
- 부팀장 : 주형진
- 서기 : 정현진
- 디자이너 : 김남경
- PM : 마혜경
로고 및 색상
1. 🚚 로고
2. 🎨 색상
기술 스택
- 언어/라이브러리/API : TypeScript, React.js, Context API
- UI/디자인 : Figma, Storybook, emotion
- CI/CD : git, github, netlify
- 협업 : Github, Notion, Slack, Discord
요구사항
1. 📌 공통
기본 요구사항
- 사용자는 회원가입과 로그인을 할 수 있습니다.
- 사용자는 채널에 올라온 글을 볼 수 있습니다.
- 사용자는 가입자 목록을 볼 수 있습니다.
- 사용자는 가입자를 이름으로 검색을 할 수 있습니다.
- 사용자는 가입자의 정보를 볼 수 있습니다.
- 사용자는 포스트 혹은 가입자를 검색할 수 있습니다.
- 인증된 사용자는 자신의 정보를 변경할 수 있습니다.
- 인증된 사용자는 채널에 올라온 글을 볼 수 있습니다.
- 인증된 사용자는 채널에 포스트를 남길 수 있습니다.
- 인증된 사용자는 포스트를 좋아요 할 수 있습니다.
- 인증된 사용자는 포스트에 댓글을 남길 수 있습니다.
- 인증된 사용자는 자신의 알림 목록을 확인 할 수 있습니다.
- SPA 형태로 만들어주세요.
- 엉뚱한 페이지에 접속하면 404 페이지를 보여주세요.
보너스 요구사항
- 사용자는 현재 접속 중인 사용자를 볼 수 있습니다.
- 인증된 사용자는 다른 가입자에게 메시지를 보낼 수 있습니다.
- 인증된 사용자는 자신에게 온 메시지 목록을 확인 할 수 있습니다.
- 인증된 사용자는 특정 사용자와의 메시지 대화 내역을 확인 할 수 있습니다.
- 인증된 사용자는 프로필 이미지 변경 및 포스트를 작성할 때 이미지를 첨부할 수 있습니다. 파일 업로드를 구현해보세요.
- 다크 모드를 적용해보세요.
2. 📃 페이지 별 요구사항
메인
처음 메인 페이지에 접속시 올라온 순서대로 모집글을 볼 수 있습니다.
모집글을 프론트엔드, 백엔드, ios, 안드로이드, AI, 디자이너, 기타 채널별로 필터 해서 볼 수 있습니다.
포스트 제목 또는 가입자 이름으로 포스트를 검색한다.
(@으로 작성자 이름을 검색 할 수 있다)
글이 많을경우 페이지네이션으로 분리된다.
로그인
로고를 클릭해 메인페이지로 이동할 수 있습니다
유효성 검사
- 사용자는 아이디와 비밀번호 둘 다 입력해야 합니다
- 입력한 아이디가 이메일 형식인지 유효성을 검사합니다.
- 이메일: 이메일 형식이어야 합니다
- 비밀번호: 6~12자 사이의 영문자, 숫자여야 합니다
로그인 완료
- 사용자는 로그인 버튼을 클릭하여 입력한 아이디와 비밀번호로 로그인을 완료할 수 있습니다.
- 사용자가 로그인을 실패할 경우
- "아이디와 비밀번호를 확인하세요"라는 문구를 확인할 수 있고 로그인페이지에서 다시 아이디, 비밀번호를 입력할 수 있습니다.
사용자는 회원가입 버튼을 클릭하여 회원가입 페이지로 이동하여 회원가입을 진행할 수 있습니다.
회원가입
모든 사용자는 회원가입 페이지에 접근할 수 있습니다.
필수 입력 정보
- email을 입력할 수 있습니다.
- password을 입력할 수 있습니다.
- name(닉네임)을 입력할 수 있습니다.
- 셋중 하나라도 미 입력 시 (A 항목) "A 항목을 입력해주세요"라는 문구를 보여줍니다. (단, A는 필수 정보 중 하나)
중복 확인 버튼 클릭 시 중복 검사
- 중복된 email → "이미 있는 email 입니다."
- 중복된 name → "이미 존재하는 name 입니다."
사용자는 Sign up버튼을 클릭해 회원가입을 요청할 수 있습니다.
사용자는 헤더에 있는 로고를 클릭해 회원가입을 취소할 수 있습니다.
- 로고 클릭 시 “가입을 취소하겠습니까?” 확인 메세지
회원가입이 완료되면 로그인페이지로 이동합니다.
회원 정보 검색
인증된 사용자는 가입된 사용자의 목록을 확인할 수 있습니다.
인증된 사용자는 이름으로 다른 사용자를 검색할 수 있습니다.
인증된 사용자는 다른 사용자의 프로필을 조회할 수 있습니다.
게시글 상세
사용자는 게시글의 상세 내역을 조회할 수 있습니다.
인증된 사용자와 작성자는 조회된 게시글에 대한 댓글을 작성할 수 있습니다.
인증된 사용자와 작성자는 작성한 댓글을 삭제할 수 있습니다.
- 삭제 버튼 클릭 시 “선택한 댓글을 정말로 삭제하시겠습니까?” 메시지를 출력하며 삭제를 클릭할 경우 삭제, 취소를 클릭할 경우 취소할 수 있습니다.
인증된 사용자는 조회된 게시글에 대한 “좋아요”를 클릭할 수 있습니다.
- 좋아요는 토글형식의 활성/비활성 상태입니다.
작성자는 해당 게시글을 수정 및 삭제할 수 있습니다.
- 수정 버튼 클릭 시 수정 페이지로 이동합니다.
- 삭제 버튼 클릭 시 “선택한 게시물을 정말로 삭제하시겠습니까?” 메시지를 출력하며 삭제를 클릭할 경우 삭제, 취소를 클릭할 경우 취소할 수 있습니다. 또한 게시물이 삭제되면 메인 페이지로 이동합니다.
인증된 사용자와 작성자는 다른 사용자의 프로필 이미지를 클릭하여 프로필 정보를 볼 수 있습니다.
게시글 수정 / 작성
사용자는 헤더에 접근할 수 있어야한다
사용자는 제목을 입력할 수 있다
사용자는 진행방식을 select할 수 있다
사용자는 모집분야를 선택할 수 있다
사용자는 모집 분야에 따른 모집인원과 기술스택을 선택할 수 있다
사용자는 예상 기간을 작성할 수 있다
사용자는 연락방법을 작성할 수 있다
사용자는 시작일을 작성할 수 있다
사용자는 프로젝트 소개를 작성할 수 있다
사용자는 이미지를 넣을 수 있다
유효성 검사를 한다
마이페이지
- 사용자 마이페이지
사용자는 프로필 이미지를 설정할 수 있습니다.
사용자는 커버 이미지를 설정할 수 있습니다.
사용자는 사용자가 작성한 글 목록을 확인할 수 있으며, 작성한 글의 상세 페이지로 이동할 수 있습니다.
사용자는 사용자가 좋아요 한 글 목록을 확인할 수 있으며, 좋아요 한 글의 상세 페이지로 이동할 수 있습니다.
- 다른 사용자 마이페이지
다른 사용자를 팔로우 할 수 있습니다.
다른 사용자를 팔로우 취소할 수 있습니다.
404
- 눈에 띄는 부분에 메인 페이지를 호출하는 버튼 혹은 이미지가 있습니다.
와이어프레임
와이어프레임