🛒 Jupiter - 스마트 가격비교 플랫폼

jupiter/frontend 프로토타입을 기반으로 제작된 React 웹 애플리케이션입니다. AI 기반 가격 예측 기능을 갖춘 현대적인 쇼핑몰 가격비교 플랫폼을 목표로 합니다.

🚀 기술 스택

Frontend

• React 19 - 사용자 인터페이스 라이브러리
• Vite - 빠른 빌드 도구 및 개발 서버
• Tailwind CSS v3 - 유틸리티 기반 CSS 프레임워크
• @tanstack/react-query - 서버 상태 관리 (API 데이터 캐싱, 동기화, 에러 처리를 자동화하여 복잡한 상태 관리 로직을 간소화)
• Chart.js - AI 가격 예측 차트 시각화
• React Chart.js 2 - React용 Chart.js 래퍼
• React Router Dom - 클라이언트 사이드 라우팅
• Font Awesome - 아이콘 라이브러리
• Vitest - 빠른 테스트 프레임워크

Backend (연동)

• Spring Boot - RESTful API 서버
• OpenAI GPT API - AI 가격 예측 엔진
• Java 21 - 백엔드 개발 언어

✨ 주요 기능

🎯 핵심 기능

• ✅ AI 가격 예측 - OpenAI GPT 기반 미래 가격 예측 차트
• ✅ 실시간 가격 비교 - 여러 쇼핑몰 가격 한눈에 비교
• ✅ 가격 히스토리 추적 - 시계열 가격 변화 데이터
• ✅ 스마트 상품 검색 - 카테고리별 필터링
• ✅ 상품 상세 정보 - 평점, 리뷰, 스펙 정보

🎨 UI/UX

• ✅ 완전 반응형 디자인 - 모바일, 태블릿, 데스크톱 지원
• ✅ 현대적인 인터페이스 - Tailwind CSS 기반 디자인
• ✅ 인터랙티브 차트 - Chart.js 기반 시각화
• ✅ 컴포넌트 기반 아키텍처 - 재사용 가능한 React 컴포넌트
• ✅ 부드러운 애니메이션 - 호버 효과 및 트랜지션

📁 프로젝트 구조

jupiter-react/
├── public/                    # 정적 에셋 (이미지, 폰트 등)
├── src/
│   ├── components/            # 재사용 가능한 UI 컴포넌트
│   │   ├── layout/            # 페이지 레이아웃 (헤더, 푸터)
│   │   ├── sections/          # 페이지의 각 섹션
│   │   ├── AlcoholPreloader.jsx    # 로딩 스피너 컴포넌트
│   │   └── PricePredictionChart.jsx # AI 가격 예측 차트 컴포넌트
│   ├── hooks/                 # 커스텀 React 훅 (컴포넌트 간 로직 재사용을 위한 함수)
│   │   └── useFileUpload.js   # 파일 업로드 관리 훅
│   ├── pages/                 # 라우팅될 페이지 컴포넌트 (18개)
│   │   ├── Home.jsx           # 메인 홈페이지
│   │   ├── Shop.jsx           # 상품 목록 페이지
│   │   ├── ProductDetail.jsx  # 상품 상세 페이지
│   │   ├── Community.jsx      # 커뮤니티 게시판
│   │   ├── AdminPanel.jsx     # 관리자 패널
│   │   └── ...                # 기타 페이지들
│   ├── services/              # API 서비스 계층
│   │   ├── api.js             # 기본 API 클라이언트
│   │   ├── authService.js     # 인증 서비스
│   │   ├── adminService.js    # 관리자 서비스
│   │   └── ...                # 기타 서비스들
│   ├── utils/                 # 유틸리티 함수
│   │   ├── categoryUtils.js   # 카테고리 관련 유틸리티
│   │   └── fileUtils.js       # 파일 처리 유틸리티
│   ├── App.jsx                # 메인 앱 컴포넌트 (라우터 설정)
│   ├── index.css              # 전역 CSS 스타일
│   └── index.jsx              # 애플리케이션 진입점
├── INTEGRATION_GUIDE.md       # 백엔드 API 연동 가이드
├── package.json               # 프로젝트 의존성 및 스크립트
├── tailwind.config.js         # Tailwind CSS 설정
└── vite.config.ts             # Vite 설정

🔧 기술적 특징

React Query 도입 이유

• 서버 상태 관리: API 호출, 캐싱, 동기화를 자동화하여 개발 복잡도 감소
• 성능 최적화: 중복 요청 방지, 백그라운드 데이터 갱신, 지능적 캐싱
• 사용자 경험: 로딩 상태, 에러 처리, 재시도 로직을 일관되게 제공
• 실시간성: 가격 데이터의 실시간 업데이트와 동기화가 중요한 쇼핑몰 특성에 적합

Custom Hooks (커스텀 훅)

React 16.8에서 도입된 기능으로, 컴포넌트 로직을 재사용 가능한 함수로 분리:

• 상태 로직 재사용: 여러 컴포넌트에서 동일한 상태 관리 로직 공유
• 관심사 분리: UI 렌더링과 비즈니스 로직을 명확히 구분
• 테스트 용이성: 로직을 독립적으로 테스트 가능
• 코드 가독성: 복잡한 컴포넌트를 더 작고 이해하기 쉬운 단위로 분해

🤖 AI 가격 예측 시스템

주요 기능

• 실시간 예측: OpenAI GPT 모델을 활용한 가격 예측
• 시각화: Chart.js 기반의 인터랙티브 차트
• 히스토리 분석: 과거 가격 데이터 기반 미래 예측
• 설명 제공: AI가 예측 근거 설명 제공

데이터 흐름

상품 가격 히스토리 → OpenAI API → AI 예측 결과 → Chart.js 시각화

차트 구성

• 파란색 실선: 실제 가격 추이 (과거 데이터)
• 빨간색 점선: AI 예측 가격 (미래 4주)
• 툴팁: 가격 정보 및 예측 근거 표시

🎨 커스텀 컬러 테마

• Primary: #1a365d (다크 블루)
• Secondary: #d69e2e (골드)
• Accent: #2d3748 (차콜)
• 폰트: Open Sans

🔧 개발 현황

✅ 완료된 기능

• AI 가격 예측 시스템
• 반응형 웹 디자인
• 상품 상세 페이지
• 가격 비교 인터페이스
• Chart.js 기반 시각화
• 백엔드 API 연동 (인증, 어드민, 커뮤니티)

🚧 개발 예정

• 크롤링 시스템 구축
• 실시간 가격 업데이트
• 데이터베이스 연동
• 실제 상품 데이터 적용

📖 상세 개발 가이드: INTEGRATION_GUIDE.md 참조