💻 국비교육 FullStack 웹 개발자 과정 / Final Project 💻

🖇 개요

약 6달 간의 교육과정이 끝을 향해가고, 7주 동안 진행될 마지막 프로젝트가 주어졌다. 파이널 프로젝트는 총 6명의 구성으로 진행을 하였다. 팀이 구성되고 이전 프로젝트에 함께 하셨던 팀원분이 있었는데, 참여도가 많이 낮았던 분이라 걱정이 있었다..... 하지만 난 최고니깐!

Site / Github

📆 개발기간

총 개발기간 6주

기간	진행
1주차	기획 및 주제선정
2주차	메뉴구성 및 DB설계
3주차	화면 디자인 및 구현
4주차 ~ 5주차	기능구현 및 테스트
6주차	테스트 및 디버깅

🌠 개발환경

Front-end : HTML5 SASS JAVASCRIPT REACT JQUERY
Back-end : JAVA 17 ORACLE 18XE SPRING BOOT JSP Mybatis Tomcat 9.0
Common : Git Visual Studio Code IntelliJ IDEA

🔐 키워드 선택

주제를 선정하기 전, 우선 사회적으로 화두되고있는 키워드를 먼저 생각을 하였다.

환경, 1인 가구, 코로나

다양한 키워드들이 나왔지만 크게 자리를 잡았던 키워드는 이렇게 3가지로 있었다. 환경과 코로나는 키워드는 괜찮지만 이걸 어떻게 확장할 지가 문제라서 제외되었고, 최종적으로 1인 가구를 타겟으로 방향성을 잡기로 했다.

브랜드명은 Launer로 결정되었다. 빨래의 Laundry와 Runner를 합쳐 만들었다. 브랜드 로고는 내가 제작했다.

💿 주제선정

1인 가구 라는 키워드를 중심으로 주제를 확장할 때, 배달대행, SNS, 모임 사이트~~ 등 나왔지만 선생님께서 식상한 주제를 하지말라고 하셔서... 오래 생각했다. 그러다 팀원 한 분이 비대면 세탁서비스를 얘기하셨는데, 팀원 전체가 거기에 딱 꽂혔다.

꽂힌 이유는 서비스 흐름을 우리가 직접 구성할 수 있고, 배운 내용을 토대로 기능 확장이 가능할 거라 생각했기 때문이다. 우리가 학원에서 배운 내용은 일반적인 쇼핑몰을 토대로 CRUD가 다수였다. 하지만 비대면 세탁서비스는 사용자/배송기사/관리자 이렇게 총 3파트로 나눠 흐름을 구성하고, 세부기능을 다양하게 확장할 수 있을 거 같았다.

⚙️ 기능 세분화

대상	기능
공통	회원가입, 로그인, 내 정보, 내 정보수정, 게시판
사용자	서비스 신청, 주문내역 조회, 포인트 조회
배송기사	전체 (수거/배송) 리스트, 내 (수거/배송) 리스트, 내 수입 조회
관리자	지점 관리, 주문 관리, 사용자 관리, 서비스 통계

우선 큰 기능들만 적어뒀다. 이렇게보면 기본적인 CRUD만 있을 거 같지만... 세부적으로 기능을 다양하게 넣고 꾸몄다.

서비스의 전체적인 흐름은 서비스 신청 => 수거 => 수거완료 => 세탁완료 후 배송대기 => 배송 => 배송완료

💽 DB 설계

DB 설계는 본인과 팀원 정지효씨와 함께 틀을 잡고, 나머지 팀원분들이 보완하는 형식으로 구성하였다.

해당 DB를 토대로 개발하는 도중에 몇몇 허점을 발견했다...🥲 포인트/사용자 테이블의 포인트 컬럼이 중첩되었고, 사용자/배송기사 테이블을 따로 분리할 필요가 없었다..!!

😇 맡은 기능

