PORTFOLIO

📋 목차

• 📚 개요

• 🔧 기술 스택

• 📜 ERD(Entity-Relation Diagram)

• 👪 팀원 역할 소개

• 📑 기능 구현 시연 영상

  • 홈화면
  • 1. 로그인
    • 1-1. 회원가입
    • 1-2. 아이디 찾기
    • 1-3. 비밀번호 찾기
  • 2. 클래스 등록
    • 2-1. 클래스 등록
    • 2-2. 클래스 승인(관리자)
    • 2-3. 클래스 상세정보 조회
  • 3. 클래스 관리
    • 3-1. 클래스 조회
    • 3-2. 문의내역 조회
  • 4. 일정 및 신청관리
    • 4-1. 일정관리
    • 4-2. 신청관리
  • 5. 클래스 검색 및 조회
    • 5-1. 클래스검색(지역, 카테고리, 날짜, 난이도, 가격)
    • 5-2. 클래스검색(지도)
  • 6. 클래스 신청 및 결제
    • 6-1. 클래스 신청(장바구니)
    • 6-2. 클래스 신청(결제)
  • 7. 신청/리뷰내역 조회
    • 7-1. 신청 내역 상세보기
    • 7-2. 리뷰 작성
    • 7-3. 리뷰 추천
  • 8. 커뮤니티(게시글 및 댓글 작성)
  • 9. 신청/문의 알림
    • 9-1. 클래스 신청 알림(판매자)
    • 9-2. 클래스 문의 알림(판매자)
    • 9-3. 클래스 문의 답변완료 알림(구매자)

• 💡 결론

• 🔎 보완할점

• 🔖 배포
  

📚 개요

프로젝트 : 원데이클래스 매칭 플랫폼

기획 및 제작 : 스페셜데이

분류 : 팀 프로젝트

제작 기간 : 2023.05.15 ~ 2023.06.13

프로젝트 주제 : 바쁜 일상속에서 자신에게 특별한 하루를 선물해줄 수 있는 원데이클래스 웹 애플리케이션 제작

🔧 기술 스택

데이터베이스

백엔드

프론트엔드

배포

협업도구

📜 ERD

전체 ERD

클래스 등록

일정 등록 및 신청

신청 및 리뷰 내역

커뮤니티

클래스 문의

신청/문의 알림

👪 팀원 역할 소개

● 서명호

      - Back-End : 로그인, 로그아웃, 클래스 검색(목록/지도), 신청/문의 알림, 이메일 인증, 클래스 신청&결제, 클래스 문의 답변, 계정 관리(정보 수정, 비밀번호 변경, 회원 탈퇴)

      - Front-End : 헤더, 클래스 검색 페이지, 클래스 상세 페이지

● 김은정

      - Back-End : 클래스 등록/수정/삭제, 내 클래스 조회, 클래스 활성/비활성, 문의 접수 내역 조회

      - Front-End : 홈, 클래스 등록 페이지, 클래스 관리 페이지

● 이성희

      - Back-End : 클래스 일정 등록 및 조회, 일정 수정 및 삭제, 클래스 신청 인원 관리, 클래스 관리자 승인

      - Front-End : 마이페이지, 일정 관리 페이지, 신청 관리 페이지, 관리자 페이지

● 박성주

      - Back-End : 회원가입, 아이디 찾기, 커뮤니티, 댓글

      - Front-end : 회원가입 페이지, 로그인 페이지, 아이디 찾기 모달, 커뮤니티

● 천현빈

      - Back-End : 장바구니 추가/조회/삭제, 클래스 신청

      - Front-End : 장바구니 페이지, 결제 페이지, 결제 완료 페이지

● 이재호

      - Back-End : 신청 내역 조회, 리뷰 작성, 리뷰 내역 조회, 리뷰 추천

      - Front-End : 마이페이지 신청 및 리뷰 내역 상세 정보 모달

📑 기능 구현 시연 영상

홈 화면

1. 로그인

  1-1. 회원가입

