codestates-seb / seb45_main_031 Goto Github PK

모든 화면에서 공통적으로 사용하는 Display 설정

페이지 정의

• 페이지 url : /todo
• 나의 할 일을 일자별로 확인 할 수 있다.
• 각각 할 일을 완료 혹은 완료 취소 할 수 있다.
• 일자별 달성 정도를 게이지와 숫자로 확인할 수 있다.

페이지 뷰

• 날짜, 달력 버튼
• 달력 라이브러리 모달
• 업적 이모지, 레벨, 이름
• 일일 달성량 게이지, 퍼센트
• 오늘의 성취 문구
• 태그 필터 버튼
• 할 일 리스트 (태그, 타이틀, 이모지 버튼)
• 할 일 모달 ( 태그, 타이틀, 이모지 버튼, 완료 / 완료 취소 버튼, 수정하기 버튼, 삭제하기 버튼)
• 스크롤 (일반)

페이지 기능

• 로그인 한 유저에 맞는 업적 내용을 표시하여야 한다.
• DB에 저장 된 할 일 목록을 표시 하여야 한다.
• 일자별 할 일 목록을 가져올 수 있어야 한다.
• 일자별 달성률을 확인할 수 있어야 한다.
• 각각 할 일은 완료일 경우에만 이모지가 표시 되어야 한다.
• 태그 필터 기능 이용 시 해당 태그의 할 일만 보여야 한다.
• 개별 할 일 클릭 시 할 일 모달창이 화면에 보여야 한다.
• 모달창에 클릭 된 할 일 내용이 표시되어야 한다.
• 모달 창 내 완료 버튼 클릭 시 이모지가 등록 / 삭제 되어야 한다.
• 수정하기 버튼 클릭 시 할 일 수정 페이지로 이동 해야 한다.
• 삭제 하였을 경우 할 일 목록 페이지로 돌아가며, 삭제한 할 일은 보이지 않아야 한다.

예상 소요 시간

• 뷰 : 1d
• 기능 : 3d

1. 유효성 예외
2. 파라미터 예외
3. 비즈니스 로직 예외

• exp / level 기능 추가

대댓글 기능 구현

• entity
• controller
• Feed쪽 Response와 매핑

• 피드에 회원 검증 로직 추가 (피드 수정, 삭제 시 작성자만 가능)
• 댓글에 회원 검증 로직 추가 (댓글 수정, 삭제 시 작성자만 가능)

프로젝트 진행을 위하여 개발 환경을 준비합니다.

• CRA를 통한 개발환경 세팅
• CSS 기본 값 리셋
• EsLint / Prettier 설정
• 불필요한 파일, 코드 삭제
• 기본 디렉토리 구조 설정
• Styled-component 설치

개요

마이페이지의 사용자 정보 기능을 생성합니다.

작업사항 - UI

• 레이아웃
• 사용자 정보 : 프로필 사진, 닉네임, 아이디(이메일)
• 사용자 정보 수정 버튼
• 로그아웃 모달
• 사용자 작성 게시글 목록

작업사항 - 기능

• 프로필 수정 버튼 클릭 시 회원 수정 페이지로 이동
• 로그아웃 버튼 클릭 시 로그아웃 모달이 보여야 한다
• 로그아웃 모달에서 '예' 선택 시 로컬에서 유저정보 삭제
• 로그아웃 모달에서 '아니오' 선택 시 모달 창 닫기
• 푸터 마이페이지 아이콘 클릭 시 마이페이지로 이동
• 사용자 정보 Get api

참고사항

• 내 게시물 보기는 새로운 이슈로 관리합니다. (Advanced 마일스톤)
  Issue #126

1. Entity
2. Dto
3. Controller
4. Repository
5. Service
6. Mapper

뷰

• -작성 버튼
• -작성 모달
• -할일 작성하기 버튼
• -게시글 작성하기 버튼
• -할일 목록 버튼
• -커뮤니티 버튼
• -마이페이지 버튼

기능

• -작성 버튼 클릭 시 작성 모달이 보여야 한다.
• -각 버튼 클릭 시 해당 페이지로 이동한다.
• -클릭 된 버튼은 강조색으로 표시한다.

뷰

• 구글 버튼
• 아이디
• 패스워드 입력창
• 유효성 검사 문구
• 로그인 버튼
• 회원가입 버튼

기능

