Thoth Frontend

Thoth는 사용자의 자연어 질문을 이해하고, 직관적인 패널(Panel) UI를 통해 최적의 검색 결과를 시각화하여 제공하는 웹 애플리케이션입니다.

[시작화면]

initTyping.mp4

[초기검색화면]

preView.mp4

[편집화면]

[템플릿변경]

template.mp4

[추가&삭제]

add.remove.mp4

[드래그&리사이즈]

drag.resize.mp4

[태그변경]

tag.mp4

[메인화면]

mainView.mp4

Members

LEAD/BE	PM/FE	FE	AI	DATA
채민수	유민호	송기환	이재혁	홍주영

Tech Stack

Frontend Core

• React 19 - UI 구축 핵심 라이브러리
• TypeScript - 코드 안정성을 위한 정적 타입 시스템
• Vite - 초고속 개발 및 빌드 도구
• Tailwind CSS - 유틸리티 퍼스트 스타일링 프레임워크

Data & State Management

• @tanstack/react-query - 서버 데이터 페칭 및 캐싱 관리
• lodash - 배열 및 객체 처리를 위한 유틸리티 라이브러리

Visualization & UX

• Recharts - 검색 결과 데이터 시각화
• Framer Motion - UI 요소에 부드러운 애니메이션 및 인터랙션 적용
• html2canvas / jsPDF - 화면 내용을 PDF/이미지로 내보내기 기능 구현

Run

Installation

git clone https://github.com/hansung-sw-capstone-2025-2/2025_8_H_FE.git
cd 2025_8_H_FE

npm install
# 또는
yarn install

Run Dev Server

npm run dev
# 또는
yarn dev

Build

npm run build
# 또는
yarn build

Project Structure

src/
  ├── components/               # UI 컴포넌트 모음
  │   ├── state/                # 로컬 상태 관리 컴포넌트
  │   ├── widgets/              # 대시보드/패널 위젯 컴포넌트
  │   ├── DashboardComponent.tsx
  │   ├── PlaceHolderWidget.tsx
  │   └── WidgetWrapper.tsx
  ├── hooks/                    # 커스텀 React 훅
  ├── layouts/                  # 주요 페이지 레이아웃
  │   ├── CustomizationView.tsx # 화면 커스터마이징 뷰
  │   ├── MainView.tsx          # 메인 검색 및 대시보드 뷰
  │   └── PreView.tsx           # 미리보기 화면
  ├── services/                 # API 통신 및 데이터 로직
  ├── styles/                   # 전역 스타일 설정
  ├── themes/                   # 테마 및 디자인 토큰
  ├── types/                    # TypeScript 타입 정의
  ├── utils/                    # 공용 유틸리티 함수
  ├── viewController/           # 뷰/로직 제어 컨트롤러
  ├── App.tsx                   # 앱 진입점 및 라우팅
  └── main.tsx                  # React DOM 렌더링

Key Features

• 자연어 AI 검색: 사용자의 질문 의도를 파악하여 AI가 최적의 답변과 시각화 패널을 제공
• 대시보드 커스터마이징: 편집 모드를 통해 사용자가 직접 위젯을 배치하고 화면 구성을 자유롭게 수정
• 검색 태그 설정: 원하는 검색 의도에 맞춰 태그를 직접 설정하여 정교한 검색 결과 필터링
• 다이내믹 패널 UI: 검색 결과의 특성에 따라 차트, 텍스트, 리스트 등 최적의 형태로 시각화
• PDF/이미지 내보내기: 분석된 패널 및 대시보드 화면을 보고서 형태로 저장

License

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