codestates-seb / abc02_001 Goto Github PK

기능 설명

유저 정보를 생성하는 코드를 작성

작업 단위

[ ] Post 요청이 들어오면 유저 정보 생성
[ ] 단위 테스트

예상 시간

5시간

앱 소개 페이지 구현

해야할 일

• 앱 소개 페이지 JSX 마크업
• CSS 스타일링

ETC

• 예상 작업시간 :1day

쪽지함 페이지네이션 구현

해야할일

• 페이지네이션

ETC

• 예상작업시간 : 2Day

앱 소개 페이지 내 로그인, 회원가입, 페이지 연결하기

해야할 일

• 로그인 페이지 연결하기
• 회원가입 페이지 연결하기

ETC

-예상 작업 시간 : 2 hours

• Header 마크업
• Navigation 마크업
  • 각 메뉴 페이지 연결
  • 로그인, 비로그인 간 보이는 메뉴 차이 구현
  • 반 가입 여부에 따른 우리 반 페이지 차이 구현
• Footer 마크업
• 전체 레이아웃 마크업

방명록 페이지네이션 구현

해야할 일

• 페이지네이션 구현

ETC

• 예상 작업 시간 : 2 day

• 이메일 유효성 검사
• 인증 유지 기능 구현

구현에 필요한 과정

• ERD 벤다이어그램 작성

• 상호협의된 코드명으로 데이터 베이스 구축 초등학교 1학급, 중학교 1학급, 고등학교 1학급.

예상 작업 시간

3h

방명록에서 닉네임 누르면 쪽지 창이 나오도록 구현

해야할 일

• 쪽지 컴포넌트 받아오기
• 모달 구현하기

ETC

• 예상 작업시간 : 2day

• 각 페이지 초안 만들기
• 라우터 연결하기
• 로그인 인증 라우터 구현

앱소개 페이지 소개 내용(gif)을 볼 수있는 슬라이더 구현하기

해야할 일

• 소개 gif 만들기
• 슬릭 구현

ETC

-예상작업시간 : 2day

• 색상 변경 버튼 클릭 시 컬러 팔레트 노출
• 컬러 선택 시 닉네임 배경색 변화
• 색상 변경 완료 시 컬러 정보 저장(API 사용)
• 회원정보 수정 버튼 클릭 시 회원정보 페이지로 이동
• mbti, 관심사별 친구 리스트 렌더링
• 친구 닉네임 클릭 시 쪽지 보내기 버튼 띄우기
• 쪽지 보내기 버튼 클릭 시 쪽지 보내는 페이지로 이동

• 회원가입 페이지에서 만든 컴포넌트들 가져와서 사용하기
• 비밀번호 찾기, 회원가입하기 링크 컴포넌트 구현

ERD 작성하기

예상시간

2일

기능 설명

방명록을 수정하는 코드를 작성

작업 단위

• PATCH 요청이 들어오면 방명록 수정
• 단위 테스트

예상 시간

3/80

기능 설명

쪽지를 생성하는 코드를 작성

작업 단위

• POST 요청이 들어오면 쪽지 생성
• 단위 테스트

예상 시간

5시간

쪽지함 페이지 구현

해야할일

• 네비바 구현
• 쪽지 작성란 구현
• 쪽지 보내기, 취소 버튼 구현
• 보낸 쪽지함 페이지 구현
• 받은 쪽지함 페이지 구현

ETC

• 예상작업시간 : 1week

기능 설명

방명록을 생성하는 코드를 작성

작업 단위

• Post 요청이 들어오면 방명록 생성
• 기본 class 생성
• 단위 테스트

예상 시간

10/80시간

• react-modal을 이용한 로딩스피너 컴포넌트 만들기

• 파비콘 시안 작성
• 파비콘 작업완료
• 상단바 로고 디자인

기능 설명

방명록 작성시 로그인을 확인하는 코드 작성

작업 단위

• POST 요청시 사용자의 token을 userdetailes에서 권한 확인 뒤 생성 가능 여부 판단
• 단위 테스트

예상 시간

72시간

테이블 정의서 작성하기

예상시간

2일

기능 설명

유저 정보를 수정하는 코드를 작성

