Merge pull request #200 from TripInfoWeb/dev_diary

Feat: 여행일기

next.config.mjs

@@ -9,6 +9,13 @@ const nextConfig = {
         port: "",
         pathname: "/solitour-bucket/**",
       },
+      {
+        // TODO: 테스트 목적
+        protocol: "http",
+        hostname: "localhost",
+        port: "4000",
+        pathname: "/uploads/images/diary/**",
+      },
     ],
   },
 };

src/app/api/diary/create/route.ts

@@ -0,0 +1,38 @@
+import { CreateDiaryRequestDto } from "@/types/DiaryDto";
+import { revalidateTag } from "next/cache";
+import { NextRequest } from "next/server";
+
+// 일기 작성
+export async function POST(request: NextRequest) {
+  try {
+    const cookie = request.cookies.get("access_token");
+    const body: CreateDiaryRequestDto = await request.json();
+
+    const response = await fetch(
+      `${process.env.LOCAL_BACKEND_URL}/api/diary/create`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Cookie: `${cookie?.name}=${cookie?.value}`,
+        },
+        body: JSON.stringify(body),
+        cache: "no-store",
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    revalidateTag("getDiaryList");
+    return response;
+  } catch (err: any) {
+    return new Response(JSON.stringify({ error: "Failed to write data." }), {
+      status: 500, // Internal Server Error
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+}

src/app/api/diary/delete/[id]/route.ts

@@ -0,0 +1,35 @@
+import { revalidateTag } from "next/cache";
+import { NextRequest } from "next/server";
+
+/**
+ * 일기 삭제
+ */
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: { id: string } },
+) {
+  try {
+    const cookie = request.cookies.get("access_token");
+    const response = await fetch(
+      `${process.env.LOCAL_BACKEND_URL}/api/diary/delete/${params.id}`,
+      {
+        method: "DELETE",
+        headers: {
+          Cookie: `${cookie?.name}=${cookie?.value}`,
+        },
+        cache: "no-store",
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    revalidateTag("getDiaryList");
+    return response;
+  } catch (err) {
+    return new Response("Failed to delete data.", {
+      status: 500, // Internal Server Error,
+    });
+  }
+}

src/app/api/diary/update/[id]/route.ts

@@ -0,0 +1,44 @@
+import { UpdateDiaryRequestDto } from "@/types/DiaryDto";
+import { revalidateTag } from "next/cache";
+import { NextRequest } from "next/server";
+
+/**
+ * 일기 수정
+ */
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: { id: string } },
+) {
+  try {
+    const cookie = request.cookies.get("access_token");
+    const body: UpdateDiaryRequestDto = await request.json();
+
+    const response = await fetch(
+      `${process.env.LOCAL_BACKEND_URL}/api/diary/update/${params.id}`,
+      {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Cookie: `${cookie?.name}=${cookie?.value}`,
+        },
+        body: JSON.stringify(body),
+        cache: "no-store",
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+
+    revalidateTag("getDiaryList");
+    revalidateTag(`getDiary/${params.id}`);
+    return response;
+  } catch (err) {
+    return new Response(JSON.stringify({ error: "Failed to update data." }), {
+      status: 500, // Internal Server Error
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+}

src/app/api/image/upload/route.ts

@@ -0,0 +1,33 @@
+import { NextRequest } from "next/server";
+
+// 이미지 업로드
+export async function POST(request: NextRequest) {
+  try {
+    const cookie = request.cookies.get("access_token");
+    const formData = await request.formData();
+
+    const response = await fetch(
+      `${process.env.LOCAL_BACKEND_URL}/api/image/upload`,
+      {
+        method: "POST",
+        headers: {
+          Cookie: `${cookie?.name}=${cookie?.value}`,
+        },
+        body: formData,
+        cache: "no-store",
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error(response.statusText);
+    }
+    return response;
+  } catch (err: any) {
+    return new Response(JSON.stringify({ error: err.message }), {
+      status: 500, // Internal Server Error
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+}

src/app/api/informations/[id]/route.ts

@@ -87,9 +87,6 @@ export async function PUT(
 
 /**
  * 정보 글 삭제
- * @param request
- * @param param
- * @returns
  */
 export async function DELETE(
   request: NextRequest,

src/app/diary/[id]/loading.tsx

@@ -0,0 +1,11 @@
+import PagePath from "@/components/common/PagePath";
+import DiaryViewerSkeleton from "@/components/skeleton/diary/detail/DiaryViewerSkeleton";
+
+export default function Loading() {
+  return (
+    <div className="flex w-full flex-col items-center">
+      <PagePath first="여행 일기" second="일기 상세" />
+      <DiaryViewerSkeleton />
+    </div>
+  );
+}

src/app/diary/[id]/page.tsx

@@ -1,7 +1,27 @@
 import PagePath from "@/components/common/PagePath";
-import DiaryViewer from "@/components/diary/detail/DiaryViewer";
-import DiaryViewerSkeleton from "@/components/skeleton/diary/detail/DiaryViewerSkeleton";
-import { Suspense } from "react";
+import DiaryViewerContainer from "@/containers/diary/detail/DiaryViewerContainer";
+import { GetDiaryResponseDto } from "@/types/DiaryDto";
+import { cookies } from "next/headers";
+
+async function getDiary(id: number) {
+  const cookie = cookies().get("access_token");
+  const response = await fetch(
+    `${process.env.LOCAL_BACKEND_URL}/api/diary/${id}`,
+    {
+      method: "GET",
+      headers: {
+        Cookie: `${cookie?.name}=${cookie?.value}`,
+      },
+      next: { revalidate: 60, tags: [`getDiary/${id}`] },
+    },
+  );
+
+  if (!response.ok) {
+    throw new Error(response.statusText);
+  }
+
+  return response.json() as Promise<GetDiaryResponseDto>;
+}
 
 interface Props {
   params: { id: string };
@@ -19,18 +39,18 @@ export async function generateMetadata({ params: { id } }: Props) {
   };
 }
 
-export default function page({ params: { id } }: Props) {
+export default async function page({ params: { id } }: Props) {
   const diaryId = Number(id);
   if (diaryId <= 0 || !Number.isSafeInteger(diaryId)) {
     throw Error("Not Found");
   }
 
+  const data = await getDiary(diaryId);
+
   return (
     <div className="flex w-full flex-col items-center">
       <PagePath first="여행 일기" second="일기 상세" />
-      <Suspense fallback={<DiaryViewerSkeleton />}>
-        <DiaryViewer id={diaryId} />
-      </Suspense>
+      <DiaryViewerContainer data={data} />
     </div>
   );
 }

src/app/diary/edit/[id]/page.tsx

@@ -0,0 +1,56 @@
+import PagePath from "@/components/common/PagePath";
+import DiaryEditorContainer from "@/containers/diary/edit/DiaryEditorContainer";
+import { GetDiaryResponseDto } from "@/types/DiaryDto";
+import { cookies } from "next/headers";
+
+async function getDiary(id: number) {
+  const cookie = cookies().get("access_token");
+  const response = await fetch(
+    `${process.env.LOCAL_BACKEND_URL}/api/diary/${id}`,
+    {
+      method: "GET",
+      headers: {
+        Cookie: `${cookie?.name}=${cookie?.value}`,
+      },
+      next: { revalidate: 60, tags: [`getDiary/${id}`] },
+    },
+  );
+
+  if (!response.ok) {
+    throw new Error(response.statusText);
+  }
+
+  return response.json() as Promise<GetDiaryResponseDto>;
+}
+
+interface Props {
+  params: { id: string };
+}
+
+export async function generateMetadata({ params: { id } }: Props) {
+  const diaryId = Number(id);
+  if (diaryId <= 0 || !Number.isSafeInteger(diaryId)) {
+    throw new Error("Not Found");
+  }
+
+  return {
+    title: `일기 수정하기 - ${diaryId}`,
+    description: "Solitour의 여행 일기 수정 페이지",
+  };
+}
+
+export default async function page({ params: { id } }: Props) {
+  const diaryId = Number(id);
+  if (diaryId <= 0 || !Number.isSafeInteger(diaryId)) {
+    throw new Error("Not Found");
+  }
+
+  const data = await getDiary(diaryId);
+
+  return (
+    <div className="flex w-full flex-col items-center">
+      <PagePath first="여행 일기" second="일기 수정하기" />
+      <DiaryEditorContainer diaryData={data} />
+    </div>
+  );
+}

src/app/informations/edit/[id]/page.tsx

@@ -26,7 +26,7 @@ interface Props {
 export async function generateMetadata({ params: { id } }: Props) {
   const informationId = Number(id);
   if (informationId <= 0 || !Number.isSafeInteger(informationId)) {
-    throw Error("Not Found");
+    throw new Error("Not Found");
   }
 
   return {
@@ -45,7 +45,7 @@ export default async function page({ params: { id } }: Props) {
 
   return (
     <div className="flex flex-col items-center">
-      <PagePath first="정보" second={"정보 수정하기"} />
+      <PagePath first="정보" second="정보 수정하기" />
       <InformationEditorContainer informationId={informationId} data={data} />
     </div>
   );