feat: 06-StarRating 구현 (이경하)

06-StarRating/k0nghaa/Star.css

@@ -0,0 +1,17 @@
+button {
+  /* 1. 배경 및 테두리 초기화 */
+  background: transparent;
+  border: none;
+
+  /* 2. 안팎 여백 및 크기 초기화 */
+  padding: 0;
+  margin: 0;
+
+  /* 3. 마우스 커서 및 클릭 시 외곽선 제어 */
+  cursor: pointer;
+  outline: none;
+
+  /* 4. 폰트 스타일 상속 (부모 요소의 글꼴을 그대로 따름) */
+  font: inherit;
+  color: inherit;
+}

06-StarRating/k0nghaa/Star.tsx

@@ -0,0 +1,41 @@
+interface StarProps {
+  isFilled: boolean;
+}
+
+export default function Star({ isFilled }: StarProps) {
+  return isFilled ? (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="star-icon star-icon-filled"
+      fill="black"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth="2"
+      width="24"
+      height="24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
+      />
+    </svg>
+  ) : (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className="star-icon"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth="2"
+      width="24"
+      height="24"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
+      />
+    </svg>
+  );
+}

06-StarRating/k0nghaa/StarRating.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import Star from './Star';
+import './Star.css';
+
+interface StarRatingProps {
+  maxStar: number;
+  // filledStar: number;
+  // newStarRating: () => void;
+}
+
+export default function StarRating({ maxStar }: StarRatingProps) {
+  const [clickedStar, setClickedStar] = useState(0);
+  const [isHoveredStar, setIsHoveredStar] = useState<null | number>(null);
+
+  const starArray = Array.from({ length: maxStar });
+
+  const activeRating = isHoveredStar !== null ? isHoveredStar : clickedStar;
+
+  const handleFilledStar = (index: number) => {
+    if (index === 0 && clickedStar === 1) {
+      setClickedStar(0);
+    } else {
+      setClickedStar(index + 1);
+    }
+  };
+
+  const handleMouseEnter = (index: number) => {
+    setIsHoveredStar(index + 1);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHoveredStar(null);
+  };
+
+  return (
+    <>
+      {starArray.map((_, index) => (
+        <button
+          key={index}
+          onClick={() => handleFilledStar(index)}
+          onMouseEnter={() => handleMouseEnter(index)}
+          onMouseLeave={handleMouseLeave}
+        >
+          <Star isFilled={index < activeRating} />
+        </button>
+      ))}
+    </>
+  );
+}