• 구글 오어스
• 아이디를 입력한다.
• 패스워드 입력 시 유효성 검사를 한다.
• 중복 검사 api
• 일반 로그인 api
• 작업 후 할일 목록 페이지로 이동한다.
• 회원가입 버튼 클릭 시 회원가입 페이지로 이동한다.

뷰

• -구글 버튼
• -닉네임
• -패스워드
• -패스워드 확인 입력창
• -유효성 검사 문구
• -확인 버튼
• -취소 버튼

기능

• #190
• -유효성 검사를 한다.
• -이메일(아이디) , 닉네임 중복 검사를 한다.
• -패스워드와 패스워드 확인 비교란이 있다.
• -확인 버튼 클릭 시 회원가입 후 로그인 페이지로 이동한다.

필수데이터

• 닉네임
• 이메일
• 패스워드 ( 최소 8글자 이상, 1자 이상의 영문, 1개 이상의 숫자 )

• Post 에 회원 검증 로직 추가
• FeedService에서 직접 메서드를 생성하는 것이 아닌 memberService에서 DI 받아 검증으로 변경
• FeedLike 에 회원 검증 로직 추가

• 특정 Member 가 작성한 Feed 조회 기능

Entity
Dto
Repository

1. Entity
2. Dto
3. Controller
4. Repository
5. Service
6. Mapper

• Todo에 회원 검증 로직 추가
• Todo에 tagId 값 가져오기

• 할 일 여러 개 등록 API 추가
• 주석 추가 및 단일 조회 리팩토링

[코드 리뷰 정리]

1. import 문의 순서와 정리
   라이브러리와 작성한 코드를 구분(그룹핑)하는 것이 가장 쉬운 방법이다.
   그룹 사이에는 한줄 띄기를 사용해서 구분해주면 좋다.
2. const와 let에 대해 조금 더 고민해보기
3. 변수 선언과 컴포넌트 등 그룹핑을 하는 부분들은 띄어쓰기로 가독성 높혀주기.
4. 컴포넌트 명을 정할 때 최대한 구체적인 단어로 묘사하는 것이 좋다. > 가독성 증가
5. 한 변수명을 사용 할 때 단어와 단어 구분을 위하여 단어 첫 스펠링은 대문자로 작성.
6. 공통 변수명 한번에 바꾸기 > 윈도우 : f2
7. styled component 사용 시 변수명에 styled라는 말이 들어가면 안됨.
   변수명은 구체적이지만 간결 해야한다.
8. 소스 코드만 보고도 웹 페이지의 전체 레이아웃이 상상이 되도록 만들어 주는 걸 고민해보기.

• Todo PostList 유효성 검사 애너테이션 추가
• Feed 유효성 검사 애너테이션 추가

1. Entity
2. Dto
3. Controller
4. Repository
5. Service
6. Mapper

1. Entity
2. Dto
3. Controller
4. Repository
5. Service
6. Mapper

Controller 구현
Entity 구현
Dto 구현
Mapper 구현
Service 구현
Repository 구현

페이지 정의

• 작성 페이지 url : /todo/edit

• 나의 할 일을 등록 할 수 있다.

• 작성에 필요한 도움을 tip을 통해 확인 할 수 있다.

• 할 일 이름을 자유롭게 작성 할 수 있다.

• 태그로 할 일을 분류 할 수 있다.

• 완료 이모지를 선택할 수 있다.

• 수정 페이지 url : /todo/modify

• 나의 할 일을 수정 할 수 있다.

• 수정에 필요한 도움을 tip을 통해 확인 할 수 있다.

• 작성 된 이름을 수정 할 수 있다.

• 작성 된 태그를 수정 할 수 있다.

• 작성 된 이모지를 수정 할 수 있다.

• 취소 버튼을 눌러 할 일 목록 페이지로 이동 할 수 있다.

페이지 뷰

• 할 일 작성 타이틀 (협의 필요)
• 할 일 작성 tip (협의 필요)
• 할 일 이름 인풋박스
• 태그 인풋 박스
• 글자수 표시
• 유효성 검사 문구
• 완료 이미지 입력 창
• 이모지 라이브러리 모달창
• 취소 버튼
• 등록하기 버튼

페이지 기능
작성 페이지

• 할 일 이름을 작성 할 수 있다.
• 태그를 등록 할 수 있다.
• 이모지 기본값이 있다.
• 원하는 이모지를 선택 할 수 있다.
• 필수값(이름, 태그)을 넣지 않으면 경고 문구(해당 란은 필수값 입니다.)를 띄운다.
• 취소 버튼 클릭 시 할 일 목록 페이지로 돌아간다.
• 등록하기 버튼 클릭 시 할 일이 등록 되며 할 일 목록 페이지로 이동한다. 이때, 등록 된 할 일이 가장 하단에 위치한다.

