feat: prefetch & ssr pages (#310-prefetch) (#312)

Author: createhb21

packages/utils/src/object.ts

@@ -37,3 +37,17 @@ export const objectToQueryString = (params: ObjectQueryParams): string => {
     .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
     .join('&');
 };
+
+export const queryStringToObject = (queryString: string): Record<string, string> => {
+  const query = queryString.startsWith('?') ? queryString.slice(1) : queryString;
+
+  if (!query) return {};
+
+  return query.split('&').reduce((params: Record<string, string>, param) => {
+    const [key, value] = param.split('=').map(decodeURIComponent);
+    if (key) {
+      params[key] = value || '';
+    }
+    return params;
+  }, {});
+};

services/one-app/next.config.ts

@@ -5,9 +5,30 @@ const nextConfig = {
       bodySizeLimit: '10mb',
     },
     turbo: {
-      rules: {},
+      rules: {
+        '*.svg': {
+          loaders: ['@svgr/webpack'],
+          as: '*.js',
+        },
+      },
     },
   },
+  webpack(config: any) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            svgo: true,
+            typescript: true,
+          },
+        },
+      ],
+    });
+
+    return config;
+  },
 };
 
 export default nextConfig;

services/one-app/src/app/(main-service)/community/[id]/_components/CommunityDetail.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+
+import { formatDateTime } from '@ahhachul/utils';
+
+import { ReadonlyEditor } from '@/component/Editor';
+// import { SUBWAY_LOGO_SVG_LIST } from '@/component';
+import { TIMESTAMP } from '@/constant';
+import { cn, isLexicalContent } from '@/util';
+
+import { CommunityTypeBadge } from './CommunityTypeBadge';
+
+import { getCommunityDetailPost } from '../_lib/getDetailPost';
+
+type Props = {
+  id: number;
+};
+
+export default function CommunityPostDetail({ id }: Props) {
+  const { data: post } = useQuery({
+    queryKey: ['community-post', id],
+    queryFn: getCommunityDetailPost,
+    staleTime: 5 * TIMESTAMP.MINUTE,
+    select: res => res.result,
+  });
+
+  if (!post) return null;
+
+  // const images = post.isFromLost112
+  //   ? [
+  //       {
+  //         imageId: getRandomInt(),
+  //         imageUrl: post.externalSourceImageUrl,
+  //       },
+  //     ]
+  //   : post.images;
+
+  return (
+    <>
+      <article>
+        {/* <BaseArticleImages label={post.title} images={images} /> */}
+        <div className=" pt-5 px-5">
+          <CommunityTypeBadge communityType={post.categoryType} />
+          <div className=" text-title-large text-gray-90 line-clamp-2 pt-[13px] pb-4">
+            {post.title}
+          </div>
+          <div className=" w-full flex items-center justify-between pb-4 border-b border-b-gray-20">
+            <div className=" flex items-center gap-1 text-body-medium">
+              <span className=" text-gray-80">{post.writer || '로스트 112'}</span>
+              <span className=" text-gray-70">{formatDateTime(post.createdAt!)}</span>
+            </div>
+            <div className=" flex items-center text-gray-90 text-label-medium font-regular">
+              {/* {SUBWAY_LOGO_SVG_LIST[post.subwayLineId]} */}
+            </div>
+          </div>
+        </div>
+
+        <div className=" px-5">
+          {isLexicalContent(post.content) ? (
+            <ReadonlyEditor
+              content={post.content}
+              className={cn('px-0', 'py-6', '[&>div>div]:p-0', '[&>div>div]:border-none')}
+            />
+          ) : (
+            <p className=" py-6 mb-3 text-body-large-semi text-gray-90">{post.content}</p>
+          )}
+        </div>
+      </article>
+
+      {/* <LostFoundCommentList commentCnt={post.commentCnt} articleId={lostId} /> */}
+      {/* <CommentTextField
+        placeholder={`${post.writer ?? '로스트 112'}에게 댓글을 남겨주세요.`}
+        onSubmit={handleSubmitComment}
+        onChange={handleChangeComment}
+      /> */}
+    </>
+  );
+}

services/one-app/src/app/(main-service)/community/[id]/_components/CommunityTypeBadge.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import { CommunityType } from '@/types/community';
+
+interface Props {
+  communityType: CommunityType;
+}
+
+export const CommunityTypeBadge = ({ communityType }: Props) => {
+  return (
+    <div className=" h-7 text-label-small text-gray-0 px-2.5 flex items-center justify-center bg-[#407AD6] rounded-[100px] w-max">
+      {communityType === CommunityType.FREE
+        ? '자유'
+        : communityType === CommunityType.HUMOR
+          ? '유머'
+          : '정보'}
+    </div>
+  );
+};