작업 단위

[ ] Patch 요청이 들어오면 유저 정보 수정
[ ] 단위 테스트

예상 시간

5시간

• CSS : 공통 컬러 설정
• CSS : 글꼴 설정
• CSS : reset.css 설정
• CSS : a11yHidden 클래서 스타일 설정
• 파비콘 설정
• Creat-react-app 으로 프로젝트 생성
• 라이브러리 설치
  • Styled-component
  • Axios
  • Redux, Redux Toolkit
  • react-router-dom
  • react-slick, slick-carousel
  • react-toastify
  • react-modal
  • react-responsive
• eslint, prettier 설정
• 폴더 구조 설정
• 아이콘, 이미지 다운받기

기능 설명

유저 정보를 조회하는 코드를 작성

작업 단위

[ ] Get 요청이 들어오면 유저 정보 조회
[ ] 단위 테스트

예상 시간

5시간

기능에 대한 설명

반은 특정 기간에만 존속되며, 기간이 지나면 소멸된다.

• 새학기가 시작되기 전(2월~3월사이) 해당 반에 대한 정보가 소멸한다.
• 반 삭제 한달 전 소속 학생들에게 삭제알림쪽지를 발송한다.

작업에 대한 설명

• 현재 반에 대한 별도의 페이지가 존재하지 않고, 따라서 소멸 범위가 모호함에 따라 해당기능은 최하기능으로 배치하고 구현여부는 프로젝트의 진행상황에 따른다.

예상 소요 시간

• 8H

• title, sub-title 마크업 & CSS
• 닉네임 컴포넌트 마크업 & CSS
• 버튼 컴포넌트 마크업 & CSS
• 닉네임 컬러 팔레트 마크업 & CSS
• 친구 추천 목록 마크업 & CSS

• 의존 라이브러리 설정 (필요한거 추가필요)
• DB설정
• github에 올리기
  모든 백엔드 개발자 pull받기
• 이성미
• 김준년
• 김다소미

기능 설명

허락받은 인원만 반에 가입할 수 있도록 시큐리티 코드를 작성하여 적용한다.
EX) A반 학생은 A반에 가입가능..

작업단위

• 시큐리티에 대한 사전학습 실시
• 가입신청 관련한 코드를 작성
• 단위 테스트
• 전체 테스트

예상 시간

24H

• 소개 페이지
• 로그인
• 회원가입
• 마이페이지
• 회원정보 수정&탈퇴
• 방명록
• 쪽지
• 반 검색&가입

• 각자 담당 파트별로 작성

Button 컴포넌트 구현

해당 기능을 구현하기 위해 할 일이 무엇인가?

• JSX 마크업
• CSS 스타일링
• 버튼 기능 구현

ETC

• 예상 시간 : 1day
• 1차 버튼 예시

-2차 버튼 시안 (1/8수정) : 버튼크기 색 수정

이미지 버튼 설명

• bs : 아무값도 주지않은 기본버튼
• sm: 작은 버튼
• md: 중간 버튼
• lg: 큰 버튼

버튼 설정 값

• size = sm, md, lg
• variant = lightbtn, graybtn , subbtn / 순서대로 밝은회색버튼, 회색 버튼, 서브색 버튼 ( 설정X 메인컬러 버튼)

• 각자 파트별로 화면 정의서 작성

• 회원가입 페이지에서 만든 컴포넌트 재사용
  • 이메일 컴포넌트 수정
  • 버튼 블럭 컴포넌트 수정

기능 설명

방명록을 조회하는 코드를 작성

작업 단위

• GET 요청이 들어오면 방명록 전체 조회
• 단위 테스트

예상 시간

5/80

기능 설명

유저 정보를 삭제하는 코드를 작성

작업 단위

[ ] Delete 요청이 들어오면 유저 정보 삭제
[ ] 단위 테스트

예상 시간

5시간

프로젝트 초기 폴더를 생성합니다.

• 이메일 유효성 검사
• 이메일 중복 검사(API 사용)
• 비밀번호 유효성 검사
• 비밀번호 일치 확인
• 닉네임 유효성 검사
• 닉네임 중복 검사(API 사용)
• MBTI 상태 관리
• 관심사 상태 관리
• 모든 항목 필수 입력 검사
• 회원 탈퇴 기능 구현

