[Java 웹 개발] 파이널 프로젝트 5. 결과 (화면 이미지)

1. 프로젝트 기간

💻 전체 기간 : 240109 ~ 240214
💻 세부 운영
1. 프로젝트 아이템 및 커뮤니케이션 툴 확정 ~240110
ㄴ Discord, 구글 닥스, 스프레드 시트, 카카오톡
2. 기획서 작성 ~240111
3. 요구사항 정의서 작성 ~240113
4. UI 작업 논의 ~240116
ㄴ Tiles 적용 여부, 부트스트랩 사용 여부 및 템플릿 확정 등
5. 테이블 설계서 작성 ~240116
6. 화면 정의서 작성 ~240118
7. 깃허브 세팅 240119
8. 코드 초안 마감 ~240206
9. 팀원 상호 피드백 240207
10. 디버깅 및 개인 기능 구현 마감 ~240209
11. 테스트용 데이터 초기화 240210
12. 시연용 데이터 삽입 ~240212
13. PPT 및 여타 산출물 작성 완료 ~240213
14. 파이널 프로젝트 발표 240214

💻 프로젝트 실 운영 기간 : 31일

세미 프로젝트와는 다른 개발 환경, 사용할 수 있는 기능도 많지만 사용해야 할 기능도 많아진 파이널 프로젝트.
놓치는 작업이 없도록 팀원들과 논의한 일정을 매일 공지한 팀장님 덕에 원활한 프로젝트 운영이 가능했다. 정말 정말 감사한 부분이다.

2. 화면 이미지

** 담당하지 않은 화면의 상세 설명은 생략합니다.
보다 자세한 내용이 궁금하다면, 기획 포스팅을 확인 바랍니다.

2-1. 메인

2-2. 회원가입

2-3. 로그인 및 비밀번호 찾기

2-4. 마이페이지

2-5. 공개 프로필(오픈 프로필)

2-6. 영화 예매

2-7. 채팅 및 중고거래

2-8. 소모임 예약

ㄴ 담당 페이지

2-8-1. 목록

1. 로그인 시에만 ‘나의 모임’ 목록 확인 가능

2. 내가 참여를 신청한 모임과 주최하는 모임에 참여 신청이 들어온 경우에 대한 매칭 정보와 그에 맞는 진행 상황, 내 활동이 구분되어 노출됨

3. 참여자 : 참여 대기, 참여 확정, 참여 거절 – 참여 취소하기, 후기 작성하기, 후기 작성 완료
   주최자 : 승인 필요, 승인 완료, 거절 완료 – 승인하기, 거절하기, 모임 취소하기
   공통 : 모집 중, 모임 완료, 모임 취소, 모집 완료

4. 경우의 수를 JSTL <c:if> 태그를 활용해 구분하고, 해당 상황에 맞는 UI/UX를 설계함

5. 승인하기, 거절하기 클릭 시 alert 창으로 의사 재확인 후 변경 처리

6. 그에 맞게 주최자와 참여자의 나의 모임 내역이 즉각 변경됨

7. 정렬 공통 사항 : <sql> 태그로 동적 SQL문 처리, CASE WHEN THEN ELSE END로 모임이 취소되었거나 모임이 완료된 경우 마지막으로 정렬
   → 기준 : 최신순, 리뷰순, 스크랩순, 마감임박순

8. 검색 공통 사항 : 목록으로 버튼 클릭 시 입력한 검색어 리셋, 검색어 입력하지 않고 버튼 클릭 시 disabled 하는 방식으로 입력 유효성 체크
   → 기준 : 제목, 작성자(닉네임) LIKE 검색
   검색어에 해당하는 내용이 없을 경우 결과 처리

2-8-2. 후기 작성하기

1. 모임이 정상적으로 완료될 경우 참여자의 나의 모임 목록에 후기 작성하기 버튼 노출, 후기 작성 완료 시 작성 완료 안내

2. 후기 작성 시 자바스크립트 활용해 입력 유효성 체크를 진행

3. 작성한 후기는 해당 모임의 상세 글에서 확인

4. 모임 후기 개수를 COUNT(*)를 활용해 명시

5. 후기 목록 Owl Carousel을 활용해 노출

2-8-3. 모임 참여 취소하기

