From 2db20fe392be0e10b52b088d0d969ecc70b21974 Mon Sep 17 00:00:00 2001 From: k0nghaa Date: Sun, 21 Jun 2026 22:49:25 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=2006-StarRating=20=EA=B3=BC=EC=A0=9C?= =?UTF-8?q?=201=EC=B0=A8=20=EC=8B=9C=EB=8F=84(=EC=9D=B4=EA=B2=BD=ED=95=98)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 06-StarRating/k0nghaa/Star.css | 17 ++++++++++++ 06-StarRating/k0nghaa/Star.tsx | 41 ++++++++++++++++++++++++++++ 06-StarRating/k0nghaa/StarRating.tsx | 23 ++++++++++++++++ 3 files changed, 81 insertions(+) create mode 100644 06-StarRating/k0nghaa/Star.css create mode 100644 06-StarRating/k0nghaa/Star.tsx create mode 100644 06-StarRating/k0nghaa/StarRating.tsx 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..1882716 --- /dev/null +++ b/06-StarRating/k0nghaa/StarRating.tsx @@ -0,0 +1,23 @@ +import { useState } from 'react'; +import Star from './Star'; +import './Star.css'; + +interface StarRatingProps { + maxStar: number; + filledStar: number; + // newStarRating: () => void; +} + +export default function StarRating() { + const [isFilledStar, setIsFilledStar] = useState(true); + + const handleFilledStar = () => { + setIsFilledStar((prev) => !prev); + }; + + return ( + + ); +} From e4266e30b5f58b8818f749b5a6f7941b71ef95ec Mon Sep 17 00:00:00 2001 From: k0nghaa Date: Sun, 21 Jun 2026 23:41:29 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=2006-StarRating=20=EA=B3=BC=EC=A0=9C?= =?UTF-8?q?=202=EC=B0=A8=20=EC=8B=9C=EB=8F=84(=EC=9D=B4=EA=B2=BD=ED=95=98)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 06-StarRating/k0nghaa/Star.tsx | 5 ++-- 06-StarRating/k0nghaa/StarRating.tsx | 41 ++++++++++++++++++++++------ 2 files changed, 36 insertions(+), 10 deletions(-) diff --git a/06-StarRating/k0nghaa/Star.tsx b/06-StarRating/k0nghaa/Star.tsx index 6df6676..afd109a 100644 --- a/06-StarRating/k0nghaa/Star.tsx +++ b/06-StarRating/k0nghaa/Star.tsx @@ -1,9 +1,10 @@ interface StarProps { isFilled: boolean; + isHovered: boolean; } -export default function Star({ isFilled }: StarProps) { - return isFilled ? ( +export default function Star({ isFilled, isHovered }: StarProps) { + return isFilled || isHovered ? ( void; } -export default function StarRating() { - const [isFilledStar, setIsFilledStar] = useState(true); +export default function StarRating({ maxStar }: StarRatingProps) { + const [clickedStar, setClickedStar] = useState(0); + const [isHoveredStar, setIsHoveredStar] = useState(null); - const handleFilledStar = () => { - setIsFilledStar((prev) => !prev); + const starArray = Array.from({ length: maxStar }); + + const handleFilledStar = (index: number) => { + setClickedStar(index + 1); + + if (index === 0) setClickedStar(0); + }; + + const handleMouseEnter = (index: number) => { + setIsHoveredStar(index + 1); + }; + + const handleMouseLeave = () => { + setIsHoveredStar(null); }; return ( - + <> + {starArray.map((_, index) => ( + + ))} + ); } From a4507a7825184fd9fc2701be6a11d0bafe892e89 Mon Sep 17 00:00:00 2001 From: k0nghaa Date: Mon, 22 Jun 2026 00:05:23 +0900 Subject: [PATCH 3/3] =?UTF-8?q?feat:=2006-StarRating=20=EA=B3=BC=EC=A0=9C?= =?UTF-8?q?=20=EC=B5=9C=EC=A2=85=20=EC=A0=9C=EC=B6=9C(=EC=9D=B4=EA=B2=BD?= =?UTF-8?q?=ED=95=98)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 06-StarRating/k0nghaa/Star.tsx | 5 ++--- 06-StarRating/k0nghaa/StarRating.tsx | 15 ++++++++------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/06-StarRating/k0nghaa/Star.tsx b/06-StarRating/k0nghaa/Star.tsx index afd109a..6df6676 100644 --- a/06-StarRating/k0nghaa/Star.tsx +++ b/06-StarRating/k0nghaa/Star.tsx @@ -1,10 +1,9 @@ interface StarProps { isFilled: boolean; - isHovered: boolean; } -export default function Star({ isFilled, isHovered }: StarProps) { - return isFilled || isHovered ? ( +export default function Star({ isFilled }: StarProps) { + return isFilled ? ( { - setClickedStar(index + 1); + const activeRating = isHoveredStar !== null ? isHoveredStar : clickedStar; - if (index === 0) setClickedStar(0); + const handleFilledStar = (index: number) => { + if (index === 0 && clickedStar === 1) { + setClickedStar(0); + } else { + setClickedStar(index + 1); + } }; const handleMouseEnter = (index: number) => { @@ -37,10 +41,7 @@ export default function StarRating({ maxStar }: StarRatingProps) { onMouseEnter={() => handleMouseEnter(index)} onMouseLeave={handleMouseLeave} > - + ))}