Merge pull request #113 from TripInfoWeb/dev_informations

Feature: 정보 수정 페이지 생성
TripInfoWeb · Jul 10, 2024 · f39fdc2 · f39fdc2
2 parents d76b36f + f704f47
commit f39fdc2
Show file tree

Hide file tree

Showing 6 changed files with 342 additions and 12 deletions.
diff --git a/src/app/api/informations/[id]/route.ts b/src/app/api/informations/[id]/route.ts
@@ -0,0 +1,119 @@
+import { revalidateTag } from "next/cache";
+import { NextRequest } from "next/server";
+
+/**
+ * 정보 글 가져오기
+ *
+ * 이 API는 정보 글 수정 목적으로 데이터를
+ * 클라이언트 사이드에서 요청할 때 사용됩니다.
+ *
+ * 정보 상세 페이지에서 데이터를 가져올 때
+ * 사용되지 않습니다.
+ * @param request
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } },
+) {
+  try {
+    // TODO: 추후 수정할 것.
+
+    /*
+    const response = await fetch(
+      `${process.env.BACKEND_API}/api/informations/${params.id}`,
+      {
+        method: "GET",
+        cache: "force-cache",
+        next: { tags: [`getInformation/${params.id}`] },
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error("Internal Server Error");
+    }
+
+    return response;
+    */
+
+    return new Response(
+      JSON.stringify({
+        informationTitle: "테스트 제목입니다.",
+        informationContent: "테스트 내용입니다.",
+      }),
+      {
+        status: 200,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      },
+    );
+  } catch (e) {
+    return new Response(JSON.stringify({ error: "Failed to fetch data." }), {
+      status: 500, // Internal Server Error
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+}
+
+/**
+ * 정보 글 수정
+ * @param request
+ * @param params
+ * @returns
+ */
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: { id: string } },
+) {
+  try {
+    const formData = await request.formData();
+
+    // TODO: 삭제 필요
+    console.log("TEST 정보 글 수정");
+    console.log(formData);
+
+    /*
+    // Back-end API 호출
+    const response = await fetch(
+      `${process.env.BACKEND_URL}/api/informations/${params.id}`,
+      {
+        method: "PUT",
+        body: formData,
+        cache: "no-store",
+      },
+    );
+
+    if (!response.ok) {
+      throw new Error("Internal Server Error");
+    }
+
+    // Revalidate the cache for the list page and redirect the user.
+    // TODO: 수정 필요
+    revalidateTag("getInformationList");
+    revalidateTag(`getInformation/${id}`)
+
+    // 외부 API의 응답을 JSON 형식으로 변환
+    return response;
+    */
+
+    // TODO: 삭제 필요
+    return new Response(
+      JSON.stringify({ title: "1", content: "2", tips: ["3", "4"] }),
+      {
+        status: 200,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      },
+    );
+  } catch (e) {
+    return new Response(JSON.stringify({ error: "Failed to write data." }), {
+      status: 500, // Internal Server Error
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+}
diff --git a/src/app/informations/(detail)/[category]/[id]/page.tsx b/src/app/informations/(detail)/[category]/[id]/page.tsx
@@ -6,23 +6,23 @@ import RecommendationListSkeleton from "@/components/skeleton/informations/detai
 import { CATEGORY_TEXT } from "@/constants/informations/category";
 import { Suspense } from "react";
 
-type MyProps = {
+interface Props {
   params: { category: string; id: string };
-};
+}
 
-export async function generateMetadata({ params: { category, id } }: MyProps) {
-  const postId = Number(id);
-  if (postId <= 0 || !Number.isSafeInteger(postId)) {
+export async function generateMetadata({ params: { category, id } }: Props) {
+  const informationId = Number(id);
+  if (informationId <= 0 || !Number.isSafeInteger(informationId)) {
     throw Error("Not Found");
   }
 
   return {
-    title: `정보 - ${CATEGORY_TEXT[category]} - ${postId}`,
+    title: `정보 - ${CATEGORY_TEXT[category]} - ${informationId}`,
     description: "Solitour의 정보 상세 페이지",
   };
 }
 
-export default function page({ params: { category, id } }: MyProps) {
+export default function page({ params: { category, id } }: Props) {
   if (
     category !== "restaurant" &&
     category !== "accommodation" &&
@@ -31,8 +31,8 @@ export default function page({ params: { category, id } }: MyProps) {
     throw Error("Not Found");
   }
 
-  const postId = Number(id);
-  if (postId < 1 || !Number.isSafeInteger(postId)) {
+  const informationId = Number(id);
+  if (informationId < 1 || !Number.isSafeInteger(informationId)) {
     throw Error("Not Found");
   }
 

diff --git a/src/app/informations/edit/[id]/page.tsx b/src/app/informations/edit/[id]/page.tsx
@@ -0,0 +1,32 @@
+import PagePath from "@/components/common/PagePath";
+import InformationEditorContainer from "@/containers/informations/edit/InformationEditorContainer";
+
+interface Props {
+  params: { id: string };
+}
+
+export async function generateMetadata({ params: { id } }: Props) {
+  const informationId = Number(id);
+  if (informationId <= 0 || !Number.isSafeInteger(informationId)) {
+    throw Error("Not Found");
+  }
+
+  return {
+    title: `정보 수정하기 - ${informationId}`,
+    description: "Solitour의 정보 수정하기 페이지",
+  };
+}
+
+export default function page({ params: { id } }: Props) {
+  const informationId = Number(id);
+  if (informationId <= 0 || !Number.isSafeInteger(informationId)) {
+    throw Error("Not Found");
+  }
+
+  return (
+    <div className="flex flex-col items-center">
+      <PagePath first="정보" second={"정보 수정하기"} />
+      <InformationEditorContainer id={informationId} />
+    </div>
+  );
+}
diff --git a/src/components/informations/detail/InformationViewer.tsx b/src/components/informations/detail/InformationViewer.tsx
@@ -7,12 +7,14 @@ import ImageViewerContainer from "@/containers/informations/detail/ImageViewerCo
 import { LuEye } from "react-icons/lu";
 import { GoPencil } from "react-icons/go";
 import { FaRegTrashCan } from "react-icons/fa6";
+import Link from "next/link";
 
 // TODO
 const InformationViewer = async () => {
   await new Promise((resolve) => setTimeout(resolve, 3000));
 
   const info = {
+    id: 1,
     title: "책과 공간이 매력적인 선릉역 테라로사",
     username: "하몽",
     date: new Date().toLocaleDateString(),
@@ -169,10 +171,13 @@ const InformationViewer = async () => {
         </div>
       </a>
       <div className="mt-6 flex flex-row items-center justify-end gap-3">
-        <button className="flex flex-row items-center gap-1 text-sm hover:text-main dark:text-slate-400">
+        <Link
+          className="flex flex-row items-center gap-1 text-sm hover:text-main dark:text-slate-400"
+          href={`/informations/edit/${info.id}`}
+        >
           <GoPencil />
           수정
-        </button>
+        </Link>
         <button className="flex flex-row items-center gap-1 text-sm hover:text-main dark:text-slate-400">
           <FaRegTrashCan />
           삭제