✨ 뭐찾으세요?

🏆2023 이화여대 캡스톤 디자인과 창업프로젝트A 포스터 세션 장려상 수상

🏆2023 이화여대 캡스톤디자인경진대회 융합 부문 동상 수상

프로젝트 소개

사용자의 자유로운 언어적 요청을 해석해 상품을 찾아주고 상품에 대한 정보제공 질의응답을 제공하는 1:1 쇼핑 도우미 챗봇 서비스

📼 시연 영상

유투브 주소

주요 기능 및 페이지

JWT 기반 로그인

단계별 유효성 검증을 동반한 회원가입 폼

• 유효한 값을 입력한 경우에만 다음 단게로 넘어갈 수 있음
• 전체 프로세스에서 현재 진행 단계 표기
• 키보드 입력과 마우스 이벤트를 활용한 관심사 해그 태그 추가 및 삭제

사용자의 자유로운 요청 스타일 입력 페이지

• Input 컴포넌트 내 대표적인 요청 사례가 시간마다 바뀌는 애니메이션 도입
• input 입력에 대한 커스텀 훅 활용

API 응답 상태를 고려한 상품 목록 페이지

• react-query를 활용해 openAI를 과도하게 사용하는 경우에 대비 및 방지를 위한 캐싱 도입

선택한 상품에 대한 개괄 정보 제공 및 대표 질문 제시

• 채팅형 UI가 기존 쇼핑몰 UI와 혼합된 형태로 재작

자유로운 질의응답 기능

⚒️ 기술 스택

언어
IDE
라이브러리
상태관리
패키지관리
Formatter
배포
협업툴

디렉토리 구조

📦src
 ┣ 📂apis
 ┗ 📂components
   ┣ 📂Common // 공용 컴포넌트
   ┣ 📂Input // 사용자 입력 input 컴포넌트
   ┣ 📂Layout // 사용자 입력 input 컴포넌트
   ┣ 📂PropectedRoute // Private Route 판정 컴포넌트
   ┣ 📂Login // Login Form 컴포넌트
   ┣ 📂Signup // Signup Form 컴포넌트
   ┣ 📂Main // Main 애니메이션 타이틀 컴포넌트
   ┣ 📜App.tsx
   ┗ 📜index.tsx
 ┣ 📂constant // 각종 문구 및 상수값 
 ┣ 📂pages // Routing에 따른 렌더링할 page
 ┣ 📂store // �Zustand 상태 관리 : 유저 정보, 선택 아이템 정보, 메세지
 ┣ 📂test //�Zustand action 작동 확인 테스트
 ┣ 📂types // 각종 자료형 타입 값
 ┣ 📜App.tsx 
 ┗ 📜index.tsx