1. 참여자의 경우 진행 상황과 관계 없이 모임 취소 가능

2. 정상적으로 참여 취소 시, UPDATE문으로 book 테이블에서 해당 모임의 참여자 수(book_headcount) -1

3. book_matching 테이블에서 DELETE문으로 해당 레코드 삭제 → 주최자, 참여자의 나의 모임 내역에서 해당 내역 사라짐

2-8-4. 모임 만들기

1. 필수 입력사항 @Valid 입력 유효성 체크 진행

2. 모임 일정 : Date Range Picker 활용,
   커스텀 하여 오늘 이전 날짜는 선택 불가하도록 처리

3. 모임 장소 : 다음 주소 API를 활용해 입력,
   선택 장소를 지도 상에서 바로 확인할 수 있도록 함

4. 소개 글 작성 시 CKEditor를 활용해 사용자에게 편의 제공,
   videoAdapter.js와 uploadAdapter.js 파일을 이용해 유튜브와 이미지 파일 삽입 가능하도록 처리

5. 썸네일 이미지 미선택 시 기본 이미지 노출
   참여 비용 미입력 시 ‘무료’로 노출
   준비물 미입력 시 ‘준비물 없음’으로 노출

6. '바로 승인' 선택 시 참여를 신청하면 바로 참여 확정,
   '승인 필요' 선택 시 참여를 신청하면 주최자가 승인/거절 처리 필요

2-8-5. 모임 상세 - 주최자

1. 주최자 : 프로필 대신 모임 진행 상황에 해당하는 버튼 노출
   흐름 : 모집 마감하기 → 모집 마감(disabled) → 모임 완료하기 → 새로 모집하기

2. 모집 인원수와 참여자수가 일치할 때 자동으로 모집 마감 처리

3. 모임 완료 처리 후 후기 등이 누적된 해당 게시글 재사용 할 수 있도록 새로 모집하기 버튼 노출

4. 모임 완료 처리 전까지는 게시글 수정 불가

5. 새로 모집 시 이전 신청자수 리셋

6. 모든 닉네임에는 오픈 프로필 링크가 <a></a>로 걸려 있음

[모집 마감]

[모임 완료]

[새로 모집]

2-8-6. 모임 상세 - 참여자

1. 참여자 : 수정하기, 모임 취소하기 버튼이 아닌 참여 신청하기 버튼 노출

2. 버튼 클릭 시 모달창 노출, 배경 및 스크롤 고정

3. 모든 항목 JSON 문자열, 자바스크립트 활용해 입력 유효성 체크 진행

4. 작성 도중 x 버튼 클릭 시 alert 창으로 안내 후 모달창 remove(), 배경 및 스크롤 고정 해제

5. 중복되는 일정이 존재할 시에 참여 신청 거절 및 alert 창으로 안내

6. 정상적으로 참여 신청이 완료되면 spring-boot-starter-mail 라이브러리와 Javamailsender 인터페이스를 활용하여 입력 이메일로 참여 신청 안내

7. 이메일 전송 지연 시 UI 처리 위해 참여하기 버튼 hide() 후 숨김 처리되어 있던 gif 형태의 로딩 이미지 show()

8. 모집이 마감된 모임의 경우 참여 신청하기 버튼 대신 모집 마감(disabled) 처리

2-8-6. 모임 상세 - 공통 : 스크랩

1. 상세 글 상단에 스크랩 버튼 노출 : 토글 형태로 동작하도록 자바스크립트로 제어

2. 미로그인, 본인이 작성한 글은 스크랩 불가 처리, alert 창으로 안내

2-8-7. 모임 상세 - 공통 : SNS 공유

1. 미로그인 시에도 SNS 공유 가능

2. 네이버 블로그 공유 : localhost일 경우 <meta> 태그에 명시한 url과 image를 제대로 인식하지 못함
   → 터널링 프로그램인 ngrok을 활용해 http 8000 포트를 외부에서도 접속 가능하도록 포워딩, Image 링크 또한 외부에서 호출 가능하도록 firebase 저장소 활용

3. 카카오톡 공유 : JavaScript key를 발급받은 뒤 플랫폼 생성,
   상세 글로 바로 이동하도록 처리

4. 트위터 공유 : summary 카드 타입으로 안내 문구와 함께 공유

