Skip to content

Commit

Permalink
Merge pull request #65 from Clubber2024/feat/#64-my_review
Browse files Browse the repository at this point in the history
Feat/#64 my review
  • Loading branch information
naraeng authored Jul 10, 2024
2 parents fa0dac2 + 3e1ecf0 commit 501b994
Show file tree
Hide file tree
Showing 7 changed files with 277 additions and 114 deletions.
2 changes: 1 addition & 1 deletion src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
19 changes: 19 additions & 0 deletions src/component/detail/review/KeywordBar.js
Original file line number Diff line number Diff line change
@@ -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 <div className="keyword_container">{text}</div>;
};

export default KeywordBar;

93 changes: 39 additions & 54 deletions src/component/detail/review/ReviewBox.jsx
Original file line number Diff line number Diff line change
@@ -1,60 +1,45 @@
import "./reviewBox.css";
import { useState, useEffect } from "react";
import axios from "axios";
import { customAxios } from "../../../config/axios-config";

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 <div className="keyword_container">{text}</div>;
};
import './reviewBox.css';
import KeywordBar from './KeywordBar';
import { useState, useEffect } from 'react';
import axios from 'axios';

export default function ReviewBox({ clubId }) {
const [reviewData, setReviewData] = useState([]);
const [reviewData, setReviewData] = useState([]);

useEffect(() => {
const fetchKeywordData = async () => {
try {
const res = await customAxios.get(`/v1/clubs/${clubId}/reviews/v2`);
if (res.data.success) {
setReviewData(res.data.data.reviews);
console.log(reviewData);
}
} catch (error) {
console.error("Error fetching reviews:", error);
}
};
useEffect(() => {
const fetchKeywordData = async () => {
try {
const res = await axios.get(`http://13.125.141.171:8080/v1/clubs/${clubId}/reviews/v2`);
if (res.data.success) {
setReviewData(res.data.data.reviews);
console.log(reviewData);
}
} catch (error) {
console.error('Error fetching reviews:', error);
}
};

fetchKeywordData();
}, [clubId]);
fetchKeywordData();
}, [clubId]);

return (
<>
{reviewData.map((review) => (
<div className="review_box_container">
<div key={review.reviewId} className="review_box">
<div className="review_box_header">
<p>익명 {review.reviewId}</p>
<span>{review.dateTime}</span>
</div>
<div className="review_box_contents">
{review.keywords.map((item, index) => (
<KeywordBar key={index} text={item} />
))}
</div>
<p>{review.content}</p>
</div>
</div>
))}
</>
);
return (
<>
{reviewData.map((review) => (
<div className="review_box_container">
<div key={review.reviewId} className="review_box">
<div className="review_box_header">
<p>익명 {review.reviewId}</p>
<span>{review.dateTime}</span>
</div>
<div className="review_box_contents">
{review.keywords.map((item, index) => (
<KeywordBar key={index} text={item} />
))}
</div>
<p>{review.content}</p>
</div>
</div>
))}
</>
);
}
25 changes: 13 additions & 12 deletions src/component/detail/review/reviewBox.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@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;
Expand All @@ -12,6 +12,7 @@
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 10px;
}

.review_box_header p {
Expand All @@ -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(35%);
}
}

Expand Down Expand Up @@ -94,4 +95,4 @@
/* width: 30%;
flex: 1; */
}
}
}
47 changes: 0 additions & 47 deletions src/component/mypage/MyReview.jsx

This file was deleted.

57 changes: 57 additions & 0 deletions src/component/mypage/review/MyReview.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import './myReview.css';
import '../../detail/review/reviewBox.css';
import KeywordBar from '../../detail/review/KeywordBar';
import axios from 'axios';
import { useEffect, useState } from 'react';

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`, {
headers: {
Authorization: `Bearer ${accessToken}`,
},
});
console.log(res);
if (res.data.success) {
setMyReviewData(res.data.data.userReviews);
console.log(myReviewData);
}
} catch (error) {
console.error('Error fetching my reviews : ', error);
}
};
getMyReviews();
}, []);

return (
<div className="my_review_container">
<h2>내가 쓴 리뷰</h2>
{myReviewData.map((myReview) => (
<div key={myReview.reviewId} className="my_review_box">
<div className="review_box_header">
<p className="club_name">{myReview.clubName}</p>
<span>{myReview.dateTime}</span>
{myReview.approvedStatus === 'APPROVED' ? (
<div className="review_approved">승인완료</div>
) : myReview.approvedStatus === 'PENDING' ? (
<div className="review_pending">승인대기</div>
) : myReview.approvedStatus === 'REJECTED' ? (
<div className="review_rejected">승인거절</div>
) : null}
</div>
<div className="review_box_contents">
{myReview.keywords.map((item, index) => (
<KeywordBar key={index} text={item} />
))}
</div>
<p className="review_comment">{myReview.content}</p>
</div>
))}
</div>
);
}
Loading

0 comments on commit 501b994

Please sign in to comment.