1. 프로젝트 주제
“카북” 은 차를 사랑하는 사람들이 친구들과 자신의 멋진 차량 사진을 공유할 수 있는 SNS 입니다.
사용자는 차 모델과 종류를 입력하고 자신이 원하는 해시태그를 차량 사진과 함께 게시물을 올릴 수 있으며 다른 사용자는 자신이 원하는 해시태그를 검색하여 필터링 되어진 차 사진을 볼 수 있습니다.
1-1) 기획 과정
저희는 피그잼을 통한 브레인스토밍을 진행했고, 아래와 같은 기준으로 주제를 선정하였습니다.
- 여러가지보다는 하나(소수)의 기능에 집중
- 확장성 있는 기능
차량 사진을 공유하는 메인 기능 이외에 추가적으로 좋아요 기능, 친구 기능 댓글 기능 등의 다양한 확장성 있는 기능을 추가할 수있다는 점에 기반 하여 “카북” 을 주제로 선정하였습니다.
2. 기능
- 차 종류와 차 모델명을 기반으로 한 게시물 등록
- 해시태그를 통한 원하는 차 사진들 보기
- 게시물 좋아요 기능
- 팔로잉 기능을 통한 친구 기능
3. 프로토타입 & 디자인
4. 유저 스토리
5. 백로그
페이지
제품 백로그(유저스토리)
[BE]우선순위
[BE]태스크
[FE]태스크
회원가입
1
입력받은 정보가 잘못된 형식일 경우 회원가입을 제한한다.
1. 이메일 형식이 아닐 경우 회원가입을 제한한다.
2. 중복된 사용자 이메일을 입력할 경우 회원가입을 제한한다.
3. 중복된 닉네임을 입력할 경우 회원가입을 제한한다.
4. 닉네임을 16자를 넘어 입력할 경우 회원가입을 제한한다.
5. 비밀번호를 16자를 넘어 입력할 경우 회원가입을 제한한다.
1. 이메일 형식이 아닐 경우 회원 가입을 제한한다.
2. 중복된 사용자 이메일을 입력할 경우 회원가입을 제한한다.
3. 중복된 닉네임을 입력할 경우 회원가입을 제한한다.
4. 닉네임을 16자를 넘어 입력할 경우 회원가입을 제한한다.
5. 비밀번호를 16자를 넘어 입력할 경우 회원가입을 제한한다.
회원가입
1. DB User 테이블에 사용자를 등록한다.
2. 로그인 페이지로 리다이렉션한다.
1. 서버로부터 사용자의 정보를 응답받는다.
2. 로그인 페이지를 렌더링한다.
로그인
1. 유저로부터 이메일, 비밀번호를 입력받는다.
2. 입력받은 유저 정보가 DB의 User 테이블에 존재하는지 확인한다.
1. 유저로부터 이메일, 비밀번호를 입력받는다.
2. 서버에 입력받은 이메일, 비밀번호를 전송한다.
로그인
1. DB User 테이블 조회 후 일치하는 레코드가 없다면 로그인이 제한된다.
1. 서버로부터 일치하는 정보가 없다는 응답을 받는다.
2. 사용자에게 잘못된 정보를 입력했다는 알림을 보여준다.
❗ 3. 입력창을 초기화? 그대로 놔둘지?
로그인
1. HttpSession에 사용자의 로그인 상태를 등록한다.
2. 메인 페이지로 리다이렉션한다.
1. 로그인 상태로 메인 페이지를 리렌더링한다.
메인 페이지
1. HttpSession으로 사용자가 로그인한 상태인지 확인한다.
2-1. 로그인하지 않은 경우, Post 테이블에서 최신 작성 순대로 게시글을 조회한다.
2-2. 로그인한 경우, Follow 테이블에서 사용자가 팔로우한 사람의 id들을 받아오고, Post 테이블에서 팔로우한 사람들의 게시글을 최신 작성 순대로 조회한다.
3. API를 통해 조회한 정보들을 반환한다.
1. ❗ 쿠키 값 존재 여부에 따라 프론트에서 로그인 판단?
2 - 1. 로그인상태면 사용자가 팔로우한 사람들의 최신 게시글들의 정보를 받아 메인 페이지를 렌더링한다.
3. 로그아웃이라면 최신 작성 게시글들의 정보를 받아 메인페이지를 렌더링한다
메인 페이지
1. 상세 페이지, 글 생성, 프로필 페이지 진입 시 HttpSession으로 사용자가 로그인한 상태인지 확인한다.
2. 로그인하지 않은 경우, 로그인 페이지로 리다이렉션 한다.
1. 서버에 사용자의 정보를 요청한다.
2. 사용자의 정보를 입력받지 못하면 로그인 페이지를 렌더링한다.
2-1. 사용자의 정보를 받았다면 이를 이용해 로그인 페이지를 렌더링한다.
메인 페이지
1. 게시물을 Post 테이블에서 조회한다.
2. API를 통해 조회한 정보들을 반환한다.
1. 서버에 게시글에 대한 상세정보를 요청한다.
2. 서버로부터 정보를 받아 상세 사진 페이지를 렌더링한다.
메인 페이지
1. 프로필 페이지로 이동한다.
1. 서버에 유저의 프로필을 요청한다.
2. 응답으로 유저의 프로필 정보를 받는다.
3. 서버에서 받은 정보를 이용해 프로필 페이지를 렌더링한다.
메인 페이지
1. 검색어를 입력받는다.
2. DB Hashtag 테이블에서 검색어를 조회하고, Hashtag 테이블과 POST_HASHTAG 테이블을 조인하여 얻은 게시물 id를 통해 POST 테이블에서 게시물을 조회한다.
3. API를 통해 조회한 정보들을 반환한다.
1. 검색어를 입력받는다.
2. 서버에 검색어에 대한 정보를 요청한다.
3. 응답된 정보로 메인 페이지를 리렌더링한다.
프로필 페이지
1. URL의 pathvariable을 통해 받은 사용자의 닉네임으로 User 테이블을 조회하여 해당 사용자의 닉네임을 찾는다.
2. 해당 사용자가 작성한 게시물을 Post 테이블에서 조회한다.
3. API를 통해 조회한 정보들을 반환한다.
❗세션 정보를 통해 현재 프로필의 사용자와 접속한 사용자의 일치 여부를 응답 메시지에 포함
1. 서버에 해당 사용자의 정보를 요청
2. 응답으로 사용자의 정보를 받아 프로필 페이지 렌더링
프로필 페이지
닉네임 변경
1. 유저에게 새로운 닉네임을 입력받는다.
2. 새로운 닉네임을 User 테이블에서 조회한다.
3-1. 중복되는 닉네임이 없을 시 User 테이블의 닉네임을 update한다.
3-2. 중복되는 닉네임이 존재할 시, 또는 닉네임이 16자 초과하는 경우 닉네임 변경이 제한된다.
비밀번호 변경
1. 유저에게 새로운 비밀번호를 입력받는다.
2-1. 새로운 비밀번호가 1글자 이상 16자 이하인 경우 User 테이블의 비밀번호를 update한다.
2-2. 새로운 비밀번호가 16자 초과하는 경우 비밀번호 변경이 제한된다.
닉네임 변경
1. 유저에게 새로운 닉네임을 입력받는다.
2. 서버에 새로운 닉네임을 전송한다.
3 - 1. 응답으로 변경된 유저 정보를 받았다면 프로필 페이지 리렌더링
3-2-1. 닉네임이 중복이면 중복이라는 알림을 보여준다
3-2-2. ❗입력창 초기화? or 놔둠
비밀번호 변경
1. 유저에게 새로운 비밀번호를 입력받는다.
2. 새로운 비밀번호가 16자 초과하면 경고창을 보여준다.
3. 그렇지 않으면 새로운 비밀번호를 서버에 전송한다.
4. 서버로부터 유저 정보를 응답받았다면 프로필 페이지 리렌더링
프로필 페이지
1. 세션에서 팔로워(현재 로그인한 유저) 정보를 얻는다.
2. 팔로잉 유저 정보를 url에서 얻는다.
3-1. (팔로우)팔로워-팔로잉 정보를 팔로우 테이블에서 생성한다.
3-2. (언팔로우)팔로워-팔로잉 정보를 팔로우 테이블에서 삭제한다.
팔로우
1. 팔로우 버튼을 누르면 서버에 팔로워 추가 요청을 보낸다.
2. 응답으로 업데이트 된 팔로워 리스트를 받아 프로필 페이지 리렌더링
언팔로우
1. 언팔로우 버튼을 누르면 서버에 팔로워 삭제 요청을 보낸다.
2. 응답으로 업데이트 된 팔로워 리스트를 받아 프로필 페이지 리렌더링
프로필 페이지
1. URL pathvariable에서 사용자의 닉네임을 얻는다.
2-1. (팔로잉 리스트)팔로우 테이블에서 유저가 팔로우하는 아이디를 조회한다.
2-2. (팔로워 리스트)팔로우 테이블에서 유저를 팔로우하는 아이디를 조회한다.
3. 해당 아이디를 통해 user 테이블에서 유저를 조회한다.
4. API를 통해 조회한 정보들을 반환한다.
1. 사용자의 팔로우 리스트와 팔로잉 정보를 서버에 요청한다.
2. 응답으로 정보를 받아 프로필 페이지를 렌더링한다.
프로필 페이지
1. 로그인 세션을 삭제한다.
2. 메인 페이지로 리다이렉션한다.
1. 쿠키를 삭제한다.
2. 메인 페이지를 렌더링한다.
❗ 자동 로그아웃 기능?
글 상세 페이지
1. 사용자가 선택한 글의 정보를 게시글 테이블과 이미지 테이블에서 가져온다.
2. 이미지 테이블에서 가져온 이미지 경로를 통해 이미지를 불러온다.
3. 정보를 응답한다.
❗세션 정보를 통해 현재 게시글의 사용자와 접속한 사용자의 일치 여부를 응답 메시지에 포함
1. 게시글의 정보를 서버에 요청한다.
2. 서버의 응답을 받아 상세 페이지를 렌더링한다.
글 상세 페이지
x
1. 서버로부터 자신의 게시글인지 여부를 응답받아 본인이 작성자라면 수정버튼과 삭제버튼을 보여준다.
2-1. 수정 버튼을 누르면 글 수정 페이지로 이동한다.
2-2-1. 삭제 버튼을 누르면 취소, 삭제버튼이 있는 모달창을 띄운다.
2-2-2. 취소를 누르면 삭제 취소, 삭제를 누르면 서버에 삭제를 요청하고 메인페이지를 렌더링한다.
글 상세 페이지
x
1. 게시글 작성자의 정보를 서버에 요청한다.
2. 응답으로 작성자의 정보를 받아 프로필 페이지를 렌더링한다.
글 작성 페이지
x
1. 등록된 이미지를 누르면 이미지 태그속의 이미지가 삭제되고 더미 이미지로 변경한다.
2. 이미지 태그를 클릭하면 갤러리로 이동한다.
3. 갤러리에서 이미지를 선택하면 이미지를 업로드한다.
글 작성 페이지
1. 세션을 통해 유저 아이디를 가져온다.
2. Post 테이블에 유저 아이디와 작성일자(없을 시 현재 시각 자동 생성)를 등록한다.
3. 이미지를 서버의 경로에 저장한다.(aws S3?)
4. 2번에서 등록한 게시글의 id와 글에 등록된 이미지의 파일 이름, 3번 경로를 Image 테이블에 등록한다. (불확실)
5. 글에 등록된 해시태그를 Hashtag 테이블에서 조회한다.
5-1. 조회에 실패 시 Hashtag 테이블에 해당 태그를 등록한다.
6. Post_hashtag 테이블에 2번의 게시글 id와 4번의 해시태그 id를 등록한다.
7. 메인페이지로 리다이렉션한다.
1. 게시글의 정보중 하나라도 입력하지 않는다면 등록버튼을 비활성화한다.
2. 등록 버튼을 누르면 서버에 입력받은 정보를 전송한다.
3. ❗ 응답으로 뭘 받을까??
4. 메인페이지를 렌더링?
글 수정 페이지
1. URL의 게시글 id를 통해 DB Post 테이블을 조회하여 게시글 내용을 조회한다.
2. API를 통해 조회한 정보들을 반환한다.
1. 서버에 게시글의 정보를 요청한다.
2. 응답을 받아 글 수정 페이지를 렌더링한다.
글 수정 페이지
1. 사진과 해시태그 변경사항을 DB 테이블에 반영한다.
1. 서버에 수정요청을 보낸다.
2. ❗ 응답을 받아서 예외처리? ㄴㄴ?
6. ERD
☀️ 팀원 소개
FE
FEFE
FEBE
BEBE
BEBE
BE