Merge pull request #25 from dbstjs95/dev

css 수정

client/src/App.js

@@ -20,8 +20,6 @@ import FreeBoard from './pages/content/contentBoard/FreeBoard';
 import PaidBoard from './pages/content/contentBoard/PaidBoard';
 import PostList from './pages/user/PostList';
 import Post from './pages/user/Post';
-import ContentPaid from './pages/content/ContentPaid';
-import ContentFree from './pages/content/ContentFree';
 
 function App() {
   return (
@@ -39,9 +37,6 @@ function App() {
               <Route path=":postId" element={<Post />} />
             </Route>
           </Route>
-          {/* 아래 두개는 나중에 삭제, UI 확인용 */}
-          <Route path="contentfree" element={<ContentFree />} />
-          <Route path="contentpaid" element={<ContentPaid />} />
           {/* 유료게시글, 무료게시글 */}
           <Route path="freeboard" element={<FreeBoard />} />
           <Route path="paidboard" element={<PaidBoard />} />

client/src/component/ChargeBox.js

@@ -41,6 +41,7 @@ const ChargeBoxContainer = styled.div`
 `;
 
 const PayBox = styled.div`
+  height: 150px;
   border: 3px solid black;
   display: flex;
   flex-direction: column;
@@ -51,6 +52,11 @@ const PayBox = styled.div`
   > p {
     margin: 0;
   }
+  > div.btns button {
+    &:nth-child(1) {
+      margin-right: 10px;
+    }
+  }
 `;
 
 export function PayWithPoints({ handleClick }) {
@@ -79,8 +85,8 @@ export function PayWithPoints({ handleClick }) {
           postConfig,
         )
         .then((res) => {
-          const { info } = res.data;
-          if (info) {
+          const { message } = res.data;
+          if (message) {
             dispatch(updateState({ point: restPoint }));
             dispatch(updatePostState({ isPurchased: true }));
             alert('결제 성공');
@@ -110,8 +116,10 @@ export function PayWithPoints({ handleClick }) {
     <PayBox>
       <p>{targetPoint} P가 차감됩니다.</p>
       <p>결제하시겠습니까?</p>
-      <button onClick={yes}>확인</button>
-      <button onClick={handleClick}>취소</button>
+      <div className="btns">
+        <button onClick={yes}>확인</button>
+        <button onClick={handleClick}>취소</button>
+      </div>
     </PayBox>
   );
 }

client/src/component/MypageCompo/PaidPosts.js

@@ -10,17 +10,31 @@ const EntireContainer = styled.div`
   border-left: 5px solid orange;
   border-right: 5px solid orange;
   background-color: white;
-  height: 60%;
+  height: 70%;
+  > div.btns {
+    text-align: center;
+    padding-top: 15px;
+    margin-bottom: 10px;
+    > button {
+      &:nth-child(1) {
+        margin-right: 15px;
+      }
+      &:nth-child(2) {
+        margin-left: 15px;
+      }
+    }
+  }
   > ul.posts {
-    border: 3px solid pink;
+    background-color: white;
+    /* border: 3px solid pink; */
     margin: 0;
     list-style: none;
     padding-left: 0;
     height: 100%;
     overflow: auto;
     padding: 1%;
     > li.post {
-      border: 3px solid greenyellow;
+      border: 2px solid gray;
       padding: 1%;
       margin-bottom: 4%;
       display: flex;
@@ -31,7 +45,9 @@ const EntireContainer = styled.div`
         margin-bottom: 1%;
       }
       > p {
-        border: 1px solid red;
+        border-top: 1px solid lightgray;
+        border-bottom: 1px solid lightgray;
+        box-shadow: 1px 1px 1px gray;
         margin: 0;
         width: 100%;
         padding: 1%;
@@ -73,8 +89,9 @@ const EntireContainer = styled.div`
 
 //타이틀 버튼 틀릭하면 해당 포스트로 이동
 function Post({ post }) {
-  const { id, title, content, fileURL, point, like, writer, createdAt } = post;
-  const day = createdAt.split(' ')[0];
+  //여기서 createdAt은 구매한 날짜임.
+  const { id, title, content, targetPoint, nickname: writer, createdAt } = post;
+  const day = (createdAt && createdAt.split(' ')[0]) || '2022-05-16 05:26:45';
 
   const handleClick = (e) => {
     e.preventDefault();
@@ -88,10 +105,9 @@ function Post({ post }) {
       <p className="title" onClick={handleClick}>
         {title}
       </p>
-      <p className="content">{content}</p>
       <div className="btn-price">
         <span className="writer">{writer}</span>
-        <span className="price">{point} P</span>
+        <span className="price">{targetPoint} P</span>
       </div>
     </li>
   );
@@ -114,8 +130,7 @@ function PaidPosts() {
   };
 
   useEffect(() => {
-    //사실 이런 방식은 새로운 정보가 들어오면 같은 데이터가 list에 추가되는 걸 방지못함.. 예를 들어 5번 데이터가 2page에도 있고, 3page에도 있을 수 있음.
-    //이걸 프론트단에서 방지하려면 그때 그때 받아온 정보만을 렌더링하면 됨.
+    console.log(paidPostList);
     if (paidPostList.length > offset) return;
 
     axios
@@ -124,9 +139,11 @@ function PaidPosts() {
         getConfig,
       )
       .then((res) => {
-        const { count, row } = res.data.info;
+        const { count, rows } = res.data.info;
+        console.log(rows);
         if (page === 1 && count) setTotalCnt(Number(count));
-        if (row && row.length > 0) setPaidPostList([...paidPostList, ...row]);
+        if (rows && rows.length > 0)
+          setPaidPostList([...paidPostList, ...rows]);
       })
       .catch((err) => err.response?.message && alert(err.response.message));
   }, [page]);

client/src/component/Pagination.js

@@ -14,17 +14,23 @@ const PageContainer = styled.ul`
   list-style: none;
   padding: 0;
   display: flex;
+  justify-content: center;
+  align-items: center;
   > li:not(:last-child) {
     /* margin-right: 10px; */
   }
   > li {
     cursor: pointer;
+    /* border: 2px solid white; */
+    border-radius: 3px;
+    font-size: 1.3rem;
     &.page {
       padding: 2px 5px;
       &:hover,
       &.selected {
-        color: #4bab13;
-        border: 2px solid #4bab13;
+        color: white;
+        /* border: 2px solid #4bab13; */
+        background-color: #4bab13;
         border-radius: 3px;
       }
     }
@@ -52,7 +58,7 @@ function Pagination() {
   }, [page]);
 
   return (
-    <PageContainer>
+    <PageContainer className="paging">
       {page > 1 && (
         <li className="prev" onClick={() => dispatch(prev())}>
           {'<<'}

client/src/pages/content/ContentPaid.js

@@ -22,7 +22,7 @@ import styled from 'styled-components';
 import '../../css/Content.css';
 
 const EntireContainer = styled.div`
-  > div.modal div.content {
+  > div.content-container div.modal div.content {
     &.payment {
       /* 모달창 배경색 */
       background-color: #f3f702;
@@ -66,8 +66,9 @@ function ContentPaid() {
 
   const handleConfirm = (e) => {
     e.preventDefault();
-    if (!isLogin) return alert('자신의 게시물은 구매할 수 없습니다.');
-    if (userInfoId === writer) return alert('');
+    if (!isLogin) return alert('로그인 해주세요');
+    if (userInfoId === writer)
+      return alert('자신의 게시물은 구매할 수 없습니다.');
     //포인트 부족 --> 충전)
     if (Number(targetPoint) > Number(point)) {
       dispatch(

client/src/pages/content/contentBoard/FreeBoard.js

@@ -10,14 +10,14 @@ import { selectUserInfo } from '../../../store/slices/userInfo';
 import { useNavigate } from 'react-router-dom';
 
 const OrderContainer = styled.div`
-  background-color: #e68feb;
+  background-color: #ccc7a9;
+  opacity: 0.9;
   width: 100%;
   padding: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
-  /* border-radius: 8px; */
-  box-shadow: 3px 3px 3px #e3e6e4;
+  /* box-shadow: 3px 5px 4px #75746d; */
   > div {
     /* border: 3px solid red; */
     width: 50%;
@@ -31,9 +31,9 @@ const OrderContainer = styled.div`
         /* width: 250px; */
         /* padding: 3% 2%; */
         /* margin-left: -5px; */
-        width: 30%;
+        width: 20%;
         display: flex;
-        justify-content: center;
+        justify-content: space-between;
         align-items: center;
         > input {
           display: none;
@@ -50,22 +50,26 @@ const OrderContainer = styled.div`
         font-size: 1rem;
         /* border: 1px solid red; */
         height: 100%;
-        padding: 0 3%;
+        /* padding: 0 3%; */
         display: flex;
+        width: 50%;
         align-items: center;
+        justify-content: center;
         border-radius: 5px;
       }
       > label.clicked {
-        background-color: purple;
+        background-color: #69675c;
+        box-shadow: 3px 5px 4px #3b3a37;
         color: white;
         font-size: 1rem;
       }
     }
   }
 `;
+
 const EntireContainer = styled.div`
   display: flex;
-  background-color: #faf9f5;
+  /* background-color: #faf9f5; */
   flex-direction: column;
   align-items: center;
   height: 800px;
@@ -75,7 +79,7 @@ const EntireContainer = styled.div`
     margin: 0;
     list-style: none;
     padding: 0;
-    width: 55%;
+    width: 50%;
     height: 1200px;
     padding: 1%;
     > li.post {
@@ -217,7 +221,6 @@ function FreeBoard() {
       })
       .then((res) => {
         const { rows, count } = res.data.info;
-        console.log('@@@', rows);
         if (rows) setList([...list, ...rows]);
         if (count && page === 1) {
           setTotalCnt(count);
@@ -251,7 +254,6 @@ function FreeBoard() {
               name="info_order"
               value="최신순"
               checked={order === '최신순'}
-              style={{ marginLeft: '0', opacity: '0' }}
               onChange={handleChange}
             />
             <label for="latest" className={order === '최신순' && 'clicked'}>
@@ -264,7 +266,6 @@ function FreeBoard() {
               name="info_order"
               value="인기순"
               checked={order === '인기순'}
-              style={{ marginLeft: '0', opacity: '0' }}
               onChange={handleChange}
             />
             <label for="best" className={order === '인기순' && 'clicked'}>