https://github.com/nalsae/coz-shopping

🎁 React로 구현한 커머스 쇼핑몰 🎁
https://github.com/nalsae/coz-shopping

Last synced: 4 months ago
JSON representation

🎁 React로 구현한 커머스 쇼핑몰 🎁

• Host: GitHub
• URL: https://github.com/nalsae/coz-shopping
• Owner: nalsae
• Fork: true (codestates-seb/fe-sprint-coz-shopping)
• Created: 2023-07-10T09:05:35.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-16T15:24:27.000Z (over 1 year ago)
• Last Synced: 2023-07-16T16:28:11.137Z (over 1 year ago)
• Homepage:
• Size: 118 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🎁 COZ Shopping

> React로 구현한 커머스 쇼핑몰 사이트입니다.

* 프로젝트 기간 : 2023.07.11 ~ 2023.07.17

* 참여 인원 : 1명

* [요구사항 명세서](https://codestates.notion.site/codestates/S4-05073c7f88a942c0ad5e5fcdd68c1dec)

* [디자인 시안](https://www.figma.com/file/TfWAvMXegGEJiS3etqOSfs/FE-S4-project?node-id=0%3A1&t=cHu4rWaqJ0c5CTVV-1)

## 🔧 기술 스택

### 🔨 Front-End

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white) ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) ![Styled Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white)  ![Axios Badge](https://img.shields.io/badge/Axios-5A29E4?logo=axios&logoColor=fff&style=for-the-badge)

## 📑 폴더 구조

```

fe-sprint-coz-shopping

├─ public

│  └─ index.html

└─ src

   ├─ actions

   ├─ App.jsx

   ├─ assets

   │  ├─ icons

   │  └─ imgs

   ├─ components

   │  └─ shared

   ├─ hooks

   ├─ index.js

   ├─ pages

   ├─ reducers

   ├─ store

   ├─ styles

   └─ utils

      ├─ constants

      └─ functions

```

## 🏃‍♀️ 실행 방법

### 1. Clone Repository

```

git clone https://github.com/nalsae/coz-shopping.git

```

### 2. Install Packages

```

npm install

```

### 3. Run

```

npm start

```

## 🖥 구현 이미지

(gif 파일 용량 때문에 로딩에 시간이 좀 걸립니다 😥)

|**메인 페이지**|**상품 리스트 페이지**|

|:---:|:---:|

|![메인 gif](https://github.com/nalsae/coz-shopping/assets/101828759/b74597ba-74fb-48f9-a172-86dc1064a19f)|![상품리스트](https://github.com/nalsae/coz-shopping/assets/101828759/27311369-22e0-4920-af95-756739719300)|

|**북마크 리스트 페이지**|**즐겨찾기 기능**|

|![북마크리스트](https://github.com/nalsae/coz-shopping/assets/101828759/3c2685f9-2e56-4696-99af-cea814a27140)|![즐겨찾기](https://github.com/nalsae/coz-shopping/assets/101828759/efb1a55a-2d66-4c41-bad5-c26330507dda)|

|**필터링 기능**|**무한 스크롤 기능**|

|![필터링](https://github.com/nalsae/coz-shopping/assets/101828759/d48a9ec1-9dec-44ca-89d6-b68a9a339688)|![무한스크롤](https://github.com/nalsae/coz-shopping/assets/101828759/459989d1-ef5e-464d-8a33-e51ed6842627)|

|**토스트 기능**|**모달 기능**|

|![토스트](https://github.com/nalsae/coz-shopping/assets/101828759/3f6fb058-f369-425d-9541-1d8dd12a5cd2)|![모달](https://github.com/nalsae/coz-shopping/assets/101828759/f09297c5-422f-4674-9daf-3c9230b7dca5)|