Merge pull request #26 from dbstjs95/dev

css/기능 수정
codestates · May 16, 2022 · 622e6b5 · 622e6b5
2 parents 8a8e967 + e8cc362
commit 622e6b5
Show file tree

Hide file tree

Showing 17 changed files with 1,266 additions and 460 deletions.
diff --git a/client/src/component/ChargeBox.js b/client/src/component/ChargeBox.js
@@ -85,12 +85,9 @@ export function PayWithPoints({ handleClick }) {
           postConfig,
         )
         .then((res) => {
-          const { message } = res.data;
-          if (message) {
-            dispatch(updateState({ point: restPoint }));
-            dispatch(updatePostState({ isPurchased: true }));
-            alert('결제 성공');
-          }
+          dispatch(updateState({ point: restPoint }));
+          dispatch(updatePostState({ isPurchased: true }));
+          alert('결제 성공');
         })
         .catch((err) => alert('결제 실패'));
       //loading indicator end

diff --git a/client/src/component/Footer.js b/client/src/component/Footer.js
@@ -1,37 +1,147 @@
 import React from 'react';
 import styled from 'styled-components';
+import logo from '../images/logo.png';
 
-const FooterContainer = styled.div`
-  text-align: center;
-  background: #343a40;
+const FooterContainer = styled.footer`
+  background-color: gray;
+  padding: 1rem;
   color: white;
-  align-items: center;
-  padding: 20px 30px;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+`;
 
-  > ul {
-    list-style: none;
-  }
+const ContentContainer = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1rem;
 `;
 
-const Footer = () => {
-  const thisYear = () => {
-    const year = new Date().getFullYear();
-    return year;
-  };
+const LinksContainer = styled.div`
+  padding-left: 1rem;
+  border-left: 1px solid white;
+  p {
+    font-weight: bold;
+    display: flex;
+  }
+  ul {
+    display: flex;
+    gap: 2rem;
+  }
+  a:hover {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: darkgray;
+  }
+`;
 
+function Footer() {
   return (
-    <FooterContainer className="footer">
-      <p>
-        Copyright &copy; <span>{thisYear()}</span>
-      </p>
-      <ul className="footer-info">
-        <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>
+    <FooterContainer>
+      <ContentContainer>
+        <LinksContainer>
+          <img src={logo} height="50px" />
+          <p>Copyright © 2022 Info-Market</p>
+        </LinksContainer>
+        <LinksContainer>
+          <p>About Info-Market</p>
+          <ul>
+            <li>
+              <a
+                href="https://github.com/codestates/info-market"
+                style={{ color: 'inherit', textDecoration: 'inherit' }}
+              >
+                Repository
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://github.com/codestates/info-market/wiki"
+                style={{ color: 'inherit', textDecoration: 'inherit' }}
+              >
+                Wiki
+              </a>
+            </li>
+          </ul>
+        </LinksContainer>
+        <LinksContainer>
+          <p>Contact</p>
+          <ul>
+            <li>
+              <a
+                href="https://github.com/tkdals0905"
+                style={{ color: 'inherit', textDecoration: 'inherit' }}
+              >
+                오상민
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://github.com/wlgns1501"
+                style={{ color: 'inherit', textDecoration: 'inherit' }}
+              >
+                유지훈
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://github.com/dbstjs95"
+                style={{ color: 'inherit', textDecoration: 'inherit' }}
+              >
+                최윤선
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://github.com/goni1621"
+                style={{ color: 'inherit', textDecoration: 'inherit' }}
+              >
+                {' '}
+                박제곤
+              </a>
+            </li>
+          </ul>
+        </LinksContainer>
+      </ContentContainer>
     </FooterContainer>
   );
-};
+}
 
 export default Footer;
+// import React from 'react';
+// import styled from 'styled-components';
+
+// const FooterContainer = styled.div`
+//   text-align: center;
+//   background: #343a40;
+//   color: white;
+//   align-items: center;
+//   padding: 20px 20px;
+//   > ul {
+//     list-style: none;
+//   }
+// `;
+
+// const Footer = () => {
+//   const thisYear = () => {
+//     const year = new Date().getFullYear();
+//     return year;
+//   };
+
+//   return (
+//     <FooterContainer className="footer">
+//       <p>
+//         Copyright &copy; <span>{thisYear()}</span>
+//       </p>
+//       <ul className="footer-info">
+//         <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>
+//     </FooterContainer>
+//   );
+// };
+
+// export default Footer;
diff --git a/client/src/component/MypageCompo/UserInfo.js b/client/src/component/MypageCompo/UserInfo.js
@@ -6,7 +6,11 @@ import user from '../../images/user.png';
 import Modal from '../../modals/Modal-1.js';
 import { useDispatch, useSelector } from 'react-redux';
 import { updateState, selectUserInfo } from '../../store/slices/userInfo';
