[코드스테이츠 FE 45기] 스터디_참숯가마
개발기간 : 2023.6.23 ~ 2023.07.15
리팩토링 : 2023.11.22 ~ 2024.01.21
| 이 원호 | 윤 예빈 |
|---|---|
 |
 |
| @WONHO22 | @YebinYun |
원하시는 지역을 바탕으로 메뉴 추천을 해주는 랜덤 룰렛.
"뭐 먹지?" 선택이 어렵다면 추천 드립니다.
게임처럼 재밌게 메뉴를 골라드립니다!
오늘은 뭘 먹어야 할지 고민이라면?
늘 먹는 음식이 정해져있다면?
색다른 음식이 먹고 싶다면?
저희 룰렛을 추천 드립니다.
| 메인 페이지 | 추천 모달 | 지역 보기 ver 1. |
|---|---|---|
 |
 |
 |
| 추천 페이지 | 상세보기 모달 | 지역 보기 ver 2. |
 |
 |
 |
- 자동입력 기능으로 원하는 지역구를 입력하여 추천 가능 구현.
- 지역구에 대한 정보가 궁금한 경우 좌측 상단 "지역구 보러가기" 클릭하면 안내기능 구현
- 현재 서울시 25개 지역구에서 한식,일식,중식,양식,분식 중 랜덤으로 식당 정보 제공
- 추후 서울 외 지역도 추가 및 구현 예정
- 추첨 결과를 보러 가면, 관련 식당 5곳 중에 랜덤으로 2곳에 사이트, 주소, 관련 사진 제공
- 사진은 최대 5개를 보여줄 수 있으며, 없을 경우 대체 gif 제공
- 추천 받은 식당에 관련한 블로그 후기 보러가기 가능
- 원하는 (서울)지역구를 입력해주세요.
- 지역구를 모르신다면 좌측 상단 지역구 보기를 클릭.
- 지역구를 입력하셨다면, 룰렛 START!
- 룰렛에 결과에 따라 랜덤으로 추천해 드립니다.
- 원하는 결과에 맞는 지역에서 추천된 매장정보를 보여드립니다.
- 결과창에서는 식당 위치와 사이트, 관련 사진등을 볼 수 있습니다.
- 상세보기를 클릭하면 블로그 후기를 볼 수 있습니다.
📥Client
.
├── public
│ └── images
└── src
├── assets
│ └── fonts
├── components
│ ├── layout
│ │ ├── commons
│ │ │ ├── BottomLink.tsx
│ │ │ ├── MapLink.tsx
│ │ │ └── TopLink.tsx
│ │ ├── HomepageComponent.tsx
│ │ ├── LayoutComponent.tsx
│ │ ├── MapModalComponent.tsx
│ │ └── ModalComponent.tsx
│ ├── main
│ │ ├── game
│ │ │ ├── EnterClickComponent.tsx
│ │ │ ├── EnterDistrictComponent.tsx
│ │ │ ├── EnterLocalComponent.tsx
│ │ │ ├── RandomButtonComponent.tsx
│ │ │ └── RandomGameComponent.tsx
│ │ ├── MainComponent.tsx
│ │ └── ResultModalComponent.tsx
│ └── result
│ ├── BlogModalComponent.tsx
│ ├── ResultComponent.tsx
│ ├── ResultInformation.tsx
│ └── ResultRenderSlider.tsx
├── containers
│ ├── layout
│ │ ├── HomepageContainer.tsx
│ │ └── LayoutContainer.tsx
│ ├── main
│ │ ├── game
│ │ │ ├── EnterClickContainer.tsx
│ │ │ └── EnterDistrictContainer.tsx
│ │ ├── MainContainer.tsx
│ │ └── ResultModalContainer.tsx
│ └── result
│ └── ResultContainer.tsx
├── hook
│ └── RotateSlot.js
└── utils
├── district
│ └── deselectedOptions.json
├── foods
│ └── foods.tsx
└── images
└── images.tsx
📤Server
.
├── .env
├── app.js
├── api
│ ├── blog.js
│ ├── image.js
│ └── search.js
└── routes
└── route.js
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent