JinhooSpace AI - Next.js + OpenAI 웹앱

Next.js와 OpenAI를 활용한 다양한 AI 기능을 체험할 수 있는 웹 애플리케이션입니다.

🚀 주요 기능

1. 기본 챗봇

• OpenAI GPT-4o-mini 모델 사용
• 실시간 스트리밍 응답
• 메시지 히스토리 관리

2. 역할 기반 AI

• 6가지 전문 역할 지원:
  • 여행 플래너
  • 코딩 리뷰어
  • 재무분석가
  • 마케팅 전문가
  • 건강 코치
  • 언어 튜터
• 역할별 전용 프롬프트 시스템

3. 블로그 글 AI

• SEO 최적화된 블로그 글 자동 생성
• 주제, 독자, 톤, 길이 설정 가능
• 메타데이터 자동 생성
• 복사/다운로드 기능

4. JSON-UI AI

• 4가지 JSON Schema 지원:
  • 카드형 답변
  • 대시보드
  • 할 일 목록
  • 제품 카탈로그
• AI가 생성한 JSON을 즉시 UI로 렌더링

🛠️ 기술 스택

• Framework: Next.js 15.5.2 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• AI: OpenAI GPT-4o-mini
• Deployment: Vercel

📦 설치 및 실행

로컬 개발

# 의존성 설치
npm install

# 환경변수 설정
# .env.local 파일 생성 후 다음 내용 추가:
OPENAI_API_KEY=your_openai_api_key_here
NEXT_PUBLIC_APP_NAME=JinhooSpace AI
NODE_ENV=development

# 개발 서버 실행
npm run dev

Vercel 배포

1. GitHub 저장소를 Vercel에 연결
2. 환경변수 설정:
   • OPENAI_API_KEY: OpenAI API 키
   • NEXT_PUBLIC_APP_NAME: 앱 이름
3. 자동 배포 완료

🔧 환경변수

변수명	설명	필수
OPENAI_API_KEY	OpenAI API 키	✅
NEXT_PUBLIC_APP_NAME	앱 이름	❌
NODE_ENV	환경 설정	❌

📱 접속 방법

• 메인 페이지: /
• 기본 챗봇: /chat-basic
• 역할 기반 AI: /role-assistant
• 블로그 글 AI: /blog-writer
• JSON-UI AI: /json-ui

🔒 보안

• API 키는 서버에서만 사용
• 클라이언트에 노출되지 않음
• 환경변수 파일은 .gitignore에 포함

📄 라이선스

MIT License

🤝 기여

이슈나 풀 리퀘스트를 통해 기여해주세요!