EarDream - 가족 소통을 위한 디지털 앨범 플랫폼

프로젝트 소개

EarDream은 가족 구성원들이 함께 추억을 공유하고 소통할 수 있는 디지털 앨범 플랫폼입니다. 가족 여행, 일상의 순간들을 사진과 함께 기록하고, 가족만의 소통 공간을 만들어 더욱 따뜻한 가족 관계를 형성할 수 있도록 도와줍니다.

2025 블레이버스 MVP 개발 해커톤 시즌2 최우수상 수상 프로젝트입니다.

주요 기능

가족 소통 기능

• 가족 구성원 초대 및 관리
• 가족별 전용 소통 공간 제공
• 실시간 소식 공유 및 댓글 기능

디지털 앨범 기능

• 여행 및 일상 순간을 테마별로 정리
• 사진 업로드 및 관리
• 가족 구성원별 앨범 공유

사용자 경험

• 직관적이고 사용하기 쉬운 인터페이스
• 반응형 웹 디자인
• 카카오 로그인 연동

기술 스택

Frontend

• React 19.1.1 - 최신 React 버전을 활용한 컴포넌트 기반 개발
• TypeScript 5.8.3 - 타입 안정성과 개발 생산성 향상
• Vite 7.1.2 - 빠른 개발 서버와 빌드 도구
• TailwindCSS 4.1.12 - 유틸리티 기반 CSS 프레임워크

State Management

• Zustand 5.0.8 - 가벼운 상태 관리 라이브러리

HTTP Client

• Axios 1.11.0 - HTTP 요청 처리

Routing

• React Router DOM 7.8.1 - SPA 라우팅

Development Tools

• 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

설치 및 실행

1. 저장소 클론

git clone [repository-url]
cd EarDream-FE

2. 의존성 설치

npm install

3. 개발 서버 실행

npm run dev

4. 브라우저에서 http://localhost:4000 접속

빌드

npm run build

코드 품질 검사

npm run lint

개발 가이드

브랜치 전략

• main: 프로덕션 배포용 브랜치
• feature/#이슈번호: 기능 개발 브랜치
  • 예: feature/#3, feature/#15

커밋 컨벤션

• feat: 새로운 기능 구현
• fix: 버그 수정
• chore: 환경 설정, 초기 세팅, 문서 등
• refactor: 코드 리팩토링
• style: 코드 포맷팅, 스타일 변경 (기능 변경 없음)

이슈 및 PR 템플릿

프로젝트 내에서 제공되는 템플릿을 사용하여 일관된 형식으로 작성해주세요.

배포

개발 환경 배포

./deploy-dev.sh

프로덕션 배포

./deploy.sh

기여하기

1. 이슈를 생성하여 작업할 내용을 명시
2. feature/#이슈번호 형식으로 브랜치 생성
3. 개발 완료 후 Pull Request 생성
4. 코드 리뷰 후 main 브랜치로 병합

라이선스

이 프로젝트는 2025 블레이버스 MVP 개발 해커톤 시즌2에서 개발되었습니다.

팀원

• 프론트엔드 개발자
• UI/UX 디자이너
• 백엔드 개발자
• 프로젝트 매니저

연락처

프로젝트에 대한 문의사항이나 제안사항이 있으시면 이슈를 통해 연락해주세요.