📌 프로젝트 개요

“지친 일상 속, 에너지를 다시 움직일(reboot) 최적의 모임을 만나다”

관심사에 맞는 모임을 탐색하고, 참여·개설·관리할 수 있으며,
리뷰와 자유게시판 기능까지 제공하는 커뮤니티형 모임 플랫폼

기존 모임 서비스는 정보가 흩어져 있거나 탐색 과정이 복잡해, 사용자가 자신에게 맞는 모임을 찾고 참여 이후의 소통까지 이어가기 어렵다는 불편이 있었습니다.

RE:BOOT(리부트)는 이러한 문제를 줄이기 위해 지역, 날짜, 타입 기반의 탐색과 찜하기, 모임 참여하기 등으로 최적의 모임을 찾아 참여하고, 모임 개설 및 수정·삭제로 모임을 관리하며, 리뷰와 커넥트(자유 게시판)를 통해 사용자들 사이에서 소통하고, 알림과 마이페이지를 통해 개인 활동을 관리할 수 있는 구조로 설계했습니다.

⚒️ 주요 기능

모임 탐색: 지역 · 날짜 · 카테고리 기반으로 원하는 모임 탐색
모임 참여/관리: 모임 참여, 찜하기, 모임 개설 및 관리 기능 제공
리뷰 기능: 참여 후 리뷰 작성 및 조회 지원
커뮤니티 기능: 커넥트(자유게시판)에서 게시글 · 댓글 기반 소통 지원
개인화 기능: 알림과 마이페이지를 통한 개인 활동 관리

📎 배포 링크

👥 팀원 소개

위소현 팀장 / FE	김재희 FE	박근원 FE	송태하 FE	전유영 FE	최상호 FE
마이페이지 GNB & 알림내역	랜딩페이지, 찜한모임 모든리뷰, 404페이지	모임 상세페이지	로그인, 회원가입 유저페이지	모임찾기 모임 만들기 모달	커넥트(자유게시판) CRUD 전 부분 프로필 모달

🛠️ 기술 스택

Frontend

협업 및 프로젝트 관리

기술 선택 이유 및 용도

구분	기술	선택 이유
Frontend	Next.js	App Router 기반 라우팅과 `(auth)` / `(main)` route group 분리를 통해 페이지 흐름을 구조적으로 관리하기 위해 사용
Frontend	TypeScript	API 요청/응답 타입, props, 서버 데이터, 상태 구조를 안정적으로 다루기 위해 사용
Frontend	Tailwind CSS	반복 UI를 빠르게 구현하고 반응형 스타일을 한 파일 안에서 일관되게 관리하기 위해 사용
상태 관리 / 데이터 패칭	TanStack Query	서버 상태, 캐시, 무한 스크롤, mutation 이후 동기화를 한 흐름으로 관리하기 위해 사용
상태 관리 / 데이터 패칭	Zustand	가볍고 직관적인 전역 클라이언트 상태 관리를 위해 사용
상태 관리 / 데이터 패칭	React Hook Form	폼 상태와 유효성 검사를 효율적으로 처리하기 위해 사용
상태 관리 / 데이터 패칭	Zod	스키마 기반 유효성 검사로 타입 안전성을 확보하기 위해 사용
개발 환경 / 품질	MSW	백엔드 미완성 상황에서도 API 응답을 가정한 Mock 환경에서 프론트엔드 기능을 독립적으로 개발하고 테스트하기 위해
개발 환경 / 품질	Storybook	컴포넌트 단위 UI 개발 시 문서화와 테스트
개발 환경 / 품질	ESLint / Prettier	코드 스타일 일관성과 정적 분석 기반 품질 관리 가능
개발 환경 / 품질	pnpm	빠른 패키지 설치와 효율적인 디스크 공간 관리로 개발 환경을 가볍고 일관되게 유지

✨ 페이지 별 주요 기능

모든 페이지는 반응형(모바일, 태블릿, 데스크톱)으로 구현되었습니다.

1. 랜딩 페이지

CTA 중심 랜딩 구조
- 페이지 전반에서 모임 탐색으로 이어지는 행동 유도를 중심에 두고 섹션을 배치
스크롤 기반 Sticky 섹션 구현
- 스크롤 진행에 따라 단계별 콘텐츠가 전환되도록 구현하고, 반응형 환경에서도 한 화면 내에서 섹션 전체가 안정적으로 보이도록 레이아웃과 여백 최적화
서비스 흐름을 단계적으로 설명하는 구조
- 모임 발견 → 참여 → 사람 연결 → 다음 모임으로 이어지는 경험을 순서대로 보여주도록 구성

