DiffLens Frontend

DiffLens.mp4

DiffLens는 패널 데이터 분석 및 비교를 위한 웹 애플리케이션입니다.

Preview

Members

LEAD/BE	FE	FE/DE	BE	AI/DATA
박세웅	윤예진	윤혜성	김준용	신정호

Tech Stack

• React 19 - UI 라이브러리
• TypeScript - 타입 안정성
• Vite - 빌드 도구
• React Router - 라우팅
• TanStack Query - 서버 상태 관리
• AmCharts 5 - 차트 라이브러리
• Tailwind CSS - 스타일링
• Axios - HTTP 클라이언트

Getting Started

Installation

npm install
# 또는
pnpm install

Installation

npm run dev
# 또는
pnpm dev

Build

npm run build
# 또는
pnpm build

Preview Build

npm run preview
# 또는
pnpm preview

Project Structure

src/
├── api/              # API 클라이언트
├── assets/           # 정적 자산 (아이콘, 이미지, 로고)
├── components/       # 재사용 가능한 컴포넌트
├── constants/        # 상수 정의
├── contexts/         # React Context
├── data/             # 정적 데이터
├── hooks/            # 커스텀 훅
├── layouts/          # 레이아웃 컴포넌트
├── pages/            # 페이지 컴포넌트
├── routes/           # 라우팅 설정
├── styles/           # 전역 스타일
├── types/            # TypeScript 타입 정의
└── utils/            # 유틸리티 함수

Key Features

• 패널 관리: 패널 정보 조회 및 관리
• 라이브러리: 분석 결과 저장 및 관리
• 데이터 시각화: 다양한 차트를 통한 데이터 분석
• 비교 분석: 여러 라이브러리 간 비교
• 응답 데이터 관리: 전체 응답 데이터 조회 및 관리

License

이 프로젝트는 한성대학교 기업연계 SW캡스톤디자인 수업에서 진행되었습니다.