+
-
+
aaaaaaaaaaaaa
+
bbbbbbbbbbbb
+
cccccccccccccc
);
}
diff --git a/client/src/pages/user/Mainpage.js b/client/src/pages/user/Mainpage.js
index b37d3bc2d..b6140ebfa 100644
--- a/client/src/pages/user/Mainpage.js
+++ b/client/src/pages/user/Mainpage.js
@@ -1,59 +1,69 @@
import React, { useState, useEffect } from 'react';
import Search from '../../component/Search';
import styled from 'styled-components';
-import freeBoardData from '../../mockdata/freeBoardData';
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; */
}
}
}
@@ -118,8 +128,8 @@ function Mainpage() {
+
-
);
diff --git a/client/src/pages/user/ttMainpage.js b/client/src/pages/user/ttMainpage.js
deleted file mode 100644
index dd33d0bfc..000000000
--- a/client/src/pages/user/ttMainpage.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import Search from '../../component/Search';
-import styled from 'styled-components';
-
-const EntireContainer = styled.div`
- border: 3px solid red;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- > section {
- border: 3px solid blue;
- min-width: 70%;
- min-height: 100%;
- display: flex;
- flex-direction: column;
- > #search {
- border: 3px solid green;
- }
-
- > div#posts-container {
- border: 5px solid yellow;
- min-height: 80%;
- display: flex;
- flex-direction: column;
-
- > div#sales-top-10 {
- border: 5px solid pink;
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- > p {
- border: 1px solid black;
- }
- > ul {
- border: 1px solid black;
- padding: 0;
- list-style: none;
- display: flex;
- flex-direction: column;
- flex-wrap: auto;
- /* justify-content: space-between; */
- > li {
- border: 1px solid lightcoral;
- }
- }
- > span {
- border: 1px solid black;
- display: flex;
- justify-content: flex-end;
- > button {
- }
- }
- }
- > div#free-newest-10 {
- border: 5px solid pink;
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- > p {
- border: 1px solid black;
- }
- > ul {
- border: 1px solid black;
- padding: 0;
- list-style: none;
- display: flex;
- flex-direction: column;
- flex-wrap: auto;
- /* justify-content: space-between; */
- > li {
- border: 1px solid lightcoral;
- }
- }
- > span {
- border: 1px solid black;
- display: flex;
- justify-content: flex-end;
- > button {
- }
- }
- }
- }
- }
-`;
-
-function Mainpage() {
- return (
-
-
-
- {/* */}
-
-
-
유료 정보글 TOP 10
-
- - 111111111111111111111
- - 222222222222222222222
- - 333333333333333333333
- - 444444444444444444444
- - 555555555555555555555
- - 666666666666666666666
- - 777777777777777777777
- - 888888888888888888888
- - 999999999999999999999
- - 101010101010101010101
-
-
-
-
-
-
-
무료 정보글 최신 10
-
- - 111111111111111111111
- - 222222222222222222222
- - 333333333333333333333
- - 444444444444444444444
- - 555555555555555555555
- - 666666666666666666666
- - 777777777777777777777
- - 888888888888888888888
- - 999999999999999999999
- - 101010101010101010101
-
-
-
-
-
-
- );
-}
-
-export default Mainpage;
diff --git a/client/src/pages/user/ysMainpage.js b/client/src/pages/user/ysMainpage.js
new file mode 100644
index 000000000..b37d3bc2d
--- /dev/null
+++ b/client/src/pages/user/ysMainpage.js
@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from 'react';
+import Search from '../../component/Search';
+import styled from 'styled-components';
+import freeBoardData from '../../mockdata/freeBoardData';
+import { useDispatch, useSelector } from 'react-redux';
+import { updateState, selectUserInfo } from '../../store/slices/userInfo';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+
+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;
+ > div.top {
+ width: 100%;
+ border: 2px solid orange;
+ height: 20%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ /* background-color: palegreen; */
+ > div.bar {
+ width: 80%;
+ }
+ }
+`;
+
+const UlContainer = styled.ul`
+ list-style: none;
+ padding: 0;
+ border: 2px solid blue;
+ margin: 0;
+ width: 45%;
+ margin-top: -30px;
+ &.first {
+ margin-right: 5%;
+ border: 3px solid yellow;
+ }
+ > li {
+ border: 1px solid black;
+ display: flex;
+ > p {
+ &.title {
+ width: 90%;
+ overflow: hidden;
+ }
+ &.writer {
+ text-align: center;
+ width: 10%;
+ border-left: 2px solid gray;
+ margin-left: 10px;
+ }
+ }
+ }
+`;
+
+function Post({ post, order }) {
+ const navigate = useNavigate();
+ const { id: postId, title, nickname, userId } = post;
+
+ const handleClick = () => {
+ navigate(`/main/search/${postId}`);
+ };
+
+ return (
+
+ {order}
+
+ {title}
+
+ {nickname}
+
+ );
+}
+
+function List({ posts, className }) {
+ return (
+
+ {posts.map((post, idx) => (
+
+ ))}
+
+ );
+}
+
+function Mainpage() {
+ const { accToken } = useSelector(selectUserInfo);
+ const [list, setList] = useState([]);
+
+ const getConfig = {
+ headers: {
+ Authorization: `Bearer ${accToken}`,
+ },
+ withCredentials: true,
+ };
+
+ useEffect(() => {
+ //인기 top 10개
+ const infoURL = `${process.env.REACT_APP_SERVER_DEV_URL}/info`;
+ axios
+ .get(infoURL, getConfig)
+ .then((res) => {
+ const { info } = res.data;
+ setList([...list, ...info]);
+ })
+ .catch((err) => {
+ if (err.response?.message) alert(err.response.message);
+ });
+ }, []);
+
+ return (
+ <>
+
+
+
+
+
+
+
+ );
+}
+
+export default Mainpage;
diff --git a/server/src/controlloers/auth.ts b/server/src/controlloers/auth.ts
index 541fef320..8f06c686a 100644
--- a/server/src/controlloers/auth.ts
+++ b/server/src/controlloers/auth.ts
@@ -46,7 +46,7 @@ module.exports = {
// console.log('해당 유저 X');
return res.status(401).json({ message: '해당 유저가 없습니다.' });
}
- const { id, point, grade } = userInfo;
+ const { id, point, grade, phone, nickname } = userInfo;
// npm문서에서 bcrypt 관련 내용 찾아보기
const verification: string = await bcrypt
@@ -75,6 +75,8 @@ module.exports = {
id,
point,
grade,
+ nickname,
+ phone,
accToken: accToken,
message: '로그인에 성공 했습니다.',
});
diff --git a/server/src/db/info.ts b/server/src/db/info.ts
index 3f35d39f5..8cabd83ea 100644
--- a/server/src/db/info.ts
+++ b/server/src/db/info.ts
@@ -27,7 +27,7 @@ export async function getInfo(infoId: number) {
},
{
model: Reply,
- attributes: ['content', 'createdAt'],
+ attributes: ['id', 'userid', 'content', 'createdAt'],
include: [
{
model: User,
diff --git a/server/src/routes/info.ts b/server/src/routes/info.ts
index 6b50f7e6a..f135598c1 100644
--- a/server/src/routes/info.ts
+++ b/server/src/routes/info.ts
@@ -7,7 +7,7 @@ const likeControllers = require('../controlloers/like');
const auth = require('../middlewares/auth');
// 게시물 info.js
-router.get('/:infoId', auth.me, infoControllers.getInfo);
+router.get('/:infoId', infoControllers.getInfo);
router.post('/', auth.me, infoControllers.writeInfo);
router.delete('/:infoId', auth.me, infoControllers.removeInfo);
router.put('/:infoId', auth.me, infoControllers.putInfo);
diff --git a/server/src/routes/users.ts b/server/src/routes/users.ts
index a24f27e38..3d2cdeff6 100644
--- a/server/src/routes/users.ts
+++ b/server/src/routes/users.ts
@@ -3,9 +3,9 @@ const router = express.Router();
const usersControllers = require('../controlloers/users');
const auth = require('../middlewares/auth');
-router.get('/:userId', auth.me, usersControllers.getUsersInfo);
-router.put('/:userId', auth.me, usersControllers.editUsersInfo);
-router.get('/userinfo/:userId', auth.me, usersControllers.usersWriteInfo); // 403 에러 왜 났는지 찾기
+router.get('/userinfo/:userId', auth.me, usersControllers.getUsersInfo);
+router.put('/userinfo/:userId', auth.me, usersControllers.editUsersInfo);
+router.get('/info', auth.me, usersControllers.usersWriteInfo); // 403 에러 왜 났는지 찾기
router.get('/info/order', auth.me, usersControllers.usersOrderInfo);
router.get('/info/refund', auth.me, usersControllers.usersRefundInfo);
router.post('/:userId/img', auth.me, usersControllers.postImg);