유저 정보 변경

• 유저의 사진을 변경할 수 있습니다.
• 유저의 닉네임을 변경할 수 있습니다.
• 유저의 비밀번호를 변경할 수 있습니다.
  • 변경 전 비밀번호 검증 api 로 현재 비밀번호와 비교 해야 합니다.
• 유저가 회원탈퇴를 할 수 있습니다.
  • 탈퇴 전 비밀번호 검증 api 로 현재 비밀번호와 비교 해야 합니다.

vue3 프로젝트 생성

• axios 설치
• router 설치
• sass 설치
• 부트스트랩 설치
• ESLint 설치
• Prettier 적용
• vue-query 설치
• pinia 설치

플래너 기능

플래너 CRUD

• 유저가 플래너를 생성 / 수정 / 삭제 할 수 있습니다.
• 비공개 플래너는 그룹멤버를 제외한 다른 유저에게 보여줄 수 없습니다.

플래너 상세 CRUD

• 웹소켓을 이용하여 날짜를 생성 / 수정 / 삭제 할 수 있습니다.
• 해당 날짜 아래에 투두를 생성 / 수정 / 삭제 할 수 있습니다.
• 비공개 투두는 그룹멤버를 제외한 다른 유저에게 보여줄 수 없습니다.

실시간 채팅

• 그룹멤버인 유저들 끼리 실시간으로 채팅을 할 수 있습니다.
• 대화내용은 저장하지 않습니다.

유저 검색 기능

• 그룹 멤버를 추가하기 위해 유저를 검색합니다.
• 소셜 로그인으로 인해 이메일이 중복 될 수 있습니다.
  • 결과는 리스트로 반환 됩니다.

그룹 멤버 추가 / 삭제

• 웹소켓을 이용하여 실시간으로 유저를 추가 / 삭제 할 수 있습니다.

피드 기능

레이아웃

• 공통 인풋 컴포넌트 생성
• 공통 버튼 컴포넌트 생성
• 공통 타이틀 scss 생성

Api 연결

• 무한 스크롤 구현하기
• 피드 리스트 받아오기

유저 기능

회원 가입

• 레이아웃
• api 연결

로그인

• 레이아웃
• api 연결

소셜 로그인

• 레이아웃
• api 연결

레이아웃 설정

• Navbar
• Component 자리
• 페이지 줄일때 비율에 맞게 줄어들도록 만들기

게시글 기능

게시글

• 게시글 리스트는 인스타그램과 같이 썸네일로 이루어집니다.
  • [FE] 썸네일이 없는 경우 기본 이미지 설정 해야합니다.
• 유저는 게시글을 생성 / 수정 / 삭제 할 수 있습니다.
• 사진을 여러개 올릴 수 있습니다.

댓글

• 유저는 댓글을 생성 / 수정 / 삭제 할 수 있습니다.
• 댓글 리스트는 페이징 처리를 하여 제공합니다.

메일 기능

• 유저가 비밀번호를 잊어버렸을 경우 비밀번호를 변경할 수 있는 redirect url 을 제공합니다.
• 임시토큰을 발생해서 넣어주어야 합니다.
• prefix 를 붙여 일반 토큰과 혼동되지 않도록 해야합니다.

공지 : 아직 디자인 초안이고 이 전체적인 디자인을 바탕으로 프론트 개발을 하려고 합니다

만약에 디자인을 보시면서 개선해야할 점이 있다면 바로 알려주세요!!

링크 : https://www.figma.com/community/file/1307415983521577601

유저 기능

회원가입

• 유저가 회원 가입을 할 수 있습니다.

로그인

• 유저가 일반 로그인을 할 수 있습니다.
• 유저가 소셜 로그인을 할 수 있습니다.

로그아웃

• 쿠키와 헤더의 토큰을 삭제합니다.

유저 정보 반환

• 유저 정보는 레디스에 캐싱합니다.
• 요청시에 레디스를 거치고, 없을 시 DB 를 거치도록 합니다.

인증 / 인가

웹토큰

• 토큰을 생성합니다.
• 토큰을 재발급 합니다.

  토큰	기한	저장	키	값
  accessToken	15 분	헤더	Authorization	Bearer + token
  refreshToken	7 일	쿠키 / 레디스	refreshToken	token

  • refresh Token 만료시 재발급해서 다시 access Token 을 재발급 합니다. (유저 편의 향상)

시큐리티

• 시큐리티 설정을 커스텀 합니다.
• 로그인시 아이디 비번 틀렸을 경우 오류를 반환하지 않습니다. (보안 향상)