Merge pull request #23 from dbstjs95/dev

Dev

client/src/App.css

@@ -1,4 +1,4 @@
-* {
+/* * {
   box-sizing: border-box;
   word-break: keep-all;
 }
@@ -9,6 +9,7 @@ html {
 
 body {
   margin: 0;
+  height: 100%;
 }
 
 .App {
@@ -39,13 +40,4 @@ body {
 
 .App-link {
   color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+} */

client/src/App.js

@@ -1,10 +1,9 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import './App.css';
+import Outline from './pages/Outline';
 import Login from './pages/Login';
 import Tos from './pages/Tos';
 import Signup from './pages/Signup';
-import Header from './component/Header';
-import Footer from './component/Footer';
 import Home from './pages/user/Home';
 import SideBar from './component/MypageCompo/SideBar';
 import FreeWriting from './component/MypageCompo/FreeWriting';
@@ -27,9 +26,8 @@ import ContentFree from './pages/content/ContentFree';
 function App() {
   return (
     <BrowserRouter>
-      <Header />
       <Routes>
-        <Route path="/">
+        <Route path="/" element={<Outline />}>
           <Route index element={<Home />} />
           <Route path="login" element={<Login />} />
           <Route path="tos" element={<Tos />} />
@@ -63,7 +61,6 @@ function App() {
           <Route path="*" element={<NotFoundPage />} /> */}
         </Route>
       </Routes>
-      <Footer />
     </BrowserRouter>
   );
 }

client/src/component/Footer.js

@@ -1,27 +1,37 @@
 import React from 'react';
-import logo from '../images/logo.png';
-import '../css/Footer.css';
+import styled from 'styled-components';
 
-const footer = () => {
+const FooterContainer = styled.div`
+  text-align: center;
+  background: #343a40;
+  color: white;
+  align-items: center;
+  padding: 20px 30px;
+
+  > ul {
+    list-style: none;
+  }
+`;
+
+const Footer = () => {
   const thisYear = () => {
     const year = new Date().getFullYear();
     return year;
   };
 
   return (
-    <div className="footer" style={{ height: '85px' }}>
+    <FooterContainer className="footer">
       <p>
         Copyright &copy; <span>{thisYear()}</span>
       </p>
       <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> */}
+        <li>Front-End&nbsp;:&nbsp;박제곤</li>
       </ul>
-    </div>
+    </FooterContainer>
   );
 };
 
-export default footer;
+export default Footer;

client/src/component/Header.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,7 +35,7 @@ function Header() {
               src={logo}
               alt="logo "
               className="header-logo"
-              style={{ minWidth: '150px' }}
+              style={{ minWidth: '200px' }}
             />
           </NavLink>
         </div>
@@ -40,19 +44,19 @@ function Header() {
             to="/main"
             style={{ color: 'inherit', textDecoration: 'inherit' }}
           >
-            <li>메인페이지</li>
+            <Li>메인페이지</Li>
           </NavLink>
           <NavLink
             to="/freeboard"
             style={{ color: 'inherit', textDecoration: 'inherit' }}
           >
-            <li>무료 정보 게시판</li>
+            <Li>무료 정보 게시판</Li>
           </NavLink>
           <NavLink
             to="/paidboard"
             style={{ color: 'inherit', textDecoration: 'inherit' }}
           >
-            <li>유료 정보 게시판</li>
+            <Li>유료 정보 게시판</Li>
           </NavLink>
         </ul>
         <ul className="header-info">

client/src/component/MypageCompo/UserInfo.js

@@ -194,7 +194,10 @@ function UserInfo() {
   //처음 렌더링때 작동: 유저정보 불러오기
   useEffect(() => {
     axios
-      .get(`${process.env.REACT_APP_SERVER_DEV_URL}/users/${id}`, getConfig)
+      .get(
+        `${process.env.REACT_APP_SERVER_DEV_URL}/users/userinfo/${id}`,
+        getConfig,
+      )
       .then((res) => {
         const { user } = res.data;
         if (user) {

client/src/component/Search.js

@@ -28,8 +28,11 @@ export const InputContainer = styled.div`
       box-shadow: ${boxShadow};
     }
     > select {
-      font-size: 1rem;
+      font-size: 1.2rem;
+      /* padding: 7px 5px; */
       flex: 1;
+      border-radius: 5px;
+      height: 30px;
     }
     > span {
       border: 1px solid purple;
@@ -40,8 +43,10 @@ export const InputContainer = styled.div`
       justify-content: center;
       align-items: center;
       > input {
-        font-size: 1rem;
+        font-size: 1.3rem;
         flex: 1;
+        padding: 5px;
+        border: 0;
       }
       > #delete-button {
         font-size: 1.3rem;

client/src/component/UserMenu.js

@@ -94,13 +94,24 @@ function UserMenu() {
           <li className="login-btn">
             <Link
               to="/login"
-              style={{ textDecoration: 'none', color: 'black' }}
+              style={{
+                textDecoration: 'none',
+                color: 'black',
+                fontSize: '1.2rem',
+              }}
             >
               로그인
             </Link>
           </li>
           <li className="signup-btn">
-            <Link to="/tos" style={{ textDecoration: 'none', color: 'black' }}>
+            <Link
+              to="/tos"
+              style={{
+                textDecoration: 'none',
+                color: 'black',
+                fontSize: '1.2rem',
+              }}
+            >
               회원가입
             </Link>
           </li>

client/src/component/content/Setting.js

@@ -61,7 +61,6 @@ function Setting() {
           >
             삭제
           </li>
-          <li>비공개 전환</li>
         </>
       ) : (
         <li>신고하기</li>

client/src/css/Footer.css

@@ -1,10 +1,15 @@
 .footer {
-  position: fixed;
+  /* position: fixed;
+  bottom: 0; */
+  /* position: relative;
+  transform: translateY(-100%); */
+  /* position: absolute;
   bottom: 0;
+  width: 100%;
+  height: 5rem; */
   text-align: center;
   background: #343a40;
   color: white;
   align-items: center;
-  width: 100%;
   padding: 20px 30px;
-}
+}

client/src/fonts/fonts.js

@@ -0,0 +1,75 @@
+import { createGlobalStyle } from 'styled-components';
+import EliceDigitalCodingRegular from './EliceDigitalCoding_Regular.woff';
+import EliceDigitalCodingBold from './EliceDigitalCoding_Bold.woff';
+import 다이어리 from './다이어리.woff';
+import 강원도Bold from './강원도Bold.woff';
+import 강원도Light from './강원도Light.woff';
+import gang2 from './gang2.woff';
+import 순천B from './순천B.woff';
+import 순천R from './순천R.woff';
+
+export default createGlobalStyle`		     
+  @font-face {
+    font-family: 'Elice Regular';	
+    src: local('Elice Regular'),   
+    url(${EliceDigitalCodingRegular}) format('woff');
+    font-weight: 300; 
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: 'Elice Bold';	
+    src: local('Elice Bold'),   
+    url(${EliceDigitalCodingBold}) format('woff');
+    font-weight: 300; 
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: '다이어리';	
+    src: local('다이어리'),   
+    url(${다이어리}) format('woff');
+    font-weight: 300; 
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: '강원도Bold';	
+    src: local('강원도Bold'),   
+    url(${강원도Bold}) format('woff');
+    font-weight: 300; 
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: 'gang2';	
+    src: local('gang2'),   
+    url(${gang2}) format('woff');
+    font-weight: 300; 
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: '강원도Light';	
+    src: local('강원도Light'),   
+    url(${강원도Light}) format('woff');
+    font-weight: 300; 
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: '순천B';	
+    src: local('순천B'),   
+    url(${순천B}) format('woff');
+    font-weight: 300; 
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: '순천R';	
+    src: local('순천R'),   
+    url(${순천R}) format('woff');
+    font-weight: 300; 
+    font-style: normal;
+  }
+`;

client/src/pages/Login.js

@@ -88,7 +88,7 @@ function Login() {
   };
 
   return (
-    <div className="login-container">
+    <div style={{ height: '60vh' }} className="login-container">
       <div className="login-input">
         <div className="radio-btn">
           <input

client/src/pages/Outline.js

@@ -0,0 +1,40 @@
+import { Outlet } from 'react-router-dom';
+import Header from '../component/Header';
+import Footer from '../component/Footer';
+import styled from 'styled-components';
+import GlobalFonts from '../fonts/fonts';
+
+const EntireContainer = styled.div`
+  * {
+    box-sizing: border-box;
+    word-break: keep-all;
+    font-family: 'Elice Bold';
+    font-family: '순천B';
+  }
+`;
+
+const BodyContainer = styled.div`
+  * {
+    margin: 0;
+    font-family: 'Elice Regular';
+    font-family: '다이어리';
+    font-family: '순천R';
+  }
+`;
+
+function Outline() {
+  return (
+    <>
+      <GlobalFonts />
+      <EntireContainer>
+        <Header />
+        <BodyContainer id="content-wrap">
+          <Outlet />
+        </BodyContainer>
+        <Footer />
+      </EntireContainer>
+    </>
+  );
+}
+
+export default Outline;

client/src/pages/user/Home.js

@@ -57,13 +57,20 @@ function Home() {
         </div>
       </div>
       <div className="btn-wrap">
-        <button className="nonmember-btn" onClick={handleNonMember}>
+        <button
+          className="nonmember-btn"
+          onClick={handleNonMember}
+          style={{ fontFamily: 'Elice Bold' }}
+        >
           비회원으로 계속하기
         </button>
         <button className="nonmember-btn" onClick={handleLogin}>
           로그인하기
         </button>
       </div>
+      <div style={{ height: '500px' }}>aaaaaaaaaaaaa</div>
+      <div style={{ height: '500px' }}>bbbbbbbbbbbb</div>
+      <div style={{ height: '300px' }}>cccccccccccccc</div>
     </div>
   );
 }