Merge pull request #247 from TripInfoWeb/dev_informations

Feat: 정보 API 재연동 및 UI 수정
TripInfoWeb · Sep 1, 2024 · 02750e8 · 02750e8
2 parents 1a70014 + 919336c
commit 02750e8
Show file tree

Hide file tree

Showing 21 changed files with 341 additions and 277 deletions.
diff --git a/src/app/api/informations/[id]/route.ts b/src/app/api/informations/[id]/route.ts
@@ -1,3 +1,4 @@
+import { UpdateInformationRequestDto } from "@/types/InformationDto";
 import { revalidatePath } from "next/cache";
 import { NextRequest } from "next/server";
 
@@ -16,24 +17,15 @@ export async function GET(
   request: NextRequest,
   { params }: { params: { id: string } },
 ) {
-  try {
-    const response = await fetch(
-      `${process.env.BACKEND_URL}/api/informations/${params.id}`,
-      {
-        method: "GET",
-        next: { revalidate: 60, tags: [`getInformation/${params.id}`] },
-      },
-    );
+  const response = await fetch(
+    `${process.env.BACKEND_URL}/api/informations/${params.id}`,
+    {
+      method: "GET",
+      next: { revalidate: 60, tags: [`getInformation/${params.id}`] },
+    },
+  );
 
-    return response;
-  } catch (e: any) {
-    return new Response(JSON.stringify({ error: e.message }), {
-      status: 500, // Internal Server Error
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-  }
+  return response;
 }
 
 /**
@@ -48,17 +40,18 @@ export async function PUT(
   { params }: { params: { id: string } },
 ) {
   const cookie = request.cookies.get("access_token");
-  const formData = await request.formData();
+  const body: UpdateInformationRequestDto = await request.json();
 
   // Back-end API 호출
   const response = await fetch(
     `${process.env.BACKEND_URL}/api/informations/${params.id}`,
     {
       method: "PUT",
       headers: {
+        "Content-Type": "application/json",
         Cookie: `${cookie?.name}=${cookie?.value}`,
       },
-      body: formData,
+      body: JSON.stringify(body),
       cache: "no-store",
     },
   );

diff --git a/src/app/api/informations/route.ts b/src/app/api/informations/route.ts
@@ -1,18 +1,20 @@
+import { CreateInformationRequestDto } from "@/types/InformationDto";
 import { revalidatePath } from "next/cache";
 import { NextRequest } from "next/server";
 
 // 정보 글 작성
 export async function POST(request: NextRequest) {
   const cookie = request.cookies.get("access_token");
-  const formData = await request.formData();
+  const body: CreateInformationRequestDto = await request.json();
 
   // Back-end API 호출
   const response = await fetch(`${process.env.BACKEND_URL}/api/informations`, {
     method: "POST",
     headers: {
+      "Content-Type": "application/json",
       Cookie: `${cookie?.name}=${cookie?.value}`,
     },
-    body: formData,
+    body: JSON.stringify(body),
     cache: "no-store",
   });
 

diff --git a/src/app/informations/edit/[id]/page.tsx b/src/app/informations/edit/[id]/page.tsx
@@ -1,12 +1,17 @@
 import Breadcrumbs from "@/components/common/Breadcrumb";
 import InformationEditorContainer from "@/containers/informations/edit/InformationEditorContainer";
 import { InformationDetailDto } from "@/types/InformationDto";
+import { cookies } from "next/headers";
 
 async function getInformation(id: number) {
+  const cookie = cookies().get("access_token");
   const response = await fetch(
     `${process.env.BACKEND_URL}/api/informations/${id}`,
     {
       method: "GET",
+      headers: {
+        Cookie: `${cookie?.name}=${cookie?.value}`,
+      },
       next: { revalidate: 60, tags: [`getInformation/${id}`] },
     },
   );
@@ -44,7 +49,7 @@ export default async function page({ params: { id } }: Props) {
   const data = await getInformation(informationId);
 
   return (
-    <div className="flex flex-col items-center">
+    <div className="flex w-full flex-col items-center">
       <Breadcrumbs
         categories={[
           {

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -44,7 +44,7 @@ export default async function Home() {
         category={"정보"}
         titles={["고민을 덜어줄,", "BEST", "여행 정보"]}
         description={"솔리투어에서 인기 여행 정보를 확인해보세요!"}
-        >
+      >
         <Suspense fallback={<BestInformationListSkeleton />}>
           <BestInformationList />
         </Suspense>

diff --git a/src/components/common/InformationItem.tsx b/src/components/common/InformationItem.tsx
@@ -50,42 +50,48 @@ const InformationItem = ({
   return (
     <div className="relative flex h-[19.6875rem] w-full flex-col justify-between rounded-2xl outline outline-1 outline-gray3 duration-300 hover:outline-main dark:outline-slate-400">
       <HashSpinner loading={loading} />
-      <Image
-        className="-z-10 rounded-[0.875rem] dark:opacity-65"
-        src={image || "/next.svg"}
-        alt={"PostImage"}
-        fill={true}
-        style={{
-          objectFit: "cover",
-        }}
-      />
-      <div className="rounded-0 flex flex-row items-center justify-between px-5 pt-5">
-        {style !== "" ? (
-          <p
-            className={`w-fit rounded-full border-[0.0625rem] px-4 py-[0.375rem] text-xs font-semibold ${style}`}
-          >
-            {CATEGORY_TEXT[categoryId]}
-          </p>
-        ) : (
-          <div />
-        )}
-        {userId > 0 && (
-          <button
-            className="relative h-7 w-5 cursor-pointer text-white hover:scale-110 dark:text-slate-200"
-            type="button"
-            onClick={() => onBookMarkClick()}
-          >
-            <Image
-              src={`/bookmark-icon${isBookMark ? "-marked" : ""}.svg`}
-              alt="bookmark-icon"
-              fill={true}
-              style={{
-                objectFit: "contain",
+      <Link href={`/informations/${informationId}`} className="h-[12.6875rem]">
+        <Image
+          className="-z-10 rounded-[0.875rem] dark:opacity-65"
+          src={image || "/next.svg"}
+          alt={"PostImage"}
+          fill={true}
+          style={{
+            objectFit: "cover",
+          }}
+        />
+        <div className="rounded-0 flex flex-row items-center justify-between px-5 pt-5">
+          {style !== "" ? (
+            <p
+              className={`w-fit rounded-full border-[0.0625rem] px-4 py-[0.375rem] text-xs font-semibold ${style}`}
+            >
+              {CATEGORY_TEXT[categoryId]}
+            </p>
+          ) : (
+            <div />
+          )}
+          {userId > 0 && (
+            <button
+              className="relative h-7 w-5 cursor-pointer text-white hover:scale-110 dark:text-slate-200"
+              type="button"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onBookMarkClick();
               }}
-            />
-          </button>
-        )}
-      </div>
+            >
+              <Image
+                src={`/bookmark-icon${isBookMark ? "-marked" : ""}.svg`}
+                alt="bookmark-icon"
+                fill={true}
+                style={{
+                  objectFit: "contain",
+                }}
+              />
+            </button>
+          )}
+        </div>
+      </Link>
       <div className="flex h-28 flex-col justify-between rounded-b-xl bg-white px-5 py-4 dark:bg-slate-800">
         <Link
           className="truncate-vertical-information-title p-1 font-bold hover:text-main dark:text-slate-200"

diff --git a/src/components/informations/detail/InformationViewer.tsx b/src/components/informations/detail/InformationViewer.tsx
@@ -101,7 +101,7 @@ const InformationViewer = ({ informationId, data }: Props) => {
             className="py-4 font-medium text-gray1 dark:text-slate-400"
             dangerouslySetInnerHTML={{ __html: data.content }}
           />
-          <div className="flex flex-row items-center gap-1 pb-8">
+          <div className="flex flex-row flex-wrap items-center gap-1 pb-8">
             {data.tagResponses.map((tag, index) => (
               <ItemTag
                 key={index}

diff --git a/src/components/informations/list/InformationSearch.tsx b/src/components/informations/list/InformationSearch.tsx
@@ -68,25 +68,25 @@ const InformationSearch = ({
             <IoIosArrowDown />
           </button>
           <div
-            className={`${!dropdownVisible && "hidden"} absolute -left-4 top-7 z-10 flex w-20 flex-col items-center gap-1 rounded-xl bg-[#F2FAF7] p-2 text-gray1 dark:text-slate-400`}
+            className={`${!dropdownVisible && "hidden"} absolute -left-[4.5rem] top-7 z-10 flex w-[8.625rem] flex-col items-center gap-1 rounded-xl bg-white/95 text-gray1 shadow dark:text-slate-400`}
             onClick={() => onDropdownClick()}
           >
             <Link
-              className={`${order === "latest" && "text-main"} hover:text-main`}
+              className={`${order === "latest" && "text-main"} flex h-16 w-full items-center justify-center hover:text-main`}
               href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=latest${tagName !== "" ? `&tagName=${tagName}` : ""}`}
               scroll={false}
             >
               최신순
             </Link>
             <Link
-              className={`${order === "likes" && "text-main"} hover:text-main`}
+              className={`${order === "likes" && "text-main"} flex h-16 w-full items-center justify-center hover:text-main`}
               href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=likes${tagName !== "" ? `&tagName=${tagName}` : ""}`}
               scroll={false}
             >
               좋아요순
             </Link>
             <Link
-              className={`${order === "views" && "text-main"} hover:text-main`}
+              className={`${order === "views" && "text-main"} flex h-16 w-full items-center justify-center hover:text-main`}
               href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=views${tagName !== "" ? `&tagName=${tagName}` : ""}`}
               scroll={false}
             >

diff --git a/src/components/informations/write/ImageUploadItem.tsx b/src/components/informations/write/ImageUploadItem.tsx
@@ -1,3 +1,4 @@
+import HashSpinner from "@/components/common/HashSpinner";
 import Image from "next/image";
 import { RefObject } from "react";
 import { MdClose } from "react-icons/md";
@@ -7,6 +8,7 @@ interface Props {
   image: string;
   mainImageIndex: number;
   imageRef: RefObject<HTMLInputElement>;
+  loading: boolean;
   onUploadButtonClicked: () => void;
   previewImage: () => void;
   setMainImageIndex: (index: number) => void;
@@ -18,6 +20,7 @@ const ImageUploadItem = ({
   image,
   mainImageIndex,
   imageRef,
+  loading,
   onUploadButtonClicked,
   previewImage,
   setMainImageIndex,
@@ -59,28 +62,31 @@ const ImageUploadItem = ({
   }
 
   return (
-    <label
-      className={`${index >= 12 ? "hidden" : ""} flex h-[9.375rem] w-40 cursor-pointer flex-col items-center justify-center rounded-xl border-[0.0625rem] hover:border-main dark:bg-slate-800`}
-      htmlFor="file"
-      onClick={onUploadButtonClicked}
-    >
-      <div className="flex h-12 w-12 items-center justify-center rounded-full border-[0.0625rem] border-main text-xl text-main">
-        +
-      </div>
-      <p className="pb-[0.375rem] pt-3 text-xs font-medium text-gray1 dark:text-slate-400">
-        사진 추가
-      </p>
-      <p className="text-xs font-medium text-gray2">{index}/12</p>
-      <input
-        className="hidden"
-        type="file"
-        id="photo"
-        name="photo"
-        accept=".png, .jpeg, .jpg"
-        onChange={previewImage}
-        ref={imageRef}
-      />
-    </label>
+    <div>
+      <HashSpinner loading={loading} />
+      <label
+        className={`${index >= 12 ? "hidden" : ""} flex h-[9.375rem] w-40 cursor-pointer flex-col items-center justify-center rounded-xl border-[0.0625rem] hover:border-main dark:bg-slate-800`}
+        htmlFor="file"
+        onClick={onUploadButtonClicked}
+      >
+        <div className="flex h-12 w-12 items-center justify-center rounded-full border-[0.0625rem] border-main text-xl text-main">
+          +
+        </div>
+        <p className="pb-[0.375rem] pt-3 text-xs font-medium text-gray1 dark:text-slate-400">
+          사진 추가
+        </p>
+        <p className="text-xs font-medium text-gray2">{index}/12</p>
+        <input
+          className="hidden"
+          type="file"
+          id="photo"
+          name="photo"
+          accept=".png, .jpeg, .jpg"
+          onChange={previewImage}
+          ref={imageRef}
+        />
+      </label>
+    </div>
   );
 };