logo

[FE] 🎨Colfume🔎

React
Nextjs
Styled-components
Recoil

colfume logo

colfume

컬퓸에서 색을 통해 당신의 향을 찾아보세요


View Demo · Report Bug · Request Feature



About The Project

Sopt 28th AppJam - web part

Project name : colfume

Project period : 2021.06.26 ~ 2021.08.31



Main Feature

✔ Home

home
  • Header 메뉴 클릭하면 해당 링크로 이동
  • Start 버튼 클릭하면 심리 테스트 링크로 이동
mood and style
  • Palette Color 클릭하면 해당 검색 결과 페이지로 이동
  • 총 8개의 Color 가 있어서 슬라이더로 표현
  • Mood & Style 클릭하면 해당 검색 결과 페이지로 이동
recommendation
  • Recommendation 향수 사진 위에 Hover 하면 향수 이름 보여줌
  • 하나의 상황에 대해 6가지 향수가 있어서 슬라이더로 표현
  • 향수를 클릭하면 해당 향수의 디테일 페이지로 이동


✔ Color Test - Question

color test question
  • 사용자가 입력한 테스트의 값 저장
  • 사용자 진행 상황을 Progress Bar 로 표현
  • 사용자가 7번까지 테스트를 완료하면 로딩뷰 표시


✔ Color Test - Result

color test result
  • 사용자 입력 값에 따라 8개의 결과 표시
  • 향수 추천을 받아보세요 버튼을 클릭하면 해당 색깔에 대한 Search 결과 페이지로 이동
  • 링크 복사를 클릭하면 해당 링크 복사
  • 링크 복사를 클릭하면 모달창 표시


✔ Search

search
  • 제품명, 키워드를 검색하면 그에 맞는 향수 서치 결과 표시
  • Mood 와 Style 을 클릭하면 해당 버튼만 Active 효과 표시
  • Mood 와 Style 을 클릭하면 해당 서치 결과 표시
  • 서치 결과에서 향수를 클릭하면 해당 디테일 페이지로 이동
  • 향수 위에 마우스 오버하면 향수 제목 표시


✔ Product List

product list
  • 향수 팔레트 컬러를 클릭하면 해당 색에 대한 검색 결과 표시
  • 서치 결과에서 향수를 클릭하면 해당 디테일 페이지로 이동
  • 향수 위에 마우스 오버하면 향수 제목 표시


✔ Product Detail

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

Reactstyled-componentsRecoilNext.js
"@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
  1. Install Project Packages
yarn
  1. 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

김민지손예지김소령김영서
profileprofileprofileprofile
mnxmnzyezgogetsoryeongkkimyeongseo

Comments


DevFoliOh! 2021

모든 컨텐츠의 저작권은 GitHub Respository 소유자에게 있습니다.

devfolio.help@gmail.com