목차
1. 프로젝트 기간
2. 화면 이미지
2.1 로그인/회원가입
2.2 시터 회원
2.3 일반 돌봄
2.4 부모 회원
2.5 관리자
2.6 공지사항
2.7 기타
1. 프로젝트 기간
- 전체 기간: 25.03.24. ~ 25.04.25. (6주)
- 상세 타임라인
- (~25.03.25.) 프로젝트 주제 선정
- (~25.03.28.) 프로젝트 브랜드명 결정, 요구사항 정의서 작성
- (~25.03.31.) 기능 동작 정의 및 흐름 명세화
- (~25.04.02.) 순서도, 화면 레이아웃 제작
- (~25.04.05.) DB 논리/물리 설계, 정규화
- (25.04.09.) Git&GitHub 도입
- (~25.04.10.) 세부 정책 수정 및 기능 구현 범위 재설정, HTML, CSS 기반 화면 목업 제작
- (25.04.16.) Maven 도입
- (~25.04.17.) MapperInterface, SQLMapper, JavaBean, 더미데이터 작성, 기존 DB 구조 일부 변경
- (~25.04.22.) WebPage 동적 기능 구현
- (~25.04.24.) 기능 테스트 및 피드백, 에러 수정, 발표 준비
- (25.04.25.) 프로젝트 발표
2. 화면 이미지
실제 발표는 시연(라이브) 위주로 진행되었지만, 항상 시연을 할 수는 없기 때문에 구현한 대부분의 페이지를 캡쳐하여 아래와 같이 페이지별 이미지로 담아냈다. 추가로, 내가 담당한 페이지와 기능의 경우 하이라이트 표시와 함께 간단한 설명(What I did)을 덧붙였다.
2.1 로그인/회원가입
2.1.0 로그인 페이지(login.jsp)
2.1.1 회원가입 유형 선택(Member.jsp)
2.1.2 부모 회원 가입(ParentInsertForm.jsp)
2.1.3 시터 회원 가입(SitterInsertForm.jsp)
What I did
- 시터 아이디 중복 검사 기능 구현 (팀원 작성 코드 수정)
- 시터 회원가입 요청 액션 처리 구현 (팀원 작성 코드 수정)
2.2 시터 회원
2.2.0 시터 회원 메인 페이지(emgMain.jsp)
시터 회원이 회원가입 신청 후 관리자로부터 승인받아 로그인 시 마주하는 웹 페이지이다. 기본적으로 긴급돌봄에 관련된 내용들이 주를 이룬다. 현재 긴급 돌봄 매칭 서비스의 경우, 메인 기능이라고 할 수 있는 일반 돌봄을 마무리 짓고 확장하자는 의견에 따라 기능 구현을 중단한 상태이다.
What I did
- 시터 메인 페이지의 정적 페이지 구현
- 시터 로그인 시 세션에 담긴 속성값을 기반으로 시터 이름, 시터 헤더 출력
2.2.1 시터 회원 마이 페이지(SitterinfoList.jsp)
2.2.2 시터 근무 등록(genRegInsertForm.jsp)
2.2.3 시터 근무 등록 내역 확인(GenRegList.jsp)
2.2.4 시터 돌봄 제공 내역 확인(SitterGenReqAnsweredList.jsp)
2.2.5 시터 돌봄 완료 내역 확인(CareCompleteList.jsp)
2.2.6 시터 등급 확인(GradesCheck.jsp)
2.3. 일반 돌봄
2.3.0 부모 회원 메인 페이지(genMain.jsp)
부모 회원이 회원가입 신청 후 로그인 시 마주하는 웹 페이지이다. 기본적으로 일반돌봄에 관련된 내용들이 주를 이룬다.
What I did
- 부모 메인 페이지의 정적 페이지 구현
- 부모 로그인 시 세션에 담긴 속성값을 기반으로 부모 헤더, 등록 아이(들) 이름 출력
- 1차 필터 설정 시 돌봄 희망 날짜 선택 제한 기능 구현 → 일반 돌봄은 오늘로부터 4일 후부터 신청 가능, 신청일로부터 최대 30일간 이용 가능
- Javascript, jQuery 활용
- 1차 필터 설정 시 돌봄 희망 시작일 자동 변경 기능 구현 → 돌봄 희망 시작일(ex.2025-05-30)보다 이른 날짜(ex.2025-05-21)를 종료일로 선택 시, 돌봄 희망 시작일이 종료일과 동일한 날짜(ex.2025-05-21)로 자동 변경
- Javascript, jQuery 활용
- 1차 필터 설정 시 시간에 따른 시간대 표기 분기 출력 구현 → 8~12시는 "오전", 13~19시는 "오후"로 표기
- JSTL의 core 태그 중 <c:forEach> 활용
- 1차 필터 설정 시 돌봄 희망 시간 제한 기능 구현 → 1시간 미만, 8시간 초과 신청 시 신청 제한
- Javascript, jQuery 활용
- 1차 필터 관련 스크립트를 별도의 Javascript 파일(genFilter.js)로 분리하여 관리
2.3.1 일반 돌봄 1차/2차 필터 결과(genSearchResult.jsp)
1차 필터를 기반으로 검색된 (부모가 돌봄 신청 가능한) 시터의 일반 돌봄 근무 등록 내역 리스트이다. 위 페이지에서 "검색결과(N)"에 해당하는 하위영역은 별도 페이지에 해당하므로, 그에 대한 내용은 『 2.3.2 일반 돌봄 검색 결과 조각(genRegListFragment.jsp)』에서 설명 계획이다.
What I did
- 이전 페이지(genMain.jsp)에서 설정한 1차 필터 값 유지 기능 구현
- 세션에 담긴 속성값을 기반으로 설정한 아이 이름, 돌봄 희망 날짜, 돌봄 희망 시간 값 유지 및 변경 가능
- 서버에 저장된 범례 테이블로부터 가져온 데이터로 2차 필터의 각 항목(시터 등급, 근무 지역, 시터 보유 자격증) 세부 선택지 출력
- JSTL의 core 태그 중 <c:forEach> 활용
- 2차 필터 각 항목 클릭 시 세부 선택지 숨김 기능 구현
- jQuery의 토글 기능 활용 → ex. $("#checkbox-grade").slideToggle(500);
- 2차 필터 설정 후 필터 적용 선택 시 검색 결과 (리스트) 출력 구현
- AJAX, jQuery, JSTL의 core 태그 중 <c:import> 활용
- AJAX 요청 시 2차 필터 각 항목의 선택된 체크박스 값은 배열로 받아와 다음 페이지로 전송
- AJAX 요청 서버 전송 직전 beforeSend 속성 활용해 한글 인코딩 설정
→ xmlHttpRequest.setRequestHeader("Accept", "text/html; charset=utf-8");
- 검색 결과 리스트 출력 시 예약 상태에 따른 신청 버튼 비활성화 기능 구현
- EL 문법, CSS 속성 중 'display': 'none', 'disabled':'disabled', 'cursor': 'not-allowed' 활용
2.3.2 일반 돌봄 검색 결과 조각 (genRegListFragment.jsp)
genRegListFragment.jsp는 검색 결과를 담고 있는 조각 페이지에 해당한다. 즉, 위 페이지에서 "검색결과(N)"에 해당하는 하위영역을 말한다.
What I did
- 검색 결과 건수 출력 기능 구현
- 시터의 일반 돌봄 근무 등록 코드를 기반으로 시터 정보 출력 기능 구현
→ 시터 사진, 시터 등급, 시터 평점, 시터 보유 자격증 등 시터 정보 및 근무 등록 관련 정보 출력- JOIN, UNION 등 활용한 VIEW 생성 및 조회
- JSTL의 core 태그 중 <c:choose>, <c:if>, <c:forEach> 활용
- JSTL의 formatting 태그 중 <fmt:parseDate>, <fmt:formatDate> 활용
- 검색 결과 리스트 출력 시 예약가능 여부 및 등록일 오름차순 정렬 후 근무 등록 건을 출력 기능 구현
- VIEW 생성 시 ORDER BY절 활용
- 검색 결과 리스트 출력 시 예약 상태에 따른 "[예약가능]" 문구 출력 기능 구현
- EL 문법, 삼항연산자 활용
- "돌봄 신청" 클릭 시 새 윈도우 창(팝업창) 열기 기능 구현
- JavaScript의 window 객체 활용
2.3.3 일반 돌봄 상세 열람(genRegDetail.jsp)
기존 페이지(부모창)에서 "돌봄 신청" 버튼 클릭 시 새 윈도우 창으로 열린 페이지이며, 시터가 등록한 근무 등록 상세 내용을 확인할 수 있다.
What I did
- "돌봄 신청" 버튼 클릭 시 기존 페이지(부모창)에서 다음 페이지로 전환 기능 구현
- JavaScript의 window 객체 활용
2.3.4 일반 돌봄 신청 폼(genReqInsertForm.jsp)
결제 진행 전 일반 돌봄 신청 정보를 확인하고 추가 정보를 입력하는 페이지이다.
What I did
- 세션에 담긴 속성값을 기반으로 돌봄 희망 시터 정보 및 일반 돌봄 근무 등록 정보 출력 기능 구현
- jQuery의 토글 기능 활용
- 세션에 담긴 속성값을 기반으로 돌봄 희망 아이 정보 및 일반 돌봄 예약 신청 정보 출력 기능 구현
→ 알레르기, 지병, 장애 정보 함께 출력 - 전달 메시지 글자수 세기 기능 구현
- jQuery, JavaScript의 Event 객체 활용
- 부모 회원의 보유 포인트 조회 기능 구현
- JOIN, UNION 등 활용한 VIEW 생성 및 조회
- 결제 예정 금액 계산 기능 구현 → 시터 등급, 돌봄 일수, 돌봄 시간, 기본급, 수수료 등 반영
- Java Time 패키지의 LocalDate 클래스, ChronoUnit 클래스 활용
- Javascript의 Number 객체 활용 (toLocaleString() 메소드 활용)
- 결제 확인 체크박스 미선택 시 폼 제출 제한 기능 구현
2.3.5 일반 돌봄 결제 폼(genPayInsertForm.jsp)
기존 기획 단계에서는 결제 API를 활용하고자 했으나 결국 실패...^^해서 일단 하단에 다음으로 이동을 결제 액션 처리의 대안으로 둔 결제 폼이다. 이 부분은 추후 다시 붙잡고 API로 결제 기능 구현하고 싶다.
2.3.6 일반 돌봄 신청 완료(genPayResult.jsp)
결제 완료 후 부모 회원이 마주하는 페이지이다. 해당 페이지에서는 다른 페이지로 이어지는 것 외에는 별도의 기능이 없으나, 이전 페이지에서 넘어오며 수행된 액션이 존재한다.
What I did
- 일반 돌봄 결제 내역 기록, 포인트 사용 내역 기록, 예약 신청 액션 처리 구현
- Service 계층 없이 Controller에서 @Transactional 활용 (Spring MVC 구조)
- 다음 페이지 이동 전 불필요한 세션 속성값 제거 → 로그인 시 주어진 속성(부모 백업 아이디 포함)만 남기기
- session객체의 removeAttribute() 메소드 활용
2.4 부모 회원
2.4.1 부모 회원 마이 페이지(ParentMypage.jsp)
2.4.2 부모 신규 아이 등록(ChildInsertForm.jsp)
2.4.3 부모 정보 열람(ParentInfo.jsp) / 수정(ParentUpdateForm.jsp)
2.4.4 부모 현재 이용 내역(ChildUsed.jsp)
2.4.5 부모 결제 내역(PayRefund.jsp)
2.4.6 부모 돌봄 완료 내역(CareCompleted.jsp)
2.4.7 부모 리뷰 작성(ReviewInsertForm.jsp)
2.5 관리자
2.5.0 관리자 메인 대시보드(adminMain.jsp)
2.5.1 시터 등록 요청(adminSitRegList.jsp) / 상세 내역(adminSitRegDetail.jsp)
2.5.2 시터 등록 거절 내역(adminSitRejectedList.jsp)
2.5.3 시터 회원 정보(adminSitList.jsp) / 상세 정보(adminSitDetail.jsp)
2.5.4 부모 회원 정보(adminParList.jsp)
2.5.5 근무 등록 내역(adminGenRegList.jsp) / 상세 내역(adminGenRegDetail.jsp)
2.5.6 예약 신청 내역(adminReqList.jsp) / 상세 내역(adminGenReqDetail.jsp)
2.5.7 등급 정보 리스트(gradeList.jsp) / 수정(gradeUpdateForm.jsp)
2.5.8 시급 정보 수정(hourlyWageList.jsp)
2.5.8 관리자 정보 조회(adminInfo.jsp) / 수정(adminInfoUpdateForm.jsp)
2.6 공지사항
관리자, 부모, 시터 모든 사용자의 공통 영역이라고도 볼 수 있는 공지사항 영역! 정적 페이지 작성 및 DB 데이터 로드까지 구현하였으나 실제 액션 처리까지는 구현하지 못했다. 게시판 기능은 기본적인 내용에 속하기 때문에 오히려 일반 돌봄 등 메인 기능에 비하여 후순위로 밀렸다. 너무 늦지 않게 이 부분도 액션 처리를 구현할 예정이다.
2.6.0 공지사항 리스트(noticeList.jsp)
공지사항 페이지의 가장 큰 특징은, 하나의 페이지(noticeList.jsp)임에도 로그인 주체에 따라 서로 다른 헤더를 가진다는 것이다.
What I did
- 공지사항 리스트 출력 구현
- 세션에 담긴 속성값을 기반으로 로그인 주체에 따른 헤더 파일 분기, 등록/수정 버튼 표시 출력 구현
- JSTL의 core 태그 중 <c:choose> 활용
- EL 문법 사용 시 『! = " "』 대신 『not empty』 구문 사용
→ ex.${not empty parent}
2.6.1 공지사항 상세 열람(noticeDetail.jsp)
What I did
- 공지사항 게시물 상제 내역 출력 구현
- 세션에 담긴 속성값을 기반으로 로그인 주체에 따른 수정/삭제 버튼 표시 출력 구현
- JSTL의 core 태그 중 <c:choose> 활용
- EL 문법 사용 시 『! = " "』 대신 『not empty』 구문 사용
→ ex.${not empty admin}
2.6.2 공지사항 게시물 등록(noticeInsertForm.jsp)
What I did
- 공지사항 새 게시물 등록 시 오늘 날짜 자동 출력 구현
- Java의 Calendar 객체 활용
2.7 기타
2.7.1 부모/시터 헤더 파일(parentHeader.jsp, sitterHeader.jsp)
모든 파일을 통틀어 가장 먼저 만들어진 파일이 헤더 파일이다. (회고에서 다룰지 모르겠으나) 우리 팀의 기본 기조는 헤더와 색상은 통일하되 다른 요소는 자유롭게 CSS를 구성하는 것이었다. 학원 훈련과정 내에서 CSS를 활용할 기회가 적었기 때문에, 하나의 CSS 속성이라도 더 다뤄보자는 게 핵심이었는데, 그러한 다양성을 하나로 묶어준 게 바로 헤더 파일이었다.
What I did
- 일반 돌봄 관련 페이지 로드 시 헤더 파일 내 해당 항목에 강조 표시(#e28c99) 출력 구현
- Javascript의 (document 객체 내) querySelector() 메소드 활용
- Javascript의 (element 객체 내) classList.remove(), classList.add() 메소드 활용
- 로그아웃 버튼 클릭 시 세션에 담긴 모든 값을 삭제 후 로그아웃 기능 구현
- Java의 servlet 패키지 내 HttpSession.invalidate() 메소드 활용
2.7.2 관리자 헤더 파일(adminHeader.jsp)
관리자 헤더 파일의 특징이라면, 부모와 시터 헤더 파일에서 찾아볼 수 있는 강조 표시( #e28c99)가 hover 시에만 나타난다는 것이다. 플랫폼을 이용하는 고객과 관리자가 마주하는 웹 페이지의 분위기를 다르게 두기 위해서 관리자 페이지는 흑백 느낌으로 주요 페이지가 구성되어 있고, 이에 따라 헤더에서도 최소한의 구분을 위해서만 색상을 사용했다.
2.7.2 푸터 파일(footer.jsp)
헤더 파일과 대척점에 놓인듯 모든 jsp 파일을 통틀어서 가장 마지막에 만들어진 파일이 푸터 파일이다. 가상의 기업을 설립해 프로젝트를 진행하고 플랫폼을 구축했기 때문에 학원 주소를 빌렸고, 고객센터 전화번호는 아이사랑(1248)의 발음에서 따왔다. Web Application 을 구현하는 프로젝트이기 때문에 모바일 앱이 존재하지 않지만, 향후 확장성을 고려하여 푸터에 포함시켰다. 서비스에 대한 상세 설명 페이지의 부재로 현재는 정적 페이지 구현에 그친 상태이다.
2.7.3 알림함(notify.js)
일반 돌봄 신청, 수락, 취소 등 특정 액션 발생 시 부모/시터가 알림을 수신받는다. 이를 열람 및 클릭하여 알림을 읽은 날짜가 각 테이블의 컬럼 데이터로 UPDATE 되면 알림함의 읽지 않은 알림 숫자가 줄어든다. 알림함 기능은 기획 단계에서 구상한 내용이지만 구현 범위 재설정 과정에서 공지사항과 함께 후순위로 밀려났다. 다만 추후 DB 데이터 연결 시 작동할 수 있도록 최소한의 기능을 구현하여 헤더 파일로부터 별도의 javascript 파일(notify.js)로 분리했다. 아쉬움이 짙은 바, 위에서 언급된 jsp 파일과 달리 js 파일임에도 언급하고 싶었다.
What I did
- 오버레이(overlay)로 알림함 정적 엘리먼트 출력 구현
- CSS 속성 중 z-index 활용
- CSS 애니메이션에 사용되는 키프레임 규칙(keyframes rule) 활용
- Javascript의 (element 객체 내) getBoundingClientRect() 메소드 활용
- 알림함 읽음 및 모두 읽음 표시 기능 구현
- Javascript의 (document 객체 내) querySelector() 메소드 활용
'Sist > Final Projet : I_Look' 카테고리의 다른 글
| [Java Web Application] 파이널 프로젝트 Ⅵ. 기능 추가 구현 - 리뷰 미작성 시 평점 열람 제한 (1) | 2025.05.16 |
|---|---|
| [Java Web Application] 파이널 프로젝트 Ⅵ. 기능 추가 구현 - 1차 필터 신청 날짜 제한 (Flatpickr 라이브러리 활용) (1) | 2025.05.16 |
| [Java Wep Application] 파이널 프로젝트 Ⅳ. DB 논리/물리 설계 (1) | 2025.05.13 |
| [Java Wep Application] 파이널 프로젝트 Ⅲ. 화면 레이아웃 구성(스토리보드/UI 설계) (0) | 2025.05.13 |
| [Java Wep Application] 파이널 프로젝트 Ⅱ. UML 설계 (0) | 2025.05.13 |