SSG.COM 클론코딩

📍 프로젝트 소개

본 프로젝트는 스파로스 아카데미 1기에서 진행한 SSG.COM 신세계몰 클론 코딩 프로젝트입니다.

• 쓱싹쓱싹(5조)의 프론트엔드 저장소입니다.

Project Repositories

• 프론트엔드
• 백엔드

 

📍 Demo

Main Page

회원가입/로그인

상품 검색

필터 기능

좋아요

상품 카테고리

상품 목록 조회

상품 상세 조회

최근 본 상품

장바구니

주문하기

주문 조회

배송지 관리

결제수단 관리

Loading Spinner

Not Found Page

 

📍 시스템 아키텍처

 

📍 개발환경

> npm (v8.15.0)
> node (v16.16.0)
> react (v18.2.0)

설치 및 실행

1. .env.sample 파일 .env로 수정

2. .env 파일의 REACT_APP_ZIPCODE_SERVICE_KEY2, REACT_APP_ZIPCODE_SERVICE_URL2 수정
   주소기반산업지원서비스의 도로명주소 검색 API 사용 중 (배송지 - 우편번호 검색에 사용)

3. 설치 및 실행

   $ npm install
   $ npm run start

 

📍 사용 기술

Frontend

           

Backend

     

Deploy

       

Tools

     

 

📍 디렉터리 구조

├─ ... # 환경설정 파일들
├─ README.md
├─ public
└─ src
    ├─ index.jsx
    ├─ Root.jsx # BrowserRouter, AuthContext, Recoil 설정
    ├─ assets # 데이터, 이미지, SVG 관리 폴더
    ├─ components
    │  ├─ App.jsx # 라우팅
    │  └─ ... # 컴포넌트 폴더
    ├─ lib # hooks 폴더
    ├─ pages # page 컴포넌트 폴더
    ├─ store # recoil, context 폴더
    └─ styles # style 폴더

 

📍 개발 산출물

• wiki 참조