MODi - 스마트한 통신 생활의 시작

🌱 프로젝트 소개

본 프로젝트 MODi는 "기술이 가족을 연결할 수 있다"는 생각에서 시작된 웹 기반 챗봇 플랫폼입니다. 통신사 요금제 추천과 가족 소통을 융합한 서비스로, 개인과 가족이 함께 요금제를 비교하고 비용을 절감할 수 있도록 도와줍니다.

가족 스페이스 기능을 통해 초대코드로 가족을 초대하고, 공동 목표인 새싹 키우기를 통해 가족 간 소통과 협력을 유도합니다.

맞춤형 챗봇은 사용자의 통신 성향을 분석해 최적의 요금제를 추천하며, 음성 기능(TTS/STT)을 지원합니다.

MODi는 단순한 비용 절약을 넘어, 가족 간 정서적 유대감을 강화하고, 세대 간 디지털 격차를 해소하는 새로운 패밀리테크 경험을 제공합니다.

🏁 기능 명세

기능명	설명
AI 기반 요금제 추천 챗봇	사용자의 설문 데이터와 사용 히스토리를 바탕으로 개인화된 요금제 추천 제공
가족 스페이스	가족끼리 초대코드를 이용해 요금제 추천 결과 공유 및 의견 소통 공간 제공
성장형 UX (새싹 키우기)	챗봇 사용, 미션 수행 등 활동을 통해 가족이 함께 새싹을 키우며 소통하는 경험 제공
카카오 연동 회원가입	카카오 계정을 통한 간편 회원가입 및 사용자 성향 파악 데이터 확보
음성 지원 (TTS/STT)	메시지 입력 및 응답을 음성으로 지원해 편의성 향상
설문 기반 맞춤형 추천	통신 사용 성향 설문을 통해 사용자를 5가지 캐릭터로 분류하여 최적의 요금제 추천
챗봇 추천 공유 기능	챗봇이 추천한 요금제를 가족 스페이스 내에서 쉽게 공유하고 논의할 수 있도록 지원
새싹 성장 리워드	미션 수행으로 새싹을 성장시키고, 최종 단계 달성 시 리워드 제공 (쿠폰, 요금 할인, 실제 나무 심기 등)
감성 메시지 카드	가족 간의 감성적 소통을 돕는 메시지 카드를 스페이스 내에 공유 가능
마이페이지 관리	개인 맞춤형 설문 결과, 요금제 히스토리 등 사용자의 개인 정보를 한눈에 관리 가능

🌎 TEAMS

🔧 기술 스택

구분	사용 기술
Frontend
Styling
State Management
API Client
Backend
Authentication

📁 프로젝트 구조

MODi/
├── app/                    # Next.js App Router
│   ├── login/             # 로그인 관련 페이지
│   └── (app)/             # 메인 콘텐츠 그룹
│       ├── basic-info/    # 기본 정보 입력
│       ├── chat/          # AI 상담
│       ├── family-space/  # 가족 공간
│       ├── family-space-tutorial/  # 가족 공간 튜토리얼
│       ├── my-page/       # 마이페이지
│       ├── plant-game/    # 식물 게임
│       ├── plant-selection/  # 식물 선택
│       ├── result/        # 결과 페이지
│       ├── survey/        # 설문조사
│       └── survey-result/ # 설문 결과
├── components/            # 재사용 가능한 컴포넌트
│   ├── chat/              # 채팅 관련 컴포넌트
│   ├── family-space/      # 가족 공간 관련 컴포넌트
│   ├── layouts/           # 레이아웃 컴포넌트
│   ├── login/             # 로그인 관련 컴포넌트
│   ├── my-page/           # 마이페이지 컴포넌트
│   ├── plant/             # 식물 관련 컴포넌트
│   ├── plant-game/        # 식물 게임 컴포넌트
│   ├── plant-selection/   # 식물 선택 컴포넌트
│   ├── providers/         # 프로바이더 컴포넌트
│   ├── survey/            # 설문조사 컴포넌트
│   └── ui/                # 기본 UI 컴포넌트 (Radix UI 기반)
├── contexts/              # React Context
├── hooks/                 # 커스텀 훅
│   ├── family/            # 가족 관련 훅
│   └── plant/             # 식물 관련 훅
├── lib/                   # 유틸리티 및 API
│   └── api/               # API 클라이언트
├── public/                # 정적 파일
│   ├── animations/        # 애니메이션 파일
│   ├── images/            # 이미지 파일
│   └── videos/            # 비디오 파일
├── services/              # 서비스 레이어
├── store/                 # Zustand 스토어
├── styles/                # 스타일 파일
└── types/                 # TypeScript 타입 정의

♟ ERD

🖥 SCREENS

화면	이미지
메인 페이지
챗봇 일반모드
챗봇 가족모드
가족 스페이스
새싹 키우기 - 물주기
새싹 키우기 - 레벨업
보상 받기

---

2025 MIT License