Feat: 공유 페이지 생성

Feat: 공유 페이지 생성

Author: mungyun

components/Link/LinkCard.tsx

@@ -31,7 +31,7 @@ const LinkCard = ({ info }: LinkCardProps) => {
   const createdTime = timeAgo(info.createdAt);
 
   const router = useRouter();
-  const isFavoritePage = router.pathname === "/favorite";
+  const onlyLinkPage = router.pathname === "/link";
   const dropdownRef = useRef<HTMLDivElement | null>(null);
 
   // 모달이 열릴 때 드롭다운 닫기
@@ -98,7 +98,7 @@ const LinkCard = ({ info }: LinkCardProps) => {
           fill
         />
         {/* 즐겨찾기 페이지가 아닐 때에는 즐겨찾기 버튼 렌더링x */}
-        {!isFavoritePage && (
+        {onlyLinkPage && (
           <div
             onClick={handleFavoriteToggle}
             className="absolute top-[15px] right-[15px] z-1"
@@ -121,7 +121,7 @@ const LinkCard = ({ info }: LinkCardProps) => {
             {createdTime || "1일 전"}
           </span>
           {/* isFavoritePage일 때만 케밥 버튼 렌더링 */}
-          {!isFavoritePage && (
+          {onlyLinkPage && (
             <div className="relative" ref={dropdownRef}>
               <button
                 className="relative w-[21px] h-[17px]"

lib/api/link.ts

@@ -14,14 +14,18 @@ interface putLinkFavoriteProps {
 }
 
 // 폴더에 속한 링크 조회
-export const getLink = async (query: any, forderId: number) => {
-  let queryString;
-  query ? (queryString = `?page=${query.page}&pageSize=${query.pageSize}`) : "";
-
+export const getLink = async (
+  query: any,
+  forderId: string | string[] | undefined
+) => {
   try {
-    const res = await axiosInstance.get(
-      `/folders/${forderId}/links${queryString}`
-    );
+    const res = await axiosInstance.get(`/folders/${forderId}/links`, {
+      params: {
+        page: query.page || 1,
+        pageSize: query.pageSize || 10,
+      },
+    });
+
     if (res.status >= 200 && res.status < 300) return res.data;
   } catch (err) {
     console.error("에러 메시지: ", err instanceof Error ? err.message : err);

pages/share/[folderId].tsx

@@ -0,0 +1,62 @@
+import { GetServerSidePropsContext } from "next";
+import { LinkData } from "@/types/linkTypes";
+import { getFolder } from "@/lib/api/folder";
+import { getLink } from "../../lib/api/link";
+import CardsLayout from "@/components/Layout/CardsLayout";
+import Container from "@/components/Layout/Container";
+import LinkCard from "@/components/Link/LinkCard";
+import Pagination from "@/components/Pagination";
+
+interface SharePageprops {
+  folderName: string;
+  linkList: LinkData[];
+  totalCount: number;
+}
+
+export const getServerSideProps = async (
+  context: GetServerSidePropsContext
+) => {
+  const { page, pageSize } = context.query;
+  const { folderId } = context.params!;
+
+  const folderListData = await getLink(
+    { page: page, pageSize: pageSize },
+    folderId
+  );
+
+  const folderNameData = await getFolder(folderId);
+
+  return {
+    props: {
+      folderName: folderNameData.name,
+      linkList: folderListData.list,
+      totalCount: folderListData.totalCount,
+    },
+  };
+};
+
+const SharePage = ({ folderName, linkList, totalCount }: SharePageprops) => {
+  return (
+    <>
+      <div className="flex justify-center items-center sm:h-[117px] h-[219px] sm:mb-5 mb-10 bg-gray100 text-center">
+        <h2 className="text-[32px] md:text-[40px] font-semibold">
+          {folderName}
+        </h2>
+      </div>
+      <Container>
+        {linkList.length > 0 && (
+          <>
+            <CardsLayout>
+              {linkList.length > 0
+                ? linkList.map((link) => <LinkCard key={link.id} info={link} />)
+                : null}
+            </CardsLayout>
+            <Pagination totalCount={totalCount} />
+          </>
+        )}
+      </Container>
+    </>
+  );
+};
+
+export default SharePage;

util/shareSNS.ts

@@ -14,8 +14,8 @@ export const handleShareKakao = () => {
         description: "나에게 필요한 링크만 모아 두었어요!",
         imageUrl: "https://linkbrary-9-99.vercel.app/images/home_main.png", //배포 후 실제 도메인으로 변경 필요
         link: {
-          mobileWebUrl: location.href,
-          webUrl: location.href,
+          mobileWebUrl: location.href.replace("link?", "share?"),
+          webUrl: location.href.replace("link?", "share?"),
         },
       },
     });