[네이버]

[카카오톡]

[트위터]

2-8-8. 모임 상세 - 공통 : 댓글, 대댓글

1. 미로그인 시 댓글 작성 불가(disabled)

2. 답글 버튼 클릭 시 대댓글 폼 show() ↔ 취소 버튼 클릭 시 폼 remove()

3. 댓글 폼, 대댓글 폼 모두 <textarea>에 keyup 이벤트 연결하여 글자수 체크

4. 모든 댓글의 우측 상단 메뉴 클릭 시 본인이 작성한 댓글에 한해 삭제 버튼 노출

5. 삭제 버튼 클릭 시 전체 댓글 count(*)에서는 제외하도록 sql문 작성,
   댓글 목록에서는 UI 처리(답글 불가, 삭제 버튼 숨김)

2-8-9. 모임 수정하기

1. 수정 버튼 클릭 시 수정폼으로 이동하며 model 객체를 활용해 입력 내용 미리보기 처리

2. 썸네일 별도 삭제 가능하며 선택한 파일명 노출,
   모임 수정 시 별도로 변경하지 않는다면 썸네일 현상 유지

2-8-10. 모임 취소하기

1. 나의　모임　혹은　상세　글에서　모임 취소하기 버튼 클릭 시 자바스크립트 활용, 입력 유효성 체크 진행

2. 가입 시 입력한 이메일과 불일치 할 시 alert 창 안내 및 모임 취소 거절

3. 정상적으로 취소되었을 경우 썸네일로 바로 구분할 수 있도록 UI 처리, 상세 글로 진입 불가

2-9. 재능기부

** DB 덤프 중 데이터 손실 사고가 발생하여 PPT에 첨부되어 있던 이미지로 대신합니다.

2-10. 1인 가구 정보

2-11. 커뮤니티

2-12. 관리자

3. 발표

3-1. 발표 자료(PPT)

내가 총괄한 산출물이므로 일부 페이지를 공유한다.

💻 총 103p

💻 구역 구분
1. 표지 및 인덱스 1~2p
2. 프로젝트 개요 3p
3. 요구사항 정의서 5~8p
4. 테이블 설계서 9~19p
5. ERD 20p
6. UML 21~39p
7. 메뉴 구조도 40~46p
8. 개발 환경 47p
9. 프로젝트 시연 48~102p
10. 마지막 장표 103p

💻 자료

세미 프로젝트와 달리, 이후 개인 포트폴리오로 활용할 수 있도록 이미지와 설명을 각자가 원하는 만큼 넣도록 했다. 나는 하나의 문서로서 규격을 통일할 수 있도록 템플릿을 제작, 작업 가이드를 작성하여 안내하고 취합 후 워싱하는 작업을 담당하였다.

3-2. 피드백

방대함. 기획 회의를 섬세하게 했다고 생각함. 기획에 맞게 필요한 기능을 잘 배치함. 기능이 많이 들어갈 시에 복잡해질 수 있는데, 사용자 입장에서 필요했던 기능들을 구현한 것이라 비교적 처음 보는 사이트임에도 불구하고 큰 안내 없이 사용할 수 있을 정도로 간단명료함.

3-3. 후일담

지난 세미 프로젝트와 동일한 팀원에 1분이 새로 함께하게 된 덕분에 역할 분담에 큰 어려움이 없었다. 지난 경험을 토대로 시연용 데이터를 철저하게 넣고, 일정을 타이트하게 관리한 덕분에 발표 준비에 여유가 있었다.

그 덕에 수강생과 강사님이 프로젝트 내용과 구현한 기능을 이해하는데 어려움이 없었다고 생각한다. 발표자들이 가장 마지막까지 프로젝트를 담당하는 만큼 팀원들 모두가 발표자에게 기능 설명을 공유하여 발표를 도운 덕분이기도 했다.

(나의 경우엔 브라우저 비율 조정, 시연에 시간이 많이 걸리는 기능 캡처 이미지 전달, 클릭할 게시글 번호 등 최대한 자세하게 공유했다.)

메인 컬러를 토대로 일부 UI는 공유하기도 하고, 상호 피드백 시간을 가지며 디버깅을 철저히 한 덕에 칭찬도 받고 팀원 모두 만족하는 시연이 가능했다.