스파로스 아카데미 1차 프로젝트 - 신세계 몰 클론코딩
![](https://raw.githubusercontent.com/curomame/ssg_front_02/master/./public/img/readme/스크린샷 2022-09-06 오후 8.00.08.png)
- 22/07/25 - 22/09/07(약 7주)
- 이형민(F/E)
- 박도균(B/E)
- 조성범(B/E)
- 이수연(B/E)
- Notion
- Google Sheet
- Github
- Zoom
- Gather
* 백엔드 프로젝트는 아래의 링크를 확인해주세요!
스파로스 아카데미의 첫 번째 프로젝트! 신세계 몰의 모바일 페이지 클론코딩을 진행하였습니다.
project
├─ public
│ ├─ css
│ ├─ img
│ └─ index.html
│
├─ src
│ ├─ assets
│ │ ├─ css
│ │ ├─ datas
│ │ └─ img
│ ├─ component
│ │ ├─ components
│ │ ├─ layout
│ │ └─ parts
│ ├─ context
│ ├─ hooks
│ ├─ pages
│ ├─ recoil
│ │ └─ atoms
│ └─ utils
│
├─ .env.development
├─ .gitignore
├─ jsconfig.json
├─ package.json
└─ README.md
Sprint |
상태 |
완성도 |
수행 내용 |
spt0 |
✅ |
----- |
프로젝트 수행 계획 수립 |
spt1 |
✅ |
100% |
DB설계 및 API 정의서 작성 |
spt2 |
✅ |
100% |
공통 레이아웃 및 메인 화면 설계 |
spt3 |
✅ |
100% |
공통 레이아웃 및 메인 화면 구현 |
spt4 |
✅ |
100% |
통합 검색 설계 및 구현 |
spt5 |
✅ |
100% |
상품/카테고리 목록 화면 구현 |
spt6 |
✅ |
100% |
장바구니 설계 및 구현 |
spt7 |
✅ |
100% |
로그인 및 회원가입 설계 및 구현 |
spt8 |
✅ |
100% |
로그인 및 회원가입 설계 및 구현 |
spt9 |
✅ |
100% |
위시리스트 설계 및 구현 |
spt10 |
✅ |
100% |
상품 상세 설계 및 구현 |
spt11 |
✅ |
100% |
API 테스트 및 문서 정리 |
spt12 |
✅ |
100% |
마무리 테스트 및 CSS 작업 |
Demo |
⏹ |
----- |
1차 최종 발표 진행 |
git clone git@github.com:curomame/ssg_front_02.git
3.Server API 입력 in .env.development
REACT_APP_TEST_URL 서버 Url
REACT_APP_DISPLAY_IMG_URL 서버 로컬 이미지 Url
![](https://raw.githubusercontent.com/curomame/ssg_front_02/master/./public/img/readme/gusungdododo.png)
![](https://camo.githubusercontent.com/e2985be1cd28267ac588f294e8fbf254d3c2833adf61463b4bdafe07ebfcf0ad/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6a6176617363726970742d4637444631453f7374796c653d666c6174266c6f676f3d6a617661736372697074266c6f676f436f6c6f723d626c61636b)
![](https://camo.githubusercontent.com/869eece49d8d7e1407175f25262ee9328fd8fcd19400f69a7a79ac3ad1991563/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f52656163742d3837434546413f7374796c653d666c6174266c6f676f3d5265616374266c6f676f436f6c6f723d7768697465)
![](https://camo.githubusercontent.com/73fecef5a0d9593022477e8bf54d43ea677d7916430bd4c3baf689095a6c0fef/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f48544d4c352d4533344632363f7374796c653d666c6174266c6f676f3d68746d6c35266c6f676f436f6c6f723d7768697465)
![](https://camo.githubusercontent.com/1daad334a206f3a3cc98398e85f8057dcbcf63ad6b908998fa0ccbefc0d64dd2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f435353332d3135373242363f7374796c653d666c6174266c6f676f3d63737333266c6f676f436f6c6f723d7768697465)
![](https://camo.githubusercontent.com/99183fbf53e749ef2e91f821c4b8f132b8ce3103ad1408ae841646560ed38c03/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5653436f64652d3030374143433f7374796c653d666c6174266c6f676f3d56697375616c2053747564696f20436f6465266c6f676f436f6c6f723d7768697465)
![](https://camo.githubusercontent.com/dc32208f2fd75b8487e4d68d4d15f28af05f9788bfb0a7ad6523dea250ec5b7c/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4769746875622d3138313731373f7374796c653d666c6174266c6f676f3d676974687562266c6f676f436f6c6f723d7768697465)
![](https://camo.githubusercontent.com/ceb49223237d836dd0a104f59bdaa157c8dd5cb82849152ff49ef131d9be1a14/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4e6f74696f6e2d3030303030303f7374796c653d666c6174266c6f676f3d4e6f74696f6e266c6f676f436f6c6f723d7768697465)
axios - 서버 통신
react-router-dom - 라우팅 및 파람스 관리
react-slick - 캐러셀 디자인
recoil - 전역 상태관리
json-server - json data 테스트 진행