📌 프로젝트 소개

" 소소잇은 이웃 간 공동식사 및 공동구매를 연결하는 1인 가구 맞춤 커뮤니티 플랫폼입니다. "

배달비 부담, 혼밥의 외로움, 대용량 식재료 낭비 등의 일상적 불편을 함께 먹고 함께 소비하는 소소한 연결로 해소합니다.

실용적이고 일상적인 관계에 집중하여 누구나 부담 없이 참여할 수 있습니다.

📅 개발 기간

2026.03 ~ 2026.04

🔗 배포 URL

https://sosoeat.vercel.app/home

🏁 시작하기

# 1. 저장소 클론
git clone <https://github.com/your-repo/team9.git>
cd team9

# 2. 패키지 설치
npm install

# 3. 서버 실행
npm run dev

---

👥 팀 구성

안순현	정윤영	이상원	박지민	지성준
cncn0069	nunnong	sw61	nanuenyamini	Onuelen

---

🚀 기술 스택

Core

State & Data

Testing

Quality

Git

📖 기술 문서

Architecture

• FSD 폴더 구조

Conventions

• 프로젝트 컨벤션
• Git 워크플로우 & 커밋 컨벤션
• TanStack Query 컨벤션

---

📱 기능 소개 (Features)

1. 로그인 / 회원가입

소셜 로그인(카카오, 구글) 및 자체 회원가입을 지원합니다. 이메일 형식, 중복 가입, 비밀번호 규칙 등 실시간 유효성 검사를 통해 입력 오류를 즉시 안내합니다.

로그인	유효성 검사	회원가입 1단계
회원가입 2단계	회원가입 3단계

---

2. 홈

모임 목록을 한눈에 확인하고 원하는 모임으로 바로 이동할 수 있습니다.

홈

---

3. 검색

키워드 검색과 함께 카테고리 · 지역 다중 선택 · 날짜 범위 · 인기순 · 모임일 임박순 등 다양한 필터를 제공하여 원하는 모임을 빠르게 탐색할 수 있습니다.

검색	필터 1	필터 2	필터 3

---

4. 모임 생성

카카오맵 API를 연동하여 장소를 직접 검색하고 지도에서 확인할 수 있습니다. 모임 제목 · 카테고리 · 날짜 · 인원수 등을 단계별로 입력해 누구나 간단하게 모임을 개설할 수 있습니다.

1단계	2단계	지도 검색(장소)
3단계	4단계

---

5. 모임 상세 / 참여

모임의 제목 · 날짜 · 장소 · 인원 등 상세 정보를 한눈에 확인할 수 있습니다. 참여 여부 및 모임 확정 상태에 따라 UI가 동적으로 변화하며, 원하는 댓글에 답변할 수 있는 대댓글 기능과 공유 기능을 제공합니다.

전체 화면	참여 전	참여 후
확정 전	확정 후	댓글
공유

---

6. 소소토크

모임 외에도 일상을 자유롭게 공유하고 소통할 수 있는 커뮤니티 공간입니다. 굵게 · 기울임 · 밑줄 · 정렬 · 목록 · 이미지 첨부 등을 지원하는 리치 텍스트 에디터를 직접 개발하여 풍부한 글쓰기가 가능합니다.

목록	상세	에디터	공유

---

7. 마이페이지

프로필 이미지 크롭(Crop) 기능을 지원하며, 서비스 내 활동 내용을 수치로 확인할 수 있습니다. 모임 카드의 하트 버튼으로 찜한 모임을 저장하고, 참여한 모임 · 찜한 모임 · 내가 만든 모임을 탭으로 한눈에 관리할 수 있습니다.

메인	프로필 수정	이미지 변경
나의 모임	찜한 모임	내가 만든 모임

---

8. 알림

모임 참여 · 확정 · 취소 등 주요 이벤트에 대한 알림을 실시간으로 받을 수 있습니다.

알림

---

👥 R & R

🛠️ 안순현

담당 페이지 및 기능

• 모임 찾기 페이지
• 알림 내역

UI 컴포넌트

• dropdown
• progress bar
• date picker
• filter bar
• main-page-card
• 모임 만들기 버튼
• 모임 찾기 배너
• 지역 선택 modal
• 빈 페이지
• 알림 카드

🪄 정윤영

담당 페이지 및 기능

• 메인 페이지
• 모임 상세 페이지

UI 컴포넌트

• badge
• navigation-bar
• main footer
• best sosoeat card
• 유저 가이드 컴포넌트
• 상세 모임 정보 카드
• 카카오 맵 → 모임 위치
• 댓글 컴포넌트
• 모임 추천 컴포넌트

🌟 이상원

담당 페이지 및 기능

• 로그인 페이지
• 회원가입 페이지
• 인증 전반

UI 컴포넌트

• main banner
• footer
• 모임 만들기 modal
• login-form
• signup-form

📝 박지민

담당 페이지 및 기능

• 마이페이지
• 유저 정보 수정

UI 컴포넌트

• input
• mypage card
• user card
• count card
• tabs
• 빈 화면
• avatar edit

🎨 지성준

담당 페이지 및 기능

• 소소Talk 페이지

UI 컴포넌트

• 토크 카드 컴포넌트
• 토크 배너 컴포넌트
• 게시글 작성(마크다운)
• 토크 상세 컴포넌트
• 댓글 컴포넌트
• 수정 페이지

---

⚡ 성능 최적화

1. 리소스 최적화

CDN 전체 폰트 다운로드를 로컬 서브셋으로 전환해 실제 사용 폰트만 로드하도록 개선했습니다.

2. 번들 최적화 (448KB 감소)

• 모달, 카카오맵, 날짜 피커: Dynamic import로 필요 시점에만 로드
• Zod 스키마: Lazy Resolver로 폼 오픈 시 로딩
• 분석 도구: requestIdleCallback으로 페이지 로드 후 실행

3. 렌더링 최적화

• Streaming SSR + Suspense: 순차 패치를 병렬 처리로 변경
• React.cache + HydrationBoundary: 서버 데이터 재사용으로 중복 요청 제거
• preload + priority: LCP 이미지 즉시 다운로드 시작

---

🔍 KPT 회고

✅ Keep (계속 유지할 것)

• 빠른 PR 리뷰로 협업 흐름이 안정적으로 유지되었다.
• 화면 설계와 요구사항을 먼저 맞춘 덕분에 개발 방향성이 비교적 명확했다.
• 역할 분담이 잘 이루어져 각자의 작업 범위가 분명했다.

⚠️ Problem (개선이 필요한 부분)

• 요구사항 변경 사항이 즉시 공유모지 않아 비효율이 생겼다.
• PR 단위가 커질수록 리뷰 효율이 떨어졌다.
• 공통 UI 기준 부족으로 구현 방식에 차이가 발생했다.

🛠️ Try (시도할 개선 방안)

• 변경사항은 작업 전에 먼저 공유하는 협업 습관을 만든다.
• 리뷰하기 좋은 작은 단위의 PR 작성 기준을 정한다.
• 공통 컴포넌트 및 스타일 가이드를 초기에 정리한다.