[2단계 - 장바구니] 유세지(김용래) 미션 제출합니다.

.eslintrc.json

@@ -35,6 +35,8 @@
     "import/prefer-default-export": "off",
     "class-methods-use-this": "off",
     "consistent-return": "off",
-    "default-param-last": "off"
+    "default-param-last": "off",
+    "react/forbid-prop-types": "off",
+    "function-paren-newline": "off"
   }
 }

.gitignore

@@ -9,11 +9,14 @@
 # misc
 .DS_Store
 .env.local
+.env.development
 .env.development.local
 .env.test.local
+.env.production
 .env.production.local
 
 npm-debug.log*
+*.log
 
 /.vscode
 /storybook-static

.storybook/config/snackbarReducer.js

@@ -0,0 +1,20 @@
+import { 스낵바_액션 } from 'actions/types';
+
+const initialState = {
+  visible: true,
+  message: '스낵바 메시지입니다😊',
+};
+
+export default (state = initialState, action) => {
+  const { type, payload } = action;
+
+  switch (type) {
+    case 스낵바_액션.PUSH_MESSAGE:
+      return { visible: true, message: payload };
+
+    case 스낵바_액션.HIDE_MESSAGE:
+      return { visible: false, message: '' };
+    default:
+      return state;
+  }
+};

.storybook/config/snackbarStore.js

@@ -0,0 +1,10 @@
+import { createStore, applyMiddleware, combineReducers } from 'redux';
+import ReduxThunk from 'redux-thunk';
+import ReduxLogger from 'redux-logger';
+import snackbar from './snackbarReducer';
+import { composeWithDevTools } from 'redux-devtools-extension';
+
+export default createStore(
+  combineReducers({ snackbar }),
+  composeWithDevTools(applyMiddleware(ReduxThunk, ReduxLogger)),
+);

.storybook/preview.js

@@ -1,9 +1,34 @@
+import { addDecorator } from '@storybook/react';
+import { Provider } from 'react-redux';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Global } from '@emotion/react';
+
+import store from 'store';
+
+import GlobalStyles from 'styles/GlobalStyles';
+import Snackbar from 'components/Snackbar';
+import snackbarStore from './config/snackbarStore';
+
+addDecorator((story) => (
+  <Provider store={store}>
+    <Provider store={snackbarStore}>
+      <Global styles={GlobalStyles} />
+      <Snackbar />
+      <BrowserRouter>
+        <Routes>
+          <Route path="*" element={story()} />
+        </Routes>
+      </BrowserRouter>
+    </Provider>
+  </Provider>
+));
+
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};

REQUIREMENTS.md

@@ -1,5 +1,13 @@
 # 🚩 기능 요구사항
 
-- [x] 메인 화면에서 현재 판매중인 상품들을 볼 수 있어야한다.
-- [x] 장바구니 버튼을 눌러 상품을 장바구니에 담을 수 있어야한다.
+- [x] 메인 화면에서 현재 판매중인 상품들을 볼 수 있어야 한다.
+- [x] 장바구니 버튼을 눌러 상품을 장바구니에 담을 수 있어야 한다.
 - [x] JSON 서버를 통하여 상품 목록을 불러올 수 있어야 한다.
+- [x] 장바구니 페이지에서 장바구니에 담긴 상태를 확인할 수 있어야 한다.
+- [x] 상세정보 페이지에서 특정 상품의 상세 정보를 확인할 수 있어야 한다.
+- [x] MSW를 활용하여 API를 Mocking 하여야 한다.
+
+# ✔️ 테스트 요구사항
+
+- [x] 구현 사항에 대해 단위 테스트를 진행하여야 한다.
+- [x] 스토리북을 이용해 컴포넌트의 UI를 확인할 수 있어야 한다.