2. 로그인, 회원가입

이메일/비밀번호 기반 로그인 및 회원가입
Google(팝업) / Kakao(리다이렉트) 소셜 로그인 지원
모달과 전용 페이지 두 가지 진입 방식 지원
실시간 유효성 검사 및 비밀번호 표시/숨김 토글
인증 보안
- accessToken / refreshToken을 httpOnly 쿠키에 저장해 XSS/CSRF 방어
- accessToken 만료 시 자동 재발급 후 원래 요청 재시도
회원가입 후 자동 로그인, 실패 시 로그인 페이지로 안내
인증 상태 변경 시 React Query 캐시 즉시 동기화

로그인

회원가입

3. 모임 찾기

무한스크롤
- gcTime 5분, staleTime 0
- 찜하기나 모임 참여 관련 낙관적 업데이트, 목록 데이터는 바로 stale 처리하나 즉시 갱신하지 않음
- 업데이트가 빈번하게 일어나는 데이터이기 때문에 prefetch는 사용하지 않음
필터링, 검색 기능
- 브라우저 쿼리스트링 사용으로 주소창 직접 입력 시 필터링된 데이터 표시 가능
- 필터링된 데이터가 화면에 반영되지 않는 이슈 발생
  - Suspense+useSuspenseInfiniteQuery 사용 시 AnimatePresence 렌더링 이슈가 있어 useInfiniteQuery 로 변경
- 페이지 스크롤 시 필터 목록 포지셔닝

4. 모임 생성

비회원 유저는 진입 불가
두 가지 진입 방식
- 직접 URL 입력 또는 새로고침을 통해 진입
- 모임 찾기에서 버튼을 통해 진입(모달;Parallel,Intercepting Routes)
- 직접 접속하는 경우 모달 폼과는 다른 레이아웃으로, 좌측에 애니메이션 이미지 표시됨
- 배포 환경에서, 모임 생성 완료 후에도 같은 수준의 페이지(/meetup/…)에 모달이 뜨는 이슈 발생
  - Nextjs 이슈를 확인하여 현재 주소를 확인하는 조건 추가
단계별 폼 작성
- 한 개의 form 사용, 현재 단계가 아닌 fieldset을 css 로 숨김
- 현재 단계의 필드가 유효하지 않으면 다음 단계로 넘어갈 수 없음
  - 실시간 검사를 위해 controlled input 사용
  - provider로 모든 필드 데이터를 공유, 제출 시점에 요청 데이터 형식으로 일괄 변환
- 다음 버튼 활성화 시 엔터키를 사용해 다음 단계로 넘어갈 수 있음
  - 모든 필드에서 엔터 사용 감지: onKeyDown 이벤트 사용
    - 단 기본 Enter 동작은 허용/입력 중이 아닐 때만 동작(textarea 등)
  - 폼 외부이면서 모달 내부를 클릭하는 경우 동작하지 않는 이슈 발생
    - onBlurCapture (blur 이벤트 + capture true 옵션) 를 추가하여 특정 조건에는 포커스를 폼으로 옮기도록 제어
임시 저장 기능
- 실시간 sessionStorage에 저장
- 새로고침하더라도 데이터 유지
카카오 주소 검색
- 디바운싱 처리 및 문자가 합성 완료되었을 때 검색

5. 모임 상세

모임 상세 정보
- 모임 일정에 따른 deadline(마감 기한) 표시/미표시 & 참여 버튼 비활성화
- 찜하기 가능
- 주최자/참여자에 따른 UX/UI 구분
  - 주최자:
    - 공유하기
    - 모임 수정 & 삭제
  - 사용자:
    - 참여하기 / 참여 취소하기
참여 인원 목록
- 기본 인원 목록 표시 4명
- 5명 초과 시, +N 활성화
- 해당 +N 버튼 클릭 시, 전체 참가 인원 목록 조회, 10개씩 렌더링
- 아래로 스크롤할 때마다 10개씩 무한 스크롤
카카오 맵
- 응답받은 주소 값에 따라, 카카오 맵 UI 표시
- 주소 수정 시, 즉시 해당 주소 값으로 리렌더링
리뷰 조회
- 5개 이상 리뷰 등록 시, 페이지네이션 적용 (Default: 4개)
- 리뷰 작성자일 시, 리뷰 수정/삭제 가능
관련 모임
- 같은 지역(region) & 같은 카테고리(type) 기준으로 관련 모임 조회
- 찜하기 가능
각 섹션 별 스켈레톤 정의
- 하나의 섹션에서 오류 발생 시, 다른 섹션은 정상 동작 & 해당 섹션만 재시도

6. 찜한 모임 & 모든 리뷰

6-0. 공통

서버 프리패치 + 하이드레이션 기반 초기 렌더링
- 첫 진입부터 필터 조건이 반영된 데이터를 바로 출력
무한 스크롤 기반 목록 조회
- 페이지 이동 없이 목록을 연속 탐색할 수 있도록 구현
목록 필터
- URL 쿼리스트링 기반으로 필터 상태 관리
  - 새로고침, 공유, 재진입 시에도 동일한 조건 유지
- 모임 타입 탭, 모임 날짜, 지역, 정렬 기준으로 필터링
- 반응형 필터바 UX
  - 데스크톱·태블릿에서는 sticky 고정
  - 모바일에서는 스크롤 다운 시 숨김, 스크롤 업 시 재노출
- 필터 변경 시 목록 최상단 지점으로 스크롤 위치 보정
액션 이후 연관 쿼리 invalidate 처리
- 목록, 상세, 헤더 카운트, 마이페이지 등 연관 데이터 동기화
상태별 UI 분리
- 초기 로딩은 스켈레톤, 추가 로딩은 로더, 빈 결과는 Empty UI, 에러 발생은 재시도 UI 제공

6-1. 찜한 모임

비회원 유저 진입 불가
찜한 모임 목록 조회
목록 정렬 지원
- 찜한순, 모임 생성순, 모임 날짜순, 마감 임박순, 참여 인원순
찜하기 해제
- 해제 즉시 찜한 목록에서 제거
참여하기 / 참여 취소
- 카드에서 모달로 진입해 모임 정보를 확인한 뒤 참여 여부 변경 가능
- 액션 이후 관련 데이터 동기화

6-2. 모든 리뷰

전체 리뷰 목록 조회 및 평점 요약 통계 제공
- 모임 타입별 통계 조회 지원
목록 정렬 지원
- 작성일순, 점수순, 참여 인원순
회원은 본인 리뷰만 수정 및 삭제 가능
작성자 프로필 클릭 시 프로필 모달 제공
긴 리뷰 내용 접기 / 더보기
- 2줄을 초과하는 경우 더보기·접기 버튼 노출

7. 커넥트(자유 게시판)

게시판 메인 페이지

게시글 목록
- 전체 게시글 목록 조회 (서버 사이드 prefetch 적용)
- 키워드 기반 게시글 검색
- 정렬 필터 — 최신순 · 좋아요순 · 조회수순 · 댓글 많은순
- 페이지네이션 기반 목록 탐색
- 이번 주 HOT 게시물 섹션 별도 표시 (좋아요·조회수·댓글 기준 인기글)
- 목록 카드에 좋아요 수 · 댓글 수 · 작성자 표시

게시글 상세
- 게시글 내용 · 조회수 · 좋아요 수 · 댓글 수 표시
- 좋아요 토글 (추가 / 취소)
- 작성자 본인에게만 수정 · 삭제 버튼 노출
- Intercepting Routes 적용 — 목록에서 클릭 시 URL 유지하면서 모달로 상세 표시, 새로고침 시 전체 페이지로 자연스럽게 전환

게시글 작성 / 수정 / 삭제
- 제목 · 내용 · 이미지 입력
- 유효성 검증 적용
- 작성 · 수정 완료 후 목록 자동 이동
- 삭제 완료 시 토스트 알림 표시

댓글 작성 · 수정 · 삭제
- 댓글 목록 무한스크롤 (IntersectionObserver 기반, 3개씩 추가 로드)
- 최신순 정렬
- 본인 댓글에만 수정 · 삭제 버튼 노출
- 비로그인 상태에서 댓글 작성 시 토스트 알림

8. 마이페이지

공통 :

로그인한 사용자의 활동을 관리할 수 있는 페이지
프로필 수정, 리뷰 작성, 리뷰 수정의 input의 경우 검증 규칙은 zod 스키마로 분리하고, 폼 상태는 RHF를 통해 관리함으로써 UI 로직과 검증 로직을 분리 dirty 상태를 활용해 모달을 실수로 닫아도 사용자 입력이 없어지지 않도록 UX 개선
각 컴포넌트 별 ErrorBoundary + Suspense 설정으로 다른 탭에서 오류가 발생해도 해당 탭만 재시도하고 다른 탭은 정상 동작 가능, 이때 유저가 직접 재시도를 할 수 있도록 재시도 버튼 제공

프로필 설정 :