예상 소요 시간

• 뷰 : 1d
• 기능 : 3d

• MemberService DI 받아서 리팩토링
• Todo Entity content table length 수정
• TodoDto 불필요 애너테이션 제거 수정
• Todo 각 API 마다 토큰 memberId 검증 추가 및 수정
• Todo 리스트 조회 로직 리팩토링

• AWS S3 이용 Member 이미지 업로드 기능 추가
• 이미지 업로드 관련 ExceptionCode 추가
• 이미지 업로드 관련 GlobalExcpetionHandler 메소드 추가

• dto
• entity
• mapper
• service

COMMENT
FEED
FEEDLIKE
TODO
도메인 member 검증 로직 수정

개요

마이페이지에서 사용자 정보를 수정할 수 있는 기능을 생성합니다.

작업사항 - UI

• 프로필 편집 헤더 ( 좌측 뒤로가기 버튼, 중간 타이틀 (프로필 변경), 우측 저장 버튼)
• 사용자 프로필 사진
• 프로필 사진 변경 버튼
• 프로필 사진 변경 모달
• 닉네임 인풋 박스
• 업적 조회
• 회원 탈퇴 버튼
• 회원 탈퇴 모달

작업사항 - 기능

• 사용자 정보 수정(프로필 편집) 페이지에서 헤더가 변경된다
• 헤더에서 뒤로가기 버튼 클릭 시 마이페이지로 이동
• 프로필 사진 변경 버튼 클릭 시 프로필 사진 변경 모달이 보여야 한다
• 프로필 사진 변경 모달창에서 닫기 버튼 클릭 시 모달창이 닫혀야한다
• 닉네임 수정 후 저장 버튼 클릭 시 Patch api
• 닉네임 인풋 박스 작성 시 useState에 저장
• 닉네임 중복 허용 여부 (백엔드 협의) → 중복 시 409 에러 alert
• 회원 탈퇴 버튼 클릭 시 회원 탈퇴 모달이 보여야 한다
• 회원 탈퇴 모달에서 확인 클릭 시 Delete api

• Tag - Todo 연결

1. Todo 단일 조회 기능 추가
   Path : localhost:8080/todos/single/1

View

• - 중앙 로고 버튼

기능

• - 로고버튼 클릭 시 할일 목록으로 창 이동

• Tag - Feed 연결

페이지 정의

• 작성 페이지 url : /community/edit

• 게시글을 작성 할 수 있다.

• 작성에 필요한 도움을 tip을 통해 확인 할 수 있다.

• 원하는 날짜의 나의 할 일 목록을 불러올 수 있다.

• 태그를 통해 올리고 싶은 목록을 필터링 할 수 있다.

• 게시글 내용을 작성 할 수 있다.

• 수정 페이지 url : /community/modify

• 게시글을 수정 할 수 있다.

• 수정에 필요한 도움을 tip을 통해 확인 할 수 있다.

• 할 일 목록은 수정할 수 없다.

• 태그는 수정 할 수 없다.

• 게시글 내용을 수정 할 수 있다.

• 취소 버튼을 통해 게시글 작성 / 수정을 취소하고 커뮤니티 페이지로 돌아갈 수 있다.

페이지 뷰

• 타이틀 ( 협의 필요 )
• 작성 tip ( 협의 필요 )
• 내 기록 불러오기 버튼 ( 달력 라이브러리 사용 )
• 유효성 문구 (필수 항목 체크, 수정 불가능 항목 체크)
• 태그 목록 ( 드롭 다운 )
• 게시글 내용 ( 텍스트 에디터 라이브러리 or 노션 스타일 라이브러리 중 선택 )
• 등록하기 버튼
• 취소 버튼

페이지 기능
작성 페이지

• 내 기록 불러오기 버튼 클릭 시 달력 모달이 보여야 한다.
• 달력 모달에서 날짜 선택 시 해당 날짜가 기록 되어야 한다.
• 날짜 기록 시 할일 Get api 후 태그에 해당 api 태그 목록이 등록 되어야 한다.
• 태그 클릭 시 드롭다운 생성되며 태그로 필터링 할 수 있다.
• 취소 버튼 클릭 시 커뮤니티 페이지로 이동되어야 한다.
• 등록하기 버튼 클릭 시 게시글이 작성되며 커뮤니티 페이지로 이동한다.

