From 4dd11aa72cf51039a0fe9094b992663daf5875f3 Mon Sep 17 00:00:00 2001 From: naraeng Date: Wed, 10 Jul 2024 17:01:16 +0900 Subject: [PATCH 1/3] Feat : my_review (#64) --- src/component/detail/review/KeywordBar.js | 19 +++ src/component/detail/review/ReviewBox.jsx | 16 +-- src/component/detail/review/reviewBox.css | 25 ++-- src/component/mypage/MyReview.jsx | 43 ++++--- src/component/mypage/myReview.css | 148 ++++++++++++++++++++++ 5 files changed, 208 insertions(+), 43 deletions(-) create mode 100644 src/component/detail/review/KeywordBar.js create mode 100644 src/component/mypage/myReview.css diff --git a/src/component/detail/review/KeywordBar.js b/src/component/detail/review/KeywordBar.js new file mode 100644 index 0000000..86c5aa5 --- /dev/null +++ b/src/component/detail/review/KeywordBar.js @@ -0,0 +1,19 @@ +import './reviewBox.css'; + +const KeywordBar = ({ text }) => { + if (text === 'CULTURE') { + text = 'πŸ˜ƒ "λΆ„μœ„κΈ°κ°€ μ’‹μ•„μš”"'; + } else if (text === 'FEE') { + text = 'πŸ’΅ "νšŒλΉ„κ°€ μ λ‹Ήν•΄μš”"'; + } else if (text === 'ACTIVITY') { + text = 'πŸ•ΊπŸ» "ν™œλ™ μ°Έμ—¬κ°€ μžμœ λ‘œμ›Œμš”"'; + } else if (text === 'CAREER') { + text = 'πŸ† "λŒ€μ™Έν™œλ™μ— μ’‹μ•„μš”"'; + } else if (text === 'MANAGE') { + text = 'πŸ‘πŸ» "μš΄μ˜μ§„μ΄ 일을 μž˜ν•΄μš”"'; + } + return
{text}
; +}; + +export default KeywordBar; + diff --git a/src/component/detail/review/ReviewBox.jsx b/src/component/detail/review/ReviewBox.jsx index f4a8235..1e05c35 100644 --- a/src/component/detail/review/ReviewBox.jsx +++ b/src/component/detail/review/ReviewBox.jsx @@ -1,22 +1,8 @@ import './reviewBox.css'; +import KeywordBar from './KeywordBar'; import { useState, useEffect } from 'react'; import axios from 'axios'; -const KeywordBar = ({ text }) => { - if (text === 'CULTURE') { - text = 'πŸ˜ƒ "λΆ„μœ„κΈ°κ°€ μ’‹μ•„μš”"'; - } else if (text === 'FEE') { - text = 'πŸ’΅ "νšŒλΉ„κ°€ μ λ‹Ήν•΄μš”"'; - } else if (text === 'ACTIVITY') { - text = 'πŸ•ΊπŸ» "ν™œλ™ μ°Έμ—¬κ°€ μžμœ λ‘œμ›Œμš”"'; - } else if (text === 'CAREER') { - text = 'πŸ† "λŒ€μ™Έν™œλ™μ— μ’‹μ•„μš”"'; - } else if (text === 'MANAGE') { - text = 'πŸ‘πŸ» "μš΄μ˜μ§„μ΄ 일을 μž˜ν•΄μš”"'; - } - return
{text}
; -}; - export default function ReviewBox({ clubId }) { const [reviewData, setReviewData] = useState([]); diff --git a/src/component/detail/review/reviewBox.css b/src/component/detail/review/reviewBox.css index 1df76e0..118e781 100644 --- a/src/component/detail/review/reviewBox.css +++ b/src/component/detail/review/reviewBox.css @@ -5,13 +5,14 @@ box-shadow: 0px 0px 4px 0px #0000004d; border-radius: 15px; margin-bottom: 15px; - padding: 16px 18px; + /* padding: 16px 18px; */ } .review_box_header { display: flex; flex-direction: row; align-items: center; + margin-bottom: 10px; } .review_box_header p { @@ -27,23 +28,23 @@ } .review_box_contents { - display: grid; - /* ν•œ 쀄에 μ„Έκ°œμ˜ μ—΄ */ - grid-template-columns: repeat(3, 1fr); - gap: 5px; + /* display: grid; + grid-template-columns: repeat(3, 1fr); */ + display: flex; + flex-wrap: wrap; + gap: 7px; margin-top: 7px; - /* width: 100%; */ } .keyword_container { + display: inline-block; background-color: #9c9c9c26; border-radius: 5px; - border: none; - padding: 7px 10px; - font-size: 13px; + padding: 7px 9px; + font-size: 12px; font-weight: 400; - /* width: 30%; - flex: 1; */ + margin-bottom: 2px; + max-width: calc(33.33%); } } @@ -94,4 +95,4 @@ /* width: 30%; flex: 1; */ } -} +} \ No newline at end of file diff --git a/src/component/mypage/MyReview.jsx b/src/component/mypage/MyReview.jsx index cdbc5ca..e0a01d7 100644 --- a/src/component/mypage/MyReview.jsx +++ b/src/component/mypage/MyReview.jsx @@ -1,16 +1,22 @@ +import './myReview.css'; import '../detail/review/reviewBox.css'; -import KeywordBar from '../detail/review/ReviewBox'; +import KeywordBar from '../detail/review/KeywordBar'; import axios from 'axios'; import { useEffect, useState } from 'react'; -import '../detail/review/reviewBox.css'; export default function MyReview() { const [myReviewData, setMyReviewData] = useState([]); + const accessToken = localStorage.getItem('accessToken'); useEffect(() => { const getMyReviews = async () => { try { - const res = await axios.get(`http://13.125.141.171:8080/v1/users/review`); + const res = await axios.get(`http://13.125.141.171:8080/v1/users/review`, { + headers: { + Authorization: `Bearer ${accessToken}`, + }, + }); + console.log(res); if (res.data.success) { setMyReviewData(res.data.data.userReviews); console.log(myReviewData); @@ -23,22 +29,27 @@ export default function MyReview() { }, []); return ( -
+

λ‚΄κ°€ μ“΄ 리뷰

{myReviewData.map((myReview) => ( -
-
-
-

{myReview.clubName}

- {myReview.dateTime} -
-
- {myReview.keywords.map((item, index) => ( - - ))} -
-

{myReview.content}

+
+
+

{myReview.clubName}

+ {myReview.dateTime} + {myReview.approvedStatus === 'APPROVED' ? ( +
μŠΉμΈμ™„λ£Œ
+ ) : myReview.approvedStatus === 'PENDING' ? ( +
μŠΉμΈλŒ€κΈ°
+ ) : myReview.approvedStatus === 'REJECTED' ? ( +
승인거절
+ ) : null} +
+
+ {myReview.keywords.map((item, index) => ( + + ))}
+

{myReview.content}

))}
diff --git a/src/component/mypage/myReview.css b/src/component/mypage/myReview.css new file mode 100644 index 0000000..319d37c --- /dev/null +++ b/src/component/mypage/myReview.css @@ -0,0 +1,148 @@ +@media screen and (min-width: 768px) { + .my_review_container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 50px; + margin-bottom: 200px; + } + + .my_review_container h2 { + font-size: 24px; + font-weight: 500px; + margin-bottom: 30px; + } + + .my_review_box { + width: 475px; + background-color: white; + box-shadow: 0px 0px 4px 0px #0000004d; + border-radius: 15px; + margin-bottom: 15px; + padding: 16px 0px 12px 18px; + } + + .review_comment { + font-size: 13px; + font-weight: 400; + padding: 5px 5px 0px 4px; + } + + .club_name { + font-size: 14px; + font-weight: 700; + margin-right: 7px; + margin-bottom: 2px; + color: #7BC8E0; + } + + .review_approved { + border: 1px solid #7BC8E0; + border-radius: 20px; + font-size: 10px; + font-weight: 600px; + padding: 3px 7px; + margin-left: 10px; + margin-bottom: 5px; + background-color: rgba(123, 200, 224, 0.15); + color: #7BC8E0; + } + + .review_pending { + border: 1px solid #00000060; + border-radius: 20px; + font-size: 10px; + font-weight: 600px; + padding: 3px 7px; + margin-left: 10px; + margin-bottom: 5px; + background-color: #F2F2F2; + color: #00000060; + } + + .review_rejected { + border: 1px solid #fd3c56b3; + border-radius: 20px; + font-size: 10px; + font-weight: 600px; + padding: 3px 7px; + margin-left: 10px; + margin-bottom: 5px; + background-color: #fd3c561f; + color: #fd3c56b3; + } +} + +@media screen and (max-width: 768px) { + .my_review_container { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 50px; + margin-bottom: 200px; + } + + .my_review_container h2 { + font-size: 24px; + font-weight: 500px; + margin-bottom: 30px; + } + + .my_review_box { + width: 300px; + background-color: white; + box-shadow: 0px 0px 4px 0px #0000004d; + border-radius: 15px; + margin-bottom: 15px; + padding: 16px 18px; + } + + .review_comment { + font-size: 13px; + font-weight: 400; + padding: 5px 5px 0px 4px; + } + + .club_name { + font-size: 14px; + font-weight: 700; + margin-right: 7px; + color: #7BC8E0; + } + + .review_approved { + border: 1px solid #7BC8E0; + border-radius: 20px; + font-size: 10px; + font-weight: 600px; + padding: 3px 7px; + margin-left: 10px; + margin-bottom: 5px; + background-color: rgba(123, 200, 224, 0.15); + color: #7BC8E0; + } + + .review_pending { + border: 1px solid #00000060; + border-radius: 20px; + font-size: 10px; + font-weight: 600px; + padding: 3px 7px; + margin-left: 10px; + margin-bottom: 5px; + background-color: #F2F2F2; + color: #00000060; + } + + .review_rejected { + border: 1px solid #fd3c56b3; + border-radius: 20px; + font-size: 10px; + font-weight: 600px; + padding: 3px 7px; + margin-left: 10px; + margin-bottom: 5px; + background-color: #fd3c561f; + color: #fd3c56b3; + } +} \ No newline at end of file From df9609ff894ed72e163df11acd539fe9d0fe25e8 Mon Sep 17 00:00:00 2001 From: naraeng Date: Wed, 10 Jul 2024 17:26:18 +0900 Subject: [PATCH 2/3] 0710 --- src/component/mypage/{ => review}/MyReview.jsx | 4 ++-- src/component/mypage/{ => review}/myReview.css | 0 2 files changed, 2 insertions(+), 2 deletions(-) rename src/component/mypage/{ => review}/MyReview.jsx (95%) rename src/component/mypage/{ => review}/myReview.css (100%) diff --git a/src/component/mypage/MyReview.jsx b/src/component/mypage/review/MyReview.jsx similarity index 95% rename from src/component/mypage/MyReview.jsx rename to src/component/mypage/review/MyReview.jsx index e0a01d7..7bd4ed0 100644 --- a/src/component/mypage/MyReview.jsx +++ b/src/component/mypage/review/MyReview.jsx @@ -1,6 +1,6 @@ import './myReview.css'; -import '../detail/review/reviewBox.css'; -import KeywordBar from '../detail/review/KeywordBar'; +import '../../detail/review/reviewBox.css'; +import KeywordBar from '../../detail/review/KeywordBar'; import axios from 'axios'; import { useEffect, useState } from 'react'; diff --git a/src/component/mypage/myReview.css b/src/component/mypage/review/myReview.css similarity index 100% rename from src/component/mypage/myReview.css rename to src/component/mypage/review/myReview.css From 3e1ecf095b7a3007aeda5c6fc247c41ab4b9a225 Mon Sep 17 00:00:00 2001 From: naraeng Date: Wed, 10 Jul 2024 18:17:36 +0900 Subject: [PATCH 3/3] 0710 solve conflicts --- src/App.jsx | 2 +- src/component/detail/review/reviewBox.css | 6 +-- src/component/mypage/MyReview.jsx | 47 ----------------------- src/component/mypage/review/myReview.css | 4 +- 4 files changed, 6 insertions(+), 53 deletions(-) delete mode 100644 src/component/mypage/MyReview.jsx diff --git a/src/App.jsx b/src/App.jsx index cc9512c..25b22ec 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -16,7 +16,7 @@ import BookMarkPage from "./pages/BookMarkPage"; import BranchCentralPage from "./pages/BranchCentral"; import BranchSmallPage from "./pages/BranchSmall"; import ReviewComment from "./component/detail/review/ReviewComment"; -import MyReview from "./component/mypage/MyReview"; +import MyReview from "./component/mypage/review/MyReview"; function App() { const isPc = useMediaQuery({ diff --git a/src/component/detail/review/reviewBox.css b/src/component/detail/review/reviewBox.css index 118e781..2257625 100644 --- a/src/component/detail/review/reviewBox.css +++ b/src/component/detail/review/reviewBox.css @@ -1,11 +1,11 @@ @media screen and (min-width: 768px) { .review_box_container { - width: 125%; + width: 470px; background-color: white; box-shadow: 0px 0px 4px 0px #0000004d; border-radius: 15px; margin-bottom: 15px; - /* padding: 16px 18px; */ + padding: 16px 18px; } .review_box_header { @@ -44,7 +44,7 @@ font-size: 12px; font-weight: 400; margin-bottom: 2px; - max-width: calc(33.33%); + max-width: calc(35%); } } diff --git a/src/component/mypage/MyReview.jsx b/src/component/mypage/MyReview.jsx deleted file mode 100644 index b3b8620..0000000 --- a/src/component/mypage/MyReview.jsx +++ /dev/null @@ -1,47 +0,0 @@ -import "../detail/review/reviewBox.css"; -import KeywordBar from "../detail/review/ReviewBox"; -import axios from "axios"; -import { useEffect, useState } from "react"; -import "../detail/review/reviewBox.css"; -import { customAxios } from "../../config/axios-config"; - -export default function MyReview() { - const [myReviewData, setMyReviewData] = useState([]); - - useEffect(() => { - const getMyReviews = async () => { - try { - const res = await customAxios.get(`/v1/users/review`); - if (res.data.success) { - setMyReviewData(res.data.data.userReviews); - console.log(myReviewData); - } - } catch (error) { - console.error("Error fetching my reviews : ", error); - } - }; - getMyReviews(); - }, []); - - return ( -
-

λ‚΄κ°€ μ“΄ 리뷰

- {myReviewData.map((myReview) => ( -
-
-
-

{myReview.clubName}

- {myReview.dateTime} -
-
- {myReview.keywords.map((item, index) => ( - - ))} -
-

{myReview.content}

-
-
- ))} -
- ); -} diff --git a/src/component/mypage/review/myReview.css b/src/component/mypage/review/myReview.css index 319d37c..fda617c 100644 --- a/src/component/mypage/review/myReview.css +++ b/src/component/mypage/review/myReview.css @@ -25,7 +25,7 @@ .review_comment { font-size: 13px; font-weight: 400; - padding: 5px 5px 0px 4px; + padding: 5px 20px 0px 4px; } .club_name { @@ -100,7 +100,7 @@ .review_comment { font-size: 13px; font-weight: 400; - padding: 5px 5px 0px 4px; + padding: 5px 5px 20px 4px; } .club_name {