From dc21bf26b7691fa690e71a5b5eb00d4199b51a9f Mon Sep 17 00:00:00 2001 From: HyunJinNo Date: Mon, 26 Aug 2024 17:43:55 +0900 Subject: [PATCH] =?UTF-8?q?Refactor:=20=EC=A0=95=EB=B3=B4=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20API=20=EC=9E=AC?= =?UTF-8?q?=EC=97=B0=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[childCategoryId] => }/page.tsx | 27 ++++++++----- .../[parentCategoryId]/page.tsx | 39 ------------------- src/components/common/Footer.tsx | 2 +- src/components/common/Header.tsx | 2 +- src/components/common/HeaderSidebar.tsx | 2 +- src/components/home/HomeCarousel.tsx | 2 +- src/components/home/TabList.tsx | 2 +- .../informations/list/CategoryList.tsx | 15 ++----- .../informations/list/ChildCategoryList.tsx | 6 +-- .../informations/list/InformationList.tsx | 29 ++++++++------ .../informations/list/InformationSearch.tsx | 10 +++-- .../informations/list/ParentCategoryList.tsx | 2 +- src/containers/home/ListTemplateContainer.tsx | 12 ++++-- .../InformationDeleteModalContainer.tsx | 2 +- .../list/InformationFilterModalContainer.tsx | 11 ++++-- .../list/InformationSearchContainer.tsx | 4 ++ src/types/InformationDto.ts | 5 ++- 17 files changed, 79 insertions(+), 93 deletions(-) rename src/app/informations/list/{child-category/[childCategoryId] => }/page.tsx (59%) delete mode 100644 src/app/informations/list/parent-category/[parentCategoryId]/page.tsx diff --git a/src/app/informations/list/child-category/[childCategoryId]/page.tsx b/src/app/informations/list/page.tsx similarity index 59% rename from src/app/informations/list/child-category/[childCategoryId]/page.tsx rename to src/app/informations/list/page.tsx index 78c368dd..2e4db059 100644 --- a/src/app/informations/list/child-category/[childCategoryId]/page.tsx +++ b/src/app/informations/list/page.tsx @@ -5,31 +5,38 @@ import InformationListSkeleton from "@/components/skeleton/informations/list/Inf import { Suspense } from "react"; interface Props { - params: { childCategoryId: string }; searchParams: { [key: string]: string | undefined }; } -export default function page({ params, searchParams }: Props) { - const categoryId = Number(params.childCategoryId); - if (categoryId <= 0 || !Number.isSafeInteger(categoryId)) { - throw new Error("Invalid CategoryId"); - } - +export default function page({ searchParams }: Props) { const page = Number(searchParams["page"]); if (page <= 0 || !Number.isSafeInteger(page)) { throw new Error("Invalid Page Number"); } + const parentCategoryId = Number(searchParams["parentCategoryId"]); + if (parentCategoryId <= 0 || !Number.isSafeInteger(parentCategoryId)) { + throw new Error("Invalid ParentCategoryId"); + } + + const childCategoryId = Number(searchParams["childCategoryId"] || 0); + if (childCategoryId < 0 || !Number.isSafeInteger(childCategoryId)) { + throw new Error("Invalid ChildCategoryId"); + } + return (
}> - + }> diff --git a/src/app/informations/list/parent-category/[parentCategoryId]/page.tsx b/src/app/informations/list/parent-category/[parentCategoryId]/page.tsx deleted file mode 100644 index 08bae9ed..00000000 --- a/src/app/informations/list/parent-category/[parentCategoryId]/page.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import CategoryList from "@/components/informations/list/CategoryList"; -import InformationList from "@/components/informations/list/InformationList"; -import CategoryListSkeleton from "@/components/skeleton/informations/list/CategoryListSkeleton"; -import InformationListSkeleton from "@/components/skeleton/informations/list/InformationListSkeleton"; -import { Suspense } from "react"; - -interface Props { - params: { parentCategoryId: string }; - searchParams: { [key: string]: string | undefined }; -} - -export default function page({ params, searchParams }: Props) { - const categoryId = Number(params.parentCategoryId); - if (categoryId <= 0 || !Number.isSafeInteger(categoryId)) { - throw new Error("Invalid CategoryId"); - } - - const page = Number(searchParams["page"]); - if (page <= 0 || !Number.isSafeInteger(page)) { - throw new Error("Invalid Page Number"); - } - - return ( -
- }> - - - }> - - -
- ); -} diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx index a9c4394d..f6e78f15 100644 --- a/src/components/common/Footer.tsx +++ b/src/components/common/Footer.tsx @@ -38,7 +38,7 @@ const Footer = () => {
둘러보기 diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx index 2a4288db..c17fd930 100644 --- a/src/components/common/Header.tsx +++ b/src/components/common/Header.tsx @@ -81,7 +81,7 @@ const Header = ({ : "font-medium text-gray1 dark:text-slate-400" } ` + "text-sm hover:text-main" } - href="/informations/list/parent-category/1?page=1" + href="/informations/list?page=1&parentCategoryId=1" > 정보 diff --git a/src/components/common/HeaderSidebar.tsx b/src/components/common/HeaderSidebar.tsx index c96b15b7..1dda92ac 100644 --- a/src/components/common/HeaderSidebar.tsx +++ b/src/components/common/HeaderSidebar.tsx @@ -55,7 +55,7 @@ const HeaderSidebar = ({ setHoverNum(2)} onMouseLeave={() => setHoverNum(0)} diff --git a/src/components/home/HomeCarousel.tsx b/src/components/home/HomeCarousel.tsx index 1e39b9bf..00b92c8e 100644 --- a/src/components/home/HomeCarousel.tsx +++ b/src/components/home/HomeCarousel.tsx @@ -28,7 +28,7 @@ const HomeCarousel = ({ images, currentIndex, onClick }: Props) => {
둘러보기 diff --git a/src/components/home/TabList.tsx b/src/components/home/TabList.tsx index 4e70ad68..3e7c3d12 100644 --- a/src/components/home/TabList.tsx +++ b/src/components/home/TabList.tsx @@ -6,7 +6,7 @@ const TabList = () => {

diff --git a/src/components/informations/list/CategoryList.tsx b/src/components/informations/list/CategoryList.tsx index 3eb9fc71..9deb4d2c 100644 --- a/src/components/informations/list/CategoryList.tsx +++ b/src/components/informations/list/CategoryList.tsx @@ -17,21 +17,12 @@ async function getCategoryList() { } interface Props { - categoryId: number; + parentCategoryId: number; + childCategoryId: number; } -const CategoryList = async ({ categoryId }: Props) => { +const CategoryList = async ({ parentCategoryId, childCategoryId }: Props) => { const categories = await getCategoryList(); - const parentCategoryId = categories - .map((parentCategory) => parentCategory.id) - .includes(categoryId) - ? categoryId - : categories.find((parentCategory) => - parentCategory.childrenCategories - .map((childCategory) => childCategory.id) - .includes(categoryId), - )!.id; - const childCategoryId = categoryId; return (
diff --git a/src/components/informations/list/ChildCategoryList.tsx b/src/components/informations/list/ChildCategoryList.tsx index 27607466..6b96c634 100644 --- a/src/components/informations/list/ChildCategoryList.tsx +++ b/src/components/informations/list/ChildCategoryList.tsx @@ -17,10 +17,10 @@ const ChildCategoryList = ({
전체 @@ -34,7 +34,7 @@ const ChildCategoryList = ({ `${childCategory.id === childCategoryId ? "border-main bg-main text-white" : "text-gray1 dark:border-slate-400 dark:bg-slate-600 dark:text-slate-400"} ` + "rounded-full border-[0.0625rem] border-[#E9EBED] px-3 py-[0.375rem] text-sm font-medium hover:scale-105" } - href={`/informations/list/child-category/${childCategory.id}?page=1`} + href={`/informations/list?page=1&parentCategoryId=${parentCategoryId}&childCategoryId=${childCategory.id}`} scroll={false} > {childCategory.name} diff --git a/src/components/informations/list/InformationList.tsx b/src/components/informations/list/InformationList.tsx index 2bc7a1f3..f8e38296 100644 --- a/src/components/informations/list/InformationList.tsx +++ b/src/components/informations/list/InformationList.tsx @@ -5,15 +5,22 @@ import { InformationListResponseDto } from "@/types/InformationDto"; import { cookies } from "next/headers"; async function getInformationList( - isParentCategory: boolean, - categoryId: number, page: number, + parentCategoryId: number, + childCategoryId: number, place?: string, order?: string, ) { const cookie = cookies().get("access_token"); + + // TODO + console.log( + `${process.env.BACKEND_URL}/api/informations?page=${page}&parentCategoryId=${parentCategoryId}${childCategoryId > 0 ? `&childCategoryId=${childCategoryId}` : ""}${order !== undefined && order !== "latest" ? `&sort=${order}` : ""}${place !== undefined ? `&zoneCategory=${LOCATION_ID[place]}` : ""}`, + ); + //////// + const response = await fetch( - `${process.env.BACKEND_URL}/api/informations/${isParentCategory ? "parent-category" : "child-category"}/${categoryId}?page=${page}${order !== undefined && order !== "latest" ? `&sort=${order}` : ""}${place !== undefined ? `&zoneCategory=${LOCATION_ID[place]}` : ""}`, + `${process.env.BACKEND_URL}/api/informations?page=${page}&parentCategoryId=${parentCategoryId}${childCategoryId > 0 ? `&childCategoryId=${childCategoryId}` : ""}${order !== undefined && order !== "latest" ? `&sort=${order}` : ""}${place !== undefined ? `&zoneCategory=${LOCATION_ID[place]}` : ""}`, { method: "GET", headers: { @@ -32,24 +39,24 @@ async function getInformationList( } interface Props { - isParentCategory: boolean; - categoryId: number; page: number; + parentCategoryId: number; + childCategoryId: number; place?: string; order?: string; } const InformationList = async ({ - isParentCategory, - categoryId, page, + parentCategoryId, + childCategoryId, place, order, }: Props) => { const data = await getInformationList( - isParentCategory, - categoryId, page - 1, + parentCategoryId, + childCategoryId, place, order, ); @@ -61,7 +68,7 @@ const InformationList = async ({
); diff --git a/src/components/informations/list/InformationSearch.tsx b/src/components/informations/list/InformationSearch.tsx index 760b0fcc..8ba50743 100644 --- a/src/components/informations/list/InformationSearch.tsx +++ b/src/components/informations/list/InformationSearch.tsx @@ -5,6 +5,8 @@ import Link from "next/link"; interface Props { pathname: string; + parentCategoryId: string; + childCategoryId: string | null; place: string; order: string; modalVisible: boolean; @@ -16,6 +18,8 @@ interface Props { const InformationSearch = ({ pathname, + parentCategoryId, + childCategoryId, place, order, modalVisible, @@ -60,21 +64,21 @@ const InformationSearch = ({ > 최신순 좋아요순 조회순 diff --git a/src/components/informations/list/ParentCategoryList.tsx b/src/components/informations/list/ParentCategoryList.tsx index 718c4559..37b1c50f 100644 --- a/src/components/informations/list/ParentCategoryList.tsx +++ b/src/components/informations/list/ParentCategoryList.tsx @@ -21,7 +21,7 @@ const ParentCategoryList = ({ categories, parentCategoryId }: Props) => { : "text-gray1 dark:text-slate-400" } ` + "pb-[0.375rem] hover:text-main" } - href={`/informations/list/parent-category/${category.id}?page=1`} + href={`/informations/list?page=1&parentCategoryId=${category.id}`} scroll={false} > {category.name} diff --git a/src/containers/home/ListTemplateContainer.tsx b/src/containers/home/ListTemplateContainer.tsx index 02939e22..ec0c7886 100644 --- a/src/containers/home/ListTemplateContainer.tsx +++ b/src/containers/home/ListTemplateContainer.tsx @@ -10,13 +10,17 @@ type MyProps = { category: "정보" | "모임"; }; -const ListTemplateContainer = ({ titles, description, children, category }: MyProps) => { +const ListTemplateContainer = ({ + titles, + description, + children, + category, +}: MyProps) => { const scrollHook = useDragScroll(); const path = { - "정보": "/informations/list/parent-category/1?page=1", - "모임": "/gathering" + 정보: "/informations/list?page=1&parentCategoryId=1", + 모임: "/gathering", }; - return ( { const searchParams = useSearchParams(); + const parentCategoryId = searchParams.get("parentCategoryId"); + const childCategoryId = searchParams.get("childCategoryId"); const [place, setPlace] = useState(searchParams.get("place") ?? ""); const order = searchParams.get("order") ?? "latest"; const router = useRouter(); const pathname = usePathname(); const onClick = () => { - router.push(`${pathname}?page=1&place=${place}&order=${order}`, { - scroll: false, - }); + router.push( + `${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}&place=${place}&order=${order}`, + { + scroll: false, + }, + ); closeModal(); }; diff --git a/src/containers/informations/list/InformationSearchContainer.tsx b/src/containers/informations/list/InformationSearchContainer.tsx index e9670491..e8acae8d 100644 --- a/src/containers/informations/list/InformationSearchContainer.tsx +++ b/src/containers/informations/list/InformationSearchContainer.tsx @@ -9,12 +9,16 @@ const InformationSearchContainer = () => { const [dropdownVisible, setDropdownVisible] = useState(false); const pathname = usePathname(); const searchParams = useSearchParams(); + const parentCategoryId = searchParams.get("parentCategoryId")!; + const childCategoryId = searchParams.get("childCategoryId"); const place = searchParams.get("place") ?? ""; const order = searchParams.get("order") ?? "latest"; return ( ; + page: { + totalPages: number; + }; } /**