Worklog

🧑🏻‍💻 팀장: 김수영

• Role: Team Leader
• Position: Full-Stack
• Stack: React, Redux-Toolkit, Styled-ComponentsNode.js, Nodemailer, Express, Sequelize, MySql, MySql, Socket.io, AWS
• Github

⭐️ Contribution

Common

• Client FlowChart 작성
• WireFrame 작성

Front

Landing Page

• 랜딩 페이지 컴포넌트 제작
• 랜딩 페이지 CSS
• scroll 위치에 따라 기프티콘 수 0부터 전체수가 보이도록 인터렉션 적용
• 기부 버튼을 랜딩 페이지에 고정

Modal

• 이미지 업로드 모달 컴포넌트 제작
• Drag & Drop 기능
• 이미지와 함께 메세지 전송 가능
• 이미지가 없는 경우, 기부 버튼 비활성화

Helper Detail Page

• 이미지 슬라이드 컴포넌트 제작
• 기부하기 버튼을 클릭하면, 이미지 업로드 모달창을 이용해 Gifticon 기부 가능

DM Page

• Gifticon 기부시 DM Room 생성
• DM 페이지를 통해 채팅 가능
• DM 페이지를 통해 이미지 공유 가능
• DM 페이지 컴포넌트 제작
• DM 페이지 CSS

Gifticon Detail Page

Helper

• Gifticon 상태를 사용함으로 변경시,
• 인증 사진 업로드
• 감사 메세지 전송
• 감사 메세지 전송시, DM 페이지에서 확인 가능

Server

• Nodemailer를 이용한 이메일 인증
• S3 이미지 업로드
• Socket.io를 이용한 채팅기능 구현

Deploy

AWS 배포

• EC2 / S3 / RDS 설정
• Cloudfront 세팅
• 도메인 구매 및 인증서 발급
• 클라이언트 및 서버 HTTPS 배포

👩🏻‍💻 Tia Hwang

• Role: Team Member
• Position: Full-Stack
• Stack: React, Redux-toolkit, Styled-components, Nodejs, Sequelize, MySql
• Github

⭐️ Contribution

모든 페이지 반응형 구현

Common

• GitHub README.MD 작성
• GitHub wiki 정리
• WireFrame 최종 수정

Front

Landing Page

• 랜딩 페이지 디자인 및 애니메이션 최종 수정

Header/Footer

• 매 페이지마다 상단과 하단에 고정 위치
• state를 이용해서 로그인/로그아웃시 Header 문구 변경
• 팀 GitHub 과 Notion 링크, 개인 GitHub 링크 Footer에 추가

Loader

• 아래의 경우에 Loader 컴포넌트가 몇 초간 뜨도록 설정
• 회원가입 후 이메일 인증시
• 이메일 인증을 하지 않고 로그인 시도할 때
• Helper List 페이지 접속시
• Helper Detail 페이지 접속시
• Mypage 페이지 접속시
• Gifticon List 페이지 접속시

SignIn page

Giver

• 구글 로그인
• 카카오 로그인

Helper List Page

• Helper 카테고리 필터링 기능
• Gifticon 카테고리 필터링 기능
• 선택한 카테고리에 해당되는 Helper가 없을 경우, 안내 문구 출력
• Pagination 기능

Gifticon List Page

• Gifticon 상태 필터링 기능
• 선택한 Gifticon 상태에 해당되는 Gifticon이 없을 경우, 안내 문구 출력
• Pagination 기능
• Giver

  • 연탄 포인트에 따른, 연탄 사진과 점수 출력
  • 연탄 포인트 문구 옆의 물음표 아이콘에 마우스를 가져가거나 클릭시, 연탄 포인트에 대한 설명 문구 뜨도록 설정
  • 기부한 Gifticon이 없을 경우, Helper List 페이지로 이동하는 기부 버튼 출력
• Helper

  • 기부 받은 Gifticon이 없을 경우, 안내 문구 출력
  • 기부 받은 Gifticon이 있을 경우, 기부 받은 Gifticon 총 갯수에 대해 문구 출력

Gifticon Detail Page

• Giver

  • 기부한 Gifticon의 상태(사용함/수락함/확인중/거절됨/만료됨) 확인 가능
  • 기부한 Gifticon의 상태가 사용함인 경우,
  • Helper가 보낸 인증 사진이 있는 경우, 인증 사진 출력
  • Helper가 보낸 인증 사진이 없는 경우, noimage 이미지 출력
• Helper

  • Gifticon 상태를 사용함/수락함/거절됨/만료됨으로 변경 가능
  • Gifticon 신고시,
  • 모달창으로 상태 변경 불가에 대한 안내
  • 해당 Giver의 연탄 포인트 -1점 벌점 부여
  • Gifticon 상태를 신고됨/거절됨/만료됨으로 변경시, Gifticon 이미지가 noaccess 이미지로 변경됨
  • Gifticon 상태를 거절됨으로 변경시,
  • 모달창으로 상태 변경 불가에 대한 안내
  • 거절 메세지 전송 기능
  • Gifticon 상태를 사용함으로 변경시, 최대 5개(5점)까지 해당 Giver에게 연탄 포인트 부여

Server

Nodemailer

• HTML을 이용해 인증 이메일 템플릿 설정

SignIn

• 구글 로그인
• 카카오 로그인

Helper List

• Helper 목록
• 기프티콘 필터링
• Pagination

Gifticon List

• 기프티콘 정보 불러오기
• 기프티콘 필터링
• Pagination

Gifticon Detail

• 기프티콘 상태 변경
• 연탄 포인트 저장
• 기프티콘을 종류별로 필터링해서 해당 기프티콘이 필요한 Helper에게 기프티콘을 기부할 수 있어요.
• Giver는 기프티콘을 기부하며 Helper에게 감사메세지를 함께 보낼 수 있어요.
• Helper는 취약계층 지원활동에 기부받은 기프티콘을 사용할 수 있어요.
• 사용할 수 없는 기프티콘을 기부 받은 Helper는 해당 기프티콘을 신고할 수 있어요.
• 기프티콘을 사용한 후 Helper는 Giver에게 사용 인증 사진과 감사메세지를 보낼 수 있어요.

🧑🏻‍💻 Jinhyeok Heo

• Role: Team Member
• Position: Front-End
• Stack:
• Github

⭐️ Contribution

Common

• WireFrame 작성

Front

Modal

• 재사용이 가능한 Modal 컴포넌트 제작

Router

• 로그인 상태에 따라 유저가 로그인이 필요한 페이지로 직접 접근 시 랜딩페이지 이동

SignIn page

• Giver
• 일반 로그인
• 게스트 로그인
• Helper
• 일반 로그인
• 게스트 로그인

SignUp page

• 로그인 상태에 따라 유저가 로그인이 필요한 페이지로 직접 접근 시 랜딩페이지 이동

• 소셜로그인
  • 구글로그인
  • 카카오로그인

Server

Database

Deploy

🧑🏻‍💻 Homin Kim

• Role: Team Member
• Position: Back-End
• Stack: Node.js, Sequelize, JWT
• Github

⭐️ Contribution

Common

• WireFrame 작성
• API 문서 작성

Back

Server

• 회원가입
  • giver
  • helper
• 로그인
  • giver
  • helper
  • 게스트
• 마이페이지
  • giver
  • helper
• helper detail 페이지
  • 지원 취약계층 조회
  • 지원받고 싶은 기프티콘 조회
  • 갤러리 사진 조회

Database

• 모델 생성
• 로컬 환경에서 테스트할 더미 데이터 생성