From a476022a3bee9e12991d5c6b5e692bd8ac2f999e Mon Sep 17 00:00:00 2001 From: dbstjs95 Date: Sun, 15 May 2022 21:00:30 +0900 Subject: [PATCH] =?UTF-8?q?css=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/component/ChargeBox.js | 10 +- .../component/MypageCompo/ChargedPointList.js | 13 +- .../src/component/MypageCompo/FreeWriting.js | 38 ++- client/src/component/MypageCompo/MyPosts.js | 106 +++++--- client/src/component/MypageCompo/PaidPosts.js | 23 +- .../src/component/MypageCompo/RefundList.js | 19 +- .../src/component/MypageCompo/SalesWriting.js | 255 ++++++++++++++---- client/src/component/MypageCompo/SideBar.js | 17 +- client/src/component/MypageCompo/UserInfo.js | 46 +++- .../component/MypageCompo/UserInfoChange.js | 20 +- client/src/component/UserMenu.js | 1 + client/src/images/gold.png | Bin 0 -> 2004 bytes client/src/images/second.png | Bin 0 -> 2170 bytes client/src/images/third.png | Bin 0 -> 2069 bytes .../pages/content/contentBoard/FreeBoard.js | 56 +++- client/src/pages/user/Mainpage.js | 85 ++++-- 16 files changed, 494 insertions(+), 195 deletions(-) create mode 100644 client/src/images/gold.png create mode 100644 client/src/images/second.png create mode 100644 client/src/images/third.png 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 0000000000000000000000000000000000000000..997f62ab78da1237fa0709afc458d2f7c1014ab9 GIT binary patch literal 2004 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 wN+^~ITLl#V)AHq)$07*qoM6N<$f+zg@bN~PV literal 0 HcmV?d00001 diff --git a/client/src/images/third.png b/client/src/images/third.png new file mode 100644 index 0000000000000000000000000000000000000000..605b0abe7b79d80e1b844b7af55cbdc31f4be541 GIT binary patch literal 2069 zcmV+w28^WUTEpwQ44zI?areST%{-QpY96B*PfTr7l$z6m08)3!n(Hi@<}& z#d~$@CJt^Ec&Y@?RNew`Ar;ls(Zoa(q!1ZP61H~`1 z+tm~JBhd1F7?@_%i3PvTbQpd+Ct9ahixgINa_)8~_3b_YqOEFXB$=3=XrkLElXs-v zv-wnm%jJ>h0Yy)3K$3XXs#oP7dV92aQmldPXPd}7Qcs*+%j6g%k;dLHaNp&lwAMvU zYY)Hs(QuZ}7)EKei@95FbvQl#Hv$0)p2k3$B}_V9vSz%+s+X9*wH&KX#j5EJqAi+` z1$9m@pBC2B9O)5pVJC*Fu%kOn~VzRYQTmkY<)UlfmvnVcF&VZ9HvM%`DxaAG8xNmiEr?KUru zvkEhk%vMPvCzMu51A49ShmEhrSx%RCP}S1IFVmy?as}5~X%9%0F`Th67V_Vj z$=ODkgO?xl;g(H}qN2&eiJMOTvLMcEP)lo{)WG;iqgtCBrDM~v29{+!)2~n8Ty5op zg%jES&vI67JI|`m&a?UOO`aR)px}C2A5H*rGNRagqLI8rdSL967|47r&8~NQ zWlHY4m>O^Dmvnh$yndNoCo5U=LNu?Zg;R8^nP__$t?vFUo;K16WF}eIcD@Od-A3Lo zCZbXaKK!y01PC(lz!fN~ZS9i1eudn9l|h7S zkJb_$9m$z07az=t!PD8n+Wr4!>8vC!*7WCBfa+Ecv34zWtzCf@ci{SC4fth>j^A*0 zYg7Urzs$`hcfWkQC%_xeC$QkzSPorp!z;_EBmrMQA)xfUJf*A?se%Sny zW|q$!M!UO*n~h!(I5kjA3SmGt>BL08w`=^nv*X0|hih?|w8Yu90Hiv?*m%5(hBgn2 zW+pNr*3PzL<$QhdE*oBsL8IzD)9K0%j+M8ub8#Yhhi(O~)cN;xdX;YniVZdkA{-{M zret-3zQL{M$6Idk(JLdFFkFuyfZHeYMR7Cd?)LV4TD+0mj7SU`2?e-(&&}@--{r`= zqp_>INZ(Y|-RP2I39%mxIt@)aDR-1z*jo7BDAoBIShS;(Wf>0UjjGIGAmQ8IwWVrD6E^>B0isDL!;4y`0yf?{dj%doW9w{+Tuw0Vx52- zpCwZD-6@>aLHGYq3>eWE8~9Cwksc9l>_;fuB}*+=gb15OjxzNcXzKLS(&iKc5fc<8 zHAiH0HfUw|*x|zKasa_s1p{IpiL(P3!oUDbS%Q+bSoFKyG`8KA8oztJ_hQdF zC}K+leVBko0QJM8OT%*M#4H(-cZ!K55Z-?IkL2w*UPHVRw~y~K_vGbTfD{YxK4 z;JQDHfA6XqOd{k)^f2uBeUnI<9XfmcfQ%^YM-=u`c0dk^QDi7P_z7Six&cxA8Dr+l zNWmi+fRfKU@Hltkaqgn@i;mD75{#LzAV~{`Za`;W$)qKwkU3`!III1@1)vybwU73@ zp?Q9|#E90maxj^}{()$EoT=26%9MTOrmd!jn8|u(y&nd^mUd%{)nbhgqsKWOhz9BhJ@9}SfyT50QMC@p1+vhYi%5UV#d^PjEukHl z@PGIT*b>@V?^j5F%Z1Kd1Y`lZh^lpHOgn&>Clwzo^ytiINq)tR&RP?c)mdvu$?8UD zEd=zz<=;CXbh{-S&jnQp%DHLAFkz1djT3Y00000NkvXXu0mjf1}E#7 literal 0 HcmV?d00001 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) => ( ))} +     ); }