예상 소요 시간

• 뷰 :
• 기능 :

Advanced 기능으로 기본 기능 구현 완료 시 담당자 배정 예정.

1. Uri Creator
2. Response Dto
3. Audit

개인 피드백 받았던 부분 리팩토링 진행 이슈입니다.

• 댓글 & 대댓글 동일 API 사용으로 변경
• 댓글 회원 검증 로직 추가

POST

1. content -> min, max 값 설정 - 한글 기준 바이트 -> 1 ~ 20 글자
2. date -> 현재와 미래 날짜만 허용
3. todoEmoji -> 디폴트 값 -> 운동 이모지 설정
4. tagId, memberId -> 메시지 설정

PATCH

1. date -> 유효한 날짜 범위 전부 허용
2. tag -> 메시지 설정
3. content -> min, max 값 설정 - 한글 기준 바이트 -> 1 ~ 20 글자

1. Add todo Count
2. Add complete Count

페이지 정의

• 페이지 url : /community
• 올라온 게시글들을 확인 할 수 있다.
• 게시글은 최신순으로 확인 할 수 있다.
• 게시글을 올린 유저의 정보와 업적, 올린 시간, 게시글 내용을 확인 할 수 있다.
• 할 일 목록을 오늘의 할 일로 가져올 수 있다.
• 좋아요를 누를 수 있다.
• 댓글을 작성할 수 있다.
• 게시글 작성자는 게시글 수정, 삭제 버튼을 누를 수 있다.
• 댓글 작성자는 댓글을 수정, 삭제 할 수 있다.

페이지 뷰

• 게시글 작성자 프로필 (이미지, 닉네임, 업적 이모지)
• 게시글 업로드 날짜 및 시간(0000년 00월 00일 00시 00분)
• 게시글에 첨부 된 할 일 목록
• 수정 버튼
• 삭제 버튼
• 삭제 모달 ( 문구 : 삭제 하시겠습니까?, 버튼 : 네 / 아니오 )
• 좋아요 버튼
• 좋아요 명 수
• 게시글 내용
• 가져오기 버튼
• 댓글 입력 창
• 댓글 입력 버튼
• 댓글 작성자 닉네임, 댓글 내용, 댓글 작성 일자
• 댓글 모달 버튼
• 댓글 모달 ( 수정 버튼, 삭제 버튼 )

페이지 기능

• 게시글 목록을 확인 할 수 있다.
• 게시글은 최신순으로 나열 된다.
• 무한 스크롤을 통해 게시글을 계속해서 확인 할 수 있다.
• 게시글 작성자만 수정 / 삭제 버튼을 확인 할 수 있다.
• 게시글 수정 버튼 클릭 시 게시글 수정 페이지로 이동하여야 한다.
• 게시글 삭제 버튼 클릭 시 삭제 확인 모달창이 보여야 한다.
• 삭제 확인 모달창에서 확인 후 게시글을 삭제한다. 삭제 후 게시글 목록은 다시 렌더링 되어야 하며, 이때 삭제 된 게시글은 보이지 않아야 한다.
• 댓글을 작성 할 수 있다.
• 댓글 작성자만 댓글 모달 버튼이 보인다.
• 댓글 모달 클릭 시 댓글 모달창이 보여야 한다.
• 댓글 모달 창 내 수정 클릭 시 댓글을 수정 할 수 있어야 한다.
• 댓글 삭제 시 댓글 만 재 렌더링 되며, 이때 삭제된 댓글은 보이지 않아야 한다.

예상 소요 시간

• 뷰 : 1.5D
• 기능 : 3D

• Member 핸들러 memberId 검증
• MemberService -> accessToken 이용 -> memberId 값 조회 메소드 추가
• Member nickname unique 적용

• 단순 변수명 변경의 경우

• placeholder 가운데정렬
• 불필요한 코드 삭제
• 전체화면 간격조조정"

• Module not found: Error: Can't resolve 'axios' 문제로 코드 추가
• axios 추가 install
• hover 오류 수정

1. 로그인 인증 필터 구현
2. 토큰 검증 필터 구현
3. 예외처리 구현

1. 프로젝트 생성
2. 기본 디렉토리 구조 설정
3. 의존성 추가

1. Entity
2. Dto
3. Controller
4. Repository
5. Service
6. Mapper

1. Entity
2. Dto
3. Controller
4. Repository
5. Service
6. Mapper

prettier/prettier 에러 수정 코드 추가