Merge pull request #412 from TripInfoWeb/dev_comment

Feat: 댓글 기능 구현

Author: HyunJinNo

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

@@ -0,0 +1,103 @@
+import {
+  CreateInformationCommentRequestDto,
+  UpdateInformationCommentRequestDto,
+} from "@/types/InformationCommentDto";
+import { NextRequest } from "next/server";
+
+/**
+ * @method GET
+ * @url /api/informations/comments/:informationId?page=0
+ * @description 댓글 목록 조회
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } },
+) {
+  const cookie = request.cookies.get("access_token");
+  const searchParams = request.nextUrl.searchParams;
+  const page = searchParams.get("page") ?? "0";
+
+  return await fetch(
+    `${process.env.BACKEND_URL}/api/informations/comments/${params.id}?page=${page}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Cookie: `${cookie?.name}=${cookie?.value}`,
+      },
+      cache: "no-store",
+    },
+  );
+}
+
+/**
+ * @method POST
+ * @url /api/informations/comments/:informationId
+ * @description 댓글 작성
+ */
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { id: number } },
+) {
+  const cookie = request.cookies.get("access_token");
+  const body: CreateInformationCommentRequestDto = await request.json();
+  return await fetch(
+    `${process.env.BACKEND_URL}/api/informations/comments/${params.id}`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Cookie: `${cookie?.name}=${cookie?.value}`,
+      },
+      body: JSON.stringify(body),
+      cache: "no-store",
+    },
+  );
+}
+
+/**
+ * @method PUT
+ * @url /api/informations/comments/:informationId
+ * @description 댓글 수정
+ */
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: { id: number } },
+) {
+  const cookie = request.cookies.get("access_token");
+  const body: UpdateInformationCommentRequestDto = await request.json();
+  return await fetch(
+    `${process.env.BACKEND_URL}/api/informations/comments/${params.id}`,
+    {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        Cookie: `${cookie?.name}=${cookie?.value}`,
+      },
+      body: JSON.stringify(body),
+      cache: "no-store",
+    },
+  );
+}
+
+/**
+ * @method DELETE
+ * @url /api/informations/comments/:informationCommentId
+ * @description 댓글 삭제
+ */
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: { id: number } },
+) {
+  const cookie = request.cookies.get("access_token");
+  return await fetch(
+    `${process.env.BACKEND_URL}/api/informations/comments/${params.id}`,
+    {
+      method: "DELETE",
+      headers: {
+        Cookie: `${cookie?.name}=${cookie?.value}`,
+      },
+      cache: "no-store",
+    },
+  );
+}

src/app/informations/(detail)/[id]/page.tsx

@@ -2,7 +2,6 @@ import Breadcrumbs from "@/components/common/Breadcrumb";
 import InformationViewer from "@/components/informations/detail/InformationViewer";
 import RecommendationList from "@/components/informations/detail/RecommendationList";
 import CommentListContainer from "@/containers/informations/detail/comment/CommentListContainer";
-import CommentPaginationContainer from "@/containers/informations/detail/comment/CommentPaginationContainer";
 import { InformationDetailDto } from "@/types/InformationDto";
 import { cookies } from "next/headers";
 
@@ -64,7 +63,6 @@ export default async function page({ params: { id } }: Props) {
       />
       <InformationViewer informationId={informationId} data={data} />
       <CommentListContainer informationId={informationId} />
-      <CommentPaginationContainer />
       <RecommendationList data={data} />
     </div>
   );

src/components/auth/UserDropDown.tsx

