feat: 리뷰 좋아요, 신고하기 기능 추가

frontend/package.json

@@ -26,6 +26,7 @@
     "@tanstack/react-query": "^4.32.0",
     "@tanstack/react-query-devtools": "^4.32.0",
     "axios": "^1.4.0",
+    "browser-image-compression": "^2.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.2",

frontend/src/@types/api.types.ts

@@ -55,13 +55,24 @@ export interface VideoList {
   currentElementsCount: number;
 }
 
+export type StarRate = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5;
+
+export type ReviewUploadImageType = {
+  imgUrl: string;
+  imgFile: Blob;
+};
+
 export interface RestaurantReview {
   id: number;
   nickname: string;
   memberId: number;
   profileImageUrl: string;
   content: string;
   createdDate: HyphenatedDate;
+  isLiked: boolean;
+  likeCount: number;
+  rating: StarRate;
+  reviewImageUrls: ReviewUploadImageType[];
 }
 
 export interface RestaurantReviewData {
@@ -71,6 +82,7 @@ export interface RestaurantReviewData {
 
 export interface RestaurantReviewPatchBody {
   content: string;
+  rating: number;
 }
 
 export interface RestaurantReviewPostBody {

frontend/src/@types/review.types.ts

@@ -0,0 +1,3 @@
+export type ReviewFormType = 'create' | 'update' | 'delete' | 'report' | 'all' | null;
+
+export type ReviewSubmitButtonType = Exclude<ReviewFormType, 'all' | 'delete' | 'report' | null>;

frontend/src/api/apiClient.ts

@@ -14,3 +14,11 @@ export const apiClient = axios.create({
     'Content-type': 'application/json',
   },
 });
+
+export const apiUserFilesClient = axios.create({
+  baseURL: `${process.env.BASE_URL}`,
+  headers: {
+    'Content-Type': 'multipart/form-data',
+  },
+  withCredentials: true,
+});

frontend/src/api/restaurantReview.ts

@@ -1,18 +1,14 @@
-import type { RestaurantReviewPatchBody, RestaurantReviewPostBody } from '~/@types/api.types';
-import { apiClient, apiUserClient } from './apiClient';
+import { apiUserClient, apiUserFilesClient } from './apiClient';
+
+import type { RestaurantReviewPatchBody } from '~/@types/api.types';
 
 export const getRestaurantReview = async (id: string) => {
-  const response = await apiClient.get(`/reviews?restaurantId=${id}`);
+  const response = await apiUserClient.get(`/reviews?restaurantId=${id}`);
   return response.data;
 };
 
-export const postRestaurantReview = async (body: RestaurantReviewPostBody) => {
-  const response = await apiUserClient.post(`/reviews`, body);
-  return response;
-};
-
-export const deleteRestaurantReview = async (reviewId: number) => {
-  const response = await apiUserClient.delete(`/reviews/${reviewId}`);
+export const postRestaurantReview = async (body: FormData) => {
+  const response = await apiUserFilesClient.post(`/reviews`, body);
   return response;
 };
 
@@ -26,3 +22,18 @@ export const patchRestaurantReview = async ({
   const response = await apiUserClient.patch(`/reviews/${reviewId}`, body);
   return response;
 };
+
+export const deleteRestaurantReview = async (reviewId: number) => {
+  const response = await apiUserFilesClient.delete(`/reviews/${reviewId}`);
+  return response;
+};
+
+export const postRestaurantReviewLike = async (reviewId: number) => {
+  const response = await apiUserClient.post(`/reviews/${reviewId}/like`);
+  return response;
+};
+
+export const postRestaurantReviewReport = async ({ reviewId, content }: { reviewId: number; content: string }) => {
+  const response = await apiUserClient.post(`/reviews/${reviewId}/report`, { content });
+  return response;
+};

frontend/src/components/@common/ImageForm/ImageForm.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ImageForm from './ImageForm';
+
+const meta: Meta<typeof ImageForm> = {
+  title: 'ImageForm',
+  component: ImageForm,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ImageForm>;
+
+export const Default: Story = {
+  args: {},
+};

frontend/src/components/@common/ImageForm/ImageForm.tsx

@@ -0,0 +1,37 @@
+import { styled } from 'styled-components';
+import { FONT_SIZE } from '~/styles/common';
+
+interface ImageFormProps extends React.ComponentPropsWithoutRef<'input'> {
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+function ImageForm({ onChange, ...restProps }: ImageFormProps) {
+  return (
+    <StyledButton>
+      +
+      <input type="file" onChange={onChange} {...restProps} />
+    </StyledButton>
+  );
+}
+
+export default ImageForm;
+
+const StyledButton = styled.label`
+  padding: 4.8rem;
+
+  border: 4px solid #ddd;
+  border-radius: 20px;
+  background-color: transparent;
+
+  font-size: ${FONT_SIZE.lg};
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: #ddd;
+  }
+
+  input[type='file'] {
+    display: none;
+  }
+`;

frontend/src/components/@common/ImageForm/index.tsx

@@ -0,0 +1,3 @@
+import ImageForm from '~/components/@common/ImageForm/ImageForm';
+
+export default ImageForm;

frontend/src/components/@common/Star/HalfStar.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Star from './HalfStar';
+
+const meta: Meta<typeof Star> = {
+  title: 'Star',
+  component: Star,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Star>;
+
+export const Default: Story = {
+  args: {
+    isLeft: true,
+    isFilled: false,
+  },
+};

frontend/src/components/@common/Star/HalfStar.tsx

@@ -0,0 +1,47 @@
+import { styled } from 'styled-components';
+
+import EmptyLeftStarIcon from '~/assets/icons/star/empty-left-star-icon.svg';
+import EmptyRightStarIcon from '~/assets/icons/star/empty-right-star-icon.svg';
+
+import type { StarRate } from '~/@types/api.types';
+
+interface HalfStarProps {
+  isLeft: boolean;
+  isFilled: boolean;
+  rateNumber: StarRate;
+  size: `${number}px`;
+  onRateClick: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+function HalfStar({ isLeft, isFilled, rateNumber, size, onRateClick }: HalfStarProps) {
+  const halfStarColor = isFilled ? '#FFD601' : '#e8e8e8';
+
+  if (isLeft) {
+    return (
+      <StyleHalfStarButton type="button" data-rate={rateNumber} size={size} onClick={onRateClick}>
+        <EmptyLeftStarIcon fill={halfStarColor} />
+      </StyleHalfStarButton>
+    );
+  }
+
+  return (
+    <StyleHalfStarButton type="button" onClick={onRateClick} size={size} data-rate={rateNumber}>
+      <EmptyRightStarIcon fill={halfStarColor} />
+    </StyleHalfStarButton>
+  );
+}
+
+export default HalfStar;
+
+const StyleHalfStarButton = styled.button<{ size: `${number}px` }>`
+  padding: 0;
+  margin: 0;
+
+  border: none;
+  background: none;
+  outline: none;
+
+  & > svg {
+    width: ${({ size }) => size};
+  }
+`;

frontend/src/components/@common/Star/index.tsx

@@ -0,0 +1,3 @@
+import HalfStar from '~/components/@common/Star/HalfStar';
+
+export default HalfStar;

frontend/src/components/@common/StarRating/StarRating.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import StarRating from './StarRating';
+
+const meta: Meta<typeof StarRating> = {
+  title: 'StarRating',
+  component: StarRating,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StarRating>;
+
+export const Default: Story = {
+  args: {
+    rate: 3.5,
+  },
+};

frontend/src/components/@common/StarRating/StarRating.tsx

@@ -0,0 +1,40 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { styled } from 'styled-components';
+import HalfStar from '~/components/@common/Star/HalfStar';
+
+import type { StarRate } from '~/@types/api.types';
+
+const starRateList: StarRate[] = [0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5];
+
+interface StarRatingProps extends ComponentPropsWithoutRef<'div'> {
+  rate: StarRate;
+  size?: `${number}px`;
+  onRateClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+function StarRating({ rate, onRateClick, size = '20px', ...restProps }: StarRatingProps) {
+  return (
+    <StyledStarRatingWrapper {...restProps}>
+      {starRateList.map((starRate, idx) => {
+        const isLeft = idx % 2 === 0;
+        const isFilled = starRate <= rate;
+
+        return (
+          <HalfStar size={size} isLeft={isLeft} isFilled={isFilled} rateNumber={starRate} onRateClick={onRateClick} />
+        );
+      })}
+    </StyledStarRatingWrapper>
+  );
+}
+
+export default StarRating;
+
+const StyledStarRatingWrapper = styled.div`
+  display: flex;
+
+  width: max-content;
+
+  button:nth-child(2n) {
+    margin-right: 1.2rem;
+  }
+`;

frontend/src/components/@common/StarRating/index.tsx

@@ -0,0 +1,3 @@
+import StarRating from '~/components/@common/StarRating/StarRating';
+
+export default StarRating;

frontend/src/components/@common/Toast/Toast.tsx

@@ -4,7 +4,7 @@ import useToastState from '~/hooks/store/useToastState';
 import useMediaQuery from '~/hooks/useMediaQuery';
 import { BORDER_RADIUS, FONT_SIZE } from '~/styles/common';
 import Portal from '../Portal';
-import getImgUrl from '~/utils/image';
+import { getImgUrl } from '~/utils/image';
 
 interface StyledToastProps {
   isSuccess?: boolean;

frontend/src/components/@common/WaterMarkImage/WaterMarkImage.tsx

@@ -1,6 +1,6 @@
 import { styled, css } from 'styled-components';
 import { BORDER_RADIUS, FONT_SIZE, paintSkeleton } from '~/styles/common';
-import getImgUrl from '~/utils/image';
+import { getImgUrl } from '~/utils/image';
 
 interface WaterMarkImageProps {
   waterMark: string;