온핏

서비스명: 온핏(on-fit)목표:누구나 쉽게 동네에서 함께 운동할 사람을 찾고,실력/취향/시간대에 맞게 즉시 모임을 개설하거나 참여할 수 있는 운동 커뮤니티 플랫폼.20~40대 직장인 및 대학생 중심의 근거리 운동 참여자운동을 꾸준히 하고 싶지만 함께할 사람이 없는

오늘은 온핏 서비스에서사용자가 직접 “모임을 등록”할 수 있는 기능을 완성했다.프론트 → 백엔드 → DB까지 흐름을 직접 연결하면서,Next.js의 Route Handler와 Supabase, 그리고 axios의 역할을 확실히 이해할 수 있었다.번개 모임 작성 폼 구현

오늘은 On-Fit 프로젝트에서운동 번개(모임) 게시글을 DB에서 불러오는 기능을 구현했다.이전 글에서는 게시글을 등록하는 POST API를 만들었고,이번에는 GET 요청으로 목록을 가져와메인 화면에서 카드 형태로 보여주는 작업을 했다.우선 Supabase Dashbo

이번 팀 프로젝트에서 “현재 위치를 기반으로 사용자의 동네를 표시하는 기능”이 필요했다.마침 지도 기능이 있으면 UX적으로도 좋을 것 같아서, 카카오맵 API를 직접 붙여보기로 했다.이번 글에서는 모달 컴포넌트부터 LocationModal, 그리고 카카오 지도 API

오늘은 현업 개발자에게 받은 피드백을 바탕으로 Next.js에서 서버 컴포넌트와 클라이언트 컴포넌트를 구분하고,JS 번들을 최소화하는 방향으로 리팩터링한 과정을 정리해본다.이번 작업을 통해 “왜 use client를 신중히 써야 하는지”, “SSR/CSR 차이”를 몸소

처음엔 서버 라우트에서 Supabase를 다룰 때 sbAdmin (Service Role Key 기반 관리자 클라이언트) 을 썼다.이 방식은 RLS(Row Level Security)를 완전히 우회하기 때문에,로그인 여부나 author_id 같은 체크를 서버에서 직접

이 글은 온핏(On-Fit) 프로젝트의 채팅 기능을 실제로 구현한 과정 전체를 정리한 것이다.단순히 코드만 나열하는 것이 아니라,DB 스키마 → Rooms 생성 로직 → Participants 관리 → 채팅방 리스트 API 구성 → 화면 렌더링 → 라우팅 문제 해결 과

온핏 프로젝트에서 기능이 어느 정도 완성되자마자 가장 먼저 떠오른 건 딱 하나였다.“이제… 진짜 서비스처럼 주소 찍고 접속해보고 싶다.”이번 글은 Next.js + Supabase 기반 온핏(on-fit) 프로젝트를 AWS EC2에 처음 배포한 과정을 정리한 기록이다.

1편에서 http://EC2_IP:3000으로 접속은 되지만, 이건 어디까지나 임시다.실서비스처럼 쓰려면:사람이 기억하기 쉬운 도메인80/443 포트만 노출HTTPS(SSL) 적용까지 가야 한다.나는 hosting.kr에서 onfit.today라는 도메인을 구

앞의 두 편까지는 전부 수동 배포였다.이제부터는 진짜 개발자다운(?) CI/CD 이야기를 적어보려 한다.내가 설계한 흐름은 이렇다.dev 브랜치에서 개발dev에 push 될 때마다 → CI 빌드 체크dev → main으로 PR 생성PR에서 다시 CI 체크 통과해야만 →

온핏(On-Fit) 프로젝트에서 채팅방 읽음 처리 기능을 직접 설계하고 구현했다.단순히 “안 읽은 메시지 개수만 보여주면 되는 거 아님?”이라고 생각했지만,막상 구현하려니 아키텍처부터 정해야 할 게 꽤 많았다.이 글에서는 내가 이 기능을 어떻게 구조화했고,왜 이런 방식

최근에 온핏(On-Fit) 프로젝트에서 “함께 운동한 멤버에게 칭찬 리뷰 남기기” 기능을 개발하게 됐다.개발하면서 자연스럽게 Next.js App Router, Supabase, API 설계, 그리고 UX적인 고민까지 이어졌고,내가 어떤 과정을 거쳐 기능을 완성했는지

오늘 만든 기능은 간단히 말하면 이거다.게시글 카드(FitCard)에 있는 ‘주최: 닉네임’ 글자를 누르면해당 유저의 프로필을 보여주는 모달(ProfileModal)이 뜨도록 하는 기능이 과정은 단순히 문자 클릭 → 모달 띄우기처럼 보이지만, 실제로는 몇 가지 중요한

온핏 프로젝트에서 위치는 초반부터 계속 건드리던 부분인데,처음엔 단순히 "부산광역시 남구 ○○체육관"처럼 문자열만 저장하고 있었다.이 방식의 한계는 명확했다.“내 주변 5km 이내” 같은 반경 기반 검색 불가문자열 파싱이라 오타나 공백에 취약도시가 바뀌면 필터 로직도

팀 프로젝트를 진행하면서 가장 많이 느끼는 것은코드보다 중요한 건 ‘팀원 간의 규칙 공유’라는 사실이다.이번에 나는 ‘반경 기반 게시글 필터링’ 기능을 구현하면서다른 팀원이 만든 Filter 컴포넌트와 미묘한 불일치 때문에예상치 못한 버그를 겪었다.그 과정을 기록해본다

팀 프로젝트 온핏(On-Fit)에서 채팅방 리스트 UI는 내가 만들었다.다만 데이터 패칭과 상태 관리는 다른 팀원이 React Query로 구성해둔 상태였다.문제는, 기능을 이어서 붙이던 중 채팅방을 들어갔다가 뒤로가기 했을 때 안읽은 메시지(unreadCount) 뱃