Merge pull request #4 from dbstjs95/dev

Dev buildspec.yml 추가

buildspec.yml

@@ -0,0 +1,15 @@
+version: 0.2
+
+phases:
+  pre_build:
+    commands:
+      - cd client
+      - npm ci
+  build:
+    commands:
+      - npm run build
+
+artifacts:
+  files:
+    - "**/*"
+  base-directory: client/build

client/public/index.html

@@ -19,7 +19,6 @@
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
-
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.

client/src/App.js

@@ -76,12 +76,14 @@ function App() {
               <Route path=":postId" element={<Post />} />
             </Route> */}
           </Route>
+          <Route path="contentfree" element={<ContentFree />} />
+          <Route path="contentpaid" element={<ContentPaid />} />
           {/* 유료컨텐츠, 무료컨텐츠 */}
           <Route path="freeboard" element={<FreeBoard />}>
-            <Route path=":postId" element={<ContentFree />} />
+            {/* <Route path=":postId" element={<ContentFree />} /> */}
           </Route>
           <Route path="paidboard" element={<PaidBoard />}>
-            <Route path=":postId" element={<ContentPaid />} />
+            {/* <Route path=":postId" element={<ContentPaid />} /> */}
           </Route>
           <Route path="mypage" element={<SideBar />}>
             <Route index element={<Mypage />} />
@@ -99,7 +101,7 @@ function App() {
           <Route path="*" element={<NotFoundPage />} /> */}
         </Route>
       </Routes>
-      {/* <Footer /> */}
+      <Footer />
     </BrowserRouter>
   );
 }

client/src/component/ChargeBox.js

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { selectUserInfo } from '../store/slices/userInfo';
+import { inputPayment } from '../store/slices/point';
+import Payment from './Payment';
+
+const ChargeBoxContainer = styled.div`
+  /* border: 3px solid black; */
+  background-color: #f3f702;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  border-radius: 10px;
+  > p.header {
+    width: 80%;
+    font-weight: bold;
+    padding-bottom: 5px;
+    border-bottom: 1px solid black;
+  }
+  > input {
+    font-size: 1rem;
+    padding: 5px;
+  }
+  > button {
+    font-size: 0.9rem;
+    padding: 7px;
+    background-color: #30302d;
+    color: white;
+    border-radius: 5px;
+  }
+`;
+
+export default function ChargeBox() {
+  const dispatch = useDispatch();
+  const { phone, email } = useSelector(selectUserInfo);
+
+  return (
+    <ChargeBoxContainer className="charge-box">
+      <p className="header">결제방식 {'>'} 카카오페이</p>
+      <input
+        placeholder="금액 입력"
+        type="number"
+        min="3000"
+        step="1000"
+        onChange={(e) =>
+          dispatch(
+            inputPayment({
+              amount: e.target.value,
+              buyer_tel: phone,
+              buyer_email: email,
+            }),
+          )
+        }
+      />
+      <p style={{ color: 'red' }}>3000원 이상부터 가능합니다.</p>
+      <Payment />
+    </ChargeBoxContainer>
+  );
+}

client/src/component/Footer.js

@@ -1,29 +1,27 @@
-import React from 'react'
-import logo from '../images/logo.png'
-import '../css/Footer.css'
+import React from 'react';
+import logo from '../images/logo.png';
+import '../css/Footer.css';
 
 const footer = () => {
-
   const thisYear = () => {
     const year = new Date().getFullYear();
-    return year
-  }
-
+    return year;
+  };
 
   return (
-    <div className='footer'>
+    <div className="footer" style={{ height: '85px' }}>
       <p>
         Copyright &copy; <span>{thisYear()}</span>
       </p>
-      <ul className='footer-info'>
+      <ul className="footer-info">
         {/* <li>TeamLeader&nbsp;:&nbsp;오상민</li>
         <li>Back-End&nbsp;:&nbsp;오상민</li>
         <li>Back-End&nbsp;:&nbsp;유지훈</li>
         <li>Front-End&nbsp;:&nbsp;최윤선</li>
         <li>Front-End&nbsp;:&nbsp;박제곤</li> */}
       </ul>
     </div>
-  )
-}
+  );
+};
 
-export default footer;
+export default footer;

client/src/component/Header.js

@@ -14,7 +14,6 @@ function Header() {
   const [isOpen, setIsOpen] = useState(false);
 
   const handleBar = () => {
-    console.log('bar눌림');
     setIsOpen(!isOpen);
   };
 
@@ -25,7 +24,7 @@ function Header() {
           <FontAwesomeIcon
             icon={faBars}
             className="header-faBars"
-            onClick={() => handleBar()}
+            onClick={handleBar}
           />
           <NavLink to="/">
             <img
@@ -36,7 +35,7 @@ function Header() {
             />
           </NavLink>
         </div>
-        <ul className="header-menu">
+        <ul className={isOpen ? 'header-menu open' : 'header-menu'}>
           <NavLink to="/main">
             <li>메인페이지</li>
           </NavLink>

client/src/component/MypageCompo/FreeWriting.js

@@ -88,9 +88,10 @@ function Writing() {
     e.preventDefault();
     axios
       .post(
-        'http://localhost:8080/info',
+        `${process.env.REACT_APP_SERVER_DEV_URL}/info`,
         {
-          type: 'free',
+          type: 'Free',
+          targetPoint: 0,
           ...textValues,
         },
         config,