📢 프로젝트 소개

FOUND(파운드)는 관심사가 비슷한 사람들과 함께 운동할 수 있도록 돕는 실시간 매칭 플랫폼입니다. Supabase Realtime을 활용한 실시간 채팅 기능을 통해 유저들은 즉시 소통하며 운동 약속을 잡을 수 있고, 약속 생성 및 관리(CRUD) 기능을 통해 체계적으로 운동 일정을 계획할 수 있습니다. 또한, 구글과 카카오 소셜 로그인을 지원하여 번거로운 가입 과정 없이 간편하게 시작할 수 있습니다.

FOUND와 함께 당신의 완벽한 운동 파트너를 찾아보세요! 💪🔥

💪 FOUND

📅 프로젝트 기간

2025.03.20 ~ 2025.03.27

🔥 프로젝트 계기

• 다양한 매칭 플랫폼에서 영감을 받아, 번거롭고 제한적인 제한적인 기존 운동 매칭 서비스를 개선하고자 기획되었습니다.
• 혼자 하는 운동의 한계를 해결하고, 관심사가 맞는 사람들과 커뮤니티를 생성할 수 있는 기회를 제공하고자 개발되었습니다.
• 운동 약속을 체계적으로 관리할 수 있는 기능이 필요하다고 느껴, 약속 생성 및 관리(CRUD) 기능을 통해 보다 편리한 운동 환경을 만들고자 했습니다.
• Supabase Realtime을 활용한 실시간 소통 기능을 직접 구현하며, 보다 원활한 사용자 경험을 제공하는 기술을 익히고자 했습니다.
• Next.js와 TypeScript를 활용한 협업 경험을 쌓고, 실시간 데이터 처리와 동적 UI를 효과적으로 구현하며 개발자 간 원활한 협업을 목표로 했습니다.

💏 멤버 소개

임재원	강지수	김민경
팀장 채팅/약속 생성 담당	MateList 담당 미들웨어	회원가입/로그인 담당 헤더, 로고 디자인
윤주하	최종욱
마이 페이지 담당 약속 리스트	마이페이지 담당 메인페이지

🛠 기술스택

📌 프로그래밍 언어 및 프레임워크

🎨 UI 프레임워크 및 스타일링

✅ 코드 품질 및 포맷팅

🗄️ 백엔드 및 데이터베이스

🗃️ 버전, 상태관리

🚀 주요 기능

📝 회원가입 / 로그인

• 사용자는 이메일, 비밀번호, 닉네임, 상태메세지, 거주지, 관심종목을 입력하여 회원가입이 가능합니다.
• 회원가입 시 클라이언트 상태 관리는 Zustand를 사용해 관리하며, 회원의 정보는 실시간으로 상태에 반영됩니다.
• 소셜 로그인 기능으로 구글과 카카오 로그인을 지원합니다.

🏠 메인 (이미지 슬라이드)

• 상단 캐러셀을 통해 서비스의 핵심 컨셉과 주요 기능을 직관적으로 확인할 수 있습니다.
• shadcn 컴포넌트를 활용하여 서비스 무드에 맞게 커스텀화하였습니다.
• 디자인의 일관성과 개발 효율성을 높이기 위해 공통 컴포넌트(common components)를 제작하였습니다.

🏋️‍♂️ 파우니 리스트

• 페이지에서 사용자에게 관심 카테고리 매칭 대상 리스트를 보여주는 기능을 구현 하였습니다.
• 서버에서 받은 데이터를 서버 컴포넌트에서 처리하고, 개별 카드 형태로 사용자 정보를 표시하였습니다.

🗣️ 실시간 채팅 / 약속 생성 및 확인

• 운동 관심사가 같은 사용자와 실시간 채팅이 가능합니다.
• 채팅방 내 유저는 약속을 생성할 수 있으며 약속을 확인할 시 마이페이지에서 약속을 확인할 수 있습니다.

👋🏻 마이페이지

• 자신의 프로필 정보를 조회할 수 있습니다.
• 회원가입 시 입력한 닉네임, 주소 등의 정보를 수정하고, 프로필 사진을 등록할 수 있습니다.
• 친구와 잡은 운동 약속을 앞으로 있을 약속과 지난 약속으로 나누어 확인할 수 있습니다.
• 각 약속의 세부 정보를 확인할 수 있습니다.
• 프로필 공개 여부를 설정할 수 있습니다.

⚒️ 트러블 슈팅

📝 Parallel 라우트를 이용한 모달 구현하기

🎨 와이어 프레임

📌 와이어 프레임 보러가기

📁 프로젝트 구조

found

public/
└── images/ : 이미지 리소스
src/
├── app/
│   ├── (layout)/                      :  공통 레이아웃
│   ├── @modal/(.)appointment/[id]/    : 약속 생성/수정 모달
│   ├── appointment/[id]/              : 약속 상세 페이지
│   ├── chatting/[id]/                 : 채팅 상세 페이지
│   ├── matelist/                      : 매칭 카드 리스트
│   ├── mypage/[id]/[appointment-id]/  : 마이페이지 약속 상세
│   └── sign/                          : 로그인, 회원가입
│
├── constants/                         : 상수 모음
├── hooks/                             : 커스텀 훅
├── providers/                         : 전역 상태 및 Provider 설정
├── services/                          : API 및 서버 통신 함수
├── types/                             : 타입 정의
├── ui/
│   ├── common/                        : 공통 UI 컴포넌트
│   └── shadcn/                        : shadcn 기반 UI 컴포넌트
└── utils/lib/                         : 유틸 함수

기타:
- tailwind.config.ts
- tsconfig.json

ERD