predictyson / sqoop-client

🥄 We are Sqooping our traces!

sqoop Web 👻

🔵 질문을 통해 돌아보는 대학생 경험 정리 가이드 sqoop! ⚪️

📑 프로젝트 소개

SOPT 27TH APP JAM__WEB PART

PROJECT PERIOD

2020.12.28 ~ 2021.01.16

TEAM CORE VALUE

"EASY" "MOTIVATIVE" "DETAIL"

🙋‍♀️ 팀원 소개 및 역할 분담

권소희	현주희	손예지	김민지
sohee-K	Hyun-juhee	yezgoget	mnxmnz
활동 돌아보기 마이페이지(~ing)	새 활동 추가 활동 모아보기 로그인	메인 홈	개별 활동 보기
git branch [step-card] [my-page]	git branch [createActivity]	git branch [home]	git branch [activity-one]

🔵 서비스 핵심 기능

⚪️ 활동 돌아보기(/steps/:id)

💡 헤더
  - 활동 이름 표시
  - 이미 저장된 답변이 있을 경우에만 좌우 버튼으로 이동 가능

💡 현재 질문 카드
  - 카드 index에 따라 질문 표시
  - 답변 작성 영역(중복 공백 불가능, 최대 1000자)
  - 답변 수정 중 이전카드 또는 좌우버튼 클릭시 저장 안내 모달 표시

💡 스쿱 저장 버튼
  - 답변이 빈 문자열일 경우 비활성화
  - 답변이 존재하는 경우 활성화
  - 활성화된 경우 hover시 스타일 변경
  - 활성화된 경우 클릭시 답변 저장 후 다음 카드로 넘어감

💡 이전 질문 카드
  - 이전 질문과 저장된 답변 내용 표시
  - hover시 스타일 변경
  - 클릭시 해당 카드의 수정 페이지로 넘어감 

💡 다음 질문 카드
  - 다음 질문 내용 표시

💡 스쿱 진행률 & 애니메이션
  - 답변 작성률에 따라 진행률 표시 및 애니메이션 효과
  - 답변 작성률에 따라 청크 메세지 표시

💡 작성 완료 카드
  - 10개의 답변 모두 작성완료시 표시
  - 활동 돌아보기 버튼 클릭시 미리보기 뷰로 넘어감

⚪️ 새 활동 추가(/create)

💡 활동 내용 입력받기 
   - 제목
   - 소속 단체
   - 직무 태그
   - 역량 태그
   - 한줄 설명
   - 입력차 hover시 스타일 변경

💡 저장 완료 버튼
  - 제목, 직무 태그, 역량 태그 입력시 버튼 활성화
  - 활성화된 경우 hover시 스타일 변경

💡 저장 완료시 팝업(모달)
  - 활동을 자세히 돌아볼까요? 에서 네 선택시 -> 활동 돌아보기로 이동
  - '다음에 할래요' 선택 시 홈으로 이동

💡 사진 및 파일 입력받기
  - 사진, 파일 formData로 서버에 전송 

⚪️ 개별 활동 보기(/detail/:id 및 /detail/edit/:id)

💡 헤더
  - 활동 이름 표시
  - 즐겨찾기 버튼
  - 수정 버튼
  - 삭제 버튼

💡 활동 내용 확인하기 
   - 제목
   - 활동 사진
   - 소속 단체
   - 직무 태그
   - 역량 태그
   - 한줄 설명
   - 파일 첨부
   - 활동 카드 부분 사용자 답변 정리

💡 활동 내용 수정하기 
   - 제목
   - 활동 사진
   - 소속 단체
   - 직무 태그
   - 역량 태그
   - 한줄 설명
   - 파일 첨부
   - 입력차 hover시 스타일 변경
   - 활동 카드 부분 사용자 답변 정리

💡 수정 완료 버튼
  - 사용자가 값을 수정한 후 수정 완료 가능

💡 즐겨찾기 버튼
  - 활동 즐겨찾기 등록 및 해제 기능

💡 사용자 답변 상태에 따라 4가지 다른 뷰 제공
  - 0: 작성한 질문 카드는 하나도 없고 기본 정보만 입력했을 경우
  - 1: 작성한 질문 카드가 있으나 10번까지 완성하지 않았을 경우
  - 2: 10번까지 모든 질문 카드 작성했을 경우
  - 3: 사용자가 10번까지 질문 카드를 작성한 직 후 미리보기 화면

⚪️ 메인 홈 (/home)

💡 메인 헤더
  - 홈
  - 모아보기
  - 마이페이지
  
💡 사용자 인삿말
  - 사용자 이름이 들어간 인사말
  - 활동 제안 (F5시 랜덤으로 바뀜)
  - 새 활동 추가 버튼

💡 활동 불러오기
  - 기간 선택 버튼 (년도) 
  - 활동 카드 
    ㄴ 활동 이미지. 활동 제목 , 기간, 해시태그 
    ㄴ 사용자 경험을 요약해서 보여줌.
  - 기간 선택 
  - 타임라인 숫자 비활성화

⚪️ 활동 모아보기 (/activities)

💡 활동 모아보기/즐겨찾기/작성 중인 활동 선택
  - 활동 모아보기 : 필터링 가능, 처음에는 전체 활동
  - 즐겨찾기 : 즐겨찾기 등록한 활동
  - 작성 중인 활동 : 아직 작성이 완료되지 않은 활동
  
💡 필터
  - 활동 기간 선택
  - 관련 직무 태그 선택
  - 핵심 역량 태그 선택
  - 확인 버튼 클릭 시 해당하는 활동만 조회
  
💡 활동 클릭시
  - 개별 활동 조회 페이지로 이동

⚪️ 로그인 (/)

💡 이메일 입력

💡 비밀 번호 입력

💡 로그인 
  - 로그인 성공 시 홈으로 이동
  - 실패시 경고문 출력

⚪️ 마이페이지 (/mypage/basic, /mypage/career)

💡 기본 정보 레이아웃
  
💡 이력 사항 레이아웃

⚙️ 워크 플로우

📂 프로젝트 폴더 구조

│
├── 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"

🔎 깃 컨벤션 및 코드 컨벤션

➕ Git Branch

✔ main - 개발 완료하고 최종 코드 올리는 브랜치


✔ develop - 각자 담당한 페이지 뷰 브랜치를 합쳐서 테스트 진행하는 브랜치

   - home (홈  view)

   - createActivity (새 활동 추가 view)

   - step-card (활동 돌아보기 view)

   - activity-one (개별 활동 보기 view)
   
   - my-page (마이페이지 view)
   
   - responsive (반응형 확인용 브랜치)

➕ Code Convention

• 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 Repository

sqoop Server