• 입력한 아이디와 비밀번호, 연락처와 같은 개인정보를 DB에 insert하여 회원가입 기능 구현
• MemberController로 DB에 저장
• 중복된 아이디, 탈퇴한 아이디에 대해서는 사용불가 알림이 뜨도록 유효성 검사 추가

  1-2. 아이디 찾기

• member 테이블에 저장되어 있는 개인정보와 모두 일치하는 id를 찾아서 조회
• 아이디 찾기로 아이디를 조회에 성공했을 경우에만 비밀번호 재설정 버튼 활성화

  1-3. 비밀번호 변경

• SimpleMailMessage 클래스를 이용하여 메일 내용 설정
• JavaMailSender를 이용하여 Gmail로 고객에게 인증번호 전송
• 전송된 인증번호를 입력하여 인증확인

2. 클래스 등록

  2-1. 클래스 등록

• KakaoLocal API를 이용하여 주소 기반 위도, 경도 값을 반환(Map)
• Quill editor를 이용하여 강사소개, 클래스 내용, 커리큘럼을 DB에 등록
• input태그에 multifile 옵션을 추가, 이미지 여러장 등록 가능

  2-2. 클래스 승인(관리자)

• 등록된 관리자 정보로 로그인, 아이디와 비밀번호 정보가 일치할 경우 관리자만 접근할 수 있는 서비스 페이지로 이동
• 전체 클래스 관리 목록에서 신규 클래스 등록 정보를 확인 후 승인여부 값 업데이트

  2-3. 클래스 상세정보 조회

• 등록한 클래스의 상세정보를 조회할 수 있는 페이지 (리뷰추천, 문의하기, 신청하기 기능으로 구성)
• 달력에서 참여가능한 날짜를 확인한 후 시간과 신청할 인원수를 선택

3. 클래스 관리(판매자)

  3-1. 클래스 조회

• 등록한 클래스를 관리, 수정, 삭제, 조회, 비활성화/활성화 할 수 있는 페이지
• 비활성화 시 클래스 조회, 관리, 수정, 삭제가 불가능

  3-2. 문의내역 조회

• 문의 내역을 조회하는 페이지
• 문의 내역 답변을 작성,수정할 수 있는 페이지
• 답변완료/답변대기 상태에 따른 조회 기능

4. 일정 및 신청관리(판매자)

  4-1. 일정관리

• 일정등록 필수정보(날짜, 시간, 인원) 유효성 검사, 난이도변경에 따른 추가 금액 입력란 활성화 및 할인율 설정, 총 금액확인 기능 구현
• Fullcalendar 라이브러리를 이용한 달력 구현, 등록한 클래스 일정 정보를 달력에서 월별 조회
• 사이드바에서 Rest Api를 활용하여 전체일정 조회, 특정 일정 수정 및 삭제, 전체삭제 기능 구현

  4-2. 신청관리

• 등록한 일정별 신청인원 조회
• 신청자 정보 확인, 클래스 종료 시 신청 처리상태 결제완료에서 참여완료로 업데이트(승인)

5. 클래스 검색/조회

  5-1. 클래스검색(지역, 카테고리, 날짜, 난이도, 가격)

• 검색 옵션 ( 지역 분류, 클래스 분류, 날짜, 난이도, 가격 ) 선택 후, 해당 조건에 맞는 클래스 목록 검색
• Pagination을 이용하여 조건으로 검색된 클래스의 목록을 조회

  5-2. 클래스검색(지도)

• 지역 및 날짜 선택 시, 지도 범위 내에 해당 조건에 맞는 클래스 장소 마커 표시 ( 카카오 맵 API 활용 → 오버레이 활용, 각 클래스 대표 이미지를 마커로 사용, 복수 마커 )

6. 클래스 신청 및 결제

  6-1. 클래스 신청(장바구니)

• 주문한 클래스를 장바구니에 저장했을 때 장바구니 페이지에서 주문한 목록을 출력
• checkbox로 체크되어있는 목록은 신청인원과 자동으로 계산이 되어 결제 금액에 총 금액이 출력
• 선택된 checkbox 값을 통하여 BasketController를 통하여 삭제 기능 구현을 구현

  6-2. 클래스 신청(결제)

• import.payment API를 이용하여 선택한 클래스를 실제로 결제가 가능 하도록 구현

7. 신청/리뷰내역 조회

  7-1. 신청 내역 조회(상세보기)

• Pagination을 이용하여 내가 신청한 클래스를 결제완료, 결제취소, 참여완료에 따라 조회
• 결제상태에 따라 상세보기시 나오는 결제내역 변경(신청취소시 취소정보 표시)

  7-2. 리뷰 작성

• 참여완료 상태일때만 리뷰등록 버튼 활성화
• 평점 1~5 입력 (radio 타입 사용), 내용 입력(Quill editor 사용), 이미지 첨부(개수 제한) 후 DB에 저장
• Pagination을 이용하여 내가 작성한 리뷰 내역 전체,날짜순 조회

  7-3. 리뷰 추천

• 클래스 상세페이지에서 리뷰조회 가능
• Rest Api를 활용하여 추천해요 버튼 클릭시 해당하는 리뷰 조회수 증가

8. 커뮤니티(게시글 및 댓글 작성)

• 글에 목적에 따른 글 분류를 선택하여 글작성 + 수정,삭제 기능 구현
• Pagination을 이용하여 전체 커뮤니티 글 조회
• 로그인이 되었을 때만 댓글 작성가능 (로그인이 되어있지 않은 상태에서 댓글입력시 로그인화면으로 이동)

9. 신청/문의 알림

  9-1. 클래스 신청 알림(판매자)

• 클래스 신청 알림을 선택하여 신청관리 페이지로 이동

  9-2. 클래스 문의 알림(판매자)

• 내 클래스 문의 내역 확인 및 처리 상태 확인
• 답변 대기 상태 시, 문의 답변 가능
• 문의 답변(Modal)

  9-3. 클래스 문의 답변완료 알림(구매자)

• 클래스 문의 알림을 선택하여 마이페이지의 문의내역 페이지로 이동
• 문의 제목 선택하여 답변 내용 확인(Modal)

💡 결론

웹 개발 프로젝트를 진행하면서 주제 선정, ERD 설계, 기능 정의, 프로토타입 설정, 사전 조사의 중요성을 알게 되었습니다. 이러한 단계를 통해 프로젝트를 시작하기 전 팀원들과 함께 체계적인 사전 설계를 하였고, 그 결과 프로젝트의 원활한 진행과 프로젝트의 목표에 부합하는 사이트를 제작할 수 있었습니다.

프로젝트에서 백엔드와 프론트엔드 역할을 구분하지 않고, 두 가지 역할을 모두 수행하였으며 프로젝트의 요구사항과 개발 환경에 맞게 MyBatis와 JPA를 활용하여 데이터베이스와의 상호작용을 구현했습니다. 또한 HTML5, CSS, JavaScript를 활용하여 화면을 구성하였고 이를 통해 웹 사이트 전반적인 개발 과정을 이해할 수 있었으며 백엔드와 프론트엔드의 중요성을 인지했습니다.

프로젝트의 협업을 위해 Notion이나 GitHub와 같은 관리도구를 적극적으로 활용하여 팀원들과의 의사소통, 작업 일정 관리, 코드 버전 관리 등을 효과적으로 진행했습니다. 또한, Kakao Maps API, INIAPI, Fullcalendar 라이브러리 등을 활용하여 웹 사이트에 다양한 기능을 추가하고 사용자의 편의성을 향상시키기 위해 노력했습니다.

마지막으로, 서비스 사용자들이 편리하고 유용한 사이트를 경험할 수 있도록 서비스 최적화를 위해 효과적인 조회 기능, 개인화 기능 등 여러 기술적 측면을 고민하며 개발자로서의 역량을 기를 수 있었습니다.

🔎 보완할 점

• DTO/Entity 설계시 네이밍 규칙이 미흡했던 점
• 반응형 웹 구현이 미흡했던 점

🔖 배포

Specialday Web Page

• AWS EC2에 배포