css 수정

codestates · May 15, 2022 · a476022 · a476022
1 parent 75a5a21
commit a476022
Show file tree

Hide file tree

Showing 16 changed files with 494 additions and 195 deletions.
diff --git a/client/src/component/ChargeBox.js b/client/src/component/ChargeBox.js
@@ -11,11 +11,11 @@ import Payment from './Payment';
 import axios from 'axios';
 
 const ChargeBoxContainer = styled.div`
-  /* border: 3px solid black; */
+  height: 250px;
   background-color: #f3f702;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-around;
   align-items: center;
   padding: 10px;
   border-radius: 10px;
@@ -36,6 +36,8 @@ const ChargeBoxContainer = styled.div`
     color: white;
     border-radius: 5px;
   }
+  > p.standard {
+  }
 `;
 
 const PayBox = styled.div`
@@ -136,7 +138,9 @@ export default function ChargeBox() {
           )
         }
       />
-      <p style={{ color: 'red' }}>3000원 이상부터 가능합니다.</p>
+      <p className="standard" style={{ color: 'red' }}>
+        3000원 이상부터 가능합니다.
+      </p>
       <Payment />
     </ChargeBoxContainer>
   );

diff --git a/client/src/component/MypageCompo/ChargedPointList.js b/client/src/component/MypageCompo/ChargedPointList.js
@@ -8,14 +8,16 @@ import { selectUserInfo } from '../../store/slices/userInfo';
 import axios from 'axios';
 
 const EntireContainer = styled.div`
-  border: 3px solid green;
+  border-left: 5px solid orange;
+  border-right: 5px solid orange;
+  background-color: white;
   height: 58%;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   > div#paging {
     text-align: center;
-    border: 1px dotted gray;
+    /* border: 1px dotted gray; */
     font-size: 1rem;
     > button {
       cursor: pointer;
@@ -30,14 +32,13 @@ const EntireContainer = styled.div`
 const UlContainer = styled.ul`
   margin: 0;
   /* margin-top: 2%; */
-  border: 3px solid skyblue;
+  /* border: 3px solid skyblue; */
   height: 90%;
   min-width: 85%;
   list-style: none;
   padding: 2%;
   overflow: auto;
   > li.item {
-    border: 1px solid red;
     margin-bottom: 3%;
     > p {
       border: 1px solid black;
@@ -127,7 +128,7 @@ function ChargedPointList() {
       </UlContainer>
       <div id="paging">
         <button id="prev" onClick={prevBtnClick} disabled={current === 1}>
-          이전
+          {'<<'}
         </button>
         <span>
           {current} / {totalPage}
@@ -137,7 +138,7 @@ function ChargedPointList() {
           onClick={nextBtnClick}
           disabled={current === totalPage}
         >
-          다음
+          {'>>'}
         </button>
       </div>
     </EntireContainer>

diff --git a/client/src/component/MypageCompo/FreeWriting.js b/client/src/component/MypageCompo/FreeWriting.js
@@ -3,10 +3,9 @@ import React, { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { useSelector } from 'react-redux';
 import { selectUserInfo } from '../../store/slices/userInfo';
+import { useNavigate } from 'react-router-dom';
 import AWS from 'aws-sdk';
 import { v1, v3, v4, v5 } from 'uuid';
-// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-// import { faCoins } from '@fortawesome/free-solid-svg-icons';
 
 const ACCESS_KEY = process.env.REACT_APP_AWS_ACCESS_KEY_ID;
 const SECRET_ACCESS_KEY = process.env.REACT_APP_AWS_SECRET_ACCESS_KEY;
@@ -24,11 +23,13 @@ const myBucket = new AWS.S3({
 });
 
 const WritingContainer = styled.div`
-  border: 3px solid skyblue;
+  border: 3px solid orange;
+  background-color: white;
   height: 80%;
   width: 100%;
+  border-radius: 10px;
   > form {
-    border: 3px solid yellow;
+    /* border: 3px solid yellow; */
     height: 100%;
     width: 99%;
     display: flex;
@@ -38,22 +39,25 @@ const WritingContainer = styled.div`
     > textarea {
       font-size: 1rem;
       width: 95%;
+      padding: 1%;
       &#title {
         margin-top: 2%;
         margin-bottom: 2%;
         height: 2rem;
+        resize: none;
+        overflow: hidden;
       }
       &#content {
         flex-grow: 1;
       }
     }
     > div.submit {
-      /* margin: 2% 2% 1% auto; */
+      margin-bottom: 10px;
       display: flex;
       width: 95%;
       justify-content: flex-end;
       align-items: center;
-      border: 1px solid green;
+      /* border: 1px solid green; */
       > span.msg {
         display: none;
         &.alert {
@@ -87,6 +91,12 @@ const Btn = styled.button`
   }
 `;
 
+const FileBox = styled.div`
+  /* border: 2px solid red; */
+  width: 95%;
+  margin: 10px 0;
+`;
+
 function Writing() {
   const { id, accToken } = useSelector(selectUserInfo);
   const config = {
@@ -109,11 +119,6 @@ function Writing() {
   //업로드할 파일 입력값
   const [selectedFile, setSelectedFile] = useState(null);
 
-  //확인용... 나중에 삭제하기
-  useEffect(() => {
-    console.log(textValues, selectedFile);
-  }, [textValues, selectedFile]);
-
   //업로드 버튼 클릭(파일 없이)
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -236,7 +241,7 @@ function Writing() {
           setTextValues({ ...textValues, content: e.target.value })
         }
       ></textarea>
-      <div className="file-upload">
+      <FileBox className="file-upload">
         <input
           type="file"
           // accept="image/*, .pdf, .hwp, application/vnd.ms-excel, text/plain, text/html"
@@ -246,7 +251,7 @@ function Writing() {
         <Btn className={!selectedFile && 'need'} onClick={handleCancel}>
           파일 취소
         </Btn>
-      </div>
+      </FileBox>
       <div className="submit">
         <span
           className={
@@ -268,6 +273,13 @@ function Writing() {
 }
 
 function FreeWriting() {
+  const { isLogin } = useSelector(selectUserInfo);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!isLogin) return navigate('/main');
+  }, []);
+
   return (
     <WritingContainer>
       <Writing />

diff --git a/client/src/component/MypageCompo/MyPosts.js b/client/src/component/MypageCompo/MyPosts.js
@@ -5,35 +5,23 @@ import { selectUserInfo } from '../../store/slices/userInfo';
 import axios from 'axios';
 
 const EntireContainer = styled.div`