• 메뉴구성
• DB 설계(모델링, 테이블 작성, 공용 서버 구축)
• 사용자 (메인화면, 서비스 신청 로직 구축)
• 배송기사 (수거/배송 리스트, 내 할 일 리스트, 내 수입)
• 게시판 (전체)
• 기타 다른 모든 페이지 관여 및 조언
• 전체 흐름에 대한 Interceptor 관리
• 페이지 전체의 디자인 및 로직 관여(도움)
• API 이용
  - Naver REST API 네이버 로그인
  - Kakao MAPS API 배송기사 : 전체적으로 사용 / 주소 좌표변환 등
  - Apache POI Library 배송기사 : 내 수입 (엑셀 다운로드 구현)
  - React Quill 텍스트 에디터 게시판 : 글쓰기, 글수정
  
  

이번 프로젝트에서는 새로운 시도를 많이하려고 했다. 학원에서 수업 과정중 불편하다고 생각했던 것과 벤치마킹을 하면서 떠오른 아이디어를 구현하고싶었고, 프로젝트 진행 막바지에 학원에서 React를 배우게 되어 바로 적용해 보고싶었다.

프론트 기술과 백엔드 기술을 적절히 잘 섞어 유연한 페이지를 구성할 수 있었다..!

👨‍🏫 스토리보드 및 구현설명

페이지에 구현한 애니메이션은 사이트에서 확인 부탁드립니다!
Link : Launer

※ 이미지 내 설명 외, 기능에 대한 상세설명을 이미지 하단에 적어두었습니다.

1. 사용자

메인화면

• 로그인 상태, 계정 정보에 따른 동적 Header

서비스신청 로직구상

• 해당 내용의 대한 페이지는 직접 제작하지 않고, 로직구상을 팀원 한서현씨와 함께 구상하였습니다.
  관련 링크 관련 링크 관련 링크 관련 링크 관련 링크

로그인

• Naver REST API를 활용한 네이버 로그인

2. 배송기사

수거, 배송목록

• 지도
  • KakaoMapsAPI 사용
  • 탭에 해당하는 리스트 정보를 마커로 출력 Ajax
  • 마커 클릭 시, 해당 리스트 위치로 스크롤

• 리스트
  • 무한스크롤 / 탭 전환 구현 Ajax
  • 주문상태가 수거전(수거 탭), 배송대기(배송 탭)인 주문리스트만 출력
  • 수거/배송하기 클릭 시, 3초 카운트다운 후 주문상태 update Ajax

내 할 일 리스트

• 지도
  • Kakao MAPS API를 활용하여 리스트 항목 클릭 시, 해당 위치를 마커로 표시

• 리스트
  • 담당하고있는 수거/배송 리스트 출력
  • 리스트에 대한 정보
  • 리스트 항목 취소/완료 버튼 (주문상태 update)

내 수입

• 정보
  • 기간 설정에 따른 총 건수, 총 수입 Ajax

• 리스트
  • 탭 설정에 맞는 리스트 출력 Ajax
  • 페이징 처리 Ajax

• Apache POI Library를 사용한 엑셀 다운로드

3. 게시판

• 게시글
  • 접속한 유저의 정보
  • 동적 게시판 : 하나의 폼으로 카테고리 구분 및 사용자 유형별 글쓰기 권한
  • 카테고리에 맞는 게시글 리스트 출력
  • 쓰기 버튼 클릭 시, 글 쓰기 컴포넌트 출력 React Quill
  • 에디터 내 사진 등록 Ajax
  • 다중 파일 업로드 Ajax
    • 게시글 리스트 제목 클릭 시, 게시글 상세보기 팝업 React-async
  • 본인이 쓴 글 또는 관리자일 경우, 글 수정/삭제 가능 React-async
    • 페이징/검색 처리 React-async

• 댓글
  • 해당 게시글에 등록된 댓글 리스트 React-async
  • 댓글 등록 및 계층형 댓글 등록 React-async
  • 댓글 삭제

이외에도 전체 인터셉터 구성과 디렉토리 관리(커스텀 태그, webpack, 등등...)을 하였고, 팀원분들을 엄청 도와드렸다!!