Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mnxmnz/colfume-frontend
✳︎ colfume :: 색으로 찾는 나만의 향기
https://github.com/mnxmnz/colfume-frontend
nextjs react recoil styled-components
Last synced: about 3 hours ago
JSON representation
✳︎ colfume :: 색으로 찾는 나만의 향기
- Host: GitHub
- URL: https://github.com/mnxmnz/colfume-frontend
- Owner: mnxmnz
- License: mit
- Created: 2021-06-28T08:43:33.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-05T07:21:24.000Z (almost 2 years ago)
- Last Synced: 2024-03-05T04:42:21.121Z (11 months ago)
- Topics: nextjs, react, recoil, styled-components
- Language: TypeScript
- Homepage:
- Size: 16 MB
- Stars: 29
- Watchers: 0
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
colfume
컬퓸에서 색을 통해 당신의 향을 찾아보세요
Notion
·
Interview
·
Final Presentation
## About The Project
#### Sopt 28th AppJam - web part
## Main Feature
#### ✔ Home
- Header 메뉴 클릭하면 해당 링크로 이동
- Start 버튼 클릭하면 심리 테스트 링크로 이동
- Palette Color 클릭하면 해당 검색 결과 페이지로 이동
- 총 8개의 Color 가 있어서 슬라이더로 표현
- Mood & Style 클릭하면 해당 검색 결과 페이지로 이동
- Recommendation 향수 사진 위에 Hover 하면 향수 이름 보여줌
- 하나의 상황에 대해 6가지 향수가 있어서 슬라이더로 표현
- 향수를 클릭하면 해당 향수의 디테일 페이지로 이동
#### ✔ Color Test - Question
- 사용자가 입력한 테스트의 값 저장
- 사용자 진행 상황을 Progress Bar 로 표현
- 사용자가 7번까지 테스트를 완료하면 로딩뷰 표시
#### ✔ Color Test - Result
- 사용자 입력 값에 따라 8개의 결과 표시
- 향수 추천을 받아보세요 버튼을 클릭하면 해당 색깔에 대한 Search 결과 페이지로 이동
- 링크 복사를 클릭하면 해당 링크 복사
- 링크 복사를 클릭하면 모달창 표시
#### ✔ Search
- 제품명, 키워드를 검색하면 그에 맞는 향수 서치 결과 표시
- Mood 와 Style 을 클릭하면 해당 버튼만 Active 효과 표시
- Mood 와 Style 을 클릭하면 해당 서치 결과 표시
- 서치 결과에서 향수를 클릭하면 해당 디테일 페이지로 이동
- 향수 위에 마우스 오버하면 향수 제목 표시
#### ✔ Product List
- 향수 팔레트 컬러를 클릭하면 해당 색에 대한 검색 결과 표시
- 서치 결과에서 향수를 클릭하면 해당 디테일 페이지로 이동
- 향수 위에 마우스 오버하면 향수 제목 표시
#### ✔ Product Detail
- 해당 향수에 맞는 정보 표시
- 클릭하면 향수 id로 이동
- 뒤로가기 버튼 클릭
## Folder Structure
```
📦.github
┗ 📂ISSUE_TEMPLATE
┃ ┗ 📜custom-issue-template.md
📦assets
┣ 📂main
┃ ┣ ...
┃ ┗ 📜Palette08White.svg
┣ 📂...
┃ ┣ ...
┗ 📜index.ts
📦components
┣ 📂common
┃ ┣ ...
┃ ┗ 📜WithSize.tsx
┣ 📂...
┃ ┗ ...
┗ 📜index.ts
📦api
┣ 📂detail
┃ ┗ 📜detail.ts
┣ 📂...
┃ ┗ ...
┗ 📜index.ts
📦pages
┣ 📂product
┃ ┗ 📜[id].tsx
┣ 📂test
┃ ┗ 📂result
┃ ┃ ┗ 📜[id].tsx
┣ 📜index.tsx
┣ 📜product.tsx
┣ 📜search.tsx
┣ 📜test.tsx
┣ 📜_app.tsx
┗ 📜_document.tsx
📦public
┣ 📂fonts
┃ ┣ ...
┃ ┗ 📜NotoSansKR-Thin.otf
┃ ┣ ...
┗ 📜favicon.ico
📦states
┣ ...
┗ 📜test.ts
📦styles
┣ 📜global-style.ts
┣ 📜styled.d.ts
┗ 📜theme.ts
📦types
┣ ...
┗ 📜product.ts
📜.eslintrc.json
📜.gitignore
📜.prettierrc.json
📜.stylelintrc
📜LICENSE
📜next-env.d.ts
📜next.config.js
📜package.json
📜README.md
📜tsconfig.json
📜yarn.lock
```
## Built With
| React | styled-components | Recoil | Next.js |
| :---: | :---------------: | :----: | :-----: |
```json
"@types/lodash": "^4.14.170",
"@types/react-responsive": "^8.0.3",
"@types/react-slick": "^0.23.4",
"axios": "^0.21.1",
"lodash": "^4.17.21",
"next": "^11.0.1",
"react": "17.0.2",
"react-copy-to-clipboard": "^5.0.3",
"react-dom": "17.0.2",
"react-responsive": "^8.2.0",
"react-sizeme": "^3.0.1",
"react-slick": "^0.28.1",
"recoil": "^0.3.1",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.0",
"styled-reset": "^4.3.4",
"swr": "^0.5.6"
```
## Getting Started
#### Prerequisites
```
npm install --global yarn
```
#### Installation
1. Clone the Repo
```
git clone https://github.com/mnxmnz/colfume-frontend.git
```
```
cd colfume-frontend
```
2. Install Project Packages
```
yarn
```
3. Run the Project (Dev Mode)
```
yarn dev
```
## Contributing
1. Fork the Project
2. Create your Feature Branch (git checkout -b feat/AmazingFeature)
3. Commit your Changes (git commit -m 'add: some AmazingFeature')
4. Push to the Branch (git push origin feat/AmazingFeature)
5. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
| 김민지 | 손예지 | 김소령 | 김영서 |
| :-----------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------: |
| 
| 
| 
| 
|
| [mnxmnz](https://github.com/mnxmnz) | [yezgoget](https://github.com/yezgoget) | [soryeongk](https://github.com/soryeongk) | [kimyeongseo](https://github.com/kimyeongseo) |