@@ -68,28 +68,24 @@ const UserDropDown = () => {
         <section
           ref={ref1}
           onClick={(e) => e.preventDefault()}
-          className={
-            "outline-primary-20 fixed right-0 top-[4rem] flex h-auto w-[20rem] cursor-default flex-col gap-y-4 rounded-2xl bg-white p-4 outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-gray2"
-          }
+          className="outline-primary-20 fixed right-0 top-[4rem] flex h-auto w-[20rem] cursor-default flex-col gap-y-4 rounded-2xl bg-white p-4 outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-gray2"
         >
           <div className="relative flex h-[12rem] w-full items-center justify-center p-4">
             <Image
-              className="rounded-full"
+              className="rounded-full border-[0.03125rem] border-[#B8EDD9] bg-lightGreen"
               src={authStore.userImage.address}
-              alt={"유저 이미지"}
+              alt="유저 이미지"
               width={140}
               height={140}
             />
           </div>
           <Link
-            href={"/mypage?mainCategory=정보&category=owner"}
-            className={
-              "outline-primary-20 flex items-center justify-center gap-x-2 rounded-[1rem] bg-white px-8 py-2 outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-gray3"
-            }
+            href="/mypage?mainCategory=정보&category=owner"
+            className="outline-primary-20 flex items-center justify-center gap-x-2 rounded-[1rem] bg-white px-8 py-2 outline outline-[0.0625rem] outline-offset-[-0.0625rem] outline-gray3"
             onClick={() => modalState.closeModal()}
             prefetch={true}
           >
-            <div className={"relative h-[1.25rem] w-[1.25rem]"}>
+            <div className="relative h-[1.25rem] w-[1.25rem]">
               <Image
                 className="aspect-square"
                 src="/home/mypage-icon.svg"

src/components/informations/detail/comment/CommentItem.tsx

@@ -1,20 +1,36 @@
+import HashSpinner from "@/components/common/HashSpinner";
 import ReportIcon from "@/components/common/icons/ReportIcon";
 import CommentDeleteModalContainer from "@/containers/informations/detail/comment/CommentDeleteModalContainer";
-import { InformationCommentResponseDto } from "@/types/InformationDto";
+import { InformationCommentResponseDto } from "@/types/InformationCommentDto";
 import Image from "next/image";
+import { Dispatch, FormEvent, SetStateAction } from "react";
 
 interface CommentItemProps {
   data: InformationCommentResponseDto;
   modalVisible: boolean;
+  editable: boolean;
+  comment: string;
+  loading: boolean;
+  userId: number;
   openModal: () => void;
   closeModal: () => void;
+  setEditable: Dispatch<SetStateAction<boolean>>;
+  setComment: (value: string) => void;
+  onSubmit: (e: FormEvent<HTMLFormElement>) => Promise<void>;
 }
 
 const CommentItem = ({
   data,
   modalVisible,
+  editable,
+  comment,
+  loading,
+  userId,
   openModal,
   closeModal,
+  setEditable,
+  setComment,
+  onSubmit,
 }: CommentItemProps) => {
   return (
     <div className="flex flex-col gap-[0.625rem] border-b border-b-gray3">
@@ -24,40 +40,86 @@ const CommentItem = ({
           closeModal={closeModal}
         />
       )}
+      <HashSpinner loading={loading} />
       <div className="flex flex-row items-center justify-between">
         <div className="flex flex-row items-center gap-3">
           <Image
             className="rounded-full border-[0.03125rem] border-[#B8EDD9] bg-lightGreen"
-            src={data.userImage}
+            src={data.userProfile}
             alt="userImage"
             width={54}
             height={54}
           />
           <div className="flex flex-col gap-1">
-            <p className="text-xs font-semibold text-black">{data.nickname}</p>
+            <p className="text-xs font-semibold text-black">
+              {data.userNickname}
+            </p>
             <p className="text-xs text-gray1">
-              {`${new Date(data.createdDate).toLocaleDateString("ko-KR")}`}
+              {`${new Date(data.updatedAt).toLocaleDateString("ko-KR")}`}
             </p>
           </div>
         </div>
         <button
-          className="stroke-gray1 hover:stroke-main"
-          onClick={() => openModal()}
+          className="invisible stroke-gray1 hover:stroke-main"
+          onClick={() => alert("TODO: 구현 예정")}
         >
           <ReportIcon className="mb-[0.5625rem] cursor-pointer stroke-inherit" />
         </button>
       </div>
-      <div>
-        <p className="h-[4.375rem] break-words pl-[4.125rem] text-[0.9375rem] text-black">
-          {data.content}
-        </p>
-        <div className="h-8 w-full">
-          <div className="flex flex-row items-center justify-end gap-4 text-sm text-gray1">
-            <button className="hover:text-main">수정</button>
-            <button className="hover:text-main">삭제</button>
+      {editable ? (
+        <form className="pl-[4.125rem]" onSubmit={onSubmit}>
+          <div className="relative h-[4.375rem]">
+            <input
+              className={`${comment.length === 0 ? "border-red-500" : "border-gray3 hover:border-main focus:border-main"} h-[2.75rem] w-full rounded-3xl border px-6 text-sm text-black outline-none`}
+              type="text"
+              placeholder="자유롭게 소통을 해보세요."
+              value={comment}
+              maxLength={200}
+              autoComplete="off"
+              onChange={(e) => setComment(e.target.value)}
+            />
+            {comment.length === 0 && (
+              <p className="absolute bottom-1 left-4 mt-1 text-xs text-red-500">
+                댓글을 입력해 주세요.
+              </p>
+            )}
+          </div>
+          <div className="flex h-8 w-full flex-row items-start justify-end gap-4 text-sm text-gray1">
+            <button className="hover:text-main" type="submit">
+              수정
+            </button>
+            <button
+              className="hover:text-main"
+              type="button"
+              onClick={() => setEditable(false)}
+            >
+              취소
+            </button>
           </div>
+        </form>
+      ) : (
+        <div>
+          <p className="min-h-[4.375rem] break-words pl-[4.125rem] text-[0.9375rem] text-black">
+            {data.content}
+          </p>
+          {userId === data.userId && (
+            <div className="flex h-8 w-full flex-row items-start justify-end gap-4 text-sm text-gray1">
+              <button
+                className="hover:text-main"
+                onClick={() => {
+                  setComment(data.content);
+                  setEditable(true);
+                }}
+              >
+                수정
+              </button>
+              <button className="hover:text-main" onClick={() => openModal()}>
+                삭제
+              </button>
+            </div>
+          )}
         </div>
-      </div>
+      )}
     </div>
   );
 };