From 021709b86aeff9793d5ad7788e0e2d7cacb11c00 Mon Sep 17 00:00:00 2001
From: Jeongmin Lee <clcl6084@gmail.com>
Date: Wed, 7 Aug 2024 00:39:22 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=20style:=20=ED=8F=89=EC=A0=90=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20=EB=B0=98?=
 =?UTF-8?q?=EA=B0=9C=20=EB=B3=84=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20#15?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/icons/HALF_STAR_ICON.svg  |  8 ++++----
 src/components/rating/Rating.stories.tsx | 19 ++-----------------
 src/components/rating/Ratings.tsx        | 11 ++---------
 3 files changed, 8 insertions(+), 30 deletions(-)

diff --git a/src/components/icons/HALF_STAR_ICON.svg b/src/components/icons/HALF_STAR_ICON.svg
index a28e37a..f54f85c 100644
--- a/src/components/icons/HALF_STAR_ICON.svg
+++ b/src/components/icons/HALF_STAR_ICON.svg
@@ -1,9 +1,9 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <mask id="mask0_719_6002" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="22" height="22">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1784 1.94333L15.5585 6.76596C15.7498 7.15361 16.1201 7.42262 16.5486 7.48501L21.8704 8.25827C22.9485 8.41476 23.3801 9.74137 22.5987 10.5013L18.7477 14.2551C18.5951 14.404 18.4809 14.5877 18.415 14.7904C18.3491 14.9932 18.3334 15.2089 18.3693 15.4191L19.2786 20.7194C19.4627 21.7944 18.3355 22.6126 17.371 22.1063L12.6107 19.6035C12.4221 19.5042 12.2122 19.4523 11.9991 19.4523C11.786 19.4523 11.576 19.5042 11.3874 19.6035L6.6272 22.1063C5.66165 22.6126 4.5345 21.7944 4.71861 20.7194L5.6279 15.4191C5.66371 15.2089 5.64798 14.9932 5.58206 14.7905C5.51614 14.5877 5.40201 14.404 5.24945 14.2551L1.39851 10.5013C0.618089 9.74137 1.0487 8.41476 2.12778 8.25827L7.44854 7.48501C7.8771 7.42262 8.24839 7.15361 8.43966 6.76596L10.8188 1.94333C11.3015 0.965505 12.6956 0.965505 13.1784 1.94333" fill="#A3A3A3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.1784 1.94333L15.5585 6.76596C15.7498 7.15361 16.1201 7.42262 16.5486 7.48501L21.8704 8.25827C22.9485 8.41476 23.3801 9.74137 22.5987 10.5013L18.7477 14.2551C18.5951 14.404 18.4809 14.5877 18.415 14.7904C18.3491 14.9932 18.3334 15.2089 18.3693 15.4191L19.2786 20.7194C19.4627 21.7944 18.3355 22.6126 17.371 22.1063L12.6107 19.6035C12.4221 19.5042 12.2122 19.4523 11.9991 19.4523C11.786 19.4523 11.576 19.5042 11.3874 19.6035L6.6272 22.1063C5.66165 22.6126 4.5345 21.7944 4.71861 20.7194L5.6279 15.4191C5.66371 15.2089 5.64798 14.9932 5.58206 14.7905C5.51614 14.5877 5.40201 14.404 5.24945 14.2551L1.39851 10.5013C0.618089 9.74137 1.0487 8.41476 2.12778 8.25827L7.44854 7.48501C7.8771 7.42262 8.24839 7.15361 8.43966 6.76596L10.8188 1.94333C11.3015 0.965505 12.6956 0.965505 13.1784 1.94333" fill="#8478ff"/>
 </mask>
 <g mask="url(#mask0_719_6002)">
-<rect y="1" width="12" height="22" fill="#A3A3A3"/>
-<rect x="12" y="1" width="12" height="22" fill="#F5F5F5"/>
+<rect y="1" width="12" height="22" fill="#8478ff"/>
+<rect x="12" y="1" width="12" height="22" fill="#e4e1ff"/>
 </g>
 </svg>
diff --git a/src/components/rating/Rating.stories.tsx b/src/components/rating/Rating.stories.tsx
index 3841f23..910f0cb 100644
--- a/src/components/rating/Rating.stories.tsx
+++ b/src/components/rating/Rating.stories.tsx
@@ -26,23 +26,8 @@ export const FIVE: Story = {
     rating: 5,
   },
 };
-export const FOUR: Story = {
+export const FourPointFive: Story = {
   args: {
-    rating: 4,
-  },
-};
-export const THREE: Story = {
-  args: {
-    rating: 3,
-  },
-};
-export const TWO: Story = {
-  args: {
-    rating: 2,
-  },
-};
-export const ONE: Story = {
-  args: {
-    rating: 1,
+    rating: 4.5,
   },
 };
diff --git a/src/components/rating/Ratings.tsx b/src/components/rating/Ratings.tsx
index 681d112..a635c13 100644
--- a/src/components/rating/Ratings.tsx
+++ b/src/components/rating/Ratings.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 
-import { StarIcon } from "../icons";
+import { HalfStarIcon, StarIcon } from "../icons";
 
 interface Props {
   rating: number;
@@ -22,14 +22,7 @@ const Ratings: FC<Props> = ({ rating }) => {
       );
     } else if (roundedRating >= i - 0.5) {
       // TODO: 반쪽 별로 아이콘 교체 필요
-      stars.push(
-        <StarIcon
-          key={i}
-          width="12px"
-          height="12px"
-          className="text-primary-02"
-        />,
-      );
+      stars.push(<HalfStarIcon key={i} width="12px" height="12px" />);
     } else {
       stars.push(
         <StarIcon