feat: Qna 데이터 받아오는거 추가

frontend/src/hooks/api/useQnaDetail.js

@@ -0,0 +1,10 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useQnaDetail(id) {
+  return useSuspenseQuery({
+    queryKey: ['qnaDetail', id],
+    queryFn: () => instance.get(`${API_URL}/qna/${id}`),
+  });
+}

frontend/src/hooks/api/useQnas.js

@@ -0,0 +1,10 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import instance from '../../utils/axios/instance';
+import { API_URL } from '../../constants';
+
+export function useQnas(id) {
+  return useSuspenseQuery({
+    queryKey: ['qnalist', id],
+    queryFn: () => instance.get(`${API_URL}/qna/all/${id}`),
+  });
+}

frontend/src/pages/LearningLectureDetailPage/LearningLectureDetailPage.jsx

@@ -2,19 +2,16 @@ import ArticlePreview from '../../components/Article/ArticlePreview/ArticlePrevi
 import styles from './LearningLectureDetailPage.module.css';
 import { useNotices } from '../../hooks/api/useNotices';
 import { useParams } from 'react-router-dom';
+import { useQnas } from '../../hooks/api/useQnas';
 
 export default function LearningLectureDetailPage() {
   const { lectureId } = useParams();
   const { data: noticesData } = useNotices(lectureId);
   const notices = noticesData?.data;
+  const { data: qnasData } = useQnas(lectureId);
+  const questions = qnasData?.data;
   // TODO: QnA 훅 작성 후 사용 및 3개까지만 slice 추가
-  const { data: questions } = {
-    data: [
-      { id: 2, title: 'Question1', sub: '7-12 오전 11:40:57' },
-      { id: 3, title: 'Question2', sub: '7-12 오전 11:40:57' },
-      { id: 4, title: '헷갈리는게 있어요', sub: '7-15 오전 11:40:57' },
-    ],
-  };
+
   return (
     <section className={styles.previews}>
       <ArticlePreview

frontend/src/pages/NoticeListPage/NoticeListPage.jsx

@@ -17,7 +17,9 @@ export default function NoticeListPage() {
         <ArticleLink
           key={`${notice.id}`}
           title={notice.title}
-          sub={notice.date}
+          //Todo: createdAt을 이용하여 날짜 표시했는데 Q&A에서 나오는 날짜 형식이랑 공지사항에서 나오는 날짜 형식이랑 달라서 수정해야함.
+          // + Q&A 글쓰기 버튼이 너무 커서 글 밀어내는 느낌 있음.
+          sub={`${notice.createdAt[0]}. ${notice.createdAt[1]}. ${notice.createdAt[2]}. ${notice.createdAt[3]}:${notice.createdAt[4]}`}
           to={`${notice.id}`}
         />
       ))}

frontend/src/pages/QuestionDetailPage/QuestionDetailPage.jsx

@@ -1,22 +1,22 @@
 import { ArticleDetail } from '../../components/Article';
+import { useParams } from 'react-router-dom';
+import { useQnaDetail } from '../../hooks/api/useQnaDetail';
 
 export default function QuestionDetailPage() {
-  const { data } = {
-    data: {
-      title: '헷갈리는게 있어요',
-      author: '이재용',
-      content: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis sed dolorem vitae?',
-      answer: { answerId: '144632619Ux15326', content: '우리 재용이는 참 예의가 없구나' },
-    },
-  };
+  const params = useParams();
+  const qnaId = params.questionId;
+  const { data } = useQnaDetail(qnaId);
+  const qna = data?.data;
+  const answer = qna?.answer;
+  console.log(qna.author);
 
   return (
     <ArticleDetail
       topic="Q&A"
-      title={data.title}
-      author={data.author}
-      content={data.content}
-      answer={data.answer.content}
+      title={qna.title}
+      author={qna.username}
+      content={qna.content}
+      answer={answer}
     />
   );
 }

frontend/src/pages/QuestionListPage/QuestionListPage.jsx

@@ -1,15 +1,12 @@
 import { ArticleLink } from '../../components/ArticleLink';
 import ArticleBoard from '../../components/ArticleBoard/ArticleBoard';
+import { useParams } from 'react-router-dom';
+import { useQnas } from '../../hooks/api/useQnas';
 
 export default function QuestionListPage() {
-  const { data: questions } = {
-    data: [
-      { id: 2, title: 'Question1', sub: '7-12 오전 11:40:57' },
-      { id: 3, title: 'Question2', sub: '7-12 오전 11:40:57' },
-      { id: 4, title: '헷갈리는게 있어요', sub: '7-15 오전 11:40:57' },
-      { id: 5, title: '궁금궁금', sub: '7-15 오전 11:40:57' },
-    ],
-  };
+  const { lectureId } = useParams();
+  const { data } = useQnas(lectureId);
+  const questions = data?.data;
 
   return (
     <ArticleBoard
@@ -18,9 +15,9 @@ export default function QuestionListPage() {
     >
       {questions.map((question) => (
         <ArticleLink
-          key={`${question.title}${question.sub}`}
+          key={`${question.title}${question.createtAt}`}
           title={question.title}
-          sub={question.sub}
+          sub={`${new Date(question.createtAt).toLocaleDateString()} ${new Date(question.createtAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`}
           to={`${question.id}`}
         />
       ))}