Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/woorifisa-projects-3rd/woori-zip-fe

🏡 소비 기반 집 추천 서비스
https://github.com/woorifisa-projects-3rd/woori-zip-fe

Last synced: 25 days ago
JSON representation

🏡 소비 기반 집 추천 서비스

Host: GitHub
URL: https://github.com/woorifisa-projects-3rd/woori-zip-fe
Owner: woorifisa-projects-3rd
Created: 2024-11-04T05:27:32.000Z (3 months ago)
Default Branch: main
Last Pushed: 2024-12-14T16:01:14.000Z (about 2 months ago)
Last Synced: 2024-12-14T17:17:44.165Z (about 2 months ago)
Language: JavaScript
Size: 6.84 MB
Stars: 0
Watchers: 0
Forks: 2
Open Issues: 8
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

## 🏠 프로젝트 소개

주거 정보와 대출 추천을 결합하여 청년들의 경제적 부담을 줄이고,

소비 패턴 분석을 통해 만족도 높은 주거 환경을 제공하는 맞춤형 부동산 금융 플랫폼 **"Woori Zip"** 입니다.

---

## 👥 팀원 소개

---

## 🚀 주요 기능

| 기능 | 설명 | 사용 기술 |
|--------------------|-------------------------------------------------------------------------------|-------------------------------|
| 🏠 **부동산 추천** | 금융 데이터와 부동산 정보를 결합하여 사용자 맞춤형 부동산 추천 제공 | Next.js, Spring Boot |
| 📍 **위치 기반 필터링** | Kakao Maps API를 활용한 부동산 위치 표시 및 필터링 | Kakao Maps API, React |
| 👤 **사용자 계정 관리** | 회원가입, 로그인 및 사용자 정보 관리 | JWT |
| 📊 **데이터 시각화** | 부동산 데이터의 시각적 분석 제공 | Chart.js, React |

---

## 🎥 실행 화면

#### **클라이언트**
| 메인 페이지 | 로그인 | 회원가입 |
|-------------|--------|----------|
| | | |

| 지도 페이지 | 소비 패턴 분석 페이지 |
|-------------|-----------------------|
| | |

| 회원-마이페이지 | 관리자-마이페이지 |
|------------------|-------------------|
| | |

---

## 🛠️ 기술 스택

![기술 스택](https://github.com/user-attachments/assets/55389294-a71c-4d05-95ec-d79b0f651130)

### **Frontend (Next.js)**
- **기술**: ⚛️ React, Context API, Axios, Styled Components
- **특징**:
- 📍 Kakao Maps API 연동으로 위치 기반 필터링 구현
- 📱 반응형 UI 설계로 다양한 디바이스 지원

### **Backend (Spring Boot)**
- **기술**: Spring Boot, JPA, MariaDB
- **특징**:
- 🔗 RESTful API 설계로 효율적인 데이터 통신 제공
- 🔑 JWT 기반 인증 시스템 구현

### **Cloud Infrastructure**
- **AWS 기반**:
- 🗂️ 서비스 서버와 뱅킹 서버를 분리하여 설계
- 🚀 CodeDeploy를 이용한 지속적 배포
- 🗃️ S3를 이용한 정적 파일 관리
- 🌐 Route 53을 통한 도메인 관리
- 🔒 IAM으로 보안 정책 설정 및 접근 제어
- ⚙️ EC2와 로드 밸런서를 활용한 트래픽 분산
- 🛢️ RDS(MariaDB)로 데이터베이스 관리
- 📊 Prometheus로 성능 모니터링

---

## 📋 개발 및 기여 분석

#### **Frontend Development**
- 🛠️ **기능 구현**:
- 필터링 UI 개발 및 Kakao Maps API 통합
- 사용자 친화적인 페이지 전환 및 데이터 표시

#### **Backend Development**
- 🖥️ **특징**:
- 부동산 데이터 CRUD API 설계 및 구현
- 데이터베이스 최적화를 통한 고성능 제공

#### **CI/CD 구축**
- 🚀 **효율적인 배포**:
- GitHub Actions를 활용한 CI/CD 파이프라인 구축
- CodeDeploy와 S3를 통해 안정적인 배포 프로세스 구성

---

## 🖼️ 아키텍처

---

## 🚀 프로젝트 실행
#### **Frontend**
1. `npm install` 실행
2. `.env.local` 파일 생성 후 아래 내용 추가:
```
NEXT_PUBLIC_API_URL=https://api.woorizip.com
NEXT_PUBLIC_KAKAO_MAPS_KEY=your-kakao-maps-key
```
3. `npm run dev`로 실행

#### **Backend**
1. `application.yml` 파일에 데이터베이스 및 AWS 설정 추가
2. Spring Boot 애플리케이션 실행

#### **배포**
1. CodeDeploy와 S3를 통해 배포 설정
2. EC2와 로드 밸런서 설정으로 배포된 서비스 확인

---