mnxmnz / colfume-frontend

✳︎ colfume :: 색으로 찾는 나만의 향기

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

"@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	yezgoget	soryeongk	kimyeongseo