[#210] 리스트 페이지 챗봇 구현

[wlrnjs]

📄 PR 내용 요약

• 리스트 페이지에 와인 추천 챗봇 기능 구현

✅ 작업 내용 상세

OpenAI API 연동

• /api/chat 라우트에서 OpenAI API를 호출하도록 구현했습니다.
• system 프롬프트를 통해 와인 관련 대화만 응답하고, 이미지 요청은 거절하도록 설정했습니다.
• 모든 답변은 한국어, 2~3문장 이내의 간결한 문장으로 반환되도록 구성했습니다.

챗봇 UI 구현

• 사용 라이브러리: @chatscope/chat-ui-kit-react, @chatscope/chat-ui-kit-styles
• 기본 채팅 UI를 적용하고 사용자 입력 및 GPT 응답을 handleSend로 관리했습니다.
• 입력창, 전송 버튼, 첨부 버튼(숨김 처리) 등 인터랙션을 세밀히 제어했습니다.
• 공백, 엔터만 입력된 경우 전송되지 않도록 필터링 로직을 추가했습니다.

스타일 및 레이아웃

• 기본 스타일이 적용되지 않아 CSS(chat-style.css)를 생성하고 !important로 오버라이드했습니다.
• 유저가 채팅창 크기를 조절할 수 있게 resize 추가했습니다.
• 외부 스크롤이 움직이지 않도록 스크롤 영역 제한을 설정했습니다.

📸 스크린샷 (선택사항)

💬 참고 사항

• 머지 후 npm i 필요합니다
• .env에 OpenAI API Key 설정은 별도 공유 드리겠습니다.
• 내부 디자인은 첨부한 이미지가 최선인것 같습니다..
• 오른쪽 하단 챗봇 아이콘 디자인, 채팅 첫 메시지 내용은 의견 주시면 감사하겠습니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
wine	Ready	Preview	Comment	Oct 17, 2025 5:58am