Merge pull request #277 from Podo-Store/feat/script-review

feat: sprint-32 개발

Author: game240

src/components/detail/PreviewDiv.jsx

@@ -68,6 +68,7 @@ const PreviewDiv = ({
                     setSelectedPage(selectedPage - 1);
                   }
                 }}
+                style={selectedPage === 1 ? { opacity: "0" } : null}
               />
             )}
 
@@ -111,6 +112,7 @@ const PreviewDiv = ({
                     setSelectedPage(selectedPage + 1);
                   }
                 }}
+                style={selectedPage === showThreshold ? { opacity: "0" } : null}
               />
             )}
           </div>

src/components/detail/ReviewList.tsx

@@ -206,7 +206,7 @@ const ReviewList = React.memo(({ scriptId, review }: ReviewLitProps) => {
           </button>
         )}
 
-        <div className="flex items-center gap-[5px]">
+        <div className="flex justify-end items-center gap-[5px] w-full">
           <button
             onClick={() => handleLike()}
             disabled={loading}

src/components/detail/ReviewSummary.tsx

@@ -220,19 +220,23 @@ const ReviewSummary: React.FC<ReviewSummaryProps> = ({ stats }) => {
       <div className="absolute left-1/2 -translate-x-1/2 mt-[-10px] w-[1px] h-[267px] bg-[#9E9E9E]"></div>
 
       <div className="flex flex-col items-center w-1/2">
-        <h3 className="p-medium-regular mb-[48px]">
-          이 작품은 특히{" "}
-          <span className="relative p-medium-bold">
-            {
-              featureDataWithFull.find(
-                (d) =>
-                  d.value ===
-                  Math.max(...featureDataWithFull.map((d) => d.value))
-              )?.name
-            }
-            <div className="absolute right-[0px] my-[0px] w-full h-[1px] bg-[#6A39C0]" />
-          </span>
-        </h3>
+        {totalReviewCount > 0 ? (
+          <h3 className="p-medium-regular mb-[48px]">
+            이 작품은 특히&nbsp;&nbsp;
+            <span className="relative p-medium-bold">
+              {
+                featureDataWithFull.find(
+                  (d) =>
+                    d.value ===
+                    Math.max(...featureDataWithFull.map((d) => d.value))
+                )?.name
+              }
+              <div className="absolute right-[0px] my-[0px] w-full h-[1px] bg-[#6A39C0]" />
+            </span>
+          </h3>
+        ) : (
+          <h3 className="p-medium-regular mb-[48px]">등록된 후기가 없어요.</h3>
+        )}
         <ResponsiveContainer width={339} height={200}>
           <BarChart
             data={featureDataWithFull}

src/pages/myPage/AccountInfoChange/ChangeEnter.jsx

@@ -57,7 +57,6 @@ const AccountInfoChangeEnter = ({ setChangeShowPermission }) => {
         <h6>회원 정보 수정을 위해서 비밀번호를 다시 한 번 입력해주세요.</h6>
         <div className="a-items-start" id="enter-input">
           <AuthPwInputField
-            type="password"
             placeholder="비밀번호를 입력해주세요."
             value={typedPassword}
             onChange={(event) => {

src/pages/myPage/AccountInfoChange/ChangeMain.jsx

@@ -2,7 +2,10 @@ import axios from "axios";
 import Cookies from "js-cookie";
 import { useEffect, useState } from "react";
 
-import { AuthInputField, AuthPwInputField } from "../../../components/inputField";
+import {
+  AuthInputField,
+  AuthPwInputField,
+} from "../../../components/inputField";
 import EnterForm from "../../../components/EnterForm";
 import PartialLoading from "../../../components/loading/PartialLoading";
 import SmallOnOffBtn from "../../../components/button/RoundBtn_135_40";
@@ -137,8 +140,8 @@ const AccountInfoChangeMain = ({ setIsDeleteAccountBtnClicked }) => {
   };
 
   const onChangeDisableCondition = () => {
-    // 모든 필드가 공란일 경우
-    if (!pw && !pwCheck && !name) {
+    // 비밀번호 필드들이 공란일 경우 disabled
+    if (!pw && !pwCheck) {
       return true;
     }
 

src/pages/work/Detail.tsx

@@ -82,6 +82,7 @@ export interface PostDetail {
 
 const Detail = () => {
   const [script, setScript] = useState<PostDetail>();
+  const [description, setDescription] = useState<string>("");
   const [bottomBarStyle, setBottomBarStyle] = useState<React.CSSProperties>({
     position: "fixed",
     display: "none", // bottom bar 비활성화
@@ -124,18 +125,17 @@ const Detail = () => {
       setReviews([]);
       setReviewPage(0);
 
+      const headers: Record<string, string> = {
+        "Content-Type": "application/json",
+      };
+
+      const token = Cookies.get("accessToken");
+      if (token) {
+        headers["Authorization"] = `Bearer ${token}`;
+      }
       try {
         setIsLoading(true);
 
-        const headers: Record<string, string> = {
-          "Content-Type": "application/json",
-        };
-
-        const token = Cookies.get("accessToken");
-        if (token) {
-          headers["Authorization"] = `Bearer ${token}`;
-        }
-
         const response = await axios.get(`${SERVER_URL}scripts/detail`, {
           headers: headers,
           params: {
@@ -156,7 +156,6 @@ const Detail = () => {
           performancePrice: response.data.performancePrice ?? 0,
           playType: response.data.playType,
           imagePath: response.data.imagePath,
-          descriptionPath: response.data.descriptionPath,
           buyStatus: response.data.buyStatus,
           like: response.data.like,
           likeCount: response.data.likeCount,
@@ -187,6 +186,19 @@ const Detail = () => {
         console.error("❌ 서버 응답:", errMsg);
       }
       setIsLoading(false);
+
+      const { data: description } = await axios.get(
+        `${SERVER_URL}scripts/description`,
+        {
+          headers: headers,
+          params: {
+            script: id,
+          },
+          responseType: "blob",
+        }
+      );
+
+      setDescription(URL.createObjectURL(description));
     };
 
     getDetail();
@@ -386,6 +398,29 @@ const Detail = () => {
     return count;
   };
 
+  const renderReviewWriteButton = () => {
+    return (
+      <button
+        className="p-large-medium flex justify-end items-center gap-[10px] cursor-pointer hover:text-[#6A39C0]"
+        onClick={() => {
+          if (script?.isReviewWritten) {
+            alert("이미 작성된 후기가 있습니다.");
+            return;
+          }
+          if (!isAuthenticated) {
+            alert("로그인이 필요한 서비스입니다.");
+            navigate("/signin");
+            return;
+          }
+
+          navigate(`/list/review/${id}`);
+        }}
+      >
+        후기 작성하기 <img src={rightArrow} alt=">"></img>
+      </button>
+    );
+  };
+
   return (
     <div className=" detail f-dir-column a-items-center">
       <FloatingBtn style={{ bottom: "100px" }} />
@@ -732,9 +767,9 @@ const Detail = () => {
 
           <div className=" j-content-center">
             {/* PDF 삽입 */}
-            {script?.descriptionPath ? (
+            {description ? (
               <Document
-                file={script.descriptionPath}
+                file={description}
                 onLoadSuccess={onDocumentLoadSuccess}
                 loading={<PartialLoading />}
               >
@@ -761,20 +796,7 @@ const Detail = () => {
               )
             </p>
             <div className="flex justify-end w-full">
-              <button
-                className="p-large-medium flex justify-end items-center gap-[10px] cursor-pointer hover:text-[#6A39C0]"
-                onClick={() => {
-                  if (!isAuthenticated) {
-                    alert("로그인이 필요한 서비스입니다.");
-                    navigate("/signin");
-                    return;
-                  }
-
-                  navigate(`/list/review/${id}`);
-                }}
-              >
-                후기 작성하기 <img src={rightArrow} alt=">"></img>
-              </button>
+              {renderReviewWriteButton()}
             </div>
           </section>
           <ReviewSummary stats={script?.reviewStatistics!} />
@@ -829,27 +851,42 @@ const Detail = () => {
               )}
             </div>
 
-            {reviews.map((review) => (
-              <ReviewList
-                key={review.id}
-                scriptId={script?.id!}
-                review={review}
-              />
-            ))}
+            {reviews.length > 0 ? (
+              reviews.map((review) => (
+                <ReviewList
+                  key={review.id}
+                  scriptId={script?.id!}
+                  review={review}
+                />
+              ))
+            ) : (
+              <div className="flex flex-col w-full">
+                <hr className="m-[0px] mb-[74px] w-full bg-[#9E9E9E]" />
+                <p className="p-large-bold text-center">
+                  작품의 후기를 남겨주세요.
+                </p>
+                <div className="mt-[25px] flex justify-center w-full">
+                  {renderReviewWriteButton()}
+                </div>
+              </div>
+            )}
           </section>
         </section>
 
-        <ReviewPagination
-          currentPage={reviewPage + 1}
-          totalPages={
-            Math.ceil((script?.reviewStatistics?.totalReviewCount ?? 5) / 5) ??
-            1
-          }
-          onPageChange={(page) => {
-            // 0 base로 parsing 필요
-            setReviewPage(page - 1);
-          }}
-        />
+        {reviews.length > 0 && (
+          <ReviewPagination
+            currentPage={reviewPage + 1}
+            totalPages={
+              Math.ceil(
+                (script?.reviewStatistics?.totalReviewCount ?? 5) / 5
+              ) ?? 1
+            }
+            onPageChange={(page) => {
+              // 0 base로 parsing 필요
+              setReviewPage(page - 1);
+            }}
+          />
+        )}
       </div>
 
       {!isDetailBtnVisible && (