기능 설명

방명록을 삭제하는 코드를 작성

작업 단위

• DELETE 요청이 들어오면 방명록 삭제
• 단위 테스트

예상 시간

3/80

방명록 페이지 구현하기

해당 기능을 구현하기 위해 할 일이 무엇인가?

• 방명록 JSX마크업
• CSS 스타일링

ETC

• 예상작업시간 2 day

1차 완성

기능 설명

우리반 만들기(가칭)버튼을 클릭하여, 반 생성에 필요한 정보를 입력하는 입력폼을 불러들인다.
생성버튼을 누르면 입력정보가 데이터베이스에 저장된다.

작업 단위

• 반 생성 신청정보 입력시 해당정보가 데이터베이스에 저장되는 코드 구현
• 단위 테스트

예상 소요 시간

24H

API 정의서 작성하기

예상시간

1일

기능 설명

사용자 닉네임 배경색 선택에 필요한 배경색 코드값을 저장하는 코드를 작성
(멤버안에 배경색들을 가지고 있는 방향으로 진행하다 모든색을 주는 기능 구현하려면 엔티티를 별도 생성이 필요해서 새로 작성)

작업 단위

• 기본 틀(엔티티,저장소등)
• 배경색 db저장 기능 구현
• 모든 배경색 조회 기능 구현
• 유효성 검사 (배경색 코드값이 RGB가 맞는지)

예상 시간

12시간

기능 설명

쪽지를 조회하는 코드를 작성

작업 단위

• GET 요청이 들어오면 쪽지 전체 조회
• GET 요청이 들어오면 쪽지 부분 조회
• 단위 테스트

예상 시간

5시간

• 멤버 관련 페이지(로그인, 회원가입, 회원탈퇴, 마이페이지) 에서 공통으로 쓰일 main 레이아웃 컴포넌트 : MemberLayout

• 멤버 관련 페이지에서 공통으로 쓰일 submit 버튼 레이아웃 컴포넌트 : MemberButtonBlock

• form 컴포넌트 : MemberForm

• form 내 입력 section별 컴포넌트 : MemberFormBlock

• input Description 컴포넌트

• text input 파트(이메일, 비밀번호, 닉네임)

  • text input 레이아웃 컴포넌트 : MemberFormInput
  • Error메시지 컴포넌트 : MemberErrorText
  • title, sub-title 컴포넌트

• radio, checkbox input 파트 (mbti, 관심사)

  • radio input 파트 레이아웃 컴포넌트 : MemberFormRadio
  • 관심사 파트 checkbox로 input type 변경

• 이메일
  • 상태관리
  • 유효성 검사
  • 중복 검사(API 사용)
    • 로직 구현
    • API 사용
• 비밀번호
  • 상태관리
  • 유효성 검사
  • 비밀번호 확인 일치 여부
• 닉네임
  • 상태관리
  • 유효성 검사
  • 중복 검사(API 사용)
    • 로직 구현
    • API 사용
• MBTI
  • 상태 관리
  • 필수 입력
• 관심사
  • 상태 관리
  • 최대 3개 입력
  • 필수 입력

기능 설명

쪽지를 삭제하는 코드를 작성

작업 단위

• DELETE 요청이 들어오면 쪽지 삭제
• 단위 테스트

예상 시간

5시간

기능 설명

사용자로부터 학교급, 학교이름, 학년, 반을 입력받아 데이터베이스 상에 일치하는 학급을 불러들여 화면에 표시한다.

작업 단위

• 관련코드 작성
• 단위 테스트

예상 소요 시간

-24H

쪽지함 기능 구현

해야할일

• 쪽지 작성 기능 구현
• 쪽지 보내기, 취소 기능 구현
• 보낸 쪽지함 기능 구현
• 받은 쪽지함 기능 구현

ETC

• 예상작업시간 : 1week

방명록 기능구현

해야할일

• 방명록 등록
• 방명록 삭제
• 방명록 조회

ETC

• 예상작업시간 : 1weeks
• 수정기능 삭제 함.