메인페이지 css

client/src/component/Header.js

@@ -7,6 +7,10 @@ import { useState } from 'react';
 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/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/fonts/fonts.js

@@ -1,6 +1,12 @@
 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 {
@@ -19,5 +25,51 @@ export default createGlobalStyle`
     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/Outline.js

@@ -8,15 +8,17 @@ const EntireContainer = styled.div`
   * {
     box-sizing: border-box;
     word-break: keep-all;
-    /* font-family: 'Helvetica', 'Arial', sans-serif; */
     font-family: 'Elice Bold';
+    font-family: '순천B';
   }
 `;
 
 const BodyContainer = styled.div`
   * {
     margin: 0;
     font-family: 'Elice Regular';
+    font-family: '다이어리';
+    font-family: '순천R';
   }
 `;
 

client/src/pages/user/Home.js

@@ -57,7 +57,11 @@ 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}>

client/src/pages/user/Mainpage.js

@@ -5,54 +5,65 @@ import { useDispatch, useSelector } from 'react-redux';
 import { updateState, selectUserInfo } from '../../store/slices/userInfo';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
+import searchBack from '../../images/searchBack.jpg';
 
 const EntireContainer = styled.div`
-  margin: auto auto;
-  width: 120vh;
-  height: 80vh;
-  border: 5px solid red;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
+  border: 0;
+  height: 100vh;
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-template-rows: repeat(8, minmax(100px, auto));
+
   > div.top {
-    width: 100%;
-    border: 2px solid orange;
-    height: 20%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    /* background-color: palegreen; */
+    border: 0;
+    grid-column: 1 / 9;
+    grid-row: 1 / 9;
+    background-image: url(${searchBack});
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+    display: grid;
+    grid-template-columns: repeat(10, 1fr);
+    grid-template-rows: repeat(10, minmax(100px, auto));
+
     > div.bar {
-      width: 80%;
+      grid-column: 6 / 10;
+      grid-row: 2;
+      align-items: end;
+      border: 0;
+      > form {
+        border: 0;
+        background-color: white;
+        opacity: 0.8;
+        padding: 10px 20px;
+      }
     }
   }
 `;
 
 const UlContainer = styled.ul`
   list-style: none;
-  padding: 0;
-  border: 2px solid blue;
   margin: 0;
-  width: 45%;
-  margin-top: -30px;
+  padding: 0;
+  border: 15px solid white;
+  border-radius: 10px;
+  grid-column: 6 / 10;
+  grid-row: 2 / 10;
+  opacity: 0.9;
+  border-top: 0;
   &.first {
-    margin-right: 5%;
-    border: 3px solid yellow;
   }
   > li {
-    border: 1px solid black;
-    display: flex;
     > p {
       &.title {
-        width: 90%;
+        /* width: 90%; */
         overflow: hidden;
       }
       &.writer {
-        text-align: center;
+        /* text-align: center;
         width: 10%;
         border-left: 2px solid gray;
-        margin-left: 10px;
+        margin-left: 10px; */
       }
     }
   }
@@ -117,8 +128,8 @@ function Mainpage() {
       <EntireContainer>
         <div className="top">
           <Search />
+          <List posts={list} />
         </div>
-        <List posts={list} />
       </EntireContainer>
     </>
   );