diff --git a/client/src/component/ChargeBox.js b/client/src/component/ChargeBox.js index 8d4450ba3..f0a920050 100644 --- 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() { ) } /> -

3000원 이상부터 가능합니다.

+

+ 3000원 이상부터 가능합니다. +

); diff --git a/client/src/component/MypageCompo/ChargedPointList.js b/client/src/component/MypageCompo/ChargedPointList.js index d77f08efd..c4fbe93c5 100644 --- 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() {
{current} / {totalPage} @@ -137,7 +138,7 @@ function ChargedPointList() { onClick={nextBtnClick} disabled={current === totalPage} > - 다음 + {'>>'}
diff --git a/client/src/component/MypageCompo/FreeWriting.js b/client/src/component/MypageCompo/FreeWriting.js index 723631928..5a9bfa6c8 100644 --- 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 }) } > -
+ 파일 취소 -
+
{ + if (!isLogin) return navigate('/main'); + }, []); + return ( diff --git a/client/src/component/MypageCompo/MyPosts.js b/client/src/component/MypageCompo/MyPosts.js index bbcca3eef..a5f26f63c 100644 --- 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 ( {postList.length === 0 ? ( -

작성한 게시물이 없습니다.

+ 작성한 게시물이 없습니다! ) : ( - <> + +
+ + + {page} / {totalPage} + + +
@@ -156,8 +194,8 @@ function MyPosts() { - - + + @@ -173,21 +211,7 @@ function MyPosts() { ))}
번호
번호 종류 상태 제목
-
- - - {page} / {totalPage} - - -
- + )} ); diff --git a/client/src/component/MypageCompo/PaidPosts.js b/client/src/component/MypageCompo/PaidPosts.js index 499758871..6fcd486e4 100644 --- a/client/src/component/MypageCompo/PaidPosts.js +++ b/client/src/component/MypageCompo/PaidPosts.js @@ -7,7 +7,9 @@ import { selectUserInfo } from '../../store/slices/userInfo'; import axios from 'axios'; const EntireContainer = styled.div` - border: 3px solid black; + border-left: 5px solid orange; + border-right: 5px solid orange; + background-color: white; height: 60%; > ul.posts { border: 3px solid pink; @@ -69,23 +71,6 @@ const EntireContainer = styled.div` } `; -// function ValidBtn() { -// return ( -// -// -// -// -// ); -// } - -// function InValidBtn() { -// return ( -// -// -// -// ); -// } - //타이틀 버튼 틀릭하면 해당 포스트로 이동 function Post({ post }) { const { id, title, content, fileURL, point, like, writer, createdAt } = post; @@ -94,7 +79,7 @@ function Post({ post }) { const handleClick = (e) => { e.preventDefault(); //게시글 이동 창. - window.open(`/main/postList/${id}`, '_blank'); + window.open(`/main/search/${id}`, '_blank'); }; return ( diff --git a/client/src/component/MypageCompo/RefundList.js b/client/src/component/MypageCompo/RefundList.js index 4ab08b50d..b3203cfbe 100644 --- a/client/src/component/MypageCompo/RefundList.js +++ b/client/src/component/MypageCompo/RefundList.js @@ -1,8 +1,21 @@ -import React, { useState, useEffect } from 'react'; -import UserInfo from './UserInfo'; +import React from 'react'; +import styled from 'styled-components'; + +const EntireContainer = styled.div` + border-left: 5px solid orange; + border-right: 5px solid orange; + background-color: white; + height: 500px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: gray; + font-size: 20px; +`; function RefundList() { - return
비활성 페이지입니다.
; + return 비활성 페이지입니다.; } export default RefundList; diff --git a/client/src/component/MypageCompo/SalesWriting.js b/client/src/component/MypageCompo/SalesWriting.js index d6752dc7b..315bf3fbe 100644 --- a/client/src/component/MypageCompo/SalesWriting.js +++ b/client/src/component/MypageCompo/SalesWriting.js @@ -1,18 +1,35 @@ -import React, { useState, useEffect } from 'react'; +import axios from 'axios'; +import React, { useState, useEffect, useRef } from 'react'; import styled from 'styled-components'; -import UploadFiles from './UploadFiles'; import { useSelector } from 'react-redux'; import { selectUserInfo } from '../../store/slices/userInfo'; import { useNavigate } from 'react-router-dom'; -// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -// import { faCoins } from '@fortawesome/free-solid-svg-icons'; +import AWS from 'aws-sdk'; +import { v1, v3, v4, v5 } from 'uuid'; + +const ACCESS_KEY = process.env.REACT_APP_AWS_ACCESS_KEY_ID; +const SECRET_ACCESS_KEY = process.env.REACT_APP_AWS_SECRET_ACCESS_KEY; +const REGION = process.env.REACT_APP_AWS_DEFAULT_REGION; +const S3_BUCKET = process.env.REACT_APP_AWS_BUCKET; + +AWS.config.update({ + accessKeyId: ACCESS_KEY, + secretAccessKey: SECRET_ACCESS_KEY, +}); + +const myBucket = new AWS.S3({ + params: { Bucket: S3_BUCKET }, + region: REGION, +}); 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; @@ -22,52 +39,40 @@ 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.form-group { - border: 3px dotted blue; - display: flex; - min-width: 95%; - align-items: center; - justify-content: space-between; - padding: 1%; - > label input { - border: 1px dotted red; - } - > div.alert { - } - } > div.submit { - border: 1px dotted red; - width: 95%; - height: 5%; + margin-bottom: 10px; display: flex; + width: 95%; justify-content: space-between; align-items: center; - margin-bottom: 1%; - > input#price { - font-size: 1rem; - max-width: 120px; - @media screen and (max-width: 1024px) { - font-size: 0.9rem; - } - @media screen and (max-width: 600px) { + /* border: 1px solid green; */ + /* > span.msg { + display: none; + &.alert { + display: inline-block; + color: red; font-size: 0.8rem; } - } - > button#save { + } */ + > button#submit { + margin-left: 2%; font-size: 1rem; - padding: 0.3em; - appearance: none; + padding: 0.5em; background-color: #f5f5f5; border: 1px solid gray; + cursor: pointer; @media screen and (max-width: 1024px) { font-size: 0.9rem; } @@ -79,33 +84,145 @@ const WritingContainer = styled.div` } `; +const Btn = styled.button` + &.need { + display: none; + color: red; + } +`; + +const FileBox = styled.div` + /* border: 2px solid red; */ + width: 95%; + margin: 10px 0; +`; + function Writing() { - const uploadReferenece = React.createRef(); + const { id, accToken } = useSelector(selectUserInfo); + const config = { + headers: { + 'content-type': 'application/json', + Authorization: `Bearer ${accToken}`, + }, + withCredentials: true, + }; + + //파일 업로드 input + const fileInput = useRef(null); + + //게시글 제목, 내용 입력값 const [textValues, setTextValues] = useState({ title: null, content: null, targetPoint: null, }); - const handleTextChange = (e) => { - setTextValues({ - ...textValues, - [e.target.name]: e.target.value, - }); - }; + //업로드할 파일 입력값 + const [selectedFile, setSelectedFile] = useState(null); + + //확인용... 나중에 삭제하기 + useEffect(() => { + console.log(textValues, selectedFile); + }, [textValues, selectedFile]); - async function onClickSearch(e) { + //업로드 버튼 클릭(파일 없이) + const handleSubmit = (e) => { e.preventDefault(); - await uploadReferenece.current - .upload(textValues) - .then((result) => { - // const fileURL = result; - if (result) alert('저장 완료'); + const { title, content } = textValues; + axios + .post( + `${process.env.REACT_APP_SERVER_DEV_URL}/info`, + { + type: 'Free', + targetPoint: 0, + title, + content, + file: '', + }, + config, + ) + .then((res) => { + if (res.data.infoId) alert('글이 등록되었습니다.'); + setTextValues({ + title: '', + content: '', + }); }) .catch((err) => { alert('서버 에러 발생! 다시 시도해주세요.'); }); - } + }; + + //업로드 버튼 클릭(파일 업로드) + const handleSubmitWithFile = (e) => { + e.preventDefault(); + //loading indicator 사용하기 + const fileName = `file/${v4().toString().replaceAll('-', '')}.${ + selectedFile.type.split('/')[1] + }`; + + const params = { + ACL: 'public-read-write', + Body: selectedFile, + Bucket: S3_BUCKET, + Key: fileName, + }; + + myBucket.putObject(params, (err, data) => { + //서버로 파일 경로 보내주기.(일단 임시로 작성) + axios + .post( + `${process.env.REACT_APP_SERVER_DEV_URL}/info`, + { + type: 'Paid', + ...textValues, + file: fileName, + }, + config, + ) + .then((res) => { + setTextValues({ + title: '', + content: '', + targetPoint: '', + }); + setSelectedFile(''); + fileInput.current.value = ''; + if (res.data.infoId) alert('글이 등록되었습니다.(대기중)'); + }) + .catch((err) => { + deleteFile(fileName); + alert('파일업로드 주소가 서버에 반영 안 됨.'); + }); + }); + }; + + //파일 삭제 + const deleteFile = (fileName) => { + const params = { + Bucket: S3_BUCKET, + Key: fileName, + }; + + myBucket.deleteObject(params, (err, data) => { + if (data) console.log('s3파일 삭제'); + if (err) console.log('s3파일 삭제 실패'); + }); + }; + + //파일 선택 + const handleInputChange = (e) => { + // const fileObj = e.target.files[0]; + // const ext = fileObj.name.split('.').pop(); + setSelectedFile(e.target.files[0]); + }; + + //파일 선택 취소 + const handleCancel = (e) => { + e.preventDefault(); + fileInput.current.value = null; + setSelectedFile(null); + }; return (
@@ -115,20 +232,32 @@ function Writing() { rows="1" cols="55" placeholder="제목" - maxlength="100" + maxlength="100" //삭제? value={textValues.title} - onChange={handleTextChange} + onChange={(e) => + setTextValues({ ...textValues, title: e.target.value }) + } > - + + + + 파일 취소 + +
+ setTextValues({ ...textValues, targetPoint: e.target.value }) + } /> + {/* + 제목과 내용 모두 작성해주세요. + */} @@ -155,6 +293,7 @@ function Writing() { function SalesWriting() { const { isLogin, grade } = useSelector(selectUserInfo); const navigate = useNavigate(); + useEffect(() => { if (!isLogin) return navigate('/main'); if (grade === 'Bronze') { diff --git a/client/src/component/MypageCompo/SideBar.js b/client/src/component/MypageCompo/SideBar.js index e5bebc9df..f59baeabd 100644 --- a/client/src/component/MypageCompo/SideBar.js +++ b/client/src/component/MypageCompo/SideBar.js @@ -8,7 +8,6 @@ import { useSelector } from 'react-redux'; import { selectUserInfo } from '../../store/slices/userInfo'; const EntireContainer = styled.div` - border: 5px solid red; height: 100vh; display: flex; justify-content: center; @@ -23,23 +22,24 @@ const EntireContainer = styled.div` min-width: 100%; } height: 100%; - border: 3px solid black; + /* border: 3px solid black; */ > section { - border: 4px solid green; - border-radius: 0 7px 7px 0; + /* border: 4px solid green; */ + /* border-radius: 0 7px 7px 0; */ flex: 1 0 20%; display: flex; flex-direction: column; /* min-width: 20%; */ padding: 1%; - background-color: #fba103; + background-color: orange; > .nav-link { + font-weight: bold; text-align: center; - padding: 1%; + padding: 3% 1%; border-radius: 5px; color: white; text-decoration: none; - margin-bottom: 5%; + margin-bottom: 10%; &:hover { background-color: white; color: #ff5733; @@ -52,7 +52,8 @@ const EntireContainer = styled.div` } > div.userInfo { - border: 4px solid pink; + background-color: orange; + border-top-right-radius: 5px; min-width: 80%; /* padding: 2%; */ flex: 1 1 80%; diff --git a/client/src/component/MypageCompo/UserInfo.js b/client/src/component/MypageCompo/UserInfo.js index fff8de2cc..2b57b999a 100644 --- a/client/src/component/MypageCompo/UserInfo.js +++ b/client/src/component/MypageCompo/UserInfo.js @@ -27,7 +27,7 @@ const myBucket = new AWS.S3({ }); const EntireContainer = styled.div` - border: 5px solid blue; + /* border: 5px solid blue; */ height: 100%; @media screen and (max-width: 800px) { font-size: 0.9rem; @@ -55,15 +55,22 @@ const EntireContainer = styled.div` > ul#user-Info-container { margin-top: 0; border: 5px solid orange; + border-radius: 5px; + font-weight: bold; min-height: 25%; + background-color: white; display: flex; list-style: none; padding-left: 0; align-items: center; justify-content: space-around; > li { - border: 1px dotted black; + /* border: 1px dotted black; */ height: 200px; + &:nth-child(2) { + border-left: 1px solid lightgray; + border-right: 1px solid lightgray; + } &.profile { /* flex: 3; */ min-width: 35%; @@ -74,16 +81,23 @@ const EntireContainer = styled.div` flex-direction: column; } > div { - border: 3px solid purple; + /* border: 3px solid purple; */ margin: 0 5px 0 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; + &#grade { + /* border: 3px solid blue; */ + border-radius: 3px; + padding: 3% 2%; + background-color: #555c5c; + color: white; + } > figure { margin: 0; margin-bottom: 8px; - border: 1px solid black; + /* border: 1px solid black; */ min-width: 80px; min-height: 80px; border-radius: 50%; @@ -103,10 +117,10 @@ const EntireContainer = styled.div` display: flex; justify-content: center; /* align-items: center; */ - border: 1px solid green; + /* border: 1px solid green; */ > div.detail { - border: 2px solid black; + /* border: 2px solid black; */ /* flex: 6; */ width: 85%; display: flex; @@ -114,7 +128,7 @@ const EntireContainer = styled.div` justify-content: space-around; align-items: stretch; > div { - border: 1px solid blue; + /* border: 1px solid blue; */ margin: 0; /* width: 80%; */ &#charged { @@ -124,11 +138,19 @@ const EntireContainer = styled.div` /* margin-bottom: 7px; */ } > p { - border: 1px solid orange; + /* border: 1px solid orange; */ + &:nth-child(1) { + background-color: #fa9c19; + border-radius: 5px; + padding: 3% 1%; + color: white; + } margin: 0; text-align: center; &.amount { - padding: 3%; + padding: 4% 2%; + border: 1px solid lightgray; + border-radius: 5px; } } } @@ -136,7 +158,7 @@ const EntireContainer = styled.div` } &.charging-withdrawal { - /* flex: 2; */ + /* border: 1px solid gray; */ min-width: 30%; display: flex; flex-direction: column; @@ -430,7 +452,9 @@ function UserInfo() { )}
{nickname}
-
{grade}
+
+ {grade} +
  • diff --git a/client/src/component/MypageCompo/UserInfoChange.js b/client/src/component/MypageCompo/UserInfoChange.js index 38b21f12b..55993a307 100644 --- a/client/src/component/MypageCompo/UserInfoChange.js +++ b/client/src/component/MypageCompo/UserInfoChange.js @@ -12,11 +12,13 @@ import axios from 'axios'; import { useNavigate } from 'react-router-dom'; const EntireContainer = styled.div` - border: 5px solid red; + /* border: 5px solid red; */ height: 57%; display: flex; > div.first { - border: 1px solid black; + border-left: 5px solid orange; + border-right: 1px solid lightgray; + background-color: white; flex: 1; display: flex; flex-direction: column; @@ -34,19 +36,22 @@ const EntireContainer = styled.div` } } > form.second { - border: 1px solid gold; + border-top: 1px solid lightgray; + border-bottom: 1px solid lightgray; + background-color: white; + border-right: 5px solid orange; flex: 2; display: flex; flex-direction: column; > div.modifying-box { - border: 3px solid green; + /* border: 3px solid green; */ flex: 9; display: flex; flex-direction: column; justify-content: center; align-items: center; > div.input-box { - border: 1px solid red; + /* border: 1px solid red; */ margin-bottom: 10px; > input { font-size: 1rem; @@ -71,8 +76,9 @@ const EntireContainer = styled.div` } } > div.confirm { - padding: 2%; - border: 3px solid black; + /* border: 3px solid black; */ + border-top: 1px solid lightgray; + padding-top: 15px; flex: 1; display: flex; justify-content: flex-end; diff --git a/client/src/component/UserMenu.js b/client/src/component/UserMenu.js index caa842d58..31300355b 100644 --- a/client/src/component/UserMenu.js +++ b/client/src/component/UserMenu.js @@ -22,6 +22,7 @@ const EntireContainer = styled.li` } } > ul.popup { + z-index: 1000; background-color: #fff; position: absolute; top: calc(100% + 25px); diff --git a/client/src/images/gold.png b/client/src/images/gold.png new file mode 100644 index 000000000..997f62ab7 Binary files /dev/null and b/client/src/images/gold.png differ diff --git a/client/src/images/second.png b/client/src/images/second.png new file mode 100644 index 000000000..f0a04f3b3 Binary files /dev/null and b/client/src/images/second.png differ diff --git a/client/src/images/third.png b/client/src/images/third.png new file mode 100644 index 000000000..605b0abe7 Binary files /dev/null and b/client/src/images/third.png differ diff --git a/client/src/pages/content/contentBoard/FreeBoard.js b/client/src/pages/content/contentBoard/FreeBoard.js index cc56e1d55..c949c3ba0 100644 --- a/client/src/pages/content/contentBoard/FreeBoard.js +++ b/client/src/pages/content/contentBoard/FreeBoard.js @@ -16,21 +16,49 @@ const OrderContainer = styled.div` display: flex; justify-content: center; align-items: center; - border-radius: 8px; + /* border-radius: 8px; */ box-shadow: 3px 3px 3px #e3e6e4; > div { - /* border: 2px solid red; */ + /* border: 3px solid red; */ width: 50%; + height: 50px; display: flex; justify-content: space-between; > span { + /* border: 2px solid blue; */ + font-family: '순천B'; &.latest_best { - margin-left: -5px; - > input.best { - margin-left: 20px; + /* width: 250px; */ + /* padding: 3% 2%; */ + /* margin-left: -5px; */ + width: 30%; + display: flex; + justify-content: center; + align-items: center; + > input { + display: none; } } + &.count { + display: flex; + align-items: center; + } + + > label { + font-family: '순천B'; + font-size: 1rem; + /* border: 1px solid red; */ + height: 100%; + padding: 0 3%; + display: flex; + align-items: center; + border-radius: 5px; + } + > label.clicked { + background-color: purple; + color: white; + font-size: 1rem; } } } @@ -40,7 +68,7 @@ const EntireContainer = styled.div` background-color: #faf9f5; flex-direction: column; align-items: center; - min-height: 75vh; + height: 800px; overflow-y: scroll; > ul.postList { /* border: 3px solid red; */ @@ -48,7 +76,7 @@ const EntireContainer = styled.div` list-style: none; padding: 0; width: 55%; - height: 600px; + height: 1200px; padding: 1%; > li.post { border: 1px solid black; @@ -152,7 +180,7 @@ function FreeBoard() { const [page, setPage] = useState(1); const [totalCnt, setTotalCnt] = useState(0); const [order, setOrder] = useState('최신순'); - const LIMIT = 6; + const LIMIT = 10; const elm = useRef(null); //서버 통신 헤더: post용, get용 @@ -189,7 +217,7 @@ function FreeBoard() { }) .then((res) => { const { rows, count } = res.data.info; - + console.log('@@@', rows); if (rows) setList([...list, ...rows]); if (count && page === 1) { setTotalCnt(count); @@ -226,16 +254,22 @@ function FreeBoard() { style={{ marginLeft: '0', opacity: '0' }} onChange={handleChange} /> - + - 인기순 + 총 게시물 수 : {totalCnt || 0}
    diff --git a/client/src/pages/user/Mainpage.js b/client/src/pages/user/Mainpage.js index b6140ebfa..9e04005a9 100644 --- a/client/src/pages/user/Mainpage.js +++ b/client/src/pages/user/Mainpage.js @@ -6,6 +6,9 @@ import { updateState, selectUserInfo } from '../../store/slices/userInfo'; import { useNavigate } from 'react-router-dom'; import axios from 'axios'; import searchBack from '../../images/searchBack.jpg'; +import gold from '../../images/gold.png'; +import second from '../../images/second.png'; +import third from '../../images/third.png'; const EntireContainer = styled.div` border: 0; @@ -36,6 +39,8 @@ const EntireContainer = styled.div` background-color: white; opacity: 0.8; padding: 10px 20px; + box-shadow: 7px 5px 2px black; + margin-bottom: 7px; } } } @@ -48,22 +53,64 @@ const UlContainer = styled.ul` border: 15px solid white; border-radius: 10px; grid-column: 6 / 10; - grid-row: 2 / 10; + grid-row: 2 / 9; opacity: 0.9; border-top: 0; - &.first { - } + display: grid; + grid-template-columns: repeat(1, minmax(100%, auto)); + grid-template-rows: repeat(20, minmax(100px, auto)); + overflow-y: auto; + overflow-x: hidden; + gap: 10px 0px; + min-width: 600px; > li { - > p { - &.title { - /* width: 90%; */ - overflow: hidden; + border: 0; + background-color: whitesmoke; + opacity: 0.9; + padding: 2%; + &#top10_title { + font-size: 1.5rem; + font-weight: bold; + color: black; + line-height: 1.5rem; + vertical-align: center; + padding-top: 5%; + } + + &.top10_post { + display: flex; + justify-content: space-between; + align-items: center; + } + } + > div#ad { + min-height: 500px; + font-weight: bolder; + font-family: '순천B'; + color: white; + display: flex; + justify-content: center; + align-items: center; + @media screen and (max-width: 1410px) { + flex-direction: column; + } + @media screen and (max-width: 600px) { + display: none; + } + > span { + font-size: 40px; + &.first { + margin-right: 8px; + @media screen and (max-width: 1410px) { + margin-right: 0px; + margin-bottom: 20px; + } } - &.writer { - /* text-align: center; - width: 10%; - border-left: 2px solid gray; - margin-left: 10px; */ + @media screen and (max-width: 1000px) { + font-size: 35px; + } + @media screen and (max-width: 600px) { + font-size: 30px; } } } @@ -78,11 +125,14 @@ function Post({ post, order }) { }; return ( -
  • - {order} -

    +

  • + {order === 1 && } + {order === 2 && } + {order === 3 && } +

    {title}

    +

    {nickname}

    • ); @@ -91,9 +141,14 @@ function Post({ post, order }) { function List({ posts, className }) { return ( +
  • Top 10 인기 정보글
    • {posts.map((post, idx) => ( ))} +     ); }