feat: nextjs - compliant detail page metadata (#develop)

Author: createhb21

services/ahhachul.com/.gitignore

@@ -25,4 +25,4 @@ dist-ssr
 /test-results/
 e2e/playwright-report/
 /blob-report/
-/playwright/.cache/
+/playwright/.cache/

services/ahhachul.com/stats.html

@@ -0,0 +1,71 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+
+import { formatDateTime } from '@ahhachul/utils';
+
+import { ReadonlyEditor } from '@/component/Editor';
+import { TIMESTAMP } from '@/constant';
+import { cn, extractTextFromLexical, isLexicalContent } from '@/util';
+
+import { ComplaintTypeBadge } from './ComplaintTypeBadge';
+
+import { getComplaintDetailPost } from '../_lib/getDetailPost';
+
+type Props = {
+  id: number;
+};
+
+export default function CommunityPostDetail({ id }: Props) {
+  const { data: post } = useQuery({
+    queryKey: ['complaint-post', id],
+    queryFn: getComplaintDetailPost,
+    staleTime: 5 * TIMESTAMP.MINUTE,
+    select: res => res.result,
+  });
+
+  console.log('post.result:', post);
+
+  if (!post) return null;
+
+  const title = extractTextFromLexical(post.content, post.complaintType).slice(0, 20);
+
+  return (
+    <>
+      <article>
+        {/* <BaseArticleImages label={post.title} images={images} /> */}
+        <div className=" pt-5 px-5">
+          <ComplaintTypeBadge complaintType={post.complaintType} />
+          <div className=" text-title-large text-gray-90 line-clamp-2 pt-[13px] pb-4">{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)/complaint/[id]/_components/ComplaintDetail.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import type { ComplaintType } from '@/types/complaint';
+
+const complaintTypeOptions: Record<ComplaintType, string> = {
+  ENVIRONMENTAL_COMPLAINT: '환경민원',
+  TEMPERATURE_CONTROL: '온도조절',
+  DISORDER: '질서저해',
+  ANNOUNCEMENT: '안내방송',
+  EMERGENCY_PATIENT: '응급환자',
+  VIOLENCE: '폭력',
+  SEXUAL_HARASSMENT: '성추행',
+};
+
+interface Props {
+  complaintType: ComplaintType;
+}
+
+export const ComplaintTypeBadge = ({ complaintType }: 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">
+      {complaintTypeOptions[complaintType]}
+    </div>
+  );
+};

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

@@ -0,0 +1,25 @@
+import { QueryFunction } from '@tanstack/react-query';
+
+import type { IResponse } from '@/types';
+import { ComplaintPostDetail } from '@/types/complaint';
+
+export const getComplaintDetailPost: QueryFunction<
+  IResponse<ComplaintPostDetail>,
+  [_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}/complaintcomplaint-posts/${id}`, {
+    next: {
+      tags: ['complaint-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)/complaint/[id]/_lib/getDetailPost.ts

@@ -0,0 +1,25 @@
+import { cookies } from 'next/headers';
+
+export const getComplaintDetailPostServer = 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}/complaint-posts/${id}`, {
+    next: {
+      revalidate: 3600,
+      tags: ['complaint-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)/complaint/[id]/_lib/getDetailPostServer.ts

@@ -0,0 +1,76 @@
+import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
+import type { Metadata } from 'next';
+
+import { SUBWAY_LINES } from '@/constant';
+import { extractTextFromLexical } from '@/util';
+
+import ComplaintDetail from './_components/ComplaintDetail';
+import { getComplaintDetailPostServer } from './_lib/getDetailPostServer';
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { id } = await params;
+  const post = await getComplaintDetailPostServer({ queryKey: ['complaint-post', id] });
+
+  const subwayLineId = post.result.subwayLineId;
+  const extractTitle = extractTextFromLexical(post.result.content, post.result.complaintType).slice(
+    0,
+    16,
+  );
+  const baseTitle = (subwayLineId?: string) =>
+    `${extractTitle} / ${subwayLineId} 민원 접수 - 아하철`;
+
+  const title =
+    subwayLineId && +subwayLineId !== 0
+      ? baseTitle(SUBWAY_LINES.find(subway => subway.id === +subwayLineId)?.name)
+      : baseTitle('지하철');
+
+  const baseDescription =
+    '지하철 이용 중 불편사항을 쉽고 빠르게 신고하세요. 시설물 고장, 불편사항, 개선 요청 등 다양한 민원을 실시간으로 접수하고 처리 현황을 확인할 수 있습니다. 더 나은 지하철 환경을 만드는 첫걸음, 아하철 민원 서비스입니다.';
+
+  const image =
+    post.result.images.length > 0 && post.result.images.at(0).imageUrl
+      ? post.result.images.at(0).imageUrl
+      : subwayLineId && +subwayLineId !== 0
+        ? `https://static.dev.ahhachul.com/banners/complaint/subway-line-${subwayLineId}.png`
+        : 'https://static.dev.ahhachul.com/banners/complaint/main.png';
+
+  return {
+    title,
+    description: extractTextFromLexical(post.result.content, baseDescription),
+    openGraph: {
+      title,
+      description: extractTextFromLexical(post.result.content, baseDescription),
+      images: [
+        {
+          url: image,
+          width: 800,
+          height: 400,
+        },
+      ],
+    },
+  };
+}
+
+type Props = {
+  params: Promise<{
+    id: number;
+  }>;
+};
+
+export default async function ComplaintDetailPage(props: Props) {
+  const { id } = await props.params;
+  const queryClient = new QueryClient();
+  await queryClient.prefetchQuery({
+    queryKey: ['complaint-post', id],
+    queryFn: getComplaintDetailPostServer,
+  });
+  const dehydratedState = dehydrate(queryClient);
+
+  return (
+    <main className="flex min-h-screen flex-col text-black bg-white mb-[210px]">
+      <HydrationBoundary state={dehydratedState}>
+        <ComplaintDetail id={id} />
+      </HydrationBoundary>
+    </main>
+  );
+}

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

@@ -0,0 +1,66 @@
+import type { IPost, CursorPagination, IPostImage, SubwayLineFilterOptions } from './common';
+
+export type ComplaintType =
+  | 'ENVIRONMENTAL_COMPLAINT'
+  | 'TEMPERATURE_CONTROL'
+  | 'DISORDER'
+  | 'ANNOUNCEMENT'
+  | 'EMERGENCY_PATIENT'
+  | 'VIOLENCE'
+  | 'SEXUAL_HARASSMENT';
+
+export type ShortComplaintType =
+  | 'WASTE'
+  | 'VOMIT'
+  | 'VENTILATION_REQUEST'
+  | 'NOISY'
+  | 'NOT_HEARD'
+  | 'TOO_HOT'
+  | 'TOO_COLD'
+  | 'MOBILE_VENDOR'
+  | 'DRUNK'
+  | 'HOMELESS'
+  | 'BEGGING'
+  | 'RELIGIOUS_ACTIVITY'
+  | 'SELF'
+  | 'WITNESS'
+  | 'VICTIM';
+
+export type ComplaintStatus = 'CREATED' | 'DONE';
+
+export interface ComplaintPost extends IPost {
+  complaintType: ComplaintType;
+  shortContentType: ShortComplaintType;
+  trainNo: string;
+  phoneNumber: string;
+  location: number;
+  status: ComplaintStatus;
+}
+
+export interface ComplaintPostDetail extends ComplaintPost {
+  images: IPostImage[];
+}
+
+export interface ComplaintListParams<TSubwayLine = number> extends Partial<CursorPagination> {
+  subwayLineId: TSubwayLine;
+  keyword?: string;
+}
+
+export interface ComplaintForm {
+  title: string;
+  content: string;
+  subwayLineId: number;
+  complaintType: ComplaintType;
+  shortContentType: ShortComplaintType;
+  images: File[];
+}
+
+export type ComplaintFilterKeys = 'subwayLineId';
+
+export type ComplaintFilterValues = {
+  subwayLineId: SubwayLineFilterOptions;
+};
+
+export type ComplaintFilters = {
+  [K in ComplaintFilterKeys]: ComplaintFilterValues[K];
+};