Redesign/수강후기작성

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<string>("");
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [isOnSubmit, setisOnSubmit] = useState<boolean>(false);
 
   const { data } = useContext(ReviewContext);
 
+  const ratingRef = useRef<HTMLDivElement | null>(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 = () => {
             <p className="text-XLm mt-[24px]">
               전반적인 수업 경험은 어땠나요?
             </p>
-            {/* 수업 후기 점수 평가  */}
+
+            <p className="text-sr mt-[3px] mb-[22px] text-[#808080]">
+              별점을 눌러 평가해주세요.
+            </p>
+
+            {/* 수업 후기 점수 평가(기존)  
             <div className="w-full mt-[12px]">
-              {/* 1-5점  해당 바를 눌러 점수를 정할 수 있도록 기능 구현 필요*/}
+              {/* 1-5점  해당 바를 눌러 점수를 정할 수 있도록 기능 구현 필요
               <div className="text-XLm flex items-center mb-[12px] gap-[16px]">
                 <div className="flex">
                   <span className="text-[#0D99FF] text-right">{`${
@@ -193,35 +205,55 @@ const WriteReview = () => {
                 clickFn={setRating}
                 className="mt-1"
               />
-              <p className="text-sr mt-[12px] mb-[24px] text-[#808080]">
-                위 그래프를 눌러 조절해주세요
-              </p>
+            </div>
+            */}
+            {/* 수업 후기 점수 평가(리디자인) */}
+            <div className="flex w-full justify-center items-center">
+              <div 
+                className="flex w-fit justify-center items-center"
+                ref={ratingRef}
+                onClick={(e) => {
+                  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)));
+                }}>
+                <Rating score={rating} />
+              </div>
             </div>
             {/* 후기 입력 공간 */}
-            <div className="mt-3">
+            <div className="mt-[43px]">
               {/* 후기 내용 */}
               <textarea
-                className="border-[1px] focus:border-[#0D99FF] focus:outline-none focus:ring-1 focus:ring-[#0D99FF] border-gray-200 text-Mr rounded-md px-[16px] py-[12px] sm:mt-5 w-full h-[20vh] sm:h-[30vh] resize-none"
+                className="border-[0px] focus:border-[#0D99FF] focus:outline-none  focus:ring-[#0D99FF] border-gray-200 text-Mr rounded-[15px] px-[23px] py-[22px] sm:mt-5 w-full h-[20vh] sm:h-[30vh] resize-none shadow-[0px_5px_13.3px_4px_rgba(212,212,212,0.59)]"
                 placeholder="상세한 후기를 작성해주세요"
                 onChange={(e) => setReviewContents(e.target.value)}
                 value={reviewContents}
               ></textarea>
             </div>
-            <div className="w-full flex justify-end sm:mt-3">
+            <div className="w-full flex shrink-0 justify-end mt-[29px]">
               <button
-                className="bg-[#0D99FF] text-white text-Mm rounded-full px-[16px] py-[8px] mt-[6px] hover:bg-[#51b4fa]"
+                className="flex items-center gap-[6px] bg-[#0D99FF] text-white text-sm rounded-full px-[16px] py-[6px] mt-[6px] hover:bg-[#51b4fa]"
                 onClick={() => {
                   // setReviewContents('강의와 교재는? : \n과제는? : \n시험은? : \n조별 과제는? : \n\n\n나만의 꿀팁 : ');
                   setIsModalOpen(true);
                 }}
               >
-                템플릿 사용하기
+                <img src="/icons/useTemp.png" width="15" /> 템플릿 사용하기
               </button>
             </div>
           </div>
           <button
-            className="mt-[48px] h-[50px] bg-[#0D99FF] text-white rounded-md text-XLm"
-            onClick={() => onSummitReview()}
+            className={(department.value === "" || isOnSubmit) ? `mt-[53px] h-[50px] bg-[#EBF0F7] text-[#808080] rounded-md text-XLm`
+              :`mt-[53px] h-[50px] bg-[#0D99FF] text-white rounded-md text-XLm`}
+            onClick={() => !isOnSubmit && onSummitReview()}
           >
             후기 작성하기
           </button>

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,

src/components/info/rating.tsx

@@ -24,8 +24,8 @@ export default function Rating({ score }: { score: number }) {
         return (
           <StarIcon
             key={i}
-            width={16}
-            height={16}
+            width={36}
+            height={34}
             className="text-yellow-500"
           />
         );

src/components/modals/AlertModal.tsx

@@ -28,18 +28,18 @@ const AlertModal = ({
           onClick={() => onClose(false)}
       >
         <div
-            className="w-[20rem] h-[15rem] bg-white rounded-2xl px-7"
+            className="bg-white rounded-2xl px-[24px] pb-[24px]"
             onClick={(e) => e.stopPropagation()}
         >
-          <div className="w-full mt-10 text-lg whitespace-pre-wrap">{text}</div>
-          <div className="mt-9 flex flex-col">
+          <div className="w-full mt-[18px] text-Mm text-center whitespace-pre-wrap">{text}</div>
+          <div className="mt-[13px] flex flex-col gap-[9px] w-[253px]">
             <button
                 className="bg-[#0D99FF] rounded-lg h-10 text-white hover:bg-[#51b4fa]"
                 onClick={() => onConfirm(templateText, modalStateSetter, onClose)}
             >
               확인
             </button>
-            <button className="rounded-lg h-10" onClick={() => onClose(false)}>
+            <button className="rounded-lg h-10 bg-[#EBF0F7]" onClick={() => onClose(false)}>
               취소
             </button>
           </div>