모락모락 (MORAKMORAK)

취미와 관심사가 같은 사람들끼리 모임을 만들고, 소통과 만남을 제공하는 웹 기반 시스템입니다.
Spring Boot, React, Oracle DB 등을 활용하여 풀스택 개발 역량과 팀원 간 협업 능력을 향상하고자 진행하였습니다.

목차

1. 프로젝트 개요
2. 개발 환경
3. 역할 분담
4. 요구사항 명세서
   • 관리자 요구사항
   • 사용자 요구사항
5. 데이터 모델링
6. 프로그램 구조
7. 실행결과
8. 보안
9. 관리자 UI 및 기능
10. 사용자 UI 및 기능
    11.설치 및 실행 가이드

---

프로젝트 개요

• 프로젝트명: 모락모락 (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 - 정기모임/동행/소모임 리스트 구현 - 모임 상세페이지 구현

---

요구사항 명세서

관리자 요구사항

1. 보안

   • 관리자 계정 암호화 (Bcrypt)
   • 인증 권한: admin
   • JWT 토큰 유효기간: AccessToken 1시간, RefreshToken 7일

2. 핵심 기능

   • 대시보드
     • 전월 대비 사용자, 모임 수, 방문객 수 추이 비교
     • 최근 한 달 인기 카테고리
   • 회원관리
     • 회원 정보 조회
   • 모임관리
     • 모임 개설 승인, 거절
   • 신고관리
     • 신고된 회원 경고 처리(4회 시 자동 탈퇴)
   • 게시판관리
     • 공지사항 및 FAQ 등록/수정/삭제
     • 후기·댓글 블라인드 처리
   • 통계관리
     • 일별 수입(금액 충전), 성별·연령대, 인기 모임 순위, 찜 많은 모임

사용자 요구사항

1. 메인페이지

   • 상단메뉴: 메뉴바, 회원 닉네임, 로그인
   • 본문: 슬라이드쇼, 인기 모임, 사이트 소개
   • 하단메뉴: 소셜 메뉴 연결

2. 로그인

   • 일반 회원가입
     • 누리고 API를 통한 전화번호 인증
   • SNS 회원가입
     • 구글, 카카오톡 회원가입
   • 아이디/비밀번호 찾기

3. 마이페이지

   • 프로필 수정, 개인정보 수정, 거래 내역 확인, 작성 리뷰 확인
   • 금액 충전 (토스 결제 API)
   • 알림: 모임 승인/거절, 모임 신청자 발생 시 알림
   • 참여 모임 조회 (멤버·모임장·종료된 모임)
   • 회원 탈퇴(일반회원: 비밀번호+전화번호 인증, SNS회원: 이메일 인증)

4. 모임페이지

   • 모임 검색(카테고리, 지역, 등록순 정렬)
   • 모임 세부 사항: 정보, 소개글, 모임장/멤버 정보, 구글 지도 표시 등
   • 모임 신청 수락/거절, 멤버 세부정보, 신고기능, 모임 개설 신청

5. 리뷰페이지

   • 작성 리뷰 목록: 작성일 정렬
   • 리뷰 검색(제목, 모임명), 리뷰·댓글 삭제 가능
   • 리뷰에 별점/대표 이미지 등록

6. 공지사항 & FAQ

   • 공지사항/FAQ 확인, 등록(관리자)

7. 찜 목록

   • 찜한 모임 목록 출력, 찜 삭제

---

데이터 모델링

---

프로그램 구조

Frontend

Backend

---

실행결과

스크린샷

영상

https://www.youtube.com/watch?v=wpe9hy-ymzk

보안

• 인증/인가: Spring Security, OAuth2, JWT(AccessToken, RefreshToken)
• 비밀번호 암호화: Bcrypt
• JWT 만료
  • AccessToken: 1시간
  • RefreshToken: 7일
• 권한 분리: ADMIN, USER

---

관리자 UI 및 기능

1. 회원 정보 조회
   • 회원가입 완료 시 등록되는 정보 확인 및 관리
2. 모임 조회
   • 새로 등록된 모임 목록 확인
3. 모임 승인/거부 처리
   • 모임 개설 시 관리자 승인이 필요한 기능
4. 통계
   • 일별 수입(최근 5일 금액 충전 합산)
   • 사용자 성별 및 연령대 비율 (원형 그래프)
   • 인기 카테고리, 찜 상위 5개 모임
5. 게시판 관리
   • 후기/댓글 블라인드 처리 (isBlacked 토글)
   • 공지사항 & FAQ 등록/수정/삭제
6. 회원 신고 관리
   • 접수된 신고 관리 (경고/보류)
   • 조치 내용 작성 및 처리
   • 4회 경고 시 자동 탈퇴

---

사용자 UI 및 기능

1. 로그인
   • 일반 로그인, SNS 로그인(구글/카카오)
   • 로그인 유지 기능
   • 아이디·비밀번호 찾기(전화인증)
2. 회원가입
   • 일반 회원가입: 아이디/닉네임 중복 체크, 전화번호 인증, 우편번호 검색
   • SNS 회원가입: 토큰을 통한 회원 정보 가져오기, 이메일·닉네임 기입
3. 마이페이지
   • 프로필 수정(사진, 자기소개)
   • 개인정보 수정(중복체크, 일반/SNS 구분)
   • 거래내역 조회(충전, 모임 가입, 환불 등)
   • 금액 충전(토스 API)
   • 알림(모임 승인/거절, 신청자 발생 등)
   • 참여 모임 조회
   • 회원탈퇴(일반: 비밀번호+전화번호, SNS: 이메일 인증)
4. 메인페이지
   • 메인 이미지(캐러셀), 인기 모임 순위, 카테고리
   • 사이트 소개 (2~3개 페이지)
5. 모임리스트
   • 카테고리/지역별 필터
   • 최신순/시작일 순 정렬
   • 모집 종료/정원 마감/종료일 경과 상태 표시
6. 모임 개설 신청
   • 개설일 3일 뒤부터 모임 시작 가능
   • 구글 지도 검색 API 사용
   • 관리자의 승인 후 모임 개설
7. 모임 상세 페이지
   • 모임 기본 정보(모임장, 멤버, 장소, 지도 표시 등)
   • 멤버 신고 기능
   • 모임장: 채팅 참여, 모임 관리(승인·거절, 정보 수정)
   • 모임 멤버: 채팅 참여, 취소(환불 규정)
   • 일반 회원: 모임 신청, 찜하기
8. 리뷰 페이지
   • 리뷰 리스트(작성일 순, 검색 가능)
   • 블라인드 시 사용자에게 보이지 않도록 처리
9. 리뷰 상세 페이지
   • 본인 작성 리뷰·댓글 삭제
   • 댓글 작성
   • 블라인드된 댓글 숨김
10. 모임 선택 후 리뷰 작성
    • 참여 모임 중 종료된 모임에 한해 리뷰 작성 가능
    • 대표 이미지, 별점 설정 가능
11. 공지사항 & FAQ
    • 관리자 등록 사항 확인

설치 및 실행

1. git clone ...
2. Back-End: cd backend -> DB 연결 설정 -> Spring Boot 실행
3. Front-End: cd frontend -> npm install -> npm start
4. http://localhost:5173 / http://localhost:8080