사용자가 가진 조건(나이, 성별, 여가시간, 소득, 거주 지역)을 종합적으로 고려해 AI를 기반으로 사용자에게 최적인 취미를 추천함으로써 사용자들이 간편하고 빠르게 취미 활동을 시작할 수 있도록 도와주는 웹 서비스
 |
 |
 |
|---|---|---|
| 박유진 | 박혜진 | 최예빈 |
| 팀장, 백엔드 | 팀원, 백엔드 | 팀원, 프론트엔드 |
"axios": "^1.6.8",
"http-proxy-middleware": "^2.0.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^5.2.0",
"react-router-dom": "^6.22.0",
"react-scripts": "5.0.1",
"recoil": "^0.7.7",
"recoil-persist": "^5.1.0",
"styled-components": "^6.1.8",
"sweetalert2": "^11.10.8",
"sweetalert2-react-content": "^5.0.7",
"tiny-slider-react": "^0.5.7",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
콘텐츠 기반 추천 알고리즘에 사용된 데이터:
https://docs.google.com/spreadsheets/d/1leFDaOCDJfxu9AZgyfMM_50xPK2Z39ayGna_stVtbxw/edit?gid=1227239017#gid=1227239017
[출처: 컨슈머인사이트 'MZ 문화여가활동 특징 데이터']
협업 필터링 추천 알고리즘에 사용된 데이터:
https://docs.google.com/spreadsheets/d/1Fb4xSgideUwhk5jMRLWG8XCmubvU8s1Y/edit?gid=1062421834#gid=1062421834
[출처: 솜씨당]
🌟src
├─ 📂api
├─ 📂flask_api
├─ 📂assets
│ ├─📂_common
│ ├─📂hobby_icons
│ ├─📂sidebar
│ ├─📂loginpage
│ ├─📂error
│ ├─📂archive
├─ 📂components
│ ├─📂_common
│ ├─📂archive
│ ├─📂archivefolder
│ ├─📂create
│ ├─📂main
│ ├─📂onedayclass
│ ├─📂recommend
├─ 📂fonts
├─ 📂pages
│ ├─📄ArchiveDetailPage.ts
│ ├─📄ArchiveFolderPage.ts
│ ├─📄ArchivePage.ts
│ ├─📄ChatbotPage.ts
│ ├─📄CreatePage.ts
│ ├─📄ErrorPage.ts
│ ├─📄KaKaoAuthPage.ts
│ ├─📄LoginPage.ts
│ ├─📄MainPage.ts
│ ├─📄OnedayclassPage.ts
│ ├─📄RecommendPage.ts
├─ 📂recoil
│ ├─📄Login.ts
│ ├─📄Recommend.ts
│ ├─📄User.ts
│ ├─📄UserDetail.ts
├─ 📂types
│ ├─📄index.d.ts
├─ 📄App.tsx
└─ 📄index.tsx
📂api: Spring 서버와의 통신 api 코드가 담긴 폴더. 게시물 작성•수정•삭제 api, 원데이 클래스 리스트 불러오기 api, 메인 페이지 게시물 불러오기 api, 피드백 api, 사용자 정보 불러오기 api, 사용자의 취미 아카이브 폴더 불러오기 api 등📂flask_api: Flask 서버와의 통신 api 코드가 담긴 폴더. 사용자 답변을 챗봇과 주고받는 api와 추천 취미 리스트를 받아오는 api 등📂assets: 취미 아이콘, 로고, 사이드바 아이콘 등의 이미지 혹은 svg📂components
📂_common: 사이드바, 사진, 로고, 아바타 등 여러 페이지에서 반복해서 등장하는 컴포넌트 관련 코드📂archive: 아카이브 게시물 썸네일 컴포넌트📂archivefolder: 아카이브 폴더 컴포넌트📂create: 게시물 작성 폼 컴포넌트📂main: 메인 페이지의 다른 유저 게시물 컴포넌트📂onedayclass: 원데이 클래스 컴포넌트(사진, 가격, 위치, 난이도, 소요시간)📂recommend: 추천 취미 결과 컴포넌트와 '서랍장 추가하기' 버튼 컴포넌
📂fonts: NanumSquare와 GmarketSans 폰트를 사용📂pagesKaKaoAuthPage.tsx,LoginPage.tsx: 카카오 로그인 기능을 구현 코드ChatbotPage.tsx: 채팅 ui, 사용자와 Dialogflow와의 답변 주고 받기를 구현한 코드RecommendPage.tsx: 추천 취미 및 유사도 반환을 구현한 코드CreatePage.tsx: 취미 관련 게시물 작성을 구현한 코드ArchiveFolderPage.tsx: 사용자가 저장한 취미 폴더 페이지 구현 코드ArchivePage.tsx: 사용자의 취미 게시물을 모아둔 페이지 구현 코드ArchiveDetailPage.tsx: 사용자의 취미 게시물 세부 내용 페이지를 구현한 코드OnedayclassPage.tsx: 원데이 클래스 목록 페이지를 구현한 코드MainPage.tsx: 다른 유저들의 게시물을 모아둔 메인 페이지를 구현한 코드ErrorPage.tsx: 사용자가 잘못된 경로로 접근하거나 예상치 못한 문제 발생시 나타나는 화면을 구현한 코드
📂recoilLogin.ts: 사용자 로그인시 이름과 토큰을 저장하는 recoil 코드User.ts: 사용자의 user_id를 저장하는 recoil 코드UserDetail.ts: 챗봇 이용시 사용자가 입력하는 정보를 저장하는 recoil 코드Recommend.ts: 사용자가 추천받은 취미와 유사도를 저장하는 recoil 코드
- 프로젝트를 클론한다.
git clone https://github.com/money-catcher/HobHub-Front.git
- 루트 디렉토리로 이동한다.
cd HobHub-Front
- 필요 패키지를 설치한다.
npm install --force
- 루트 디렉토리 아래에 .env 파일을 생성한 후 아래의 변수들을 설정한다.
REACT_APP_API_URL = <REACT_APP_API_URL>
REACT_APP_FLASK_URL = <REACT_APP_FLASK_URL>
REACT_APP_REST_API_KEY = <REACT_APP_REST_API_KEY>
REACT_APP_REDIRECT_URI = <REACT_APP_REDIRECT_URI>
- 프로젝트를 실행한다.
npm run start