LobeChat은 Next.js 프레임워크 기반으로 구축된 AI 대화 애플리케이션입니다. 다양한 기능과 특성을 구현하기 위해 여러 기술 스택을 사용합니다.
## 기본 기술 스택
LobeChat의 핵심 기술 스택은 다음과 같습니다:
- **프레임워크**: [Next.js](https://nextjs.org/)를 선택하여 서버 사이드 렌더링, 라우팅 프레임워크, Router Handler 등 핵심 기능을 제공합니다.
- **컴포넌트 라이브러리**: 기본 컴포넌트 라이브러리로 [Ant Design (antd)](https://ant.design/)를 사용하며, 비즈니스 컴포넌트 라이브러리로 [lobe-ui](https://github.com/lobehub/lobe-ui)를 도입했습니다.
- **상태 관리**: 가볍고 사용하기 쉬운 상태 관리 라이브러리인 [zustand](https://github.com/pmndrs/zustand)를 선택했습니다.
- **네트워크 요청**: 데이터 페칭을 위한 React Hooks 라이브러리 [swr](https://swr.vercel.app/)를 사용합니다.
- **라우팅**: 라우팅 관리는 Next.js 자체 솔루션을 직접 사용합니다.
- **국제화**: 다국어 지원을 위해 [i18next](https://www.i18next.com/)를 사용합니다.
- **스타일링**: Ant Design과 연동되는 CSS-in-JS 라이브러리인 [antd-style](https://github.com/ant-design/antd-style)를 사용합니다.
- **단위 테스트**: 단위 테스트는 [vitest](https://github.com/vitejs/vitest)를 사용합니다.
## 폴더 디렉토리 구조
LobeChat의 폴더 디렉토리 구조는 다음과 같습니다:
\`\`\`bash
src
├── app # 애플리케이션 주요 로직과 상태 관리 관련 코드
├── components # 재사용 가능한 UI 컴포넌트
├── config # 클라이언트 및 서버 환경 변수를 포함한 애플리케이션 설정 파일
├── const # 액션 타입, 라우트 이름 등 상수 정의
├── features # 에이전트 설정, 플러그인 개발 팝업 등 비즈니스 기능 모듈
├── hooks # 애플리케이션 전역에서 재사용하는 커스텀 훅
├── layout # 내비게이션 바, 사이드바 등 레이아웃 컴포넌트
├── locales # 국제화 언어 파일
├── services # HTTP 요청 등 백엔드 서비스 인터페이스 래핑
├── store # zustand 상태 관리 스토어
├── types # TypeScript 타입 정의 파일
└── utils # 공통 유틸리티 함수
\`\`\`
