feat: video -> 유튜브

backend/src/controllers/admin/getReportedComments.ts

@@ -15,17 +15,16 @@ export const getReportedComments = async (req: Request, res: Response) => {
     if (adminUser?.type !== "admin") {
       return res.status(401).send("Unauthorized. Fail to get access token");
     }
-    const repostedComments = await ReportedComment.find({})
+    const repostedComments = await ReportedComment.find({}, { comment: 1 })
       .populate({
         path: "comment",
-        populate: { path: "user" },
+        populate: { path: "user comments" },
       })
       .sort({ reportCount: -1 })
       .limit(limit)
-      .skip((page - 1) * limit)
-      .lean();
+      .skip((page - 1) * limit);
     const comments = repostedComments.map((post: any) => post.comment);
-
+    console.log("getCommentReport", comments);
     return res.status(200).send(comments);
   } catch (err) {
     console.log("getCommentReport", err);

backend/src/controllers/admin/getReportedPosts.ts

@@ -15,20 +15,20 @@ export const getReportedPosts = async (req: Request, res: Response) => {
     if (adminUser?.type !== "admin") {
       return res.status(401).send("Unauthorized. Fail to get access token");
     }
-    const repostedPosts = await ReportedPost.find({}, { post: 1, _id: 0 })
+    const repostedPosts = await ReportedPost.find({}, { post: 1 })
       .populate({
         path: "post",
-        populate: { path: "user" },
+        populate: { path: "user comments" },
       })
       .sort({ reportCount: -1 })
       .limit(limit)
       .skip((page - 1) * limit);
     console.log("repostedPosts", repostedPosts);
     const posts = repostedPosts.map((post: any) => post.post);
-    console.log("repostedComments", posts);
+    console.log("repostedPost", posts);
     return res.status(200).send(posts);
   } catch (err) {
-    console.log("getCommentReport", err);
+    console.log("repostedPost", err);
     return res.status(400).send("Fail get comment report");
   }
 };

backend/src/controllers/post/deleteComment.ts

@@ -3,6 +3,7 @@ import { getAccessTokenToheader } from "../../utils/getAccessTokenToHeader";
 import { getUserObjectId } from "../../utils/getUserObjectId";
 import { Comment } from "../../models/comment";
 import { Post } from "../../models/post";
+import { ReportedComment } from "../../models/repostComment";
 
 export const deleteComment = async (
   req: Request,
@@ -34,6 +35,7 @@ export const deleteComment = async (
         $set: { commentsCount: targetPost?.comments.length },
       }
     );