-  border: 3px solid green;
+  border-left: 5px solid orange;
+  border-right: 3px solid orange;
+  background-color: white;
   width: 100%;
   height: 70%;
-  > table {
-    border: 3px solid red;
-    width: 100%;
-    height: 70%;
-    border-collapse: collapse;
-    border-spacing: 0;
-    table-layout: fixed;
-    text-align: center;
-  }
-  > div#paging {
-    border: 1px dotted red;
-    display: flex;
-    justify-content: space-between;
-    margin: 8px 5px 5px 0;
-    > button {
-      cursor: pointer;
-    }
-  }
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 `;
 
 const PostContainer = styled.tr`
-  border: 3px solid blue;
+  border: 3px solid lightgray;
   > td {
     vertical-align: middle;
     padding: 5px;
-    border: 1px solid #000;
+    border: 3px solid lightgray;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -51,6 +39,41 @@ const PostContainer = styled.tr`
   }
 `;
 
+const NoFound = styled.div`
+  font-family: '순천B';
+  font-size: 30px;
+  color: gray;
+`;
+
+const Wrapper = styled.div`
+  /* border: 3px solid red; */
+  height: 100%;
+  > table {
+    width: 100%;
+    height: 70%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    table-layout: fixed;
+    text-align: center;
+    > thead {
+      background-color: lightgray;
+      margin-bottom: 10px;
+      font-size: 1rem;
+      padding: 10px;
+    }
+  }
+  > div#paging {
+    /* border: 1px dotted red; */
+    padding: 2%;
+    display: flex;
+    justify-content: space-between;
+    margin: 8px 5px 5px 0;
+    > button {
+      cursor: pointer;
+    }
+  }
+`;
+
 function Post({ post }) {
   const {
     id,
@@ -67,7 +90,7 @@ function Post({ post }) {
   const handleClick = (e) => {
     e.preventDefault();
     //게시글 이동 창.
-    window.open(`/main/postList/${id}`, '_blank');
+    window.open(`/main/search/${id}`, '_blank');
   };
 
   return (
@@ -132,6 +155,7 @@ function MyPosts() {
       )
       .then((res) => {
         const { rows, count } = res.data.info;
+        console.log(rows);
         if (rows && rows.length > 0) setPostList([...postList, ...rows]);
         if (count && page === 1) setTotalCnt(Number(count));
       })
@@ -141,9 +165,23 @@ function MyPosts() {
   return (
     <EntireContainer>
       {postList.length === 0 ? (
-        <p style={{ textAlign: 'center' }}>작성한 게시물이 없습니다.</p>
+        <NoFound>작성한 게시물이 없습니다!</NoFound>
       ) : (
-        <>
+        <Wrapper>
+          <div id="paging">
+            <button disabled={Number(page) === 1} onClick={prevBtnClick}>
+              이전
+            </button>
+            <span>
+              {page} / {totalPage}
+            </span>
+            <button
+              onClick={nextBtnClick}
+              disabled={Number(page) === Number(totalPage)}
+            >
+              다음
+            </button>
+          </div>
           <table>
             <colgroup>
               <col id="id" width="5%" />
@@ -156,8 +194,8 @@ function MyPosts() {
               <col id="updatedAt" width="13%" />
             </colgroup>
             <thead>
-              <tr key="">
-                <th>번호</th>
+              <tr>
+                <th style={{ padding: '8px' }}>번호</th>
                 <th>종류</th>
                 <th>상태</th>
                 <th>제목</th>
@@ -173,21 +211,7 @@ function MyPosts() {
               ))}
             </tbody>
           </table>
-          <div id="paging">
-            <button disabled={Number(page) === 1} onClick={prevBtnClick}>
-              이전
-            </button>
-            <span>
-              {page} / {totalPage}
-            </span>
-            <button
-              onClick={nextBtnClick}
-              disabled={Number(page) === Number(totalPage)}
-            >
-              다음
-            </button>
-          </div>
-        </>
+        </Wrapper>
       )}
     </EntireContainer>
   );