[장바구니 협업 Step2] 도밥(이도현) 미션 제출합니다.

.gitignore

@@ -13,10 +13,13 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
+.env.production
+.env.development
 
 npm-debug.log*
 yarn-debug.log*

.storybook/main.ts

@@ -6,6 +6,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/preset-create-react-app',
     '@storybook/addon-interactions',
+    'storybook-addon-react-router-v6',
   ],
   framework: {
     name: '@storybook/react-webpack5',

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<link
+  rel="stylesheet"
+  type="text/css"
+  href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
+/>

.storybook/preview.tsx

@@ -1,31 +1,38 @@
 import React from 'react';
-import type { Preview } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
+import { BrowserRouter } from 'react-router-dom';
 import { withThemeFromJSXProvider } from '@storybook/addon-styling';
+import { initialize, mswDecorator } from 'msw-storybook-addon';
 import GlobalStyles from '../src/styles/GlobalStyles';
-import { RecoilRoot } from 'recoil';
+import type { Preview } from '@storybook/react';
+import handler from '../src/mocks/handlers';
+import { CheckOutPointCostProvider } from '../src/context/CheckOutPointCostProvider';
 
 const customViewport = {
   Default: {
-    name: 'FHD',
-    styles: {
-      width: '1920px',
-      height: '1080px',
-    },
-  },
-  HD: {
     name: 'HD',
     styles: {
       width: '1280px',
       height: '720px',
     },
   },
+
+  FHD: {
+    name: 'FHD',
+    styles: {
+      width: '1920px',
+      height: '1080px',
+    },
+  },
+
   tablet: {
     name: 'tablet',
     styles: {
       width: '768px',
       height: '1024px',
     },
   },
+
   mobile: {
     name: 'mobile',
     styles: {
@@ -35,6 +42,8 @@ const customViewport = {
   },
 };
 
+initialize({ serviceWorker: { url: `${process.env.PUBLIC_URL}/mockServiceWorker.js` } });
+
 const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
@@ -48,16 +57,24 @@ const preview: Preview = {
       viewports: { ...customViewport },
       defaultViewport: 'Default',
     },
+    msw: {
+      handlers: [...handler],
+    },
   },
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <RecoilRoot>
+          <CheckOutPointCostProvider>
+            <Story />
+          </CheckOutPointCostProvider>
+        </RecoilRoot>
+      </BrowserRouter>
+    ),
+
+    mswDecorator,
+    withThemeFromJSXProvider({ GlobalStyles }),
+  ],
 };
 
 export default preview;
-
-export const decorators = [
-  (Story) => (
-    <RecoilRoot>
-      <Story />
-    </RecoilRoot>
-  ),
-  withThemeFromJSXProvider({ GlobalStyles }),
-];

README.md

@@ -5,18 +5,36 @@
 <p align="middle">React & Redux 장바구니 협업 미션</p>
 </p>
 
-## 🚀 Getting Started
+## 😀데모 페이지에서 바로 즐기기 :)
 
-백엔드와의 협업을 통해 실제 동작하는 애플리케이션을 만듭니다.
+[🎯데모 페이지](https://react-dobob-shopping-cart.netlify.app/)  
+[🎯스토리북](https://647ca9d2fde3abc441368a22-pwcyjzwguy.chromatic.com/)
 
-<br>
+---
 
-## 👏 Contributing
+## 어플리케이션 실행 방법!
 
-만약 미션 수행 중에 개선사항이 보인다면, 언제든 자유롭게 PR을 보내주세요.
+### 1. 패키지 다운받기
 
-<br>
+```bash
+npm i
+```
 
-## 🐞 Bug Report
+위 명령어로 필요한 패키지를 다운로드해 주세요!
 
-버그를 발견한다면, [Issues](https://github.com/woowacourse/react-shopping-cart-prod/issues)에 등록해주세요.
+### 2. 프로젝트 실행
+
+```bash
+npm run start
+```
+
+위 명령어를 터미널에 입력해주세요!
+
+### 3. 쇼핑😀
+
+```
+원하는 상품을 마음껏 담고 구매하세요!
+무료로 쇼핑하는데, 구매시 10% 포인트 적립까지!
+
+🤑사장님이 미쳤어요🤑
+```

docs/REQUIREMENTS.md

@@ -0,0 +1,26 @@
+# 레벨2 - 장바구니 협업-step2
+
+## 기능 구현 목록
+
+- 주문서 페이지
+  - 주문 상품 탭
+    - [x] 마크업
+    - [x] 주문할 상품 목록을 보여준다.
+  - 포인트 할인 탭
+    - [x] 마크업
+    - [x] 포인트 GET 요청을 통해 보유 포인트를 보여준다.
+    - [x] 전액사용 버튼을 눌러 보유 포인트를 모두 사용한다.
+  - 주문 가격 탭
+    - [ ] 마크업
+    - [ ] 정책에 따라 배송비 할인을 적용한다.
+    - [ ] 사용 포인트를 반영해 최종 결제 금액을 보여준다.
+    - [ ] 최종 결제 금액에 따라 적립 예정 포인트를 보여준다.
+- 주문 목록 페이지
+  - [ ] 마크업
+  - [ ] 주문목록 GET 요청을 통해 주문 목록을 보여준다.
+  - [ ] 각 주문을 눌러 주문 상세 페이지로 이동할 수 있다.
+- 주문 상세 페이지
+  - [ ] 마크업
+  - [ ] 개별주문 GET 요청을 통해 주문 상세를 보여준다.
+  - [ ] 총 결제 금액, 할인 금액, 최종 결제 금액을 보여준다.
+    - [ ] 할인 금액은 배송비, 포인트 별로 보여준다.