devMart

🛒 devMart

• 사용자는 개발자 상품을 탐색하고, 찜, 장바구니 담기, 바로 결제 기능을 이용할 수 있습니다.
• 개발자 유형 테스트를 통해 추천 아이템을 확인할 수 있습니다.
• 단축키를 활용한 이스터에그로 숨겨진 밈 콘텐츠를 즐길 수 있습니다.
• 상품 리스트 정렬 기능(최신순, 인기순, 구매순)과 좌측 카테고리 필터, 플로팅 버튼 등 다양한 UI 기능을 제공합니다.

🗂️ 프로젝트 구조

/devMart
│
├── /client 
│ ├── /assets 
│ │ ├── /images
| | | ├── /easter-egg
| | | └── /product-image-removebg
| | |
│ │ └── /sounds 
│ │
│ ├── /features  주요 기능별 모듈
│ │ ├── /change-theme   (테마 전환 기능)
│ │ ├── /developer-survey   (개발자 유형 테스트)
│ │ ├── /easter-egg   (밈 이스터에그)
│ │ ├── /navigation   (좌측 내비게이션 메뉴)
│ │ ├── /product-sort   (상품 정렬 기능)
│ │ ├── /rendering   (상품 리스트 렌더링 관련 기능)
│ │ ├── products.js   (상품 데이터 정의)
│ │ ├── shuffle-products.js   (상품 무작위 정렬 함수)
│ │ └── storage.js   (localStorage 제어)
│ │
│ │
│ ├── index.html 
│ ├── main.js 
│ ├── reset.css
│ └── style.css 
│
├── /node_modules 
│
├── .gitignore 
├── .prettierrc.cjs 
├── eslint.config.mjs 
├── package-lock.json 
├── package.json 
└── README.md 

💫 주요 기능

• 🛒 플로팅 버튼을 통한 상품 찜하기 / 장바구니 담기 / 바로 결제 기능
• 🧩 개발자 유형 테스트로 추천 아이템 확인
• 🎮 단축키를 이용한 이스터에그(밈) 출력
• 🗂️ 카테고리 필터 및 상품 정렬 기능 제공
• 🧭 좌측 네비게이션을 통한 섹션 이동
• 🌓 다크 모드 지원
• 💾 로컬스토리지를 통한 데이터 저장
• 📱 반응형 웹사이트
• ⚙ 웹 접근성 향상

🚀 시작하는 방법

1. 프로젝트 실행 전, 터미널에서 아래 명령어를 입력해 주세요.
   (※ npm이 설치되어 있어야 합니다.)

   npm install    # 최초 1회 패키지 내용 설치
   npm run dev    # 클라이언트 실행

2. Vercel 배포 링크로도 접속하실 수 있습니다.

👣 유저 플로우

🧱 구조도 및 협업툴

📷 미리보기

👨‍💻 팀원

변지현	신민석	이소민	이승은	황유정
FE	FE	FE	FE	FE
GitHub	GitHub	GitHub	GitHub	GitHub