리뷰 디자인 보기 적용

apps/web/src/components/review/item.tsx

@@ -9,50 +9,55 @@ import {
   generateShadowCSS,
 } from '@review-canvas/theme';
 
+// import ThumbUpIcon from '@/assets/icon/icon-thumb-up.svg';
 import { Star } from '@/components/review/star.tsx';
 import { useReviewItemStyle } from '@/contexts/style/review-item.ts';
 import useMessageToShop from '@/hooks/use-message-to-shop.ts';
-import type { ReplyItem } from '@/services/api-types/review';
+import type { ReviewItemProps } from '@/services/api-types/review';
+import { useReviewService } from '@/services/review.tsx';
 import { useConnectedShop } from '@/state/shop.ts';
 import { MESSAGE_TYPES } from '@/utils/message';
 
 import Reply from './reply';
-
-interface ReviewItemProps {
-  id: number;
-  rate: number;
-  content: string;
-  reviewerID: string;
-  reviewer: string;
-  replies: ReplyItem[];
-}
+import { useEffect, useState } from 'react';
 
 export default function ReviewItem(props: ReviewItemProps) {
   const style = useReviewItemStyle();
   const { userID } = useConnectedShop();
+  const reviewService = useReviewService();
   const message = useMessageToShop();
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    async function fetchData() {
+      return reviewService.userReviewLike(props.id);
+    }
+    void fetchData().then((response) => {
+      setCount(response.data.count);
+    });
+  }, [props.id, reviewService]);
 
   const edit = () => {
     message(MESSAGE_TYPES.OPEN_MODAL, {
       type: 'edit_review',
       url: `/reviews/${props.id}/edit`,
     });
   };
-
   const deleteReview = () => {
     message(MESSAGE_TYPES.OPEN_SELECTING_MODAL, {
       type: 'delete',
       url: `/reviews/${props.id}/delete`,
     });
   };
-
   const showReviewDetail = () => {
     message(MESSAGE_TYPES.OPEN_MODAL, {
       type: 'detail',
       url: `/reviews/${props.id}`,
     });
   };
 