닉네임 : 닉네임 최대 8자 제한
프로필 이미지 수정
- 1MB 초과 시 이미지 업로드 제한
- 이미지 포멧을 JPEG, PNG, WebP, GIF 로 제한

탐색 탭 :

모임관리
- 참여 모임 : 내가 참여한 모임과 개설한 모임을 한꺼번에 관리할 수 있는 탭으로 모임 일시 기준 내림차순으로 제공
  - 모임 상태에 따라 사용자 행동 버튼을 다르게 제공 참여 취소 / 개설 확정 / 개설 취소 / 모임 삭제 / 찜 관리
  - 모임 진행 상태를 한눈에 확인할 수 있도록 배지 UI 제공 이용 예정 / 개설 대기 / 개설 확정 / 개설 취소 / 이용 완료 / 리뷰 작성완료
- 개설 모임 : 내가 개설한 모임을 관리할 수 있는 탭으로 개설 일시 기준 내림차순으로 제공된다
  - 참여 모임과 달리 참여한 모임 관리를 할 수 없으므로 참여취소 버튼을 제외한 모든 action / badge 제공
리뷰 관리
- 리뷰 작성 : 완료된 모임 중 작성하지 않은 리뷰 목록을 볼 수 있으며 모임 일시 기준 내림차순으로 제공된다.
  - 리뷰 작성이 가능하다
- 리뷰 목록 : 완료된 모임 중 작성한 리뷰 목록을 볼 수 있으며 작성일 기준 내림차순으로 제공된다.
  - 리뷰 더보기 / 접기 기능으로 일관된 리뷰 layout 제공
  - 리뷰 수정 / 삭제를 할 수 있는 버튼 제공
탐색 탭 내부 컨텐츠 이미지 및 모임 명 클릭시 상세 이동
상태 별 UI 제공
- 최초 진입: Skeleton UI
- 최초 진입 이후 로딩 상태: Loader
- 데이터가 없는 경우: Empty
- 에러가 발생한 경우: QueryErrorBoundary
탐색 탭은 모두 무한 스크롤 기반 탐색 제공
무한스크롤 UX 개선을 위해 mediaQuery 별 스크롤 주체 분리 및 scrollTop 버튼 제공
- 탭 이동시 해당 탭의 첫번째 항목을 볼 수 있도록 스크롤 위치 보정
1280px 이상의 경우 넓은 화면을 활용하여 탐색 중에도 프로필 수정 및 탐색을 자유롭게 하기 위해 탭 컨텐츠 내부를 기준으로 스크롤 가능
1279px 이하의 경우 탭 컨텐츠 내부를 기준으로 스크롤 하면 탐색 가능영역이 좁아져 window로 변경하되 탭을 sticky 형태로 제공

참여 모임

리뷰 목록

📁 폴더 구조


├── 📁 app/
│   ├── 📁 (auth)/                   # 로그인, 회원가입 경로
│   │   ├── login/
│   │   └── signup/
│   ├── 📁 (main)/
│   │   └── 📁 <케밥 케이스>/        # 모임 찾기, 찜한 모임, 모든 리뷰, 자유 게시판 등등...
│   │       ├── page.tsx
│   │       └── layout.tsx
│   ├── layout.tsx
│   └── page.tsx
│
├── 📁 components/                   # 전역 재사용 컴포넌트
│   ├── 📁 ui/                       # 기본 UI 컴포넌트 (Button, Input 등)
│   │   └── Button/
│   │       ├── index.tsx
│   │       └── index.stories.tsx
│   ├── 📁 commons/                  # 범용이되 도메인 강결합이 아니며 필수 사용이 아닌 컴포넌트
│   └── 📁 layout/                   # 레이아웃 컴포넌트 (Header, Footer)
│
├── 📁 features/                     # 기능 단위 구조
│   ├── 📁 shared/
│   │   └── 📁 components/           # 도메인 결합이 강하지만 여러 feature에서 함께 사용하는 컴포넌트
│   └── 📁 <카멜 케이스>/
│       ├── 📁 components/           # 해당 feature 내부에서만 사용하는 컴포넌트
│       ├── apis.ts                  # api 호출
│       ├── mutations.ts             # useMutation
│       ├── queries.ts               # useQuery
│       ├── types.ts                 # 해당 feature에서 사용하는 타입
│       ├── hooks.ts                 # 해당 feature에서만 사용하는 hooks (폴더 가능)
│       └── utils.ts                 # 해당 feature에서만 사용하는 utils (폴더 가능)
│
├── 📁 libs/                         # 공통 라이브러리 설정 및 인프라 모듈
├── 📁 utils/                        # 공통 유틸 함수
└── 📁 hooks/                        # 공통 커스텀 훅

