diff --git a/public/icons/star/.index.ts.swp b/public/icons/star/.index.ts.swp new file mode 100644 index 00000000..c4ea1985 Binary files /dev/null and b/public/icons/star/.index.ts.swp differ diff --git a/public/icons/star/star_0.svg b/public/icons/star/star_0.svg index 13df92ab..0b0d571f 100644 --- a/public/icons/star/star_0.svg +++ b/public/icons/star/star_0.svg @@ -1,3 +1,3 @@ - + diff --git a/public/icons/star/star_0_25.svg b/public/icons/star/star_0_25.svg index c9a662bd..09082b8a 100644 --- a/public/icons/star/star_0_25.svg +++ b/public/icons/star/star_0_25.svg @@ -1,11 +1,11 @@ - + - + diff --git a/public/icons/star/star_0_5.svg b/public/icons/star/star_0_5.svg index 50a4f2f7..9cf09d6c 100644 --- a/public/icons/star/star_0_5.svg +++ b/public/icons/star/star_0_5.svg @@ -1,11 +1,11 @@ - + - + diff --git a/public/icons/star/star_0_75.svg b/public/icons/star/star_0_75.svg index 40de2fa6..bdb600b3 100644 --- a/public/icons/star/star_0_75.svg +++ b/public/icons/star/star_0_75.svg @@ -1,4 +1,4 @@ - + diff --git a/public/icons/star/star_1.svg b/public/icons/star/star_1.svg index 2a15213b..20038a03 100644 --- a/public/icons/star/star_1.svg +++ b/public/icons/star/star_1.svg @@ -1,3 +1,3 @@ - + diff --git a/public/icons/useTemp.png b/public/icons/useTemp.png new file mode 100644 index 00000000..c22a6d89 Binary files /dev/null and b/public/icons/useTemp.png differ diff --git a/src/app/(auth-required)/main/info/course-reviews/write-review/page.tsx b/src/app/(auth-required)/main/info/course-reviews/write-review/page.tsx index 01e916fe..bd179558 100644 --- a/src/app/(auth-required)/main/info/course-reviews/write-review/page.tsx +++ b/src/app/(auth-required)/main/info/course-reviews/write-review/page.tsx @@ -9,6 +9,7 @@ import { Suspense, useContext, useEffect, + useRef, useState, } from "react"; import { departMentType, selectType } from "./type"; @@ -26,6 +27,7 @@ import { submitReview } from "@/api/review/submitReview"; import { useRouter } from "next/navigation"; import { calcEmotion } from "./util/calcEmotion"; import { ReviewContext } from "@/context/WriteReviewContext"; +import Rating from "@/components/info/rating"; const WriteReview = () => { const router = useRouter(); @@ -50,9 +52,12 @@ const WriteReview = () => { }); const [reviewContents, setReviewContents] = useState(""); const [isModalOpen, setIsModalOpen] = useState(false); + const [isOnSubmit, setisOnSubmit] = useState(false); const { data } = useContext(ReviewContext); + const ratingRef = useRef(null); + const getReviewList = async () => { try { const response = await useSearchedReviewContext({ @@ -74,7 +79,9 @@ const WriteReview = () => { const onSummitReview = async () => { if (department.value === "") return; + if (isOnSubmit) return; // 중복 제출 방지 else { + setisOnSubmit(true); const response = await submitReview({ lectureId: department.value, content: reviewContents, @@ -173,9 +180,14 @@ const WriteReview = () => {

전반적인 수업 경험은 어땠나요?

- {/* 수업 후기 점수 평가 */} + +

+ 별점을 눌러 평가해주세요. +

+ + {/* 수업 후기 점수 평가(기존)
- {/* 1-5점 해당 바를 눌러 점수를 정할 수 있도록 기능 구현 필요*/} + {/* 1-5점 해당 바를 눌러 점수를 정할 수 있도록 기능 구현 필요
{`${ @@ -193,35 +205,55 @@ const WriteReview = () => { clickFn={setRating} className="mt-1" /> -

- 위 그래프를 눌러 조절해주세요 -

+
+ */} + {/* 수업 후기 점수 평가(리디자인) */} +
+
{ + if (!ratingRef.current) return; + + const rect = ratingRef.current.getBoundingClientRect(); + const clickX = e.clientX - rect.left; // 클릭한 X 좌표 (div 안에서) + const ratio = clickX / rect.width; // 0 ~ 1 사이 비율 + const newRating = Math.min(5, Math.max(0, ratio * 5)); + + // 0.25 단위로 스냅 + const snapped = Math.round(newRating / 0.25) * 0.25; + + setRating(Math.min(5, Math.max(0, snapped))); + }}> + +
{/* 후기 입력 공간 */} -
+
{/* 후기 내용 */}
-
+
diff --git a/src/components/Review/CustomSelect.tsx b/src/components/Review/CustomSelect.tsx index 660f3e57..90a9a9eb 100644 --- a/src/components/Review/CustomSelect.tsx +++ b/src/components/Review/CustomSelect.tsx @@ -34,14 +34,14 @@ const CustomSelect = ({ : "#0D99FF" : "white", // 파란색 배경 color: inverted ? "white" : "black", - borderRadius: rounded ? "9999px" : "5px", // Tailwind의 rounded-full - border: inverted ? "none" : "1px solid #E5E7EB", // 테두리 제거 + borderRadius: rounded ? "9999px" : "15px", // Tailwind의 rounded-full + border: inverted ? "none" : "none", // 테두리 제거 display: "flex", alignItems: "center", justifyContent: "center", padding: rounded? "0px" : "6px 3px", minHeight: "40px", - boxShadow: state.isFocused ? "rgba(13, 153, 255)" : "none", + boxShadow: inverted ? "none" : "0px 5px 13.3px rgba(212, 212, 212, 0.59)", minWidth: minWidth ? `${minWidth}px` : "100%", // maxWidth: minWidth ? `${minWidth}rem` : "100%", marginRight: "5px", @@ -52,7 +52,7 @@ const CustomSelect = ({ ...provided, color: inverted ? value.value === "" - ? "black" + ? "#808080" : "white" : value.value === "" ? "#A9ADAE" @@ -65,7 +65,7 @@ const CustomSelect = ({ ...provided, paddingLeft: "0px", paddingRight: "8px", - color: inverted ? (value.value === "" ? "black" : "white") : "black", // 화살표 색상 변경 + color: inverted ? (value.value === "" ? "#808080" : "white") : "#808080", // 화살표 색상 변경 }), menu: (provided: any) => ({ ...provided, diff --git a/src/components/info/rating.tsx b/src/components/info/rating.tsx index dcdedb7d..4dab8cec 100644 --- a/src/components/info/rating.tsx +++ b/src/components/info/rating.tsx @@ -24,8 +24,8 @@ export default function Rating({ score }: { score: number }) { return ( ); diff --git a/src/components/modals/AlertModal.tsx b/src/components/modals/AlertModal.tsx index 28ba57fa..fc7343a3 100644 --- a/src/components/modals/AlertModal.tsx +++ b/src/components/modals/AlertModal.tsx @@ -28,18 +28,18 @@ const AlertModal = ({ onClick={() => onClose(false)} >
e.stopPropagation()} > -
{text}
-
+
{text}
+
-