|
|
|
|
|
- Runtime: Node.js
- Framework: React + Vite
- Styling: CSS
- HTTP Client: Axios
- Charting: Recharts
- Linting: ESLint
- Node.js (v18.x or higher recommended)
- npm
#Clone the repository
git clone https://github.com/hansung-sw-capstone-2025-2/2025_8_B_FE.git
cd 2025_8_B_FE
#Install dependencies
npm install
#Create a .env.local file in the root of the project and add your environment variables
VITE_API_BASE_URL=http://your-backend-api-url.com
#Run the development server
npm run dev
.
├── public/
├── src/
│ ├── api/ # API 호출 관련 함수 (axios 인스턴스)
│ ├── assets/ # 프로젝트 내부에서 사용하는 에셋
│ │
│ ├── components/ # 재사용 가능한 UI 컴포넌트
│ │ ├── InsightFinal.jsx # 인사이트 최종 결과 표시
│ │ ├── KeywordSelector.jsx # 키워드 선택 드롭다운
│ │ ├── LoadingSpinner.jsx # 로딩 스피너
│ │ ├── Sidebar.jsx # 사이드바 메뉴
│ │ └── Topbar.jsx # 상단바
│ │
│ ├── contexts/ # React Context (전역 상태 관리)
│ │ └── AuthContext.jsx # 인증 관련 Context
│ │
│ ├── data/ # 정적 데이터
│ │ └── keywords.js # 검색용 키워드 목록
│ │
│ ├── pages/ # 라우팅되는 페이지 컴포넌트
│ │ ├── auth/
│ │ │ ├── LoginPage.jsx # 로그인 페이지
│ │ │ └── SignupPage.jsx # 회원가입 페이지
│ │ │
│ │ ├── CheckboxSearchPage/
│ │ │ └── CheckboxSearchPage.jsx # 체크박스 기반 검색 페이지
│ │ │
│ │ ├── DashboardPage/
│ │ │ └── DashboardPage.jsx # 대시보드
│ │ │
│ │ ├── dictionary/
│ │ │ └── Dictionary.jsx # 용어 사전
│ │ │
│ │ ├── howtouse/
│ │ │ └── Howtouse.jsx # 서비스 사용법 안내
│ │ │
│ │ ├── mypage/
│ │ │ └── MyPage.jsx # 마이페이지
│ │ │
│ │ ├── SearchPage/
│ │ │ └── SearchPage.jsx # 자연어 검색 페이지
│ │ │
│ │ └── SegmentPage/
│ │ └── SegmentPage.jsx # 세그먼트 분석 페이지
│ │
│ ├── styles/ # 전역 및 공통 스타일
│ └── utils/ # 유틸리티 함수
│ └── excelExporter.js # Excel 내보내기 기능
│
├── .gitignore
├── index.html
├── package.json
└── vite.config.js
- 자연어 기반 패널 검색: "서울에 사는 20대 남성"처럼 일상적인 언어로 원하는 조건의 사용자를 간편하게 검색할 수 있습니다.
- 상세 조건 필터링: 다양한 카테고리와 키워드를 체크박스로 선택하여 원하는 사용자 그룹을 정교하게 추출합니다.
- 데이터 시각화 대시보드: 검색된 사용자 데이터를 다양한 차트와 그래프로 시각화하여 직관적인 분석을 돕습니다.
- 세그먼트 분석: 특정 조건으로 그룹화된 사용자들의 특징과 인사이트를 심층적으로 분석하고 리포트를 제공합니다.
- 결과 데이터 다운로드: 분석한 결과를 Excel 파일로 다운로드하여 보고서나 다른 자료에 활용할 수 있습니다.
본 프로젝트는 한성대학교 기업연계 SW캡스톤디자인 수업에서 진행되었습니다.