상명대학교 챗봇 새미(SMAI) 프론트엔드

상명대학교 챗봇 '새미(SMAI)'의 프론트엔드 코드입니다. 이 저장소는 사용자 인터페이스(UI)와 클라이언트 측 기능만을 포함하며, 실제 대화 처리 로직은 별도의 백엔드 서버에서 처리됩니다.

프론트엔드 개요

이 프로젝트는 학생들에게 학사 일정, 장학 정보, 시설 안내 등 다양한 정보를 대화형 인터페이스로 제공하는 웹 기반 챗봇의 사용자 인터페이스 부분입니다. React.js를 기반으로 구축되었으며, 모바일 및 데스크톱 환경 모두에서 최적화된 반응형 디자인을 제공합니다.

주요 기능

• 대화형 사용자 인터페이스: 자연스러운 대화를 위한 메시지 UI 제공
• 다양한 메시지 유형 지원: 텍스트, 학사 일정, 장학 정보, 시설 안내 등 다양한 형식의 응답 표시
• 반응형 디자인: 모바일과 데스크톱 환경 모두 최적화된 UI 제공
• 빠른 응답 버튼: 자주 사용하는 질문에 빠르게 접근 가능
• 메뉴 버튼 그리드: 다양한 주제별 정보에 쉽게 접근 가능

기술 스택

• 프론트엔드 프레임워크: React.js
• 스타일링: CSS (순수 CSS를 사용한 모듈화된 스타일링)
• 상태 관리: React Hooks(useState, useEffect, useRef)
• 반응형 디자인: CSS 미디어 쿼리
• 클라이언트 측 로직: JavaScript ES6+

백엔드 연동 (추후 개발 예정)

이 프론트엔드는 RESTful API를 통해 백엔드 서버와 통신하도록 설계되었습니다. 백엔드 서버는 별도의 저장소에서 관리되며, 다음과 같은 기능을 처리합니다:

• 자연어 처리 및 의도 분석
• 데이터베이스 조회 및 정보 검색
• 대화 상태 관리
• 사용자 인증 및 권한 관리

실제 배포 시에는 src/utils/messageHandler.js 파일에서 API 엔드포인트를 설정하여 백엔드와 연결할 수 있습니다.

설치 방법

1. 프론트엔드 저장소 클론

git clone https://github.com/yourusername/smu-chatbot-frontend.git
cd smu-chatbot-frontend

2. 의존성 설치

npm install

실행 방법

개발 모드로 실행

npm start

• 브라우저에서 http://localhost:3000 접속하여 애플리케이션 확인
• 개발 모드에서는 더미 데이터를 사용하여 백엔드 없이도 UI 테스트 가능

프로덕션 빌드

npm run build

• build 폴더에 최적화된 빌드 파일이 생성됩니다.
• 이 파일들을 웹 서버에 배포하여 서비스할 수 있습니다.

프로젝트 구조

smu-chatbot-frontend/
├── public/               # 정적 파일
├── src/                  # 소스 코드
│   ├── assets/           # 이미지, 아이콘 등 자산 파일
│   │   ├── img/          # 이미지 파일
│   │   └── media/        # 아이콘 및 미디어 파일
│   ├── components/       # React 컴포넌트
│   │   ├── ChatContainer.jsx  # 메인 챗봇 컨테이너
│   │   ├── Header.jsx         # 헤더 컴포넌트
│   │   ├── InputArea.jsx      # 메시지 입력 영역
│   │   ├── MessageItem.jsx    # 개별 메시지 아이템
│   │   └── MessageList.jsx    # 메시지 목록
│   ├── styles/           # CSS 스타일
│   │   └── chatbot.css   # 챗봇 스타일
│   ├── utils/            # 유틸리티 함수
│   │   ├── dummyData.js  # 개발용 더미 데이터
│   │   └── messageHandler.js  # 메시지 처리 및 API 연결 로직
│   ├── App.js            # 앱 컴포넌트
│   └── index.js          # 진입점
└── package.json          # 프로젝트 메타데이터 및 의존성

주요 컴포넌트 설명

ChatContainer

챗봇의 메인 컨테이너로, 메시지 목록, 입력 영역, 메뉴 그리드 등 모든 하위 컴포넌트를 포함합니다. 메시지 상태 관리와 사용자 입력 처리를 담당합니다.

Header

챗봇 상단의 헤더를 렌더링합니다. 로고와 타이틀, 새로고침 버튼을 포함합니다.

InputArea

사용자 메시지 입력을 처리하는 영역입니다. 텍스트 입력창과 전송 버튼으로 구성됩니다.

MessageItem

개별 메시지 아이템을 렌더링합니다. 사용자 메시지와 봇 메시지를 다르게 표시하며, 다양한 형식의 메시지(일반 텍스트, 학사 일정, 장학금 정보, 시설 정보 등)를 지원합니다.

MessageList

모든 메시지 아이템을 목록으로 표시합니다. 스크롤 관리 및 새 메시지가 추가될 때 자동 스크롤을 처리합니다.

커스터마이징

src/styles/chatbot.css 파일을 수정하여 챗봇의 모양과 느낌을 변경할 수 있습니다. 다음과 같은 주요 클래스를 통해 스타일을 조정할 수 있습니다:

• .chatbot-container: 전체 챗봇 컨테이너
• .chatbot-header: 헤더 영역
• .message-item: 메시지 아이템
• .bot-message: 봇 메시지 스타일
• .user-message: 사용자 메시지 스타일
• .input-area: 입력 영역
• .quick-menu-grid: 메뉴 버튼 그리드