+  const createLike = () => {};
+
   return (
     <li
       css={[
@@ -63,6 +68,7 @@ export default function ReviewItem(props: ReviewItemProps) {
         generateFontCSS(style.font),
         generateShadowCSS(style.shadow, style.shadowColor),
         css`
+          border-color: ${style.borderColor};
           background-color: ${style.backgroundColor};
           display: flex;
           flex-direction: column;
@@ -88,6 +94,68 @@ export default function ReviewItem(props: ReviewItemProps) {
           작성자 <span>{props.reviewer}</span>
         </div>
         <p className="text-left">{props.content}</p>
+        {/*{style.reviewLike.buttonType !== 'NONE' ? (*/}
+        {/*  <button*/}
+        {/*    onClick={(evt) => {*/}
+        {/*      evt.stopPropagation();*/}
+        {/*      if (userID === props.reviewerID) {*/}
+        {/*        return;*/}
+        {/*      }*/}
+        {/*    }}*/}
+        {/*    css={[*/}
+        {/*      generateBorderRadiusCSS(style.reviewLike.buttonRound),*/}
+        {/*      css`*/}
+        {/*        border-width: 1px;*/}
+        {/*        padding: 2px 6px;*/}
+        {/*        margin-top: 15px;*/}
+        {/*        margin-bottom: 10px;*/}
+        {/*        border-color: ${style.reviewLike.buttonBorderColor};*/}
+        {/*        color: ${style.reviewLike.textColor};*/}
+        {/*        transition:*/}
+        {/*          background-color 0.5s ease,*/}
+        {/*          color 0.5s ease;*/}
+        {/*        display: flex;*/}
+
+        {/*        &:hover {*/}
+        {/*          background-color: ${style.reviewLike.textColor};*/}
+        {/*          color: white;*/}
+        {/*        }*/}
+        {/*      `,*/}
+        {/*    ]}*/}
+        {/*  >*/}
+        {/*    <ThumbUpIcon />*/}
+        {/*    {style.reviewLike.buttonType === 'THUMB_UP_WITH_TEXT' ? <div className="ml-1">도움돼요!</div> : null}*/}
+        {/*    <div className="ml-1">0</div>*/}
+        {/*  </button>*/}
+        {/*) : null}*/}
+        <button
+          css={[
+            generateBorderRadiusCSS(style.reviewLike.buttonRound),
+            css`
+              border-width: 1px;
+              padding: 2px 6px;
+              margin-top: 15px;
+              margin-bottom: 10px;
+              border-color: ${style.reviewLike.buttonBorderColor};
+              color: ${style.reviewLike.textColor};
+              transition:
+                background-color 0.5s ease,
+                color 0.5s ease;
+              display: flex;
+
+              &:hover {
+                background-color: ${style.reviewLike.textColor};
+                color: white;
+              }
+            `,
+          ]}
+          onClick={createLike}
+          type="button"
+        >
+          {/*<ThumbUpIcon />*/}
+          <div className="ml-1">도움돼요!</div>
+          <div className="ml-1">{count}</div>
+        </button>
         {userID === props.reviewerID ? (
           // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- This is intentional
           <div

apps/web/src/components/review/reply.tsx

@@ -24,7 +24,7 @@ export default function Reply(props: ReplyItem) {
         generateFontCSS(style.font),
         generateShadowCSS(style.shadow, style.shadowColor),
         css`
-          background-color: ${style.backgroundColor};
+          background-color: ${style.replyBackgroundColor};
           display: flex;
           flex-direction: column;
           gap: 8px;

apps/web/src/contexts/style/review-item.ts

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react';
 
-import type { Border, BorderRadius, Font, Margin, Padding, Shadow } from '@review-canvas/theme';
+import type { Border, BorderRadius, Font, Margin, Padding, Shadow, ReviewLikeButtonProps } from '@review-canvas/theme';
 
 export interface ReviewItemStyle {
   margin: Margin;
@@ -12,6 +12,8 @@ export interface ReviewItemStyle {
   shadow: Shadow;
   shadowColor: string;
   backgroundColor: string;
+  replyBackgroundColor: string;
+  reviewLike: ReviewLikeButtonProps;
 }
 
 const ReviewItemStyleContext = createContext<ReviewItemStyle | null>(null);

apps/web/src/models/design-property.ts

@@ -1,3 +1,5 @@
+import {ReviewLikeButtonProps} from "@review-canvas/theme";
+
 export type Shadow = 'NONE' | 'SMALL' | 'MEDIUM' | 'LARGE';
 export type FocusAreaLayout = 'BEST_REVIEW_TOP' | 'BEST_REVIEW_BOTTOM' | 'BEST_REVIEW_LEFT' | 'BEST_REVIEW_RIGHT';
 export type ReviewAreaLayout = 'REVIEW_TOP' | 'REVIEW_BOTTOM' | 'REVIEW_LEFT' | 'REVIEW_RIGHT';
@@ -6,6 +8,7 @@ export type AlignmentPosition = 'LEFT' | 'CENTER' | 'RIGHT';
 export type DetailViewType = 'SPREAD' | 'MODAL';
 export type PagingType = 'PAGE_NUMBER' | 'SEE_MORE_SCROLL';
 export type FilterType = 'LIST' | 'DROPDOWN';
+export type ReviewLikeButtonType = 'NONE' | 'THUMB_UP_WITH_TEXT' | 'THUMB_UP';
 
 export interface Margin {
   left: string;
@@ -43,11 +46,11 @@ export interface Round {
 }
 
 export interface ReviewLike {
-  buttonType: string;
-  iconColor: string;
-  textColor: string;
   buttonBorderColor: string;
   buttonRound: Round;
+  buttonType: ReviewLikeButtonType;
+  iconColor: string;
+  textColor: string;
 }
 
 export interface ReviewLayout {

apps/web/src/services/api-types/review.tsx

@@ -30,6 +30,14 @@ export interface RetrieveReviewListResponse {
     content: ReviewItem[];
   };
 }
+
+export interface UserReviewLikeResponse {
+  success: boolean;
+  data: {
+    count: number;
+  };
+}
+
 export interface RetrieveReplyListResponse {
   success: boolean;
   data: ReplyItem[];
@@ -45,6 +53,15 @@ export interface ReplyItem {
   nickname: string;
 }
 
+export interface ReviewItemProps {
+  id: number;
+  rate: number;
+  content: string;
+  reviewerID: string;
+  reviewer: string;
+  replies: ReplyItem[];
+}
+
 export type ReviewListSort = 'LATEST' | 'HIGH_SCORE' | 'LOW_SCORE';
 export type ReviewListFilter = 'ALL' | 'IMAGE_VIDEO' | 'GENERAL';
 
@@ -57,6 +74,11 @@ export interface RetrieveReviewListRequest {
   filter?: ReviewListFilter;
 }
 
+export interface CreateUserReviewLike {
+  mallId: string;
+  memberId: string;
+}
+
 export interface RetrieveReviewItemResponse {
   success: boolean;
   data: ReviewItem;

apps/web/src/services/design-property.tsx

@@ -48,6 +48,14 @@ class DesignPropertyService {
       shadow: reviewDesignView.shadow,
       shadowColor: 'rgba(0, 0, 0, 0.3)',
       backgroundColor: reviewDesignView.reviewBackgroundColor,
+      replyBackgroundColor: reviewDesignView.replyBackgroundColor,
+      reviewLike: {
+        buttonBorderColor: reviewDesignView.reviewLike.buttonBorderColor,
+        buttonRound: reviewDesignView.reviewLike.buttonRound,
+        buttonType: reviewDesignView.reviewLike.buttonType,
+        iconColor: reviewDesignView.reviewLike.iconColor,
+        textColor: reviewDesignView.reviewLike.textColor,
+      },
     };
   }
 }

apps/web/src/services/review.tsx

@@ -6,6 +6,11 @@ import type * as TYPE from '@/services/api-types/review.tsx';
 import API from '@/utils/api.ts';
 
 class ReviewService {
+  async userReviewLike(reviewId: number): Promise<TYPE.UserReviewLikeResponse> {
+    const response = await API.get<TYPE.UserReviewLikeResponse>(`/api/v1/reviews/${reviewId}/like/count`);
+    return response.data;
+  }
+
   async list({
     mallId,
     productNo,