diff --git a/06-StarRating/k0nghaa/Star.css b/06-StarRating/k0nghaa/Star.css
new file mode 100644
index 0000000..a8524b2
--- /dev/null
+++ b/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;
+}
diff --git a/06-StarRating/k0nghaa/Star.tsx b/06-StarRating/k0nghaa/Star.tsx
new file mode 100644
index 0000000..6df6676
--- /dev/null
+++ b/06-StarRating/k0nghaa/Star.tsx
@@ -0,0 +1,41 @@
+interface StarProps {
+ isFilled: boolean;
+}
+
+export default function Star({ isFilled }: StarProps) {
+ return isFilled ? (
+
+ ) : (
+
+ );
+}
diff --git a/06-StarRating/k0nghaa/StarRating.tsx b/06-StarRating/k0nghaa/StarRating.tsx
new file mode 100644
index 0000000..8420cc4
--- /dev/null
+++ b/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);
+
+ 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) => (
+
+ ))}
+
+ );
+}