| 권소희 | 현주희 | 손예지 | 김민지 |
|---|---|---|---|
 |
 |
 |
 |
| sohee-K | Hyun-juhee | yezgoget | mnxmnz |
| 활동 돌아보기 마이페이지 |
새 활동 추가 활동 모아보기 로그인 |
메인 홈 | 개별 활동 보기 |
| git branch [step-card] [my-page] |
git branch [createActivity] |
git branch [home] |
git branch [activity-one] |
💡 헤더
- 활동 이름 표시
- 이미 저장된 답변이 있을 경우에만 좌우 버튼으로 이동 가능
💡 현재 질문 카드
- 카드 index에 따라 질문 표시
- 답변 작성 영역(중복 공백 불가능, 최대 1000자)
- 답변 수정 중 이전카드 또는 좌우버튼 클릭시 저장 안내 모달 표시
💡 스쿱 저장 버튼
- 답변이 빈 문자열일 경우 비활성화
- 답변이 존재하는 경우 활성화
- 활성화된 경우 hover시 스타일 변경
- 활성화된 경우 클릭시 답변 저장 후 다음 카드로 넘어감
💡 이전 질문 카드
- 이전 질문과 저장된 답변 내용 표시
- hover시 스타일 변경
- 클릭시 해당 카드의 수정 페이지로 넘어감
💡 다음 질문 카드
- 다음 질문 내용 표시
💡 스쿱 진행률 & 애니메이션
- 답변 작성률에 따라 진행률 표시 및 애니메이션 효과
- 답변 작성률에 따라 청크 메세지 표시
💡 작성 완료 카드
- 10개의 답변 모두 작성완료시 표시
- 활동 돌아보기 버튼 클릭시 미리보기 뷰로 넘어감
💡 활동 내용 입력받기
- 제목
- 소속 단체
- 직무 태그
- 역량 태그
- 한줄 설명
- 입력차 hover시 스타일 변경
💡 저장 완료 버튼
- 제목, 직무 태그, 역량 태그 입력시 버튼 활성화
- 활성화된 경우 hover시 스타일 변경
💡 저장 완료시 팝업(모달)
- 활동을 자세히 돌아볼까요? 에서 네 선택시 -> 활동 돌아보기로 이동
- '다음에 할래요' 선택 시 홈으로 이동
💡 사진 및 파일 입력받기
- 사진, 파일 formData로 서버에 전송
💡 헤더
- 활동 이름 표시
- 즐겨찾기 버튼
- 수정 버튼
- 삭제 버튼
💡 활동 내용 확인하기
- 제목
- 활동 사진
- 소속 단체
- 직무 태그
- 역량 태그
- 한줄 설명
- 파일 첨부
- 활동 카드 부분 사용자 답변 정리
💡 활동 내용 수정하기
- 제목
- 활동 사진
- 소속 단체
- 직무 태그
- 역량 태그
- 한줄 설명
- 파일 첨부
- 입력차 hover시 스타일 변경
- 활동 카드 부분 사용자 답변 정리
💡 수정 완료 버튼
- 사용자가 값을 수정한 후 수정 완료 가능
💡 즐겨찾기 버튼
- 활동 즐겨찾기 등록 및 해제 기능
💡 사용자 답변 상태에 따라 4가지 다른 뷰 제공
- 0: 작성한 질문 카드는 하나도 없고 기본 정보만 입력했을 경우
- 1: 작성한 질문 카드가 있으나 10번까지 완성하지 않았을 경우
- 2: 10번까지 모든 질문 카드 작성했을 경우
- 3: 사용자가 10번까지 질문 카드를 작성한 직 후 미리보기 화면
💡 메인 헤더
- 홈
- 모아보기
- 마이페이지
💡 사용자 인삿말
- 사용자 이름이 들어간 인사말
- 활동 제안 (F5시 랜덤으로 바뀜)
- 새 활동 추가 버튼
💡 활동 불러오기
- 기간 선택 버튼 (년도)
- 활동 카드
ㄴ 활동 이미지. 활동 제목 , 기간, 해시태그
ㄴ 사용자 경험을 요약해서 보여줌.
- 기간 선택
- 타임라인 숫자 비활성화
💡 활동 모아보기/즐겨찾기/작성 중인 활동 선택
- 활동 모아보기 : 필터링 가능, 처음에는 전체 활동
- 즐겨찾기 : 즐겨찾기 등록한 활동
- 작성 중인 활동 : 아직 작성이 완료되지 않은 활동
💡 필터
- 활동 기간 선택
- 관련 직무 태그 선택
- 핵심 역량 태그 선택
- 확인 버튼 클릭 시 해당하는 활동만 조회
💡 활동 클릭시
- 개별 활동 조회 페이지로 이동
💡 비밀 번호 입력
💡 로그인
- 로그인 성공 시 홈으로 이동
- 실패시 경고문 출력
💡 기본 정보 레이아웃
💡 이력 사항 레이아웃
│
├── assets
│ ├── icons
│ └── image
├── components
│ ├── activityOne
│ │ ├── default
│ │ ├── edit
│ │ ├── global
│ │ ├── notFinished
│ │ └── notStarting
│ ├── common
│ ├── createActivity
│ ├── filterActivities
│ ├── home
│ ├── myPage
│ ├── signIn
│ └── stepCard
├── containers
│ ├── activityOne
│ │ ├── default
│ │ └── edit
│ ├── createActivity
│ ├── filterActivities
│ ├── home
│ ├── signIn
│ └── stepCard
├── font
├── lib
│ ├── api
│ ├── styles
├── pages
│ ├── activityOne
│ ├── createActivity
│ ├── filterActivities
│ ├── home
│ ├── myPage
│ ├── signIn
│ └── stepCard
├── stores
│ ├── modules
│ └── index.js
├── App.js
├── index.js
└── serviceWorker.js
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"antd": "^4.9.4",
"axios": "^0.21.1",
"global": "^4.4.0",
"prettier": "^2.2.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"redux": "^4.0.5",
"styled-components": "^5.2.1",
"yarn": "^1.22.10"
✔ main - 개발 완료하고 최종 코드 올리는 브랜치
✔ develop - 각자 담당한 페이지 뷰 브랜치를 합쳐서 테스트 진행하는 브랜치
- home (홈 view)
- createActivity (새 활동 추가 view)
- step-card (활동 돌아보기 view)
- activity-one (개별 활동 보기 view)
- my-page (마이페이지 view)
- responsive (반응형 확인용 브랜치)
-
ESLint 및 Prettier
// .prettierrc { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80, "arrowParens": "avoid" }-
lowerCamelCase
-
화살표 함수형으로 컴포넌트 선언하기
- 화살표 함수형 컴포넌트 예시
import React from 'react'; const Hashtag = () => { return <div></div>; }; export default Hashtag;
-
sqoop Server