services/one-app/src/app/(main-service)/community/[id]/_components/Lost112ArticleTable.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import Link from 'next/link';
+
+import { formatDateTime } from '@ahhachul/utils';
+
+import type { LostFoundPostDetail } from '@/types';
+
+interface Props {
+  post: LostFoundPostDetail;
+}
+
+export const Lost112ArticleTable = ({ post }: Props) => {
+  return (
+    <div className="max-w bg-gray-20 px-5 py-4">
+      <div className="bg-gray-0 rounded-lg px-5 py-4">
+        <h2 className="text-gray-80 text-label-medium pb-4 border-b border-b-gray-20">
+          유실물 상세정보
+        </h2>
+
+        <div className="grid grid-cols-[120px,1fr] gap-y-4 text-sm py-3 px-[5px]">
+          <div className="text-gray-80 text-label-medium">습득일</div>
+          <div className="text-gray-90 text-label-medium">{formatDateTime(post.createdAt)}</div>
+
+          {post?.storage && (
+            <>
+              <div className="text-gray-80 text-label-medium">습득장소</div>
+              <div className="text-gray-90 text-label-medium">{post.storage}</div>
+            </>
+          )}
+
+          {post?.categoryName && (
+            <>
+              <div className="text-gray-80 text-label-medium">물품분류</div>
+              <div className="text-gray-90 text-label-medium">{post.categoryName}</div>
+            </>
+          )}
+
+          {post?.storageNumber && (
+            <>
+              <div className="text-gray-80 text-label-medium">보관 장소 전화번호</div>
+              <div className="text-gray-90 text-label-medium">{post.storageNumber}</div>
+            </>
+          )}
+
+          {post?.storage && (
+            <>
+              <div className="text-gray-80 text-label-medium">보관장소</div>
+              <div className="text-gray-90 text-label-medium">{post.storage}</div>
+            </>
+          )}
+
+          {post?.pageUrl && (
+            <>
+              <div className="text-gray-80 text-label-medium">원본 게시글</div>
+              <Link
+                href={post.pageUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-700 text-label-medium"
+              >
+                바로가기
+              </Link>
+            </>
+          )}
+        </div>
+
+        <div className="mt-6 flex items-center gap-2 text-green-600 justify-center">
+          <div className="w-2 h-2 rounded-full bg-green-600 "></div>
+          <span className="text-sm">
+            {post.status === 'PROGRESS' ? '현재 보관중 입니다.' : '찾기 완료!'}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};

services/one-app/src/app/(main-service)/community/[id]/_components/RecommendArticles.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { ChevronIcon } from '@/asset/icon';
+import { RecommendArticleCard } from '@/component';
+import { IRecommendPost } from '@/types';
+
+interface Props {
+  posts: IRecommendPost[];
+}
+
+export const RecommendArticles = ({ posts }: Props) => {
+  if (!posts?.length) return null;
+
+  return (
+    <section>
+      <div className=" h-12 pl-5 flex items-center border-b border-b-gray-30">
+        <span className=" text-gray-90 text-title-large">추천 습득물</span>
+        <ChevronIcon />
+      </div>
+      {posts.map(post => (
+        <RecommendArticleCard key={post.id} post={post} />
+      ))}
+    </section>
+  );
+};

services/one-app/src/app/(main-service)/community/[id]/_lib/getDetailPost.ts

@@ -0,0 +1,25 @@
+import { QueryFunction } from '@tanstack/react-query';
+
+import type { IResponse } from '@/types';
+import type { CommunityDetail } from '@/types/community';
+
+export const getCommunityDetailPost: QueryFunction<
+  IResponse<CommunityDetail>,
+  [_1: string, id: number]
+> = async ({ queryKey }) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_1, id] = queryKey;
+  const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/community-posts/${id}`, {
+    next: {
+      tags: ['lcommunity-post', id.toString()],
+    },
+    credentials: 'include',
+  });
+
+  if (!res.ok) {
+    // This will activate the closest `error.js` Error Boundary
+    throw new Error('Failed to fetch data');
+  }
+
+  return res.json();
+};

services/one-app/src/app/(main-service)/community/[id]/_lib/getDetailPostServer.ts

@@ -0,0 +1,25 @@
+import { cookies } from 'next/headers';
+
+export const getCommunityDetailPostServer = async ({
+  queryKey,
+}: {
+  queryKey: [string, number];
+}) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_1, id] = queryKey;
+  const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/community-posts/${id}`, {
+    next: {
+      revalidate: 3600,
+      tags: ['community-post', id.toString()],
+    },
+    credentials: 'include',
+    headers: { Cookie: (await cookies()).toString() },
+  });
+
+  if (!res.ok) {
+    // This will activate the closest `error.js` Error Boundary
+    throw new Error('Failed to fetch data');
+  }
+
+  return res.json();
+};

services/one-app/src/app/(main-service)/community/[id]/page.tsx

@@ -0,0 +1,39 @@
+import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
+import type { Metadata } from 'next';
+
+import CommunityPostDetail from './_components/CommunityDetail';
+import { getCommunityDetailPostServer } from './_lib/getDetailPostServer';
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { id } = await params;
+  const post = await getCommunityDetailPostServer({ queryKey: ['community-post', id] });
+
+  return {
+    title: `지하철 커뮤니티 아하철 / ${post.result.title}`,
+    description: post.result.content,
+  };
+}
+
+type Props = {
+  params: Promise<{
+    id: number;
+  }>;
+};
+
+export default async function CommunityDetailPage(props: Props) {
+  const { id } = await props.params;
+  const queryClient = new QueryClient();
+  await queryClient.prefetchQuery({
+    queryKey: ['community-post', id],
+    queryFn: getCommunityDetailPostServer,
+  });
+  const dehydratedState = dehydrate(queryClient);
+
+  return (
+    <main className="flex min-h-screen flex-col text-black bg-white mb-[210px]">
+      <HydrationBoundary state={dehydratedState}>
+        <CommunityPostDetail id={id} />
+      </HydrationBoundary>
+    </main>
+  );
+}