Fix/3nd qa (#240)

* feat: 작품 둘러보기 - 스테이지/카테고리 쿼리파라미터로 이동하는 방식으로 변경

* feat: 작품 없을 시 문구 추가 및 리팩토링

* refectore: 작품 둘러보기 - 스테이지, 카테고리, 정렬 및 보기방식 포함한 PostHeaderControl컴포넌트 분리

* feat:  작품 둘러보기 - IntersectionObserver api 사용한 인피니트 스크롤 커스텀

* feat: react-intersection-observer 추가

* feat: 좋아한 작품 - 스테이지 변경 쿼리파라미터로 변경

* feat: 좋아한 작품 - 좋아한 작품이 없을 경우 페이지 구현

* feat: 작품 등록하지 - 완료 alert -> toastAlert로 변경

* feat: 작품 관리 상세 - 작품 수정 완료 alert -> toastAlert로 변경

* fix: 작품 관리 상세 - 무대 글자수 제한 30자로 변경

* fix: findUserId 응답 형식 수정

* fix: 아이디/비밀번호 찾기 버튼 이동 페이지 통합

* fix: 비밀번호 변경 후 재 로그인 했을 때 다시 비밀번호 찾기 페이지로 가는 문제 해결

* fix: 신청된 공연 - height: auto 로 변경

* fix: 작품관리 상세 - 공연권 5만원 초과 입력 시 설명 모달 + 빨간 보더 추가

* style: 작품 상세 - 좋아요와 뷰 위치 -> 작가명 하단에 맞추기

* fix: 작품 상세 - 하단 배너 옵션과 페이지 옵션 동기화

* fix: 작품 상세 - 미리보기 단편극일 경우 화살표 삭제

* fix: useWindowDimensions 훅의 해상도 조건 중첩 문제 수정 및 타입 추가

* style: 메인 - 레이아웃 수정

* style: 메인 - mou단체 소개 비어있는 부분 문구 추가

* style: 작품 등록하기 - 레이아웃 수정

* fix: 미로그인 후 좋아요 클릭 시 로그인 페이지로 이동

* fix: 미로그인 시 대본열람 막기

* style: 메인 - 작품등록하기 이미지 변경

* style: 메인 -작품 둘러보기, 공연권 신청하기 이미지 수정

Author: goodsmell

package-lock.json

@@ -22,6 +22,7 @@
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
     "react-dropzone": "^14.2.3",
+    "react-intersection-observer": "^9.16.0",
     "react-pdf": "^5.7.2",
     "react-router-dom": "^6.22.3",
     "react-spinners": "^0.14.1",

package.json

@@ -15,8 +15,6 @@ import SignInV2 from "./pages/auth/SignInV2";
 import FindBar from "./pages/auth/FindBar";
 
 import PostGallery from "./pages/work/postList/PostGallery";
-import PostGalleryShort from "./pages/work/postList/PostGalleryShort";
-import PostGalleryLong from "./pages/work/postList/PostGalleryLong";
 
 import Detail from "./pages/work/Detail.tsx";
 
@@ -40,8 +38,7 @@ import ScriptManageDetail from "./pages/myPage/PostManage/PostManageDetail";
 import AskedPerformManage from "./pages/myPage/AskedPerformManage";
 import AccountInfoChange from "./pages/myPage/AccountInfoChange";
 import LikedWorks from "./pages/myPage/Liked/LikedWorks";
-import LikedLong from "./pages/myPage/Liked/LikedLong";
-import LikedShort from "./pages/myPage/Liked/LikedShort";
+
 import Loading from "./pages/Loading";
 import NotFound from "./pages/NotFound";
 
@@ -84,8 +81,7 @@ function App() {
 
               {/* <Route path="list" element={<List />} /> */}
               <Route path="list" element={<PostGallery />} />
-              <Route path="list/long" element={<PostGalleryLong />} />
-              <Route path="list/short" element={<PostGalleryShort />} />
+
               <Route path="list/detail/:id" element={<Detail />} />
               <Route path="list/view/:id" element={<PostView />} />
               <Route
@@ -110,14 +106,7 @@ function App() {
                   path="mypage/liked"
                   element={<ProtectedRoute element={<LikedWorks />} />}
                 />
-                <Route
-                  path="mypage/liked/long"
-                  element={<ProtectedRoute element={<LikedLong />} />}
-                />
-                <Route
-                  path="mypage/liked/short"
-                  element={<ProtectedRoute element={<LikedShort />} />}
-                />
+
                 <Route
                   path="mypage/purchased"
                   element={<ProtectedRoute element={<PurchasedScript />} />}

src/App.jsx

@@ -31,7 +31,8 @@ export interface ExploreScriptsResponse {
 }
 
 export const fetchExploreScripts = async (
-  accessToken?: string
+  accessToken?: string,
+  sortType: "POPULAR" | "LIKE_COUNT" | "LATEST" = "POPULAR"
 ): Promise<ExploreScriptsResponse> => {
   try {
     const headers: Record<string, string> = {};
@@ -43,6 +44,9 @@ export const fetchExploreScripts = async (
     const response = await api.get<ExploreScriptsResponse>("/scripts", {
       headers,
       withCredentials: true, // 쿠키 인증 시 필요
+      params: {
+        sortType,
+      },
     });
 
     const { longPlay, shortPlay } = response.data;
@@ -58,36 +62,11 @@ export const fetchExploreScripts = async (
   }
 };
 
-export const toggleLikeScript = async (
-  id: string,
-  accessToken?: string
-): Promise<"like" | "cancel like"> => {
-  try {
-    const headers: Record<string, string> = {
-      "Content-Type": "application/json",
-    };
-
-    if (accessToken) {
-      headers["Authorization"] = `Bearer ${accessToken}`;
-    }
-
-    const response = await api.post<{ message: "like" | "cancel like" }>(
-      `/scripts/like/${id}`,
-      null,
-      { headers, withCredentials: true }
-    );
-
-    return response.data.message;
-  } catch (error) {
-    console.error("Error toggleLikeScript:", error);
-    throw new Error(`좋아요 토글 실패: ${(error as Error).message}`);
-  }
-};
-
 // 좋아한 장편 작품 목록 조회
 export const getLongWorks = async (
   page: number = 0,
-  accessToken?: string
+  accessToken?: string,
+  sortType: "POPULAR" | "LIKE_COUNT" | "LATEST" = "POPULAR"
 ): Promise<ScriptItem[]> => {
   try {
     const headers: Record<string, string> = {};
@@ -97,7 +76,7 @@ export const getLongWorks = async (
     }
 
     const response = await api.get<ScriptItem[]>(`/scripts/long`, {
-      params: { page },
+      params: { page, sortType },
       headers,
     });
     console.log(response);
@@ -111,7 +90,8 @@ export const getLongWorks = async (
 // 좋아한 장편 작품 목록 조회
 export const getShortWorks = async (
   page: number = 0,
-  accessToken?: string
+  accessToken?: string,
+  sortType: "POPULAR" | "LIKE_COUNT" | "LATEST" = "POPULAR"
 ): Promise<ScriptItem[]> => {
   try {
     const headers: Record<string, string> = {};
@@ -121,17 +101,43 @@ export const getShortWorks = async (
     }
 
     const response = await api.get<ScriptItem[]>(`/scripts/short`, {
-      params: { page },
+      params: { page, sortType },
       headers,
     });
-
+    console.log(response);
     return response.data;
   } catch (error) {
     console.error("Error fetchin short works:", error);
     throw new Error(`단편 작품 API 호출 실패: ${(error as Error).message}`);
   }
 };
 
+export const toggleLikeScript = async (
+  id: string,
+  accessToken?: string
+): Promise<"like" | "cancel like"> => {
+  try {
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+    };
+
+    if (accessToken) {
+      headers["Authorization"] = `Bearer ${accessToken}`;
+    }
+
+    const response = await api.post<{ message: "like" | "cancel like" }>(
+      `/scripts/like/${id}`,
+      null,
+      { headers, withCredentials: true }
+    );
+
+    return response.data.message;
+  } catch (error) {
+    console.error("Error toggleLikeScript:", error);
+    throw new Error(`좋아요 토글 실패: ${(error as Error).message}`);
+  }
+};
+
 export const getPostView = async (scriptId: string): Promise<Blob> => {
   try {
     const headers: Record<string, string> = {