-import { selectPoint, updatePointState } from '../../store/slices/point';
+import {
+  selectPoint,
+  updatePointState,
+  initPayment,
+} from '../../store/slices/point';
 import ChargeBox from '../ChargeBox';
 import AWS from 'aws-sdk';
 import { v1, v3, v4, v5 } from 'uuid';
@@ -222,7 +226,6 @@ function UserInfo() {
       )
       .then((res) => {
         const { user } = res.data;
-        console.log('user: ', user)
         if (user) {
           delete user.password;
           dispatch(updateState({ ...user }));
@@ -389,13 +392,14 @@ function UserInfo() {
       {modalOpen && (
         <Modal
           role="payment"
-          handleBtnClick={() =>
+          handleBtnClick={() => {
             dispatch(
               updatePointState({
                 modalOpen: false,
               }),
-            )
-          }
+            );
+            dispatch(initPayment());
+          }}
           content={<ChargeBox />}
         />
       )}

diff --git a/client/src/component/Payment.js b/client/src/component/Payment.js
@@ -86,7 +86,7 @@ const Payment = (effect, deps) => {
           alert('결제 성공');
         })
         .catch((err) => {
-          if (err.response.message) alert(err.response.message);
+          if (err.response?.message) alert(err.response.message);
         });
     } else {
       dispatch(initPayment());

diff --git a/client/src/component/Search.js b/client/src/component/Search.js
@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
 import { useNavigate, useLocation } from 'react-router-dom';
 import QueryString from 'qs';
+import { reset } from '../store/slices/search';
 
 const boxShadow = '0 4px 6px rgb(32 33 36 / 28%)';
 // const activeBorderRadius = '1rem 1rem 0 0';
@@ -102,6 +103,7 @@ function SelectBox({ items, className, selectVal, handleSelect }) {
 
 export default function Search({ single }) {
   const navigate = useNavigate();
+  const dispatch = useDispatch();
   const location = useLocation();
 
   const [localIpVal, setLocalIpVal] = useState('');
@@ -137,8 +139,10 @@ export default function Search({ single }) {
 
   const searchClick = (e) => {
     e.preventDefault();
+    console.log('클릭');
+    console.log(localIpVal);
     if (!localIpVal) return alert('검색어가 없습니다.');
-
+    dispatch(reset());
     navigate(
       `/main/search?search_type=${localSelec1}&info_type=${localSelec2}&input_value=${localIpVal}`,
     );

diff --git a/client/src/component/ysHeader.js b/client/src/component/ysHeader.js
@@ -4,8 +4,12 @@ import { NavLink } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { useState } from 'react';
-import { useSelector } from 'react-redux';
 import UserMenu from './UserMenu';
+import styled from 'styled-components';
+
+const Li = styled.li`
+  font-size: 1.2rem;
+`;
 
 function Header() {
   // const test = useSelector((state) => state);
@@ -31,19 +35,28 @@ function Header() {
               src={logo}
               alt="logo "
               className="header-logo"
-              style={{ minWidth: '150px' }}
+              style={{ minWidth: '200px' }}
             />
           </NavLink>
         </div>
         <ul className={isOpen ? 'header-menu open' : 'header-menu'}>
-          <NavLink to="/main">
-            <li>메인페이지</li>
+          <NavLink
+            to="/main"
+            style={{ color: 'inherit', textDecoration: 'inherit' }}
+          >
+            <Li>메인페이지</Li>
           </NavLink>
-          <NavLink to="/freeboard">
-            <li>무료 정보 게시판</li>
+          <NavLink
+            to="/freeboard"
+            style={{ color: 'inherit', textDecoration: 'inherit' }}
+          >
+            <Li>무료 정보 게시판</Li>
           </NavLink>
-          <NavLink to="/paidboard">
-            <li>유료 정보 게시판</li>
+          <NavLink
+            to="/paidboard"
+            style={{ color: 'inherit', textDecoration: 'inherit' }}
+          >
+            <Li>유료 정보 게시판</Li>
           </NavLink>
         </ul>
         <ul className="header-info">

diff --git a/client/src/images/img1.jpg b/client/src/images/img1.jpg
diff --git a/client/src/images/img2.png b/client/src/images/img2.png
diff --git a/client/src/images/img3.jpg b/client/src/images/img3.jpg
diff --git a/client/src/images/searchBack.jpg b/client/src/images/searchBack.jpg