🌈 무지개편지

펫로스 극복을 위한 챗봇 서비스 "무지개 편지"는 펫로스 증후군을 겪고 있는 사람들에게 극복의 토대를 제공하기 위해 태어났습니다. 다양한 기능을 통해 반려동물을 떠나보낸 사람들이 일상을 찾을 수 있도록 돕고자 합니다. 시간이 흘러도 여전히 그리운, 당신의 가족이자 기억하고 싶은 이들에게 미처 하지 못했던 말을 직접 전해주세요. 그리고 행복했던 추억을 떠올리며 내 반려동물이 무지개 별에서도 행복하게 지내고 있다고 상상하세요. 무지개 편지는 무지개 다리를 건너 간 나의 반려동물에게 향하는 징검다리를 놓아드리겠습니다.

🖥️ Demo video

🚀 Version

동작환경: chrome 119.0.6045.105
개발환경: react 18.2.0

💥 Deployment

Vercel을 이용해 배포

🖼️ Project Architecture

💪 Teck stack

Client

✨ Client 구성요소

• React (18.2.0) : 클라이언트 개발에서 사용한 프레임워크
• Axios ^1.5.0 : Promise 기반의 HTTP 통신 라이브러리로 백엔드에 api 요청을 보낼 때 사용
• styled-component ^6.0.8 : React 컴포넌트를 스타일링하기 위한 CSS-in-JS 라이브러리

🧩 사용한 오픈소스

• 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]

🌟 How to Install

1. package.json 파일에 vercel-deploy 추가

"scripts": {
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "dev": "next dev",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "lint": "next lint",
  "vercel-deploy": "next build && next export"
}

2. Vercel에 회원가입 후 깃허브 연동
3. 연동된 깃허브 계정에서 배포할 레포지토리 (HACK-client) 등록
4. 해당 레포지토리 import 후 Deploy
5. 프로젝트 Settings > Domains 메뉴에서 도메인 (rainbow-letter.com) 추가
6. Route53에서 주어진 값대로 레코드 생성
7. 프로젝트 Deployments > Promote to Production

🌤️ How to build

git clone https://github.com/ewha-cse-HACK/HACK_client.git

🎮 How to test

1. 리액트 앱이 있는 폴더에서 프롬프트를 열어 리액트 앱 구동

npm start 

2. 오류가 없을 경우 localhost:3000으로 연결되어 앱 로딩

🌳 Source Code tree

📦public
 ┣ 📂images
 ┣ 📜favicon.ico
 ┣ 📜index.html
 ┣ 📜logo.png
 ┣ 📜logo_favi.ico
 ┣ 📜manifest.json
 ┗ 📜robots.txt
📦src
 ┣ 📂components
 ┃ ┣ 📂Footer
 ┃ ┃ ┣ 📜Footer.css
 ┃ ┃ ┗ 📜Footer.jsx
 ┃ ┣ 📂Header
 ┃ ┃ ┣ 📜Header.css
 ┃ ┃ ┗ 📜Header.jsx
 ┃ ┣ 📂Persona
 ┃ ┣ 📜EachPost.jsx
 ┃ ┣ 📜Profile.jsx
 ┃ ┣ 📜TutorialChat.jsx
 ┃ ┣ 📜TutorialDiary.jsx
 ┃ ┣ 📜TutorialPersona.jsx
 ┣ 📂pages
 ┃ ┣ 📂community
 ┃ ┃ ┣ 📜CommunityEdit.jsx
 ┃ ┃ ┣ 📜CommunityPost.jsx
 ┃ ┃ ┗ 📜CommunityView.jsx
 ┃ ┣ 📂persona
 ┃ ┃ ┣ 📜PersonaBird.jsx
 ┃ ┃ ┣ 📜PersonaCat.jsx
 ┃ ┃ ┣ 📜PersonaDog.jsx
 ┃ ┃ ┣ 📜PersonaHam.jsx
 ┃ ┃ ┣ 📜PersonaOthers.jsx
 ┃ ┃ ┗ 📜PersonaSetting.jsx
 ┃ ┣ 📜Brand.jsx
 ┃ ┣ 📜Chat.jsx
 ┃ ┣ 📜Community.jsx
 ┃ ┣ 📜Diary.jsx
 ┃ ┣ 📜DiaryList.jsx
 ┃ ┣ 📜Login.jsx
 ┃ ┣ 📜MyPage.jsx
 ┃ ┣ 📜Persona.jsx
 ┃ ┣ 📜SignUp.jsx
 ┃ ┗ 📜style.css
 ┣ 📜App.css
 ┣ 📜App.js
 ┣ 📜index.css
 ┣ 📜index.js
 ┣ 📜logo.png

Source Code

components

• Header : 헤더

• Footer : 푸터

• EachPost : 커뮤니티 게시물

• Profile : 페르소나 프로필 컴포넌트

• TutorialChat/TutorialDiary/TutorialPersona : 튜토리얼 (각각 채팅/일기/페르소나 메뉴)
  
  

pages

• community/Community : 커뮤니티

• persona : 종별 페르소나 설정

• Brand : 랜딩 페이지

• Chat : 채팅

• Diary/DiaryList : 일기 훔쳐보기 그림일기 화면/일기 목록

• Login : 로그인

• MyPage : 마이페이지

• Persona : 페르소나 메뉴 (프로필 확인)

• Signup : 회원가입

• 그 외 스타일 코드 및 App (라우팅)

👍 Developers

김민지	최유나	하윤지
Server AI	Client Design	Server AI