모모임

모모임은 관심사가 비슷한 사람들과 함께하는 모임 플랫폼입니다.

1. 프로젝트 소개

취미 모임부터 전문 동호회까지 다양한 형태의 모임을 쉽게 찾거나 직접 만들며 모임 운영 및 참여할 수 있는 서비스 입니다.

2. 프로젝트 목적

• 혼자 하기 어려운 취미나 관심사를 함께 하면서 새로운 경험을 제공

• 다양한 분야에서 같은 관심사를 가진 사람들을 한 곳에 모아 쉽게 연결할 수 있는 공간 제공

• 단기적인 모임뿐만 아니라 꾸준히 활동할 수 있는 동호회형 즉 정기적인 모임 운영

  
  

🖇️ 배포 링크

https://www.momoim.co.kr/

📅 프로젝트 기간

2024년 11월 25일 ~ 현재 진행 중 (주요 기능 개발 완료 후 지속적으로 개선 및 유지 보수 중)

👥 팀원 구성

• Frontend: 3명

  이태희

  장재우

  주승연

• Backend: 2명

  김승환

  인세훈

• Designer: 1명

🚀 설치 및 실행 방법

기본 실행

npm install
npm run dev

로컬 HTTPS 설정 (선택 사항)

HTTPS 환경에서 특정 기능(예: Set-Cookie 테스트)을 개발하거나 디버깅하려면 HTTPS 개발 환경 설정 가이드를 따라 진행하세요.

🛠️ Skills

패키지 관리
Development
Testing
코드 품질
배포

🔍 아키텍처

💻 화면 구성

1. 로그인 및 회원가입

로그인

회원가입 폼

관심 카테고리

• 닉네임과 이메일 중복확인 후 회원가입 진행

• 다음 단계로 활동 지역과 관심 카테고리 분야를 지정 후 회원가입 완료

• 회원가입에 성공하면 가입한 이메일로 로그인

  
  

2. 메인 페이지(홈)

• 카테고리, 지역, 날짜 필터링 및 최신, 인원별 정렬

• Tanstack-query 무한 스크롤 활용한 모임 데이터 랜더링

• 해당 모임 찜하기

  
  

3. 모임 생성

• Zod 스키마 정의 및 React Hook Form 활용 form 상태와 유효성 관리

• s3 presigned url 이미지 파일 업로드

  
  

4. 모임 상세

모임 상세 정보

맴버 리스트

리뷰 및 평점

• 모임 신청 / 취소 / 삭제 / 수정

• 맴버 리스트 확인 및 모임장 기준 맴버 제외

• 모임에 대한 리뷰와 평점 및 수정 / 삭제

  
  

5. 마이페이지

프로필 수정

나의 일정

나의 모임

리뷰

• 프로필 및 관심 카테고리 수정

• 참여한 모임에 대한 나의 일정 캘린더 확인

• 나의 모임 및 찜한 모임 확인

• 작성 가능한 리뷰 작성 및 작성한 리뷰 확인

  
  

📚 협업

• PR / Issue 템플릿 설정

• commit 컨벤션

  • husky + commitlint 설정

• Git Projects 활용 일정관리

• Notion 문서화

  • 프로젝트의 최신 정보 참고와 정기회의 기록 및 공유

  • 여러 링크(api 명세, 피그마, 배포 주소 등)들을 한번에 접근할 수 있도록 공유

    
    

📂 폴더 구조

src/
├── api/                   # API 요청 함수들
├── app/                   # Next.js App Router 디렉토리
│   ├── layout.tsx         # 전체 앱 레이아웃
│   ├── (auth)/            # 인증 관련 라우트 그룹
│   │   ├── login/         # 로그인 페이지
│   │   └── signup/        # 회원가입 페이지
│   └── (main)/            # 메인 라우트 그룹
│       ├── gatherings/    # 모임 상세페이지
│       └── mypage/        # 마이페이지
├── assets/                # 정적 자산 파일
├── components/            # 재사용 가능한 컴포넌트
├── constants/             # 상수 값 정의
├── hooks/                 # 재사용 가능한 커스텀 훅
├── lib/                   # 유틸리티 함수
├── queries/               # React Query 관련 로직
├── schemas/               # 데이터 검증 로직 (Zod)
├── store/                 # Zustand 상태 관리
├── styles/                # 전역 스타일
├── types/                 # TypeScript 타입 정의
└── middleware.ts