취미와 관심사가 같은 사람들끼리 모임을 만들고, 소통과 만남을 제공하는 웹 기반 시스템입니다.
Spring Boot, React, Oracle DB 등을 활용하여 풀스택 개발 역량과 팀원 간 협업 능력을 향상하고자 진행하였습니다.
- 프로젝트명: 모락모락 (MORAKMORAK)
- 개발기간: 2025.01.27 ~ 2025.02.23
- 프로젝트 목적
- 취미와 관심사가 같은 사람들이 모임을 만들고, 소통과 만남 서비스를 제공하는 웹 기반 시스템 구축
- Spring Boot, React, Oracle DB 및 주요 API(구글, 카카오, 토스페이먼츠 등)를 사용하여 풀스택 개발 역량을 키우고, 팀 프로젝트를 통해 협업 능력을 향상시키는 것
- 프로젝트 목표
- 프론트엔드(React) + 백엔드(Spring Boot) + DB(Oracle) 연동 전 과정을 경험
- OAuth2, JWT 등을 활용한 보안 학습
- 다양한 API 연동(Google Maps, Kakao Login, Tosspayments 등)으로 실무 능력 향상
- 개발 OS: Windows 10 Home
- DB 서버: Oracle 21
- JDK 버전: JDK 17 (jdk-17.0.13)
- WAS: Apache Tomcat 9.0.44
- Spring Boot: 4.27.0.RELEASE
- React: 19.0.0
- 웹 표준 준수: HTML5, CSS3
- 개발 언어: Java, HTML5, CSS3, JQuery, JavaScript
- 데이터베이스 모델링 툴: vuerd
- 형상관리: GitHub
- 플러그인 & 라이브러리: Bootstrap 5.3.3
- 개발 툴
- VSCode 1.97.0
- SQL Developer 24.3.0.284
- API
- Firebase (채팅), Google Login, Kakao Login, Google Maps, Google Geocoding, Tosspayments(결제), 다음 우편번호, 누리고 문자 인증
- 보안정책
- OAuth2, JWT(Spring Security)
- AccessToken 만료: 1시간
- RefreshToken 만료: 7일
| 직책 | 팀원 | 담당 업무 |
|---|---|---|
| 팀장 | 김동욱 | - 회원가입(일반, SNS), Google AccessToken 발급 - API(구글 로그인, Firebase) - 메인페이지(모임 카테고리, 인기순 출력) - DB 작성, 깃허브 형상관리 - 채팅방 구현 - 보안(Spring Security, JWT, OAuth2, env) - 마이페이지(프로필, 개인정보 수정, 거래내역, 리뷰, 알림, 모임참가조회 등) |
| 부팀장 | 문정배 | - 리뷰페이지(리뷰 작성, 리뷰 삭제, 댓글 작성, 댓글 삭제) - 공지사항 & FAQ 페이지(리스트 확인) - 로그인 페이지(아이디 및 비밀번호 찾기) - 찜 목록 확인 및 찜 삭제 - 관리자 페이지(공지사항, FAQ, 회원 신고 관리, 리뷰 페이지) - Message API |
| 팀원 | 신하윤 | - 메인페이지 전체화면 설계 및 구현(메인이미지, 로고, 폰트 디자인 등) - 관리자 페이지 라우터 및 전체화면 설계 - 후기·댓글 블라인드 처리(백엔드) - Google Geocoding API |
| 팀원 | 신지호 | - SNS 회원가입(카카오 AccessToken) - 관리자 페이지(대시보드, 회원관리, 모임관리, 통계관리) - DB 편집, 목업 데이터 작성 - 영상 제작 |
| 팀원 | 조해원 | - 모임 관리(개설, 정보수정, 참가신청/취소, 멤버 승인/거절, 멤버 신고 등) - Tosspayments 결제 API, 다음우편번호 검색, 구글 지도 API - 정기모임/동행/소모임 리스트 구현 - 모임 상세페이지 구현 |
-
보안
- 관리자 계정 암호화 (Bcrypt)
- 인증 권한:
admin - JWT 토큰 유효기간: AccessToken 1시간, RefreshToken 7일
-
핵심 기능
- 대시보드
- 전월 대비 사용자, 모임 수, 방문객 수 추이 비교
- 최근 한 달 인기 카테고리
- 회원관리
- 회원 정보 조회
- 모임관리
- 모임 개설 승인, 거절
- 신고관리
- 신고된 회원 경고 처리(4회 시 자동 탈퇴)
- 게시판관리
- 공지사항 및 FAQ 등록/수정/삭제
- 후기·댓글 블라인드 처리
- 통계관리
- 일별 수입(금액 충전), 성별·연령대, 인기 모임 순위, 찜 많은 모임
- 대시보드
-
메인페이지
- 상단메뉴: 메뉴바, 회원 닉네임, 로그인
- 본문: 슬라이드쇼, 인기 모임, 사이트 소개
- 하단메뉴: 소셜 메뉴 연결
-
로그인
- 일반 회원가입
- 누리고 API를 통한 전화번호 인증
- SNS 회원가입
- 구글, 카카오톡 회원가입
- 아이디/비밀번호 찾기
- 일반 회원가입
-
마이페이지
- 프로필 수정, 개인정보 수정, 거래 내역 확인, 작성 리뷰 확인
- 금액 충전 (토스 결제 API)
- 알림: 모임 승인/거절, 모임 신청자 발생 시 알림
- 참여 모임 조회 (멤버·모임장·종료된 모임)
- 회원 탈퇴(일반회원: 비밀번호+전화번호 인증, SNS회원: 이메일 인증)
-
모임페이지
- 모임 검색(카테고리, 지역, 등록순 정렬)
- 모임 세부 사항: 정보, 소개글, 모임장/멤버 정보, 구글 지도 표시 등
- 모임 신청 수락/거절, 멤버 세부정보, 신고기능, 모임 개설 신청
-
리뷰페이지
- 작성 리뷰 목록: 작성일 정렬
- 리뷰 검색(제목, 모임명), 리뷰·댓글 삭제 가능
- 리뷰에 별점/대표 이미지 등록
-
공지사항 & FAQ
- 공지사항/FAQ 확인, 등록(관리자)
-
찜 목록
- 찜한 모임 목록 출력, 찜 삭제
https://www.youtube.com/watch?v=wpe9hy-ymzk
- 인증/인가: Spring Security, OAuth2, JWT(AccessToken, RefreshToken)
- 비밀번호 암호화: Bcrypt
- JWT 만료
- AccessToken: 1시간
- RefreshToken: 7일
- 권한 분리:
ADMIN,USER
- 회원 정보 조회
- 회원가입 완료 시 등록되는 정보 확인 및 관리
- 모임 조회
- 새로 등록된 모임 목록 확인
- 모임 승인/거부 처리
- 모임 개설 시 관리자 승인이 필요한 기능
- 통계
- 일별 수입(최근 5일 금액 충전 합산)
- 사용자 성별 및 연령대 비율 (원형 그래프)
- 인기 카테고리, 찜 상위 5개 모임
- 게시판 관리
- 후기/댓글 블라인드 처리 (isBlacked 토글)
- 공지사항 & FAQ 등록/수정/삭제
- 회원 신고 관리
- 접수된 신고 관리 (경고/보류)
- 조치 내용 작성 및 처리
- 4회 경고 시 자동 탈퇴
- 로그인
- 일반 로그인, SNS 로그인(구글/카카오)
- 로그인 유지 기능
- 아이디·비밀번호 찾기(전화인증)
- 회원가입
- 일반 회원가입: 아이디/닉네임 중복 체크, 전화번호 인증, 우편번호 검색
- SNS 회원가입: 토큰을 통한 회원 정보 가져오기, 이메일·닉네임 기입
- 마이페이지
- 프로필 수정(사진, 자기소개)
- 개인정보 수정(중복체크, 일반/SNS 구분)
- 거래내역 조회(충전, 모임 가입, 환불 등)
- 금액 충전(토스 API)
- 알림(모임 승인/거절, 신청자 발생 등)
- 참여 모임 조회
- 회원탈퇴(일반: 비밀번호+전화번호, SNS: 이메일 인증)
- 메인페이지
- 메인 이미지(캐러셀), 인기 모임 순위, 카테고리
- 사이트 소개 (2~3개 페이지)
- 모임리스트
- 카테고리/지역별 필터
- 최신순/시작일 순 정렬
- 모집 종료/정원 마감/종료일 경과 상태 표시
- 모임 개설 신청
- 개설일 3일 뒤부터 모임 시작 가능
- 구글 지도 검색 API 사용
- 관리자의 승인 후 모임 개설
- 모임 상세 페이지
- 모임 기본 정보(모임장, 멤버, 장소, 지도 표시 등)
- 멤버 신고 기능
- 모임장: 채팅 참여, 모임 관리(승인·거절, 정보 수정)
- 모임 멤버: 채팅 참여, 취소(환불 규정)
- 일반 회원: 모임 신청, 찜하기
- 리뷰 페이지
- 리뷰 리스트(작성일 순, 검색 가능)
- 블라인드 시 사용자에게 보이지 않도록 처리
- 리뷰 상세 페이지
- 본인 작성 리뷰·댓글 삭제
- 댓글 작성
- 블라인드된 댓글 숨김
- 모임 선택 후 리뷰 작성
- 참여 모임 중 종료된 모임에 한해 리뷰 작성 가능
- 대표 이미지, 별점 설정 가능
- 공지사항 & FAQ
- 관리자 등록 사항 확인
git clone ...- Back-End:
cd backend-> DB 연결 설정 -> Spring Boot 실행 - Front-End:
cd frontend->npm install->npm start - http://localhost:5173 / http://localhost:8080