- Frontend: 유상진, 이경환
- Backend: 김예람, 김태남, 박다혜, 박지훈
: 학기 초 활발하게 이루어지는 과팅이 시간이 지나면서 관심이 줄어들면서,
학생간의 교류가 적어지게 되는 문제점을 해결하기 위함.
또한, 축제기간 동안 함께 즐길 수 있는 친구를 만들어 축제 활성화를 도움
: 1:1 동성 간 매칭, 2:2 이성 간 매칭을 통해
교내에서 새로운 친구를 사귈 수 있도록 돕는 서비스를
구현하여 교내 학생들간의 교류를 활발하기 위함
CI/CD
- Git Push를 하고 master브랜치(배포용 브랜치)에 올리면, Jenkins서버로 바로 Hook을 날립니다.
- Jenkins에서 Test를 진행 한 후에 Docker 이미지로 제작을 합니다.
- SpringBoot서버로 바로 컨테이너를 올려 배포를 시작합니다.
- 그라파나, 프로메테우스로 관리
주소 : https://hanmo-front.vercel.app/landing
주소 : https://hanmo.store/api/swagger-ui/index.html#/
주소 : https://docs.google.com/spreadsheets/d/1JE8XKR276VxA5LdkBcax9DjOBxP-GwB1Ri0WR1a8sHE/edit?gid=0#gid=0
주소 : https://docs.google.com/spreadsheets/d/1MJ3ztSCG_p-YSx11Sm2T_OwdkF1ltrcpEdc58xBeTxA/edit?gid=0#gid=0
| 라이브러리 | 버전 | 사용 목적 | 라이선스 | 확인 링크 |
|---|---|---|---|---|
| Spring Boot Starter Web | 3.4.3 | REST API 개발 | Apache 2.0 | LICENSE |
| Spring Boot Starter Security | 3.4.3 | 인증/인가 처리 | Apache 2.0 | LICENSE |
| Spring Boot Starter Data JPA | 3.4.3 | ORM 및 DB 연동 | Apache 2.0 | LICENSE |
| Spring Boot Starter Validation | 3.4.3 | 유효성 검사 | Apache 2.0 | LICENSE |
| Spring Boot Starter Data Redis | 3.4.3 | Redis 연동 | Apache 2.0 | LICENSE |
| Lettuce Core (Redis Client) | 자동 포함 | Redis 클라이언트 | Apache 2.0 | LICENSE |
| MySQL Connector/J | 8.0.33 | MySQL DB 연동 | GPL v2 with FOSS Exception | LICENSE |
| Lombok | 1.18.30 | 코드 간결화 | MIT | LICENSE |
| Springdoc OpenAPI UI | 2.7.0 | Swagger API 문서 자동화 | Apache 2.0 | LICENSE |
| QueryDSL JPA | 5.0.0 | 동적 쿼리 작성 | Apache 2.0 | LICENSE |
| Nurigo SDK | 4.3.0 | SMS 문자 전송 | Apache 2.0 | LICENSE |
| Jasypt Spring Boot Starter | 3.0.4 | 민감 정보 암호화 | Apache 2.0 | LICENSE |
| Mockito (inline, junit) | 4.8.1 | 단위 테스트 | MIT | LICENSE |
| 라이브러리 | 버전 | 사용 목적 | 라이선스 | 확인 링크 |
|---|---|---|---|---|
| react | 18 | UI 구성 | MIT | LICENSE |
| react-dom | 18 | 가상 DOM 렌더링 | MIT | LICENSE |
| next | 14.2.26 | React 기반 SSR 프레임워크 | MIT | LICENSE |
| axios | 1.8.4 | HTTP 클라이언트 | MIT | LICENSE |
| react-redux | 9.2.0 | Redux 상태 관리 연동 | MIT | LICENSE |
| @reduxjs/toolkit | 2.6.1 | Redux 툴킷 (상태 관리 간소화) | MIT | LICENSE |
| react-hook-form | 7.55.0 | 폼 상태 관리 | MIT | LICENSE |
| @hookform/resolvers | 4.1.3 | react-hook-form의 유효성 검증 | MIT | LICENSE |
| zod | 3.24.2 | 스키마 기반 데이터 검증 | MIT | LICENSE |
| react-hot-toast | 2.5.2 | 사용자 알림 토스트 메시지 | MIT | LICENSE |
| framer-motion | 12.6.3 | 애니메이션 라이브러리 | MIT | LICENSE |
| yarn | 1.22.22 | 패키지 매니저 | BSD-2-Clause | LICENSE |
| typescript | 5 | 정적 타입 시스템 | Apache 2.0 | LICENSE |
| tailwindcss | 3.4.1 | 유틸리티 기반 CSS 프레임워크 | MIT | LICENSE |
| postcss | 8 | CSS 후처리 도구 | MIT | LICENSE |
| eslint | 8 | 코드 스타일 검사 | MIT | LICENSE |
| eslint-config-next | 14.2.26 | Next.js용 ESLint 설정 | MIT | LICENSE |
| @types/react | 18 | React용 타입 정의 | MIT | LICENSE |
| @types/react-dom | 18 | React DOM용 타입 정의 | MIT | LICENSE |
| @types/node | 20 | Node.js용 타입 정의 | MIT | LICENSE |
- 회원가입 & SMS 인증
- 로그인 (tempToken 헤더 인증)
- 예외 처리 & 유효성 검사
- 1:1·2:2 랜덤 매칭
- 개발자에게 한마디등의 게시판
- Docker Compose 기반 인프라 구축
- 매칭 방식과 학번·MBTI를 설정하는 선호 조건 매칭
- 사용자 목록과 매칭 대기열을 관리하는 관리자 화면
- STOMP/SockJS 기반 채팅 화면은 구현되어 있으나 메인·매칭 결과 화면에서의 진입 경로는 최종 연결 확인 필요
- 게시글 신고 제출과 관리자 신고·삭제 관리 흐름 완성
- 각 번개모임 게시판 (커피 모임 등의 게시물 페이지)
- React 프론트와 CORS·쿠키 연동 최적화
💡 향후 아이디어: 맛집 지도 · 대화 가이드
- 지속적인 성능 개선
- 나쁜 코드 제거를 위한 리팩토링
- Google Java Style Guide 준수
- IntelliJ STS CheckStyle 플러그인 적용
- 가이드 링크: https://google.github.io/styleguide/javaguide.html
- Redis 등 캐싱 서버 적극 활용으로 서버 부하 감소
- N+1 쿼리 지양, DB 통신 최소화
- 적절한 인덱스 & 쿼리 튜닝
- 외부 API 호출은 비동기 처리
- 라이브러리: React 18
- 프레임워크: Next.js 14.2.26
- 언어: TypeScript
- 스타일링: Tailwind CSS 3.4.1, CSS Modules
- 상태 관리: Redux Toolkit, React Redux
- API 통신: Axios
- 프레임워크: Spring Boot
- 언어: Java 21
- 데이터베이스: MySQL, Redis (NoSQL)
- 메시지 큐: Kafka (여유 시 도입)
- Infra & CI/CD: Docker, Jenkins, AWS RDS, S3
-
첫 화면
- 앱 실행 시 “한모 : 한세에서 모여봐요!” 타이틀과 한모 캐릭터가 표시된다.
- 하단에 [매칭 확인] / [회원가입] 버튼이 있고,
회원가입→ 온보딩 절차 시작매칭 확인→ 로그인 후 매칭 현황으로 이동
-
전화번호 인증(본인 인증)
- 휴대폰 번호 입력 → 서버가 6자리 SMS 인증번호 발송
- 인증번호가 일치하면 임시토큰을 Redis에 키값으로 매핑해 저장
- 이 토큰은 회원가입 완료 시 영구 세션 토큰으로 교체
-
기본 정보 입력
- 입력 항목: MBTI, 성별, 학과(학부), 학번(입학 연도), 나이, 인스타그램 ID
- 서버가 값 검증·중복 체크 후 임시토큰 세션에 임시 보관 → 다음 단계 이동
-
랜덤 별명 생성
- 규칙: 학과명 + 랜덤 형용사 + 랜덤 동물 (예: “컴퓨터공학과 수줍은 하마”)
- “다시 뽑기” 1회만 허용
- 별명 확정 시 프로필에 저장되고, 임시토큰이 “회원가입 완료” 토큰으로 교체
-
메인 페이지
- 상단: 내 별명·매칭 상태
- 매칭 진행, 매칭 결과 확인 또는 취소, 게시판으로 이동하는 동작 제공
-
매칭하기 – 대기열 등록
- [매칭 시작] 클릭 시 설정
- 모드 선택: 1 : 1 동성 / 2 : 2 이성
- 희망 학번 범위
- 선호 MBTI
- 같은 학과는 무조건 제외
- 매칭 완료 후 24 시간 쿨다운(재매칭 불가)
- [매칭 시작] 클릭 시 설정
-
매칭 알고리즘 – 그룹 완성
- Redis 큐에 성별·학과·학번·MBTI 조건이 맞는 사용자를 순차 배치
- 1 : 1 → 동성, 2 : 2 → 남 2 + 여 2 구성
- 4명 충원 시
match_group생성, 전원status = MATCHED
-
매칭 완료 화면
- 매칭 등록 후 대기 화면으로 이동하며, 대기 화면에서는 결과를 자동으로 조회하지 않음
- 사용자가 메인 화면에 진입하면 매칭 결과를 한 번 조회하고, 응답에 따라 결과 확인 또는 매칭 취소 동작을 표시
- 결과 확인을 선택하면 매칭 방식에 맞는 결과 화면으로 이동하며, 해당 화면에서 결과 데이터를 다시 조회해 참여자의 별명과 인스타그램 ID를 표시
-
채팅 기능 (최종 연결 확인 필요)
- 채팅방 정보와 이전 메시지를 조회하고 텍스트 메시지를 전송하는 화면 구현
- STOMP/SockJS 구독을 통해 새 메시지를 수신하는 코드 구현
- 메인·매칭 결과 화면에서 채팅 화면으로 진입하는 사용자 흐름은 최종 연결 확인 필요
-
게시판
- “개발자에게 한 마디” 게시글 목록과 페이지 이동, 작성·수정·삭제 화면 구현
- 신고 모달은 존재하지만 신고 제출과 관리자 처리 흐름은 추가 구현 필요
default.mp4
-1.mov
default.mp4
_.mp4
