[Nick] VM 2주차 1번째 PR (#65)

* [init] 모든 작업 초기화 * [style] 공통 스타일, common 스타일 적용 * [style] Common, Global Style Update * [style] 절대경로 설정 * [feat] Header 페이지 전환 Toggle버튼 구현 * [feat]라우트 기능 설정 * [fix] module 버전 불일치로 인한 버그 수정을 위한 npm update * [feat] 404 NotFound Page 구현 * [style] 웹폰트 적용 * [style] Product Img 추가 * [style] 전역 style 수정 * [feat] VM Product Mokdata 구성 * [feat] Page 전환시 Header Slide 구현 * [feat] product context 구현 * [feat] 404 Not found Page 라우트 활성화 * [feat] 자판기 Product 화면 구현, Context를 이용해 재고상황 저장, Local Storage를 통해 페이지 이동시에 상태 손실 해결 * [style]불필요한 코드 제거 * [fix] 충돌 해결문구 제거 * [feat] Context 범위 변경 Local Storage 제거 * [feat] 상태표시창 화면 구현 * [feat]상태표시창 css 추가 * [feat] Context 범위 재설정, Local strorage 삭제
codesquad-members-2022 · May 19, 2022 · b01279a · b01279a
1 parent 85646ca
commit b01279a
Show file tree

Hide file tree

Showing 42 changed files with 2,732 additions and 5,305 deletions.
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/img/abokado.png b/public/img/abokado.png
diff --git a/public/img/chocolate.png b/public/img/chocolate.png
diff --git a/public/img/grape.png b/public/img/grape.png
diff --git a/public/img/orange.png b/public/img/orange.png
diff --git a/public/img/orange2.png b/public/img/orange2.png
diff --git a/public/img/papaya.png b/public/img/papaya.png
diff --git a/public/img/rainbow.png b/public/img/rainbow.png
diff --git a/public/img/soda.png b/public/img/soda.png
diff --git a/public/img/soju.png b/public/img/soju.png
diff --git a/public/img/strawJuice.png b/public/img/strawJuice.png
diff --git a/public/img/water.png b/public/img/water.png
diff --git a/public/img/yogurt.png b/public/img/yogurt.png
diff --git a/public/index.html b/public/index.html
@@ -2,13 +2,13 @@
 <html lang="ko">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap" rel="stylesheet">
     <title>VM</title>
   </head>
   <body>

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import { StockProvider } from 'context/productStock';
+import GlobalStyle from 'Assets/Style/Global';
+import GNB from 'components/Header/GNB';
+import VM from 'pages/VM';
+import Wallet from 'pages/Wallet';
+import Store from 'pages/Store';
+import NotFound from 'pages/NotFound';
+
+const App = () => {
+  return (
+    <>
+      <GlobalStyle />
+      <GNB />
+      <StockProvider>
+        <Routes>
+          <Route index element={<VM />} />
+          <Route path="/vm" element={<VM />} />
+          <Route path="/wallet" element={<Wallet />} />
+          <Route path="/store" element={<Store />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </StockProvider>
+    </>
+  );
+};
+export default App;
diff --git a/src/Assets/CommonStyle.js b/src/Assets/CommonStyle.js
diff --git a/src/Assets/GlobalStyles.js b/src/Assets/GlobalStyles.js
diff --git a/src/Assets/Style/Common.js b/src/Assets/Style/Common.js
@@ -0,0 +1,29 @@
+import { css } from 'styled-components';
+
+const F_center = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Default_shadow = css`
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+`;
+
+const Default_radius = css`
+  border-radius: 1.5rem;
+`;
+
+const Color = {
+  black: '#010305;',
+  white: '#FFFFFF',
+  gray: '#D9D9D9',
+  headerGray: '#1C2024',
+  backGroundGray: '#2B2F34;',
+  lightGray: '#3D444C',
+  darkGray: '#1D2125;',
+  yellowGreen: '#12DD88',
+  neonGreen: 'rgba(64, 233, 101, 1)',
+};
+
+export { F_center, Default_radius, Default_shadow, Color };
diff --git a/src/Assets/Style/Global.js b/src/Assets/Style/Global.js
@@ -0,0 +1,33 @@
+import { createGlobalStyle } from 'styled-components';
+import { reset } from 'styled-reset';
+import { Color } from './Common';
+
+const GlobalStyle = createGlobalStyle`
+  ${reset}
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+  html{
+    font-size: 10px;
+    font-family: 'Noto Sans KR', sans-serif;
+  }
+  body{
+    background-color: ${Color.black};
+  }
+  button{
+    cursor: pointer;
+    outline: none;
+};
+
+  #root{
+    display: flex;
+    align-items:center;
+    flex-direction: column;
+    width: 100vw;
+    height: 100vh;
+  }
+`;
+
+export default GlobalStyle;
diff --git a/src/Assets/VMData/products.js b/src/Assets/VMData/products.js
@@ -0,0 +1,88 @@
+const VMproducts = [
+  {
+    name: '레인보우샤베트',
+    price: 2500,
+    img: '/img/rainbow.png',
+    stock: 2,
+    id: 'rainbow',
+  },
+  {
+    name: '환타',
+    price: 1000,
+    img: '/img/orange.png',
+    stock: 3,
+    id: 'fanta',
+  },
+  {
+    name: '에너지드링크',
+    price: 800,
+    img: '/img/soda.png',
+    stock: 10,
+    id: 'powerAde',
+  },
+  {
+    name: '초코우유',
+    price: 1000,
+    img: '/img/chocolate.png',
+    stock: 5,
+    id: 'chocolate',
+  },
+  {
+    name: '코코아주스',
+    price: 1200,
+    img: '/img/papaya.png',
+    stock: 4,
+    id: 'cocoa',
+  },
+  {
+    name: '오렌지주스',
+    price: 1300,
+    img: '/img/orange2.png',
+    stock: 4,
+    id: 'orangeJuice',
+  },
+  {
+    name: '딸기주스',
+    price: 1000,
+    img: '/img/strawJuice.png',
+    stock: 4,
+    id: 'strawberry',
+  },
+  {
+    name: '블루베리주스',
+    price: 1000,
+    img: '/img/grape.png',
+    stock: 4,
+    id: 'blueberry',
+  },
+  {
+    name: '요구르트',
+    price: 500,
+    img: '/img/yogurt.png',
+    stock: 15,
+    id: 'yogurt',
+  },
+  {
+    name: '아보카도주스',
+    price: 1500,
+    img: '/img/abokado.png',
+    stock: 4,
+    id: 'abocado',
+  },
+  {
+    name: '생수',
+    price: 500,
+    img: '/img/water.png',
+    stock: 15,
+    id: 'water',
+  },
+  {
+    name: '참이슬',
+    price: 4500,
+    img: '/img/soju.png',
+    stock: 100,
+    id: 'soju',
+  },
+];
+
+export default VMproducts;
diff --git a/src/components/Header/GNB.jsx b/src/components/Header/GNB.jsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import styled from 'styled-components';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { F_center, Color } from 'Assets/Style/Common';
+
+const GNB = () => {
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+
+  const VMBtnClickHandler = () => {
+    navigate('/vm');
+  };
+  const WalletBtnClickHandler = () => {
+    navigate('/wallet');
+  };
+
+  return (
+    <form>
+      <GNBdiv>
+        <Slide className="slide" pathname={pathname} />
+        <GNBRadioButton
+          type="radio"
+          name="GNB"
+          id="VMPageSelectBtn"
+          checked={true}
+          readOnly
+        />
+        <GNBLabel
+          onClick={VMBtnClickHandler}
+          htmlFor="VMPageSelectBtn"
+          className="VMSelectBtn">
+          자판기
+        </GNBLabel>
+        <GNBRadioButton
+          type="radio"
+          name="GNB"
+          id="WalletPageSelectBtn"
+          readOnly
+        />
+        <GNBLabel
+          onClick={WalletBtnClickHandler}
+          htmlFor="WalletPageSelectBtn"
+          className="WalletSelectBtn">
+          지갑
+        </GNBLabel>
+      </GNBdiv>
+    </form>
+  );
+};
+
+const Slide = styled.div`
+  background-color: ${Color.yellowGreen};
+  position: absolute;
+  width: 20rem;
+  height: 6.9rem;
+  border-radius: 10rem;
+  transition: 0.3s;
+  box-shadow: 0 0.3rem 2rem rgba(79, 255, 181, 0.5);
+  ${({ pathname }) => {
+    if (pathname !== '/wallet') {
+      return 'left:50%;transform:translateX(-100%)';
+    }
+    return 'right: 0px';
+  }}
+`;
+
+const GNBdiv = styled.div`
+  ${F_center};
+  $this: &;
+  margin-top: 3rem;
+  justify-content: space-around;
+  position: relative;
+  width: 40rem;
+  height: 6.9rem;
+  background-color: ${Color.headerGray};
+  box-shadow: 0 0.4rem 3rem rgba(19, 15, 37, 0.1);
+  border-radius: 10rem;
+  #VMPageSelectBtn:checked ~ .VMSelectBtn {
+    color: black;
+  }
+  #WalletPageSelectBtn:checked ~ .WalletSelectBtn {
+    color: black;
+  }
+`;
+
+const GNBRadioButton = styled.input`
+  display: none;
+`;
+
+const GNBLabel = styled.label`
+  ${F_center}
+  color: #6E757D;
+  width: 20rem;
+  height: 6.9rem;
+  border-radius: 10rem;
+  font-size: 2.8rem;
+  font-weight: 700;
+  cursor: pointer;
+  z-index: 1;
+`;
+export default GNB;