💭 친구들이랑 같이 쓰는 구독 서비스는 점점 많아지는데, 이걸 한번에 확인할 방법이 없을까?
💡 그래서 만들었어요!
엔빵은 넷플릭스, 유튜브 프리미엄, 챗지피티 같이 친구들과 공유하는 구독을 한눈에 정리하고, 자동으로 관리해주는 서비스에요.
- 📌 이제 더 이상 누가 얼마 냈는지 확인할 필요 없어요.
- 📌 다음 결제일이 언제인지 헷갈릴 필요 없어요.
- 📌 각자 내야 할 금액도 계산해줘요.
👥 우리끼리, 깔끔하게, 공평하게
엔빵과 함께 스마트하게 구독을 관리해 보세요!
구글 로그인과 카카오 로그인을 지원합니다.
엔빵 금액, 참여 인원, 정기 결제일 등을 입력해 엔빵을 만들 수 있습니다.
친구를 초대하고 엔빵을 공유할 수 있습니다.
결제일마다 납부해야 하는 금액과 참여자들의 납부 여부를 확인할 수 있고, 납부 완료한 경우 체크를 통해 완료 여부를 표시할 수 있습니다.
캘린더에 표시된 날짜를 통해 참여 중인 엔빵의 결제일을 확인할 수 있습니다.
➡️ 디자인이 궁금하다면? Figma 바로가기
andbread/
├── assets/ # 이미지, 폰트, 아이콘 등 정적 파일 저장
│ └── logo.png
├── app/ # 페이지
│ ├── page.tsx
│ └── blog/
│ └── page.tsx
├── styles/
│ └── globals.css
├── components/ # 컴포넌트
│ ├── common/ # 공통 컴포넌트
│ └── Button.tsx
│ └── login/ # 컴포넌트 경로와 페이지 경로 동일하게 관리
│ └── LoginButton.tsx
├── lib/ # supabase 통신 관련 로직
│ └── supabaseClient.ts
│ └── nbread/
│ └── getNbreads.ts
│ └── insertNbread.ts
├── hooks/ # 커스텀 훅
│ └── useAuth.ts
├── store/ # zustand 전역 상태
│ └── useUserStore.ts
├── types/ # 타입 선언 폴더, 도메인별로 파일 분리해 관리
│ └── user.ts
│ └── nbread.js
├── next.config.ts
├── package.json
└── .next/
추후 업데이트 예정입니다.
| 버전 | 업데이트 내용 | 일자 |
|---|---|---|
v1.0 |
엔빵 서비스 최초 배포 | 2025.03.10 |
v1.1 |
구글 애널리틱스 추가 | 2025.03.11 |
v1.2 |
SEO 메타데이터 추가 | 2025.03.11 |
 |
 |
 |
 |
|---|---|---|---|
| 강보석 | 송수빈 | 신혜민 | 유성현 |
| 홈 페이지 구현 마이페이지 구현 엔빵 불러오기 기능 구현 납부 인원 확인 기능 구현 |
캘린더 페이지 구현 캘린더 기능 구현 엔빵 내역 불러오기 기능 구현 구글 애널리틱스 세팅 |
UI 디자인 엔빵 생성하기 페이지 구현 엔빵 상세보기 페이지 구현 엔빵 생성/수정/삭제 기능 구현 DB 설계 및 Supabase 세팅 |
로그인 페이지 구현 엔빵 초대 페이지 구현 소셜 로그인 기능 구현 엔빵 초대 기능 구현 Supabase Auth 세팅 |
| 기간 | 일정 |
|---|---|
| 25.01.12 ~ 25.02.03 | 서비스 기획 및 UI 디자인 |
| 25.02.03 ~ 25.02.14 | 페이지 퍼블리싱, DB 설계 및 Supabase 테이블 세팅 |
| 25.02.15 ~ 25.03.09 | 기능 구현 및 버그 수정 |
| 25.03.10 ~ 25.03.11 | 서비스 배포 |
| 25.03.11 ~ 25.03.23 | 1차 서비스 운영 기간 |
1. 원격 저장소를 복제합니다.
$ git clone https://github.com/andbread/Andbread_Frontend.git
2. 프로젝트 폴더로 이동합니다.
$ cd Andbread_Frontend
3. 필요 모듈을 설치합니다.
$ npm install
4. 개발 환경을 실행합니다.
$ npm run dev