fix: 작품 상세 페이지 버그들 수정 (#322)

* fix: 미리보기 같은 페이지 연속 두개 나오던 버그 수정

* fix: 단편극일 경우 화살표 버튼이 안 보이는 버그 수정

* fix: ReviewSummary 별 2개, 4개 안보이던 버그 수정

Author: game240

src/components/detail/ReviewSummary.tsx

@@ -199,6 +199,8 @@ const ReviewSummary: React.FC<ReviewSummaryProps> = ({ stats }) => {
               dataKey="name"
               type="category"
               width={100}
+              interval={0}
+              tickMargin={6}
               tick={(props) => <StarAxisTick {...props} />}
               axisLine={false}
               tickLine={false}

src/components/detail/preview/Preview.jsx

@@ -40,7 +40,7 @@ const Preview = ({ id, lengthType }) => {
   const { width } = useWindowDimensions();
   const { isSmallMobile } = useWindowDimensions().widthConditions;
 
-  // 단편극: 1장까지만, 장편극: 3장까지만
+  // 단편극: 2장까지만, 장편극: 4장까지만
   const showThreshold = lengthType === "SHORT" ? 2 : 4;
 
   // for Responsive design
@@ -142,6 +142,7 @@ const Preview = ({ id, lengthType }) => {
                       // showThreshold까지의 모든 페이지 활성화
                       isPageAvailable = index + 1 <= showThreshold;
                     } else {
+                      // lengthType === "LONG"
                       if (width >= 1280) {
                         isPageAvailable = index + 1 <= showThreshold;
                       } else if (!isSmallMobile) {
@@ -160,7 +161,11 @@ const Preview = ({ id, lengthType }) => {
                         id="thumbnail-content"
                         onClick={() => {
                           if (isPageAvailable) {
-                            onClickPage(isShort ? showThreshold : index + 1);
+                            onClickPage(
+                              isShort
+                                ? Math.min(index + 1, showThreshold)
+                                : index + 1
+                            );
                           }
                         }}
                       >
@@ -169,11 +174,7 @@ const Preview = ({ id, lengthType }) => {
                           <Page
                             renderMode="canvas"
                             pageNumber={
-                              isShort
-                                ? showThreshold
-                                : isPageAvailable
-                                ? index + 1
-                                : showThreshold
+                              isPageAvailable ? index + 1 : showThreshold
                             }
                             width={210}
                           />

src/components/detail/preview/PreviewDiv.jsx

@@ -58,19 +58,17 @@ const PreviewDiv = ({
             id="page"
             onClick={(e) => e.stopPropagation()}
           >
-            {lengthType === "LONG" && (
-              <img
-                src={inequalityLeft}
-                alt="left-btn"
-                className=" c-pointer"
-                onClick={() => {
-                  if (selectedPage > 1) {
-                    setSelectedPage(selectedPage - 1);
-                  }
-                }}
-                style={selectedPage === 1 ? { opacity: "0" } : null}
-              />
-            )}
+            <img
+              src={inequalityLeft}
+              alt="left-btn"
+              className=" c-pointer"
+              onClick={() => {
+                if (selectedPage > 1) {
+                  setSelectedPage(selectedPage - 1);
+                }
+              }}
+              style={selectedPage === 1 ? { opacity: "0" } : null}
+            />
 
             <div className=" p-relative" id="preview-page">
               <Page
@@ -102,19 +100,17 @@ const PreviewDiv = ({
                 </div>
               ) : null}
             </div>
-            {lengthType === "LONG" && (
-              <img
-                src={inequalityRight}
-                alt="right-btn"
-                className="c-pointer"
-                onClick={() => {
-                  if (selectedPage < showThreshold) {
-                    setSelectedPage(selectedPage + 1);
-                  }
-                }}
-                style={selectedPage === showThreshold ? { opacity: "0" } : null}
-              />
-            )}
+            <img
+              src={inequalityRight}
+              alt="right-btn"
+              className="c-pointer"
+              onClick={() => {
+                if (selectedPage < showThreshold) {
+                  setSelectedPage(selectedPage + 1);
+                }
+              }}
+              style={selectedPage === showThreshold ? { opacity: "0" } : null}
+            />
           </div>
         </div>
       </div>