돌핀(Dolpin)은 사용자 중심의 커뮤니티 플랫폼으로, 위치 기반 정보 공유와 소통을 통해 더 나은 사용자 경험을 제공합니다. 본 프로젝트는 Next.js 기반의 프론트엔드 아키텍처를 사용하며, 모듈화된 구조와 최신 웹 기술을 적용하여 안정적이고 유지보수가 용이한 애플리케이션을 구현하고 있습니다.
- React 19: 컴포넌트 기반 UI 라이브러리
- TypeScript 5.4.5: 정적 타입 지원으로 코드 안정성 향상
- Next.js 15.3.1: React 기반 프레임워크, SSR/SSG 지원
- React-Query: 서버 상태 관리
- Zustand: 클라이언트 상태 관리
- Fetch API: HTTP 클라이언트
- Emotion: CSS-in-JS 라이브러리
- Tailwind CSS: 유틸리티 기반 CSS 프레임워크
- Jest: 자바스크립트 테스트 프레임워크
- React Testing Library: React 컴포넌트 테스트
- Storybook: UI 컴포넌트 개발 및 문서화
- ESLint/Prettier: 코드 스타일 및 품질 관리
- Husky/lint-staged: Git 훅 기반 코드 검사
/src
├── /assets # 이미지, 폰트, 아이콘 등 정적 파일
├── /components # 재사용 가능한 UI 컴포넌트
│ ├── /common # 공통 컴포넌트 (Button, Input 등)
│ ├── /layout # 레이아웃 관련 컴포넌트
│ └── /domain # 도메인별 컴포넌트
├── /constants # 상수값 정의
├── /features # 기능 단위 모듈
│ ├── /auth # 인증 관련 기능
│ ├── /user # 사용자 관련 기능
│ ├── /community # 커뮤니티 관련 기능
│ ├── /place # 장소 관련 기능
│ └── /onboarding # 온보딩 관련 기능
├── /hooks # 커스텀 훅
├── /pages # 라우팅 페이지
├── /services # API 서비스 로직
├── /store # 상태 관리
├── /styles # 글로벌 스타일, 테마 설정
├── /types # TypeScript 타입 정의
└── /utils # 유틸리티 함수
- Node.js 16.x 이상
- pnpm 8.x 이상
# 저장소 클론
git clone https://github.com/100-hours-a-week/7-team-ddb-fe.git
# 디렉토리 이동
cd 7-team-ddb-fe
# 의존성 설치
pnpm install# 개발 서버 실행
pnpm run dev
# 기본적으로 http://localhost:3000 에서 확인 가능# 프로덕션용 빌드
pnpm run build
# 프로덕션 서버 실행
pnpm run start- 컴포넌트는 함수형 컴포넌트로 작성합니다.
- 파일명은 PascalCase로 작성합니다. (예:
UserProfile.tsx) - 상수는 UPPER_SNAKE_CASE로 작성합니다. (예:
MAX_COUNT) - 변수와 함수는 camelCase로 작성합니다. (예:
getUserData()) - 타입과 인터페이스는 PascalCase로 작성합니다. (예:
UserProfileProps)
- 컴포넌트는 기능/역할별로 분리하여 작성합니다.
- 컴포넌트의 재사용성을 고려합니다.
- Props는 명확하게 타입을 정의합니다.
- 불필요한 렌더링을 줄이기 위해
React.memo,useMemo,useCallback을 적절히 활용합니다.
- 모든 컴포넌트는 기본적인 렌더링 테스트를 작성합니다.
- 핵심 비즈니스 로직은 단위 테스트를 작성합니다.
- Storybook을 통해 UI 컴포넌트를 문서화합니다.
- 소셜 로그인 (카카오)
- 사용자 프로필 관리
- 사용자 설정 및 알림 관리
- 게시글 작성 및 조회
- 댓글 및 대댓글 기능
- 게시글 검색 및 필터링
- 위치 기반 정보 탐색
- 장소 검색 및 북마크
- 지도 통합 인터페이스
- 새 사용자 가이드
- 서비스 소개 및 튜토리얼
- GitHub Issues를 활용한 이슈 추적
- 기능 단위 브랜치 관리 (feat/#, style/#, fix/#_ 등)
- CI/CD 파이프라인을 통한 자동화된 배포
- 개발(dev), 스테이징(staging), 프로덕션(prod) 환경 분리
- API 명세서 및 인터페이스 문서 관리
- 컴포넌트 가이드라인 및 디자인 시스템 문서화
| 이름 | 역할 | 주요 업무 |
|---|---|---|
| suzy.kang (강수지) | 프론트엔드/팀장 | • 프론트엔드 개발 • UI/UX 설계 • 사용자 인터페이스 구현 • 애자일 스크럼 관리 • 칸반보드 및 GitHub 위키 관리 • 디스코드 봇 설정 및 자동화 시스템 구축 |
| eric.choi (최진우) | 백엔드 | • 백엔드 시스템 설계 및 개발 • API 설계 및 구현 • 데이터베이스 모델링 |
| juny.lee (이현준) | 인공지능 | • AI 모델 설계 및 개발 • 모델 학습 및 최적화 • 데이터 분석 및 처리 |
| jensen.hwang (황찬희) | 인공지능 | • AI 모델 설계 및 개발 • 추천 시스템 구현 • 성능 분석 및 개선 |
| peter.kang (강동석) | 클라우드 | • 클라우드 인프라 구축 • 시스템 아키텍처 설계 • 서버 관리 및 모니터링 |
| lily.shin (신지영) | 클라우드 | • 클라우드 서비스 구현 • 배포 자동화 • 보안 및 성능 최적화 |
MIT License