[Fix, Feat] 댓글, 답글 CRUD api 연결, 기능 구현

src/app/(route)/_components/DeletePostButton.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import handleAlert from "@/common/Molecules/handleAlert";
-import { deleteCommunity } from "@/lib/actions/communityAction";
 import { TProps } from "@/types/component/props";
 import { cfetch } from "@/utils/customFetch";
 import { useRouter } from "next/navigation";
@@ -18,11 +17,11 @@ export default function DeletePostButton({
     })
       .then((res) => res.json())
       .then(({ data }) => {
-        console.log(data);
+        // console.log(data);
         return data;
       })
       .catch((err) => {
-        console.error(err);
+        // console.error(err);
         return { state: false, message: "상태 업데이트에 실패했습니다." };
       });
 

src/app/(route)/layout.tsx

@@ -5,7 +5,7 @@ export default function MainLayout({ children }: TProps) {
   return (
     <>
       <Header />
-      <main className="min-h-full mt-16 py-20">
+      <main className="min-h-full mt-16 mb-100 py-20">
         <Container>{children}</Container>
       </main>
       <Footer />

src/app/(route)/my/post/page.tsx

@@ -38,7 +38,7 @@ export default async function MyPost() {
   if (!result.state) return notFound();
 
   const posts: PostDataFull[] = result.data;
-  console.log("posts", posts);
+  // console.log("posts", posts);
 
   return (
     <div className="w-full lg:w-[calc(100vw-240px-30px-2rem)] xl:w-[calc(1200px-280px-30px-2rem)]">

src/app/(route)/my/profile/_components/DeleteAccountConfirm.tsx

@@ -35,7 +35,7 @@ export default function DeleteAccountConfirm({ email }: { email: string }) {
         handleAlert("error", result.message);
       }
     } catch (error) {
-      console.log(error);
+      console.error(error);
     }
   }
 

src/app/(route)/my/profile/_components/EditProfile/FormEditProfile.tsx

@@ -58,7 +58,7 @@ export default function FormEditProfile({
         handleAlert("error", result.message);
       }
     } catch (error) {
-      console.log(error);
+      console.error(error);
     }
   }
 

src/app/(route)/my/profile/_components/EditProfileImage/FormEditProfileImageWithPreview.tsx

@@ -67,7 +67,6 @@ export default function FormEditProfileImageWithPreview({
   }
 
   async function onSave() {
-    console.log("save");
     try {
       const result = await updateUserData(id, { profile_img: imageUrl });
 
@@ -78,7 +77,7 @@ export default function FormEditProfileImageWithPreview({
         handleAlert("error", result.message);
       }
     } catch (error) {
-      console.log(error);
+      console.error(error);
     }
   }
 
@@ -98,7 +97,7 @@ export default function FormEditProfileImageWithPreview({
         handleAlert("error", result.message);
       }
     } catch (error) {
-      console.log(error);
+      console.error(error);
     }
   }
 

src/app/(route)/post/[postId]/page.tsx

@@ -41,7 +41,7 @@ export default async function PostDetail({
   const session = await getSession();
 
   const postDetail = await cfetch("/api/community/" + postId, {
-    next: { tags: ["community"] },
+    next: { tags: ["community", postId] },
   })
     .then((res) => res.json())
     .then(({ data }) => data)
@@ -94,10 +94,7 @@ export default async function PostDetail({
         </div>
         <LinkedStudyCard studyId={post.contents.linkedStudyId || ""} />
       </article>
-      <CommentArea
-        sessionId={session?.user.id || ""}
-        comments={post.comments}
-      />
+      <CommentArea sessionId={session?.user.id || ""} postId={postId} />
     </div>
   );
 }

src/app/(route)/post/page.tsx

@@ -35,7 +35,6 @@ export default async function CommunityPostList({
   })
     .then((res) => res.json())
     .then(({ data }) => {
-      console.log("data", data);
       return data;
     })
     .catch((err) => {

src/app/(route)/study/[studyPostId]/_components/Comment.tsx

@@ -1,5 +1,5 @@
 import ProfileImg from "@/common/Atoms/Image/ProfileImg";
-import CommentInput from "@/common/Organisms/Comment/CommentInput";
+import CommentInputForm from "@/common/Organisms/Comment/CommentInput";
 import { QandAIcon } from "@public/icons";
 import Image from "next/image";
 import CommentList, { TComment } from "./CommentList";
@@ -31,7 +31,7 @@ export default function Comment({ comments }: { comments: TComment[] }) {
           alt="프로필 이미지"
           className="my-[6px]"
         />
-        <CommentInput />
+        <CommentInputForm />
       </div>
     </div>
   );

src/app/(route)/study/[studyPostId]/_components/StudyDetail.tsx

@@ -6,16 +6,18 @@ import StudyDetailContent from "./StudyDetailContent";
 import StudyDetailThumbnail from "./StudyDetailThumbnail";
 import CommentArea from "@/common/Templates/CommentArea";
 import { comments } from "@/dummies/comments";
+import { getSession } from "@/auth";
 
-export default function StudyDetail() {
+export default async function StudyDetail() {
   const user = getStudyLeaderUser();
+  const session = await getSession();
   const { studyPostId: postId, thumbnailInfo, contents } = getStudyPostDetail();
 
   return (
     <div>
       <StudyDetailThumbnail thumbnailInfo={thumbnailInfo} />
       <StudyDetailContent contents={contents} user={user} />
-      <CommentArea comments={comments} sessionId="" />
+      <CommentArea postId={String(postId)} sessionId={session?.user.id || ""} />
     </div>
   );
 }

src/app/(route)/study/_components/StudyCategoryTabButtonList.tsx

@@ -36,16 +36,14 @@ export default function StudyCategoryTabButtonList({
   const clickHandler = (value: string) => {
     setSelected((prev) => {
       if (prev === value) {
+        onChangeQuery("");
         return "";
       }
+      onChangeQuery(value);
       return value;
     });
   };
 
-  useEffect(() => {
-    onChangeQuery(select);
-  }, [select]);
-
   return (
     <div className="flex gap-4 w-fit mb-11">
       {studyCategoryIcons.map(({ label, value, iconName }) => {

src/app/(studyroom)/_components/NotPrepare.tsx

@@ -0,0 +1,40 @@
+"use client";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+export default function NotPrepare() {
+  const router = useRouter();
+  return (
+    <div className="mx-auto mt-36 flex flex-col gap-10 items-center justify-center w-[480px]">
+      <h2 className="text-H2 text-black">아직 준비되지 않은 페이지에요.</h2>
+      <div className="svgBox w-[270px] h-[181px]">
+        <Image
+          src="/icons/404.png"
+          width={270}
+          height={181}
+          alt="404 Not-Found"
+        />
+      </div>
+      <div className="flex flex-col gap-6 items-center justify-center w-full h-[200px] rounded-[20px] bg-alt/50 border border-[#F7F7F8]">
+        <p className="text-[22px] font-semibold text-black">
+          돌아가서 다른 스터디를 탐색하는 건 어떨까요?
+        </p>
+        <div className="flex items-center gap-4">
+          <Link
+            href="/"
+            className="text-center px-6 py-3 rounded-[10px] border border-main-600 text-main-600 font-bold"
+          >
+            홈으로 이동
+          </Link>
+          <button
+            onClick={() => router.back()}
+            className="text-center px-6 py-3 rounded-[10px] border border-label-neutral text-label-neutral font-bold"
+          >
+            뒤로 돌아가기
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(studyroom)/studyroom/[studyroomId]/page.tsx

@@ -0,0 +1,5 @@
+import NotPrepare from "../../_components/NotPrepare";
+
+export default function StudyroomDashboard() {
+  return <NotPrepare />;
+}

src/app/(studyroom)/studyroom/[studyroomId]/setting/page.tsx

@@ -0,0 +1,5 @@
+import NotPrepare from "@/app/(studyroom)/_components/NotPrepare";
+
+export default function StudyroomSetting() {
+  return <NotPrepare />;
+}

src/app/(studyroom)/studyroom/layout.tsx

@@ -0,0 +1,14 @@
+import { Footer, Header, Container } from "@/common/Layout";
+import { TProps } from "@/types/component/props";
+
+export default function StudyroomLayout({ children }: TProps) {
+  return (
+    <>
+      <Header />
+      <main className="min-h-full mt-16 pt-20 pb-[180px] bg-card">
+        <Container>{children}</Container>
+      </main>
+      <Footer />
+    </>
+  );
+}

src/app/(studyroom)/studyroom/page.tsx

@@ -0,0 +1,5 @@
+import { notFound } from "next/navigation";
+
+export default function Studyroom() {
+  return notFound();
+}

src/app/_components/RecommendProStudies.tsx

@@ -1,6 +1,11 @@
 import StudyCardList from "@/common/Templates/CardList";
-import { filterStudies, getAllStudies } from "@/lib/actions/studyAction";
+import {
+  filterStudies,
+  getAllStudies,
+  getStudy,
+} from "@/lib/actions/studyAction";
 import { getUserData } from "@/lib/actions/userAction";
+import { StudyDataFull } from "@/types/model/StudyCard";
 
 async function getFavorStudies(userId: string) {
   // 1. profile에서 관심 카테고리 가져오기
@@ -9,7 +14,7 @@ async function getFavorStudies(userId: string) {
   const profile = await getUserData(userId);
 
   if (profile.state === false) {
-    const result = await getAllStudies();
+    const result = await getStudy();
     return result;
   }
 
@@ -24,13 +29,13 @@ export default async function RecommendProStudies({
   userId: string;
 }) {
   const result =
-    userId === "" ? await getAllStudies() : await getFavorStudies(userId);
+    userId === "" ? await getStudy() : await getFavorStudies(userId);
 
   if (result.state === false) {
     throw new Error("관심 카테고리의 스터디 정보 가져오기 실패");
   }
 
-  const recommend = result.data;
+  const recommend: StudyDataFull[] = result.data;
 
   return <StudyCardList studyCards={recommend} count={8} />;
 }

src/app/api/comment/[id]/reply/[reId]/route.ts

@@ -0,0 +1,51 @@
+import { deleteReply, updateReply } from "@/lib/actions/replyAction";
+import { NextRequest } from "next/server";
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: { id: string; reId: string } }
+) {
+  // const { searchParams } = request.nextUrl;
+  // const commentId = searchParams.get("parentId");
+  // const replyId = searchParams.get("replyId");
+  const commentId = params.id;
+  const replyId = params.reId;
+  const formData = await request.formData();
+
+  if (!commentId || !replyId) {
+    return Response.json(
+      { error: "comment 또는 reply id가 없습니다." },
+      { status: 400 }
+    );
+  }
+
+  const result = await updateReply(commentId, replyId, formData);
+  if (result.state === false) {
+    return Response.json({ error: result }, { status: 500 });
+  }
+  return Response.json({ data: result }, { status: 200 });
+}
+
+export async function DELETE(
+  _: NextRequest,
+  { params }: { params: { id: string; reId: string } }
+) {
+  // const { searchParams } = request.nextUrl;
+  // const commentId = searchParams.get("parentId");
+  // const replyId = searchParams.get("replyId");
+  const commentId = params.id;
+  const replyId = params.reId;
+
+  if (!commentId || !replyId) {
+    return Response.json(
+      { error: "comment 또는 reply id가 없습니다." },
+      { status: 400 }
+    );
+  }
+
+  const result = await deleteReply(commentId, replyId);
+  if (result.success === false) {
+    return Response.json({ error: result }, { status: 500 });
+  }
+  return Response.json({ data: result }, { status: 200 });
+}

src/app/api/comment/[id]/reply/route.ts

@@ -0,0 +1,31 @@
+import { getSession } from "@/auth";
+import { createReply } from "@/lib/actions/replyAction";
+import { NextRequest } from "next/server";
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  // 작성자 session id 확인
+  const session = await getSession();
+  const userId: string | undefined = session?.user.id;
+
+  // const { searchParams } = request.nextUrl;
+  // const userId = searchParams.get("userId");
+  // const commentId = searchParams.get("parentId");
+  const commentId = params.id;
+  const formData = await request.formData();
+
+  if (!userId || !commentId) {
+    return Response.json(
+      { error: "user 또는 comment id가 없습니다." },
+      { status: 400 }
+    );
+  }
+
+  const result = await createReply(userId, commentId, formData);
+  if (result.state === false) {
+    return Response.json({ error: result }, { status: 500 });
+  }
+  return Response.json({ data: result }, { status: 200 });
+}