PlasmaAI - Chat Interface

Next.js 기반의 플라즈마 데이터 분석 및 AI 채팅 인터페이스 애플리케이션입니다. 사용자 인증을 거친 후, 대화형 채팅 인터페이스를 통해 플라즈마 데이터를 시각화하고 분석 결과를 제공합니다.

🛠 기술 스택

• 프레임워크: Next.js 15 (App Router 방식)
• 언어: TypeScript
• 스타일링: Tailwind CSS, PostCSS
• UI 컴포넌트: Radix UI, Lucide React (아이콘)
• 상태 관리: React Hooks (useState, useEffect)
• 폼 및 검증: React Hook Form, Zod
• 데이터 시각화: Recharts
• 마크다운 렌더링: React Markdown, KaTeX (수식 렌더링)

---

🚀 실행 방법

1. 패키지 설치

프로젝트 루트 디렉토리에서 패키지 매니저를 통해 의존성을 설치합니다. (npm 또는 pnpm 사용)

npm install
# 또는
pnpm install

2. 환경 변수 설정

루트 경로에 .env.local 파일이 존재할 경우, 프로젝트 실행에 필요한 API 키 및 서버 엔드포인트를 설정해야 합니다. (기존 .env.local 파일 참고)

3. 개발 서버 실행

다음 명령어를 실행하여 로컬 개발 서버를 구동합니다.

npm run dev
# 또는
pnpm dev

브라우저에서 http://localhost:3000 으로 접속하여 앱을 확인할 수 있습니다.

---

💻 코드 동작 방식 (Execution Flow)

애플리케이션은 기본적으로 Next.js의 App Router 방식을 따르며, 클라이언트 사이드와 서버 사이드가 분리되어 동작합니다. 메인 흐름은 다음과 같습니다.

1. 라우팅 및 인증 흐름 (app/page.tsx, app/login/)

• 사용자가 http://localhost:3000/ 에 접속하면 app/page.tsx 컴포넌트가 렌더링됩니다.
• 인증 확인: 클라이언트 로드 시(useEffect) lib/auth의 isAuthenticated() 함수를 통해 로그인 여부를 검증합니다.
• 토큰이 없거나 인증이 만료된 경우 router.replace("/login")을 통해 /login 페이지로 리다이렉트됩니다.
• 인증된 사용자라면 getMe() 함수를 호출해 사용자 정보를 가져온 뒤 메인 대화창(채팅 인터페이스)을 표시합니다.

2. 메인 페이지 컴포넌트 구조 (app/page.tsx)

메인 화면은 크게 **사이드바(ChatSidebar)**와 **메인 채팅 영역(ChatInterface)**으로 나뉘어 렌더링됩니다.

<main className="flex h-screen overflow-hidden bg-background">
  <ChatSidebar />
  <ChatInterface />
  <AdminFeedbackModal />
</main>

• 상태 관리:
  • selectedChatId: 현재 선택된 채팅 세션의 ID를 관리합니다.
  • sidebarCollapsed: 사이드바의 접힘/펼침 상태를 관리합니다.
  • showVisualization, visualizationData: 차트 및 데이터 시각화 모달을 띄울지 결정하는 상태입니다.

3. 주요 기능 동작 원리

💬 채팅 인터페이스 (components/chat-interface)

• 사용자가 텍스트를 입력하면, 해당 메시지는 백엔드(AI 서버)로 전송됩니다.
• 응답받은 데이터는 react-markdown 및 rehype-katex를 이용해 서식과 수식이 적용된 텍스트로 화면에 출력됩니다.
• AI의 응답 중 특정 플라즈마 파라미터나 시각화 정보가 포함되어 있으면 handleShowVisualization 함수를 통해 시각화 패널이 활성화됩니다.

📊 데이터 시각화 (ChartDataType)

채팅 내용 중 아래의 ChartDataType 기반의 데이터 응답이 오면 Recharts를 사용해 차트 팝업(또는 패널)을 그려줍니다.

• 선형 차트(line), 막대 차트(bar), 영역형 차트(area)
• 박스 플롯(boxPlot), 파라미터 분포(parameterDistribution)
• 플라즈마 JSON 형식 (PlasmaJson)

⚙️ 관리자 피드백 및 설정 (components/admin-feedback-modal)

• 사이드바 등에서 설정/피드백 아이콘을 클릭 시 모달(AdminFeedbackModal)이 띄워지며 시스템 관련 피드백을 수집하거나 관리자 기능을 수행합니다.

---

📁 주요 디렉토리 구조

PlasmaAI/
├── app/                  # Next.js App Router (페이지 및 레이아웃)
│   ├── login/            # 로그인 페이지
│   ├── dashboard/        # 대시보드 페이지 (사용될 경우)
│   ├── layout.tsx        # 최상위 레이아웃 구성
│   └── page.tsx          # 메인 엔트리 포인트 (채팅 인터페이스)
├── components/           # 재사용 가능한 UI 및 비즈니스 컴포넌트 모음
│   ├── chat-sidebar.tsx
│   ├── chat-interface.tsx
│   └── admin-feedback-modal.tsx
├── hooks/                # 커스텀 React Hooks 모음
├── lib/                  # 유틸리티 함수 및 API 클라이언트 모음 (예: 인증 auth.ts)
├── public/               # 정적 파일 (이미지, 폰트 등)
└── styles/               # 커스텀 CSS 및 디자인 시스템

📝 빌드 및 배포

프로덕션 환경으로 배포하기 위해서는 아래 명령어로 빌드합니다.

npm run build
# 빌드된 결과물 실행
npm run start