23-2 이화여자대학교 캡스톤디자인과창업프로젝트 그로쓰 09팀 HACK
펫로스 증후군 극복을 위한 AI 활용 웹 서비스
"무지개 편지"는 펫로스 증후군을 겪고 있는 사람들에게 극복의 토대를 제공하기 위해 태어났습니다. 다양한 기능을 통해 반려동물을 떠나보낸 사람들이 일상을 찾을 수 있도록 돕고자 합니다. 시간이 흘러도 여전히 그리운, 당신의 가족이자 기억하고 싶은 이들에게 미처 하지 못했던 말을 직접 전해주세요. 그리고 행복했던 추억을 떠올리며 내 반려동물이 무지개 별에서도 행복하게 지내고 있다고 상상하세요.
무지개 편지는 무지개 다리를 건너 간 나의 반려동물에게 향하는 징검다리를 놓아드리겠습니다.
펼쳐서 포스터 보기
- 동작환경 chrome 119.0.6045.105
- 개발환경 springboot 3.1.1, react 18.2.0
- react, springboot
2023.07.10. ~ 2023.11.24.
Client
Server
- React (18.2.0) : 클라이언트 개발에서 사용한 프레임워크
- Axios ^1.5.0 : Promise 기반의 HTTP 통신 라이브러리로 백엔드에 api 요청을 보낼 때 사용
- styled-component ^6.0.8 : React 컴포넌트를 스타일링하기 위한 CSS-in-JS 라이브러리
- java 17 : 사용한 프로그래밍 언어
- springboot (3.1.1) : 프레임워크
- JWT : 회원가입 및 로그인시 사용하는 토큰
- Open AI (GPT-4, DALL-E) : 텍스트 생성을 위한 GPT 4, 이미지 생성을 위한 DALL-E 3 API 활용
- EC2 : 서버
- RDS : 데이터베이스
- S3: 이미지 저장
- Open AI DALL-E
implementation 'com.theokanning.openai-gpt3-java:client:0.17.0'
implementation 'com.theokanning.openai-gpt3-java:service:0.17.0'참고
https://velog.io/@minji1289/Springboot-스프링부트로-DALL-E-API-호출하기
2. 로그인 JWT
implementation 'io.jsonwebtoken:jjwt-api:0.11.5’- React 라이브러리
- mui-Material UI ^5.14.12 : 스타일을 사용하기 위한 CSS 패키지
- mui/x-date-pickers ^6.16.2 : 달력 요소를 위한 mui 라이브러리
- dayjs ^1.11.10 : Javascript 날짜 라이브러리
- react-spinners 0.13.8 : 리액트 스피너 라이브러리 (채팅, 일기 훔쳐보기에 사용)
- react-toastify ^9.1.3 : 알림을 띄우기 위한 리액트 라이브러리
npm install @mui/[email protected]
npm install @mui/[email protected]
npm install [email protected]
npm install [email protected]
npm install [email protected]
- server 환경 설정
- client 환경 설정
- ACM 인증서 발급 *.rainbow-letter.com, www.rainbow-letter.com 등록
- 로드 밸런서 리스너 편집
리스너 구성을 http, 80 → https, 443 변경 - 로드 밸런서 리스너 추가
http→https 로 url 리디렉션하는 리스너 추가
- git clone https://github.com/ewha-cse-HACK/HACK_client.git
- git clone https://github.com/ewha-cse-HACK/HACK_Server.git
- server 빌드 설정
- client 빌드 설정
- git clone https://github.com/ewha-cse-HACK/HACK_Server.git
- git clone https://github.com/ewha-cse-HACK/HACK_client.git
- postman에서 http://localhost:8080/{테스트할_URL} 를 통해 API 조회
- http://localhost:3000/{테스트할_URL}를 통해 view test
- postman 또는 chrome을 통해 https://api.rainbow-letter.com/{테스트할_api} 로 API 조회
- https://rainbow-letter.com/{테스트할_api}로 view test
| 김민지 | 최유나 | 하윤지 |
|---|---|---|
 |
 |
 |
| Server AI |
Client Design |
Server AI |