구조 설계 원칙

인증 관련 페이지 (auth) / 일반 페이지 (main) 로 route group 분리
app/ 하위 폴더명: 케밥 케이스 / features/ 하위 폴더명: 카멜 케이스
큰 단위의 컴포넌트 내에 작은 단위 컴포넌트 파일을 중첩 생성 (파일명: 파스칼 케이스)

📅 개발 기간 및 진행 과정

2026.03.08 – 2026.04.17 (약 6주)

🔁 협업 방식

Git Flow 전략

main ──────────────────────────────────────────▶ (프로덕션 배포)
  └── develop ────────────────────────────────▶ (통합 개발 브랜치)
        ├── feature/브랜치 ──▶ merge ──▶ develop
        └── hotfix/브랜치  ──▶ merge ──▶ develop & main

브랜치	용도
`main`	실제 서비스에 배포되는 프로덕션 코드
`develop`	개발 중인 최신 기능이 통합되는 브랜치
`feature`	새로운 기능 개발 (develop에서 파생, 완료 후 develop으로 PR)
`hotfix`	운영 중인 긴급 버그 수정 (main에서 파생, 수정 후 main & develop에 병합)

release 브랜치는 현 단계에서는 미사용

브랜치 네이밍 규칙

# format
#{이슈번호}-{기능종류}-{작업설명}

# example
#1-feat-login
#23-feat-ui
#25-chore-dependency

접두사	의미
`feat/`	새로운 기능 추가
`fix/`	버그 수정
`refactor/`	코드 리팩토링
`chore/`	빌드 관련 수정, 패키지 매니저 설정 등
`test/`	테스트 코드 추가/수정
`docs/`	문서 수정
`improvement/`	기존 기능 개선
`config/`	환경 설정

커밋 컨벤션

<타입>(<범위>): <제목>  ← 40자 이내

<본문>  ← 선택 사항, 72자 이내 줄 바꿈

Resolves: #<이슈번호>
See also: None

타입	의미
`feat`	새로운 기능 추가
`fix`	버그 수정
`docs`	문서 수정
`style`	코드 포맷팅, 코드 변경 없는 경우
`refactor`	코드 리팩토링
`test`	테스트 코드 추가/수정
`chore`	빌드 관련, 패키지 매니저 설정 등

🚨 트러블슈팅

💡 개선 및 고도화 예정

주요 사용자 흐름을 안정적으로 검증할 수 있도록 테스트 코드 범위 확대 예정
키보드 탐색, 스크린리더 대응 등 접근성 보완 예정

⚙️ 실행 방법

# 1. 저장소 클론
git clone https://github.com/Re-bootWorks/Reboot.git

# 2. 패키지 설치
pnpm install

# 3. 개발 서버 실행
pnpm dev

# 4. 브라우저 접속
http://localhost:3000

📝 환경 변수

환경 변수 관련 문의: rolarola0315@gmail.com

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

📌 프로젝트 개요

⚒️ 주요 기능

📎 배포 링크

👥 팀원 소개

🛠️ 기술 스택

✨ 페이지 별 주요 기능

1. 랜딩 페이지

2. 로그인, 회원가입

3. 모임 찾기

4. 모임 생성

5. 모임 상세

6. 찜한 모임 & 모든 리뷰

6-0. 공통

6-1. 찜한 모임

6-2. 모든 리뷰

7. 커넥트(자유 게시판)

8. 마이페이지

📁 폴더 구조

📅 개발 기간 및 진행 과정

🔁 협업 방식

Git Flow 전략

브랜치 네이밍 규칙

커밋 컨벤션

🚨 트러블슈팅

💡 개선 및 고도화 예정

⚙️ 실행 방법

📝 환경 변수

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

📌 프로젝트 개요

⚒️ 주요 기능

📎 배포 링크

👥 팀원 소개

🛠️ 기술 스택

✨ 페이지 별 주요 기능

1. 랜딩 페이지

2. 로그인, 회원가입

3. 모임 찾기

4. 모임 생성

5. 모임 상세

6. 찜한 모임 & 모든 리뷰

6-0. 공통

6-1. 찜한 모임

6-2. 모든 리뷰

7. 커넥트(자유 게시판)

8. 마이페이지

📁 폴더 구조

📅 개발 기간 및 진행 과정

🔁 협업 방식

Git Flow 전략

브랜치 네이밍 규칙

커밋 컨벤션

🚨 트러블슈팅

💡 개선 및 고도화 예정

⚙️ 실행 방법

📝 환경 변수