//프로젝트
추천
v0.85Open Beta2025-10-31 ~ 2025-12-17
on-fit

운동 소모임 매칭 서비스

// Team Lead (Full-cycle)
FrontendFrontendFrontend
on-fit icon
01 / 07
01
메인페이지

동네 기반 운동 모임을 카드형 피드로 보여주고, 필터와 위치 정보를 통해 원하는 번개를 빠르게 찾을 수 있는 메인페이지 화면입니다.

02 / 07
02
채팅 목록 화면

참여 중인 모임의 채팅방을 카드로 정리해 마지막 메시지, 미읽음 수, 리뷰 이동까지 한 번에 확인할 수 있도록 구성한 채팅 목록 화면입니다.

03 / 07
03
채팅방 화면

참여 중인 모임의 대화 내용을 확인하고, 일정과 참여자 정보를 함께 볼 수 있도록 구성한 채팅방 화면입니다.

04 / 07
04
캘린더 화면

월간 캘린더로 주최·참여 일정과 팔로우 기반 모임을 시각화해, 다가오는 운동 일정을 한눈에 확인할 수 있는 캘린더 화면입니다.

05 / 07
05
마이페이지

활동 통계, 동네 설정, 선호 운동, 트로피를 한 화면에 담아 개인 활동 현황을 관리할 수 있는 마이페이지 화면입니다.

06 / 07
06
번개 만들기 화면

위치 검색, 지도 선택, 날짜·시간, 인원, 난이도까지 단계적으로 입력해 모임을 쉽게 생성할 수 있도록 설계한 번개 만들기 화면입니다.

07 / 07
07
동네 설정/위치 모달

사용자의 활동 반경을 기준으로 동네를 설정하고, 지도에서 위치를 직접 확인할 수 있게 만들어 지역 기반 탐색을 강화한 동네 설정/위치 모달 화면입니다.

한눈에 보기
운동 소모임 매칭 서비스
역할
Team Lead (Full-cycle)
범위
13개
//핵심 포인트
5
01
Supabase로 백엔드(인증/DB) 구성
02
AWS EC2(Ubuntu) 기반 배포 및 도메인 연결(호스팅KR)
03
CI/CD 파이프라인 구성
04
Next.js 라우팅 구조/CSR-SSR 개념 학습 및 적용
05
카카오맵 API 연동 및 외부 라이브러리 도입 경험
//기술 스택
13
//FRONTEND(5)

탭을 바꿔가며 역할과 설명을 한 범주씩 확인할 수 있습니다.

Next.js
라우팅/렌더링 구조
App Router 기반으로 페이지 라우팅과 서버/클라이언트 책임을 분리해 전체 화면 흐름을 구성했다.
TypeScript
타입 안정성
API 응답/컴포넌트 Props 계약을 타입으로 고정해 런타임 오류를 줄이고 협업 시 실수를 예방했다.
React
UI 상태/컴포넌트
상태 변화에 따라 UI를 컴포넌트 단위로 조합하고, 재사용 가능한 화면 구조로 유지보수를 쉽게 했다.
Tailwind CSS
디자인 시스템/스타일
토큰(색/타이포/간격)과 유틸 기반으로 스타일 규칙을 표준화해 화면 간 일관성을 유지했다.
Kakao Maps API
도구(Utility)
Kakao Maps API을(를) 프로젝트의 안정성과 구현 속도를 위해 활용했다.