2023.04.02
업데이트 내용
- "Enter" 버튼으로 검색 가능하도록 기능 추가
- 검색하고자하는 텍스트가 검색버튼을 넘어가는 현상 수정
🙋 Free trial 기간이라 사용하셔도 됩니다!
Deployment Vercel: https://stemps-gpt.vercel.app/
- Client
$ cd client && npm i && npm start
- Server
$ cd server && npm i && npm start
- React
- TypeScript
- CSS
- StyledComponents
- API
- fetch
- Mobile (Iphone 13 pro 기준)
- DeskTop
구현 및 기능
검색 데이터가 0일 경우에만 초기 화면 렌더
- "Enter"로 검색 버튼 클릭 가능
- input창 빈값으로 초기화
- 검색 버튼 / cursur: pointer -> 로딩 아이콘 / cursur: not-allowed
- API 응답을 기다리는 시간이 사용자 경험에 좋지 않기 때문에 질문을 먼저 렌더하고 GPT 로고
색 애니메이션으로 로딩중임을 자연스럽게 보여줌
- 응답을 받으면 렌더 됐던 기존 질문과 하나의 객체로 합쳐서 관리
- 스크롤이 맨위가 아니라면 오른쪽 하단에 Top아이콘 생성
- 버튼 클릭 -> 스크롤 맨 위로 부드럽게 이동