feat(quiz): CommentPage분리 및 퀴즈 상세 페이지 내 위치 변경, 간격 조정 (#405)

* Comment영역 별도 페이지로 이동 후 위치 변경

* 퀴즈 상세 영역 내 간격 재조정

---------

Co-authored-by: dengoyoon <[email protected]>
Co-authored-by: chaerim kim <[email protected]>

src/app/quiz/components/Comment/Comments.tsx → src/app/quiz/[quizId]/@comment/page.tsx

@@ -1,30 +1,35 @@
+'use client';
+
 import { Comment, CommentForm, GetStartedButton } from '@/app/quiz/components';
+import {
+  useGetCommentListQuery,
+  useGetQuizDetailQuery,
+} from '@/app/quiz/hooks';
 import { useAuth } from '@/common';
 
-import { useGetCommentListQuery } from '../../hooks/useGetCommentListQuery';
-
-type CommentsProps = {
-  quizId: string;
-  isSubmitted: boolean;
+type Props = {
+  params: {
+    quizId: string;
+  };
 };
 
-export const Comments = ({ quizId, isSubmitted }: CommentsProps) => {
-  const {
-    data: comments,
-    // isLoading,
-    // isFetching,
-  } = useGetCommentListQuery(quizId);
+function CommentPage({ params: { quizId } }: Props) {
+  const { data: quizDetail } = useGetQuizDetailQuery(quizId);
+  const { data: comments } = useGetCommentListQuery(quizId);
   const { isLogin } = useAuth();
-  if (!comments) {
+
+  if (comments === undefined || quizDetail === undefined) {
     return null;
   }
 
+  const { isSubmitted } = quizDetail;
+
   const isEmptyComment = comments?.length === 0;
 
   return (
     <div>
       {isSubmitted && (
-        <div className="mt-32px flex flex-col gap-32px">
+        <div className="mt-48px flex flex-col gap-32px">
           {isLogin && (
             <CommentForm quizId={quizId} commentCount={comments?.length} />
           )}
@@ -58,4 +63,6 @@ export const Comments = ({ quizId, isSubmitted }: CommentsProps) => {
       )}
     </div>
   );
-};
+}
+
+export default CommentPage;

src/app/quiz/[quizId]/@detail/page.tsx

@@ -14,8 +14,6 @@ import {
 import { OX, QuizButtonType } from '@/app/quiz/models/quiz';
 import { Text, bgColor } from '@/common';
 
-import { Comments } from '../../components/Comment/Comments';
-
 type Props = {
   params: {
     quizId: string;
@@ -142,7 +140,6 @@ function DetailPage({ params: { quizId } }: Props) {
           </div>
         </div>
       </section>
-      <Comments quizId={quizId} isSubmitted={isSubmitted} />
     </div>
   );
 }

src/app/quiz/[quizId]/@recommendation/page.tsx

@@ -8,12 +8,12 @@ type Props = {
   };
 };
 
-async function RecommendatonPage({ params: { quizId } }: Props) {
+async function RecommendationPage({ params: { quizId } }: Props) {
   const quizRecommendModels = await getRecommendationByQuizId(quizId);
   const isQuizzesExist = quizRecommendModels.length !== 0;
   return (
     isQuizzesExist && (
-      <div className="mt-64px">
+      <div className="mt-48px">
         <Text className="inline-block" typo="subheadingBold" color="gray10">
           더 많은 퀴즈를 확인해보세요
         </Text>
@@ -26,4 +26,4 @@ async function RecommendatonPage({ params: { quizId } }: Props) {
   );
 }
 
-export default RecommendatonPage;
+export default RecommendationPage;

src/app/quiz/[quizId]/layout.tsx

@@ -7,6 +7,7 @@ import { fetchQuizDetailByQuizID } from '../remotes/quiz';
 type Props = {
   detail: React.ReactNode;
   recommendation: React.ReactNode;
+  comment: React.ReactNode;
   params: { quizId: string };
 };
 
@@ -26,12 +27,13 @@ export async function generateMetadata({
   };
 }
 
-function QuizIdLayout({ detail, recommendation }: Props) {
+function QuizIdLayout({ detail, recommendation, comment }: Props) {
   return (
     <main className="pb-80px">
       <QuizProvider>
         {detail}
         {recommendation}
+        {comment}
         <ScrollToTopButton />
       </QuizProvider>
     </main>

src/app/quiz/hooks/index.ts

@@ -1,3 +1,7 @@
 export * from './useCommentListRef';
 export * from './useGetQuizDetailQuery';
+export * from './useGetCommentListQuery';
+export * from './useLikeCommentMutation';
+export * from './useSubmitCommentMutation';
 export * from './useSubmitQuizMutation';
+export * from './useUnlikeCommentMutation';