1️⃣ 유레카 프론트엔드 비대면 1조 : UNOA

UNOA(You know NOA)

💡 UNOA은 한 번에 쉽게, 나한테 딱 맞게

추천부터 비교, 혜택 정리까지 한 곳에서 나에게 딱 맞는 요금제 관리 도우미입니다.

🔗팀노션 🎨피그마 🌐배포사이트 👨‍🏫발표자료

---

🏃‍♂️ 주요기능

기능	설명
챗봇 채팅 모드	GPT 기반 자연어 챗봇 + 실시간 스트리밍 출력
챗봇 간단 모드	버튼 선택 기반으로 요약된 프롬프트를 생성해 요금제를 추천하는 기능
요금제 리스트	카테고리별 분류, 정렬/필터 기능
요금제 비교	요금제 2개 선택 시 사이드 비교창으로 비교, 요금제 비교 AI 요약 기능
마이페이지	LG U+ 가입자 : 사용 요금제 및 혜택 정보 제공 LG U+ 미가입자 : 챗봇 서비스 유도 및 가입 시 받을 수 있는 혜택 정보 제공
회원가입/로그인	카카오 간편 로그인 및 자체 가입 지원
비회원 접근	챗봇/리스트/비교 기능 모두 사용 가능, 단 마이페이지 제외

---

📚 Tech Stack

💻 FE Development

💻 BE Development

🧠 AI & 실시간 통신

🌐 배포

---

🎥 페이지별 시연 영상

메인페이지

데스크탑 / 모바일 영상 보기

💻 데스크탑

-.-.1.mp4

📱 모바일

-.-.mp4

요금제 추천 페이지

데스크탑 / 모바일 영상 보기

💻 데스크탑

-.-.mp4

📱 모바일

_.-.-.mp4

요금제 한눈에 보기 페이지

데스크탑 / 모바일 영상 보기

💻 데스크탑

-.-.mp4

📱 모바일

-.-.mp4

회원가입/로그인 및 마이페이지

데스크탑 / 모바일 영상 보기

💻 데스크탑

-.-.mp4

📱 모바일

-.-.mp4

---

⌛ Developed Period

2025.06.09 ~ 2025.06.26 (18 days)

👩‍💻 팀원

김현우A # 메인페이지 # 요금제페이지(비교하기)

송은재 # 챗봇페이지(간단모드) # 마이페이지(혜택)

심영민 # 챗봇페이지(채팅모드)

홍성현 # 요금제페이지(리스트)

황주경 # 회원가입/로그인페이지 # 마이페이지(회원정보)

---

📁 디렉토리 구조

📂UNOA
|
|-- UNOA-front/ (프론트엔드)
|   |
|   |-- node_modules/
|   |-- public/
|   |-- src/
|   |   |
|   |   |-- apis/
|   |   |-- assets/
|   |   |-- components/
|   |   |-- contexts/
|   |   |-- data/
|   |   |-- hooks/
|   |   |-- pages/
|   |   |-- routes/
|   |   |
|   |   |-- index.css
|   |   |-- main.jsx        (리액트 앱 시작점)
|   |
|   |-- .gitignore
|   |-- index.html
|   |-- package.json
|   |-- vite.config.js

---

🎯 커밋 컨벤션

• feat: Add a new feature
• fix: Bug fix
• docs: Documentation updates
• style: Code formatting, missing semicolons, cases where no code change is involved
• refactor: Code refactoring
• test: Test code, adding refactoring tests
• build: Build task updates, package manager updates

---

🔰 실행 방법

# 1. 의존성 설치 (루트 디렉토리에서 실행)
npm install

# 2. 클라이언트 및 서버 빌드
npm run build

# 3. 개발 서버 실행
npm run dev

# .env 파일
VITE_BACK_URL={YOUR_BACKEND_URL}