LobeChat은 Next.js 프레임워크를 기반으로 구축된 AI 대화 애플리케이션입니다. 다양한 기능과 특성을 구현하기 위해 여러 기술 스택을 사용합니다.
## 기본 기술 스택
LobeChat의 핵심 기술 스택은 다음과 같습니다:
- **프레임워크**: 우리는 [Next.js](https://nextjs.org/)를 선택했습니다. 이는 강력한 React 프레임워크로, 프로젝트에 서버 사이드 렌더링, 라우팅 프레임워크, 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](https://nextjs.org/)에서 제공하는 솔루션을 직접 사용합니다.
- **국제화**: 우리는 애플리케이션의 다국어 지원을 위해 [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 # action 유형, 라우트 이름 등과 같은 상수를 정의하는 데 사용
├── features # 비즈니스 기능과 관련된 모듈, 예: Agent 설정, 플러그인 개발 팝업 등
├── hooks # 애플리케이션 전역에서 재사용할 수 있는 사용자 정의 Hooks
├── layout # 애플리케이션의 레이아웃 컴포넌트, 예: 내비게이션 바, 사이드바 등
├── locales # 국제화 언어 파일
├── services # HTTP 요청과 같은 백엔드 서비스 인터페이스를 캡슐화
├── store # 상태 관리를 위한 zustand store
├── types # TypeScript의 타입 정의 파일
└── utils # 일반적인 유틸리티 함수
\`\`\`
