WorkLog

팀원 : 권상현

• 
• Position: Front-End
• Stack: JavaScript, React, React-router, React-hooks, Styled-Components, Multer, Axios, AWS, Git

Contributions

• 스타일 theme 활용 템플릿 작성

  • 글로벌 스타일 컴포넌트 작성
  • 테마 별 스타일 작성
  • 각 페이지 기본 스타일 작성
  • 데스크탑 / 테블릿 / 모바일로 반응형 구분 설정

• 랜딩페이지 레이아웃 / 반응형 구현

  • 네비게이션 바 메뉴 드롭다운 기능 구현
  • 모바일 전환 시 햄버거 메뉴로 전환

• 모달창 구현

  • 로그인 / 회원가입 / QNA 질문하기 레이아웃

• QNA 레이아웃 / 반응형 구현

  • QNA 리스트 페이지 구성
  • QNA 상세페이지 구성
  • 의사만 댓글 달 수 있도록 구현
  • 비 로그인 시 리뷰 / QNA 블러 처리

• useRef를 이용한 QNA CRUD 구현

  • QNA 작성 / 삭제
  • 댓글 작성 / 수정 / 삭제

• 이미지 업로드(multer 라이브러리)

  • 프로필 수정 시 이전 이미지 삭제 구현

• 스크롤 탑 구현

  • 페이지 이동 시 스크롤이 항상 top이 되도록 구현

• 로딩 인디케이터 구현

• QNA 리스트 페이지네이션 구현

팀장 : 김경훈

• 
• Position: Back-End
• Stack: React, EmailJS, JavaScript, Node.js, Express, Sequelize, MySQL, Multer, Axios, Git, JWT, EmailJS, AWS-EC2, AWS-RDS, AWS-S3, AWS-Loadbalancer, AWS-Route53, AWS-CloudFront

Contributions

• SR
  • 프로젝트 아이디어 기획
  • DB 설계
  • Sequelize를 통한 DB구축
  • API 문서 작성
• 백엔드
  • express를 이용해 서버 구축
  • 일반유저 및 의사 회원가입
  • 의사 회원 관리자가 회원가입 승낙 시 가입 완료 메일 보내주기
  • 일반유저 및 의사 회원정보(프로필 사진, 닉네임, 비밀번호)수정
  • 일반 유저 및 의사 정보요청
  • 사용자 프로필 수정 시 이전 이미지 파일 삭제 시키기
  • 리뷰 삭제 시 이미지 파일도 같이 삭제하기
• 프론트 엔드
  • QnA 페이지 진료과목 카테고리 버튼 클릭 시 해당 과목으로 질문 필터링 해주기
  • QnA 질문 모달 창에서 해시태그 입력 후 질문 등록 시 해당 질문 카드에 해시태그 보여주기
  • 질문 카드에 의사 답글 갯수 보여주기
  • 카카오 지도 API 받아와서 마커된 장소의 정보 보여주기
  • 사용자의 위도, 경도값을 받아와서 현재 위치기반의 장소 검색하기
• 배포
  • EC2 인스턴스 생성
  • 로드밸런서를 이용하여 https 서버 배포
  • S3 버킷 생성 정적 웹페이지 호스팅
  • CloudFront 배포 생성
  • RDS DB 서버 구축

팀원 : 김장겸

• 
• Position: Front-End
• Stack: JavaScript, React, CSS, HTML, React-router, React-hooks, Styled-Components, Axios, AWS, Git, Adobe Photoshop

Contributions

• SR
  • 프로젝트 아이디어 기획
  • API 문서 작성
  • 와이어프레임
  • 프로토타입
• 템플릿 작성
  • 글로벌 스타일 컴포넌트
  • 페이지 및 컴포넌트 별 스타일 작성
  • 웹, 모바일 반응형 구분
• 일반, 의사 마이페이지
  • 일반 유저 마이페이지 구현
  • 유저 리뷰, Q&A 확인 구현
  • 의사 마이페이지 구현
  • 의사 Q&A 답변 확인 구현
• 관리자 페이지
  • 관리자 페이지 구현
