feat: 한줄평 좋아요 싫어요 기능

- 그렇지만 아직 한줄평 API가 완전하지 않아보임
- 당장 쓰기 어려워보이는 기능은 제거

src/components/bottomSheet/reaturantDetail/ReviewContent.tsx

@@ -1,8 +1,10 @@
 import { styled } from 'styled-components';
+import usePostRecommend from '~/hooks/api/restaurants/usePostRecommend';
 import { Review } from '~/types/restaurants';
 
 interface ReviewContentProps {
 	review: Review;
+	restaurentId: number;
 }
 
 const formatDate = (date: string) => {
@@ -20,22 +22,56 @@ const countFormat = (count: number) => {
 	return count;
 };
 
-const ReviewContent: React.FC<ReviewContentProps> = ({ review }) => {
+const ReviewContent: React.FC<ReviewContentProps> = ({
+	review,
+	restaurentId,
+}) => {
+	const mutation = usePostRecommend(restaurentId, review.id);
+
+	const recommendClick = () => {
+		mutation.mutate(
+			{ evaluation: 1 },
+			{
+				onSuccess: () => {
+					alert('좋아요를 반영했습니다.');
+				},
+				onError: (error) => {
+					console.error('좋아요 반영에 실패했습니다.', error);
+				},
+			},
+		);
+	};
+
+	const decommendClick = () => {
+		mutation.mutate(
+			{ evaluation: 0 },
+			{
+				onSuccess: () => {
+					alert('싫어요를 반영했습니다.');
+				},
+				onError: (error) => {
+					console.error('싫어요 반영에 실패했습니다.', error);
+				},
+			},
+		);
+	};
+
 	return (
 		<ReviewBox>
 			<div>
 				<ContentText>{review.content}</ContentText>
 				<SubText>
 					{review.user_name} / {formatDate(review.date)}
 				</SubText>
-				<LookReply>답글 보기 ({review.replies_count})</LookReply>
+				{/* 답글보기 기능은 아직 다른 기능을 구현하는데 집중하고 있어서 구현하지 않았습니다. */}
+				{/* <LookReply>답글 보기 ({review.replies_count})</LookReply> */}
 			</div>
 			<RecommendBox>
-				<Recommend>
+				<Recommend onClick={recommendClick}>
 					<div>GOOD</div>
 					<div>{countFormat(review.recommend_count)}</div>
 				</Recommend>
-				<Decommend>
+				<Decommend onClick={decommendClick}>
 					<div>BAD</div>
 					<div>{countFormat(review.decommend_count)}</div>
 				</Decommend>
@@ -68,16 +104,16 @@ const SubText = styled.div`
 	font-weight: ${({ theme }) => theme.fontWeights.Light};
 `;
 
-const LookReply = styled.button`
-	display: inline-block;
-	margin-top: 8px;
-	font-size: 12px;
-	font-weight: ${({ theme }) => theme.fontWeights.Light};
-	color: ${({ theme }) => theme.colors.gray};
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-`;
+// const LookReply = styled.button`
+// 	display: inline-block;
+// 	margin-top: 8px;
+// 	font-size: 12px;
+// 	font-weight: ${({ theme }) => theme.fontWeights.Light};
+// 	color: ${({ theme }) => theme.colors.gray};
+// 	background-color: transparent;
+// 	border: none;
+// 	cursor: pointer;
+// `;
 
 const RecommendBox = styled.div`
 	display: flex;

src/components/bottomSheet/reaturantDetail/Reviews.tsx

@@ -14,7 +14,11 @@ const Reviews: React.FC<ReviewsProps> = ({ reviews, restaurentId }) => {
 			<Title>한줄평</Title>
 			{reviews &&
 				reviews.map((review) => (
-					<ReviewContent key={review.id} review={review} />
+					<ReviewContent
+						key={review.id}
+						restaurentId={restaurentId}
+						review={review}
+					/>
 				))}
 			<ReviewWrite restaurentId={restaurentId} />
 		</>

src/components/navBar/NavBar.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import FriendsIcon from '~/assets/icons/FriendsIcon';
 import HomeIcon from '~/assets/icons/HomeIcon';
-import MyListIcon from '~/assets/icons/MyListIcon';
+// import MyListIcon from '~/assets/icons/MyListIcon';
 import ProfileIcon from '~/components/navBar/ProfileIcon';
 import NavItemWrapper from '~/components/navBar/NavItemWrapper';
 import { useLocation } from 'react-router-dom';
@@ -34,7 +34,7 @@ const NavList = styled.ul`
 `;
 
 const navItems = [
-	{ path: '/myList', label: 'My List', Icon: MyListIcon },
+	// { path: '/myList', label: 'My List', Icon: MyListIcon },
 	{ path: '/friends', label: 'Friends', Icon: FriendsIcon },
 	{ path: '/profile', label: 'Profile', Icon: ProfileIcon },
 ];

src/hooks/api/restaurants/usePostRecommend.ts

@@ -0,0 +1,31 @@
+import { useMutation } from '@tanstack/react-query';
+import { AxiosRequestConfig } from 'axios';
+import { post } from '~/libs/api';
+
+type Request = {
+	evaluation: number;
+};
+
+export const postRecommendQueryKey = (reviewId: number) => [
+	'recommend',
+	reviewId,
+];
+
+const usePostRecommend = (restaurantId: number, reviewId: number) => {
+	const mutation = useMutation<unknown, Error, Request>({
+		mutationFn: (request: Request) => {
+			const config: AxiosRequestConfig = {
+				data: request,
+			};
+
+			return post<unknown>(
+				`/restaurants/${restaurantId}/reviews/${reviewId}/`,
+				config,
+			);
+		},
+	});
+
+	return mutation;
+};
+
+export default usePostRecommend;