@@ -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

리뷰: P3: interface 같은 경우 다른 곳에서도 여러 곳에서 쓰일 수 있는데, type 디렉토리 등에 공통적인 model을 정의해놓고 extends 등으로 가져와서 쓰는 방식도 고려해 볼 수 있을 것 같습니다. ReviewItem은 상당히 많은 곳에서 쓰이는 요소로 생각되서 참고하시면 좋을 것 같아 남깁니다!