컬퓸에서 색을 통해 당신의 향을 찾아보세요
Notion · Interview · Final Presentation
- Header 메뉴 클릭하면 해당 링크로 이동
- Start 버튼 클릭하면 심리 테스트 링크로 이동
- Palette Color 클릭하면 해당 검색 결과 페이지로 이동
- 총 8개의 Color 가 있어서 슬라이더로 표현
- Mood & Style 클릭하면 해당 검색 결과 페이지로 이동
- Recommendation 향수 사진 위에 Hover 하면 향수 이름 보여줌
- 하나의 상황에 대해 6가지 향수가 있어서 슬라이더로 표현
- 향수를 클릭하면 해당 향수의 디테일 페이지로 이동
- 사용자가 입력한 테스트의 값 저장
- 사용자 진행 상황을 Progress Bar 로 표현
- 사용자가 7번까지 테스트를 완료하면 로딩뷰 표시
- 사용자 입력 값에 따라 8개의 결과 표시
- 향수 추천을 받아보세요 버튼을 클릭하면 해당 색깔에 대한 Search 결과 페이지로 이동
- 링크 복사를 클릭하면 해당 링크 복사
- 링크 복사를 클릭하면 모달창 표시
- 제품명, 키워드를 검색하면 그에 맞는 향수 서치 결과 표시
- Mood 와 Style 을 클릭하면 해당 버튼만 Active 효과 표시
- Mood 와 Style 을 클릭하면 해당 서치 결과 표시
- 서치 결과에서 향수를 클릭하면 해당 디테일 페이지로 이동
- 향수 위에 마우스 오버하면 향수 제목 표시
- 향수 팔레트 컬러를 클릭하면 해당 색에 대한 검색 결과 표시
- 서치 결과에서 향수를 클릭하면 해당 디테일 페이지로 이동
- 향수 위에 마우스 오버하면 향수 제목 표시
- 해당 향수에 맞는 정보 표시
- 클릭하면 향수 id로 이동
- 뒤로가기 버튼 클릭
📦.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
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"
npm install --global yarn
- Clone the Repo
git clone https://github.com/mnxmnz/colfume-frontend.git
cd colfume-frontend
- Install Project Packages
yarn
- Run the Project (Dev Mode)
yarn dev
- Fork the Project
- Create your Feature Branch (git checkout -b feat/AmazingFeature)
- Commit your Changes (git commit -m 'add: some AmazingFeature')
- Push to the Branch (git push origin feat/AmazingFeature)
- Open a Pull Request
Distributed under the MIT License. See LICENSE
for more information.
김민지 | 손예지 | 김소령 | 김영서 |
---|---|---|---|
mnxmnz | yezgoget | soryeongk | kimyeongseo |