• Footer
  • Footer 컴포넌트 구현
  • 로고(Home) 및 개인(개인 Github) 연결
• 지도 API
  • 사용자 위치 정보 (위치기반)
  • 위치정보 기반으로 (사용자)근처 병원 자동 검색
  • 병원 목록화 및 병원 상세페이지 구현
  • 리뷰 작성 구현
• 페이지 UX/UI css 적용
  • 로고, 컬러 제작
  • 일러스트 이미지 포토샵 작업

팀원 : 오예림

• 
• Position: Back-End
• Stack: ReactJS, HTML, CSS, Nodejs, Express, Mysql, JWT, AWS, React, Axios, Sequelize, Git

Contributions

• 공동작업

  • 프로젝트 아이디어 기획
  • API 문서 작성
  • DB 스키마 작성
  • 시스템 아키텍처 작성
  • Sequelize를 이용하여 DB 구축
  • flow chart 작성
  • 와이어프레임 및 프로토타입 설계
  • 클라이언트 배포
  • 서버 배포

• 로그인 기능

  • REST API 카카오 소셜 로그인 구현
    • 앱키 중 하나인 REST API키를 이용하여 카카오 인증서버로부터 인가코드, 토큰을 받아 카카오 소셜로그인 구현
  • 일반 유저, 의사, 관리자 로그인 구현

• 로그아웃 기능

  • 카카오 소셜 로그아웃
    • 앱키중 하나인 Admin 키를 이용하여 카카오 인증서버에 Axios POST요청을 보냄으로써 로그아웃 구현
  • 일반 유저, 의사, 관리자 로그아웃 구현

• Review 페이지

  • Review CRUD 구현
  • 병원 클릭 시, 병원이름을 같이 서버에 보내어 해당 병원의 리뷰만 Sequelize의 where 조건문을 이용하여 보여지도록 구현
  • Sequelize의 include 속성을 이용하여 1:N관계인 users-reviews 테이블을 join한 후, 리뷰에 해당되는 유저의 닉네임도 같이 보여지도록 구현
  • 관리자 로그인 시, 모든 리뷰 삭제가능하도록 구현

• 의사 마이페이지

  • useEffect를 사용하여 의사마이페이지 랜딩 시, 리뷰, 질문을 Axios를 이용해 서버에 요청.
    • Sequelize의 where조건문을 이용하여 전체 답변 중 의사유저가 작성한 내용만 필터링하여 나타나도록 구현
  • 상위 컴포넌트로부터 props로 받은 유저정보를 회원정보란에 보이도록 구현
  • 본인이 작성한 답변 삭제 가능하도록 구현

• 일반유저 마이페이지

  • useEffect를 사용하여 마이페이지 랜딩 시, 리뷰, 질문을 Axios를 이용해 서버에 요청.
    • Sequelize의 where조건문을 이용하여 전체 리뷰 및 질문 중 유저가 작성한 내용만 필터링하여 나타나도록 구현
  • 상위 컴포넌트로부터 props로 받은 유저정보를 회원정보란에 보이도록 구현
  • 카카오 소셜로그인 유저의 사용자정보(이름, 이메일)를 요청하여 회원정보란에 보이도록 구현
  • 본인이 작성한 질문을 삭제할 경우, 해당 답변도 같이 삭제되도록 구현

• Q&A 페이지

  • 질문 Create, Read, Delete 구현
  • 답변 Create, Read, Update, Delete 구현
  • Sequelize의 order 속성을 이용하여 가장 최근에 작성한 질문이 가장 위에 보이도록 구현
  • Sequelize의 include 속성을 이용하여 1:N관계의 테이블을 join한 후, 질문에 해당되는 유저의 프로필사진, 닉네임도 같이 보이도록 구현. 답변에 해당되는 의사선생님의 프로필사진, 이름 또한 같이 보여지도록 구현
  • 관리자 로그인 시, 모든 질문 / 답변 삭제할 수 있도록 기능 구현
  • 질문 작성 후, 회원을 탈퇴할 경우 질문은 유지되지만 ‘탈퇴한 유저’로 이름이 변경되도록 구현