+    await ReportedComment.deleteOne({ comment: commentId });
     return res.status(200).send("Success delete comment");
   } catch (err) {
     console.log("deleteComment", err);

frontend/package.json

@@ -33,6 +33,7 @@
     "react-dom": "^18.2.0",
     "react-toastify": "^9.1.3",
     "react-type-animation": "^3.2.0",
+    "react-youtube": "^10.1.0",
     "tailwind-scrollbar-hide": "^1.1.7"
   },
   "devDependencies": {

frontend/src/app/admin/comment/page.tsx

@@ -1,5 +1,46 @@
-import React from "react";
+"use client";
+import { Fragment } from "react";
+
+import ModalTriggerButton from "@/components/common/button/ModalTriggerButton";
+import CommentCard from "@/components/common/card/comment/CommentCard";
+import MainContainer from "@/components/common/container/MainContainer";
+import MoreModal from "@/components/modalTemplate/moreModal/MoreModal";
+import useCheckAdmin from "@/hooks/queries/admin/useCheckAdmin";
+import { useGetReportedComments } from "@/hooks/queries/admin/useGetReportedComments";
+import { Comment } from "@/types/post";
+import { useInView } from "framer-motion";
 
 export default function AdminCommentPage() {
-  return <div>page</div>;
+  const { isError, isFetching: isCheckFetching, isSuccess } = useCheckAdmin();
+  const { data, fetchNextPage, isFetchingNextPage, isPending } = useGetReportedComments();
+
+  if (isCheckFetching) return <MainContainer>loading...</MainContainer>;
+  if (isError) return <MainContainer>권한이 없습니다.</MainContainer>;
+  if (isSuccess) {
+    return (
+      <MainContainer>
+        <form className="z-20 hidden flex-shrink-0 flex-col overflow-hidden  md:flex">
+          <div className="z-20 h-[610px] overflow-y-auto overflow-x-hidden  pl-5 font-poorStory scrollbar-hide ">
+            {data?.pages.map(({ pages, pageParams }) => (
+              <Fragment key={pageParams || 0}>
+                {pages.map((comment: Comment) => (
+                  <CommentCard
+                    key={comment._id}
+                    commentProfileImage={comment.user.profileImage}
+                    commentUserNickname={comment.user.nickname}
+                    commentContent={comment.content}
+                    commentCreatedAt={comment.createdAt}
+                  >
+                    <ModalTriggerButton loginRequired content="more">
+                      <MoreModal type="comment" targetId={comment._id} targetUser={comment.user} />
+                    </ModalTriggerButton>
+                  </CommentCard>
+                ))}
+              </Fragment>
+            ))}
+          </div>
+        </form>
+      </MainContainer>
+    );
+  }
 }

frontend/src/components/common/section/VideoSection.tsx

@@ -2,6 +2,7 @@
 
 import React, { useRef } from "react";
 import { TypeAnimation } from "react-type-animation";
+import YouTube, { YouTubeProps } from "react-youtube";
 
 import YoutubeIcon from "@/components/common/icon/YoutubeIcon";
 import { motion, useInView, Variants } from "framer-motion";
@@ -12,8 +13,9 @@ type PropsType = { title: SongType };
 type ContentType = {
   title: SongType;
   text: string;
-  video: string;
-  youtube: string;
+  // video: string;
+  youtubeLink: string;
+  youtubeId: string;
 };
 
 type GetPropsContent = {
@@ -52,8 +54,9 @@ const getPropsContent: GetPropsContent = {
 
     이 벅찬 봄날이 시들 때
     한 번만 나를 돌아봐요`,
-    video: require("/public/video/video1.mp4"),
-    youtube: "https://www.youtube.com/watch?v=kIiW3XRP7bU",
+    // video: require("/public/video/video1.mp4"),
+    youtubeLink: "https://www.youtube.com/watch?v=kIiW3XRP7bU",
+    youtubeId: "kIiW3XRP7bU",
   },
   정류장: {
     title: "정류장",
@@ -80,8 +83,9 @@ const getPropsContent: GetPropsContent = {
     코끝이 시려 올 때
     그럴 때 마침 일어설래요
     `,
-    video: require("/public/video/video2.mp4"),
-    youtube: "https://www.youtube.com/watch?v=2EMgY5E5Ook",
+    // video: require("/public/video/video2.mp4"),
+    youtubeLink: "https://www.youtube.com/watch?v=2EMgY5E5Ook",
+    youtubeId: "2EMgY5E5Ook",
   },
   화해: {
     title: "화해",
@@ -107,8 +111,9 @@ const getPropsContent: GetPropsContent = {
     붉은 눈가 언저리 새살이 돋았으니
     차가운 세상도 녹여내고 싶단
     꿈을 가득 품어냈으니`,
-    video: require("/public/video/video3.mp4"),
-    youtube: "https://www.youtube.com/watch?v=gC2zA8NRzXk",
+    // video: require("/public/video/video3.mp4"),
+    youtubeLink: "https://www.youtube.com/watch?v=gC2zA8NRzXk",
+    youtubeId: "gC2zA8NRzXk",
   },
   "사랑하게 될 거야": {
     title: "사랑하게 될 거야",
@@ -132,24 +137,37 @@ const getPropsContent: GetPropsContent = {
     불안한 내게 모난 돌을 쥐여주던
     깨진 조각 틈 새어 나온 눈물
     터뜨려 보네`,
-    video: require("/public/video/video4.mp4"),
-    youtube: "https://www.youtube.com/watch?v=h0KIWaUEIgQ",
+    // video: require("/public/video/video4.mp4"),
+    youtubeLink: "https://www.youtube.com/watch?v=h0KIWaUEIgQ",
+    youtubeId: "h0KIWaUEIgQ",
   },
 };
+
+const opts: YouTubeProps["opts"] = {
+  playerVars: { autoplay: 1 },
+};
 export default function VideoSection({ title }: PropsType) {
   const ref = useRef(null);
   const isInView = useInView(ref);
 
   return (
     <section className="relative inset-0 z-10 flex min-h-[100lvh] w-screen snap-start  overflow-hidden ">
-      <video
+      {/* <video
         className="absolute z-30 h-full w-screen overflow-y-hidden object-cover opacity-30 md:object-cover md:opacity-90"
         src={getPropsContent[title].video}
         autoPlay
         muted
         playsInline
         loop
-      ></video>
+      ></video> */}
+      <YouTube
+        iframeClassName="absolute z-30 h-screen w-screen overflow-y-hidden object-fit opacity-30 md:object-cover md:opacity-90"
+        videoId={getPropsContent[title].youtubeId}
+        opts={opts}
+        onReady={(e) => {
+          e.target.mute(); //소리 끔
+        }}
+      />
       <div className="absolute top-0 z-30 flex h-full w-screen bg-transparent bg-gradient-to-l from-transparent from-40%  via-[#101010] to-[#101010] md:from-0% md:via-70%" />
       <motion.div
         initial="onscreen"
@@ -165,7 +183,7 @@ export default function VideoSection({ title }: PropsType) {
         >
           {getPropsContent[title].title}
           <Link
-            href={getPropsContent[title].youtube}
+            href={getPropsContent[title].youtubeLink}
             className="flex items-center justify-center gap-8"
             target="_blank"
           >

frontend/src/components/modalTemplate/moreModal/MoreModal.tsx

@@ -71,7 +71,7 @@ export default function MoreModal({
             {targetUser._id !== user._id && (
               <button
                 onClick={() => handleOnClick("신고")}
-                className="h-12 w-full rounded-t-xl border-b-[1px] border-gray-400 text-red-500 hover:bg-[#383838]"
+                className="h-12 w-full rounded-t-xl   text-red-500 hover:bg-[#383838]"
               >
                 신고
               </button>
@@ -80,15 +80,15 @@ export default function MoreModal({
               <>
                 <button
                   onClick={() => handleOnClick("삭제")}
-                  className="h-12 w-full rounded-xl border-gray-400 text-red-500 hover:bg-[#383838]"
+                  className="h-12 w-full rounded-xl  text-red-500 hover:bg-[#383838]"
                 >
                   삭제
                 </button>
                 {type === "post" && (
                   <>
                     <button
                       onClick={() => handleOnClick("수정")}
-                      className="h-12 w-full rounded-xl border-b-[1px] border-t-[1px] border-gray-400 hover:bg-[#383838]"
+                      className="h-12 w-full rounded-xl  hover:bg-[#383838]"
                     >
                       수정
                     </button>
@@ -105,7 +105,7 @@ export default function MoreModal({
             )}
             <Link
               href={`/profile/${targetUser._id}`}
-              className="flex  h-12 w-full items-center justify-center rounded-xl  border-gray-400  text-center hover:bg-[#383838]"
+              className="flex  h-12 w-full items-center justify-center rounded-xl    text-center hover:bg-[#383838]"
             >
               사용자 정보
             </Link>

frontend/src/hooks/queries/useDeleteComment.ts

@@ -14,9 +14,11 @@ export default function useDeleteComment() {
   const { accessToken } = useContext(UserDataContext);
   return useMutation({
     mutationFn: (commentId: string) => deleteComment({ commentId, accessToken }),
-    onSuccess: async () => {
+    onSettled: async () => {
       await queryClient.invalidateQueries({ queryKey: queryKeys.boardPosts });
       await queryClient.invalidateQueries({ queryKey: queryKeys.recentPosts });
+    },
+    onSuccess: async () => {
       toast.success("댓글이 삭제되었습니다.");
     },
     onError: async (err: AxiosError) => {