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

• 기프티콘 상태 변경
• 기프티콘 신고
• 연탄 포인트 저장

🧑🏻‍💻 Jinhyeok Heo

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

⭐️ Contribution

Common

• WireFrame 작성

Front

Modal

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

Router

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

SignIn page

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

SignUp page

• Giver
• 유저 입력 정보 유효성 검사
• 회원 정보 입력 후 유효성 검사 미통과 항목에 관하여 입력창 아래 경고 메세지 출력
• Helper
• 유저 입력 정보 유효성 검사
• 수집 정보에 따른 렌더링 화면 변경
• 회원 정보 수집 단계에 따른 진행 현황 보기 기능
• 우편 번호 및 주소 검색 기능
• 회원 정보 입력 후 유효성 검사 미통과 항목에 관하여 입력창 아래 경고 메세지 출력

Mypage

• Giver
• 유저 정보 수정 기능 및 항목별 유효성 검사
• 프로필 사진 수정 기능
• Helper
• 유저 정보 수정 기능 및 항목별 유효성 검사
• 갤러리 및 프로필 사진 수정 기능

Helper Detail Page

• 헬퍼 회원 정보 노출
• 헬퍼 활동 지역에 따른 지도 및 마커 표시 기능

JWT

• 토큰 만료 시 자동 로그아웃

Server

JWT

• Access Token 유효성 검사
• Access Token 만료시
• Refresh Token이 유효할 시 Access Token을 재발급
• Refresh Token이 만료될 시 Access Token을 발급하지 않고 발급 되어있는 Refresh Token을 삭제

🧑🏻‍💻 Homin Kim

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

⭐️ Contribution

Common

• WireFrame 작성
• API 문서 작성

Server

SignIn

• 일반 로그인
• 클라이언트에서 보내준 요청 본문과 데이터베이스 상에 있는 데이터와 일치할 시 로그인 승인
• 게스트 로그인
• 게스트 로그인 버튼 클릭시 데이터베이스에 게스트 고유 데이터를 즉시 생성
• 로그아웃 시 데이터 삭제

SignUp

• 데이터베이스에서 이메일 중복검사를 실시하여 중복되지 않으면 새로운 회원정보를 생성

Mypage

• Giver
• 회원정보 조회
• 토큰의 유효성 검사
• 유효한 토큰이면 해당하는 회원 정보를 클라이언트에 응답으로 전달
• 회원정보 수정
• 토큰의 유효성 검사
• 유효한 토큰이면 클라이언트 요청한 부분의 데이터를 수정
• Helper
• 회원정보 조회
• 토큰의 유효성 검사
• 유효한 토큰이면 해당하는 회원 정보를 클라이언트에 응답으로 전달
• 회원정보 수정
• 토큰의 유효성 검사
• 유효한 토큰이면 클라이언트 요청한 부분의 데이터를 수정
• 회원 갤러리 사진 추가
• 갤러리 사진을 url로 변환하여 저장
• 클라이언트에 url 전달
• 회원 갤러리 사진 삭제
• 삭제를 원하는 갤러리 사진의 url을 전달받음
• 해당 url을 조회한 다음 삭제

Helper Detail Page

• Helper가 지원하는 취약 계층 조회
• Helper가 지원받고 싶은 키프티콘 카테고리 조회
• Helper가 마이페이지에 올린 갤러리 이미지 조회

Database

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