Merge pull request #33 from TeamBNBN/fe/QuestionDetailPage

[Front-End] feat: Fe/QuestionDetailPage 추가

frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx

@@ -2,10 +2,9 @@ import { Link } from 'react-router-dom';
 import styles from './ArticleDetail.module.css';
 import ArticleDetailAnswer from './ArticleDetailAnswer/ArticleDetailAnswer';
 
-export default function ArticleDetail() {
-  const title = '헷갈리는게 있어요';
-  const author = '이재용';
-  const content = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis sed dolorem vitae?';
+export default function ArticleDetail({ topic, title, author, content, answer = null }) {
+  // TODO: 답변 작성 기능 추가
+  console.log(answer);
   return (
     <div className={styles.articleDetail}>
       <header>
@@ -15,7 +14,7 @@ export default function ArticleDetail() {
             className={styles.backButton}
           >
             <div>-</div>
-            <div className={styles.backText}>Q&A</div>
+            <div className={styles.backText}>{topic}</div>
           </Link>
         </div>
         <div>
@@ -26,7 +25,7 @@ export default function ArticleDetail() {
       <div>
         <p className={styles.content}>{content}</p>
       </div>
-      <ArticleDetailAnswer />
+      {answer && <ArticleDetailAnswer answer={answer} />}
     </div>
   );
 }

frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx

@@ -1,13 +1,13 @@
 import styles from './ArticleDetailAnswer.module.css';
 
-export default function ArticleDetailAnswer() {
+export default function ArticleDetailAnswer({ answer }) {
   return (
     <div className={styles.answer}>
       <div className={styles.answerHeader}>
         <div>--</div>
         <div className={styles.author}>선생님의 답변</div>
       </div>
-      <div className={styles.content}>Lorem ipsum dolor sit amet.</div>
+      <div className={styles.content}>{answer}</div>
     </div>
   );
 }

frontend/src/pages/QuestionDetailPage/QuestionDetailPage.jsx

@@ -0,0 +1,55 @@
+import LectureHeader from '../../components/LectureHeader/LectureHeader';
+import { SideBar, SideLink, SideItem } from '../../components/SideBar';
+import { MaxWidthLayout } from '../../components/Layout';
+import { ArticleDetail } from '../../components/Article';
+
+export default function QuestionDetailPage() {
+  const lecture = {
+    title: '정보처리기사 실기 완전정복',
+    tutor: '박정민',
+    isLive: true,
+  };
+  const title = '헷갈리는게 있어요';
+  const author = '이재용';
+  const content = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis sed dolorem vitae?';
+  const answer = { answerId: '144632619Ux15326', content: '우리 재용이는 참 예의가 없구나' };
+  return (
+    <>
+      <LectureHeader
+        title={lecture.title}
+        tutor={lecture.tutor}
+        isLive={lecture.isLive}
+      />
+      <MaxWidthLayout hasSideBar>
+        <aside>
+          <SideBar title="바로가기">
+            <SideLink to={'/'}>공지사항</SideLink>
+            <SideLink to={'/'}>Q&A</SideLink>
+            <SideLink to={'/'}>수업자료</SideLink>
+            <SideLink to={'/'}>퀴즈</SideLink>
+          </SideBar>
+
+          <SideBar title="내 학습">
+            <SideItem
+              name={'학습 진도'}
+              sub={'2 / 12'}
+            />
+            <SideItem
+              name={'퀴즈 점수'}
+              sub={'80%'}
+            />
+          </SideBar>
+        </aside>
+        <main>
+          <ArticleDetail
+            topic="Q&A"
+            title={title}
+            author={author}
+            content={content}
+            answer={answer.content}
+          />
+        </main>
+      </MaxWidthLayout>
+    </>
+  );
+}