+
+
+
+
+
+ {portfolio.title}
-
-
- {portfolio.comments}
+
+ {portfolio.writer.name}
+ {portfolio.contributorList.length > 0
+ ? `외 ${portfolio.contributorList.length} 명`
+ : ""}
+
+
+
+
+
+
+
+ {portfolio.bookmarks}
+
+
+
+ {portfolio.comments}
diff --git a/components/main/MainPortfolioList.tsx b/components/main/MainPortfolioList.tsx
index df2ce5ef..08cfb1bf 100644
--- a/components/main/MainPortfolioList.tsx
+++ b/components/main/MainPortfolioList.tsx
@@ -6,23 +6,27 @@ import { useEffect } from "react";
import { useInView } from "react-intersection-observer";
import Loading from "../common/Loading";
+interface MainPortfolioListProps {
+ pages: PortfolioList[] | { list: never[] }[];
+ customHasNextPage: boolean;
+ fetchNextPage: FetchNextPageType;
+ isFetchingNextPage: boolean;
+}
+
export default function MainPortfolioList({
pages,
- hasNextPage,
+ customHasNextPage,
fetchNextPage,
isFetchingNextPage,
-}: {
- pages: PortfolioList[] | { list: never[] }[];
- hasNextPage: boolean;
- fetchNextPage: FetchNextPageType;
- isFetchingNextPage: boolean;
-}) {
+}: MainPortfolioListProps) {
const router = useRouter();
const [ref, inView] = useInView();
useEffect(() => {
- if (inView && hasNextPage) fetchNextPage();
- }, [inView, fetchNextPage, hasNextPage]);
+ if (inView && customHasNextPage) {
+ fetchNextPage();
+ }
+ }, [inView, fetchNextPage, customHasNextPage]);
return (
<>
@@ -43,7 +47,7 @@ export default function MainPortfolioList({
className="mt-8 mx-auto"
width={60}
height={60}
- color="#FAAF3D"
+ color="#FFCA31"
/>
)}
diff --git a/components/portfolio/PortfolioList.tsx b/components/portfolio/PortfolioList.tsx
index 25d20b19..31f634bb 100644
--- a/components/portfolio/PortfolioList.tsx
+++ b/components/portfolio/PortfolioList.tsx
@@ -24,14 +24,14 @@ export default function PortfolioList({
return filter;
};
- const { pages, fetchNextPage, hasNextPage, isFetchingNextPage } =
+ const { pages, fetchNextPage, customHasNextPage, isFetchingNextPage } =
usePortfolioList({ size: 12 }, { search: keyword, ...filterSortType() });
const { ref, inView } = useInView();
useEffect(() => {
- if (inView && hasNextPage) fetchNextPage();
- }, [inView, hasNextPage, fetchNextPage]);
+ if (inView && customHasNextPage) fetchNextPage();
+ }, [inView, customHasNextPage, fetchNextPage]);
return (
@@ -49,7 +49,7 @@ export default function PortfolioList({
검색결과가 없습니다.
)}
- {isFetchingNextPage && hasNextPage && (
+ {isFetchingNextPage && customHasNextPage && (
)}
diff --git a/components/profile/Detail.tsx b/components/profile/Detail.tsx
deleted file mode 100644
index 5e8741f3..00000000
--- a/components/profile/Detail.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import fixture from "@/fixtures";
-import ProfilePortfolioList from "./ProfilePortfolioList";
-import ProfileDescription from "./ProfileDescription";
-
-export default function ProfileDetail() {
- return (
-
- );
-}
diff --git a/components/profile/ProfileDescription.tsx b/components/profile/ProfileDetail.tsx
similarity index 100%
rename from components/profile/ProfileDescription.tsx
rename to components/profile/ProfileDetail.tsx
diff --git a/e2e/tests/portfolio.spec.ts b/e2e/tests/portfolio.spec.ts
index 6b87367e..5d8ee2df 100644
--- a/e2e/tests/portfolio.spec.ts
+++ b/e2e/tests/portfolio.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { test } from "@playwright/test";
test("portfolio should render", async ({ page }) => {
await page.goto("http://localhost:3000/portfolio/1");
diff --git a/models/portfolio/index.ts b/models/portfolio/index.ts
index a8c9cb9b..b51bf100 100644
--- a/models/portfolio/index.ts
+++ b/models/portfolio/index.ts
@@ -1,7 +1,7 @@
import httpClient from "@/apis";
import fixture from "@/fixtures";
import {
- Comment,
+ CommentList,
Filter,
PaginationRequest,
Portfolio,
@@ -10,12 +10,8 @@ import {
import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
import KEY from "../key";
-interface CommentList {
- list: Comment[];
-}
-
const usePortfolioList = (pagination: PaginationRequest, filter?: Filter) => {
- const { data, isFetchingNextPage, fetchNextPage, hasNextPage } =
+ const { data, isFetchingNextPage, fetchNextPage } =
useInfiniteQuery
(
[KEY.PORTFOLIO_LIST, filter],
({ pageParam = 0 }) =>
@@ -30,10 +26,14 @@ const usePortfolioList = (pagination: PaginationRequest, filter?: Filter) => {
},
);
+ const customHasNextPage =
+ (data?.pageParams[data.pageParams.length - 1] || 1) <
+ (data?.pages[0].pagination.totalPages || 0);
+
return {
- pages: data?.pages ?? [{ list: [] }],
+ pages: data?.pages || [{ list: [] }],
isFetchingNextPage,
- hasNextPage,
+ customHasNextPage,
fetchNextPage,
};
};
diff --git a/pages/index.tsx b/pages/index.tsx
index 00b48d9d..2dfa66b9 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -8,7 +8,7 @@ import { SortType } from "@/types/portfolio.interface";
export default function Home() {
const [keyword, setKeyword] = useState("ALL");
- const { pages, isFetchingNextPage, fetchNextPage, hasNextPage } =
+ const { pages, isFetchingNextPage, fetchNextPage, customHasNextPage } =
usePortfolioList(
{ size: 12 },
keyword !== "ALL" ? { sortType: keyword } : {},
@@ -19,7 +19,7 @@ export default function Home() {
app={
diff --git a/pages/portfolio/[portfolioId]/index.tsx b/pages/portfolio/[portfolioId]/index.tsx
index 1765c354..d12ba392 100644
--- a/pages/portfolio/[portfolioId]/index.tsx
+++ b/pages/portfolio/[portfolioId]/index.tsx
@@ -28,6 +28,8 @@ export default function PortfolioIdPage({ portfolio }: PortfolioIdPageProps) {
data: { bookmarkYn, followYn, bookmarks, views },
} = usePortfolio(dateParsedPortfolio.portfolioId);
const { user: userInfo } = useUser();
+ const isMyPortfolio =
+ userInfo.memberId === dateParsedPortfolio.writer.memberId;
useEffect(() => {
if (typeof window !== "undefined") {
@@ -78,9 +80,7 @@ export default function PortfolioIdPage({ portfolio }: PortfolioIdPageProps) {
followYn={followYn}
bookmarks={bookmarks}
views={views}
- isMyPortfolio={
- userInfo.memberId === dateParsedPortfolio.writer.memberId
- }
+ isMyPortfolio={isMyPortfolio}
/>
}
comment={
diff --git a/types/portfolio.interface.ts b/types/portfolio.interface.ts
index bbc5ff26..b0c15c8a 100644
--- a/types/portfolio.interface.ts
+++ b/types/portfolio.interface.ts
@@ -111,6 +111,10 @@ export interface Comment {
createdDate: Date;
editable: boolean;
}
+
+export interface CommentList {
+ list: Comment[];
+}
export interface Description {
children: string;
}