💌 Portal4U

💌 Spring Web Project, Portal4U

• Spring Web 프로젝트 Portal4U입니다.
• 각자 관심 있는 주제로 사이트를 만들고, 하나의 포털로 통합하였습니다.

✨ Service List

• 그룹 채팅 서비스 @Dev-Jinuk-Jo
• NFT 경매 사이트 @donato14
• 전통주 구독 사이트 @helloppiok
• 음악 뉴스레터 사이트 @sunday-sunny

Table of contents

• Intro
• Dev Enviroment
• Dependency
• ERD
• Features

Intro

개발 배경

지난 프로젝트를 끝낸지 하루.
또 다시 새로운 프로젝트를 시작해야되는데 모든 아이디어를 고갈해버린 조장 @dev-jinuk-jo😔

개개인별로 밀도 높은 페이지와 게시판을 하나씩 넣어 완성도 높은 페이지를 만들어야 하는데 어떡하면 좋을까?
그리하여 시작된 각자 만들고 싶은 걸 만들고 통합하는 포털 사이트 기획.

이것은 개인 프로젝트인가 팀 프로젝트인가 오리무중한 Portal4U Start 💌!

개발 기간

• 2022-02-03 ~ 2022-02-25 (하루 4시간씩, 23일)

Dev Enviroment

🌍 OS / MAC OS, Windows10
💻 IDE / Eclipse, IntelliJ, VSCode
🛢 DB / Oracle Database 11g Express Edition Release 11.2.0.2.0
🚀 DBMS / SQL Developer, DataGrip
💽 ERD / ERD Cloud
🎨 Story Board / Figma
📝문서 작성 / Notion, 구글 드라이브
👾온라인 회의 / Discode
👩🏻‍💻Version Control / GitHub

Dependency

• ojdbc6
• spring-jdbc
• AOP
• MyBatis
• Socket
• spring-context-support
• lombok
• Servlet
• File Upload
• Tiles
• log4j

ERD

전체ERD

개별 ERD

그룹 채팅 ERD

• 회원
• 그룹
• 모임가입
• 채널
• 채팅

NFT 경매 사이트 ERD

• 게시판
• 경매종료
• 경매물품
• 경매상황
• 회원
• 경매 시작가

전통주 구독 사이트 ERD

• 회원
• 전통주
• 주종
• 맛
• 전통주 설명
• 전통주 설명

음악 뉴스레터 ERD

• 구독자
• 장르
• 구독자 선호장르
• 피치포크리뷰
• 뉴스레터
• 뉴스레터 정보
• 발송정보

Features

💬 그룹 채팅

그룹 채팅 기능보기

그룹 채팅

• WebSocket STOMP을 사용하여 그룹, 채널별 채팅을 지원합니다.
• AJAX를 사용하여 SPA(Single Page Application) 페이지로 구성하였습니다.
• 그룹, 채널 추가 및 이동을 지원합니다.
• 동적으로 그룹, 채널, 이용자 리스트 표시합니다.
• 속해있는 그룹의 다른 채널에 메시지가 온 경우 동적으로 알림 표시를 띄웁니다.

📸 NFT 경매 사이트

NFT 경매 사이트 기능보기

NFT 경매 사이트 메인 화면

• 상단에 배너가 위치하여 이미지를 고객에게 제공합니다.
• 경매 물품은 매일 변경되며 경매 상품당 1시간의 타이머가 존재합니다.
• 고객이 현재 입찰가보다 높게 입찰시 현재 입찰가 변경과 동시에 타이머가 초기화 됩니다.
• 1시간이 흐를때까지 입찰의 변동이 없다면 경매가 종료됩니다.

FAQ 게시판

• 자주하는 질문 게시판을 통해 관리자가 공지사항으로 올려 놓은 정보를 확인 가능합니다.
• 게시물은 모달 형식으로 제공됩니다.
• ESC를 누를 경우 모달창을 닫을 수 있습니다.

경매물품 등록(관리자)

• 관리자 화면에서 경매 물품을 등록할 수 있습니다.
• 사진 파일 등록 시 미리보기가 가능하고, 각각의 데이터 입력 후 등록버튼으로 경매물품을 등록합니다.
• 경매물품 등록과 동시에 메인화면의 경매 물품이 변경됩니다.

QnA 게시판

• 고객이 익명으로 글을 작성할 수 있는 게시판입니다.
• 글쓰기 기능과 확인 기능을 제공합니다.

🍶 전통주 구독

전통주 구독 사이트 기능보기

전통주 구독 사이트 메인(팝업)

• 사이트 접속시 경고 팝업 확인 가능합니다.
• 팝업에 드래그 기능을 넣어 드래그가 가능합니다.
• 쿠키를 적용하여 '오늘 하루 열지 않음' 버튼 클릭시 팝업창이 다시 뜨지 않습니다.

전통주 구독 사이트 메인

• 전통주 구독하기 및 전통주 정보 확인이 가능합니다.
• 전통주 이미지에 트랜지션을 적용하여 사용자 인터랙티브 요소를 강화하였습니다.

레시피 게시판 및 글작성

• 레시피 게시판입니다.
• 앨범 형식으로 게시판UI를 제공합니다.
• 글보기 및 글작성 CRUD가 가능합니다.

💌 음악 뉴스레터

음악 뉴스레터 기능보기

뉴스레터 구독

• 뉴스레터 구독 화면입니다.
• 이메일, 이름, 좋아하는 장르를 선택 후 구독하기 버튼을 누를 경우 구독이 완료됩니다.

뉴스레터 목록

• 작성된 뉴스레터를 확인할 수 있는 뉴스레터 게시판입니다.
• 박스 형식으로 게시물 리스트UI를 제공합니다.
• 하단 글작성 버튼으로 글작성 페이지로 이동할 수 있습니다.

뉴스레터 상세보기

• 게시물 클릭시 모달 형태로 게시물 확인 가능합니다.
• '원본보기' 버튼을 통해 Pitchfork 원본 게시물로 이동하도록 하였습니다.
• 글 삭제 기능을 제공합니다.

뉴스레터 글작성

• 뉴스레터 번역과 글작성이 가능합니다.
• AJAX를 이용하여 앨범 박스에서 앨범 선택시 자동으로 내용이 변경되게 하였습니다.
• 번역하기 버튼을 누르면 네이버 파파고 API를 사용해 원문을 번역하였습니다.
• 게시물 저장 시 사용자 리뷰 내용과 번역 내용을 모두 저장합니다.

구독자 관리

• 구독 신청을 한 구독자 목록을 보여줍니다.
• 구독일자, 이름, 이메일, 구독상태, 발송제외 컬럼을 보여줍니다.
• 삭제 버튼을 통해 구독자 삭제가 가능합니다.

뉴스레터 통계

• 뉴스레터 기본정보, 이메일 통계, 뉴스레터 통계를 보여줍니다.
• 이메일 통계의 경우 발송 성공률, 평균 오픈율, 수신 거부율 확인이 가능합니다.
• 뉴스레터 통계의 경우 '많이 오픈한 뉴스레터TOP5', '많이 오픈한 구독자TOP5' 확인이 가능합니다.