EarDream은 가족 구성원들이 함께 추억을 공유하고 소통할 수 있는 디지털 앨범 플랫폼입니다. 가족 여행, 일상의 순간들을 사진과 함께 기록하고, 가족만의 소통 공간을 만들어 더욱 따뜻한 가족 관계를 형성할 수 있도록 도와줍니다.
2025 블레이버스 MVP 개발 해커톤 시즌2 최우수상 수상 프로젝트입니다.
- 가족 구성원 초대 및 관리
- 가족별 전용 소통 공간 제공
- 실시간 소식 공유 및 댓글 기능
- 여행 및 일상 순간을 테마별로 정리
- 사진 업로드 및 관리
- 가족 구성원별 앨범 공유
- 직관적이고 사용하기 쉬운 인터페이스
- 반응형 웹 디자인
- 카카오 로그인 연동
- React 19.1.1 - 최신 React 버전을 활용한 컴포넌트 기반 개발
- TypeScript 5.8.3 - 타입 안정성과 개발 생산성 향상
- Vite 7.1.2 - 빠른 개발 서버와 빌드 도구
- TailwindCSS 4.1.12 - 유틸리티 기반 CSS 프레임워크
- Zustand 5.0.8 - 가벼운 상태 관리 라이브러리
- Axios 1.11.0 - HTTP 요청 처리
- React Router DOM 7.8.1 - SPA 라우팅
- ESLint 9.33.0 - 코드 품질 관리
- PostCSS 8.5.6 - CSS 후처리
- Autoprefixer 10.4.21 - CSS 벤더 프리픽스 자동화
src/
├── api/ # API 통신 관련
│ ├── auth.ts # 인증 API
│ └── family.ts # 가족 관련 API
├── assets/ # 정적 자원
│ └── icons/ # SVG 아이콘 컴포넌트
├── components/ # 재사용 가능한 UI 컴포넌트
│ ├── auth/ # 인증 관련 컴포넌트
│ ├── common/ # 공통 컴포넌트
│ ├── family/ # 가족 관련 컴포넌트
│ ├── feed/ # 피드 관련 컴포넌트
│ ├── layout/ # 레이아웃 컴포넌트
│ ├── other/ # 기타 컴포넌트
│ └── payment/ # 결제 관련 컴포넌트
├── hooks/ # 커스텀 훅
├── pages/ # 페이지 컴포넌트
├── services/ # 비즈니스 로직 및 API 서비스
├── stores/ # Zustand 상태 관리
├── styles/ # 글로벌 스타일
├── types/ # TypeScript 타입 정의
└── utils/ # 유틸리티 함수
- 카카오 소셜 로그인 연동
- 사용자 인증 상태 관리
- 보호된 라우트 구현
- 가족 생성 및 초대 기능
- 가족 구성원 관리
- 가족별 전용 공간 제공
- 게시글 작성 및 공유
- 댓글 및 상호작용
- 실시간 피드 업데이트
- 테마별 앨범 생성
- 사진 업로드 및 관리
- 가족 구성원별 앨범 공유
- Node.js 18.0.0 이상
- npm 또는 yarn
- 저장소 클론
git clone [repository-url]
cd EarDream-FE- 의존성 설치
npm install- 개발 서버 실행
npm run dev- 브라우저에서
http://localhost:4000접속
npm run buildnpm run lint- main: 프로덕션 배포용 브랜치
- feature/#이슈번호: 기능 개발 브랜치
- 예:
feature/#3,feature/#15
- 예:
feat:새로운 기능 구현fix:버그 수정chore:환경 설정, 초기 세팅, 문서 등refactor:코드 리팩토링style:코드 포맷팅, 스타일 변경 (기능 변경 없음)
프로젝트 내에서 제공되는 템플릿을 사용하여 일관된 형식으로 작성해주세요.
./deploy-dev.sh./deploy.sh- 이슈를 생성하여 작업할 내용을 명시
feature/#이슈번호형식으로 브랜치 생성- 개발 완료 후 Pull Request 생성
- 코드 리뷰 후 main 브랜치로 병합
이 프로젝트는 2025 블레이버스 MVP 개발 해커톤 시즌2에서 개발되었습니다.
- 프론트엔드 개발자
- UI/UX 디자이너
- 백엔드 개발자
- 프로젝트 매니저
프로젝트에 대한 문의사항이나 제안사항이 있으시면 이슈를 통해 연락해주세요.